/* ============================================================================
   VESPER — shared design system
   One stylesheet, two themes. All color is driven by CSS variables (RGB
   triplets) so toggling the `.dark` class on <html> flips the whole palette.
   Tailwind utilities (ink / panel / fog / chalk / clay / acc …) read the same
   variables via tailwind.config.js.  Light-first, editorial, warm-minimal.
   ========================================================================== */

:root{
  /* ── LIGHT (default) ── */
  --ink:    245 242 235;   /* page background — warm bone     */
  --panel:  255 254 251;   /* cards / surfaces                */
  --panel2: 237 232 222;   /* nested surfaces                 */
  --line-rgb: 28 23 18;    /* hairlines (dark on light)       */
  --fog:    118 108  96;   /* muted text                      */
  --chalk:   28  23  18;   /* primary text — espresso         */
  --clay:   183  78  46;   /* brand fill — terracotta         */
  --acc:    166  66  36;   /* readable accent TEXT on light   */
  --gold:   158 126  58;   /* secondary — antique gold        */
  --sage:    96 110  86;   /* secondary — sage                */
  --dot-base: 28 23 18;    /* hero dot-field base color        */
  --grain-opacity: .04;
  --grain-blend: multiply;
  color-scheme: light;
}
.dark{
  /* ── DARK ── */
  --ink:     20  16  13;   /* near-black espresso             */
  --panel:   29  24  20;
  --panel2:  37  31  26;
  --line-rgb: 255 250 242;
  --fog:    156 143 128;
  --chalk:  243 237 228;   /* warm cream                      */
  --clay:   214 108  72;   /* brighter terracotta             */
  --acc:    223 133  98;   /* readable accent on dark         */
  --gold:   201 165  98;
  --sage:   142 158 126;
  --dot-base: 156 143 128;
  --grain-opacity: .055;
  --grain-blend: screen;
  color-scheme: dark;
}

html,body{ background:rgb(var(--ink)); }
body{ -webkit-font-smoothing:antialiased; cursor:none; }
@media (max-width:900px){ body{cursor:auto} #cursor,#cursorDot{display:none} }

/* ──────────────────────────────────────────────────────────────
   Design-width system: sizes scale to the viewport per breakpoint
   via calc(N / var(--dw) * 100vw). Full-bleed — .shell sets gutters.
   ────────────────────────────────────────────────────────────── */
:root{ --dw:375; }
@media (min-width:768px){ :root{ --dw:768; } }
@media (min-width:1024px){ :root{ --dw:1024; } }
@media (min-width:1440px){ :root{ --dw:1440; } }
@media (min-width:1920px){ :root{ --dw:1440; } }

.shell{ width:100%; padding-inline:calc(20/var(--dw)*100vw); }
@media (min-width:768px){ .shell{ padding-inline:calc(48/var(--dw)*100vw); } }
@media (min-width:1024px){ .shell{ padding-inline:calc(72/var(--dw)*100vw); } }
@media (min-width:1440px){ .shell{ padding-inline:calc(112/var(--dw)*100vw); } }
.shell-tight{ max-width:760px; margin-inline:auto; }

.label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }

/* ── Atmosphere ── */
.bg-grid{ background-image:linear-gradient(rgb(var(--line-rgb)/.04) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--line-rgb)/.04) 1px,transparent 1px); background-size:78px 78px; mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 28%,transparent 80%); }
.dotgrid{ background-image:radial-gradient(rgb(var(--line-rgb)/.13) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 62% 55% at 50% 45%,#000 25%,transparent 75%); mask-image:radial-gradient(ellipse 62% 55% at 50% 45%,#000 25%,transparent 75%); }
#heroCanvas{opacity:.65;-webkit-mask-image:radial-gradient(ellipse 70% 64% at 50% 46%,#000 18%,transparent 84%);mask-image:radial-gradient(ellipse 70% 64% at 50% 46%,#000 18%,transparent 84%)}
:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:3px;border-radius:6px}
.grain::before{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.6}
.dark .aurora{opacity:.85}
.aurora span{position:absolute;border-radius:9999px;filter:blur(110px);will-change:transform}
@keyframes au1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.2)}}
@keyframes au2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-80px,30px) scale(.92)}}
@keyframes au3{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-60px)}}

/* ── Cursor ── */
#cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid rgb(var(--acc)/.6);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,border-color .25s;mix-blend-mode:difference}
#cursorDot{position:fixed;top:0;left:0;width:5px;height:5px;background:rgb(var(--acc));border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
.cursor-grow #cursor{width:64px;height:64px;background:rgb(var(--acc)/.12);border-color:transparent}

/* ── Entrance + reveal ── */
@keyframes rise{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.rise{opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}.d5{animation-delay:.5s}.d6{animation-delay:.62s}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(1){transition-delay:.04s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.12s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.2s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.28s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.36s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.44s}
.reveal-stagger.in>*:nth-child(7){transition-delay:.52s}
.reveal-stagger.in>*:nth-child(8){transition-delay:.6s}

/* ── Accordion (JS-driven, smooth grid-rows height) ── */
.acc-item{border:1px solid rgb(var(--line-rgb)/.1);border-radius:1rem;background:rgb(var(--line-rgb)/.02);transition:border-color .35s,background .35s,box-shadow .35s}
.acc-item:hover{border-color:rgb(var(--line-rgb)/.2)}
.acc-item.open{border-color:rgb(var(--acc)/.4);background:rgb(var(--panel));box-shadow:0 20px 50px -28px rgb(var(--clay)/.4)}
.acc-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;padding:1.15rem 1.5rem;font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem;list-style:none;user-select:none}
.acc-ic{position:relative;display:grid;place-items:center;width:1.9rem;height:1.9rem;flex:none;border-radius:9999px;border:1px solid rgb(var(--line-rgb)/.16);color:rgb(var(--acc));transition:transform .4s cubic-bezier(.2,.7,.2,1),background .35s,border-color .35s}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.acc-ic::before{width:11px;height:1.5px}
.acc-ic::after{width:1.5px;height:11px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.acc-item.open .acc-ic{transform:rotate(90deg);background:rgb(var(--acc)/.12);border-color:rgb(var(--acc)/.55)}
.acc-item.open .acc-ic::after{transform:scaleY(0)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden}
.acc-a{padding:0 1.5rem 1.3rem;color:rgb(var(--fog))}

/* ── Rotating text — per-character spring stagger ── */
.rot{display:inline-flex;height:1em;overflow:hidden;vertical-align:bottom;line-height:1;white-space:nowrap}
.rot .rch{display:inline-block;line-height:1;transform:translateY(100%);opacity:0;transition:transform .6s cubic-bezier(.22,.9,.3,1.15),opacity .42s ease;will-change:transform,opacity}

/* ── Shiny / beam / motion ── */
@keyframes shine{0%{background-position:200% center}100%{background-position:-200% center}}
.shiny{background:linear-gradient(110deg,rgb(var(--fog)) 35%,rgb(var(--chalk)) 50%,rgb(var(--fog)) 65%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.beam{position:relative}
.beam::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a),transparent 0 80%,rgb(var(--clay)) 90%,rgb(var(--gold)) 97%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beamrun 6s linear infinite}
@keyframes beamrun{to{--a:360deg}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:slide 36s linear infinite}
.marquee-rev{animation:slide 36s linear infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.floaty{animation:float 6s ease-in-out infinite}

/* ── Surfaces ── */
.glass{background:rgb(var(--panel));box-shadow:inset 0 1px 0 rgb(var(--line-rgb)/.04),0 30px 60px -30px rgb(28 23 18/.16)}
.dark .glass{background:linear-gradient(180deg,rgb(255 255 255/.04),rgb(255 255 255/.012));box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 30px 60px -25px rgb(0 0 0/.7)}
.gradient-text{background:linear-gradient(180deg,rgb(var(--chalk)) 0%,rgb(var(--fog)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.serif-it{font-family:'Fraunces',serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.stroke-head{-webkit-text-stroke:1px rgb(var(--chalk)/.28);color:transparent}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(120deg,transparent 30%,rgb(255 255 255/.45) 50%,transparent 70%);transition:transform .7s;pointer-events:none}
.btn-shine:hover::after{transform:translateX(120%)}

/* ── premium button system ── */
.arw{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
a:hover>.arw,button:hover>.arw{transform:translateX(4px)}
.btn-clay{color:#fff;background:linear-gradient(180deg,rgb(var(--clay)),rgb(var(--acc)));box-shadow:0 0 0 1px rgb(var(--clay)/.4),0 12px 36px -10px rgb(var(--clay)/.6),inset 0 1px 0 rgb(255 255 255/.22);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.btn-clay:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgb(var(--clay)/.7),0 18px 50px -10px rgb(var(--clay)/.85),inset 0 1px 0 rgb(255 255 255/.3)}
.btn-clay:active{transform:translateY(0) scale(.99)}
.btn-ink{color:rgb(var(--ink));background:rgb(var(--chalk));box-shadow:0 12px 30px -12px rgb(var(--chalk)/.5);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,opacity .25s}
.btn-ink:hover{transform:translateY(-2px);opacity:.92}
.btn-ink:active{transform:translateY(0) scale(.99)}
.btn-ghost{border:1px solid rgb(var(--line-rgb)/.16);background:rgb(var(--line-rgb)/.03);backdrop-filter:blur(8px);transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,background .25s,color .25s}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgb(var(--acc)/.5);background:rgb(var(--acc)/.07);color:rgb(var(--chalk))}

/* ── Header ── */
.nav-link{position:relative;color:rgb(var(--fog));transition:color .25s}
.nav-link:hover{color:rgb(var(--chalk))}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:2px;background:rgb(var(--acc));transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.nav-link:hover::after{transform:scaleX(1)}
#topbar{transition:height .45s cubic-bezier(.2,.7,.2,1),opacity .3s;overflow:hidden}
#siteheader.nav-scrolled #topbar{height:0;opacity:0}
#navbar{border-bottom:1px solid transparent;transition:background .35s,border-color .35s,backdrop-filter .35s}
#siteheader.nav-scrolled #navbar{background:rgb(var(--ink)/.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgb(var(--line-rgb)/.09)}

/* ── Theme toggle ── */
.tgl{display:grid;place-items:center;width:40px;height:40px;border-radius:9999px;border:1px solid rgb(var(--line-rgb)/.16);background:transparent;color:rgb(var(--chalk));cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.tgl:hover{border-color:rgb(var(--acc)/.55);background:rgb(var(--acc)/.08)}
.tgl span{display:grid;place-items:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tgl:active span{transform:rotate(180deg) scale(.85)}
.tgl .ic-sun{display:none}
.tgl .ic-moon{display:block}
.dark .tgl .ic-sun{display:block}
.dark .tgl .ic-moon{display:none}

/* ── icon button (search / account / cart triggers) ── */
.iconbtn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:9999px;border:1px solid transparent;color:rgb(var(--chalk));cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.iconbtn:hover{border-color:rgb(var(--line-rgb)/.16);background:rgb(var(--line-rgb)/.04)}
.cart-count{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:9999px;background:rgb(var(--clay));color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;line-height:1}

/* ══ E-COMMERCE COMPONENTS ══════════════════════════════════════ */

/* ── Product card ── */
.product{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.product:hover{transform:translateY(-4px)}
.product-media{position:relative;overflow:hidden;border-radius:1rem;background:rgb(var(--panel2));aspect-ratio:4/5}
.product-media .ph{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s}
.product:hover .product-media .ph{transform:scale(1.05)}
.product-media .ph.alt{opacity:0}
.product:hover .product-media .ph.alt{opacity:1}
.product-media img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
.quick{position:absolute;left:1rem;right:1rem;bottom:1rem;transform:translateY(14px);opacity:0;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s}
.product:hover .quick{transform:none;opacity:1}
@media (max-width:900px){ .quick{transform:none;opacity:1} }
.badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:.32rem .55rem;border-radius:9999px;line-height:1}
.badge-new{background:rgb(var(--sage)/.16);color:rgb(var(--sage))}
.badge-sale{background:rgb(var(--clay)/.16);color:rgb(var(--acc))}
.badge-soldout{background:rgb(var(--line-rgb)/.08);color:rgb(var(--fog))}
.price{font-family:'Fraunces',serif;font-weight:500}
.price-was{color:rgb(var(--fog));text-decoration:line-through;text-decoration-thickness:1px;margin-right:.5rem}

/* ── color swatches ── */
.swatch{width:18px;height:18px;border-radius:9999px;box-shadow:inset 0 0 0 1px rgb(var(--line-rgb)/.2);transition:transform .2s,box-shadow .2s;cursor:pointer}
.swatch:hover{transform:scale(1.15)}
.swatch.sel{box-shadow:inset 0 0 0 1px rgb(var(--line-rgb)/.2),0 0 0 2px rgb(var(--ink)),0 0 0 3.5px rgb(var(--acc))}

/* ── size selector ── */
.size-opt{display:grid;place-items:center;min-width:48px;height:44px;padding:0 .5rem;border-radius:.65rem;border:1px solid rgb(var(--line-rgb)/.16);font-size:.875rem;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.size-opt:hover{border-color:rgb(var(--acc)/.6)}
.size-opt.sel{border-color:rgb(var(--chalk));background:rgb(var(--chalk));color:rgb(var(--ink))}
.size-opt.disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}

/* ── quantity stepper ── */
.qty{display:inline-flex;align-items:center;border:1px solid rgb(var(--line-rgb)/.16);border-radius:9999px;overflow:hidden}
.qty button{width:44px;height:44px;display:grid;place-items:center;color:rgb(var(--chalk));cursor:pointer;transition:background .2s}
.qty button:hover{background:rgb(var(--line-rgb)/.05)}
.qty input{width:40px;text-align:center;border:0;background:transparent;color:rgb(var(--chalk));font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── star rating ── */
.stars{display:inline-flex;gap:2px;color:rgb(var(--gold))}
.stars svg{width:15px;height:15px}

/* ── filter chip ── */
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:9999px;border:1px solid rgb(var(--line-rgb)/.14);color:rgb(var(--fog));font-size:.875rem;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s,color .2s;white-space:nowrap}
.chip:hover{border-color:rgb(var(--acc)/.5);color:rgb(var(--chalk))}
.chip.sel{border-color:rgb(var(--chalk));background:rgb(var(--chalk));color:rgb(var(--ink))}

/* ── product gallery (PDP) ── */
.gallery-main{position:relative;overflow:hidden;border-radius:1.25rem;background:rgb(var(--panel2));aspect-ratio:4/5}
.gallery-main .gph{position:absolute;inset:0;opacity:0;transition:opacity .5s cubic-bezier(.2,.7,.2,1)}
.gallery-main .gph.on{opacity:1}
.thumb{position:relative;overflow:hidden;border-radius:.7rem;aspect-ratio:1;background:rgb(var(--panel2));cursor:pointer;box-shadow:inset 0 0 0 1px rgb(var(--line-rgb)/.08);transition:box-shadow .25s}
.thumb.on{box-shadow:inset 0 0 0 2px rgb(var(--acc))}

/* ── cart drawer ── */
#cartOverlay{position:fixed;inset:0;z-index:95;background:rgb(10 8 6/.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s}
#cartOverlay.open{opacity:1;pointer-events:auto}
#cartDrawer{position:fixed;top:0;right:0;bottom:0;z-index:96;width:min(440px,100vw);background:rgb(var(--panel));box-shadow:-30px 0 60px -30px rgb(0 0 0/.4);transform:translateX(100%);transition:transform .42s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
#cartDrawer.open{transform:none}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;padding:1rem 0;border-bottom:1px solid rgb(var(--line-rgb)/.09)}
.cart-thumb{border-radius:.6rem;background:rgb(var(--panel2));aspect-ratio:4/5;width:64px;overflow:hidden}

/* ── Search (command palette) ──
   A high-z overlay that sits ABOVE the fixed header (z-50), the grain
   layer (z-70) and the hero image — so the panel never gets trapped
   behind the hero artwork. Mirrors the cart-drawer open/close pattern. */
#searchOverlay{position:fixed;inset:0;z-index:110;background:rgb(10 8 6/.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
#searchOverlay.open{opacity:1;pointer-events:auto}
#searchPanel{position:fixed;left:50%;top:calc(80px + env(safe-area-inset-top));z-index:111;width:min(620px,calc(100vw - 32px));transform:translate(-50%,-14px) scale(.97);opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .28s;border-radius:1.25rem;border:1px solid rgb(var(--line-rgb)/.12);background:rgb(var(--panel));box-shadow:0 44px 90px -34px rgb(0 0 0/.55),inset 0 1px 0 rgb(var(--line-rgb)/.05);overflow:hidden}
#searchPanel.open{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
.search-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.15rem;border-bottom:1px solid rgb(var(--line-rgb)/.08)}
.search-head>svg{flex:none;color:rgb(var(--acc))}
#searchInput{flex:1;min-width:0;border:0;background:transparent;color:rgb(var(--chalk));font-family:'Inter',sans-serif;font-size:1rem;outline:none}
#searchInput::placeholder{color:rgb(var(--fog)/.85)}
.search-esc{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:rgb(var(--fog));border:1px solid rgb(var(--line-rgb)/.16);border-radius:.4rem;padding:.28rem .45rem;line-height:1}
.search-body{max-height:min(58vh,420px);overflow-y:auto;overscroll-behavior:contain;padding:.5rem}
.search-section-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--fog));padding:.7rem .75rem .35rem}
.search-row{display:flex;align-items:center;gap:.85rem;padding:.55rem .75rem;border-radius:.8rem;cursor:pointer;transition:background .18s;color:rgb(var(--chalk))}
.search-row:hover,.search-row.active{background:rgb(var(--line-rgb)/.05)}
.search-thumb{width:46px;height:46px;flex:none;border-radius:.6rem;overflow:hidden}
.search-row .nm{font-family:'Fraunces',serif;font-weight:500;font-size:.98rem;line-height:1.15}
.search-row .ct{font-size:.78rem;color:rgb(var(--fog));margin-top:.12rem}
.search-row .pr{margin-left:auto;font-family:'Fraunces',serif;font-weight:500;color:rgb(var(--acc));white-space:nowrap}
.search-row mark{background:rgb(var(--acc)/.18);color:inherit;border-radius:3px;padding:0 .08em}
.search-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.35rem .75rem .85rem}
.search-chip{font-size:.82rem;padding:.4rem .8rem;border-radius:9999px;border:1px solid rgb(var(--line-rgb)/.14);color:rgb(var(--fog));cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.search-chip:hover{border-color:rgb(var(--acc)/.5);color:rgb(var(--chalk));background:rgb(var(--acc)/.06)}
.search-empty{padding:2.4rem 1rem;text-align:center;color:rgb(var(--fog))}

/* ── editorial marquee strip ── */
.tape{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(2rem,6vw,4.5rem);font-weight:400;letter-spacing:-.01em;line-height:1.1}
.tape .dotsep{color:rgb(var(--clay))}

/* ── input ── */
.field{width:100%;border:1px solid rgb(var(--line-rgb)/.14);background:rgb(var(--panel));border-radius:.8rem;padding:.85rem 1rem;color:rgb(var(--chalk));font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:rgb(var(--fog)/.8)}
.field:focus{outline:none;border-color:rgb(var(--acc)/.6);box-shadow:0 0 0 3px rgb(var(--acc)/.12)}

/* ── Footer ── */
.wm{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.03em;line-height:.78;background:linear-gradient(180deg,rgb(var(--chalk)/.30) 0%,rgb(var(--clay)/.34) 50%,rgb(var(--clay)/.04) 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.soc{display:grid;place-items:center;width:40px;height:40px;border-radius:9999px;border:1px solid rgb(var(--line-rgb)/.1);color:rgb(var(--fog));transition:transform .25s cubic-bezier(.2,.7,.2,1),color .25s,background .25s,border-color .25s}
.soc:hover{color:#fff;background:rgb(var(--clay));border-color:rgb(var(--clay));transform:translateY(-2px)}
.flink{color:rgb(var(--fog));transition:color .2s}
.flink:hover{color:rgb(var(--chalk))}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.85)}}
.dotpulse{animation:pulse 2.2s ease-in-out infinite}
.card-hover{transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.card-hover:hover{transform:translateY(-5px);border-color:rgb(var(--acc)/.3);box-shadow:0 30px 60px -30px rgb(var(--clay)/.22)}
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,rgb(var(--clay)),rgb(var(--gold)));z-index:99}

/* ── Avatar: optional photo with initials fallback ── */
.avatar{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:9999px;background:rgb(var(--clay)/.16);font-family:'Fraunces',serif;font-weight:600;color:rgb(var(--acc))}
.avatar img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}

/* ── Optional cover image over gradient placeholders ── */
.cover-img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;z-index:1}

/* ── product placeholder textures (image-free fallback) ──
   Each .ph without an <img> shows a tasteful woven gradient so the
   template looks finished out of the box. Swap in real <img> any time. */
/* Contain the ::after texture overlay to the .ph box. Without an explicit
   position, the absolutely-positioned ::after escapes to the nearest
   positioned ancestor (e.g. the fixed cart drawer) and blankets it,
   swallowing clicks on the close button, qty controls and checkout.
   `position` is set via :where() (zero specificity) so a positioning
   utility like `absolute inset-0` (used on the hero/category/story fills)
   still wins — without this, `.ph` forced position:relative and those
   image fills collapsed to 0 height, hiding the photos. */
:where(.ph){position:relative}
.ph{overflow:hidden}
.ph::after{pointer-events:none}
.ph[data-tex="1"]{background:radial-gradient(120% 120% at 20% 10%,rgb(var(--clay)/.5),transparent 55%),linear-gradient(140deg,rgb(var(--panel2)),rgb(var(--gold)/.22))}
.ph[data-tex="2"]{background:radial-gradient(120% 120% at 80% 20%,rgb(var(--sage)/.45),transparent 55%),linear-gradient(140deg,rgb(var(--panel2)),rgb(var(--sage)/.18))}
.ph[data-tex="3"]{background:radial-gradient(120% 120% at 30% 80%,rgb(var(--gold)/.5),transparent 55%),linear-gradient(140deg,rgb(var(--panel2)),rgb(var(--clay)/.16))}
.ph[data-tex="4"]{background:radial-gradient(120% 120% at 70% 70%,rgb(var(--clay)/.4),transparent 50%),linear-gradient(160deg,rgb(var(--panel2)),rgb(var(--chalk)/.08))}
.ph[data-tex="5"]{background:radial-gradient(120% 120% at 50% 15%,rgb(var(--gold)/.4),transparent 55%),linear-gradient(140deg,rgb(var(--panel2)),rgb(var(--sage)/.22))}
.ph[data-tex="6"]{background:radial-gradient(120% 120% at 15% 60%,rgb(var(--sage)/.4),transparent 55%),linear-gradient(150deg,rgb(var(--panel2)),rgb(var(--clay)/.2))}
.ph::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgb(var(--line-rgb)/.03) 0 2px,transparent 2px 9px);mix-blend-mode:overlay}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.reveal-stagger>*{opacity:1;transform:none}
  /* Motion-sensitive users: restore the native cursor and drop the custom one. */
  body{cursor:auto} #cursor,#cursorDot{display:none}}

/* ════════════════════════════════════════════════════════════════
   Premium mobile pack — adaptive hardening (added in QA pass)
   All rules are inert on non-notched screens / desktop (insets = 0,
   dvh == vh when there is no dynamic browser UI), so desktop is unchanged.
   ════════════════════════════════════════════════════════════════ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }     /* no iOS font inflation */
html,body{ overflow-x:clip; }                                      /* hard stop on any horizontal bleed */
*{ -webkit-tap-highlight-color:transparent; }                      /* no grey tap flash */

/* Full-height sections track the *visible* viewport → kills the mobile URL-bar jump */
@supports (height:100dvh){
  .min-h-screen   { min-height:100dvh; }
  .min-h-\[92vh\] { min-height:92dvh; }
  .min-h-\[70vh\] { min-height:70dvh; }
}

/* iOS safe-area / notch: solid strip fills the inset behind the fixed header */
#siteheader{ padding-top:env(safe-area-inset-top); }
#siteheader::before{ content:""; position:absolute; left:0; right:0; top:0; height:env(safe-area-inset-top); background:rgb(var(--ink)); }

/* Cart drawer: clear the notch + home-indicator, and don't scroll-chain to the page */
#cartDrawer{ padding-top:env(safe-area-inset-top); }
#cartLines{ overscroll-behavior:contain; }
#cartDrawer #cartFooter{ padding-bottom:calc(1.25rem + env(safe-area-inset-bottom)); }


/* ── Mobile ergonomics ────────────────────────────────────────────────────
   WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px interactive targets. Inline links
   sit at ~20px, so they get vertical padding on small screens, and the
   smallest decorative labels are raised to a legible floor. */
@media (max-width: 900px) {
  .flink,
  a.group.inline-flex,
  a.mt-9.inline-flex,
  a.text-sm.font-semibold,
  .nav-link { display: inline-block; padding-block: 7px; }
  .field.rounded-full, #searchInput { min-height: 44px; }
  .label { font-size: 11.5px; }
  .field { min-height: 44px; }
}


/* ── Header collision guard ───────────────────────────────────────────────
   The centred nav is absolutely positioned, so it does not reserve space in
   the flex row. Between the md and lg breakpoints it used to run under the
   icon group. It now appears only from lg up, and is hidden defensively if
   the row ever gets too narrow for it. */
@media (max-width: 1023px) {
  .nav-center { display: none !important; }
}
@media (min-width: 1024px) {
  .nav-center { display: flex !important; }
  /* Above lg the centred nav takes over, so the burger and its panel go away. */
  .nav-burger, .nav-mobile { display: none !important; }
}