/* SOKK — base styles & tokens. Palette vars are injected at runtime on :root. */

:root{
  --bg:#F5F5F7; --surface:#FBFBFD; --raise:#FFFFFF;
  --ink:#1D1D1F; --muted:#6E6E73; --faint:#AEAEB2; --line:#D2D2D7; --accent:#0071E3;
  --footer-bg:#17161A;
  --maxw:1480px;
  --gut:clamp(16px,4vw,40px);
  --sans:"Archivo",-apple-system,system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .5s ease, color .5s ease;
}
#root{min-height:100vh; display:flex; flex-direction:column}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
img{display:block; max-width:100%}
::selection{background:var(--ink); color:var(--bg)}

/* ---- type ---- */
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.mono{font-family:var(--mono); letter-spacing:.02em}
.display{
  font-weight:700; line-height:.92; letter-spacing:var(--disp-track,-.025em); text-transform:uppercase;
  text-wrap:balance; margin:0;
}
.serif-off{}
h1,h2,h3,h4{margin:0}

/* ---- layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); width:100%}
.section{padding-block:clamp(56px,9vw,140px)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---- knit tile ---- */
.tile{
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  background:var(--tc,#ccc);
  isolation:isolate;
}
.tile.tall{aspect-ratio:3/4}
.tile.wide{aspect-ratio:1/1}
/* vertical ribbing */
.tile.rib::after, .tile.marl::after, .tile.mesh::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.10) 0 3px, rgba(0,0,0,.05) 3px 4px, rgba(0,0,0,.10) 4px 7px, rgba(255,255,255,.05) 7px 8px);
  mix-blend-mode:soft-light; opacity:.9;
}
.tile.terry::after, .tile.plush::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.16) .8px, transparent 1.1px),
                   radial-gradient(rgba(0,0,0,.10) .8px, transparent 1.1px);
  background-size:5px 5px, 5px 5px; background-position:0 0, 2.5px 2.5px;
  mix-blend-mode:soft-light; opacity:.8;
}
.tile.sheer::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.06) 0 2px, rgba(0,0,0,.03) 2px 3px);
  opacity:.7;
}
.tile.marl{ background-image:
  linear-gradient(135deg, rgba(255,255,255,.18) 0 25%, transparent 0 50%, rgba(255,255,255,.18) 0 75%, transparent 0);
  background-size:7px 7px; }
.tile.mesh::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(circle, transparent 1.4px, var(--tc,#ccc) 1.6px);
  background-size:8px 8px; opacity:.5;
}
/* the welt / cuff band */
.tile .welt{
  position:absolute; left:0; right:0; z-index:2; height:14%;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.16) 0 2px, rgba(0,0,0,.10) 2px 4px);
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 -1px 0 rgba(255,255,255,.10) inset;
  mix-blend-mode:soft-light;
}
.tile .welt.top{top:0}
.tile .welt.bottom{bottom:0; height:9%}
/* material sheen + grounding shadow */
.tile .sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120% 70% at 30% 12%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.12));
}
.tile.flat::after,.tile.flat::before{display:none}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  transition:background .25s, color .25s, transform .15s, opacity .2s; white-space:nowrap;
}
.btn:hover{background:transparent; color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--bg)}
.btn.block{width:100%}
.btn.sm{padding:11px 18px; font-size:11px}
.btn[disabled]{opacity:.4; pointer-events:none}

.link-u{position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding-bottom:3px}
.link-u::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s}
.link-u:hover::after{transform:scaleX(1)}

/* ---- swatch chips ---- */
.chip{width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.18); position:relative; cursor:pointer; flex:none}
.chip[data-on="true"]{box-shadow:0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink)}

/* ---- pill / size ---- */
.size-pill{
  min-width:46px; height:42px; padding:0 12px; border:1px solid var(--line); background:var(--raise);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s, color .2s;
}
.size-pill[data-on="true"]{border-color:var(--ink); background:var(--ink); color:var(--bg)}
.size-pill:hover:not([data-on="true"]){border-color:var(--ink)}

/* ---- utility ---- */
.flex{display:flex} .between{justify-content:space-between} .center{align-items:center}
.col{flex-direction:column}
.grow{flex:1}
.hide-mob{}
@media(max-width:760px){
  .hide-mob{display:none !important}
  .section{padding-block:clamp(40px,12vw,72px)}
}
.fade-up{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{transform:translateY(16px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.fade-up{animation:none}}

/* ---- grids ---- */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,2.4vw,40px) clamp(12px,1.6vw,20px)}
.cgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px)}
@media(max-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)} .cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .pgrid{grid-template-columns:repeat(2,1fr); gap:26px 12px}
  .cgrid{grid-template-columns:repeat(2,1fr)}
}

/* hero / splits / pdp responsive */
@media(max-width:1080px){
  .wall{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:760px){
  .wall{grid-template-columns:repeat(2,1fr)}
  .catrow{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr !important}
  .hero-split{grid-template-columns:1fr !important; height:auto !important}
  .hero-split > button{height:62vw !important; min-height:300px}
  .split-banners{grid-template-columns:1fr !important}
  .split-banners > button{height:72vw !important; min-height:340px !important}
  .split2{grid-template-columns:1fr !important; gap:32px !important}
  .pdp{grid-template-columns:1fr !important}
  .pdp-info{position:static !important}
}
.rail::-webkit-scrollbar{height:0}
.rail{scrollbar-width:none}
.filter-scroll::-webkit-scrollbar{display:none}
@media(min-width:761px) and (max-width:1080px){ .acct-stats{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:760px){ .acct-stats{grid-template-columns:1fr !important} }
@media(max-width:560px){
  .pdp-gallery{flex-direction:column-reverse !important}
  .pdp-thumbs{flex-direction:row !important; width:auto !important; overflow-x:auto}
}
@media(max-width:640px){ .news-modal{grid-template-columns:1fr !important} }
@media(max-width:760px){ .filter-panel-grid{grid-template-columns:1fr !important} }
.pdp-stickybar{display:none}
/* PDP gallery — mobile: horizontal swipe rail with snap, dots + counter (desktop keeps vertical stack) */
.pdp-count{display:none}
.pdp-dots{display:none}
@media(max-width:760px){
  .pdp-media-rail{flex-direction:row !important; gap:0 !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .pdp-media-rail::-webkit-scrollbar{display:none}
  .pdp-slide{flex:0 0 100%; width:100%; scroll-snap-align:center; scroll-snap-stop:always}
  .pdp-slide-media{display:flex; align-items:center; background:var(--line)}
  .pdp-slide-media img,.pdp-slide-media video{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
  .pdp-add-hint{display:none}
  .pdp-count{display:inline-block; position:absolute; top:12px; left:12px; z-index:6; font-size:10.5px; letter-spacing:.08em; color:#fff; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.5); padding:6px 10px; pointer-events:none}
  .pdp-dots{display:flex; justify-content:center; gap:7px; padding:12px 0 2px}
  .pdp-dot{width:7px; height:7px; border-radius:50%; background:var(--faint); border:none; padding:0; transition:background .2s, transform .2s}
  .pdp-dot.on{background:var(--ink); transform:scale(1.25)}
}
.pdp-stickybar-spacer{display:none}
@media(max-width:760px){
  .pdp-stickybar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--bg); border-top:1px solid var(--line); padding:11px var(--gut); justify-content:space-between; align-items:center; gap:12px}
  .pdp-stickybar-spacer{display:block; height:70px}
}
.filter-scroll{scrollbar-width:none}

/* ===== Liquid Glass theme — Apple iOS 26 / Tahoe ===== */
html[data-glass="1"]{
  background:
    radial-gradient(48vw 46vh at 8% 6%, #8ab6ff 0%, transparent 60%),
    radial-gradient(46vw 44vh at 96% 4%, #ffb0dd 0%, transparent 60%),
    radial-gradient(50vw 50vh at 94% 96%, #6cf0c8 0%, transparent 60%),
    radial-gradient(48vw 46vh at 4% 98%, #ffd98a 0%, transparent 58%),
    radial-gradient(40vw 40vh at 50% 50%, #c9a8ff 0%, transparent 70%),
    linear-gradient(135deg,#e7edfa,#f3ecfb);
  background-attachment:fixed;
}
/* drifting colour field behind everything */
html[data-glass="1"] body{
  background:var(--bg);
  position:relative;
}
html[data-glass="1"] body::before{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 20% 25%, rgba(120,170,255,.55), transparent 60%),
    radial-gradient(34vw 34vw at 82% 18%, rgba(255,150,210,.5), transparent 60%),
    radial-gradient(40vw 40vw at 78% 82%, rgba(90,235,195,.5), transparent 60%),
    radial-gradient(34vw 34vw at 24% 86%, rgba(255,205,120,.5), transparent 60%);
  filter:blur(40px) saturate(140%);
  animation:glassDrift 26s ease-in-out infinite alternate;
}
@keyframes glassDrift{
  0%{ transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg); }
  50%{ transform:translate3d(3%,2%,0) scale(1.12) rotate(4deg); }
  100%{ transform:translate3d(-2%,3%,0) scale(1.06) rotate(-3deg); }
}
@media(prefers-reduced-motion:reduce){ html[data-glass="1"] body::before{ animation:none; } }

/* frosted chrome */
html[data-glass="1"] header,
html[data-glass="1"] header > div,
html[data-glass="1"] aside{
  -webkit-backdrop-filter:blur(30px) saturate(190%) !important;
  backdrop-filter:blur(30px) saturate(190%) !important;
}
html[data-glass="1"] header{
  background:rgba(255,255,255,.85) !important;
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 0 rgba(0,0,0,.04) inset, 0 10px 30px -18px rgba(30,50,90,.35);
}
html[data-glass="1"] aside{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62)) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.8), 0 30px 90px -30px rgba(30,50,90,.45);
}

/* glass surface utility — bright specular edge + soft float */
html[data-glass="1"] .glassy,
html[data-glass="1"] .glass-card{
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  backdrop-filter:blur(26px) saturate(185%);
  background:linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.4)) !important;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 24px -8px rgba(120,150,210,.35), 0 24px 60px -34px rgba(30,50,90,.4);
  border-radius:22px;
}

/* rounded, Apple-soft geometry */
html[data-glass="1"] .tile{ border-radius:22px; box-shadow:0 18px 50px -28px rgba(30,50,90,.5); }
html[data-glass="1"] .cgrid .tile, html[data-glass="1"] .pgrid .tile{ box-shadow:0 14px 40px -26px rgba(30,50,90,.45); }

/* primary button → glossy Apple-blue glass pill */
html[data-glass="1"] .btn{
  border-radius:980px;
  background:linear-gradient(180deg, #3a93ff, #0071e3) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 22px -8px rgba(0,113,227,.7), 0 2px 6px rgba(0,113,227,.35);
  position:relative; overflow:hidden;
  transition:transform .15s, box-shadow .25s, filter .25s;
}
html[data-glass="1"] .btn::after{
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
html[data-glass="1"] .btn:hover{ filter:brightness(1.05); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 30px -8px rgba(0,113,227,.8); }
html[data-glass="1"] .btn:hover::after{ left:130%; }
/* ghost / secondary → clear frosted pill */
html[data-glass="1"] .btn.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.32)) !important;
  -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.7) !important; color:var(--ink) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px -12px rgba(30,50,90,.35);
}
html[data-glass="1"] .btn.ghost::after{ display:none; }

/* glass inputs / pills / selects */
html[data-glass="1"] .size-pill, html[data-glass="1"] select, html[data-glass="1"] input{
  border-radius:13px;
  -webkit-backdrop-filter:blur(10px) saturate(170%); backdrop-filter:blur(10px) saturate(170%);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.38)) !important;
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
}
/* footer newsletter field is an underline on the dark footer — keep it transparent */
html[data-glass="1"] footer input{
  border-radius:0 !important; background:none !important; border:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important;
}
html[data-glass="1"] .size-pill[data-on="true"]{
  background:linear-gradient(180deg, #3a93ff, #0071e3) !important; color:#fff !important;
  border-color:rgba(255,255,255,.4) !important; box-shadow:0 6px 16px -6px rgba(0,113,227,.7);
}
html[data-glass="1"] .chip{ box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(30,50,90,.2); }
html[data-glass="1"] button[aria-label="wishlist"]{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.32)) !important;
  -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px -12px rgba(30,50,90,.35);
}
html[data-glass="1"] button[aria-label="wishlist"][data-on="false"]{ color:#1D1D1F !important; }
html[data-glass="1"] button[aria-label="wishlist"][data-on="true"]{
  background:linear-gradient(180deg, #3a93ff, #0071e3) !important;
  border-color:rgba(255,255,255,.4) !important;
  box-shadow:0 6px 16px -6px rgba(0,113,227,.7);
  color:#fff !important;
}

@media(prefers-reduced-transparency:reduce){
  html[data-glass="1"] body::before{ display:none; }
  html[data-glass="1"]{ background:#eef1f8; }
  html[data-glass="1"] header{ background:rgba(255,255,255,.95) !important; }
}
/* frosted full-width search sheet */
html[data-glass="1"] .glass-sheet{
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56)) !important;
  -webkit-backdrop-filter:blur(32px) saturate(190%); backdrop-filter:blur(32px) saturate(190%);
  border-bottom:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 24px 60px -26px rgba(30,50,90,.45);
}

/* scrollbar */
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:var(--line); border:3px solid var(--bg)}

/* ===== brand transition (intro splash + route curtain) ===== */
.bt{position:fixed; inset:0; z-index:300; background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  will-change:transform; overflow:hidden;}
.bt-word{display:inline-flex; align-items:baseline; gap:4px;
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:-.03em; line-height:1; font-size:clamp(56px,11vw,150px);}
.bt-word .reg{font-family:var(--mono); font-weight:500; font-size:.26em; letter-spacing:0;
  transform:translateY(-1.9em); color:var(--muted);}
.bt-line{width:min(46vw,460px); height:1px; background:var(--ink); transform-origin:center;}
.bt-tag{font-family:var(--mono); font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted); padding-left:.42em;}

/* --- initial intro: slow reveal then lift away --- */
.bt-intro{animation:bt-panel-up 2.05s cubic-bezier(.76,0,.24,1) forwards;}
.bt-intro .bt-word{clip-path:inset(0 0 110% 0); opacity:0;
  animation:bt-word-reveal 1.05s cubic-bezier(.22,1,.36,1) .12s forwards;}
.bt-intro .bt-line{transform:scaleX(0);
  animation:bt-line-draw .9s cubic-bezier(.76,0,.24,1) .55s forwards;}
.bt-intro .bt-tag{opacity:0; animation:bt-fade-in .7s ease 1s forwards;}

@keyframes bt-word-reveal{
  0%{clip-path:inset(0 0 110% 0); opacity:0; transform:translateY(10px);}
  55%{opacity:1;}
  100%{clip-path:inset(0 0 -2% 0); opacity:1; transform:translateY(0);}
}
@keyframes bt-line-draw{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes bt-fade-in{from{opacity:0;} to{opacity:1;}}
@keyframes bt-panel-up{
  0%,62%{transform:translateY(0);}
  100%{transform:translateY(-101%);}
}

/* --- route curtain: cover then reveal --- */
.bt-curtain{align-items:center; gap:0;}
.bt-curtain .bt-word{font-size:clamp(30px,5vw,56px); opacity:.92;}
.bt-curtain .bt-line,.bt-curtain .bt-tag{display:none;}
.bt-cover{animation:bt-curtain-cover .42s cubic-bezier(.62,0,.2,1) forwards;}
.bt-reveal{animation:bt-curtain-reveal .42s cubic-bezier(.62,0,.2,1) forwards;}
@keyframes bt-curtain-cover{from{transform:translateY(101%);} to{transform:translateY(0);}}
@keyframes bt-curtain-reveal{from{transform:translateY(0);} to{transform:translateY(-101%);}}

@media (prefers-reduced-motion: reduce){
  .bt{display:none !important;}
}

@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }