/* ============================================================
   NOX — shared brand-page styles (matches brand sheet)
   ============================================================ */
:root{
  --void:#0C0D0F; --carbon:#141518; --panel:#1A1C20; --steel:#282B31;
  --bone:#E9E4DA; --ash:#8B9096; --dim:#5C6167; --signal:#2B4CFF;
  --sans:"Archivo",-apple-system,"Helvetica Neue",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--void)}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:#fff}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad);width:100%}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.03em;text-wrap:balance}
p{margin:0 0 1em;color:var(--ash);max-width:62ch}
p strong{color:var(--bone);font-weight:500}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:.7em;margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px rgba(43,76,255,.9)}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:80}
/* The header has no bottom edge. A single blurred pane cannot fade out: the tint obeys a
   mask but the backdrop blur is clipped hard at the element's box, which leaves a line across
   the middle where the sharpness changes. So the blur is four bands, each blurring less than
   the one above and each masked to overlap its neighbour. No band shows an edge because the
   next carries on from it, and the last is blurred so lightly its clip cannot be seen. The
   box also runs past the bar, so that clip lands below the header entirely. */
header.glass{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
header.glass::after{display:none}
.hglass{position:absolute;inset:0 0 -34px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(233,228,218,.055),rgba(233,228,218,.012) 46%,transparent 70%),
             linear-gradient(180deg,rgba(16,17,20,.60),rgba(16,17,20,.28) 52%,rgba(16,17,20,0) 84%)}
.fglass{position:absolute;inset:-34px 0 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(233,228,218,.055),rgba(233,228,218,.012) 46%,transparent 70%),
             linear-gradient(0deg,rgba(16,17,20,.60),rgba(16,17,20,.28) 52%,rgba(16,17,20,0) 84%)}
.hglass i,.fglass i{position:absolute;inset:0;display:block}
.hglass i:nth-child(1){-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 28%,transparent 54%);mask-image:linear-gradient(180deg,#000 0%,#000 28%,transparent 54%)}
.hglass i:nth-child(2){-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  -webkit-mask-image:linear-gradient(180deg,transparent 16%,#000 36%,#000 52%,transparent 72%);mask-image:linear-gradient(180deg,transparent 16%,#000 36%,#000 52%,transparent 72%)}
.hglass i:nth-child(3){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 58%,#000 74%,transparent 90%);mask-image:linear-gradient(180deg,transparent 40%,#000 58%,#000 74%,transparent 90%)}
.hglass i:nth-child(4){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(180deg,transparent 64%,#000 84%,#000 100%);mask-image:linear-gradient(180deg,transparent 64%,#000 84%,#000 100%)}
.fglass i:nth-child(1){-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 28%,transparent 54%);mask-image:linear-gradient(0deg,#000 0%,#000 28%,transparent 54%)}
.fglass i:nth-child(2){-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  -webkit-mask-image:linear-gradient(0deg,transparent 16%,#000 36%,#000 52%,transparent 72%);mask-image:linear-gradient(0deg,transparent 16%,#000 36%,#000 52%,transparent 72%)}
.fglass i:nth-child(3){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(0deg,transparent 40%,#000 58%,#000 74%,transparent 90%);mask-image:linear-gradient(0deg,transparent 40%,#000 58%,#000 74%,transparent 90%)}
.fglass i:nth-child(4){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(0deg,transparent 64%,#000 84%,#000 100%);mask-image:linear-gradient(0deg,transparent 64%,#000 84%,#000 100%)}
footer.glass{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
footer.glass::after{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hglass{background:linear-gradient(180deg,rgba(16,17,20,.96),rgba(16,17,20,0))}
  .fglass{background:linear-gradient(0deg,rgba(16,17,20,.96),rgba(16,17,20,0))}
}
@media(prefers-reduced-transparency:reduce){
  .hglass i,.fglass i{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hglass{background:linear-gradient(180deg,rgba(16,17,20,.97),rgba(16,17,20,.80) 60%,rgba(16,17,20,0))}
  .fglass{background:linear-gradient(0deg,rgba(16,17,20,.97),rgba(16,17,20,.80) 60%,rgba(16,17,20,0))}
}

.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;justify-content:center;gap:11px}
.brand .mk{width:26px;height:auto;color:var(--bone);display:block}
.brand .wm{font-family:var(--sans);font-weight:900;font-size:1.35rem;letter-spacing:-.04em;color:var(--bone)}
.brandlogo{height:17px;width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.navlinks a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--ash);transition:color .2s}
.navlinks a:hover,.navlinks a.here{color:var(--bone)}
.pill{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:#fff;background:var(--signal);padding:.75em 1.2em;transition:filter .2s;white-space:nowrap}
.pill:hover{filter:brightness(1.15)}
@media(max-width:720px){.navlinks{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;background:var(--signal);color:#fff;padding:1.1em 1.7em;transition:filter .2s;border:none;cursor:pointer}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--steel)}
.btn.ghost:hover{filter:none;border-color:var(--bone)}
.tlink{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--bone);border-bottom:1px solid var(--signal);padding-bottom:3px;transition:opacity .2s}
.tlink:hover{opacity:.65}

/* hero */
.phero{padding:calc(clamp(96px,13vh,130px) + clamp(30px,6vw,64px)) 0 clamp(44px,7vw,84px);position:relative;overflow:hidden;border-bottom:1px solid var(--steel)}
.phero .glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:90vw;height:80vh;pointer-events:none;
  background:radial-gradient(circle at center, rgba(43,76,255,.12), transparent 60%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.92;letter-spacing:-.045em}
.phero .lede{font-size:clamp(17px,2vw,21px);line-height:1.5;max-width:54ch;color:var(--ash);margin-top:22px}
.phero .lede strong{color:var(--bone);font-weight:500}

/* sections */
section{padding:clamp(56px,8vw,108px) 0;border-top:1px solid var(--steel)}
section:first-of-type{border-top:0}
.shead h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.035em}
.shead p{margin-top:14px;max-width:56ch}
.body{font-size:clamp(16px,1.4vw,18px)}
.body p{margin-bottom:1.15em;max-width:64ch}
.body p:last-child{margin-bottom:0}

/* pillar / value grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,5vw,52px)}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--steel);background:var(--carbon);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.card:hover{border-color:var(--signal)}
.card .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--signal)}
.card h3{font-size:1.25rem;letter-spacing:-.02em;font-weight:700}
.card p{font-size:.96rem;line-height:1.55;margin:0}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(34px,5vw,50px)}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.stat{border-top:1px solid var(--steel);padding-top:20px}
.stat b{display:block;font-family:var(--sans);font-weight:900;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1}
.stat span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--ash);margin-top:8px;display:block}

/* split */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:24px}}

/* cta band */
.cta{text-align:center;position:relative;overflow:hidden}
.cta .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 50% 40%, rgba(43,76,255,.14), transparent 70%)}
.cta .wrap{position:relative}
.cta h2{font-size:clamp(2.2rem,6vw,4.4rem);letter-spacing:-.04em;max-width:16ch;margin:0 auto}
.cta .lede{color:var(--ash);max-width:46ch;margin:20px auto 0}
.cta form{display:flex;width:min(440px,86vw);margin:30px auto 0;border:1px solid var(--steel);background:rgba(255,255,255,.015);transition:border-color .3s}
.cta form:focus-within{border-color:var(--signal)}
.cta form input{flex:1;background:none;border:none;outline:none;color:var(--bone);font-family:var(--mono);font-size:.82rem;padding:15px 18px}
.cta form input::placeholder{color:var(--dim);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
.cta form button{background:var(--signal);color:#fff;border:none;cursor:pointer;font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;padding:0 24px;transition:filter .2s}
.cta form button:hover{filter:brightness(1.15)}
.cta .done{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--signal);margin-top:14px;min-height:1em}

/* footer: one quiet row of links, centred, nothing else */
footer{padding:clamp(18px,2.4vw,30px) 0 clamp(30px,4vw,44px)}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,46px)}
.flinks a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;
  color:var(--dim);transition:color .2s}
.flinks a:hover{color:var(--bone)}

/* ============================================================
   NOX — editorial media (campaign imagery / loops)
   ============================================================ */
.media{position:relative;overflow:hidden;background:var(--carbon)}
.media img,.media video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.24) contrast(1.03)}
.media .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,13,15,.08) 0%,rgba(12,13,15,0) 38%,rgba(12,13,15,.72) 100%)}
.media .cap{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(18px,3vw,34px);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--bone)}
.media .cap b{display:block;font-family:var(--sans);font-weight:900;letter-spacing:-.03em;text-transform:none;
  font-size:clamp(1.3rem,3vw,2.1rem);margin-bottom:6px}

/* full-bleed band */
.band{padding:0;border-top:1px solid var(--steel);border-bottom:1px solid var(--steel)}
.band .media{height:clamp(340px,62vh,720px)}

/* two-up / three-up editorial grid */
.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:clamp(34px,5vw,52px)}
.looks .media{aspect-ratio:3/4}
@media(max-width:820px){.looks{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.looks{grid-template-columns:1fr}}

/* framed split image */
.figframe{aspect-ratio:4/5;border:1px solid var(--steel)}
.figframe.tall{aspect-ratio:3/4}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}}

/* ============================================================
   NOX commerce — cart drawer, PLP, PDP
   ============================================================ */
.cartlink{position:relative;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--ash);cursor:pointer;background:none;border:none;padding:0}
.cartlink:hover{color:var(--bone)}
.cartlink [data-cart-count]{opacity:.7}

/* drawer */
.nox-scrim{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.nox-scrim.show{opacity:1;visibility:visible}
.nox-drawer.glass{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:201;
  /* no border and no material of its own: the glass is four bands that fade out to the left,
     the same way the header fades down and the footer fades up, so the panel has no edge */
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:-40px 0 90px rgba(0,0,0,.40);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.nox-drawer.open{transform:none}
.nox-drawer>*{position:relative;z-index:1}
.dglass{position:absolute;inset:0 0 0 -34px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(14,15,18,.10) 28%,rgba(14,15,18,.20) 62%,rgba(14,15,18,.20) 100%),
             linear-gradient(90deg,transparent 40%,rgba(233,228,218,.030) 78%,rgba(233,228,218,.048) 100%)}
.dglass i{position:absolute;inset:0;display:block}
.dglass i:nth-child(1){-webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.12);backdrop-filter:blur(40px) saturate(200%) brightness(1.12);
  -webkit-mask-image:linear-gradient(90deg,transparent 46%,#000 72%,#000 100%);mask-image:linear-gradient(90deg,transparent 46%,#000 72%,#000 100%)}
.dglass i:nth-child(2){-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  -webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 46%,#000 62%,transparent 84%);mask-image:linear-gradient(90deg,transparent 26%,#000 46%,#000 62%,transparent 84%)}
.dglass i:nth-child(3){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 26%,#000 42%,transparent 62%);mask-image:linear-gradient(90deg,transparent 8%,#000 26%,#000 42%,transparent 62%)}
.dglass i:nth-child(4){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 14%,transparent 36%);mask-image:linear-gradient(90deg,#000 0%,#000 14%,transparent 36%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dglass{background:linear-gradient(90deg,transparent,rgba(16,17,20,.96) 60%)}
}
@media(prefers-reduced-transparency:reduce){
  .dglass i{-webkit-backdrop-filter:none;backdrop-filter:none}
  .dglass{background:linear-gradient(90deg,transparent,rgba(16,17,20,.80) 40%,rgba(16,17,20,.97) 75%)}
}
/* At this transparency a bone garment can sit right behind the text, so the quiet greys in
   the drawer are lifted and everything carries a soft dark halo. The halo is invisible on the
   dark side of the panel and does the separating when something bright passes underneath. */
.nox-drawer .nd-var{color:#AEB3B9}
.nox-drawer .nd-note{color:#8B9096}
.nox-drawer .nd-name,.nox-drawer .nd-price,.nox-drawer .nd-sub,.nox-drawer .nd-title,
.nox-drawer .nd-var,.nox-drawer .nd-note,.nox-drawer .nd-close,.nox-drawer .nd-qty span{
  text-shadow:0 1px 2px rgba(8,9,11,.75),0 0 10px rgba(8,9,11,.45)}
/* the garment floats on the glass, no frame around it */
.nox-drawer .nd-thumb{background:none;border:none}
/* no rules anywhere in the drawer: spacing does the separating, the way it does in the grid */
.nox-drawer .nd-line{border-bottom:none;padding:20px 0}
.nox-drawer .nd-head{border-bottom:none}
.nox-drawer .nd-foot{border-top:none}
/* the quantity controls are type, not buttons */
.nox-drawer .nd-qty button{border:none;background:none;width:auto;min-width:14px;
  color:var(--ash);font-family:var(--mono);font-size:1rem;line-height:1;padding:2px 4px;
  transition:color .2s}
.nox-drawer .nd-qty button:hover{color:var(--bone)}
.nox-drawer .nd-qty{gap:14px}
.nd-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--steel)}
.nd-title{font-family:var(--sans);font-weight:900;font-size:1.05rem;letter-spacing:-.02em;text-transform:uppercase}
.nd-close{background:none;border:none;color:var(--ash);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;cursor:pointer}
.nd-close:hover{color:var(--bone)}
.nd-body{flex:1;overflow:auto;padding:6px 24px}
.nd-empty{color:var(--dim);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;padding:50px 0;text-align:center}
.nd-line{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--steel)}
.nd-thumb{width:60px;height:72px;background:var(--void);border:1px solid var(--steel);display:flex;align-items:center;justify-content:center}
.nd-star{width:28px;height:auto;opacity:.22}
.nd-photo{width:100%;height:100%;object-fit:contain;padding:7%}
.nd-name{font-family:var(--sans);font-weight:700;font-size:.9rem}
.nd-var{font-family:var(--mono);font-size:.64rem;color:var(--ash);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.nd-qty{display:inline-flex;align-items:center;gap:12px;margin-top:9px}
.nd-qty button{width:22px;height:22px;border:1px solid var(--steel);background:none;color:var(--bone);cursor:pointer;font-size:.9rem;line-height:1}
.nd-qty button:hover{border-color:var(--ash)}
.nd-qty span{font-family:var(--mono);font-size:.78rem;min-width:14px;text-align:center}
.nd-price{font-family:var(--mono);font-size:.82rem}
.nd-foot{padding:20px 24px;border-top:1px solid var(--steel)}
.nd-sub{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--ash);margin-bottom:18px}
.nd-sub span:last-child{font-family:var(--sans);font-weight:900;font-size:1.15rem;letter-spacing:-.02em;color:var(--bone)}
/* Bone on void, the site's own inversion, rather than the blue slab. Signal blue is the
   accent here, not a surface: it sits under the bar as a soft throw of light the way the
   emblem does behind the shop, and only comes forward on hover. */
.nd-checkout{position:relative;width:100%;background:var(--bone);color:var(--void);border:none;
  padding:18px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.24em;
  font-size:.7rem;font-weight:500;cursor:pointer;
  box-shadow:0 0 0 rgba(43,76,255,0),inset 0 1px 0 rgba(255,255,255,.55);
  transition:background .25s ease,box-shadow .35s ease,letter-spacing .25s ease}
.nd-checkout:hover{background:#fff;letter-spacing:.27em;
  box-shadow:0 10px 34px rgba(43,76,255,.38),inset 0 1px 0 rgba(255,255,255,.75)}
.nd-checkout:active{background:var(--bone);box-shadow:0 4px 16px rgba(43,76,255,.30),inset 0 1px 0 rgba(255,255,255,.4)}
.nd-checkout:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.nd-note{text-align:center;font-family:var(--mono);font-size:.6rem;color:var(--dim);letter-spacing:.06em;margin-top:12px}
.nox-toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);z-index:300;background:var(--panel);border:1px solid var(--steel);color:var(--bone);font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;padding:14px 22px;opacity:0;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center}
.nox-toast.show{opacity:1;transform:translate(-50%,0)}

/* PLP */
.plp{padding-top:calc(clamp(74px,9vh,96px) + clamp(6px,1.2vw,16px));padding-bottom:clamp(26px,3vw,46px)}




.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2.2vw,34px) clamp(12px,1.6vw,28px)}
@media(max-width:1200px){.pgrid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pcard{display:block;position:relative;background:none}
.pcard .pimg{aspect-ratio:4/5;position:relative;overflow:hidden}
.pcard .pimg img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%}
.pcard .ph{width:clamp(56px,10vw,104px);opacity:.16}
.pcard .pmeta{display:flex;flex-direction:column;gap:3px;padding:14px 2px 0}
.pcard .pcode,.pcard .pp{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.5}
.pcard .pcode{color:var(--bone)}
.pcard .pp{color:var(--dim)}
.pcard:hover .pp{color:var(--ash)}

/* A signal blue radiance behind the shop. Fixed, so it holds the centre of the screen while
   the grid scrolls past it, and breathing on a slow cycle. A hot core inside a long falloff,
   then a wide faint halo that dissolves into the page, with a near-black veil over the lot so
   the garments and the type stay the brightest things on screen. */
.shopglow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.shopglow::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(185vh,185vw);height:min(185vh,185vw);border-radius:50%;
  background:
    radial-gradient(circle,rgba(130,158,255,.14) 0%,rgba(43,76,255,0) 17%),
    radial-gradient(circle,rgba(43,76,255,.34) 0%,rgba(43,76,255,.24) 13%,
      rgba(43,76,255,.16) 23%,rgba(43,76,255,.10) 33%,rgba(43,76,255,.06) 43%,
      rgba(43,76,255,.03) 52%,rgba(43,76,255,.015) 60%,rgba(43,76,255,0) 70%),
    radial-gradient(circle,rgba(43,76,255,.06) 0%,rgba(43,76,255,.025) 55%,
      rgba(43,76,255,0) 86%);
  animation:noxbreathe 7.5s ease-in-out infinite}
/* The emblem, made of light rather than drawn as a shape. Two blurred copies on the same
   beat: a tighter one carries the form, a wide one carries the halo. The blur sits on the
   wrapper and the mask on the child, never the same element, because a filter is applied
   BEFORE a mask and masking a blurred layer clips the glow straight back to a hard edge.
   It runs past the screen edges on a narrow phone so it stays large there too. */
.shopglow .gbloom,.shopglow .gmark{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);--gw:min(58vh,112vw);width:var(--gw);
  height:calc(var(--gw) * 1.1605)}
.shopglow .gbloom i,.shopglow .gmark i{display:block;width:100%;height:100%;
  background:var(--signal);
  -webkit-mask:url(/logo-mark.svg) center/contain no-repeat;
  mask:url(/logo-mark.svg) center/contain no-repeat}
.shopglow .gbloom{filter:blur(clamp(44px,7.5vw,128px));opacity:.55;
  animation:noxbreathe 7.5s ease-in-out infinite}
.shopglow .gmark{filter:blur(clamp(9px,1.5vw,26px));opacity:.82;
  animation:noxbreathe-mark 7.5s ease-in-out infinite;animation-delay:-.25s}
.shopglow::after{content:"";position:absolute;inset:0;background:rgba(12,13,15,.82)}
@keyframes noxbreathe{
  0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.97)}
  50%     {opacity:1;  transform:translate(-50%,-50%) scale(1.10)}
}
@keyframes noxbreathe-mark{
  0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(1)}
  50%     {opacity:.98;transform:translate(-50%,-50%) scale(1.045)}
}
@media(prefers-reduced-motion:reduce){
  .shopglow::before,.shopglow .gbloom,.shopglow .gmark{animation:none}
}
/* the shop and the product stage both ride above the emblem */
.plp,footer{position:relative;z-index:1}
.pdp{z-index:1}

/* PDP — centred single column: image, dots, code, price, plus */
/* The product page is a stage, not a scroller: exactly one screen, and a gesture slides the
   next garment up into it. A real scrollbar would leave two half garments on screen. */
body.pdpbody{overflow:hidden}
.pdp{padding:0;position:fixed;inset:0;overflow:hidden}
/* The garment change, measured off a recording of theirs frame by frame at 120fps: the one
   leaving drifts about 15% of the screen in the direction of travel and fades out in ~140ms;
   the next starts the same distance out on the other side and comes in over ~200ms, a beat
   later. About 320ms end to end. It is a short push, not a full screen slide, which is why it
   reads as a swipe. The code, the price and the plus never animate, they just swap. */
.pdpitem{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:calc(clamp(58px,7vh,78px) + 10px) 0 clamp(26px,4vh,44px);
  width:100%;pointer-events:none;visibility:hidden;transition:visibility 0s linear .34s}
.pdpitem.on{pointer-events:auto;visibility:visible;transition-delay:0s}
.pdpitem .pcar{opacity:0;transform:translateY(16vh);will-change:transform,opacity;
  transition:transform .18s ease-in,opacity .14s ease-in}
.pdpitem.above .pcar{transform:translateY(-16vh)}
.pdpitem.on .pcar{opacity:1;transform:translateY(0);
  transition:transform .22s cubic-bezier(.22,1,.36,1) .06s,opacity .2s ease-out .06s}
/* the meta belongs to whichever product is on stage and nothing else */
.pdpitem .pstack{visibility:hidden}
.pdpitem.on .pstack{visibility:visible}
/* the arrows belong to the stage, not to a product, so they hold still through the change */
.stagearrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;
  cursor:pointer;color:var(--bone);opacity:.75;transition:opacity .2s}
.stagearrow:hover{opacity:1}
.stagearrow.spent{opacity:.18;pointer-events:none}
.stagearrow svg{width:22px;height:22px;display:block}
.stagearrow.prev{left:clamp(14px,5vw,90px)}
.stagearrow.next{right:clamp(14px,5vw,90px)}
@media(prefers-reduced-motion:reduce){.pdpitem .pcar{transition:none}}
.pdp .pcar{width:100%}
.pdp .pcar-view{width:min(560px,74vw);margin:0 auto;height:min(56svh,620px)}
.pdp .pcar-slide img.photo{padding:0}

.pstack{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vh,24px);margin-top:clamp(14px,2vh,22px)}
.pstack .pcode{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bone)}
.pstack .price{font-family:var(--mono);font-size:.9rem;color:var(--ash);margin:0}
.plusbtn{background:none;border:none;color:#fff;font-family:var(--sans);font-weight:500;
  font-size:2.1rem;line-height:1;cursor:pointer;padding:4px 16px;transition:transform .3s,opacity .2s}
.plusbtn:hover{opacity:.65}
.plusbtn.open{transform:rotate(45deg)}
/* the picker takes over the meta block: the code becomes SELECT SIZE, the plus becomes sizes */
.pstack.picking .pcode,.pstack.picking .plusbtn{display:none}
.bphead,.sizerow{width:min(520px,84vw)}
.bphead{display:flex;align-items:center;justify-content:space-between}
.bphead .bplabel{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bone)}
.bphead .bpask{width:22px;background:none;border:none;color:var(--bone);font-family:var(--mono);
  font-size:.85rem;line-height:1;padding:0;cursor:pointer;transition:opacity .2s}
.bphead .bpask:hover{opacity:.6}
.bphead .bpclose{width:22px;background:none;border:none;color:var(--bone);font-size:1rem;line-height:1;
  padding:0;cursor:pointer;transition:opacity .2s}
.bphead .bpclose:hover{opacity:.6}
.sizerow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sizerow button{background:none;border:none;padding:6px 2px;cursor:pointer;color:var(--bone);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;transition:opacity .2s}
.sizerow button:hover{opacity:.6}
.sizerow button[disabled]{color:var(--dim);text-decoration:line-through;cursor:not-allowed}
.bphead[hidden],.sizerow[hidden],.sizeguide[hidden]{display:none}
/* the guide sits in the same block as the sizes, never over the garment */
.sizeguide{width:min(520px,84vw);display:flex;flex-direction:column;gap:7px}
.sizeguide{--sgcols:5}
.sgrow{display:grid;grid-template-columns:1.35fr repeat(var(--sgcols),1fr);gap:6px;align-items:baseline;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--bone)}
.sgrow span:first-child{color:var(--dim);text-transform:uppercase;letter-spacing:.16em;font-size:.58rem}
.sgrow span{text-align:center}
.sgrow span:first-child{text-align:left}
.sghead{padding-bottom:5px;border-bottom:1px solid var(--steel)}
.sghead span{color:var(--dim);text-transform:uppercase;letter-spacing:.16em;font-size:.58rem}
.sgnote{margin-top:4px;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);text-align:center}

/* ---- PDP gallery carousel: front, back, then the film ---- */
.pcar{position:relative;outline:none}
/* The shots move exactly the way the garments do, just on the other axis: a short push in
   the direction of travel with a cross fade, same distances and same timings. */
.pcar-view{background:none}
.pcar-track{position:relative;height:100%}
.pcar-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(22%);will-change:transform,opacity;
  transition:transform .18s ease-in,opacity .14s ease-in}
.pcar-slide.before{transform:translateX(-22%)}
.pcar-slide.on{opacity:1;transform:translateX(0);
  transition:transform .22s cubic-bezier(.22,1,.36,1) .06s,opacity .2s ease-out .06s}
.pcar-slide img.photo{width:100%;height:100%;object-fit:contain;padding:8%}
.pcar-slide .ph{width:36%;opacity:.16}
.pcar-slide.film{background:var(--void)}
.pcar-slide.film video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:grayscale(.24) contrast(1.03)}
.pcar-slide.film .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,13,15,.10) 0%,rgba(12,13,15,0) 42%,rgba(12,13,15,.70) 100%)}
.pcar-slide.film .filmcap{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(12px,2vw,20px);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.58rem;color:var(--bone)}
.pcar-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;color:var(--bone);font-family:var(--sans);font-size:1.7rem;line-height:1;padding:0 0 4px;opacity:.55;transition:opacity .2s}
.pcar-arrow.prev{left:clamp(-64px,-5vw,-24px)}
.pcar-arrow.next{right:clamp(-64px,-5vw,-24px)}

.pcar:hover .pcar-arrow,.pcar:focus-within .pcar-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;color:var(--bone);font-family:var(--sans);font-size:1.7rem;line-height:1;padding:0 0 4px;opacity:.55;transition:opacity .2s}
.pcar-arrow:hover{border-color:var(--bone)}
.pcar.one .pcar-arrow,.pcar.one .pcar-dots{display:none}
.pcar-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.pcar-dot{width:26px;height:2px;padding:0;border:none;background:var(--steel);cursor:pointer;transition:background .25s}
.pcar-dot.on{background:var(--bone)}
@media(max-width:760px){.pcar-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;color:var(--bone);font-family:var(--sans);font-size:1.7rem;line-height:1;padding:0 0 4px;opacity:.55;transition:opacity .2s}}
@media(prefers-reduced-motion:reduce){.pcar-slide{transition:none}}
/* product film (Higgsfield) */
.pfilm{border-top:1px solid var(--steel);padding:clamp(44px,7vw,92px) 0}
.pfilm .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,34px)}
.filmbox{width:min(400px,86vw);aspect-ratio:9/16;border:1px solid var(--steel)}
.pgal .ph{width:36%;opacity:.16}
.pinfo{position:sticky;top:104px}
@media(max-width:900px){.pinfo{position:static}}
.pinfo .crumb{font-family:var(--mono);font-size:.68rem;color:var(--ash);text-transform:uppercase;letter-spacing:.28em;margin-bottom:14px}
.pinfo h1{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.03em}
.pinfo .price{font-family:var(--mono);font-size:1.05rem;color:var(--bone);margin-top:12px}
.opt{margin:0;width:100%;text-align:center}
.opt .lbl{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:.58rem;color:var(--dim);margin-bottom:12px}
.sizes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sizes button{min-width:58px;padding:13px 8px;background:none;border:1px solid var(--steel);color:var(--bone);font-family:var(--mono);font-size:.76rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.sizes button:hover{border-color:var(--ash)}
.sizes button.sel{border-color:var(--bone);background:var(--bone);color:var(--void)}
.sizes button[disabled]{color:var(--dim);text-decoration:line-through;cursor:not-allowed}
.colors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.colors button{padding:11px 16px;background:none;border:1px solid var(--steel);color:var(--bone);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:border-color .2s}
.colors button:hover{border-color:var(--ash)}
.colors button.sel{border-color:var(--bone)}
.addbtn{margin-top:6px;width:100%;background:var(--bone);color:var(--void);border:none;padding:16px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;cursor:pointer;transition:opacity .2s}
.addbtn:hover{opacity:.82}
.addbtn[disabled]{background:none;color:var(--dim);border:1px solid var(--steel);cursor:not-allowed}
/* visually hidden, still read by screen readers and search engines */
.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* header, in the yeezy.com arrangement: view toggle left, gender tabs centred, cart right */
/* Two strokes, not a glyph: the same control is the plus on the grid, an X once the grid is
   expanded, and the back chevron on a product. Every state is a transform, so it animates. */
.morphbtn{justify-self:start;position:relative;display:flex;width:16px;height:44px;
  align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.morphbtn .ml{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;
  align-items:center;justify-content:center;transition:transform .3s ease,left .3s ease}
.morphbtn .ml i{display:block;width:16px;height:2px;border-radius:2px;background:#fff;
  transition:width .3s ease,transform .3s ease}
@media(hover:hover){
  .morphbtn:hover{transform:rotate(18deg)}   /* holds the tilt until the cursor leaves */
}
.morphbtn[data-state="menu"] .first{transform:rotate(90deg)}
.morphbtn[data-state="close"] .first{transform:rotate(45deg)}
.morphbtn[data-state="close"] .second{transform:rotate(-45deg)}
.morphbtn[data-state="back"] .first{left:-4px;transform:rotate(45deg)}
.morphbtn[data-state="back"] .second{left:-4px;transform:rotate(-45deg)}
.morphbtn[data-state="back"] .ml i{width:10px;transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.morphbtn,.morphbtn .ml,.morphbtn .ml i{transition:none}}
.gtabs{justify-self:center;display:flex;gap:clamp(14px,2vw,26px)}
.gtabs a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.24em;font-size:.62rem;
  color:var(--dim);transition:color .2s}
.gtabs a:hover{color:var(--ash)}
.gtabs a.on{color:#fff}
.carticon{justify-self:end;display:flex;align-items:center;gap:6px;background:none;border:none;
  color:#fff;cursor:pointer;padding:0;transition:opacity .2s}
.carticon:hover{opacity:.7}
.carticon svg{width:19px;height:19px;display:block}
.carticon .cartn{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ash)}
.carticon .cartn.has{color:#fff}

/* the + expands the shots, the way theirs does */
body.gridbig .pgrid{grid-template-columns:repeat(3,1fr);gap:clamp(34px,5vw,72px) clamp(20px,3vw,46px)}
body.gridbig .pcard .pimg img.photo{padding:4%}
/* on a phone the grid is already two across, so the + has one job: go to a single column.
   the tablet band needs its own step too, or the + lands on the three columns it already has */
@media(min-width:721px) and (max-width:860px){body.gridbig .pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){body.gridbig .pgrid{grid-template-columns:1fr}}

/* ============================================================
   Glass, in the spirit of Apple's Liquid Glass. What a browser can
   actually do: blur and over-saturate the backdrop, tint it with a top-lit
   gradient, and fake the bevel with a bright hairline plus inset shadows so
   light appears to collect along the edge. The one thing CSS cannot do is
   refract the backdrop, which is the real trick in Apple's material; a
   pointer-tracked specular stands in for the way theirs moves with the device.
   Falls back to a solid panel where backdrop-filter is unsupported, and goes
   near opaque when the reader has asked for reduced transparency.
   ============================================================ */
/* no position here on purpose: the header and the drawer set their own, and a class
   overrides a type selector, so declaring position in the material detached both of them */
.glass{background:linear-gradient(180deg,rgba(233,228,218,.070),rgba(233,228,218,.026) 45%,rgba(233,228,218,.014)),
             rgba(16,17,20,.55);
  -webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.08);
  backdrop-filter:blur(26px) saturate(180%) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(233,228,218,.18),inset 0 -1px 0 rgba(233,228,218,.05)}
/* the specular: a soft highlight that sits where the light would catch, and on the
   drawer follows the pointer the way theirs follows the tilt of the device */

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(20,21,24,.96)}
}
@media(prefers-reduced-transparency:reduce){
  .glass{background:rgba(20,21,24,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
}