/* The Shoe Plug Rwanda — Premium marketplace layer v3.
   Adds polish without replacing the existing design system. */
:root{
  --tsp-ink:#111214;--tsp-muted:#6b6e75;--tsp-line:rgba(17,18,20,.09);--tsp-paper:#fff;--tsp-soft:#f6f6f3;--tsp-accent:#b48738;
  --tsp-radius:24px;--tsp-shadow:0 18px 55px rgba(17,18,20,.10);
}
html.tsp-premium-v3{scroll-behavior:smooth;background:#fff}
body{background:#fff;color:var(--tsp-ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;font-size:0}
button,a,input,select,textarea{font:inherit}
.product-card{contain:layout paint style;content-visibility:auto;contain-intrinsic-size:420px 520px;border:1px solid var(--tsp-line);box-shadow:0 8px 28px rgba(17,18,20,.055);background:#fff;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--tsp-shadow);border-color:rgba(17,18,20,.15)}
.product-card .photo{overflow:hidden;background:linear-gradient(180deg,#fafaf8,#f3f3ef)}
.product-card .photo img{transition:transform .45s cubic-bezier(.2,.65,.2,1);will-change:transform}
.product-card:hover .photo img{transform:scale(1.025)}
.card-actions .primary-action,.btn.primary{box-shadow:0 8px 18px rgba(17,18,20,.10)}
.page-btn{min-width:44px;min-height:44px;border-radius:999px}
.pagination-controls{gap:10px}
.pagination-numbers{display:flex;align-items:center;gap:6px}
.page-btn.page-number{font-weight:700}
.page-btn.page-number.active{box-shadow:0 8px 20px rgba(17,18,20,.11)}
.hero-editorial-product,.hero{isolation:isolate}
.hero-editorial-product:after{content:"";position:absolute;inset:auto 4% 2.5%;height:22%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.10),transparent 65%);filter:blur(14px);opacity:.7;pointer-events:none;z-index:-1}
.hero-editorial-product .hero-shoe img{filter:drop-shadow(0 25px 26px rgba(0,0,0,.18));}
.customer-chat-card{width:min(680px,calc(100vw - 28px));border:1px solid rgba(17,18,20,.10);box-shadow:0 35px 90px rgba(0,0,0,.18)}
.chat-product-card{border:1px solid var(--tsp-line);border-radius:18px;padding:10px;background:#fafaf8}
.chat-bubble{border-radius:18px;box-shadow:0 5px 18px rgba(17,18,20,.06)}
.chat-bubble.seller{border:1px solid rgba(180,135,56,.24)}
/* Admin */
.admin-top{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.88)!important;border-bottom:1px solid var(--tsp-line)!important}
.manager-bar,.panel,.stat-grid article,.product-row,.admin-message{border-color:var(--tsp-line)!important}
.product-row,.admin-message{box-shadow:0 8px 25px rgba(17,18,20,.045)!important}
.settings-form label{background:#fff;border:1px solid var(--tsp-line);border-radius:18px;padding:12px 14px}
.settings-form select,.settings-form input{border:0!important;outline:0!important;background:transparent!important}
.tsp-editor-modal{position:fixed;inset:0;z-index:100000;background:rgba(16,16,16,.42);display:grid;place-items:center;padding:18px}
.tsp-editor-card{width:min(760px,100%);max-height:min(92dvh,900px);overflow:auto;background:#fff;border:1px solid rgba(17,18,20,.10);border-radius:26px;box-shadow:0 40px 100px rgba(0,0,0,.22);padding:22px}
.tsp-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tsp-editor-grid label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#5d6067}
.tsp-editor-grid input,.tsp-editor-grid select,.tsp-editor-grid textarea{width:100%;border:1px solid var(--tsp-line);border-radius:14px;padding:12px 13px;outline:none;background:#fbfbf9}
.tsp-editor-grid textarea{min-height:100px;resize:vertical}
.tsp-editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 24%);padding-top:18px}
.tsp-admin-filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tsp-admin-filterbar button{border:1px solid var(--tsp-line);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer}
.tsp-admin-filterbar button.active{background:#111;color:#fff;border-color:#111}
.tsp-admin-kpi-note{font-size:11px;color:#747780}
@media(max-width:700px){
  html{scroll-behavior:auto}
  .product-card{transition:none;box-shadow:0 5px 18px rgba(17,18,20,.045)}
  .product-card:hover{transform:none;box-shadow:0 5px 18px rgba(17,18,20,.045)}
  .product-card:hover .photo img{transform:none}
  .hero-editorial-product:after{display:none}
  .hero-editorial-product .hero-shoe img{filter:drop-shadow(0 16px 18px rgba(0,0,0,.14))}
  .modal-card,.drawer{box-shadow:0 25px 60px rgba(0,0,0,.18)}
  .tsp-editor-card{border-radius:20px;padding:15px}
  .tsp-editor-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .product-card{content-visibility:auto;contain-intrinsic-size:330px 430px}
  .section{contain:layout style}
  .pagination-controls{gap:6px}
  .page-btn{min-width:40px;min-height:40px}
  .page-btn.page-prev span,.page-btn.page-next span{font-size:12px}
  .tsp-premium-v3 .search-panel{box-shadow:0 20px 70px rgba(0,0,0,.18)}
  .admin-top{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.tsp-settings-live-note{grid-column:1/-1;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#111214,#2b2c30);color:#fff;display:grid;gap:4px;margin-top:4px}.tsp-settings-live-note strong{font-size:13px}.tsp-settings-live-note span{font-size:12px;opacity:.72}.admin-stock-meter{height:4px;background:#ecece8;border-radius:99px;overflow:hidden;margin-top:8px;max-width:280px}.admin-stock-meter span{display:block;height:100%;background:#111214;border-radius:inherit}.admin-filter-select{border:1px solid var(--tsp-line);border-radius:12px;padding:10px 12px;background:#fff}.product-row-main{min-width:0}

/* === PREMIUM MEDIA + HERO FIT V4 ===
   Keep every shoe fully visible, centered and responsive.
   Reserve a dedicated caption band so the hero card never covers the product photo.
*/
.product-card .photo,
.wish-card .photo,
.compare-card-photo,
.chat-product-media,
.detail-photo,
.manage-thumb{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:radial-gradient(circle at 50% 38%,#fff 0,#f6f7f8 52%,#eceff2 100%)!important;
}
.product-card .photo img,
.wish-card .photo img,
.compare-card-photo img,
.chat-product-media img,
.detail-photo img,
.manage-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
.product-card .photo img,
.wish-card .photo img,
.compare-card-photo img{
  padding:clamp(8px,1.3vw,18px)!important;
}
.detail-photo img{
  padding:clamp(10px,2vw,28px)!important;
}
.chat-product-media img,
.manage-thumb img{
  padding:8px!important;
}

/* Hero: product owns the upper visual area; the card gets its own bottom band. */
.hero-editorial-product{
  min-width:0!important;
  width:100%!important;
  overflow:visible!important;
}
.hero-editorial-product .hero-shoe{
  position:absolute!important;
  inset:2% 4% 25% 4%!important;
  display:grid!important;
  place-items:center!important;
  z-index:2!important;
  min-width:0!important;
}
.hero-editorial-product .hero-shoe-slide{
  min-width:0!important;
  min-height:0!important;
}
.hero-editorial-product .hero-shoe img{
  display:block!important;
  width:min(100%,680px)!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:clamp(6px,1.2vw,16px)!important;
  transform:rotate(-3deg)!important;
  mix-blend-mode:multiply!important;
}
.hero-editorial-product .hero-product-card{
  left:clamp(4%,18px,5%)!important;
  right:clamp(4%,18px,5%)!important;
  bottom:1.5%!important;
  width:auto!important;
  max-width:none!important;
  z-index:7!important;
}
.hero-editorial-product .hero-product-glow{
  inset:4% 2% 1%!important;
}

/* Compare dialog: clean, optically centered close control with one X only. */
#compareModal .compare-modal-card{
  position:relative!important;
  overflow:hidden!important;
}
#compareModal .compare-modal-card > .close{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  border:1px solid rgba(23,32,51,.11)!important;
  background:rgba(255,255,255,.97)!important;
  color:#182132!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:0!important;
  z-index:50!important;
  box-shadow:0 10px 28px rgba(23,32,51,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
  transform:none!important;
}
#compareModal .compare-modal-card > .close::before,
#compareModal .compare-modal-card > .close::after{
  content:""!important;
  grid-area:1/1!important;
  width:16px!important;
  height:1.7px!important;
  margin:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  display:block!important;
}
#compareModal .compare-modal-card > .close::before{transform:rotate(45deg)!important}
#compareModal .compare-modal-card > .close::after{transform:rotate(-45deg)!important}
#compareModal .compare-modal-card > .close:hover{transform:translateY(-1px) scale(1.035)!important}
#compareModal .compare-modal-head{padding-right:62px!important}

/* Keep the comparison product photography centered and uncropped. */
#compareModal .compare-card-photo{
  min-width:0!important;
  width:100%!important;
  height:clamp(150px,18vw,210px)!important;
  padding:0!important;
}
#compareModal .compare-card-photo img{padding:12px!important}

/* Desktop / tablet hero sizing. */
@media (min-width:901px){
  .hero-editorial-product{min-height:600px!important}
  .hero-editorial-product .hero-shoe{inset:2% 5% 24% 5%!important}
}
@media (max-width:900px){
  .hero-editorial-product{min-height:540px!important}
  .hero-editorial-product .hero-shoe{inset:2% 3% 28% 3%!important}
}
@media (max-width:600px){
  .hero-editorial-product{min-height:500px!important}
  .hero-editorial-product .hero-shoe{inset:2% 2% 31% 2%!important}
  .hero-editorial-product .hero-shoe img{padding:4px!important;transform:rotate(-2deg)!important}
  .hero-editorial-product .hero-product-card{left:2.5%!important;right:2.5%!important;bottom:1.2%!important}
}
@media (max-width:430px){
  .hero-editorial-product{min-height:460px!important}
  .hero-editorial-product .hero-shoe{inset:1% 1% 34% 1%!important}
  .hero-editorial-product .hero-product-card{left:2%!important;right:2%!important;bottom:1%!important}
}
@media (max-width:360px){
  .hero-editorial-product{min-height:430px!important}
  .hero-editorial-product .hero-shoe{inset:1% 1% 36% 1%!important}
}

/* Mobile: no hover transforms and less costly visual work. */
@media (max-width:700px){
  .product-card .photo img,
  .wish-card .photo img,
  .compare-card-photo img,
  .detail-photo img,
  .chat-product-media img{transition:none!important;filter:none!important}
  .product-card .photo img{padding:7px!important}
  .detail-photo img{padding:8px!important}
}
@media (prefers-reduced-motion:reduce){
  #compareModal .compare-modal-card > .close{transition:none!important}
}


/* === PREMIUM SMART HEADER VISIBILITY === */
.header{
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform .34s cubic-bezier(.22,.7,.2,1),box-shadow .28s ease,background .28s ease;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.tsp-header-hidden .header{
  transform:translate3d(0,-110%,0)!important;
  box-shadow:none!important;
}
@media(max-width:1100px){
  .header{transition-duration:.30s}
}
@media(prefers-reduced-motion:reduce){
  .header{transition:none!important}
}


/* UNIVERSAL SHOP CONTROLS — final responsive pass */
.filter-toolbar{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto minmax(72px,auto)!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  padding:10px!important;
  border-radius:18px!important;
  overflow:visible!important;
}
.filter-trigger,.sort-button,.toolbar-action,.filter-summary{
  box-sizing:border-box!important;
  min-width:0!important;
}
.filter-trigger,.sort-button,.toolbar-action{
  min-height:44px!important;
  white-space:nowrap!important;
}
.filter-trigger{
  padding-inline:14px!important;
  justify-content:center!important;
}
.filter-trigger span{white-space:nowrap!important}
.filter-trigger b,.toolbar-action b{
  min-width:20px!important;
  height:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  line-height:1!important;
  flex:0 0 auto!important;
}
.sort-wrap{min-width:0!important;width:100%!important}
.sort-button{
  width:100%!important;
  min-width:0!important;
  justify-content:space-between!important;
  padding-inline:14px!important;
}
.sort-button svg{flex:0 0 auto!important}
.sort-menu{
  min-width:min(260px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(62vh,430px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.sort-menu button{min-height:44px!important}
.toolbar-action{
  padding-inline:14px!important;
  justify-content:center!important;
}
.filter-summary{
  display:block!important;
  max-width:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding-inline:6px!important;
  color:#667085!important;
  font-size:12px!important;
  font-weight:750!important;
}
@media (max-width:900px){
  .filter-toolbar{
    grid-template-columns:auto minmax(150px,1fr) auto!important;
    grid-template-areas:"filter sort compare" "summary summary summary"!important;
    align-items:center!important;
  }
  .filter-trigger{grid-area:filter!important}
  .sort-wrap{grid-area:sort!important}
  .compareBtn,.toolbar-action{grid-area:compare!important}
  .filter-summary{grid-area:summary!important;padding:4px 2px 0!important}
}
@media (max-width:560px){
  .filter-toolbar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:"filter sort" "compare summary"!important;
    gap:8px!important;
    padding:8px!important;
  }
  .filter-trigger,.sort-button,.toolbar-action{min-height:42px!important;font-size:11px!important}
  .filter-trigger{padding-inline:11px!important}
  .sort-button{padding-inline:11px!important}
  .toolbar-action{padding-inline:10px!important}
  .filter-summary{font-size:10.5px!important;text-align:right!important;padding:0 4px 0 0!important}
  .sort-menu{
    position:fixed!important;
    top:calc(env(safe-area-inset-top,0px) + 58px)!important;
    right:12px!important;
    left:auto!important;
    width:min(290px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    max-height:min(58vh,390px)!important;
    z-index:1000!important;
  }
}
@media (max-width:380px){
  .filter-toolbar{gap:6px!important;border-radius:15px!important}
  .filter-trigger,.sort-button,.toolbar-action{min-height:40px!important;font-size:10.5px!important}
  .filter-trigger svg{width:14px!important;height:14px!important}
  .sort-button svg{width:14px!important;height:14px!important}
  .filter-trigger span{overflow:hidden!important;text-overflow:ellipsis!important}
  .filter-summary{font-size:10px!important}
}
@media (max-width:320px){
  .filter-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .filter-trigger,.sort-button,.toolbar-action{min-height:38px!important;font-size:10px!important}
  .filter-trigger,.sort-button,.toolbar-action{padding-inline:9px!important}
}

/* Keep control text stable after click/focus/hover. */
.filter-trigger,.filter-trigger:hover,.filter-trigger:focus,.filter-trigger:active,
.sort-button,.sort-button:hover,.sort-button:focus,.sort-button:active,
.toolbar-action,.toolbar-action:hover,.toolbar-action:focus,.toolbar-action:active{
  color:#172033!important;
}

/* === PREMIUM INSTAGRAM-STYLE ORDER CHAT === */
.chat-action-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:10px 16px;border-top:1px solid rgba(20,20,22,.06);border-bottom:1px solid rgba(20,20,22,.06);background:rgba(250,250,250,.92);overflow-x:auto;scrollbar-width:none}.chat-action-bar::-webkit-scrollbar{display:none}.chat-action-pill{appearance:none;border:1px solid rgba(20,20,22,.12);background:#fff;border-radius:999px;padding:8px 13px;font:600 12px/1 inherit;white-space:nowrap;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.05)}.chat-action-pill.active{background:#111;color:#fff;border-color:#111}.chat-order-state{margin-left:auto;border-radius:999px;padding:8px 12px;white-space:nowrap;font-size:11px;font-weight:700;background:#f2f2f2}.chat-order-state.accepted{background:#eaf7ef;color:#176b38}.chat-order-state.declined{background:#fff0f0;color:#a22222}.chat-order-state.pending{background:#fff8e8;color:#876000}.chat-order-state.completed{background:#eef2ff;color:#3348a7}.chat-order-card-inline{margin-top:9px;padding:10px 11px;border:1px solid rgba(20,20,22,.09);border-radius:15px;background:linear-gradient(180deg,#fff,#fafafa);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.chat-order-card-inline b,.chat-order-card-inline span{display:block}.chat-order-card-inline span{font-size:11px;color:#6a6a6a;margin-top:3px}.chat-order-status-pill{font-size:10px;padding:6px 9px;border-radius:999px;background:#f1f1f1}.chat-order-status-pill.accepted{background:#eaf7ef;color:#176b38}.chat-order-status-pill.declined{background:#fff0f0;color:#a22222}.chat-order-status-pill.pending{background:#fff8e8;color:#876000}.chat-order-status-pill.completed{background:#eef2ff;color:#3348a7}.chat-view-order-link{grid-column:1/-1;border:0;background:none;padding:3px 0;text-align:left;font:700 11px/1.2 inherit;cursor:pointer}.customer-order-sheet{width:min(520px,calc(100vw - 28px));max-height:min(80vh,700px);overflow:auto;background:#fff;border:1px solid rgba(20,20,22,.1);border-radius:28px;padding:24px;box-shadow:0 35px 90px rgba(0,0,0,.2);position:relative}.customer-order-sheet .close{position:absolute;right:14px;top:12px}.customer-order-sheet h2{margin:5px 0 18px}.customer-order-sheet-product{display:flex;gap:14px;align-items:center;padding:13px;border:1px solid rgba(20,20,22,.08);border-radius:20px}.customer-order-sheet-product img{width:84px;height:84px;object-fit:contain;border-radius:14px;background:#f7f7f7}.customer-order-sheet-product span,.customer-order-sheet-product strong{display:block}.customer-order-sheet-product strong{margin-top:7px;font-size:18px}.customer-order-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.customer-order-sheet-grid span{border:1px solid rgba(20,20,22,.07);border-radius:14px;padding:11px}.customer-order-sheet-grid b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777;margin-bottom:5px}@media(max-width:480px){.customer-order-sheet{padding:20px;border-radius:24px}.chat-action-bar{padding:9px 12px}.chat-action-pill{padding:7px 11px}}

/* FULL-SCREEN CUSTOMER CHAT / ORDER EXPERIENCE — premium 2026 */
#customerChatModal{padding:0!important;align-items:stretch!important;justify-content:stretch!important;background:rgba(8,12,18,.72)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
#customerChatModal .customer-chat-card{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;min-height:100dvh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;gap:0!important;overflow:hidden!important;background:#fff!important;box-shadow:none!important}
#customerChatModal .customer-chat-card:before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(205,162,78,.7),transparent);pointer-events:none;z-index:6}
#customerChatModal .chat-head{min-height:150px;padding:28px 84px 22px 28px!important;background:linear-gradient(135deg,#fff 0%,#fafbfc 62%,#f5f7fa 100%)!important;border-bottom:1px solid #e9edf2!important;position:relative;z-index:2}
#customerChatModal .chat-product-hero{width:100%;display:flex;align-items:center;gap:22px;min-width:0}
#customerChatModal .chat-product-media{width:104px;height:104px;flex:0 0 104px;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,#f8f9fb,#e9edf2);border:1px solid #e4e8ee;box-shadow:0 14px 35px rgba(20,31,49,.10);display:grid;place-items:center}
#customerChatModal .chat-product-media img{width:100%;height:100%;object-fit:contain;display:block}
#customerChatModal .chat-product-info{min-width:0}
#customerChatModal .chat-product-info h2{font-size:clamp(25px,3vw,38px)!important;line-height:1.02!important;letter-spacing:-.055em!important;margin:5px 0 7px!important}
#customerChatModal .chat-product-name{font-size:15px!important;font-weight:800!important;margin:0 0 8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#customerChatModal .chat-product-price-row{display:flex;align-items:center;gap:10px}
#customerChatModal .chat-product-price-row strong{font-size:17px}
#customerChatModal .chat-live-pill{padding:6px 9px!important}
#customerChatModal .chat-product-info .muted{margin:8px 0 0!important;font-size:11px!important;color:#697386!important}
#customerChatModal .customer-chat-card>.close{position:absolute!important;top:max(18px,env(safe-area-inset-top))!important;right:max(18px,env(safe-area-inset-right))!important;width:46px!important;height:46px!important;border-radius:50%!important;background:rgba(255,255,255,.94)!important;border:1px solid #dfe4ea!important;color:#172033!important;box-shadow:0 10px 30px rgba(17,24,39,.12)!important;font-size:0!important;display:grid!important;place-items:center!important;z-index:20!important;transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important}
#customerChatModal .customer-chat-card>.close:before{content:"";width:17px;height:17px;background:linear-gradient(45deg,transparent 46%,currentColor 47%,currentColor 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,currentColor 47%,currentColor 53%,transparent 54%);display:block}
#customerChatModal .customer-chat-card>.close:hover{transform:scale(1.05)!important;box-shadow:0 14px 34px rgba(17,24,39,.18)!important;background:#fff!important}
#customerChatModal .customer-chat-thread{height:auto!important;min-height:0!important;max-height:none!important;padding:28px clamp(18px,5vw,80px)!important;background:#f6f8fb!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin}
#customerChatModal .chat-bubble-row{max-width:980px;margin-left:auto;margin-right:auto}
#customerChatModal .chat-bubble{font-size:14px!important;line-height:1.6!important;padding:13px 16px!important;border-radius:19px!important;max-width:min(78%,720px)!important}
#customerChatModal .chat-bubble p{font-size:14px!important}
#customerChatModal .customer-chat-form{padding:16px clamp(16px,5vw,80px) calc(16px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #e8ecf1!important;box-shadow:0 -12px 35px rgba(20,31,49,.07)!important;gap:10px!important}
#customerChatModal .chat-compose-row{max-width:980px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
#customerChatModal .chat-name-field,#customerChatModal .chat-phone-field{font-size:10px!important}
#customerChatModal .customer-chat-form input,#customerChatModal .customer-chat-form textarea{font-size:13px!important;border-radius:13px!important}
#customerChatModal #customerChatInput{max-width:980px;width:100%;margin:0 auto;min-height:58px;max-height:150px;resize:vertical}
#customerChatModal .chat-order-strip{max-width:980px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:2px}
#customerChatModal .chat-order-strip span{font-size:11px;font-weight:850;color:#697386;letter-spacing:.04em;text-transform:uppercase}
#customerChatModal .chat-order-strip .btn{min-width:160px;border-radius:13px!important}
#customerChatModal .chat-action-bar{padding:11px clamp(16px,5vw,80px)!important;background:#fff!important;border-top:0!important;box-shadow:0 4px 18px rgba(20,31,49,.04);z-index:1}
#customerChatModal .chat-action-bar>*{flex:none}
@media(max-width:700px){
  #customerChatModal .chat-head{min-height:126px;padding:22px 70px 17px 16px!important}
  #customerChatModal .chat-product-hero{gap:13px}
  #customerChatModal .chat-product-media{width:74px;height:74px;flex-basis:74px;border-radius:16px}
  #customerChatModal .chat-product-info h2{font-size:22px!important}
  #customerChatModal .chat-product-name{font-size:12px!important}
  #customerChatModal .chat-product-info .muted{font-size:9px!important;line-height:1.35}
  #customerChatModal .chat-product-price-row strong{font-size:14px}
  #customerChatModal .customer-chat-card>.close{width:42px!important;height:42px!important;right:12px!important;top:max(12px,env(safe-area-inset-top))!important}
  #customerChatModal .customer-chat-thread{padding:18px 12px!important}
  #customerChatModal .chat-bubble{max-width:88%!important;font-size:12px!important}
  #customerChatModal .chat-bubble p{font-size:12px!important}
  #customerChatModal .customer-chat-form{padding:12px 12px calc(12px + env(safe-area-inset-bottom))!important}
  #customerChatModal .chat-compose-row{grid-template-columns:1fr 1fr;gap:7px}
  #customerChatModal .customer-chat-form input{height:40px;padding:0 10px!important}
  #customerChatModal #customerChatInput{min-height:52px}
  #customerChatModal .chat-order-strip{gap:8px}
  #customerChatModal .chat-order-strip span{font-size:9px;min-width:0}
  #customerChatModal .chat-order-strip .btn{min-width:124px;min-height:42px;padding:0 12px!important}
}
@media(max-width:430px){
  #customerChatModal .chat-head{padding-left:12px!important;padding-right:62px!important}
  #customerChatModal .chat-product-media{width:62px;height:62px;flex-basis:62px}
  #customerChatModal .chat-product-info h2{font-size:19px!important}
  #customerChatModal .chat-product-name{font-size:11px!important}
  #customerChatModal .chat-product-info .muted{display:none}
  #customerChatModal .chat-compose-row{grid-template-columns:1fr}
  #customerChatModal .chat-order-strip span{display:none}
  #customerChatModal .chat-order-strip .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){#customerChatModal .customer-chat-card>.close{transition:none!important}}

/* MARKETPLACE FULL-SCREEN CHAT / ORDER REDESIGN — 2026 */
#customerChatModal .customer-chat-card{grid-template-rows:auto minmax(0,1fr) auto!important;background:#f7f8fa!important}
#customerChatModal .chat-head{padding:18px clamp(18px,4vw,56px) 20px!important;min-height:0!important}
#customerChatModal .chat-brandline{display:flex;justify-content:space-between;gap:12px;max-width:1380px;margin:0 auto 14px;color:#5e6673;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
#customerChatModal .chat-secure{color:#7a8492;font-weight:700;letter-spacing:.03em;text-transform:none}
#customerChatModal .chat-product-hero{max-width:1380px;margin:0 auto!important}
#customerChatModal .chat-product-media{width:116px;height:116px;flex-basis:116px;border-radius:24px;background:#fff}
#customerChatModal .chat-product-info h2{font-size:clamp(25px,3vw,40px)!important}
#customerChatModal .chat-main-grid{min-height:0;display:grid;grid-template-columns:minmax(270px,360px) minmax(0,1fr);max-width:1380px;width:100%;margin:0 auto}
#customerChatModal .chat-purchase-panel{overflow:auto;min-height:0;padding:24px 20px 28px clamp(18px,3vw,36px);border-right:1px solid #e5e9ef;background:#fff;overscroll-behavior:contain}
#customerChatModal .chat-conversation{min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);background:#f6f8fb}
#customerChatModal .purchase-kicker{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:#7a8492;margin-bottom:7px}
#customerChatModal .purchase-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.purchase-title-row h3{margin:0;font-size:19px;line-height:1.18;letter-spacing:-.03em}.purchase-stock{font-size:9px;padding:6px 8px;border-radius:999px;background:#eaf7ef;color:#19753c;white-space:nowrap;font-weight:900}
#customerChatModal .purchase-rating{margin:8px 0;color:#1f2733;font-size:12px}.purchase-rating span{color:#707989;margin-left:5px}.purchase-price{font-size:28px;font-weight:950;letter-spacing:-.04em;margin:10px 0 14px}
#customerChatModal .purchase-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px}.purchase-mini-grid div{padding:9px 10px;border:1px solid #e7ebf0;border-radius:14px;background:#fbfcfd}.purchase-mini-grid b,.purchase-mini-grid span{display:block}.purchase-mini-grid b{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#7a8492}.purchase-mini-grid span{font-size:11px;font-weight:800;margin-top:3px}
#customerChatModal .purchase-section{padding-top:16px;border-top:1px solid #edf0f4}.purchase-section-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.purchase-section-head b{font-size:12px}.purchase-section-head span{font-size:10px;color:#7a8492}.chat-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.chat-size-option{border:1px solid #dde3ea;background:#fff;border-radius:12px;padding:9px 8px;text-align:left;min-height:54px;cursor:pointer}.chat-size-option.selected{border-color:#12161d;box-shadow:0 0 0 1px #12161d inset;background:#f6f7f8}.chat-size-option strong,.chat-size-option small{display:block}.chat-size-option strong{font-size:12px}.chat-size-option small{margin-top:3px;font-size:9px;color:#7a8492}
#customerChatModal .purchase-qty-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.purchase-qty-row b,.purchase-qty-row small{display:block}.purchase-qty-row b{font-size:12px}.purchase-qty-row small{font-size:9px;color:#7a8492;margin-top:3px}.chat-qty-control{display:flex;align-items:center;border:1px solid #dfe5ec;border-radius:12px;overflow:hidden}.chat-qty-control button{width:34px;height:34px;border:0;background:#fff;font-size:18px;cursor:pointer}.chat-qty-control strong{width:34px;text-align:center;font-size:13px}.purchase-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #edf0f4}.purchase-total span{font-size:11px;color:#6e7785}.purchase-total strong{font-size:18px}.purchase-note{margin-top:11px;font-size:9px;line-height:1.45;color:#7a8492}.purchase-benefits{display:flex;flex-direction:column;gap:5px;margin-top:14px;font-size:9px;font-weight:800;color:#4e5968}.purchase-empty{padding:30px 8px}.purchase-empty h3{margin:8px 0;font-size:20px}.purchase-empty p{font-size:12px;line-height:1.5;color:#697386}
#customerChatModal .chat-action-bar{padding:11px 18px!important;background:#fff!important;border-bottom:1px solid #e5e9ef!important;box-shadow:none!important}.chat-action-pill{font-size:11px!important;font-weight:850!important;padding:9px 13px!important}\n.chat-action-pill{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;}.chat-action-pill.active{box-shadow:0 5px 15px rgba(17,20,25,.14)}
#customerChatModal .chat-quick-actions{display:flex;gap:7px;padding:10px 18px;background:#f8f9fb;border-bottom:1px solid #e8ecf1;overflow:auto;scrollbar-width:none}.chat-quick-actions::-webkit-scrollbar{display:none}.chat-quick-chip{border:1px solid #dde3ea;border-radius:999px;background:#fff;padding:8px 11px;font-size:10px;font-weight:800;white-space:nowrap;cursor:pointer}.chat-checkout-hint{display:flex;flex-direction:column;gap:2px;font-size:10px}.chat-checkout-hint strong{font-size:11px}.chat-checkout-hint span{color:#758091}
#customerChatModal .customer-chat-thread{padding:24px clamp(16px,4vw,42px)!important}.chat-bubble-row{max-width:880px!important}.chat-bubble{box-shadow:0 4px 14px rgba(24,33,48,.05)}
#customerChatModal .customer-chat-form{padding:12px clamp(16px,4vw,42px) calc(14px + env(safe-area-inset-bottom))!important}.chat-compose-row{max-width:880px!important}.chat-order-strip{max-width:880px!important}.chat-order-strip .btn{min-width:170px!important}
@media(max-width:900px){#customerChatModal .chat-main-grid{grid-template-columns:1fr}.chat-purchase-panel{display:none!important}}
@media(max-width:700px){#customerChatModal .chat-head{padding:12px 58px 14px 12px!important}.chat-brandline{font-size:8px!important;margin-bottom:9px!important}.chat-secure{display:none}.chat-product-media{width:68px!important;height:68px!important;flex-basis:68px!important;border-radius:16px!important}.chat-product-info h2{font-size:20px!important}.chat-product-name{font-size:11px!important}.chat-product-info .muted{font-size:9px!important}.chat-action-bar{padding:8px 11px!important}.chat-quick-actions{padding:8px 11px!important}.customer-chat-thread{padding:15px 11px!important}.customer-chat-form{padding-left:11px!important;padding-right:11px!important}.chat-order-strip .btn{min-width:128px!important}.chat-bubble{max-width:90%!important}}
@media(max-width:430px){#customerChatModal .chat-brandline{display:none}.chat-product-hero{gap:10px!important}.chat-product-media{width:60px!important;height:60px!important;flex-basis:60px!important}.chat-product-info h2{font-size:18px!important}.chat-product-price-row strong{font-size:13px!important}.chat-action-bar{overflow-x:auto}.chat-action-pill{padding:8px 10px!important}.chat-order-strip .btn{width:100%!important}.chat-order-strip span{display:none}.chat-compose-row{grid-template-columns:1fr!important}}

/* FULL-PAGE CHAT FLOW — one continuous scroll, 2026-09-14 */
#customerChatModal{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  padding:0!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
#customerChatModal .customer-chat-card{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  border-radius:0!important;
  margin:0!important;
}
#customerChatModal .chat-head{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
}
#customerChatModal .chat-main-grid{
  display:grid!important;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr)!important;
  min-height:0!important;
  height:auto!important;
  align-items:start!important;
}
#customerChatModal .chat-purchase-panel{
  position:relative!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  min-height:0!important;
  overscroll-behavior:auto!important;
}
#customerChatModal .chat-conversation{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
#customerChatModal .customer-chat-thread{
  height:auto!important;
  min-height:260px!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
  -webkit-overflow-scrolling:auto!important;
}
#customerChatModal .customer-chat-form{
  position:relative!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
#customerChatModal .chat-action-bar{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
}
#customerChatModal .chat-quick-actions{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  position:relative!important;
}
#customerChatModal .customer-chat-card>.close{
  position:fixed!important;
  z-index:100!important;
  top:max(14px,env(safe-area-inset-top))!important;
  right:max(14px,env(safe-area-inset-right))!important;
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.96)!important;
  color:#111!important;
  border:1px solid rgba(16,22,30,.12)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.15)!important;
}
@media(max-width:900px){
  #customerChatModal .chat-main-grid{grid-template-columns:1fr!important}
  #customerChatModal .chat-purchase-panel{display:block!important;border-right:0!important;border-bottom:1px solid #e5e9ef!important}
}
@media(max-width:700px){
  #customerChatModal .customer-chat-card{min-height:100dvh!important}
  #customerChatModal .chat-head{padding-top:max(18px,env(safe-area-inset-top))!important}
  #customerChatModal .customer-chat-thread{min-height:220px!important;padding-bottom:24px!important}
  #customerChatModal .customer-chat-form{padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  #customerChatModal .customer-chat-card>.close{width:44px!important;height:44px!important;right:12px!important}
}

/* Match the Message about this shoe tab to the existing premium Order this shoe tab. */
#customerChatModal [data-chat-action="chat"]{
  border-color:#f3a712!important;
  background:#f3a712!important;
  color:#172033!important;
  box-shadow:0 5px 15px rgba(17,20,25,.14)!important;
}
#customerChatModal [data-chat-action="chat"]:hover{
  border-color:#d99516!important;
  background:#e9a00f!important;
  color:#172033!important;
}
#customerChatModal [data-chat-action="chat"].active{
  border-color:#f3a712!important;
  background:#f3a712!important;
  color:#172033!important;
}