/* =========================================================
   THE INK LABEL — store.css  (black & white streetwear)
   ========================================================= */
:root{
  --bg:#0a0a0a;--bg2:#111;--bg3:#161616;--line:#262626;
  --ink:#f5f5f5;--dim:#a8a8a8;--mut:#6f6f6f;
  --serif:'Cormorant Garamond',Georgia,serif;
  --disp:'Cinzel',Georgia,serif;
  --body:'Jost',system-ui,Arial,sans-serif;
  --ease:cubic-bezier(.6,.01,.18,1);
}
*{margin:0;padding:0;box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{width:min(1280px,92vw);margin:0 auto}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:.98}
.eyebrow{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--dim)}
section{padding:clamp(3rem,7vw,6rem) 0}
.section-head{text-align:center;margin-bottom:2.6rem}
.section-head h2{font-size:clamp(2rem,5vw,3.6rem)}
.section-head p{color:var(--dim);margin-top:.6rem}

/* announcement bar */
.announce{background:#fff;color:#000;text-align:center;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;padding:.55rem 1rem;font-weight:500}

/* header */
.s-nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.s-nav .bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.s-nav .left,.s-nav .right{display:flex;align-items:center;gap:1.4rem}
.s-nav a.navlink{font-family:var(--disp);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  transition:color .3s}
.s-nav a.navlink:hover{color:var(--dim)}
.s-logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.6rem}
.s-logo img{height:50px;width:auto}
.s-logo b{font-family:var(--disp);font-size:1.5rem;letter-spacing:.12em}
.icobtn{position:relative;width:26px;height:26px;display:grid;place-items:center;color:var(--ink)}
.icobtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.cart-count{position:absolute;top:-8px;right:-9px;background:#fff;color:#000;font-size:.6rem;font-weight:700;
  min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-family:var(--body)}
.burger{display:none;flex-direction:column;gap:5px;width:26px}
.burger span{height:2px;background:var(--ink);display:block;transition:.3s}

/* hero */
.s-hero{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;border-bottom:1px solid var(--line)}
.s-hero .bgwrap{position:absolute;inset:0;z-index:0}
.s-hero .bgwrap::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 30%,rgba(0,0,0,.5),rgba(0,0,0,.9))}
.s-hero .bgwrap img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.s-hero .inner{position:relative;z-index:2;padding:2rem}
.s-hero .label-logo{width:clamp(280px,46vw,520px);margin:0 auto 1rem;animation:fade .9s var(--ease) both}
.s-hero h1{font-size:clamp(3rem,11vw,8rem);margin:.2rem 0}
.s-hero .tag{color:var(--dim);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;margin-top:.4rem}
.s-hero .soonpill{display:inline-block;margin-top:1.6rem;border:1px solid #fff;padding:.8rem 2rem;border-radius:100px;
  font-family:var(--disp);letter-spacing:.2em;font-size:1rem}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* category chips */
.cats{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.cat-chip{border:1px solid var(--line);background:var(--bg2);border-radius:14px;padding:1.5rem 2rem;min-width:200px;
  text-align:center;transition:.4s var(--ease);flex:1 1 200px;max-width:280px}
.cat-chip:hover{border-color:#fff;transform:translateY(-5px);background:var(--bg3)}
.cat-chip .k{font-family:var(--disp);font-size:1.5rem}
.cat-chip .c{display:block;color:var(--mut);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;margin-top:.4rem}

/* product grid */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.p-card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:.45s var(--ease);position:relative;display:flex;flex-direction:column}
.p-card:hover{transform:translateY(-6px);border-color:#3a3a3a}
.p-shot{position:relative;aspect-ratio:4/5;background:
  repeating-linear-gradient(45deg,#0f0f0f,#0f0f0f 12px,#121212 12px,#121212 24px);
  display:grid;place-items:center;overflow:hidden}
.p-shot .tee{width:72%;opacity:.5;filter:grayscale(1)}
.p-shot .wm{position:absolute;inset:0;display:grid;place-items:center;opacity:.10}
.p-shot .wm img{width:62%}
.ribbon{position:absolute;top:12px;left:12px;background:#fff;color:#000;font-family:var(--disp);
  font-size:.7rem;letter-spacing:.14em;padding:.3rem .7rem;border-radius:4px;z-index:3}
.ribbon.alt{background:#000;color:#fff;border:1px solid #fff;left:auto;right:12px}
.p-info{padding:1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.45rem}
.p-info .pt{font-family:var(--disp);font-size:1.15rem;letter-spacing:.04em}
.p-info .pm{color:var(--mut);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.p-info .pp{color:var(--dim);font-size:.95rem;margin-top:.1rem}
.p-info .soon{color:#fff;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);
  padding:.55rem;text-align:center;border-radius:8px;margin-top:.4rem;transition:.3s}
.p-card:hover .soon{border-color:#fff}

/* value props */
.vp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.vp{border:1px solid var(--line);border-radius:12px;padding:2rem 1.6rem;text-align:center;background:var(--bg2)}
.vp svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:1.4;margin:0 auto 1rem}
.vp h3{font-size:1.2rem;margin-bottom:.4rem}
.vp p{color:var(--dim);font-size:.9rem}
@media(max-width:760px){.vp-grid{grid-template-columns:1fr}}

/* generic buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--disp);
  letter-spacing:.12em;text-transform:uppercase;font-size:.95rem;padding:1rem 2rem;border-radius:8px;transition:.3s}
.btn-w{background:#fff;color:#000}.btn-w:hover{background:var(--dim)}
.btn-o{border:1px solid #fff;color:#fff}.btn-o:hover{background:#fff;color:#000}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-block{width:100%}

/* accordion (FAQ / info) */
.acc{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.acc .item{border-bottom:1px solid var(--line)}
.acc .head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem .3rem;text-align:left;font-family:var(--disp);font-size:1.05rem;letter-spacing:.04em}
.acc .head .pm{font-size:1.4rem;transition:.3s;color:var(--dim)}
.acc .item.open .head .pm{transform:rotate(45deg);color:#fff}
.acc .body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc .body p{color:var(--dim);padding:0 .3rem 1.2rem;font-size:.95rem}

/* footer */
.s-foot{border-top:1px solid var(--line);background:#070707;padding:3.5rem 0 2rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-col h4{font-family:var(--disp);font-size:1rem;letter-spacing:.1em;margin-bottom:1rem;color:#fff}
.foot-col a,.foot-col span{display:block;color:var(--dim);font-size:.86rem;padding:.28rem 0;transition:color .3s}
.foot-col a:hover{color:#fff}
.foot-brand img{height:64px;margin-bottom:1rem}
.foot-brand p{color:var(--mut);font-size:.85rem;max-width:34ch}
.foot-bottom{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.4rem;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:var(--mut);font-size:.76rem}
.foot-bottom a{color:var(--mut)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}

/* product page */
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
.pd .gallery{position:sticky;top:96px}
.pd .main-shot{aspect-ratio:4/5;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#0f0f0f,#0f0f0f 14px,#131313 14px,#131313 28px);position:relative;overflow:hidden}
.pd .main-shot .tee{width:64%;opacity:.55;filter:grayscale(1)}
.pd .main-shot .wm{position:absolute;inset:0;display:grid;place-items:center;opacity:.08}
.pd .main-shot .wm img{width:55%}
.pd .pcat{color:var(--dim);letter-spacing:.25em;text-transform:uppercase;font-size:.74rem}
.pd h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:.5rem 0}
.pd .psub{color:var(--dim);font-size:.92rem;letter-spacing:.04em;margin:-.2rem 0 .6rem}
.pd .price{font-size:1.3rem;color:var(--ink);margin-bottom:.4rem}
.pd .price s{color:var(--mut);margin-left:.5rem;font-size:1rem}
.pd .desc{color:var(--dim);margin:1.2rem 0;max-width:50ch}
.opt-label{font-family:var(--disp);letter-spacing:.1em;font-size:.85rem;margin:1.4rem 0 .6rem;text-transform:uppercase}
.sizes{display:flex;gap:.6rem;flex-wrap:wrap}
.size{min-width:54px;height:50px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;
  font-family:var(--disp);letter-spacing:.05em;transition:.25s}
.size:hover{border-color:#fff}
.size.sel{background:#fff;color:#000;border-color:#fff}
/* sold-out / disabled size — muted, struck-through, not selectable */
.size.oos{color:var(--mut);border-color:var(--line);text-decoration:line-through;
  cursor:not-allowed;opacity:.55;position:relative;background:transparent}
.size.oos:hover{border-color:var(--line)}
.size-none{color:var(--mut);font-size:.85rem;letter-spacing:.05em}
@media(max-width:360px){.size{min-width:46px;height:46px;font-size:.9rem}.sizes{gap:.45rem}}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qty button{width:44px;height:48px;font-size:1.2rem}
.qty input{width:48px;height:48px;text-align:center;background:transparent;color:#fff;border:none;font-family:var(--disp)}
.pd-cta{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
.feat-list{margin-top:1.6rem;border-top:1px solid var(--line)}
@media(max-width:860px){.pd{grid-template-columns:1fr}.pd .gallery{position:static}}

/* cart */
.cart-row{display:grid;grid-template-columns:90px 1fr auto auto;gap:1.2rem;align-items:center;
  border-bottom:1px solid var(--line);padding:1.2rem 0}
.cart-row .thumb{width:90px;aspect-ratio:4/5;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#0f0f0f,#0f0f0f 10px,#131313 10px,#131313 20px)}
.cart-row .thumb img{width:60%;opacity:.5;filter:grayscale(1)}
.cart-row .ct{font-family:var(--disp);font-size:1.05rem}
.cart-row .cm{color:var(--mut);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.cart-row .rm{color:var(--mut);font-size:.8rem;text-decoration:underline}
.cart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:2.5rem;align-items:start}
.summary{border:1px solid var(--line);border-radius:14px;padding:1.8rem;background:var(--bg2)}
/* sticky order-review is desktop-only: on phones the summary is stacked in
   flow (checkout puts it FIRST) — sticky would ride over the form while typing */
@media(min-width:861px){.summary{position:sticky;top:96px}}
.summary .row{display:flex;justify-content:space-between;padding:.5rem 0;color:var(--dim)}
.summary .row.tot{border-top:1px solid var(--line);margin-top:.6rem;padding-top:1rem;color:#fff;font-size:1.15rem;font-family:var(--disp)}
.empty{text-align:center;padding:4rem 0;color:var(--dim)}
@media(max-width:860px){.cart-grid{grid-template-columns:1fr}.cart-row{grid-template-columns:70px 1fr auto}.cart-row .thumb{width:70px}}

/* checkout */
.co-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:start}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:.4rem}
/* 16px floor on every text control: form controls do NOT inherit font-size,
   and iOS Safari auto-zooms any focused field computed below 16px */
.field input,.field select,.field textarea,.note-field textarea,.drop-notify input,.news-block input{font-size:max(1rem,16px)}
.field input,.field select,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:.85rem 1rem;color:#fff;font-family:inherit}
/* fixed-size notes box: no drag handle, no UA white background */
.field textarea{min-height:8.5rem;resize:none;display:block}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#fff}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* mobile: the summary leads — review the order BEFORE the form and the
   Finalize button, never after it (single-column stacking put it last) */
@media(max-width:860px){.co-grid{grid-template-columns:1fr}.co-summary{order:-1}}

/* coming-soon modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);backdrop-filter:blur(6px)}
.modal.open{display:flex}
.modal .box{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:2.6rem;max-width:440px;
  text-align:center;width:90%}
.modal .box img{width:120px;margin:0 auto 1.2rem}
.modal .box h3{font-size:1.8rem;margin-bottom:.6rem}
.modal .box p{color:var(--dim);margin-bottom:1.6rem}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#fff;color:#000;
  font-family:var(--disp);letter-spacing:.08em;font-size:.85rem;padding:.9rem 1.6rem;border-radius:8px;z-index:300;
  opacity:0;pointer-events:none;transition:.4s var(--ease)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* mobile nav drawer */
@media(max-width:860px){
  .s-nav .left .navlink,.s-nav .right .navlink{display:none}
  .burger{display:flex}
  .s-drawer{position:fixed;inset:74px 0 auto 0;background:#0a0a0a;border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:.4s var(--ease);z-index:40;padding:1.4rem 0;display:flex;flex-direction:column;gap:.4rem}
  .s-drawer.open{transform:translateY(0)}
  .s-drawer a{font-family:var(--disp);font-size:1.4rem;padding:.6rem 6vw;letter-spacing:.06em}
  .s-logo img{height:40px}.s-logo b{font-size:1.2rem}
  /* comfortable touch targets — visual icon size unchanged, hit area ≥40px */
  .s-nav .bar{position:relative}
  .s-nav .right{gap:.15rem}
  .icobtn{width:40px;height:40px}
  .icobtn .cart-count{top:1px;right:2px}
  .burger{width:44px;height:40px;justify-content:center;align-items:flex-start;padding-left:2px}
  .burger span{width:26px}
  .s-nav .s-sound{height:40px;width:32px;justify-content:center}
}
/* phones: controls left (menu · sound), commerce right (wish · account · cart),
   the mark alone in the centre — the announce bar above already carries the
   wordmark, so the duplicate line under the logo yields its space back */
@media(max-width:480px){
  .s-logo .wordmark{display:none}
  .s-logo img{height:38px}
  .s-nav .s-sound{position:absolute;left:60px;top:50%;transform:translateY(-50%)}
}
@media(min-width:861px){.s-drawer{display:none}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   THE SIGNATURE — THE INK LABEL's introduction (label only).
   Darkness → a spotlight finds the mark (light reveals it —
   never a flat fade) → one slow 9° believable turn + a single
   specular pass masked to the glyphs themselves → the name
   letter-settles beneath → the mark TRAVELS into the live
   header logo (it never disappears; the site is simply there
   when it lands) → the stage emerges → "Scroll to Begin"
   (the first scroll opens the experience, never the page).
   GPU-only layers (opacity/transform/filter), no WebGL, no
   libraries. One motion family: --rv-slow for the cinema,
   --rv-ease for the interface.
   Tiers: .rv-full (all) · .rv-mid (no streak / no parallax) ·
   .rv-lite + reduced-motion (calm mark + name, no travel).
   ========================================================= */
body.s-locked{overflow:hidden}
#theReveal{
  --rv-ease:cubic-bezier(.22,.61,.21,1);
  --rv-slow:cubic-bezier(.33,0,.13,1);
  position:fixed;inset:0;z-index:300;background:#000;overflow:hidden;
  display:grid;place-items:center;
  transition:background-color 1.15s var(--rv-slow),opacity .6s var(--rv-ease);
}
#theReveal.hide{opacity:0;pointer-events:none}

/* ---- atmosphere: vignette + one soft light, nothing theatrical ---- */
.rv-atmo{position:absolute;inset:0;pointer-events:none}
.rv-veil{position:absolute;inset:0;
  background:radial-gradient(ellipse 85% 75% at 50% 44%,transparent 38%,rgba(0,0,0,.6) 100%)}
.rv-spot{position:absolute;inset:0;opacity:0;will-change:transform,opacity;
  background:radial-gradient(ellipse 34% 30% at 50% 44%,rgba(255,255,255,.13),rgba(255,255,255,.04) 52%,transparent 74%)}
#theReveal.rv-on .rv-spot{animation:rvSpot 1.9s var(--rv-slow) .85s both}
@keyframes rvSpot{from{opacity:0}to{opacity:1}}

/* ---- the mark: sig (travel) > par (parallax) > obj (emergence) > turn ---- */
.rv-sig{position:relative;perspective:900px;will-change:transform}
.rv-par{will-change:transform;transform-style:preserve-3d}
.rv-obj{position:relative;opacity:0;will-change:transform,filter,opacity}
.rv-turn{position:relative;will-change:transform;transform-style:preserve-3d}
.rv-logo{display:block;width:clamp(150px,26vw,210px);height:auto}
/* emergence: the light brings it out of the dark — brightness, not opacity */
#theReveal.rv-on .rv-obj{animation:rvEmerge 1.8s var(--rv-slow) .95s both}
@keyframes rvEmerge{
  from{opacity:0;transform:translateY(12px) scale(.955);filter:brightness(.2) blur(6px)}
  55%{opacity:1}
  to{opacity:1;transform:none;filter:brightness(1) blur(0)}}
/* one slow believable turn — 9°, settles home, never spins */
#theReveal.rv-on .rv-turn{animation:rvTurn 2.3s var(--rv-slow) 2.1s both}
@keyframes rvTurn{from{transform:rotateY(-9deg) rotateX(2.5deg)}to{transform:none}}
/* a single specular pass INSIDE the glyphs (masked by the mark itself) */
.rv-streak{position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
  mask-size:contain;mask-position:center;mask-repeat:no-repeat;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%);
  background-size:280% 100%;background-position:130% 0}
#theReveal.rv-full.rv-on .rv-streak{animation:rvStreak 1.3s var(--rv-slow) 2.55s both}
@keyframes rvStreak{
  0%{opacity:0;background-position:130% 0}
  14%{opacity:.85}86%{opacity:.85}
  100%{opacity:0;background-position:-30% 0}}

/* ---- the name: letters settle out of light (no typewriter) ---- */
.rv-idty{position:absolute;left:0;right:0;top:calc(50% + clamp(96px,17vw,132px));
  text-align:center;pointer-events:none}
.rv-word{margin:0}
.rv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv-ls{display:inline-block;font-family:var(--disp);font-size:clamp(1.05rem,3.6vw,1.7rem);
  color:#fff;letter-spacing:.5em;padding-left:.5em;white-space:nowrap}
#theReveal.rv-on .rv-ls{animation:rvTrack 2.1s var(--rv-slow) 3s both}
@keyframes rvTrack{from{letter-spacing:.5em}to{letter-spacing:.3em}}
.rv-l{display:inline-block;opacity:0;will-change:transform,filter}
#theReveal.rv-on .rv-l{animation:rvLetter .95s var(--rv-slow) both}   /* per-letter inline delay */
@keyframes rvLetter{from{opacity:0;transform:translateY(14px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}}
.rv-sp{display:inline-block;width:.55em}
.rv-tag{margin:1.5rem 0 0;opacity:0;font-size:clamp(.6rem,2.2vw,.72rem);
  letter-spacing:.42em;text-transform:uppercase;color:var(--dim);padding-left:.42em;will-change:transform,opacity}
#theReveal.rv-on .rv-tag{animation:rvTag 1.4s var(--rv-slow) 3.95s both}
@keyframes rvTag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- T+4.6s: the mark travels home; the site is revealed beneath ---- */
#theReveal.rv-dock{background-color:transparent}
#theReveal.rv-dock .rv-sig{transition:transform 1.15s var(--rv-slow);
  transform:translate(var(--dx,0px),var(--dy,-38vh)) scale(var(--ds,.24))}
#theReveal.rv-dock .rv-atmo,#theReveal.rv-dock .rv-idty{transition:opacity .9s var(--rv-slow);opacity:0}

/* ---- scroll to begin ---- */
.rv-scroll{position:absolute;left:50%;bottom:6.5%;transform:translate(-50%,10px);display:flex;flex-direction:column;align-items:center;gap:.7rem;
  background:none;border:0;color:var(--dim);cursor:pointer;opacity:0;font-family:inherit;
  transition:opacity 1s var(--rv-ease),transform 1s var(--rv-ease)}
#theReveal.rv-set .rv-scroll{opacity:1;transform:translate(-50%,0)}
.rv-scroll .t{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;padding-left:.34em}
.rv-scroll .ln{width:1px;height:34px;background:linear-gradient(#fff,transparent);transform-origin:top;
  animation:rvLn 2.6s ease-in-out infinite}
@keyframes rvLn{0%,100%{transform:scaleY(.45);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.rv-scroll:hover{color:#fff}
.rv-scroll:focus-visible{outline:1px solid #fff;outline-offset:6px}

/* ---- the handover ---- */
/* docked: the clone fades exactly over the live header logo — seamless */
#theReveal.rv-go{opacity:0;pointer-events:none}
/* early skip: a quick honest fade, straight to the site */
#theReveal.rv-skip{transition:opacity .45s var(--rv-ease);opacity:0;pointer-events:none}

/* ---- lite tier / reduced motion: the calm reveal, no travel ---- */
#theReveal.rv-lite .rv-streak,#theReveal.rv-mid .rv-streak{display:none}
#theReveal.rv-lite .rv-spot{animation-delay:.2s}
#theReveal.rv-lite.rv-on .rv-obj{animation:rvEmerge 1.2s var(--rv-slow) .25s both}
#theReveal.rv-lite.rv-on .rv-turn{animation:none}
#theReveal.rv-lite.rv-on .rv-ls{animation-delay:.5s;animation-duration:1.4s}
#theReveal.rv-lite.rv-on .rv-tag{animation-delay:1.3s}
#theReveal.rv-lite.rv-on .rv-scroll{opacity:1;transform:translate(-50%,0);transition-delay:2.2s}
@media(prefers-reduced-motion:reduce){
  #theReveal .rv-scroll .ln{animation:none;opacity:.6}
}

/* ---------- store sound toggle ---------- */
.s-sound{display:inline-flex;align-items:center;height:26px;color:var(--ink);opacity:.85;transition:opacity .3s}
.s-sound:hover{opacity:1}
.s-sound .eqx{display:flex;align-items:flex-end;gap:2px;height:16px}
.s-sound .eqx i{width:2px;height:5px;background:currentColor;border-radius:2px}
.s-sound.playing .eqx i{animation:eqx .9s ease-in-out infinite}
.s-sound.playing .eqx i:nth-child(2){animation-delay:.15s}
.s-sound.playing .eqx i:nth-child(3){animation-delay:.3s}
.s-sound.playing .eqx i:nth-child(4){animation-delay:.45s}
@keyframes eqx{0%,100%{height:4px}50%{height:15px}}

/* =========================================================
   STORE v2 — live store (prices, stock, checkout, account)
   ========================================================= */

/* nav DROP link + animated flame */
.s-nav .drop-link{display:inline-flex;align-items:center;gap:.4rem}
.drop-ico{width:16px;height:16px;fill:#fff;stroke:none;filter:drop-shadow(0 0 4px rgba(255,255,255,.35));animation:flamePulse 1.8s ease-in-out infinite}
.s-nav .drop-link:hover .drop-ico{fill:var(--dim)}
@keyframes flamePulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.16) translateY(-1px);opacity:1}}
@media(prefers-reduced-motion:reduce){.drop-ico{animation:none}}

/* product photo (overrides SVG art) */
.p-shot .shot-img,.pd .main-shot .main-img,.cart-row .thumb .thumb-img,.drop-shot .drop-img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.03)}
.p-card.oos .p-shot .shot-img,.p-card.oos .tee{opacity:.4}
.ribbon.sold{background:#000;color:#fff;border:1px solid #fff}
.p-info .pp{color:var(--ink);font-size:1.02rem;font-family:var(--disp);letter-spacing:.06em}
.p-info .pp.dim{color:var(--mut);text-decoration:line-through}
.empty-note,.acct-empty,.rv-none{color:var(--mut);font-size:.9rem;padding:1rem 0}

/* availability filter chips */
.avail-chips{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:2rem}
.avail-chip{border:1px solid var(--line);background:var(--bg2);color:var(--dim);border-radius:100px;
  padding:.55rem 1.2rem;font-family:var(--disp);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;transition:.3s}
.avail-chip:hover{border-color:#fff;color:#fff}
.avail-chip.active{background:#fff;color:#000;border-color:#fff}

/* footer additions */
.foot-social{margin-top:1.2rem}
.foot-social a{display:block;color:var(--dim);font-size:.84rem;padding:.24rem 0}
.foot-social a:hover{color:#fff}
.news-block{margin-top:1rem}
.news-block p{color:var(--dim);font-size:.86rem;margin-bottom:.6rem}
.news-block form{display:flex;gap:.5rem;flex-wrap:wrap}
.news-block input{flex:1 1 150px;min-width:0;background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:.7rem .85rem;color:#fff;font:inherit}
.news-block input:focus{outline:none;border-color:#fff}
.news-block .btn{padding:.7rem 1.2rem;font-size:.8rem}

/* product page — stock / ship / actions */
.stock-line{display:flex;align-items:center;gap:.5rem;font-size:.88rem;letter-spacing:.04em;margin:.2rem 0 .3rem}
.stock-line .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.stock-line.in{color:#7bd88f}.stock-line.in .dot{background:#7bd88f;box-shadow:0 0 8px rgba(123,216,143,.6)}
.stock-line.out{color:#e58b8b}.stock-line.out .dot{background:#e58b8b}
.ship-line{color:var(--dim);font-size:.85rem;letter-spacing:.03em;margin-bottom:.4rem}
.opt-label .size-guide{float:right;font-family:var(--body);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:underline;text-transform:uppercase}
.opt-label .size-guide:hover{color:#fff}
.pd-cta{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
.pd-cta .btn{flex:1 1 160px}
.pd-actions{display:flex;gap:1.4rem;margin-top:1.1rem}
.linkbtn{color:var(--dim);font-size:.82rem;letter-spacing:.06em;text-decoration:none;transition:.3s}
.linkbtn:hover{color:#fff}
.linkbtn.on{color:#fff}

/* reviews */
.reviews-block{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.6rem}
.rv-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.rv-head h3{font-family:var(--disp);font-size:1.2rem}
.rv-avg{display:flex;align-items:center;gap:.6rem;color:var(--dim);font-size:.85rem}
.stars{letter-spacing:.1em}.stars .star{color:var(--line)}.stars .star.on{color:#fff}
.rv-card{border-top:1px solid var(--line);padding:1rem 0}
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.3rem}
.rv-name{font-family:var(--disp);font-size:.95rem;letter-spacing:.04em}
.rv-card p{color:var(--dim);font-size:.9rem}

/* size guide sheet */
.sheet-box{max-width:460px;text-align:left}
.sheet-box h3{font-family:var(--disp);font-size:1.5rem;margin-bottom:1rem;text-align:center}
.size-table{width:100%;border-collapse:collapse;margin-bottom:1rem}
.size-table th,.size-table td{border:1px solid var(--line);padding:.6rem .7rem;text-align:center;font-size:.9rem}
.size-table th{font-family:var(--disp);letter-spacing:.06em;color:#fff}
.size-table td{color:var(--dim)}
.size-note{color:var(--mut);font-size:.82rem;line-height:1.5}

/* cart v2 */
.cart-row{grid-template-columns:90px 1fr auto}
.cart-mid{display:flex;flex-direction:column;gap:.5rem}
.cprice{font-family:var(--disp);font-size:1.05rem;align-self:start}
.qty.small{align-self:flex-start;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:inline-flex;align-items:center}
.qty.small button{width:34px;height:36px;font-size:1.1rem}
.qty.small span{min-width:34px;text-align:center;font-family:var(--disp)}
.note-field{margin-top:1.6rem}
.note-field textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:.85rem 1rem;color:#fff;font-family:inherit;resize:vertical}
.note-field textarea:focus{outline:none;border-color:#fff}

/* checkout v2 */
.co-sec{border-top:1px solid var(--line);padding:1.6rem 0}
.co-sec:first-child{border-top:none;padding-top:0}
.co-sec h2{font-family:var(--disp);font-size:1.4rem;margin-bottom:1.1rem}
.co-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.co-h h2{margin:0}
.co-signin{color:var(--dim);font-size:.82rem;text-decoration:underline}
.co-signin:hover{color:#fff}
.field .hint{display:block;color:var(--mut);font-size:.74rem;margin-top:.4rem;letter-spacing:.02em}
.check{display:flex;align-items:center;gap:.55rem;color:var(--dim);font-size:.85rem;margin:.4rem 0 .2rem;cursor:pointer}
.check input{width:16px;height:16px;accent-color:#fff}
.radio{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem;
  margin-bottom:.6rem;cursor:pointer;transition:.25s;color:var(--ink)}
.radio:hover{border-color:#555}
.radio input{width:16px;height:16px;accent-color:#fff}
.radio span{flex:1}
.radio b{font-family:var(--disp);letter-spacing:.06em;font-size:.9rem}
.radio.disabled{opacity:.55;cursor:not-allowed}
.radio b.soon{color:var(--mut);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.secure-note{color:var(--mut);font-size:.78rem;margin-bottom:.9rem}
.co-err{background:rgba(229,139,139,.1);border:1px solid #e58b8b;color:#e58b8b;border-radius:8px;
  padding:.9rem 1rem;font-size:.85rem;margin:1rem 0}
.co-err a{color:#fff}
#finBtn{margin-top:1rem}
@media(min-width:861px){.co-summary{position:sticky;top:96px}}
.co-summary .row em{color:var(--mut);font-style:normal}
.co-success{text-align:center;max-width:520px;margin:0 auto;padding:2rem 0}
.co-check{width:64px;height:64px;border-radius:50%;background:#fff;color:#000;font-size:2rem;
  display:grid;place-items:center;margin:0 auto 1.2rem}
.co-orderno{font-family:var(--disp);font-size:clamp(2rem,7vw,3.2rem);letter-spacing:.08em;margin:.4rem 0}
.co-instr{color:var(--dim);margin:1rem auto 1.6rem;max-width:42ch;line-height:1.6}
.co-instr b{color:#fff}
.co-recap{position:static;text-align:left;max-width:340px;margin:0 auto}

/* account */
.acct-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.acct-wrap .track-panel{grid-column:1/-1}
.acct-panel{border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:1.8rem}
.acct-panel h2{font-family:var(--disp);font-size:1.5rem;margin-bottom:1.2rem}
.acct-panel h3{font-family:var(--disp);font-size:1.15rem;margin-bottom:1rem}
.acct-sub{color:var(--dim);font-size:.85rem;margin-bottom:1rem}
.acct-msg{border-radius:8px;padding:.7rem .9rem;font-size:.84rem;margin-bottom:.9rem}
.acct-ok{background:rgba(123,216,143,.1);border:1px solid #7bd88f;color:#7bd88f}
.acct-err{background:rgba(229,139,139,.1);border:1px solid #e58b8b;color:#e58b8b}
.acct-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.acct-head h1,.acct-head h2{font-family:var(--disp);font-size:1.8rem}
.acct-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.acct-wish{margin-top:2rem}
.order-card{border:1px solid var(--line);border-radius:10px;padding:1rem;margin-bottom:.9rem}
.oc-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.oc-top b{font-family:var(--disp);letter-spacing:.06em}
.oc-date{color:var(--mut);font-size:.78rem}
.oc-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.oc-tot{margin-left:auto;font-family:var(--disp)}
.oc-items{border-top:1px solid var(--line);padding-top:.6rem}
.oi{display:flex;justify-content:space-between;gap:.6rem;color:var(--dim);font-size:.82rem;padding:.15rem 0}
.oi em{color:var(--mut);font-style:normal}
.chip{font-family:var(--disp);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:100px;border:1px solid var(--line)}
.chip.st-pending{color:#d8c27b;border-color:#5a5030}
.chip.st-confirmed{color:#7bb8d8;border-color:#31505a}
.chip.st-shipped{color:#b89bd8;border-color:#4a3a5a}
.chip.st-delivered{color:#7bd88f;border-color:#2f5a3a}
.chip.st-cancelled{color:#e58b8b;border-color:#5a3030}
.pay-badge{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.timeline{list-style:none;display:flex;gap:0;margin-top:1rem;counter-reset:tl}
.timeline li{flex:1;position:relative;text-align:center;color:var(--mut);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding-top:1.2rem}
.timeline li::before{content:"";position:absolute;top:5px;left:50%;right:-50%;height:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .tl-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--line)}
.timeline li.done{color:#fff}
.timeline li.done .tl-dot{background:#fff}
.timeline li.done::before{background:#fff}
.track-out{margin-top:1.2rem}
.wish-card .wish-cta{display:flex;align-items:center;gap:.8rem;margin-top:.4rem}
.wish-card .wish-cta .btn{padding:.55rem 1rem;font-size:.78rem}

/* drop page */
.drop-hero{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;min-height:70vh}
.drop-shot{aspect-ratio:4/5;border:1px solid var(--line);border-radius:16px;position:relative;overflow:hidden;
  display:grid;place-items:center;background:repeating-linear-gradient(45deg,#0c0c0c,#0c0c0c 16px,#111 16px,#111 32px)}
.drop-shot .tee{width:62%;opacity:.6;filter:grayscale(1)}
.drop-shot .wm{position:absolute;inset:0;display:grid;place-items:center;opacity:.08}
.drop-shot .wm img{width:55%}
.drop-info h1{font-size:clamp(2.4rem,6vw,4rem);margin:.5rem 0}
.drop-tag{color:var(--dim);letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;margin-bottom:.8rem}
.drop-info .price{font-family:var(--disp);font-size:1.5rem;margin:.4rem 0}
.drop-note{color:var(--mut);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-top:1.4rem}
.drop-empty{text-align:center;max-width:560px;margin:0 auto;padding:4rem 0}
.drop-empty h1{font-size:clamp(2.4rem,7vw,4rem);margin:.6rem 0}
.drop-empty p{color:var(--dim);margin-bottom:1.8rem}
.drop-notify{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;max-width:400px;margin:0 auto}
.drop-notify input{flex:1 1 200px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.85rem 1rem;color:#fff;font:inherit}
.drop-notify input:focus{outline:none;border-color:#fff}
@media(max-width:860px){.acct-wrap,.acct-cols{grid-template-columns:1fr}.drop-hero{grid-template-columns:1fr;min-height:0}}
@media(max-width:520px){
  .cart-row{grid-template-columns:70px 1fr auto}
  .pd-actions{flex-direction:column;gap:.7rem}
  .timeline li{font-size:.62rem}
}
@media(max-width:360px){
  .news-block form{flex-direction:column}
  .radio{flex-wrap:wrap}
}

/* =========================================================
   CATALOG v4 — grain, per-design animations, SOLUS, archive,
   brand loader, delivery zones
   ========================================================= */

/* ---- subtle grain over the black backgrounds (all store pages) ---- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ---- delivery zone note + honest cart total ---- */
.ship-note{color:var(--mut);font-size:.8rem;letter-spacing:.02em;margin:.2rem 0 .2rem}
.summary .row.tot em{font-family:var(--body);font-style:normal;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut)}

/* ---- SOLUS teaser (name placement only) ---- */
.solus-teaser{border-top:1px solid var(--line);background:#070707;text-align:center}
.solus-inner{max-width:640px;margin:0 auto}
.solus-tag{display:inline-block;font-size:.64rem;letter-spacing:.42em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line);border-radius:100px;padding:.42rem 1.15rem;margin-bottom:1.4rem}
.solus-name{font-family:var(--disp);font-size:clamp(3rem,12vw,6rem);letter-spacing:.16em;color:#fff;line-height:1}
.solus-link{display:inline-block;font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;
  color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:.3rem;transition:.3s}
.solus-link:hover{color:#fff;border-color:#fff}

/* ---- THE ARCHIVE (reserved route) ---- */
.archive-head{text-align:center;max-width:640px;margin:0 auto;padding:1rem 0 0}
.archive-head h1{font-size:clamp(2.6rem,9vw,5rem);letter-spacing:.16em;margin:.6rem 0}
.archive-head p{color:var(--dim);letter-spacing:.04em}
.archive-grid{min-height:22vh}

/* ---- brand loader + line-draw wordmark (shared with the home intro) ---- */
#storeLoader{position:fixed;inset:0;z-index:250;background:#070707;display:grid;place-items:center;
  transition:opacity .5s var(--ease)}
#storeLoader.hide{opacity:0;pointer-events:none}
.ink-draw{width:min(72vw,440px);height:auto;display:block}
.ink-draw text{font-family:var(--disp);font-weight:600;letter-spacing:.12em;fill:#f5f5f5;stroke:#f5f5f5;stroke-width:.6}
.idl-1{font-size:42px}.idl-2{font-size:48px}
@media(prefers-reduced-motion:no-preference){
  .ink-draw text{fill:transparent;stroke-dasharray:1400;stroke-dashoffset:1400;animation:inkDraw 1s var(--ease) both}
  .ink-draw .idl-2{animation-delay:.16s}
}
@keyframes inkDraw{0%{stroke-dashoffset:1400;fill:transparent}70%{fill:transparent}100%{stroke-dashoffset:0;fill:#f5f5f5}}

/* ---- navigation loader variants (main = the wordmark draw above) ----
   THREAD: one luminous stitch draws across the dark — apparel, a seam of light.
   GLOW: the mark emerges from black by brightness (mini-Signature), halo breathing.
   Static-visible by default; motion only under no-preference. */
#storeLoader.ld-thread .ld-line{width:min(46vw,300px);height:1px;background:rgba(255,255,255,.12);position:relative}
#storeLoader.ld-thread .ld-line::before{content:'';position:absolute;inset:0;background:#f5f5f5;transform-origin:left}
#storeLoader.ld-thread .ld-spark{position:absolute;top:-2px;height:5px;width:34px;left:calc(100% - 34px);opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent);filter:blur(1px)}
#storeLoader.ld-glow{position:fixed}
#storeLoader.ld-glow .ld-mark{width:74px;height:auto;position:relative;z-index:1}
#storeLoader.ld-glow .ld-halo{position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent 70%)}
@media(prefers-reduced-motion:no-preference){
  #storeLoader.ld-thread .ld-line::before{transform:scaleX(0);animation:ldDraw .8s var(--ease) forwards}
  #storeLoader.ld-thread .ld-spark{animation:ldSpark .8s var(--ease) forwards}
  #storeLoader.ld-glow .ld-mark{filter:brightness(0) blur(6px);transform:scale(.92);animation:ldEmerge .85s var(--ease) forwards}
  #storeLoader.ld-glow .ld-halo{animation:ldBreathe 1.1s var(--ease) infinite alternate}
}
@keyframes ldDraw{to{transform:scaleX(1)}}
@keyframes ldSpark{0%{left:0;opacity:0}18%{opacity:1}100%{left:calc(100% - 34px);opacity:0}}
@keyframes ldEmerge{55%{filter:brightness(.85) blur(.6px)}100%{filter:brightness(1) blur(0);transform:scale(1)}}
@keyframes ldBreathe{from{transform:scale(.85);opacity:.55}to{transform:scale(1.05);opacity:1}}


/* =========================================================
   PER-DESIGN ANIMATIONS (7 distinct treatments)
   Applied to the product card shot on reveal, and to the product /
   drop page main shot on load. Reduced-motion → plain still image.
   ========================================================= */
@media(prefers-reduced-motion:no-preference){
  /* the animated media (photo or SVG art) is a direct child of the shot */
  .p-card.in .p-shot[class*="anim-"]>img,.p-card.in .p-shot[class*="anim-"]>svg,
  .main-shot.anim-in[class*="anim-"]>img,.main-shot.anim-in[class*="anim-"]>svg,
  .drop-shot.anim-in[class*="anim-"]>img,.drop-shot.anim-in[class*="anim-"]>svg{will-change:transform,opacity,filter,clip-path}

  /* carta — constellation: image resolves from scattered points */
  .p-card.in .p-shot.anim-carta>img,.p-card.in .p-shot.anim-carta>svg,
  .main-shot.anim-in.anim-carta>img,.main-shot.anim-in.anim-carta>svg,
  .drop-shot.anim-in.anim-carta>img,.drop-shot.anim-in.anim-carta>svg{animation:aCarta 1.15s var(--ease) both}
  .p-card.in .p-shot.anim-carta::after,.main-shot.anim-in.anim-carta::after,.drop-shot.anim-in.anim-carta::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background-image:radial-gradient(circle,rgba(255,255,255,.85) 1px,transparent 1.6px);background-size:15px 15px;
    animation:aCartaDots 1.15s var(--ease) both}

  /* gate — two halves part from the centre */
  .p-card.in .p-shot.anim-gate>img,.p-card.in .p-shot.anim-gate>svg,
  .main-shot.anim-in.anim-gate>img,.main-shot.anim-in.anim-gate>svg,
  .drop-shot.anim-in.anim-gate>img,.drop-shot.anim-in.anim-gate>svg{animation:aGate 1.1s var(--ease) both}

  /* hekaya — write-on: left-to-right clip reveal */
  .p-card.in .p-shot.anim-hekaya>img,.p-card.in .p-shot.anim-hekaya>svg,
  .main-shot.anim-in.anim-hekaya>img,.main-shot.anim-in.anim-hekaya>svg,
  .drop-shot.anim-in.anim-hekaya>img,.drop-shot.anim-in.anim-hekaya>svg{animation:aHekaya 1.05s var(--ease) both}

  /* amore — ember: warm glow bloom that cools to normal */
  .p-card.in .p-shot.anim-amore>img,.p-card.in .p-shot.anim-amore>svg,
  .main-shot.anim-in.anim-amore>img,.main-shot.anim-in.anim-amore>svg,
  .drop-shot.anim-in.anim-amore>img,.drop-shot.anim-in.anim-amore>svg{animation:aAmore 1.2s var(--ease) both}
  .p-card.in .p-shot.anim-amore::after,.main-shot.anim-in.anim-amore::after,.drop-shot.anim-in.anim-amore::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(60% 60% at 50% 58%,rgba(255,140,60,.55),transparent 70%);
    animation:aAmoreGlow 1.2s var(--ease) both}

  /* chapter — page-turn: subtle 3D rotateY settle */
  .p-card.in .p-shot.anim-chapter>img,.p-card.in .p-shot.anim-chapter>svg,
  .main-shot.anim-in.anim-chapter>img,.main-shot.anim-in.anim-chapter>svg,
  .drop-shot.anim-in.anim-chapter>img,.drop-shot.anim-in.anim-chapter>svg{animation:aChapter 1.1s var(--ease) both;transform-origin:left center}

  /* become — emerge: blur + small scale resolving into focus */
  .p-card.in .p-shot.anim-become>img,.p-card.in .p-shot.anim-become>svg,
  .main-shot.anim-in.anim-become>img,.main-shot.anim-in.anim-become>svg,
  .drop-shot.anim-in.anim-become>img,.drop-shot.anim-in.anim-become>svg{animation:aBecome 1.15s var(--ease) both}

  /* tameri — rise: bottom-up wipe with a brief warm/gold shimmer */
  .p-card.in .p-shot.anim-tameri>img,.p-card.in .p-shot.anim-tameri>svg,
  .main-shot.anim-in.anim-tameri>img,.main-shot.anim-in.anim-tameri>svg,
  .drop-shot.anim-in.anim-tameri>img,.drop-shot.anim-in.anim-tameri>svg{animation:aTameri 1.15s var(--ease) both}
  .p-card.in .p-shot.anim-tameri::after,.main-shot.anim-in.anim-tameri::after,.drop-shot.anim-in.anim-tameri::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(120deg,transparent 34%,rgba(212,175,55,.5) 50%,transparent 66%);
    animation:aTameriShimmer 1.2s var(--ease) both}
}
@keyframes aCarta{0%{opacity:0;transform:scale(1.08);filter:brightness(1.7) contrast(1.5)}55%{opacity:.8}100%{opacity:1;transform:none;filter:none}}
@keyframes aCartaDots{0%{opacity:1}70%{opacity:.5}100%{opacity:0}}
@keyframes aGate{0%{clip-path:inset(0 50% 0 50%);opacity:.4}100%{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes aHekaya{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes aAmore{0%{opacity:0;filter:sepia(.8) saturate(2.4) brightness(1.3) hue-rotate(-18deg)}100%{opacity:1;filter:none}}
@keyframes aAmoreGlow{0%{opacity:.9}100%{opacity:0}}
@keyframes aChapter{0%{transform:perspective(900px) rotateY(-34deg);opacity:0}100%{transform:perspective(900px) rotateY(0);opacity:1}}
@keyframes aBecome{0%{filter:blur(16px);transform:scale(1.1);opacity:0}100%{filter:blur(0);transform:none;opacity:1}}
@keyframes aTameri{0%{clip-path:inset(100% 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes aTameriShimmer{0%{opacity:0;transform:translateX(-60%)}30%{opacity:1}100%{opacity:0;transform:translateX(60%)}}

/* =========================================================
   v5 — per-product size guide widget, low-stock scarcity
   ========================================================= */

/* ---- size guide sheet (owner's widget) ---- */
.sg-head{text-align:center;border-bottom:1px solid var(--line);padding-bottom:1.1rem;margin-bottom:1.2rem}
.sg-eyebrow{display:block;font-size:.64rem;letter-spacing:.42em;text-transform:uppercase;color:#B8945F;margin-bottom:.55rem}
.sg-title{font-family:var(--disp);font-size:1.45rem;letter-spacing:.05em;margin:0 0 .3rem}
.sg-sub{color:var(--dim);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase}
.sg-tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}
.sg-tab{flex:1 1 0;min-width:110px;border:1px solid var(--line);border-radius:8px;padding:.65rem .8rem;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;color:var(--dim);transition:.25s}
.sg-tab b{font-family:var(--disp);font-size:1rem;letter-spacing:.08em;font-weight:400}
.sg-tab small{font-size:.66rem;letter-spacing:.06em;color:var(--mut)}
.sg-tab:hover{border-color:#fff;color:#fff}
.sg-tab.active{background:#fff;color:#000;border-color:#fff}
.sg-tab.active small{color:#444}
.sg-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--line);padding:.65rem .1rem}
.sg-row:last-child{border-bottom:none}
.sg-name{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.sg-val{display:flex;align-items:baseline;gap:.55rem;font-variant-numeric:tabular-nums}
.sg-val b{font-size:1rem;color:var(--ink);font-weight:600}
.sg-val small{font-size:.78rem;color:var(--mut)}
.sg-note{font-style:italic;color:var(--mut);font-size:.8rem;line-height:1.6;margin-top:1.1rem}
.sg-none{color:var(--mut);font-size:.85rem;padding:.6rem 0}
@media(prefers-reduced-motion:reduce){.sg-tab{transition:none}}

/* ---- low-stock scarcity ---- */
/* product page: quiet premium line under the size row (JS shows on selection) */
.low-note{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#d8b988;margin:.55rem 0 0}
/* shop card tag (mirrors the ribbon treatment, warm accent) */
.ribbon.low{background:#000;color:#d8b988;border:1px solid rgba(216,185,136,.55)}

/* =========================================================
   v6 experience layer — wishlist, INK certificate, Find My
   Size, signature icons, brand transition, cursor, seasons
   ========================================================= */

/* ---- outline icon language (matches the feature line icons) ---- */
.oi{width:17px;height:17px;flex:0 0 auto;vertical-align:-3px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.foot-social a{display:flex;align-items:center;gap:.55rem}
.foot-social a:hover .oi{transform:translateX(2px) scale(1.06)}

/* ---- wishlist hearts ---- */
.icobtn.wish-open svg{fill:none}
.icobtn.wish-open .oi{width:21px;height:21px}
.card-wish{position:absolute;bottom:12px;right:12px;z-index:3;width:34px;height:34px;display:grid;place-items:center;
  color:rgba(255,255,255,.75);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.16);border-radius:50%;
  backdrop-filter:blur(3px);transition:color .3s,border-color .3s,background .3s}
.card-wish .oi{width:16px;height:16px;vertical-align:0}
.card-wish:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.card-wish.on{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.card-wish.on .oi path{fill:currentColor}
.wish-line{display:inline-flex;align-items:center;gap:.45rem}
.wish-line.on .oi path{fill:currentColor}
@keyframes heartPop{0%{transform:scale(1)}35%{transform:scale(1.35)}65%{transform:scale(.92)}100%{transform:scale(1)}}
.card-wish.pop .oi,.wish-line.pop .oi,.wl-rm.pop .oi{animation:heartPop .45s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.card-wish.pop .oi,.wish-line.pop .oi{animation:none}}

/* ---- wishlist sheet ---- */
.wl-list{max-height:52vh;overflow-y:auto;margin:0 -0.2rem;padding:0 .2rem}
.wl-row{display:flex;align-items:center;gap:.9rem;border-bottom:1px solid var(--line);padding:.7rem 0}
.wl-row:last-child{border-bottom:none}
.wl-thumb{width:52px;height:60px;display:grid;place-items:center;background:#101010;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.wl-thumb .thumb-img{width:100%;height:100%;object-fit:cover}
.wl-thumb .tee{width:70%;height:auto}
.wl-mid{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.wl-name{font-family:var(--disp);font-size:.95rem;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-price{font-size:.8rem;color:var(--dim)}
.wl-rm{width:32px;height:32px;display:grid;place-items:center;color:#fff;transition:color .3s}
.wl-rm .oi{width:15px;height:15px;vertical-align:0}
.wl-rm .oi path{fill:currentColor}
.wl-rm:hover{color:var(--dim)}
.wl-rm:hover .oi path{fill:none}
.wl-empty{color:var(--dim);font-size:.9rem;line-height:1.6;text-align:center;padding:.6rem 0}
.shared-wl{text-align:center;margin:0 0 1.6rem}
.shared-wl .eyebrow{display:block;font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);margin-bottom:.4rem}
.shared-wl p{color:var(--dim);font-size:.9rem}
.shared-wl a{color:#fff;text-decoration:underline}

/* ---- INK certificate ---- */
.co-cert{margin:.9rem auto 0;display:inline-flex;flex-direction:column;gap:.3rem;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:.85rem 1.4rem;letter-spacing:.14em;font-size:.78rem;text-transform:uppercase;color:var(--dim)}
.co-cert b{color:#fff;font-size:.95rem;letter-spacing:.2em;font-family:var(--disp);font-weight:400}
.co-cert span{font-size:.66rem;letter-spacing:.08em;text-transform:none;color:var(--mut)}
.oc-cert{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#d8b988;margin:.2rem 0 .45rem}

/* ---- Find My Size ---- */
.size-tools{display:inline-flex;gap:.9rem;margin-left:.6rem}
.fms-chips{margin-bottom:.4rem}
.fms-chips .size{min-width:86px}
.fms-out{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1.1rem;text-align:center}
.fms-size{font-family:var(--disp);letter-spacing:.1em;font-size:1rem;text-transform:uppercase;color:var(--dim)}
.fms-size b{color:#fff;font-size:1.25rem;letter-spacing:.14em;font-weight:400}
.fms-note{color:var(--dim);font-size:.82rem;line-height:1.6;margin:.6rem 0 1rem}

/* ---- studio ↔ label brand transition ---- */
.xw{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;pointer-events:none}
.xw-out{background:radial-gradient(90% 90% at 50% 60%,#241a1c,#0b0a0a);opacity:0;transition:opacity .55s cubic-bezier(.6,.01,.18,1)}
.xw-out .xw-mark{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2rem,6vw,3.6rem);color:#c9a86a;
  letter-spacing:.08em;opacity:0;transform:translateY(14px);transition:opacity .5s ease .12s,transform .55s cubic-bezier(.2,.7,.2,1) .12s}
.xw-out.go{opacity:1;pointer-events:auto}
.xw-out.go .xw-mark{opacity:1;transform:none}
.xw-in{background:#000;opacity:1;transition:opacity .7s ease .45s}
.xw-in .xw-mark{font-family:var(--disp);font-size:clamp(1.3rem,4vw,2.2rem);color:#fff;letter-spacing:.5em;
  padding-left:.5em;opacity:1;transition:opacity .5s ease .3s,letter-spacing .8s cubic-bezier(.2,.7,.2,1)}
.xw-in.go{opacity:0}
.xw-in.go .xw-mark{opacity:0;letter-spacing:.9em}

/* ---- premium cursor (pointer:fine only; JS adds body.has-cursor) ---- */
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor label,body.has-cursor select{cursor:none}
body.has-cursor input,body.has-cursor textarea,body.cur-text *{cursor:text}
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:5000;pointer-events:none;border-radius:50%;
  opacity:0;will-change:transform;margin-top:0}
.cur-dot{width:5px;height:5px;background:#fff;margin:-2.5px 0 0 -2.5px}
.cur-ring{width:32px;height:32px;border:1px solid rgba(255,255,255,.45);margin:-16px 0 0 -16px;
  transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s,margin .28s,border-color .3s,opacity .3s,background .3s}
.cur-ring.hov{width:46px;height:46px;margin:-23px 0 0 -23px;border-color:#fff;background:rgba(255,255,255,.06)}
.cur-ring.img{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(255,255,255,.85);mix-blend-mode:difference}
.cur-ring.down{transform-origin:center;border-color:#fff;width:26px;height:26px;margin:-13px 0 0 -13px}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none}}

/* ---- seasonal atmosphere (temperature of the light, nothing more) ---- */
.season-veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 0%,var(--sea-glow,transparent),transparent 62%)}
[data-season="winter"]{--sea-glow:rgba(165,185,215,.05)}
[data-season="spring"]{--sea-glow:rgba(190,212,182,.04)}
[data-season="summer"]{--sea-glow:rgba(232,204,152,.05)}
[data-season="autumn"]{--sea-glow:rgba(214,172,128,.055)}
[data-season="winter"] .grain{opacity:.09}
[data-season="summer"] .grain{opacity:.05}

/* ---- real product art: front render with back-reveal on hover/tap ---- */
.p-shot,.main-shot,.drop-shot{position:relative;overflow:hidden}
.img-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .65s cubic-bezier(.2,.7,.2,1);will-change:opacity}
.p-card:hover .img-back,.main-shot.flip .img-back,.drop-shot:hover .img-back{opacity:1}
.main-shot{cursor:pointer}
.flip-hint{position:absolute;left:12px;bottom:12px;z-index:3;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.55);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);
  border-radius:100px;padding:.35rem .7rem;backdrop-filter:blur(3px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.img-back{transition:none}}

/* ---- SO PRODUCTS hero CTA ---- */
.s-hero .so-products{display:table;margin:2.2rem auto 0}
.s-hero .inner{padding-bottom:4.5rem}
@media(max-width:700px){.s-hero .inner{padding-bottom:3.2rem}.s-hero .so-products{margin-top:1.8rem}}
.so-products{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:#cfcfcf;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.35rem;transition:color .3s,border-color .3s,letter-spacing .5s cubic-bezier(.2,.7,.2,1)}
.so-products:hover{color:#fff;border-color:#fff;letter-spacing:.42em}

/* ---- brand loader logo ---- */
#storeLoader .loader-logo{width:92px;height:auto;margin:0 auto 1.1rem;display:block;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.6))}

/* ---- nav wordmark under the logo (Prata editorial serif; logo unchanged) ---- */
.s-logo{display:flex;flex-direction:column;align-items:center;gap:.18rem}
.s-logo .wordmark{font-family:'Prata',Georgia,serif;font-size:.58rem;letter-spacing:.42em;
  padding-left:.42em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .3s}
.s-logo:hover .wordmark{color:#fff}
@media(max-width:520px){.s-logo .wordmark{font-size:.5rem;letter-spacing:.34em;padding-left:.34em}}

/* ---- animated view switcher (Large / Compact / List) ---- */
.view-switch{position:relative;display:flex;gap:0;width:max-content;margin:0 auto 1.4rem;
  border:1px solid var(--line);border-radius:100px;padding:4px;background:rgba(255,255,255,.02)}
.view-switch button{position:relative;z-index:2;width:46px;height:34px;display:grid;place-items:center;
  color:var(--dim);border-radius:100px;transition:color .3s}
.view-switch button:hover{color:#fff}
.view-switch button.active{color:#000}
.view-switch button:focus-visible{outline:1px solid #fff;outline-offset:2px}
.view-switch svg{width:16px;height:16px}
.view-switch .vs-ind{position:absolute;top:4px;left:4px;width:46px;height:34px;background:#fff;border-radius:100px;
  z-index:1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.view-switch .vs-ind{transition:none}}

/* view modes — compact grid */
.p-grid.v-compact{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:1rem}
.p-grid.v-compact .p-info{padding:.7rem .8rem 1rem;gap:.3rem}
.p-grid.v-compact .p-info .pm{display:none}
.p-grid.v-compact .p-info .pt{font-size:.9rem}
.p-grid.v-compact .p-info .pp{font-size:.88rem}
.p-grid.v-compact .card-wish{width:28px;height:28px;bottom:8px;right:8px}
.p-grid.v-compact .ribbon{font-size:.55rem;padding:.25rem .5rem}
/* view modes — list */
.p-grid.v-list{display:flex;flex-direction:column;gap:.9rem}
.p-grid.v-list .p-card{display:flex;align-items:stretch;gap:0}
.p-grid.v-list .p-card:hover{transform:none;border-color:#3a3a3a}
.p-grid.v-list .p-shot{width:124px;min-width:124px;aspect-ratio:4/5}
.p-grid.v-list .p-info{flex:1;justify-content:center;padding:1rem 1.3rem}
.p-grid.v-list .card-wish{width:30px;height:30px;bottom:8px;right:8px}
@media(max-width:520px){.p-grid.v-list .p-shot{width:104px;min-width:104px}}
/* list view: the tier ribbon overpowers a 124px thumb — the meta line carries it */
.p-grid.v-list .ribbon.alt{display:none}
.p-grid.v-list .ribbon{font-size:.55rem;padding:.25rem .5rem;top:8px;left:8px}
/* product-art depth layer: transform-only, eased back to rest */
.main-shot .main-img,.main-shot .img-back{transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}

/* ---- mini cart drawer ---- */
#miniCart{position:fixed;inset:0;z-index:3500;pointer-events:none}
#miniCart .mc-veil{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .4s ease}
#miniCart .mc-panel{position:absolute;top:0;right:0;height:100%;width:min(400px,92vw);background:#0b0b0b;
  border-left:1px solid var(--line);padding:2rem 1.6rem;overflow-y:auto;outline:none;
  transform:translateX(102%);transition:transform .48s cubic-bezier(.2,.7,.2,1)}
#miniCart.open{pointer-events:auto}
#miniCart.open .mc-veil{opacity:1}
#miniCart.open .mc-panel{transform:none}
@media(prefers-reduced-motion:reduce){#miniCart .mc-panel{transition:none}#miniCart .mc-veil{transition:none}}
.mc-head{text-align:center;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.1rem}
.mc-head h3{font-family:var(--disp);font-size:1.25rem;letter-spacing:.06em;margin-top:.4rem}
.mc-row{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.mc-thumb{width:56px;height:66px;display:grid;place-items:center;background:#101010;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:0 0 auto}
.mc-thumb .thumb-img{width:100%;height:100%;object-fit:cover}
.mc-thumb .tee{width:70%;height:auto}
.mc-mid{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.mc-mid b{font-family:var(--disp);font-weight:400;font-size:.95rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-mid small{color:var(--dim);font-size:.76rem}
.mc-price{font-family:var(--disp);font-size:.9rem}
.mc-more{color:var(--mut);font-size:.78rem;text-align:center;margin:.6rem 0 0}
.mc-sub{display:flex;justify-content:space-between;align-items:baseline;margin:1.1rem 0 .2rem;font-size:.95rem}
.mc-sub b{font-family:var(--disp);font-size:1.1rem;font-weight:400}
.mc-ship{color:var(--mut);font-size:.74rem;margin-bottom:1.1rem}
.co-cert .cert-link{margin-top:.35rem;font-size:.68rem;letter-spacing:.14em;color:#fff;text-decoration:underline;text-transform:uppercase}
/* size-guide widget footer (fits line from the owner's reference widget) */
.sg-foot{display:flex;justify-content:center;color:var(--mut);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;border-top:1px solid var(--line);padding-top:.9rem;margin-top:1rem}

/* ---- premium checkout address form ---- */
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.9rem}
@media(max-width:560px){.frow3{grid-template-columns:1fr 1fr}}
.field select{width:100%;padding:.8rem .9rem;border-radius:8px;border:1px solid rgba(255,255,255,.18);
  background:#101010;color:#fff;font:inherit;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
.field select:focus{outline:1px solid #fff}
.phone-wrap{display:flex;gap:.55rem}
.phone-wrap .cc{flex:0 0 auto;display:flex;align-items:center;padding:0 .8rem;border:1px solid rgba(255,255,255,.18);
  border-radius:8px;background:#101010;color:var(--dim);font-size:.9rem;letter-spacing:.04em}
.phone-wrap input{flex:1}
.opt-tag{color:var(--mut);font-weight:400;font-size:.72rem;letter-spacing:.04em}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#c25454}
.intl-note{border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin-top:.9rem;
  color:var(--dim);font-size:.86rem;line-height:1.6}
.intl-note a{color:#fff;text-decoration:underline}

/* =========================================================
   v11 — premium customer features
   (delivery promise · notify me · wishlist collections ·
    order journey · saved addresses)
   ========================================================= */

/* ---- estimated delivery promise ---- */
.ship-promise{border:1px solid var(--line);border-radius:2px;padding:1rem 1.1rem;margin-top:1.4rem;display:flex;flex-direction:column;gap:.55rem}
.ship-promise .sp-row{display:flex;align-items:center;gap:.7rem;font-size:.86rem;color:var(--dim);letter-spacing:.02em}
.ship-promise .sp-row b{color:#fff;font-weight:500}
.ship-promise svg{width:19px;height:19px;flex:0 0 19px;color:#fff;opacity:.85}
#coPromise .ship-promise{margin-top:1rem}

/* ---- notify me ---- */
.sz-out{margin-bottom:.8rem}
.nf-note{font-size:.76rem;color:var(--mut,#6f6f6f);margin-top:.8rem;text-align:center;letter-spacing:.02em}
.nf-done{text-align:center;padding:1.2rem 0 .4rem}
.nf-done p{margin-top:.9rem;color:var(--dim);line-height:1.7}
.size.oos{opacity:.45;text-decoration:line-through;cursor:pointer}
.size.oos.sel{opacity:.85;outline:1px solid #fff;text-decoration:line-through}

/* ---- wishlist collections ---- */
.wl-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 .9rem}
.wl-tab{border:1px solid var(--line);border-radius:100px;padding:.4rem .95rem;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);background:none;cursor:pointer;transition:.3s var(--ease)}
.wl-tab:hover{color:#fff;border-color:#555}
.wl-tab.cur{background:#fff;color:#000;border-color:#fff}
.wl-tab.wl-new{min-width:34px}
.wl-shared{opacity:.7;font-size:.9em}
.wl-newform{display:flex;gap:.5rem;margin:0 0 1rem}
.wl-newform input{flex:1}
.wl-tools{display:flex;gap:1rem;margin:0 0 1rem;flex-wrap:wrap}
.wl-tool{background:none;border:0;color:var(--dim);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:0;border-bottom:1px solid transparent;transition:.25s}
.wl-tool:hover{color:#fff;border-bottom-color:#fff}
.wl-tool.wl-danger:hover{color:#d99a86;border-bottom-color:#d99a86}
.wl-mid .wl-move{margin-top:.4rem}
.wl-move{width:auto;max-width:180px;background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:2px;
  font-size:.74rem;padding:.3rem .5rem;letter-spacing:.04em}
.wl-move:focus{outline:1px solid #fff}
.wl-group{margin-bottom:2rem}
.wl-group-h{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem}
.wl-group-h h4{font-family:var(--disp);font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.shared-wl-name{font-size:1.6rem;margin:.4rem 0 .6rem}

/* ---- order journey ---- */
.journey{list-style:none;margin:1.4rem 0 .4rem;padding:0;position:relative}
.journey::before{content:'';position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:var(--line)}
.jr-step{position:relative;display:flex;gap:1.1rem;padding:.55rem 0 .55rem 0;margin-left:0;opacity:0;transform:translateY(6px);
  animation:jrIn .6s var(--ease) forwards;animation-delay:var(--jd,0ms)}
@keyframes jrIn{to{opacity:1;transform:none}}
.jr-dot{position:relative;z-index:1;width:15px;height:15px;flex:0 0 15px;margin-top:3px;border-radius:50%;
  border:1px solid var(--line);background:#0a0a0a;transition:.4s var(--ease)}
.jr-step.done .jr-dot{background:#fff;border-color:#fff}
.jr-step.now .jr-dot{border-color:#fff;background:#0a0a0a}
.jr-step.now .jr-dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#fff;animation:jrPulse 2.4s ease-in-out infinite}
@keyframes jrPulse{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.jr-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.jr-name{font-family:var(--disp);font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .4s}
.jr-step.done .jr-name,.jr-step.now .jr-name{color:#fff}
.jr-sub{font-size:.74rem;color:var(--mut,#6f6f6f);letter-spacing:.04em}
.jr-step.next{opacity:0;animation-name:jrInDim}
@keyframes jrInDim{to{opacity:.45;transform:none}}
.jr-cancelled{border:1px solid var(--line);border-radius:2px;padding:1rem 1.1rem;margin-top:1rem;color:var(--dim);font-size:.88rem;line-height:1.7}
.oc-journey{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.7rem}
.oc-journey summary{cursor:pointer;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);list-style:none;display:flex;align-items:center;gap:.5rem}
.oc-journey summary::-webkit-details-marker{display:none}
.oc-journey summary::after{content:'+';font-size:1rem;transition:transform .3s var(--ease)}
.oc-journey[open] summary::after{transform:rotate(45deg)}
.oc-journey summary:hover{color:#fff}

/* ---- saved addresses ---- */
.co-saved{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.co-saved-l{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:.3rem}
.co-addr{border:1px solid var(--line);border-radius:100px;background:none;color:var(--dim);cursor:pointer;
  padding:.45rem 1rem;font-size:.78rem;letter-spacing:.05em;display:inline-flex;align-items:center;gap:.5rem;transition:.3s var(--ease)}
.co-addr:hover{color:#fff;border-color:#555}
.co-addr.cur{background:#fff;color:#000;border-color:#fff}
.co-addr.cur .co-def{color:#000;border-color:rgba(0,0,0,.3)}
.co-def{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:.1rem .5rem;color:var(--dim)}
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-bottom:1.2rem}
.addr-card{border:1px solid var(--line);border-radius:2px;padding:1rem 1.1rem;transition:border-color .3s}
.addr-card.def{border-color:#555}
.addr-card:hover{border-color:#666}
.addr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-family:var(--disp);letter-spacing:.06em;text-transform:uppercase}
.addr-name{font-size:.88rem;color:#fff;margin-bottom:.3rem}
.addr-line{font-size:.8rem;color:var(--dim);line-height:1.6}
.addr-phone{margin-top:.3rem}
.addr-cta{display:flex;gap:1rem;margin-top:.8rem}
.addr-cta .linkbtn{font-size:.76rem}
.addr-del:hover{color:#d99a86}
.addr-form{border:1px solid var(--line);border-radius:2px;padding:1.2rem;margin-top:1.2rem}
.addr-form-cta{display:flex;gap:.8rem;margin-top:1rem}

@media(max-width:640px){
  .addr-grid{grid-template-columns:1fr}
  .wl-mid .wl-move{max-width:140px}
}
@media(prefers-reduced-motion:reduce){
  .jr-step{animation:none;opacity:1;transform:none}
  .jr-step.next{opacity:.45}
  .jr-step.now .jr-dot::after{animation:none;opacity:1}
}

/* ---- notched devices: keep fixed chrome out of the unsafe areas ----
   (viewport-fit=cover is set site-wide; these insets are 0 on flat screens) */
@supports(padding:max(0px)){
  .s-nav{padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
  .toast{bottom:max(24px,env(safe-area-inset-bottom))}
  .rv-scroll{bottom:max(6.5%,env(safe-area-inset-bottom))}
  .mc-panel{padding-bottom:max(1.2rem,env(safe-area-inset-bottom))}
  .s-drawer{padding-bottom:max(1rem,env(safe-area-inset-bottom))}
  .sheet-box{padding-bottom:max(1.4rem,env(safe-area-inset-bottom))}
}

/* =========================================================
   LX — the Floating Stage (product page).
   GPU layers only; the stage owns perspective, the object owns
   its single composed transform (painted by JS each frame).
   ========================================================= */
.lx-stage{overflow:visible!important;touch-action:pan-y}
/* the stage's glow layers bleed past their frame BY DESIGN (inset:-20%);
   clip the DOCUMENT edge instead so phones never gain sideways scroll —
   overflow-x:clip clips paint without creating a scroll container */
html,body{overflow-x:clip}
.lx-stage .lx-obj{will-change:transform;transition:none!important;backface-visibility:hidden}
.lx-stage.lx-drag{cursor:grabbing}
.lx-stage .img-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lx-shadow{position:absolute;left:50%;bottom:-12px;width:72%;height:26px;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);
  filter:blur(6px);pointer-events:none;z-index:0}
.lx-light{position:absolute;inset:-20%;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 38% 30% at 50% 34%,rgba(255,255,255,.9),transparent 70%);
  transition:opacity .5s;will-change:transform,opacity;z-index:2}
.lx-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.35);backdrop-filter:blur(4px);padding:.35rem .8rem;border-radius:100px;pointer-events:none}
.lx-fly{box-shadow:0 18px 40px rgba(0,0,0,.5)}

/* LX-M4: the craft chapters */
.lx-story{margin:4.5rem 0 1rem;border-top:1px solid var(--line);padding-top:3rem}
.lx-story-head{margin-bottom:2.4rem}
.lx-story-head h2{font-size:clamp(1.5rem,4vw,2.2rem);margin-top:.4rem}
.lx-ch{display:flex;gap:1.6rem;align-items:flex-start;max-width:640px;margin:0 0 2.2rem;
  transition-delay:var(--lxd,0ms)}
.lx-n{font-family:var(--disp);font-size:1.1rem;color:var(--dim);border:1px solid var(--line);
  border-radius:50%;width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px}
.lx-ch h3{font-size:1rem;letter-spacing:.08em;margin-bottom:.5rem}
.lx-ch p{color:var(--dim);line-height:1.8;font-size:.92rem}
@media(max-width:640px){.lx-ch{gap:1rem}.lx-n{width:36px;height:36px;flex-basis:36px;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){
  .lx-shadow,.lx-light,.lx-hint{display:none}
}