/* CSM Silks storefront — page layout on top of csm-silks.css (design system). No new colours here. */
#app{min-height:60vh}
[hidden]{display:none!important}
.section{padding:var(--sp-12) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--sp-6)}
.section-head .h2{margin-top:4px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:var(--text-xs);color:var(--text-muted);padding:14px 0}
.crumbs>span{display:inline-block;padding:5px 0}
.crumbs a{display:inline-block;padding:5px 0}
.crumbs a:hover{color:var(--primary)}
.rule>svg{width:22px;height:22px}
.order-hero .rule>svg{width:56px;height:56px}
.empty{text-align:center;padding:64px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}

/* header */
.topbar .container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px;white-space:nowrap}
.topbar .mid{display:none;font-weight:600}
@media(min-width:1000px){.topbar .mid{display:block}}
.topbar .row a{opacity:.9}
.header-row{gap:var(--sp-5)}
#menu-btn,#nav-close{display:none}
.header .search{flex:1;max-width:460px}
.head-acts{display:flex;gap:10px;margin-left:auto;align-items:center}
.head-act{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;font-size:var(--text-2xs);font-weight:600;color:var(--text)}
.head-act svg{width:22px;height:22px}
.head-act:hover{color:var(--primary)}
.head-act.ai{color:var(--info)}
.nav-row{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav-row a{flex-shrink:0;white-space:nowrap}
.nav-row a.ai{display:inline-flex;align-items:center}
.nav-row a>svg,.notice>svg,.eyebrow>svg,.finder .eyebrow>svg{width:15px;height:15px;flex-shrink:0;vertical-align:-3px;margin-right:4px}
.nav-row::-webkit-scrollbar{display:none}
#suggest{position:absolute;left:0;right:0;top:48px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:45;overflow:hidden}
.sg-head{padding:8px 12px 4px;font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}
.sg-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;font-size:var(--text-sm)}
.sg-item:hover{background:var(--surface-muted)}
.sg-item img{width:36px;height:46px;object-fit:cover;border-radius:4px}
.sg-item svg{width:16px;height:16px;color:var(--text-muted)}
.sg-all{grid-template-columns:1fr;color:var(--primary);font-weight:600;border-top:1px solid var(--border)}
#scrim{display:none;position:fixed;inset:0;background:rgba(26,18,8,.5);z-index:75}
body[data-api="offline"] .api-pill{display:inline-flex}
.api-pill{display:none;position:fixed;left:16px;bottom:16px;z-index:60;font-size:var(--text-2xs);gap:6px;align-items:center;padding:6px 10px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2);box-shadow:var(--shadow-sm)}
.api-pill i{width:7px;height:7px;border-radius:50%;background:var(--warning)}

/* hero */
.hero{position:relative;height:min(58vw,560px);min-height:400px;overflow:hidden;background:var(--forest-900)}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center top;opacity:0;transition:opacity var(--dur-slow) var(--ease);display:flex;align-items:center}
.hero-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,31,23,.82) 0%,rgba(7,31,23,.55) 45%,rgba(7,31,23,.05) 100%)}
.hero-slide.on{opacity:1;z-index:1}
.hero-inner{position:relative;display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:1280px;width:100%}
.hero-inner .display{max-width:620px}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2}
.hero-dots button{width:28px;height:3px;border:0;border-radius:2px;background:rgba(255,255,255,.4);cursor:pointer}
.hero-dots button.on{background:var(--zari-300)}

/* trust */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trust{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.trust svg{width:26px;height:26px;color:var(--accent);flex-shrink:0}
.trust b{display:block;font-size:var(--text-sm)}
.trust span{font-size:var(--text-xs);color:var(--text-muted)}
.trust-row.compact{grid-template-columns:repeat(4,1fr);gap:8px}
.trust-row.compact .trust{flex-direction:column;text-align:center;gap:6px;padding:10px 6px}
.trust-row.compact b{font-size:var(--text-2xs)}

/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.cat{position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-muted);display:block}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.cat:hover img{transform:scale(1.05)}
.cat-body{position:absolute;inset:auto 0 0 0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(7,31,23,.85));color:#fff}
.cat-body .h4{color:#fff}
.cat-body .small{color:var(--paper-300);font-size:var(--text-xs)}

/* finder band */
.finder-band{background:var(--forest-800);color:#fff;padding:var(--sp-16) 0;background-image:radial-gradient(ellipse at 80% 50%,rgba(184,134,47,.18),transparent 55%)}
.finder-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.finder{max-width:760px;padding:40px 0 20px}
.finder-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* reviews & story */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review p{margin:10px 0;font-size:var(--text-base);line-height:var(--leading-relaxed)}
.review footer{font-size:var(--text-xs);color:var(--text-muted)}
.story{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.story img,.story video{border-radius:var(--r-xl);aspect-ratio:4/5;object-fit:cover;width:100%;display:block}

/* product card extras */
.product{display:flex;flex-direction:column}
.product-shot{position:relative}
.product-wish{position:absolute;top:8px;right:8px;z-index:2}
.product-media{display:block}
.product-media .product-badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.product-media .product-badges .badge{position:static}
.product-colour{margin:2px 0 0;font-size:var(--text-xs);color:var(--text-2)}
.product-stock{margin:4px 0 0;font-size:var(--text-2xs);color:var(--sale);font-weight:600}
.qv-scrim{position:fixed;inset:0;z-index:90;background:rgba(26,18,8,.5);display:grid;place-items:center;padding:20px}
.qv-card{position:relative;width:min(860px,100%);display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.qv-close{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center}
.qv-media{aspect-ratio:3/4;background:var(--surface-muted)}
.qv-media img{width:100%;height:100%;object-fit:cover}
.qv-info{padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.qv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
body.qv-open{overflow:hidden}
@media(max-width:760px){.qv-card{grid-template-columns:1fr}}

/* PLP */
.plp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:8px 0 12px;flex-wrap:wrap}
.plp-head .h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.plp-head-compact{padding:6px 0 16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.plp-head-compact .h1{font-size:clamp(26px,3vw,38px);margin:0;line-height:1.2}
.plp-head-compact>div{flex:1;min-width:0}
.plp-description{margin:8px 0 0;color:var(--text-2);max-width:65ch}
.plp-categories{display:flex;gap:var(--sp-2);overflow-x:auto;overscroll-behavior-x:contain;padding:var(--sp-1) var(--sp-1) var(--sp-3);margin:0 calc(-1 * var(--sp-1)) var(--sp-3);scroll-snap-type:x proximity}
.plp-category{display:flex;align-items:center;gap:var(--sp-3);flex:0 0 auto;min-width:156px;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);scroll-snap-align:start;transition:border-color var(--dur-fast)}
.plp-category:hover{border-color:var(--primary)}
.plp-category:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.plp-category.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.plp-category img{width:44px;height:56px;object-fit:cover;border-radius:var(--r-xs);flex:none}
.plp-category b{display:block;font-size:var(--text-sm);font-weight:600;white-space:nowrap}
.plp-category small{display:block;margin-top:var(--sp-1);font-size:var(--text-xs);opacity:.8}
.plp-category-all{display:grid;place-items:center;width:44px;height:56px;flex:none}
.plp-category-all svg{width:24px;height:24px}
.plp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.plp-sort{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
@media(max-width:760px){.plp-sort .select{min-width:0!important;width:145px!important}.plp-sort{font-size:14px}}
.plp-hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:0;min-height:220px;align-items:stretch;margin:4px 0 18px;
  border-radius:var(--r-xl);overflow:hidden;background:var(--paper-200);border:1px solid var(--border)}
/* Category photos are portrait; fix the banner height so the photo can't stretch it to ~1000px. */
.plp-hero img{width:100%;height:clamp(220px,24vw,320px);object-fit:cover;object-position:center 30%;display:block}
.plp-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:28px 32px;background:var(--paper-50);color:var(--ink-900)}
.plp-hero-copy .h1{color:var(--ink-900)}
.plp-hero-copy .lead{margin:8px 0 0;max-width:36ch;color:var(--ink-700);font-size:var(--text-sm);line-height:1.55}
.plp{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.grid-products,.plp-grid.grid-products,.plp .grid-products{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 14px}
.plp-count{font-size:var(--text-sm);color:var(--text-2);font-weight:500}
.active-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;min-height:28px}
.active-chips .plp-count{margin-right:auto}
.facets{position:sticky;top:calc(var(--header-h) + 56px);max-height:calc(100vh - var(--header-h) - 76px);
  overflow:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.facets-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.facets-head b{flex:1;font-size:var(--text-sm);letter-spacing:.02em}
.facets-close{display:none}
.facet{border-bottom:1px solid var(--border)}
.facet:last-child{border-bottom:0}
.facet>summary{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;list-style:none;
  font-size:var(--text-sm);font-weight:600;color:var(--text)}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary span:first-child{flex:1}
.facet>summary i{width:8px;height:8px;border-right:1.6px solid var(--text-muted);border-bottom:1.6px solid var(--text-muted);
  transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease);margin-bottom:3px}
.facet[open]>summary i{transform:rotate(-135deg);margin-bottom:-3px}
.facet[open]>summary{color:var(--primary)}
.facet-body{padding:2px 14px 12px;max-height:230px;overflow:auto}
.facet-opt{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:var(--text-sm);color:var(--text-2);cursor:pointer}
.facet-opt:hover{color:var(--text)}
.facet-opt.off{opacity:.4;cursor:not-allowed}
.facet-opt input{accent-color:var(--primary);flex-shrink:0;width:18px;height:18px}
.facet-opt span{flex:1}
.facet-opt em{font-style:normal;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}
.facet-opt .sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--border-strong);flex-shrink:0}
.facet-clear{border:0;background:none;padding:0 2px;font:inherit;font-size:var(--text-2xs);font-weight:600;
  color:var(--primary);cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.facet-clear:hover{text-decoration:underline}
.facet[data-k="cats"] .facet-body{max-height:none}
.facet-cats{display:flex;flex-direction:column;gap:2px}
.facet-cats a{padding:5px 0;font-size:var(--text-sm);color:var(--text-2)}
.facet-cats a:hover{color:var(--primary)}
.facet-cats .cat-trail{padding-left:calc(var(--lvl, 0) * 12px)}
.facet-cats .cat-sub{padding-left:48px}
.facet-cats a.on{color:var(--text);font-weight:600}
.price-range{display:flex;align-items:center;gap:8px;margin:4px 0 8px}
.price-range .select{flex:1;min-width:0;height:34px;padding:0 8px;font-size:var(--text-sm)}
.price-range span{font-size:var(--text-xs);color:var(--text-muted)}
.facets-foot,.facets-scrim{display:none}
#filters-toggle{display:none}

/* PDP — Nykaa Fashion layout */
.pdp-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:20px 36px;margin-top:8px;align-items:start}
.pdp-gallery{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:start;position:sticky;top:calc(var(--header-h) + 50px)}
.pdp-thumbs-wrap{display:flex;flex-direction:column;gap:6px;min-width:0;align-items:stretch}
.pdp-gallery-colour{margin:0;line-height:1.5;color:var(--text);font-size:var(--text-xs);overflow-wrap:anywhere}
.pdp-gallery-colour b{font-weight:700;word-break:break-word}
.pdp-thumbs-nav{display:grid;place-items:center;width:100%;height:28px;border:1px solid var(--border);background:var(--surface);cursor:pointer;padding:0;border-radius:2px;color:var(--text-2)}
.pdp-thumbs-nav svg{width:12px;height:12px}
.pdp-thumbs-nav.up svg{transform:rotate(-90deg)}
.pdp-thumbs-nav.down svg{transform:rotate(90deg)}
.pdp-thumbs-nav[hidden]{display:none!important}
.pdp-thumbs{display:flex;flex-direction:column;gap:8px;max-height:min(78vh,760px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.pdp-thumbs::-webkit-scrollbar{display:none}
.pdp-thumbs button{position:relative;border:1.5px solid transparent;border-radius:2px;padding:0;overflow:hidden;background:var(--surface-muted);cursor:pointer;aspect-ratio:3/4;flex:0 0 auto}
.pdp-thumbs button.on{border-color:var(--text)}
.pdp-thumbs img,.pdp-thumbs video{width:100%;height:100%;object-fit:cover}
.pdp-thumbs span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.25)}
.pdp-thumbs span svg{width:22px;height:22px}
.pdp-stage-row{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;min-width:0}
.pdp-view-options{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.pdp-view-options .caption{flex:1;min-width:160px;color:var(--text-muted)}
.spin-dialog{width:min(520px,calc(100vw - 32px));max-height:90dvh;overflow:auto;margin:auto;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text)}
.spin-dialog::backdrop{background:rgba(0,0,0,.65)}
.spin-head,.spin-controls{display:flex;align-items:center;gap:var(--sp-3);justify-content:space-between}
.spin-head h2{margin:0}
.spin-stage{aspect-ratio:3/4;max-height:60dvh;margin-inline:auto;display:grid;place-items:center;background:var(--surface-muted);touch-action:pan-y;cursor:grab;overflow:hidden}
.spin-stage:active{cursor:grabbing}
.spin-stage img{width:100%;height:100%;min-height:0;object-fit:contain;user-select:none}
.spin-controls{margin-top:var(--sp-3)}
.spin-controls input{flex:1;min-width:0;accent-color:var(--primary)}
.pdp-stage{position:relative;aspect-ratio:3/4;width:min(100%,560px,calc((100vh - 220px) * .75));margin-inline:auto;border-radius:2px;overflow:hidden;background:var(--surface-muted)}
.pdp-stage.can-zoom{cursor:zoom-in}
.pdp-stage img,.pdp-stage video{width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform .12s ease-out;will-change:transform}
.pdp-stage img.is-flat{object-position:center 28%}
.pdp-stage .badge{position:absolute;top:12px;left:12px}
.pdp-zoom-hint{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--text-2);font-size:var(--text-2xs);pointer-events:none;box-shadow:var(--shadow-sm)}
.pdp-zoom-hint svg{width:14px;height:14px}
.pdp-zoom-lens{position:absolute;width:72px;height:72px;margin:-36px 0 0 -36px;border:2px solid var(--surface);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;z-index:3}
.pdp-zoom-tools{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;gap:6px}
.pdp-zoom-tools button{min-width:40px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:var(--r-pill);background:rgba(255,255,255,.94);font-size:var(--text-2xs);font-weight:700;cursor:pointer}
.pdp-zoom-tools button.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.pdp-thumb-role{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;background:rgba(26,18,8,.55);color:#fff;font-size:var(--text-2xs);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.pdp-thumbs button{position:relative;overflow:hidden}
.pdp-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 0;font-size:var(--text-xs);color:var(--text-2)}
.pdp-meta b{color:var(--text);font-weight:600}
.pdp-special{margin:6px 0 0;font-size:var(--text-sm)}
.pdp-special b{color:var(--primary)}
.pdp-branches ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pdp-branches li{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-sm)}
.pdp-branches .stock-ok{color:var(--forest-600)}
.pdp-branches .stock-out{color:var(--sale)}
.pdp-bank-list{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pdp-bank{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pdp-info{min-width:0}
.pdp-exclusive{display:inline-block;margin:0 0 8px;padding:3px 8px;font-size:var(--text-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1a5fb4;background:#e8f1fb;border-radius:2px}
.pdp-brand{font-family:var(--font-display);font-size:clamp(1.75rem,2.4vw,2.35rem);font-weight:700;line-height:1.1;margin:0 0 6px;color:var(--text)}
.pdp-name{font-family:var(--font-body);font-size:var(--text-md);font-weight:500;line-height:1.45;color:var(--text-2);margin:0 0 4px}
.pdp-sub{font-size:var(--text-sm);color:var(--text-muted);margin:6px 0 0}
.pdp-price-block{margin:18px 0 4px;padding-bottom:4px}
.pdp-price{display:flex;align-items:baseline;gap:10px;margin:0}
.pdp-price .price{font-size:clamp(1.5rem,2vw,1.85rem);font-weight:700}
.pdp-price-block .price-off{color:#0f7a55;font-weight:700;font-size:var(--text-lg)}
.pdp-mrp{margin:4px 0 0;font-size:var(--text-sm);color:var(--text-muted)}
.pdp-mrp s{text-decoration:line-through}
.pdp-rating{margin-top:10px}
.pdp-buy{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.pdp-ctas{flex-wrap:nowrap;gap:12px}
.pdp-wish-cta{flex:0 0 34%;min-width:120px;justify-content:center}
.pdp-add-cta{flex:1;justify-content:center;min-height:48px}
.pdp-buy-now{font-weight:600;border:1px solid var(--border-strong)}
.tryon-panel{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.tryon-panel[hidden]{display:none}
.tryon-field{display:flex;flex-direction:column;gap:8px}
.tryon-tones{display:flex;gap:10px;flex-wrap:wrap}
.tryon-tone{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;background:none;border:0;cursor:pointer;font:inherit;color:var(--text-muted);font-size:var(--text-2xs)}
.tryon-tone i{width:36px;height:36px;border-radius:50%;border:2px solid transparent;display:block}
.tryon-tone.on{color:var(--text);font-weight:600}
.tryon-tone.on i{border-color:var(--accent);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.tryon-chips{display:flex;gap:8px;flex-wrap:wrap}
.tryon-score{margin:4px 0 0;font-family:var(--font-display);font-size:var(--text-5xl);line-height:1;color:var(--primary)}
.tryon-score span{font-size:var(--text-xl)}
.tryon-verdict{margin:8px 0;font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);line-height:1.4}
.tryon-row{display:flex;flex-direction:column;gap:2px;margin:0 0 8px;font-size:var(--text-sm)}
.tryon-row b{font-size:var(--text-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pdp-sku{margin-top:4px}
.pdp-colour-note{margin-top:14px}
.pdp-info-ico{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1a5fb4;color:#fff;font-size:11px;font-weight:700;font-style:italic;flex:0 0 auto;line-height:1}
.pdp-box{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:2px;background:var(--surface)}
.pdp-box .h6{margin:0 0 8px;font-size:var(--text-md);font-weight:700}
.pdp-box-meta{font-weight:500;color:var(--text-muted);font-size:var(--text-sm)}
.pdp-delivery{margin-top:20px}
.pdp-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0;overflow:hidden}
.pdp-promise{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px;border-right:1px solid var(--border)}
.pdp-promise:last-child{border-right:0}
.pdp-promise-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface-muted);flex:0 0 auto;color:var(--primary)}
.pdp-promise-ico svg{width:18px;height:18px}
.pdp-promise b{display:block;font-size:var(--text-xs);line-height:1.35}
.pdp-promise .caption{margin:0}
.pdp-know{display:inline-block;padding:6px 0;font-size:var(--text-2xs);font-weight:600;color:var(--sale);text-decoration:none}
.pdp-know:hover{text-decoration:underline}
.pdp-coupon-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pdp-coupon{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:2px;background:var(--surface-muted)}
.pdp-coupon b{font-size:var(--text-sm)}
.pdp-coupon-code{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.coupon-code{display:inline-block;padding:4px 10px;border:1px dashed var(--border-strong);border-radius:var(--r-sm);font-size:var(--text-xs);background:var(--surface)}
.pdp-heritage-chips{display:flex;flex-wrap:wrap;gap:10px}
.pdp-heritage-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:104px;min-height:96px;padding:12px 8px;border:1px solid var(--border);border-radius:2px;text-align:center;font-size:var(--text-2xs);font-weight:600;line-height:1.25}
.pdp-heritage-chip svg{width:22px;height:22px;color:var(--primary)}
.pdp-pack-list{margin:0;padding-left:18px;font-size:var(--text-sm);color:var(--text-2);line-height:1.8}
.pdp-accordion{margin-top:8px;border:1px solid var(--border);border-radius:2px;padding:0 16px;background:var(--surface)}
.pdp-acc{border-bottom:1px solid var(--border)}
.pdp-acc:last-child{border-bottom:0}
.pdp-acc summary{list-style:none;cursor:pointer;padding:14px 28px 14px 0;position:relative;user-select:none}
.pdp-acc summary::-webkit-details-marker{display:none}
.pdp-acc-label{display:block;font-weight:600;font-size:var(--text-sm)}
.pdp-acc-hint{display:block;margin-top:2px;font-size:var(--text-xs);font-weight:400;color:var(--text-muted)}
.pdp-acc summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.pdp-acc[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.pdp-acc-body{padding:0 0 16px;font-size:var(--text-sm);color:var(--text-2)}
.pdp-acc-body .table{font-size:var(--text-sm)}
.pdp-acc-body .table th{width:140px;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:var(--text-sm);color:var(--text-2);font-weight:500}
.pdp-reviews .h6{margin-bottom:12px}
.pdp-review-summary{display:flex;align-items:center;gap:20px;padding:14px;border:1px solid var(--border);border-radius:2px;margin-bottom:14px}
.pdp-review-score{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pdp-review-score b{font-size:var(--text-3xl);line-height:1;font-family:var(--font-display)}
.pdp-review-counts{font-size:var(--text-sm);color:var(--text-2);line-height:1.6}
.pdp-review-list{display:flex;flex-direction:column;gap:12px}
.pdp-review{padding:12px 0;border-top:1px solid var(--border)}
.pdp-review:first-child{border-top:0;padding-top:0}
.pdp-review-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.pdp-review-badge{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--border);border-radius:2px;font-size:var(--text-xs);font-weight:700}
.pdp-review-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pdp-review-tags .chip{font-size:var(--text-2xs);padding:4px 8px;height:auto;cursor:default}
.pdp-trust-box{padding:14px}
.stock-ok{color:var(--success, #0f7a55);font-weight:600}
.stock-out{color:var(--sale);font-weight:600}
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.08)}
.pdp-sticky[hidden]{display:none!important}
.pdp-sticky-info{display:flex;align-items:center;gap:10px;min-width:0}
.pdp-sticky-info img{width:40px;height:52px;object-fit:cover;border-radius:var(--r-sm)}
.pdp-sticky-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.zoom-lightbox{position:fixed;inset:0;z-index:120;background:rgba(10,8,6,.92);display:grid;place-items:center;padding:24px}
.zoom-lightbox[hidden]{display:none!important}
.zoom-lightbox img{max-width:min(92vw,900px);max-height:86vh;object-fit:contain;transition:transform .15s ease;cursor:grab;border-radius:var(--r-md)}
.zoom-lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);cursor:pointer;display:grid;place-items:center}
.zoom-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);cursor:pointer;display:grid;place-items:center}
.zoom-lb-nav.prev{left:16px}.zoom-lb-nav.prev svg{transform:scaleX(-1)}
.zoom-lb-nav.next{right:16px}
.zoom-lb-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75)}
.opt{margin-top:18px}
.opt .label{display:block;margin-bottom:6px;font-weight:700;font-size:var(--text-sm)}
.opt .label span{font-weight:400;color:var(--text-2)}
#colour-name{margin:2px 0 10px;font-weight:600;font-size:var(--text-sm)}
/* Nykaa-style colour swatches — image thumbnails that swap the gallery */
.pdp-swatches{flex-wrap:wrap;gap:10px}
.pdp-swatches .swatch{width:56px;height:72px;position:relative;border:1.5px solid var(--border);border-radius:2px;padding:0;overflow:hidden;background:var(--surface-muted);cursor:pointer}
.pdp-swatches .swatch img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-swatches .swatch.on{border-color:var(--text);border-width:2px}
.pdp-swatches .swatch.on::after{content:"";position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:#1a5fb4;box-shadow:0 0 0 2px var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M4.5 8.5 2 6l.7-.7 1.8 1.8 4-4 .7.7z'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center}
.offers{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm);color:var(--text-2);margin:0;padding:0}
.offers b{color:var(--text)}
.product-cols{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.product-cols i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:block}
.product-cols.pick{gap:0;margin-left:-6px}
.product-dot{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer}
.product-dot i{width:14px;height:14px;box-shadow:0 0 0 2px var(--surface)}
.product-dot.on i,.product-dot:hover i{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--text)}
.product-dot:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.product.oos .product-media::after{content:"Sold out";position:absolute;inset:auto 10px 10px auto;background:rgba(0,0,0,.7);color:#fff;font-size:var(--text-2xs);padding:4px 8px;border-radius:var(--r-pill)}
.tab-panel{padding:20px 0 8px;max-width:760px}
.tab-panel .table th{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:var(--text-sm);color:var(--text-2)}

/* cart / checkout */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.cart-item{display:grid;grid-template-columns:72px 1fr auto auto auto;gap:16px;align-items:center;padding:14px}
.cart-item img{width:72px;height:96px;object-fit:cover;border-radius:var(--r-sm)}
.cart-item .product-name{font-size:var(--text-md)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-pill);height:44px}
.qty button{width:44px;height:100%;border:0;background:none;cursor:pointer;font-size:16px;color:var(--text)}
.qty span{min-width:28px;text-align:center}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:var(--text-sm)}
.summary dd{text-align:right}
.summary .total{font-size:var(--text-lg);font-weight:600;padding-top:8px;border-top:1px solid var(--border-strong);margin-top:4px}
.summary .notice{font-size:var(--text-xs);padding:8px 10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .span2{grid-column:1/-1}

/* VIP video drape */
.vip-hero{background:var(--forest-900);color:var(--paper-100);padding:clamp(48px,8vw,88px) 0 56px}
.vip-hero-inner{max-width:720px}
.vip-hero .h1{color:var(--paper-50);margin:8px 0 12px}
.vip-hero .lead{color:var(--paper-300);max-width:42ch;margin-bottom:22px}
.vip-page-body{padding:32px 0 64px}
.vip-card{max-width:760px;margin:0 auto;background:var(--paper-50);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.vip-card-head{padding:28px 32px 8px}
.vip-card-head .h2{margin:6px 0 10px;color:var(--ink-900)}
.vip-card .vip-form{padding:8px 32px 32px}
.vip-form .label{display:block;margin-bottom:6px}
.vip-form .form-grid{margin-bottom:18px}
.vip-submit{height:48px;background:var(--forest-800);border-color:var(--forest-800)}
.vip-submit:hover{background:var(--forest-900)}
.vip-form-note{margin-top:12px;text-align:center}
.vip-modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px}
.vip-modal[hidden]{display:none!important}
.vip-modal-scrim{position:absolute;inset:0;background:rgba(7,31,23,.62);backdrop-filter:blur(4px)}
.vip-modal-panel{position:relative;z-index:1;width:min(760px,96vw);max-height:min(92vh,900px);overflow:auto;background:var(--paper-50);border-radius:var(--r-xl);box-shadow:var(--shadow-xl)}
.vip-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:var(--forest-900);color:var(--paper-100)}
.vip-modal-head .eyebrow{color:var(--zari-300);margin:0}
.vip-modal-x{color:var(--paper-100)}
.vip-modal-x:hover{background:rgba(255,255,255,.08)}
.vip-modal-body{padding:24px 28px 28px}
.vip-modal-body .h2{color:var(--ink-900);margin:0 0 8px}
.vip-modal-lead{color:var(--ink-700);margin:0 0 18px;max-width:48ch}
.vip-modal-body .vip-form{padding:0}
body.vip-open{overflow:hidden}
.lp-vip{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:32px;border-radius:var(--r-xl);background:var(--forest-800);color:var(--paper-100)}
.lp-vip .lp-part{color:var(--zari-300)}
.lp-vip .lp-title{color:var(--paper-50)}
.lp-vip .lp-note{color:var(--paper-300);max-width:46ch}
.pay{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);cursor:pointer}
.pay:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.pay input{accent-color:var(--primary);width:20px;height:20px;flex:0 0 auto}
.pay span{flex:1;font-size:var(--text-sm)}
.pay svg{width:20px;height:20px;color:var(--text-muted)}
.order-hero{text-align:center;padding:48px 0 24px;max-width:640px;margin:0 auto}
.order-hero .lead{margin:10px 0 18px}
.track{max-width:760px;margin:0 auto 32px}
.track ol{display:flex;justify-content:space-between;list-style:none;position:relative;font-size:var(--text-xs);color:var(--text-muted)}
.track ol::before{content:"";position:absolute;top:9px;left:10%;right:10%;height:2px;background:var(--border-strong)}
.track li{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative}
.track li span{width:20px;height:20px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.track li.done{color:var(--primary);font-weight:600}
.track li.done span{background:var(--primary);border-color:var(--primary)}

/* account */
.login-page{max-width:520px;margin:32px auto}
.login .row{flex-wrap:wrap}
.acct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:8px 0 20px}
.acct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.order-row{gap:16px}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}

/* footer */
.footer{background:var(--forest-900);color:var(--paper-300);margin-top:var(--sp-20);padding:var(--sp-16) 0 var(--sp-8)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer h4{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--zari-300);margin-bottom:12px}
.footer a{display:block;padding:4px 0;font-size:var(--text-sm);color:var(--paper-300)}
.footer a:hover{color:#fff}
.footer .logo-name{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--sp-10);padding-top:var(--sp-5);border-top:1px solid rgba(232,200,140,.14);font-size:var(--text-xs);color:var(--ink-500)}
.footer .input{background:rgba(255,255,255,.06);border-color:rgba(232,200,140,.2);color:#fff}

/* toasts */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink-900);color:var(--paper-100);font-size:var(--text-sm);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);transition:all var(--dur-base) var(--ease)}
.toast.on{opacity:1;transform:none}
.toast a{color:var(--zari-300);font-weight:600;text-decoration:underline}
.toast svg{width:16px;height:16px}
.toast.err{background:var(--kumkum-700)}
[data-theme="dark"] .toast{background:var(--zari-200);color:var(--ink-900)}
[data-theme="dark"] .toast a{color:var(--forest-700)}

/* responsive */
@media(max-width:1000px){
  .plp{grid-template-columns:1fr}
  .plp-hero{grid-template-columns:1fr}
  .plp-hero img{height:clamp(160px,44vw,220px)}
  .plp-hero-copy{padding:20px 22px}
  .plp-toolbar{justify-content:space-between}
  .facets{position:fixed;inset:0 0 0 auto;width:min(340px,92vw);max-height:none;z-index:85;border-radius:0;
    box-shadow:var(--shadow-xl);transform:translateX(100%);transition:transform var(--dur-base) var(--ease)}
  .facets.open{transform:none}
  .facets{display:flex;flex-direction:column}
  #facet-list{flex:1}
  .facets-foot{display:block;position:sticky;bottom:0;padding:12px 14px;border-top:1px solid var(--border);background:var(--surface)}
  .facets-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:84;background:rgba(7,31,23,.45)}
  #filters-toggle{display:inline-flex}.facets-close{display:inline-flex}
  .facet-body{max-height:none}
  .pdp-zoom-hint{display:none}
  .pdp-wish-cta span{display:none}
  .pdp-wish-cta{min-width:48px;padding-inline:12px}
  .pdp-layout{grid-template-columns:1fr}.pdp-gallery{position:static}
  .pdp-stage{width:min(100%,520px)}
  .pdp-stage-row{grid-template-columns:1fr}
  .pdp-promises{grid-template-columns:1fr}.pdp-promise{border-right:0;border-bottom:1px solid var(--border);flex-direction:row;align-items:flex-start;gap:10px}
  .pdp-promise:last-child{border-bottom:0}
  .cart-layout{grid-template-columns:1fr}.finder-inner,.story{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .topbar .row{display:none}
  #menu-btn{display:inline-flex}
  .header .search{order:3;flex:1 0 100%;max-width:none}
  .header-row{flex-wrap:wrap;gap:10px 14px;padding:10px 0}
  .head-act span.lbl{display:none}
  .head-acts{gap:0}
  .head-act.ai,#theme-btn{display:none}
  .nav-wrap{position:fixed;inset:0 30% 0 0;background:var(--surface);z-index:80;padding:20px;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease);overflow:auto}
  .nav-open .nav-wrap{transform:none}.nav-open #scrim{display:block}
  /* The drawer lives inside the sticky header, whose z-index (40) and backdrop-filter made it a
     stacking context and the drawer's containing block: the scrim (75) covered the whole menu and
     the "full-screen" drawer was only as tall as the header. Lift the header and drop the blur while open. */
  .nav-open .header{z-index:90;backdrop-filter:none;-webkit-backdrop-filter:none}
  #nav-close{display:inline-flex;margin-bottom:12px}
  .nav-row{flex-direction:column;align-items:stretch}.nav-row a{padding:12px 4px;border-bottom:1px solid var(--border);font-size:var(--text-md)}
  .trust-row{grid-template-columns:1fr 1fr}.acct-grid{grid-template-columns:1fr}
  .hero{height:auto;min-height:480px}.hero-slide::before{background:linear-gradient(180deg,rgba(7,31,23,.2),rgba(7,31,23,.9))}.hero-inner{align-self:flex-end;padding-bottom:48px}
  .cart-item{grid-template-columns:64px 1fr;gap:10px}.cart-item > :nth-child(3),.cart-item > :nth-child(4),.cart-item > :nth-child(5){grid-column:2}
  .form-grid{grid-template-columns:1fr}.pdp-gallery{grid-template-columns:1fr}.pdp-thumbs-wrap{order:2}.pdp-thumbs{flex-direction:row;overflow:auto;max-height:none}.pdp-thumbs button{flex:0 0 64px}
  .lp-vip{grid-template-columns:1fr;padding:24px}
  .vip-card-head,.vip-card .vip-form{padding-inline:20px}
  .vip-modal-body{padding:20px}
  .pdp-stage{width:100%;aspect-ratio:auto;height:min(40vh,360px)}
  .grid-products,.plp-grid.grid-products,.plp .grid-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp-title,.pdp-brand{font-size:var(--text-3xl)}.section{padding:var(--sp-8) 0}.footer-grid{grid-template-columns:1fr}
  .track ol{font-size:var(--text-2xs)}
}

/* placeholder imagery must never read as the real product */
.photo-pending{position:absolute;left:8px;bottom:8px;background:var(--surface);color:var(--text-2);
  border-color:var(--border-strong);text-transform:none;letter-spacing:0;font-weight:500;max-width:calc(100% - 16px)}
.pdp-stage .photo-pending{left:12px;bottom:12px;white-space:normal;line-height:1.35;height:auto;padding:6px 10px}

/* ── "Ask CSM Silks" assistant (js/chat.js) ───────────────────────────── */
.chat-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:65;display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border:0;border-radius:var(--r-pill);background:var(--primary);color:var(--on-primary);font:600 var(--text-sm)/1 var(--font-body);
  box-shadow:var(--shadow-lg);cursor:pointer;transition:transform var(--dur-fast) var(--ease)}
.chat-fab svg{width:18px;height:18px;color:var(--accent)}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body:has(.pdp-sticky:not([hidden])) .chat-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.chat-open .chat-fab{display:none}
.chat-panel{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100dvh - 32px));
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px;background:var(--primary);color:var(--on-primary)}
.chat-head .eyebrow{color:var(--accent);margin:0 0 2px}
.chat-title{font:600 var(--text-xl)/1.1 var(--font-display);margin:0;color:inherit}
.chat-x{background:none;border:0;color:inherit;cursor:pointer;padding:4px;border-radius:var(--r-sm)}
.chat-x svg{width:20px;height:20px}
.chat-x:focus-visible{outline:2px solid var(--accent)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.chat-msg{max-width:88%;display:flex;flex-direction:column;gap:8px}
.chat-msg p{margin:0;padding:10px 12px;border-radius:var(--r-lg);font-size:var(--text-sm);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.chat-msg.me{align-self:flex-end}
.chat-msg.me p{background:var(--primary);color:var(--on-primary);border-bottom-right-radius:var(--r-xs)}
.chat-msg.bot{align-self:flex-start}
.chat-msg.bot p{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:var(--r-xs)}
.chat-msg.err p{border-color:var(--sale)}
.chat-cards{display:flex;flex-direction:column;gap:6px}
.chat-card{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);text-decoration:none}
.chat-card:hover{border-color:var(--border-strong)}
.chat-card img{width:44px;height:58px;object-fit:cover;border-radius:var(--r-sm);flex:none}
.chat-card > span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--text-sm)}
.chat-card b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-starters{display:flex;flex-wrap:wrap;gap:6px}
.chat-starters .chip{font-size:var(--text-xs)}
.chat-msg.typing{flex-direction:row;gap:4px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.chat-msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:chat-dot 1s infinite ease-in-out}
.chat-msg.typing i:nth-child(2){animation-delay:.15s}.chat-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.chat-msg.typing i{animation:none}.chat-fab{transition:none}}
.chat-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface)}
.chat-input{flex:1;resize:none;min-height:42px;max-height:120px;font-size:var(--text-sm)}
.chat-send{flex:none;width:42px;height:42px;padding:0;display:grid;place-items:center}
.chat-send svg{width:16px;height:16px}
.chat-foot{margin:0;padding:0 14px 10px;background:var(--surface)}
.chat-foot a{display:inline-flex;align-items:center;gap:4px}
.chat-foot svg{width:13px;height:13px}
@media (max-width:640px){
  .chat-panel{inset:0;width:auto;height:auto;border-radius:0;border:0}
  .chat-fab span{display:none}
  .chat-fab{padding:14px}
}
.chat-card .price{font-size:var(--text-sm)}
.chat-card .price-was{font-size:var(--text-xs)}
/* ── product photos: counter, steppers, named swatches, phone strip ────── */
.pdp-step{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);
  opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.pdp-step svg{width:14px;height:14px}
.pdp-step.prev{left:10px}.pdp-step.prev svg{transform:rotate(180deg)}
.pdp-step.next{right:10px}
.pdp-stage:hover .pdp-step,.pdp-step:focus-visible{opacity:1}
.pdp-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pdp-step[hidden],.pdp-count[hidden]{display:none}
.pdp-count{position:absolute;right:12px;bottom:12px;z-index:2;padding:3px 8px;border-radius:var(--r-pill);font-size:var(--text-2xs);
  background:color-mix(in srgb,var(--ink-900) 62%,transparent);color:var(--paper-50);font-variant-numeric:tabular-nums}
.pdp-swatches{flex-wrap:wrap;gap:10px}
.pdp-swatches .swatch{height:auto;display:flex;flex-direction:column;overflow:visible;background:none;border:0}
.pdp-swatches .swatch img{width:56px;height:72px;border:1.5px solid var(--border);border-radius:2px;background:var(--surface-muted)}
.pdp-swatches .swatch.on img{border:2px solid var(--text)}
.pdp-swatches .swatch.on::after{top:4px;right:4px}
.pdp-swatches .swatch-name{max-width:64px;margin-top:4px;font-size:var(--text-2xs);line-height:1.2;color:var(--text-2);text-align:center;overflow-wrap:anywhere}
.pdp-swatches .swatch.sold img{opacity:.45}
.pdp-swatches .swatch.sold .swatch-name{text-decoration:line-through;color:var(--text-muted)}
.pdp-swatches .swatch-media{position:relative;display:block;width:56px;height:72px;border:1.5px solid var(--border);border-radius:var(--r-xs);overflow:hidden}
.pdp-swatches .swatch-media img{width:100%;height:100%;border:0;border-radius:0}
.pdp-swatches .swatch.on .swatch-media{border:2px solid var(--text)}
.pdp-swatches .swatch.on .swatch-media img{border:0}
.swatch-colour-fill{display:block;width:100%;height:100%}
.swatch-colour-dot{position:absolute;bottom:4px;left:4px;width:14px;height:14px;border:2px solid var(--surface);border-radius:50%;box-shadow:0 0 0 1px var(--border)}
.swatch-photo-pending{position:absolute;top:25px;inset-inline:2px;padding:2px;background:var(--surface);color:var(--text);font-size:var(--text-2xs);line-height:1.2;text-align:center}
@media (hover:none){.pdp-step{opacity:1}}
@media (prefers-reduced-motion:reduce){.pdp-step{transition:none}}
@media (max-width:760px){
  /* Phones: full-width photo, thumbnails as a swipeable strip underneath */
  .pdp-gallery{grid-template-columns:minmax(0,1fr);gap:10px}
  .pdp-thumbs-wrap{order:2}
  .pdp-stage-row{order:1}
  .pdp-stage{width:100%}
  .pdp-thumbs{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding-bottom:2px}
  .pdp-thumbs button{width:60px;scroll-snap-align:start}
  .pdp-thumbs-nav{display:none!important}
  .pdp-gallery-colour{display:block}
}

/* ── Video shopping booking (js/video-shopping.js) ─────────────────────── */
.vs-open{overflow:hidden}
.vs-scrim{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--forest-900) 55%,transparent)}
.vs-scrim[hidden]{display:none}
.vs-panel{width:min(620px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--zari-300);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow:hidden}
.vs-head{position:relative;padding:22px 24px 20px;background:var(--forest-700);color:var(--paper-50)}
.vs-head .eyebrow{color:var(--zari-300);margin:0 0 6px}
.vs-title{font:600 var(--text-3xl)/1.1 var(--font-display);margin:0;text-wrap:balance}
.vs-head .vs-title{color:var(--paper-50)}
.vs-lead{margin:8px 0 0;font-size:var(--text-sm);line-height:1.55;color:var(--forest-100);max-width:52ch}
.vs-x{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--zari-300);cursor:pointer;padding:6px;border-radius:var(--r-sm)}
.vs-x svg{width:22px;height:22px}
.vs-x:focus-visible{outline:2px solid var(--zari-300)}
.vs-body{padding:20px 24px 24px;overflow-y:auto}
.vs-form{display:flex;flex-direction:column;gap:14px}
.vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vs-field{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;margin:0;padding:0}
.vs-field .input,.vs-field .select,.vs-field .textarea{width:100%}
.vs-saree{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--r-md);background:var(--accent-soft);font-size:var(--text-sm)}
.vs-saree svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
.vs-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vs-slot{position:relative;display:flex}
.vs-slot input{position:absolute;opacity:0;inset:0;cursor:pointer}
.vs-slot span{flex:1;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);font-size:var(--text-sm);text-align:center;font-variant-numeric:tabular-nums}
.vs-slot input:checked + span{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.vs-slot input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.vs-slot.full span{color:var(--text-muted);background:var(--surface-muted);text-decoration:line-through}
.vs-slot.full input{cursor:not-allowed}
.vs-small{margin:0;text-align:center}
.vs-done{display:flex;flex-direction:column;gap:10px}
.vs-done .vs-title{color:var(--text);font-size:var(--text-2xl)}
.vs-ref{margin:4px 0 8px;padding:10px 12px;border:1px dashed var(--zari-400);border-radius:var(--r-md);background:var(--accent-soft)}
.pdp-video-cta svg{width:14px;height:14px}
@media (max-width:640px){
  .vs-scrim{padding:0;place-items:stretch}
  .vs-panel{max-height:none;height:100%;border-radius:0;border:0}
  .vs-grid{grid-template-columns:1fr}
  .vs-head{padding:18px 18px 16px}.vs-body{padding:16px 18px 20px}
  .vs-title{font-size:var(--text-2xl)}
}

/* ── "Notify me" alerts (js/alerts.js) ─────────────────────────────────── */
.pdp-price-alert{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 0;border:0;background:none;
  color:var(--primary);font:500 var(--text-sm)/1.3 var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pdp-price-alert svg,#notify-btn svg{width:16px;height:16px}
.alert-scrim{position:fixed;inset:0;z-index:115;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--forest-900) 55%,transparent)}
.alert-scrim[hidden]{display:none}
.alert-sheet{width:min(420px,100%);padding:22px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-lg);display:grid;gap:6px}
.alert-sheet .h4{margin:0}
@media (max-width:640px){.alert-scrim{place-items:end stretch;padding:0}.alert-sheet{border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}}

/* ── Blouse stitching picker (js/stitching.js) ─────────────────────────── */
.stitch-panel{margin-top:10px;padding:14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);display:grid;gap:10px}
.stitch-panel[hidden]{display:none}
.stitch-size{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.stitch-size legend{margin-bottom:6px}
.chip-radio{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border-strong);border-radius:var(--r-pill);font-size:var(--text-sm);cursor:pointer}
.chip-radio:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);font-weight:600}
.chip-radio input{accent-color:var(--primary);margin:0}
.stitch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 10px}
.stitch-m{display:grid;gap:4px;font-size:var(--text-xs);color:var(--text-2)}
.stitch-m .input,.stitch-m .select{height:38px;font-size:var(--text-sm)}
.stitch-panel .check{display:flex;align-items:center;gap:8px;font-size:var(--text-sm)}
.stitch-panel .check input{accent-color:var(--primary);width:16px;height:16px}
.stitch-note{color:var(--text-2)}
.cart-stitch{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--text-2)}
.cart-stitch svg{width:14px;height:14px;flex:none}
@media (max-width:420px){.stitch-grid{grid-template-columns:1fr 1fr}}

/* ── Photo reviews (js/reviews.js) ─────────────────────────────────────── */
.review-gallery{margin:12px 0}
.review-gallery-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.review-thumb{flex:none;width:72px;height:72px;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--surface);cursor:zoom-in}
.review-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.review-thumb:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.review-photos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.review-photos .review-thumb{width:64px;height:64px}
#write-review{margin:6px 0 14px}
#write-review svg{width:16px;height:16px}
.review-form{display:grid;gap:8px;margin-top:10px}
.review-stars{border:0;padding:0;margin:0;display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.review-stars legend{float:left;width:100%;margin-bottom:4px}
.review-stars input{position:absolute;opacity:0;width:1px;height:1px}
.review-stars label{font-size:28px;line-height:1;color:var(--border-strong);cursor:pointer;padding:0 2px}
.review-stars input:checked~label,.review-stars label:hover,.review-stars label:hover~label{color:var(--zari-500,#c9a24a)}
.review-stars input:focus-visible+label{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.review-uploads{display:flex;gap:8px;flex-wrap:wrap}
.review-upload{position:relative;width:76px;height:76px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2,var(--border))}
.review-upload img{width:100%;height:100%;object-fit:cover}
.review-upload.loading{animation:pulse 1.2s ease-in-out infinite}
.review-upload button{position:absolute;top:3px;right:3px;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.review-upload button svg{width:12px;height:12px}
.review-add-photo{justify-self:start;cursor:pointer}
.review-add-photo[hidden]{display:none}
.review-lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(10,14,12,.86)}
.review-lightbox figure{margin:0;max-width:min(920px,100%);display:grid;gap:8px}
.review-lightbox img{max-width:100%;max-height:82dvh;object-fit:contain;border-radius:var(--r-md)}
.review-lightbox figcaption{color:#fff;font-size:var(--text-sm);text-align:center}
.review-lightbox-x{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;cursor:pointer}
@keyframes pulse{50%{opacity:.5}}

/* ── Order tracking (js/tracking.js) ───────────────────────────────────── */
.order-track{margin:0 0 20px}
.track-ship{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:10px 0 14px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2,color-mix(in srgb,var(--primary) 5%,transparent))}
.track-ship>div{display:grid;gap:2px}
.track-ship .btn svg{width:16px;height:16px}
.track-events{list-style:none;margin:0;padding:0;display:grid}
.track-events li{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding:0 0 14px}
.track-events li::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:2px;background:var(--border)}
.track-events li:last-child::before{display:none}
.track-events .dot{width:14px;height:14px;margin-top:3px;border-radius:50%;border:2px solid var(--border-strong);background:var(--bg)}
.track-events li.now .dot{border-color:var(--primary);background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)}
.track-page{max-width:760px}
.track-form{display:grid;gap:8px;max-width:460px;margin:18px 0}
.track-form .btn{justify-self:start;margin-top:6px}
.track-form .btn svg{width:16px;height:16px}

/* ── Watch & shop (js/pages/watch.js) ──────────────────────────────────── */
.nav .watch-link svg{width:12px;height:12px}
.watch-head{max-width:720px;margin-bottom:18px}
.watch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.watch-card{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:#111;box-shadow:var(--shadow-sm)}
.watch-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.watch-info{position:absolute;left:0;right:0;bottom:0;padding:48px 14px 14px;color:#fff;display:grid;gap:4px;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 60%,transparent)}
.watch-info .caption{color:rgba(255,255,255,.8)}
.watch-name{color:#fff;font-weight:600;line-height:1.3}
.watch-price s{opacity:.7;font-size:var(--text-xs)}
.watch-info .btn-outline{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.2)}
.watch-info .btn svg{width:14px;height:14px}
.watch-sound{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:16px;cursor:pointer}
.watch-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
.watch-play svg{width:22px;height:22px}
.watch-sold{position:absolute;top:12px;left:12px}
.watch-more{display:flex;justify-content:center;margin:22px 0}
@media (max-width:640px){
  .watch-page{padding-inline:0}
  .watch-page .crumbs,.watch-head{padding-inline:16px}
  .watch-head{margin-bottom:10px}.watch-head .h1{font-size:var(--text-2xl,28px)}.watch-head .lead{display:none}
  .watch-grid{grid-template-columns:1fr;gap:0;height:calc(100dvh - var(--watch-top, 260px));overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain}
  .watch-card{aspect-ratio:auto;height:calc(100dvh - var(--watch-top, 260px));border-radius:0;scroll-snap-align:start;scroll-snap-stop:always}
}

/* ── phone sign-in (storefront checkout + account portal) ───────── */
.login-step{display:flex;flex-direction:column;gap:6px;max-width:460px}
.login-label{margin:0}
.login-fields{display:flex;gap:10px;align-items:stretch}
.login-fields>.btn{flex:0 0 auto}
.login-phone{position:relative;flex:1 1 auto;min-width:0}
.login-cc{position:absolute;left:1px;top:1px;bottom:1px;width:52px;display:grid;place-items:center;
  border-right:1px solid var(--border);border-radius:var(--r-md) 0 0 var(--r-md);background:var(--surface-muted);
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-2)}
.login-phone .input{padding-left:64px;font-family:var(--font-mono);letter-spacing:.04em}
.login-otp{flex:1 1 auto;min-width:0;font-family:var(--font-mono);font-size:var(--text-lg);letter-spacing:.4em;text-align:center}
.login-back{align-self:flex-start;margin-top:2px}
@media(max-width:480px){
  .login-fields{flex-direction:column}
  .login-fields>.btn{width:100%}
}

/* ── share a saree ─────────────────────────────────────────────── */
.share-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-lg);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg, 0 24px 60px rgba(0,0,0,.3));overflow:auto}
.share-dialog::backdrop{background:rgba(7,31,23,.6)}
.share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--border)}
.share-product{display:flex;gap:14px;align-items:center;padding:14px 20px}
.share-product img{width:72px;height:96px;object-fit:cover;border-radius:var(--r-sm)}
.share-tabs{display:flex;gap:8px;padding:0 20px 12px}
.share-dialog section{padding:0 20px 20px}
.share-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.share-target{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 14px;text-align:left;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--tone) 35%,var(--border));border-left:4px solid var(--tone);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--tone) 6%,var(--surface));color:var(--text);font:inherit}
.share-target b{color:var(--tone)}
.share-target:hover{background:color-mix(in srgb,var(--tone) 12%,var(--surface))}
.share-target:focus-visible{outline:2px solid var(--tone);outline-offset:2px}
.share-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.share-row .btn{flex:1 1 180px}
.share-card-stage{display:grid;place-items:center;min-height:320px;border-radius:var(--r-md);background:var(--surface-muted)}
.share-card-stage img{max-height:min(60vh,520px);width:auto;border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ── bag drawer ────────────────────────────────────────────────── */
.bag-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;
  background:var(--surface);color:var(--text);display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.18)}
.bag-drawer:not([open]){display:none}
.bag-drawer::backdrop{background:rgba(7,31,23,.55)}
.bag-drawer[open]{animation:bag-in var(--dur-base) var(--ease)}
@keyframes bag-in{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.bag-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.bag-head h2{display:flex;align-items:center;gap:10px;margin:0}
.bag-head h2 svg{width:22px;height:22px;color:var(--primary)}
.bag-ship{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:12px 20px;background:var(--surface-muted);font-size:var(--text-sm);color:var(--text-2)}
.bag-ship svg{width:18px;height:18px}
.bag-ship.done{color:var(--success);font-weight:600}
.bag-ship-bar{flex:1 0 100%;height:4px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.bag-ship-bar i{display:block;height:100%;background:var(--accent)}
.bag-items{list-style:none;margin:0;padding:8px 20px;overflow:auto;flex:1}
.bag-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.bag-item img{width:72px;height:96px;object-fit:cover;border-radius:var(--r-sm)}
.bag-item-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.bag-item-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bag-item-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.bag-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.bag-coupon{display:flex;gap:8px}
.bag-coupon .input{flex:1;min-width:0;text-transform:uppercase}
.bag-sum{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:4px 0 0}
.bag-sum dt{color:var(--text-2)}
.bag-sum .total{font-weight:700;color:var(--text);font-size:var(--text-lg)}
.bag-empty{margin:auto;padding:40px 20px}
@media (prefers-reduced-motion:reduce){.bag-drawer[open]{animation:none}}

/* ── voice (search + assistant) ────────────────────────────────── */
.search .search-mic{right:44px}
.search.has-mic .input{padding-right:92px}
.search-mic.on,.chat-mic.on{color:var(--on-primary);background:var(--sale);border-color:var(--sale)}
.search-mic.on{animation:mic-pulse 1.2s ease-in-out infinite}
.chat-mic.on{animation:mic-pulse 1.2s ease-in-out infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sale) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
.chat-mic{flex:none;width:42px;height:42px;padding:0;display:grid;place-items:center}
.chat-tools{display:flex;align-items:center;gap:6px}
.chat-tools .chip{color:var(--on-primary);border-color:color-mix(in srgb,var(--on-primary) 45%,transparent);background:transparent}
.chat-x[aria-pressed="false"]{opacity:.55}
.chat-x svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.search-mic.on,.chat-mic.on{animation:none}}

/* ── sign in / sign up (storefront, account portal, staff) ─────── */
/* The zari border of a saree: two gold threads with a woven twill between. -x runs along, -y runs down. */
:root{
  --zari-weave-x:linear-gradient(var(--zari-500),var(--zari-500)) top/100% 1px no-repeat,
    linear-gradient(var(--zari-500),var(--zari-500)) bottom/100% 1px no-repeat,
    repeating-linear-gradient(135deg,var(--zari-400) 0 3px,transparent 3px 8px) center/100% 6px no-repeat,var(--forest-800);
  --zari-weave-y:linear-gradient(var(--zari-500),var(--zari-500)) left/1px 100% no-repeat,
    linear-gradient(var(--zari-500),var(--zari-500)) right/1px 100% no-repeat,
    repeating-linear-gradient(45deg,var(--zari-400) 0 3px,transparent 3px 8px) center/6px 100% no-repeat,var(--forest-800);
}
.auth-media::before{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:10px;background:var(--zari-weave-x)}
.auth{display:grid;grid-template-columns:1fr;min-height:calc(100dvh - var(--header-h, 68px));background:var(--bg)}
.auth-media{position:relative;height:200px;overflow:hidden;background:var(--forest-900)}
.auth-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.auth-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,31,23,.15) 0%,rgba(7,31,23,.82) 100%)}
.auth-brand{position:absolute;left:var(--sp-5);right:var(--sp-5);bottom:var(--sp-4);z-index:1;display:flex;align-items:center;gap:12px;color:var(--paper-50)}
.auth-brand img{width:44px;height:44px;flex:none}
.auth-brand b{display:block;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;line-height:1}
.auth-brand span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--zari-300)}
.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-6) var(--sp-5) var(--sp-8)}
.auth-inner{width:100%;max-width:420px;margin:0 auto}
.auth-eyebrow{margin:0 0 6px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.auth-title{margin:0 0 8px;font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,5vw,2.5rem);line-height:1.08;color:var(--text)}
.auth-lead{margin:0 0 var(--sp-5);color:var(--text-2);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.auth-steps{display:flex;gap:6px;margin:0 0 var(--sp-4);padding:0;list-style:none}
.auth-steps li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:var(--text-xs);color:var(--text-muted)}
.auth-steps li::before{content:"";height:3px;border-radius:var(--r-pill);background:var(--border)}
.auth-steps li.on{color:var(--text);font-weight:600}
.auth-steps li.on::before,.auth-steps li.done::before{background:var(--primary)}
.auth-card{padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.auth-card .login-step{max-width:none}
.auth-perks{display:grid;gap:10px;margin:var(--sp-5) 0 0;padding:0;list-style:none}
.auth-perks li{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);color:var(--text-2)}
.auth-perks svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--primary)}
.auth-foot{margin:var(--sp-5) 0 0;font-size:var(--text-xs);color:var(--text-muted)}
.auth-foot a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){
  .auth{grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr)}
  .auth-media{height:auto;min-height:100%}
  .auth-media::before{left:auto;top:0;width:10px;height:auto;background:var(--zari-weave-y)}
  .auth-media::after{background:linear-gradient(180deg,transparent 45%,rgba(7,31,23,.85) 100%)}
  .auth-brand{left:var(--sp-10, 40px);bottom:var(--sp-10, 40px)}
  .auth-brand img{width:56px;height:56px}
  .auth-brand b{font-size:var(--text-4xl)}
  .auth-panel{padding:var(--sp-12, 48px) var(--sp-10, 40px)}
}
/* inside an account section: the same card without the photo */
.auth-gate{max-width:520px}
.auth-gate .auth-card{margin-top:var(--sp-3)}
.auth-note{margin:0 0 var(--sp-4);color:var(--text-2)}
.auth-wrap{padding:0}
#auth-slot .auth-card{padding:0;border:0;background:none;box-shadow:none}
.auth-brand{text-decoration:none}
.auth-back{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0 var(--sp-2);font-size:var(--text-sm);color:var(--text-2);text-decoration:none}
.auth-back:hover{color:var(--primary)}
/* account portal, signed out: the sign-in screen takes the whole page */
body.client-auth .side,body.client-auth .admin-top,body.client-auth #scrim{display:none!important}
body.client-auth .admin{display:block}
body.client-auth .main-wrap{margin:0}
body.client-auth .client .main{max-width:none;padding:0}
body.client-auth .auth{min-height:100dvh}

/* sign out: top bar (desktop) and the phone menu */
.topbar-out{padding:0;border:0;background:none;color:inherit;font:inherit;opacity:.9;cursor:pointer}
.topbar-out:hover{color:var(--zari-300)}
.nav-account{display:none}
@media(max-width:760px){
  .nav-account:not([hidden]){display:grid;gap:8px;margin-top:16px}
}

/* ── product card (Nykaa-style: one shape for every saree) ─────── */
.product{border-color:transparent;background:transparent;border-radius:var(--r-md);transition:box-shadow var(--dur-base) var(--ease)}
.product:hover{transform:none;box-shadow:none}
.product-media{border-radius:var(--r-md)}
.product-body{padding:10px 2px 6px}
.product-brand{font-size:var(--text-2xs);letter-spacing:.1em;color:var(--text);margin:0}
.product .product-name{font-family:var(--font-body);font-size:var(--text-sm);font-weight:400;color:var(--text-2);line-height:1.4;margin:2px 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.product .product-name a{color:inherit}
.product-price{flex-wrap:wrap;gap:4px 8px;margin-top:4px}
.product-price .price{font-family:var(--font-body);font-weight:700;font-size:var(--text-md);color:var(--text)}
.product-price .price-was{color:var(--text-muted);text-decoration:line-through;font-size:var(--text-xs)}
.product-price .price-off{color:var(--accent-ink, var(--zari-700));font-weight:700;font-size:var(--text-xs)}
.product-price .price-note{flex-basis:100%;font-size:var(--text-2xs);color:var(--text-muted)}
.product-cols{margin:0 0 4px}
.product-actions{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:6px;
  opacity:0;transform:translateY(6px);transition:opacity var(--dur-fast),transform var(--dur-fast)}
.product:hover .product-actions,.product:focus-within .product-actions{opacity:1;transform:none}
.product-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px;border:0;border-radius:var(--r-sm);
  background:rgba(255,255,255,.94);color:var(--ink-900);font:600 var(--text-xs)/1 var(--font-body);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.product-act svg{width:15px;height:15px}
.product-act.product-add{background:var(--primary);color:var(--on-primary)}
.product-act:hover{filter:brightness(.96)}
.product-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* touch screens: no hover, so no overlay: the whole card opens the saree (as on Nykaa) */
@media(hover:none){.product-actions{display:none}}

/* ── product page photos (Nykaa-style): the photo fills its column, details beside it ── */
@media (min-width:1001px){
  /* The gallery column is as wide as its photo, so there are no empty bands beside it;
     the details take the rest. The photo is as tall as the window allows (it stays in view). */
  .pdp-layout{grid-template-columns:auto minmax(380px,1fr);gap:20px 48px}
  .pdp-gallery{grid-template-columns:72px auto}
  .pdp-stage{width:min(620px,calc((100vh - var(--header-h) - 96px) * .75));margin-inline:0}
}
@media (max-width:760px){
  /* Phones: the whole 3:4 photo, edge to edge, swiped left and right (was cropped to 360px tall). */
  .pdp-stage{width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter));height:auto;aspect-ratio:3/4;border-radius:0}
  .pdp-thumbs{gap:6px}.pdp-thumbs button{flex:0 0 56px}
}

/* Product detail layout: generous photography, clear choices and quiet information rows. */
body:has(.pdp-page){background:var(--surface)}
.pdp-page{max-width:1280px}
.pdp-page .pdp-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:var(--sp-12);align-items:start}
.pdp-page .pdp-gallery{grid-template-columns:72px minmax(0,1fr);gap:var(--sp-4);min-width:0;top:calc(var(--header-h) + 48px)}
.pdp-page .pdp-stage-row{gap:var(--sp-3)}
.pdp-page .pdp-stage{order:0;width:100%;height:auto;aspect-ratio:3/4;margin:0;border-radius:var(--r-xs);background:var(--surface-muted)}
.pdp-page .pdp-stage img{object-fit:contain}
.pdp-page .pdp-gallery-colour{order:1;font-weight:400;color:var(--text-2)}
.pdp-page [data-spin-viewer]{order:2}
.pdp-page .pdp-thumbs{gap:var(--sp-3);max-height:calc(100dvh - var(--header-h) - 100px)}
.pdp-page .pdp-thumbs button{width:100%;border-radius:var(--r-xs)}
.pdp-page .pdp-thumbs button.on{border-color:var(--primary)}
.pdp-page .pdp-thumbs .pdp-thumb-role{inset:auto 0 0;display:block;padding:var(--sp-1);font-size:9px;line-height:1.3;background:rgba(0,0,0,.55)}
.pdp-page .pdp-thumbs{max-height:max(96px,calc(100dvh - var(--header-h) - 300px))}
.pdp-media-tools{display:grid;gap:var(--sp-2)}
.pdp-media-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;min-height:76px;padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-xs);background:var(--surface);color:var(--primary);font:500 var(--text-xs)/1.3 var(--font-body);cursor:pointer}
.pdp-media-option svg{width:24px;height:24px}
.pdp-media-symbol{font:600 var(--text-lg)/1 var(--font-body)}
.pdp-media-option.on,.pdp-media-option:focus-visible{border-color:var(--primary);outline:1px solid var(--primary)}
.pdp-media-option:disabled{color:var(--text-muted);cursor:not-allowed;background:var(--surface-muted)}
.pdp-media-option:disabled span::after{content:" pending";display:block;font-size:var(--text-2xs)}
.pdp-media-error{position:absolute;inset:auto var(--sp-3) var(--sp-3);background:var(--surface);padding:var(--sp-3);border:1px solid var(--border);z-index:3}
.pdp-page #video-availability{margin-top:var(--sp-2);color:var(--text-muted);line-height:1.5}
.pdp-page .pdp-thumbs button:focus-visible,.pdp-page .swatch:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.pdp-page .pdp-brand{font-size:var(--text-3xl);margin-bottom:var(--sp-2);color:var(--primary)}
.pdp-page .pdp-exclusive{padding:0;background:none;color:var(--accent-ink,var(--zari-700));letter-spacing:.04em;font-size:var(--text-xs);margin-bottom:var(--sp-3)}
.pdp-page .pdp-name{font-size:var(--text-lg);font-weight:400;line-height:1.5;color:var(--text-2)}
.pdp-page .pdp-sub{line-height:1.5}
.pdp-page .pdp-price-block{margin:var(--sp-5) 0 0;padding:0 0 var(--sp-5);border-bottom:1px solid var(--border)}
.pdp-page .pdp-price{flex-wrap:wrap;gap:var(--sp-2)}
.pdp-page .pdp-price .price{font-size:var(--text-2xl);font-style:normal}
.pdp-page .pdp-price-block>.caption{line-height:1.6;margin-top:var(--sp-2)}
.pdp-page .pdp-colour-options{margin-top:var(--sp-5)}
.pdp-page .pdp-colour-options>.label{font-size:var(--text-lg)}
.pdp-page #colour-name{font-weight:400;margin-bottom:var(--sp-3)}
.pdp-page .pdp-swatches{align-items:flex-start;gap:var(--sp-2)}
.pdp-page .pdp-swatches .swatch{width:72px;flex:0 0 72px;align-items:center;color:var(--text)}
.pdp-page .pdp-swatches .swatch-media{width:72px;height:96px;border-radius:var(--r-xs)}
.pdp-page .pdp-swatches .swatch-media img{width:100%;height:100%;object-fit:cover}
.pdp-page .pdp-swatches .swatch.on .swatch-media{border-color:var(--primary)}
.pdp-page .pdp-swatches .swatch.on::after{background-color:var(--primary)}
.pdp-page .pdp-swatches .swatch-name{max-width:72px;line-height:1.4}
.pdp-page .swatch-photo-pending{top:36px}
.pdp-page .pdp-colour-note{margin-top:var(--sp-3);padding:0;background:none;border:0;box-shadow:none;gap:var(--sp-2);color:var(--text-muted);font-size:var(--text-xs);line-height:1.5}
.pdp-page .pdp-info-ico{background:var(--surface-muted);color:var(--text-2)}
.pdp-page .pdp-buy{margin-top:var(--sp-6);gap:var(--sp-3)}
.pdp-page .pdp-ctas{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:var(--sp-3);align-items:stretch}
.pdp-page .pdp-ctas .btn{min-width:0;min-height:52px;padding:var(--sp-3);border-radius:var(--r-xs);font-size:var(--text-sm);line-height:1.35;white-space:normal}
.pdp-page .pdp-wish-cta span{display:inline}
.pdp-page .pdp-assistance{font-size:var(--text-sm);border-top:1px solid var(--border);padding-top:var(--sp-3)}
.pdp-page .pdp-assistance>summary{cursor:pointer;color:var(--text-2);padding:var(--sp-2) var(--sp-6) var(--sp-2) 0;list-style:none;position:relative}
.pdp-page .pdp-assistance>summary::-webkit-details-marker{display:none}
.pdp-page .pdp-assistance>summary::after{content:"+";position:absolute;right:0;font-size:var(--text-lg);line-height:1}
.pdp-page .pdp-assistance[open]>summary::after{content:"−"}
.pdp-page .pdp-assistance-actions{display:grid;gap:var(--sp-3);padding-top:var(--sp-3)}
.pdp-page .pdp-box{border:0;border-top:1px solid var(--border);border-radius:0;padding:var(--sp-5) 0 0;margin-top:var(--sp-6);background:none}
.pdp-page .pdp-delivery .h6{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.4}
.pdp-page .pdp-delivery .input{background:var(--surface);min-width:0}
.pdp-page .pdp-delivery>.body{font-size:var(--text-sm);line-height:1.6}
.pdp-page .pdp-delivery>.caption{margin-top:var(--sp-2);line-height:1.6}
.pdp-page .pdp-promises{gap:var(--sp-3);padding-top:var(--sp-5)}
.pdp-page .pdp-promise{border:0;padding:0;gap:var(--sp-3)}
.pdp-page .pdp-promise-ico{background:none;border-radius:0;width:32px;height:32px}
.pdp-page .pdp-promise-ico svg{width:28px;height:28px}
.pdp-page .pdp-promise b{font-weight:500;line-height:1.5}
.pdp-page .pdp-promise .caption{line-height:1.5;margin-top:var(--sp-1)}
.pdp-page .pdp-know{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.pdp-page .pdp-coupon{background:var(--surface-muted);border-radius:var(--r-xs)}
.pdp-page .pdp-information{margin-top:var(--sp-8);border-top:1px solid var(--border);padding-top:var(--sp-5)}
.pdp-page .pdp-information>h2{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;line-height:1.4;margin:0 0 var(--sp-3)}
.pdp-page .pdp-accordion{border:0;border-radius:0;padding:0;margin:0;background:none}
.pdp-page .pdp-acc summary{padding:var(--sp-4) var(--sp-8) var(--sp-4) 0}
.pdp-page .pdp-acc-label{font-size:var(--text-md)}
.pdp-page .pdp-acc-hint{margin-top:var(--sp-1);line-height:1.5}
.pdp-page .pdp-acc-body{line-height:1.7;padding-bottom:var(--sp-5);overflow-wrap:anywhere}
.pdp-page .pdp-acc-body .table{table-layout:fixed;width:100%}
.pdp-page .pdp-acc-body .pdp-pack{margin-top:var(--sp-4);padding-top:var(--sp-4)}
.pdp-page .pdp-meta{padding-top:var(--sp-3);line-height:1.6}
.pdp-page .pdp-view-options .btn{border-radius:var(--r-xs)}
@media (min-width:1001px){
  .pdp-page .pdp-gallery{position:sticky}
}
@media (min-width:761px) and (max-width:1000px){
  .pdp-page .pdp-layout{gap:var(--sp-6)}
  .pdp-page .pdp-gallery{grid-template-columns:52px minmax(0,1fr);gap:var(--sp-2)}
  .pdp-page .pdp-ctas{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pdp-page .pdp-layout{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .pdp-page .pdp-gallery{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);position:static}
  .pdp-page .pdp-stage{width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter));border-radius:0}
  .pdp-page .pdp-thumbs{max-height:none;gap:var(--sp-2)}
  .pdp-page .pdp-thumbs button{width:56px;flex:0 0 56px}
  .pdp-page .pdp-thumbs-wrap{flex-direction:row;align-items:flex-start;gap:var(--sp-2)}
  .pdp-page .pdp-thumbs{flex:1;min-width:0}
  .pdp-media-tools{display:flex;flex:0 0 auto}
  .pdp-media-option{width:56px;min-height:75px;padding:var(--sp-1);gap:var(--sp-1)}
  .pdp-page .pdp-brand{font-size:var(--text-2xl)}
  .pdp-page .pdp-name{font-size:var(--text-md)}
  .pdp-page .pdp-swatches{flex-wrap:nowrap;overflow-x:auto;padding:var(--sp-1) var(--sp-1) var(--sp-2);margin-inline:calc(-1 * var(--sp-1));scroll-snap-type:x proximity}
  .pdp-page .pdp-swatches .swatch{scroll-snap-align:start;width:64px;flex-basis:64px}
  .pdp-page .pdp-swatches .swatch-media{width:64px;height:86px}
  .pdp-page .pdp-ctas{gap:var(--sp-2)}
  .pdp-page .pdp-ctas .btn{font-size:var(--text-xs);padding:var(--sp-2)}
  .pdp-page .pdp-zoom-hint{font-size:var(--text-2xs);max-width:calc(100% - 100px)}
}