/* ============================================================
   KOVAKITS  |  site.css
   Type:   Anton (condensed caps display)  +  Archivo (UI, body)
           Same lineage as the athletic grotesques Nike and JD use.
   Colour: ~90% neutral, brand pink rationed, red reserved for sale.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  /* Neutrals */
  --paper:#F7F5F2;        /* page, warm off-white */
  --paper-2:#EFECE7;      /* recessed panels */
  --white:#FFFFFF;        /* product frames, cards */
  --ink:#111111;          /* headlines, primary text */
  --ink-2:#2B2B2B;        /* body copy */
  --grey:#757575;         /* secondary text */
  --grey-2:#8D8D8D;       /* struck-through prices */
  --line:#E2DED8;         /* hairlines */
  --line-2:#CFC9C0;       /* stronger rules */
  /* Accent, used sparingly */
  --pink:#FF0057;         /* brand. CTAs and one spark per view */
  --pink-deep:#D6003F;    /* small text and hover on light */
  --sale:#D43F21;         /* sale prices only, never decorative */

  /* legacy aliases so older rules keep working */
  --cream:var(--paper); --cream-2:var(--paper-2); --black:var(--ink); --brass:#BE9B58;

  --display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --head:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --gutter:18px; --max:1400px; --header-h:60px;
}
@media (min-width:768px){:root{--gutter:36px}}
@media (min-width:1024px){:root{--header-h:76px}}
@media (min-width:1280px){:root{--gutter:52px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;letter-spacing:-.002em;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--black);color:var(--cream);padding:8px 14px;z-index:999}
.skip:focus{left:8px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.wrap.narrow{max-width:820px}
.center{text-align:center}
.muted{color:var(--grey)}
.tiny{font-size:12px}
.w100{width:100%}
.small-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.kicker{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-deep)}

h1,h2,.h2{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:0;text-transform:uppercase}
h3{font-family:var(--head);font-weight:700;line-height:1.1;letter-spacing:-.01em;font-size:clamp(19px,2.3vw,24px)}
h1{font-size:clamp(46px,13vw,104px)}
h2,.h2{font-size:clamp(34px,6.2vw,64px)}
.lede{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:46ch}
@media (min-width:768px){.lede{font-size:16.5px}}
h1{font-size:clamp(40px,9vw,96px)}
h2,.h2{font-size:clamp(32px,5.5vw,60px)}
h3{font-size:clamp(20px,2.6vw,28px)}
.lede{font-size:16px;line-height:1.65;color:var(--ink);max-width:48ch}
@media (min-width:768px){.lede{font-size:17px}}
.rte p{margin-bottom:1em}
.rte p:last-child{margin-bottom:0}
.rte ul,.rte ol{padding-left:1.2em;margin-bottom:1em;list-style:disc}
.rte ol{list-style:decimal}
.rte h2,.rte h3{margin:1.4em 0 .5em}
.rte a{border-bottom:1.5px solid var(--pink)}
.rte img{margin:1.5em 0}
.rte blockquote{border-left:3px solid var(--pink);padding-left:18px;font-family:var(--head);font-size:1.25em;line-height:1.35;margin:1.4em 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;border:1.5px solid var(--ink);background:var(--ink);color:var(--white);border-radius:0;transition:background .18s,color .18s,border-color .18s,opacity .18s;white-space:nowrap;text-align:center}
.btn:hover{background:var(--pink);border-color:var(--pink);color:var(--white)}
.btn.ghost{background:transparent;color:var(--black)}
.btn.ghost:hover{background:var(--black);color:var(--cream);border-color:var(--black)}
.btn.light{background:var(--cream);border-color:var(--cream);color:var(--black)}
.btn.light:hover{background:var(--pink);border-color:var(--pink);color:var(--white)}
.btn.pink{background:var(--pink);border-color:var(--pink);color:var(--white)}
.btn.pink:hover{background:var(--black);border-color:var(--black)}
.btn[disabled],.btn.loading{opacity:.5;pointer-events:none}
.link{font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:3px;display:inline-block}
.link:hover{color:var(--pink-deep)}
.link.tiny{font-size:11px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}

/* Icons */
.ic{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.star{fill:currentColor;stroke:none}

/* Media blocks */
.media{position:relative;overflow:hidden;background-color:var(--ink);background-size:cover;background-position:center}
.media .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.8}
.media.has-img::after{opacity:.35}
.media.fabric{background-image:radial-gradient(120% 80% at 80% 10%,rgba(255,255,255,.12),transparent 50%),linear-gradient(115deg,#151515 0%,#242424 35%,#111 55%,#2a2a2a 78%,#141414 100%)}
.media.fabric::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 6px,rgba(255,255,255,.025) 6px 7px)}
.media.creamtex{background-color:var(--cream-2);background-image:radial-gradient(90% 60% at 20% 20%,rgba(255,255,255,.7),transparent 60%),linear-gradient(160deg,#EEE9E1,#DDD6CC 60%,#E9E3DA)}
.media.creamtex::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-30deg,transparent 0 9px,rgba(0,0,0,.025) 9px 10px)}
.media.gold{background-image:radial-gradient(70% 50% at 65% 40%,rgba(196,160,80,.35),transparent 60%),linear-gradient(115deg,#121212,#1f1b14 45%,#0e0e0e 70%,#1a1a1a)}
.media.has-img::before{display:none}
.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,11,.05) 30%,rgba(11,11,11,var(--shade,.7)) 100%)}

/* ============================================================
   ANNOUNCEMENT TICKER
   ============================================================ */
.announce{background:var(--pink);color:#fff;overflow:hidden;height:34px;display:flex;align-items:center;position:relative;z-index:60}
.announce-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.announce span{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:0 22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.announce span::after{content:"";width:4px;height:4px;background:rgba(255,255,255,.75);border-radius:50%;flex:none}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.announce-track{animation:none}}

/* ============================================================
   HEADER
   ============================================================ */
.header{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--white);isolation:isolate;transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .3s;will-change:transform}
.header.up{transform:translateY(-105%)}
.header.stuck{box-shadow:0 1px 0 rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.18)}
.header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--header-h)}
@media (min-width:1024px){.header .wrap{grid-template-columns:auto 1fr auto}}
.header .icon-btn{color:var(--white)}
.brand{display:flex;align-items:center;justify-self:center;line-height:1}
@media (min-width:1024px){.header .brand{justify-self:start}}
.brand-img{height:28px;width:auto;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media (min-width:1024px){.brand-img{height:34px}}

.footer .brand-img{height:68px}
.drawer .brand-img{height:26px}

/* Burger: two bars that spread on hover */
.burger{justify-self:start;margin-left:-10px}
@media (min-width:1024px){.header .burger{display:none}}
.burger-ic{display:block;width:21px;height:14px;position:relative}
.burger-ic i{position:absolute;left:0;right:0;height:1.8px;background:currentColor;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.burger-ic i:first-child{top:2px}
.burger-ic i:last-child{bottom:2px}

/* Nav with a sliding pink rule */
.nav{display:none}
@media (min-width:1024px){
  .nav{display:flex;justify-content:center;gap:4px;height:100%;align-items:stretch}
  .nav-item{display:flex;align-items:center}
  .nav a{font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:0 18px;height:100%;display:flex;align-items:center;position:relative;color:rgba(255,255,255,.82);transition:color .2s;overflow:hidden}
  .nav a:hover,.nav a.on{color:var(--white)}
  .nav a span{display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .nav a::after{content:"";position:absolute;left:18px;right:18px;bottom:20px;height:1.5px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
}

/* Mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);color:var(--ink);border-top:1px solid rgba(0,0,0,.08);box-shadow:0 22px 40px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .24s,transform .24s,visibility .24s;z-index:40}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{display:grid;grid-template-columns:190px 1fr;gap:56px;padding:34px var(--gutter) 40px;max-width:var(--max);margin:0 auto;width:100%;align-items:start}
.mega-label{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.mega-links a{display:block;font-family:var(--head);font-size:15px!important;font-weight:600;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;padding:7px 0!important;height:auto!important}
.mega-links a::after{display:none}
.mega-links a:hover{color:var(--pink)!important;transform:translateX(3px)}
.mega-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mtile{display:flex!important;flex-direction:column;justify-content:flex-start;position:relative;background:var(--ink);color:var(--white)!important;padding:16px!important;overflow:hidden;height:auto!important;letter-spacing:0!important;text-transform:none!important}
.mtile::after{display:none}
.mtile-art{position:absolute;right:-8%;top:-4%;width:56%;opacity:.95;transition:transform .5s cubic-bezier(.2,.8,.2,1);display:block}
.mtile-art svg{width:100%;height:auto;display:block}

.mtile b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;line-height:.95;position:relative;z-index:2}
.mtile-go{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-top:6px;display:flex;align-items:center;gap:6px;position:relative;z-index:2}
.mtile-go .ic{width:13px;height:13px;transition:transform .28s}

.icons{display:flex;align-items:center;gap:2px;justify-self:end}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;position:relative;transition:transform .2s}

.icon-btn .count{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--pink);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-family:var(--head)}
.icon-btn .count:empty{display:none}
.icon-btn .count.pop{animation:cartpop .42s cubic-bezier(.2,1.4,.4,1)}
@keyframes cartpop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.icon-btn .count.pop{animation:none}}
.icon-btn.acct{display:none}
@media (min-width:1024px){.icon-btn.acct{display:grid}}

/* Drawers and modals */
.drawer,.modal{position:fixed;inset:0;z-index:90;visibility:hidden}
.drawer.open,.modal.open{visibility:visible}
.scrim{position:absolute;inset:0;background:rgba(11,11,11,.5);opacity:0;transition:opacity .25s}
.open>.scrim{opacity:1}
.drawer .panel{position:absolute;top:0;left:0;bottom:0;width:min(88vw,400px);background:var(--paper);transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:20px var(--gutter) 24px;padding-bottom:max(24px,env(safe-area-inset-bottom));overflow:auto}
.drawer.right .panel{left:auto;right:0;transform:translateX(100%)}
.drawer.open .panel{transform:none}
.drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex:none}
.drawer .top h3{font-size:22px}
.drawer .top .muted{font-family:var(--body);font-size:13px;font-weight:500}
.close{width:40px;height:40px;display:grid;place-items:center;margin-right:-10px}
.modal-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(92vw,560px);max-height:86vh;overflow:auto;background:var(--paper);padding:28px;opacity:0;transition:opacity .2s,transform .2s}
.modal.open .modal-box{opacity:1;transform:translate(-50%,-50%)}
.modal-box .close{position:absolute;top:10px;right:14px}
.modal-box h3{margin-bottom:12px;padding-right:40px}

/* Menu drawer */
.menu li a,.menu li summary{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:27px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.menu li summary::-webkit-details-marker{display:none}
.menu li summary .ic{transition:transform .2s}
.menu li details[open] summary .ic{transform:rotate(180deg)}
.menu-sub{padding:4px 0 10px 4px;border-bottom:1px solid var(--line)}
.menu-sub li a{font-family:var(--body);font-weight:500;font-size:15px;padding:8px 0;border:0}
.menu-foot{margin-top:auto;padding-top:24px;font-size:13px;color:var(--grey);flex:none}
.menu-foot a{display:block;padding:6px 0;color:var(--black);font-weight:500}
.social-row{display:flex;gap:8px;margin-top:14px}
.social-row a{width:40px;height:40px;border:1px solid var(--line);display:grid;place-items:center;color:var(--black)}

/* Search */
.search-box{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--black);padding:8px 0;margin-bottom:22px}
.search-box input{flex:1;border:0;background:none;font-size:16px;outline:none;min-width:0}
.search-box.big{border:1.5px solid var(--black);padding:6px 6px 6px 16px;margin:26px 0 36px;max-width:640px}
.search-box.big .btn{height:44px;padding:0 20px}
.predictive a{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.predictive .thumb{width:52px;height:62px;background:var(--white);overflow:hidden;display:grid;place-items:center}
.predictive .thumb img{width:100%;height:100%;object-fit:cover}
.predictive b{font-weight:600;font-size:14px;display:block}
.predictive small{color:var(--grey);font-size:12px}
.predictive .all{display:block;padding:12px 0;grid-template-columns:1fr}
.popular a{font-weight:500;color:var(--black)}

/* Cart drawer + lines */
.bag-list{flex:1}
.bag-item,.cart-line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line{grid-template-columns:96px 1fr auto;padding:22px 0}
@media (min-width:768px){.cart-line{grid-template-columns:130px 1fr auto}}
.thumb{background:var(--white);border:1px solid var(--line);overflow:hidden;aspect-ratio:4/5;display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb svg{width:70%}
.bag-info .name,.cl-info .name{font-weight:600;font-size:14px;line-height:1.3;display:block}
.bag-info .meta,.cl-info .meta{font-size:12px;color:var(--grey);margin-top:2px}
.rm{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:8px;display:inline-block;border-bottom:1px solid transparent}
.rm:hover{color:var(--pink)}
.line-price{font-weight:600;text-align:right;font-size:14px}
.line-price s{display:block;font-weight:400;color:var(--grey);font-size:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);height:38px;margin-top:10px;background:var(--white)}
.qty button{width:36px;height:100%;display:grid;place-items:center}
.qty .ic{width:14px;height:14px}
.qty input{width:40px;text-align:center;border:0;background:none;height:100%;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none}
.bag-empty{padding:48px 0;color:var(--grey);text-align:center}
.bag-empty p{margin-bottom:18px}
.bag-foot{flex:none;padding-top:14px}
.bag-total{display:flex;justify-content:space-between;font-weight:600;padding:16px 0 10px;border-top:1.5px solid var(--black);font-size:16px}
.bag-disc{display:flex;justify-content:space-between;font-size:13px;color:var(--grey);padding:4px 0}
.bag-note{font-size:12px;color:var(--grey);margin-bottom:14px}
.center-link{display:block;text-align:center;margin:16px auto 0;width:max-content}
.ship-bar{padding:12px 0 18px;font-size:13px}
.ship-bar .ok{color:var(--black);display:flex;gap:6px;align-items:center}
.ship-bar .bar{height:3px;background:var(--line);margin-top:10px}
.ship-bar .bar span{display:block;height:100%;background:var(--pink);transition:width .4s}

/* Hero */
.hero{position:relative;background:var(--cream);overflow:hidden}
.hero .grid{display:grid;min-height:auto}
.hero .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111}
.hero .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.35) 0%,transparent 40%)}
.hero .copy{padding:34px var(--gutter) 46px;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(50px,14.5vw,96px);line-height:.9;letter-spacing:-.005em;max-width:12ch}
.hero h1 em{font-style:normal;color:var(--pink);display:block}
.hero .lede{margin:18px 0 0;max-width:34ch;color:var(--ink)}
.hero .cta{margin-top:26px}
.season{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:12px;color:var(--grey)}
.season::before{content:"";width:26px;height:1.5px;background:var(--pink);flex:none}
.hero .season{margin-bottom:18px}
.about-hero .season,.hero .season{color:inherit}
.about-hero .season{color:rgba(246,242,237,.75)}
.hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.hero .meta span{display:flex;align-items:center;gap:7px}
.hero .meta .ic{width:15px;height:15px;stroke-width:1.6;color:var(--black)}
@media (max-width:520px){.hero .cta .btn{width:100%}}
@media (min-width:900px){
  .hero .grid{grid-template-columns:1.18fr 1fr;align-items:stretch}
  .hero .frame{aspect-ratio:auto;min-height:min(82vh,780px);order:2}
  .hero .frame img{object-position:55% 50%}
  .hero .copy{order:1;padding:72px clamp(32px,4vw,72px) 72px var(--gutter)}
  .hero h1{font-size:clamp(60px,6.1vw,102px);line-height:.88;max-width:none}
}

/* Marquee */
.marquee{background:var(--ink);color:var(--white);overflow:hidden;padding:14px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 38s linear infinite}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.marquee span{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:18px;letter-spacing:.02em;padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.marquee span::after{content:"";width:5px;height:5px;background:var(--pink);border-radius:50%;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* Trust strip */
.trust{border-bottom:1px solid var(--line);background:var(--cream)}
.trust .wrap{display:grid;grid-template-columns:1fr 1fr}
@media (min-width:768px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust .item{padding:18px 0;display:flex;gap:12px;align-items:flex-start}
.trust .item:nth-child(odd){border-right:1px solid var(--line);padding-right:14px}
.trust .item:nth-child(even){padding-left:14px}
.trust .item:nth-child(-n+2){border-bottom:1px solid var(--line)}
@media (min-width:768px){
  .trust .item{padding:22px 24px 22px 0;border-bottom:0!important;border-right:1px solid var(--line)}
  .trust .item:nth-child(even){padding-left:24px}
  .trust .item:last-child{border-right:0}
}
.trust .ic{width:22px;height:22px;stroke-width:1.5;margin-top:2px}
.trust b{display:block;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.trust small{display:block;font-size:12px;color:var(--grey);margin-top:2px}

/* Section rhythm */
.section{padding:64px 0}
@media (min-width:1024px){.section{padding:104px 0}}
.section.tight{padding:40px 0}
.bg-white{background:var(--white)}
.bg-black{background:var(--black);color:var(--cream)}
.bg-black h1,.bg-black h2,.bg-black h3{color:var(--white)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
@media (min-width:1024px){.head{margin-bottom:44px}}
.head h2{font-size:clamp(30px,5.2vw,56px);line-height:.94}
.head p{color:var(--grey);margin-top:10px;max-width:46ch;font-size:14px}
.head .link{flex:none;margin-bottom:4px}
.head .n{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--grey);display:block;margin-bottom:12px;text-transform:uppercase}
.head .n::before{content:"";display:inline-block;width:22px;height:1.5px;background:var(--pink);vertical-align:middle;margin-right:10px}
@media (max-width:600px){.head{flex-direction:column;align-items:flex-start;gap:12px} .head .link{margin-bottom:0}}

/* Collections */
.cols{display:grid;gap:10px}
@media (min-width:860px){.cols{grid-template-columns:repeat(3,1fr);gap:16px}}
.cols.wrap-grid{grid-template-columns:1fr}
@media (min-width:700px){.cols.wrap-grid{grid-template-columns:repeat(3,1fr)}}
.col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--black);color:var(--cream);aspect-ratio:16/10;padding:22px;isolation:isolate}
@media (min-width:860px){.col{aspect-ratio:3/4;padding:26px}}
.col .art{position:absolute;inset:0;z-index:-1}
.col .art img.col-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.col .art::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 85% 100%,rgba(255,255,255,.1),transparent 55%),
  repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,.022) 7px 8px)}
.col.c-2{background:#131110}
.col.c-2 .art::before{background:radial-gradient(90% 70% at 80% 90%,rgba(201,164,76,.22),transparent 60%),repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,.02) 7px 8px)}
.col.c-3{background:var(--cream-2);color:var(--black)}
.col.c-3 .art::before{background:radial-gradient(90% 70% at 80% 90%,rgba(255,255,255,.8),transparent 60%),repeating-linear-gradient(-28deg,transparent 0 9px,rgba(0,0,0,.028) 9px 10px)}
.col .n{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-bottom:auto}
.col h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,6vw,44px);line-height:.9;max-width:9ch;color:inherit;letter-spacing:0}
.col p{font-size:13px;opacity:.72;margin:8px 0 14px;max-width:26ch}
.col .link{color:inherit;border-color:currentColor}
.col:hover .link{color:var(--pink);border-color:var(--pink)}
.col .art svg{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.col:hover .art svg{transform:translateY(-8px) rotate(-1.5deg)}

/* Editorial split */
.edit{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.edit .grid{display:grid;align-items:center}
@media (min-width:1000px){.edit .grid{grid-template-columns:1fr 1fr}}
.edit .copy{padding:56px var(--gutter)}
@media (min-width:1000px){.edit .copy{padding:100px clamp(40px,6vw,96px)}}
.edit h2{max-width:10ch;font-size:clamp(40px,6.6vw,74px);line-height:.9}
.edit .lede{margin:22px 0 0;max-width:42ch}
.edit .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.edit .stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.8vw,40px);line-height:1}
.edit .stat span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-top:6px}
.edit .panel{position:relative;background:var(--black);color:var(--cream);padding:56px var(--gutter);overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:center}
@media (min-width:1000px){.edit .panel{padding:100px clamp(40px,5vw,80px);min-height:560px}}
.edit .panel::before{content:"";position:absolute;inset:0;background-image:url('../img/wall-texture.jpg');background-size:320px;opacity:.5;mix-blend-mode:overlay}
.edit .panel::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 20% 10%,rgba(255,255,255,.08),transparent 60%)}
.edit .panel > *{position:relative;z-index:2}
.edit .panel .crown{width:42px;height:27px;color:var(--pink);margin-bottom:26px}
.edit .panel .quote{border:0;padding:0;margin:0;color:var(--white);font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,5vw,54px);line-height:.94;max-width:12ch}
.edit .panel .sig{margin-top:24px;font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,236,.6)}

/* Product cards */
.products{display:grid;grid-template-columns:1fr 1fr;gap:26px 12px}
@media (min-width:700px){.products{grid-template-columns:repeat(3,1fr);gap:40px 20px}}
@media (min-width:1080px){.products{grid-template-columns:repeat(4,1fr);gap:48px 24px}}
.products.three{grid-template-columns:1fr 1fr}
@media (min-width:1080px){.products.three{grid-template-columns:repeat(3,1fr)}}
.card{position:relative}
.card .ph{position:relative;aspect-ratio:3/4;background:linear-gradient(180deg,#F8E2DC 0%,#FFF2ED 100%);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:border-color .25s}
.card .ph::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 42%,rgba(0,0,0,.035),transparent 70%)}

.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .35s}
.card .ph img.alt{opacity:0}

.card .ph svg{width:86%;transition:transform .55s cubic-bezier(.2,.8,.2,1);position:relative}

.badge{position:absolute;top:0;left:0;background:var(--ink);color:var(--white);font-family:var(--head);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;z-index:2}
.badge.pink{background:var(--sale);color:#fff}
.badge.brand{background:var(--pink);color:#fff}
.badge.muted{background:var(--cream-2);color:var(--grey)}
.card .add{position:absolute;right:0;bottom:2px;width:44px;height:44px;background:var(--ink);color:var(--cream);display:grid;place-items:center;transition:background .18s,transform .18s;z-index:3}
.card .add:hover{background:var(--pink);color:#fff}
.card .add .ic{width:18px;height:18px;stroke-width:1.8}
.card .info{padding:14px 56px 0 0}
.card .name{font-weight:600;font-size:14px;line-height:1.35;display:block;letter-spacing:-.01em;color:var(--ink)}
.card .sub{font-size:13px;color:var(--grey);margin-top:2px;font-weight:400;letter-spacing:0;text-transform:none}
.price{font-weight:600;margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--ink)}
.price .price-was{color:var(--grey-2);font-weight:400;font-size:13.5px}
.price.on-sale .price-now{color:var(--sale)}
.stars{display:inline-flex;gap:2px;color:var(--pink);align-items:center}
.stars .ic{width:12px;height:12px}
.stars .off{color:var(--line)}
.stars small{font-size:11px;color:var(--grey);margin-left:5px}
.card .stars{margin-top:6px}
.more{margin-top:40px;text-align:center}
@media (min-width:1024px){.more{margin-top:56px}}
.pick{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border:1px solid var(--ink);padding:12px;z-index:4;box-shadow:0 -8px 24px rgba(0,0,0,.1)}
.pick-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}
.pick-close{width:28px;height:28px;display:grid;place-items:center;margin:-6px -6px -6px 0}
.pick-close .ic{width:15px;height:15px}
.pick-opts{display:flex;flex-wrap:wrap;gap:5px}
.pill{min-width:40px;height:36px;padding:0 12px;border:1px solid var(--line);background:var(--white);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pill:hover{border-color:var(--black)}
.pill[disabled],.pill.dis{color:var(--line);text-decoration:line-through;cursor:not-allowed;background:transparent}
.pill.on,input:checked+.pill{background:var(--black);color:var(--cream);border-color:var(--black)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills input{position:absolute;opacity:0;width:0;height:0}
.pills .pill{min-width:58px;height:50px;font-size:13.5px;font-weight:600}

/* Skeleton */
.skel .ph{background:linear-gradient(90deg,var(--cream-2) 25%,#f2eee8 50%,var(--cream-2) 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-color:transparent}
.skel .line{height:12px;background:var(--cream-2);margin-top:12px;width:70%}
.skel .line.s{width:40%}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Why */
.why{background:var(--black);color:var(--cream);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;background-image:url('../img/wall-texture.jpg');background-size:320px;opacity:.4;mix-blend-mode:overlay}
.why > *{position:relative;z-index:2}
.why h2{color:var(--white)}
.why .head{border-color:rgba(245,241,236,.2)}
.why .head p{color:rgba(245,241,236,.6)}
.why .grid{display:grid;gap:30px}
@media (min-width:800px){.why .grid{grid-template-columns:repeat(3,1fr);gap:44px}}
.why .item{border-top:1.5px solid rgba(255,255,255,.25);padding-top:20px}
.why .item .ic{width:24px;height:24px;stroke:var(--pink);stroke-width:1.4;margin-bottom:18px;opacity:.85}
.why h3{color:var(--white);margin-bottom:10px;font-size:21px;text-transform:uppercase;letter-spacing:.01em}
.why p{color:rgba(245,241,236,.66);font-size:14px;max-width:34ch}
.ship{margin-top:44px;display:grid;gap:16px;padding:24px;border:1px solid rgba(245,241,236,.22);background:rgba(0,0,0,.25)}
@media (min-width:800px){.ship{grid-template-columns:1.3fr 1fr 1fr 1fr;align-items:center;gap:24px;padding:28px 34px;margin-top:64px}}
.ship .lead{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1;color:var(--white)}
.ship .lead small{display:block;font-family:var(--body);font-size:12px;font-weight:400;color:rgba(245,241,236,.6);margin-top:6px}
.ship dt{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,236,.55)}
.ship dd{font-size:20px;font-weight:400;color:var(--white);margin-top:4px;font-family:var(--display)}
.ship.light{border-color:var(--line);background:var(--white);margin:26px 0 48px}
.ship.light .lead,.ship.light dd{color:var(--black)}
.ship.light .lead small,.ship.light dt{color:var(--grey)}

/* Kit Culture / journal */
.culture .grid{display:grid;gap:0}
@media (min-width:860px){.culture .grid{grid-template-columns:repeat(3,1fr);gap:0}}
.story{display:block;padding:26px 0;border-top:1px solid var(--line);position:relative}
.story:first-child{border-top:0}
@media (min-width:860px){
  .culture .story{border-top:0;border-left:1px solid var(--line);padding:0 28px;min-height:230px}
  .culture .story:first-child{border-left:0;padding-left:0}
  .culture .story:last-child{padding-right:0}
}
.story .kicker{display:block;margin-bottom:10px}
.story h3{margin:0 0 10px;max-width:22ch;font-size:clamp(19px,2.2vw,24px);line-height:1.18;transition:color .18s}

.story p{color:var(--grey);font-size:14px;max-width:46ch}
.story .link{margin-top:14px}

/* Journal index */
.blog-grid{display:grid;gap:0}
@media (min-width:820px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:0 40px}}
.blog-grid .story{padding:28px 0;border-top:1px solid var(--line);border-left:0}
.blog-grid .story.feature{grid-column:1/-1;border-top:0;padding-top:0}
.blog-grid .story.feature h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.6vw,56px);line-height:.94;max-width:18ch}
.blog-grid .story.feature p{font-size:16px;max-width:56ch}

.article h1{font-size:clamp(34px,6vw,66px);margin:12px 0 14px;max-width:20ch;line-height:.94}
.article-body{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.share{display:flex;gap:18px;align-items:center;margin:40px 0;padding-top:20px;border-top:1px solid var(--line)}
.share a,.share button{font-size:13px;font-weight:600;border-bottom:1.5px solid currentColor}
.article-cta{background:var(--black);color:var(--cream);padding:40px;text-align:center;margin-top:20px;position:relative;overflow:hidden}
.article-cta::before{content:"";position:absolute;inset:0;background-image:url('../img/wall-texture.jpg');background-size:320px;opacity:.4;mix-blend-mode:overlay}
.article-cta > *{position:relative;z-index:2}
.article-cta h3{color:var(--white);margin-bottom:18px}
.article-cta .btn{background:var(--cream);border-color:var(--cream);color:var(--black)}
.article-cta .btn:hover{background:var(--pink);border-color:var(--pink);color:#fff}

/* Reviews */
.reviews{background:var(--paper-2)}
.rev-grid{display:grid;gap:12px}
@media (min-width:820px){.rev-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.rev{background:var(--white);border:1px solid var(--line);padding:26px 24px 22px;display:flex;flex-direction:column;gap:16px;position:relative}
.rev::before{content:"\201C";position:absolute;top:10px;right:18px;font-family:var(--head);font-size:72px;line-height:1;color:var(--line-2);opacity:.9}
.rev .stars .ic{width:13px;height:13px}
.rev p{font-size:15.5px;line-height:1.58;color:var(--ink);font-weight:450;letter-spacing:-.006em}
@media (min-width:820px){.rev p{font-size:16px}}
.rev .who{font-size:12px;color:var(--grey);margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.rev .who b{color:var(--black);font-weight:600}
.rev .who span{display:block;margin-top:3px}
.rev .who .v{color:var(--pink-deep);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--grey);margin-top:12px}
.rating b{color:var(--black);font-weight:600}

/* Culture strip: taglines, no images */
.tagband{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tagband .wrap{display:grid;gap:0}
@media (min-width:760px){.tagband .wrap{grid-template-columns:repeat(3,1fr)}}
.tagband .t{padding:34px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.tagband .t{padding:46px 28px 46px 0;border-bottom:0;border-right:1px solid var(--line)}
 .tagband .t:last-child{border-right:0;padding-right:0}
 .tagband .t + .t{padding-left:28px}}
.tagband .t:last-child{border-bottom:0}
.tagband b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3.4vw,38px);display:block;line-height:.95}
.tagband span{display:block;font-size:13px;color:var(--grey);margin-top:10px;max-width:34ch}

/* Instagram */

@media (min-width:768px){}

/* Final CTA */
.final{position:relative;min-height:62svh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);overflow:hidden}
.final .media{position:absolute;inset:0}
.final .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* On narrow screens push the shirt to the edge so the headline sits on clear sky */
@media (max-width:760px){.final .media img{object-position:18% 50%}
  .final .shade{background:linear-gradient(180deg,rgba(255,242,237,.55) 0%,rgba(255,242,237,.48) 50%,rgba(255,242,237,.72) 100%)}}
/* A light veil keeps the pink sky intact while giving the type something to sit on */
.final .shade{background:linear-gradient(180deg,rgba(255,242,237,.62) 0%,rgba(255,242,237,.30) 45%,rgba(255,242,237,.72) 100%)}
.final .content{position:relative;z-index:2;padding:86px var(--gutter)}
.final .crown{width:38px;height:24px;color:var(--pink);margin:0 auto 22px}
.final h2{color:var(--ink);font-size:clamp(46px,10vw,108px);line-height:.88;text-shadow:0 1px 26px rgba(255,242,237,.75)}
.final p{font-family:var(--head);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin:16px 0 32px;color:var(--ink-2)}

/* Footer */
.footer{background:var(--paper);padding:56px 0 28px;border-top:1px solid var(--line);margin-top:auto}
.footer .grid{display:grid;gap:36px}
@media (min-width:768px){.footer .grid{grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px}}
.footer .brand{align-items:flex-start;justify-self:start}
.footer .brand-img{margin-bottom:4px}
.footer .brand .tag{display:block}
.footer .brand .swash{display:block;width:72px}
.footer .brand .crown{width:28px;height:18px}
.footer .brand .word{font-size:32px}
.drawer .brand-sm .swash{display:block}
.footer .about{font-size:13px;color:var(--grey);margin-top:18px;max-width:32ch}
.footer h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.footer li{padding:4px 0;font-size:14px}
.footer li a:hover{color:var(--pink)}
.footer .social a{display:inline-flex;align-items:center;gap:8px}
.footer .social .ic{width:18px;height:18px}
.nl-form{display:flex;border:1.5px solid var(--black);margin-top:14px;max-width:360px;background:var(--white)}
.nl-form input{flex:1;border:0;background:none;padding:0 14px;min-width:0;font-size:14px}
.nl-form .btn{height:46px;padding:0 18px;border:0}
.footer .base{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:12px;color:var(--grey)}
.pay{display:flex;gap:6px;flex-wrap:wrap}
.pay span{height:26px;padding:0 9px;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ink)}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--white);padding:14px 20px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100;display:flex;gap:16px;align-items:center;white-space:nowrap;max-width:92vw}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{color:var(--pink);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.toast.err{background:#7a1027}

/* Setup notice */
.setup{background:#FFF3F7;border-bottom:1px solid #FFD3E1;color:#8a1230;font-size:11px;padding:5px var(--gutter);display:flex;align-items:center;justify-content:center;gap:12px;line-height:1.3}
.setup button{font-size:17px;line-height:1;color:inherit;opacity:.55;padding:0 2px}
.setup button:hover{opacity:1}
.setup code{font-family:ui-monospace,Menlo,monospace;background:#fff;padding:1px 5px}

/* Page heads / crumbs */
.page-head{padding:44px 0 8px}
@media (min-width:1024px){.page-head{padding:72px 0 16px}}
.crumbs{display:flex;gap:8px;font-size:12px;color:var(--grey);margin-bottom:18px;flex-wrap:wrap}
.crumbs a:hover{color:var(--pink)}
.crumbs [aria-current]{color:var(--black)}

/* Product page */
.product{padding:20px 0 64px}
@media (min-width:1024px){.product{padding:36px 0 104px}}
.product-grid{display:grid;gap:28px}
@media (min-width:1024px){.product-grid{grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}}
.gallery{position:relative}
@media (min-width:1024px){.gallery{position:sticky;top:20px}}
.gallery-main{position:relative;aspect-ratio:3/4;background:linear-gradient(180deg,#F8E2DC 0%,#FFF2ED 100%);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.gallery-main .slide{position:absolute;inset:0;opacity:0;transition:opacity .3s;display:grid;place-items:center}
.gallery-main .slide.on{opacity:1;position:relative}
.gallery-main .slide img{width:100%;height:100%;object-fit:contain;object-position:center}
.gallery-main .slide svg{width:92%;max-height:100%}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(245,241,236,.9);display:grid;place-items:center;z-index:3}
.gal-arrow.prev{left:10px}.gal-arrow.next{right:10px}
.gal-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:3}
.gal-dots span{width:6px;height:6px;border-radius:3px;background:rgba(11,11,11,.25)}
.gal-dots span.on{background:var(--black);width:18px}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs .thumb{flex:none;width:64px;aspect-ratio:4/5;border:1px solid var(--line);opacity:.6;cursor:pointer;padding:0}
.thumbs .thumb.on{opacity:1;border-color:var(--black)}
.pinfo h1{font-family:var(--head);font-weight:700;text-transform:none;letter-spacing:-.02em;font-size:clamp(25px,3.2vw,36px);line-height:1.08;margin:6px 0 14px}
.pinfo-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.pinfo-row .price{margin:0;font-size:21px}
.opt{border:0;margin-bottom:22px}
.opt legend{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.opt legend b{font-weight:600;color:var(--grey);margin-left:4px;text-transform:none;letter-spacing:0}
.personalise{border:1px solid var(--line);margin-bottom:22px;background:var(--white)}
.personalise summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:600;font-size:14px;cursor:pointer}
.personalise summary::-webkit-details-marker{display:none}
.personalise summary small{font-weight:500;color:var(--grey);font-size:12px}
.personalise-fields{display:grid;grid-template-columns:1fr 100px;gap:10px;padding:0 16px 8px}
.personalise .tiny{padding:0 16px 14px}
.buy-row{display:flex;gap:10px;margin-bottom:12px}
.buy-row .qty{margin:0;height:52px;flex:none}
.buy-row .qty input{width:44px}
.buy-row .add-btn{flex:1}
.pmeta{margin:22px 0;display:grid;gap:11px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:20px}
.pmeta li{display:flex;gap:11px;align-items:flex-start;line-height:1.45}
.pmeta b{font-weight:600;color:var(--ink)}
.pmeta .ic{width:17px;height:17px;stroke-width:1.7;color:var(--pink);margin-top:1px;flex:none}
.pdesc{font-size:14px;color:var(--ink);padding-top:20px;border-top:1px solid var(--line)}
.accs{margin-top:20px;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer;font-weight:600;font-size:14px}
.acc summary::-webkit-details-marker{display:none}
.acc-title{display:flex;align-items:center;gap:12px}
.acc-title .ic{width:18px;height:18px;stroke-width:1.5;color:var(--grey)}
.acc-plus .ic{width:16px;height:16px;transition:transform .2s}
.acc[open] .acc-plus .ic{transform:rotate(45deg)}
.acc-body{padding:0 0 18px;font-size:14px;color:var(--ink)}
.form-err{color:#B5121B;font-size:13px;margin-top:8px}
.form-ok{color:var(--black);font-weight:500;font-size:13px;margin-top:8px}

/* Shop page */
.col-banner{position:relative;padding:44px 0 28px}
@media (min-width:1024px){.col-banner{padding:72px 0 40px}}
.col-banner.has-image{min-height:46svh;display:flex;align-items:flex-end;color:var(--cream);padding-bottom:40px}
.col-banner.has-image .media{position:absolute;inset:0}
.col-banner.has-image .content{position:relative;z-index:2}
.col-banner.has-image h1,.col-banner.has-image .crumbs [aria-current]{color:var(--white)}
.col-banner.has-image .crumbs{color:rgba(245,241,236,.7)}
.col-banner.has-image .lede{color:rgba(245,241,236,.85)}
.col-banner h1{font-size:clamp(40px,7.6vw,88px);line-height:.9}
.col-banner .lede{margin-top:14px}
.collection-main{padding-top:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px var(--gutter);margin:0 calc(var(--gutter) * -1) 24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  /* the header slides over this when it returns, so it sits flush at the top */
}
@media (min-width:1400px){.toolbar{box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(-1px -100vmax)}}

.toolbar .count{font-size:13px;color:var(--grey)}
.toolbar-right{display:flex;gap:8px;align-items:center}
.tb-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--white)}
.tb-btn .ic{width:16px;height:16px}
.tb-btn .n{background:var(--black);color:var(--cream);font-size:10px;padding:1px 6px;border-radius:8px}
.sort{position:relative;display:inline-flex;align-items:center}
.sort select{appearance:none;-webkit-appearance:none;height:40px;padding:0 36px 0 14px;border:1px solid var(--line);background:var(--white);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.sort .ic{position:absolute;right:12px;width:14px;height:14px;pointer-events:none}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-8px 0 20px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border:1px solid var(--line);font-size:12px;font-weight:500;background:var(--white)}
.chip .ic{width:12px;height:12px}
.filters{display:flex;flex-direction:column;flex:1}
.f-list li{padding:4px 0}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:18px;height:18px;border:1.5px solid var(--black);display:grid;place-items:center;color:var(--cream);flex:none}
.check .box .ic{width:12px;height:12px;opacity:0;stroke-width:2.2}
.check input:checked+.box{background:var(--black)}
.check input:checked+.box .ic{opacity:1}
.check small{margin-left:auto;color:var(--grey);font-size:12px}
.check.dis{color:var(--line)}
.f-price{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f-price label{display:flex;flex-direction:column;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);position:relative}
.f-price input{height:44px;border:1px solid var(--line);padding:0 10px 0 26px;background:var(--white);margin-top:6px;font-size:15px;color:var(--black)}
.f-price .cur{position:absolute;left:10px;bottom:13px;color:var(--grey);font-weight:500;text-transform:none}
.filter-foot{margin-top:auto;padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.empty{padding:56px 0;text-align:center;max-width:44ch;margin:0 auto}
.empty h3{margin-bottom:10px}
.empty p{color:var(--grey);margin-bottom:22px}
.empty.small{padding:24px 0;text-align:left;margin:0}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:48px}
.pg,.pg-arrow{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);font-size:13px;font-weight:600}
.pg.on{background:var(--black);color:var(--cream);border-color:var(--black)}
.pg.gap{border:0}

/* Cart page */
.cart-grid{display:grid;gap:36px}
@media (min-width:1024px){.cart-grid{grid-template-columns:1fr 380px;gap:64px;align-items:start}}
.cart-lines{border-top:1px solid var(--line)}
.cart-summary{border:1px solid var(--black);padding:24px;background:var(--white)}
@media (min-width:1024px){.cart-summary{position:sticky;top:20px}}
.cart-summary h3{margin-bottom:14px;font-size:22px}
.cart-summary .row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.cart-summary .row.total{font-weight:600;font-size:17px;border-bottom:0;padding-top:14px}
.cart-summary .btn{margin-top:10px}
.note-field{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:10px 0}
.note-field textarea{display:block;width:100%;border:1px solid var(--line);padding:10px;margin-top:6px;font-size:14px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--black);background:var(--cream)}

/* Forms */
.form{display:grid;gap:16px}
.form label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--black)}
.form label small{font-weight:400;text-transform:none;letter-spacing:0;color:var(--grey);margin-left:6px;font-size:12px}
.form input:not([type=checkbox]):not([type=file]),.form select,.form textarea{display:block;width:100%;height:50px;border:1px solid var(--line);background:var(--white);padding:0 14px;margin-top:6px;font-size:15px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--black);transition:border-color .15s}
.form textarea{height:auto;padding:12px 14px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--black);outline:none}
.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.7'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.form input[type=file]{display:block;margin-top:8px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400}
.form .file{border:1.5px dashed var(--line);padding:18px;background:var(--white);text-align:center;cursor:pointer}
.form .file:hover{border-color:var(--black)}
.form .file b{display:block;font-weight:600;text-transform:none;letter-spacing:0;font-size:14px}
.form .file span{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:var(--grey);font-size:12px;margin-top:2px}
.form .file input{position:absolute;opacity:0;width:0;height:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.form-row{grid-template-columns:1fr}}
.form .btn{justify-self:start}
.form .btn.w100{justify-self:stretch}
.form-ok.big{padding:28px;border:1px solid var(--black);background:var(--white)}
.form-ok.big h3{margin-bottom:8px}
.split-form{display:grid;gap:36px}
@media (min-width:1024px){.split-form{grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}}
.split-form .media.tall{aspect-ratio:4/5}
.split-body .h2{margin-bottom:12px}
.split-body .lede{margin-bottom:28px}
.contact-list{display:grid;gap:14px;margin-top:28px}
.contact-list li{font-size:15px}
.contact-list .small-label{display:block;margin-bottom:2px}
.auth{max-width:440px}
.auth-alt{margin-top:22px;font-size:14px}

/* FAQ */
.faq-grid{display:grid;gap:32px}
@media (min-width:1024px){.faq-grid{grid-template-columns:1fr 1.5fr;gap:80px;align-items:start} .faq-side{position:sticky;top:28px}}
.faq-side .lede{margin:14px 0 24px}
.faq-group{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:32px 0 6px}
.faq-group:first-child{margin-top:0}
.faq .acc summary{font-size:16px;padding:18px 0}

/* Shipping page */
.two-col{display:grid;gap:36px}
@media (min-width:768px){.two-col{grid-template-columns:1fr 1fr;gap:64px}}
.two-col h3{margin-bottom:12px}

/* About */
.about-hero{position:relative;min-height:60svh;display:flex;align-items:flex-end;color:var(--cream)}
.about-hero .media{position:absolute;inset:0}
.about-hero .content{position:relative;z-index:2;padding-top:60px;padding-bottom:48px}
.about-hero h1{color:var(--white);max-width:12ch}
.about-body{margin-bottom:56px}
.values{display:grid;gap:26px;margin-bottom:64px}
@media (min-width:768px){.values{grid-template-columns:repeat(3,1fr);gap:40px}}
.value{border-top:1.5px solid var(--black);padding-top:18px}
.value h3{font-size:22px;margin-bottom:8px}
.value p{color:var(--grey);font-size:14px}

/* 404 / password */
.notfound h1{font-size:clamp(38px,8vw,80px);margin:10px 0 16px;line-height:.92}
.notfound .lede{margin:0 auto 10px}
.notfound .cta{justify-content:center}
.password{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px var(--gutter)}
.pw-inner{max-width:520px}
.pw-inner .brand{margin:0 auto 32px}
.pw-inner h1{font-size:clamp(40px,8vw,76px);margin-bottom:16px;line-height:.92}
.pw-inner .lede{margin:0 auto 24px}
.pw-inner .nl-form{margin:0 auto}
.pw-inner .social-row{justify-content:center;margin-top:28px}

/* Journal article typography */
.article-body{font-size:17px;line-height:1.75}
.article-body p{margin-bottom:1.3em}

/* Utility */
.gap-top{margin-top:32px}
.table-wrap{overflow-x:auto}
table.orders{width:100%;border-collapse:collapse;font-size:14px}
table.orders th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);padding:10px 8px;border-bottom:1px solid var(--line)}
table.orders td{padding:14px 8px;border-bottom:1px solid var(--line)}

/* Size guide */
.sg-head{font-family:var(--head);font-size:20px;font-weight:800;margin:24px 0 10px}
table.sg{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.sg th{text-align:left;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:600;padding:8px 6px 8px 0;border-bottom:1.5px solid var(--black)}
table.sg td{padding:10px 6px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.sg th:last-child,table.sg td:last-child{padding-right:0}
table.sg tbody tr:last-child td{border-bottom:0}
table.sg td:first-child{font-weight:600}
table.sg td small{color:var(--grey);font-weight:400;font-size:11px;margin-left:2px}
@media (min-width:600px){table.sg{font-size:14px}table.sg th{font-size:10px}}
.sg-note{font-size:13px;color:var(--grey);margin:14px 0 0;line-height:1.55}
.sg-note:first-child{margin:0 0 18px}
.sg-note a{border-bottom:1.5px solid var(--pink);color:var(--black)}
#SizeGuide .modal-box{width:min(94vw,640px)}

/* Sticky buy bar, mobile only */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(247,245,242,.97);border-top:1px solid var(--line);padding:10px var(--gutter);padding-bottom:max(10px,env(safe-area-inset-bottom));display:none;gap:12px;align-items:center;transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.buybar.on{transform:none}
body[data-page="product"] .buybar{display:flex}
@media (min-width:1024px){body[data-page="product"] .buybar{display:none}}
.buybar .bb-info{flex:1;min-width:0}
.buybar .bb-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .bb-price{font-size:14px;font-weight:600;margin-top:1px}
.buybar .btn{height:48px;padding:0 22px;flex:none}
body[data-page="product"]{padding-bottom:0}
@media (max-width:1023px){body[data-page="product"] .product{padding-bottom:84px}}

/* Delivery estimate */
.eta{display:flex;align-items:flex-start;gap:11px;background:var(--white);border:1px solid var(--line);padding:15px 16px;margin:20px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.eta .ic{width:17px;height:17px;stroke-width:1.7;color:var(--ink);margin-top:1px;flex:none}
.eta b{font-weight:600}

/* Value strip under hero */
.vstrip{background:var(--ink);color:var(--white)}
.vstrip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (min-width:820px){.vstrip .wrap{grid-template-columns:repeat(4,1fr)}}
.vstrip .v{padding:20px 14px 20px 0;display:flex;gap:11px;align-items:flex-start;border-bottom:1px solid rgba(245,241,236,.16)}
.vstrip .v:nth-child(odd){border-right:1px solid rgba(245,241,236,.16)}
.vstrip .v:nth-child(even){padding-left:14px}
@media (min-width:820px){.vstrip .v{border-bottom:0;padding:26px 24px 26px 0;border-right:1px solid rgba(245,241,236,.16)}
 .vstrip .v:nth-child(even){padding-left:24px} .vstrip .v:last-child{border-right:0}}
.vstrip .ic{width:20px;height:20px;stroke-width:1.5;color:var(--pink);margin-top:1px}
.vstrip b{display:block;font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.vstrip small{display:block;font-size:11px;color:rgba(245,241,236,.55);margin-top:3px;line-height:1.45}

/* Request page: DM route */
.dm-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-8px 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.dm-row .btn{height:48px}
.dm-row .ic{width:18px;height:18px}
.dm-or{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:600}

/* Final-sale note beside the buy button */
.finalsale{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--grey);margin:-2px 0 18px;line-height:1.45}
.finalsale .ic{width:15px;height:15px;stroke-width:1.8;color:var(--grey);margin-top:2px;flex:none}
.finalsale a{color:var(--ink);border-bottom:1.5px solid var(--pink);font-weight:500}

/* ============================================================
   MOTION
   Everything below respects prefers-reduced-motion (see top of file).
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}.reveal.d5{transition-delay:.3s}.reveal.d6{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Headline wipe: each line rises from behind a mask */
.rise{display:block;overflow:hidden}
.rise > span{display:block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.in .rise > span,.rise.in > span{transform:none}
.rise:nth-child(2) > span{transition-delay:.08s}
.rise:nth-child(3) > span{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.rise > span{transform:none}}

/* Hero image drift */

@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1.5%,-1%,0)}}


/* Buttons: sweep fill */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.8,.2,1);z-index:-1}

.btn.pink::after{background:var(--ink)}
.btn.ghost::after{background:var(--ink)}
.btn.light::after{background:var(--pink)}
.btn:hover{border-color:transparent}
.btn.ghost:hover{color:var(--white);border-color:var(--pink)}
.btn.light:hover{color:var(--white)}

/* Link underline sweep */
.link{position:relative;border-bottom:0;padding-bottom:4px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:right;transition:transform .32s cubic-bezier(.2,.8,.2,1)}

.link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1) .1s}

/* Product card: kit lifts and tips, quick-add slides in */
.card .ph svg{transition:transform .6s cubic-bezier(.16,1,.3,1)}

.card .add{transform:translateY(100%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,background .18s}

@media (hover:none){.card .add{transform:none;opacity:1}}
.card .ph::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .35s;pointer-events:none;mix-blend-mode:multiply}

/* Collection tile: kit swings up on hover */

.col::after{content:"";position:absolute;inset:0;border:2px solid var(--pink);opacity:0;transition:opacity .3s;pointer-events:none}

/* ============================================================
   THE DROP
   ============================================================ */
.drop{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.drop::before{content:"";position:absolute;inset:0;background-image:url('../img/wall-texture.jpg');background-size:320px;opacity:.45;mix-blend-mode:overlay}
.drop .wrap{position:relative;z-index:2}
.drop .inner{display:grid;gap:28px;align-items:center;padding:52px 0}
@media (min-width:900px){.drop .inner{grid-template-columns:1.1fr auto;gap:56px;padding:64px 0}}
.drop .live{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:16px}
.drop .live i{width:7px;height:7px;border-radius:50%;background:var(--pink);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,0,87,.5)}50%{opacity:.7;box-shadow:0 0 0 7px rgba(255,0,87,0)}}
@media (prefers-reduced-motion:reduce){.drop .live i{animation:none}}
.drop h2{color:var(--white);font-size:clamp(34px,6.4vw,64px);line-height:.92}
.drop p{color:rgba(255,255,255,.62);margin-top:14px;max-width:46ch;font-size:15px}
.drop .cta{margin-top:26px}
.countdown{display:flex;gap:10px}
.countdown .unit{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:14px 10px;min-width:74px;text-align:center}
@media (min-width:900px){.countdown .unit{min-width:86px;padding:18px 12px}}
.countdown b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,4.4vw,42px);line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.countdown span{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:7px;font-weight:600}

/* ============================================================
   PAGE HEADERS
   ============================================================ */
.phead{background:var(--ink);color:var(--white);position:relative;overflow:hidden;padding:44px 0 40px}
@media (min-width:1024px){.phead{padding:68px 0 60px}}
.phead::before{content:"";position:absolute;inset:0;background-image:url('../img/wall-texture.jpg');background-size:320px;opacity:.45;mix-blend-mode:overlay}
.phead .wrap{position:relative;z-index:2}
.phead h1{color:var(--white);font-size:clamp(42px,9.5vw,96px);line-height:.88;margin-top:14px}
.phead .lede{color:rgba(255,255,255,.62);margin-top:18px}
.phead .crumbs{color:rgba(255,255,255,.45)}
.phead .crumbs a:hover{color:var(--pink)}
.phead .crumbs [aria-current]{color:rgba(255,255,255,.8)}
.phead .season{color:rgba(255,255,255,.65)}
.phead .ghost-word{position:absolute;right:-4%;bottom:-32%;font-family:var(--display);font-size:clamp(140px,26vw,320px);line-height:1;color:rgba(255,255,255,.04);letter-spacing:-.02em;pointer-events:none;z-index:1;white-space:nowrap}

/* Footer brand strip */
.bigmark{background:var(--ink);overflow:hidden;padding:0}
.bigmark span{display:block;font-family:var(--display);font-size:clamp(64px,17vw,220px);line-height:.86;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);text-align:center;padding:26px 0 18px;letter-spacing:-.01em;user-select:none}
@media (min-width:768px){.bigmark span{-webkit-text-stroke-width:2px}}

/* Counter */
.count-up{font-variant-numeric:tabular-nums}

/* Menu drawer, dark to match the header */
#MenuDrawer .panel{background:var(--ink);color:var(--white)}
#MenuDrawer .panel::before{content:"";position:absolute;inset:0;background-image:url('../img/wall-texture.jpg');background-size:320px;opacity:.4;mix-blend-mode:overlay;pointer-events:none}
#MenuDrawer .panel > *{position:relative;z-index:2}
#MenuDrawer .brand-img{height:26px}
#MenuDrawer .close{color:var(--white)}
#MenuDrawer .menu li a,#MenuDrawer .menu li summary{color:var(--white);border-bottom:1px solid rgba(255,255,255,.14);font-size:30px;padding:14px 0}
#MenuDrawer .menu li a:active{color:var(--pink)}
#MenuDrawer .menu-sub{border-bottom:1px solid rgba(255,255,255,.14)}
#MenuDrawer .menu-sub li a{color:rgba(255,255,255,.72);font-size:15px}
#MenuDrawer .menu-foot{color:rgba(255,255,255,.5);padding-top:20px;border-top:1px solid rgba(255,255,255,.14);margin-top:22px}
#MenuDrawer .menu-foot a{color:rgba(255,255,255,.82)}
#MenuDrawer .menu-foot a:hover{color:var(--pink)}
#MenuDrawer .social-row a{border-color:rgba(255,255,255,.22);color:var(--white)}
#MenuDrawer .social-row a:hover{border-color:var(--pink);color:var(--pink)}
.menu-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.menu-tiles .mtile{padding:8px!important;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);align-items:center;text-align:center}
.menu-tiles .mtile b{font-size:11.5px;line-height:1.1}


/* Hover effects only where there's a real pointer, so nothing sticks on touch */
@media (hover:hover) and (pointer:fine){
.club-chip:hover{border-color:var(--ink);color:var(--pink)}
.club-card:hover{border-color:var(--ink)}
.sf-opt:hover{border-color:var(--ink);background:var(--paper)}
.sf-opt:hover .ic{transform:translateX(3px);color:var(--pink)}
#MenuDrawer .menu li a:hover{color:var(--pink)}
.mtile:hover .mtile-art{transform:translateY(-6px) rotate(-3deg)}
.mtile:hover .mtile-go .ic{transform:translateX(4px)}
.card:hover .ph svg{transform:translateY(-10px) rotate(-2deg) scale(1.04)}
.card:hover .add,.card:focus-within .add{transform:none;opacity:1}
.card:hover .ph::after{opacity:.03}
.col:hover .art svg{transform:translateY(-14px) rotate(-2.5deg) scale(1.03)}
.col:hover::after{opacity:1}
.story:hover h3{color:var(--pink)}
.card:hover .ph{border-color:var(--black)}
.card:hover .ph img.alt{opacity:1}
.card:hover .ph svg{transform:translateY(-6px) scale(1.02)}
.burger:hover .burger-ic i:first-child{transform:translateY(-2px)}
.burger:hover .burger-ic i:last-child{transform:translateY(2px)}
.header .brand:hover .brand-img{transform:scale(1.04)}
.icon-btn:hover{transform:translateY(-1px)}
.btn:hover::after{transform:scaleX(1)}
.link:hover::after{transform:scaleX(0);transform-origin:left}
.link:hover::before{transform:scaleX(1)}
}

/* ============================================================
   TAP TARGETS
   Hit areas grown to ~44px without shifting anything visually.
   ============================================================ */
.link{padding-block:11px;margin-block:-11px}
.link::after,.link::before{bottom:11px}
.head .link{margin-bottom:-7px}
.card .name{padding-block:9px;margin-block:-9px}
.card .sub{margin-top:11px}
.brand{min-height:44px;align-items:center}
.toast button{padding:12px 4px;margin:-12px 0}
.rm{padding-block:8px;margin-block:-2px}
.menu-foot a{padding:10px 0}
.footer li a{display:inline-block;padding:5px 0;margin:-5px 0}
.crumbs a{padding-block:6px;margin-block:-6px}
.share a,.share button{padding-block:11px;margin-block:-11px}

/* Filter drawer refinements */
#FilterDrawer .filters{min-width:0}
#FilterDrawer .acc-body{min-width:0}
#FilterDrawer .f-price{grid-template-columns:1fr 1fr;gap:10px;min-width:0}
#FilterDrawer .f-price label{min-width:0}
#FilterDrawer .f-price input{width:100%;min-width:0}
/* a chevron reads better than a plus here, since the drawer already has a close button */
#FilterDrawer .acc-plus .ic{transform:none}
#FilterDrawer .acc[open] .acc-plus .ic{transform:rotate(45deg)}
#FilterDrawer .acc summary{padding:16px 0 12px}
#FilterDrawer .acc-title{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;font-family:var(--head)}
#FilterDrawer .filter-foot{position:sticky;bottom:0;background:var(--paper);padding-block:16px;margin-top:24px;border-top:1px solid var(--line)}

/* ============================================================
   SIZE FINDER
   ============================================================ */
.sf-box{width:min(94vw,520px);padding:0;overflow:hidden}
.sf-bar{height:3px;background:var(--line);position:relative}
.sf-bar span{display:block;height:100%;background:var(--pink);width:0;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.sf-box .close{top:14px;right:14px;z-index:3}
.sf-step{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding:26px 28px 0}
.sf-box h3{padding:8px 56px 18px 28px;margin:0;font-size:clamp(21px,3.4vw,26px);line-height:1.15}
.sf-box #SFBody{padding:0 28px}
.sf-opts{display:grid;gap:8px}
.sf-opt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;width:100%;text-align:left;border:1px solid var(--line);background:var(--white);padding:15px 16px;transition:border-color .16s,background .16s;min-height:60px}
.sf-opt b{font-size:15px;font-weight:600;grid-column:1}
.sf-opt span{font-size:12.5px;color:var(--grey);grid-column:1;line-height:1.35}
.sf-opt .ic{grid-column:2;grid-row:1/3;width:17px;height:17px;color:var(--grey);transition:transform .2s,color .2s}
.sf-opt:active{border-color:var(--ink)}
.sf-input{display:grid;gap:0}
.sf-input label{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;display:block}
.sf-input input{width:100%;height:58px;border:1.5px solid var(--line);background:var(--white);padding:0 16px;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.sf-input input::-webkit-inner-spin-button{-webkit-appearance:none}
.sf-input input:focus{border-color:var(--ink);outline:none}
.sf-two{grid-template-columns:1fr 1fr;gap:12px}
.sf-two .sf-hint,.sf-two .btn,.sf-two .sf-err{grid-column:1/-1}
.sf-hint{font-size:12.5px;color:var(--grey);margin:12px 0 18px;line-height:1.45}
.sf-err{font-size:12.5px;color:var(--sale);margin:-8px 0 12px;font-weight:500}
.sf-result{text-align:center;padding-top:4px}
.sf-size{font-family:var(--display);font-size:clamp(56px,16vw,88px);line-height:.9;color:var(--ink);margin-bottom:14px}
.sf-note{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:38ch;margin:0 auto}
.sf-between{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--grey)}
.sf-actions{display:grid;gap:8px;margin:24px 0 0}
.sf-small{font-size:12px;color:var(--grey);margin-top:16px;line-height:1.5}
.sf-small a{color:var(--ink);border-bottom:1.5px solid var(--pink)}
.sf-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 28px 26px;margin-top:20px;border-top:1px solid var(--line)}
.sf-foot .link{display:inline-flex;align-items:center;gap:7px}
.sf-foot .ic{width:14px;height:14px}
/* the entry point beside the size selector */
.sf-cta{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--pink);padding-bottom:3px}
.sf-cta .ic{width:15px;height:15px;color:var(--pink)}
.opt legend .sf-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ============================================================
   PERSONALISATION
   ============================================================ */
.personalise{border:1px solid var(--line);margin-bottom:22px;background:var(--white)}
.personalise[open]{border-color:var(--ink)}
.personalise summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px;font-weight:600;font-size:14.5px;cursor:pointer;gap:12px}
.personalise summary::-webkit-details-marker{display:none}
.personalise summary::after{content:"";width:9px;height:9px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg);margin-left:auto;transition:transform .2s;flex:none}
.personalise[open] summary::after{transform:rotate(-135deg)}
.personalise summary small{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--pink)}
.pers-body{padding:0 16px 16px}
.pers-fields{display:grid;grid-template-columns:1fr 92px;gap:10px}
.pers-fields label{display:block;position:relative;font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.pers-fields input{width:100%;height:50px;border:1px solid var(--line);background:var(--paper);padding:0 14px;margin-top:7px;font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pers-fields input:focus{border-color:var(--ink);outline:none}
.pers-count{position:absolute;right:10px;bottom:15px;font-size:10px;letter-spacing:0;color:var(--grey);font-weight:500;font-family:var(--body)}
.pers-err{font-size:12.5px;color:var(--sale);margin-top:10px;font-weight:500}
.pers-note{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--grey);margin-top:14px;line-height:1.45}
.pers-note b{color:var(--ink);font-weight:600}
.pers-note .ic{width:15px;height:15px;stroke-width:1.7;color:var(--pink);margin-top:1px;flex:none}

/* ============================================================
   CLUB PAGES
   ============================================================ */
.club-grid{display:grid;gap:40px}
@media (min-width:1000px){.club-grid{grid-template-columns:1.6fr 1fr;gap:72px;align-items:start}}
.club-body h2{margin-bottom:18px}
.club-body h3{margin:36px 0 12px;padding-top:26px;border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.01em}
.club-body .rte{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.club-body .rte p{margin-bottom:1.1em}
.club-facts{border:1px solid var(--ink);padding:26px;background:var(--paper)}
@media (min-width:1000px){.club-facts{position:sticky;top:24px}}
.club-facts h3{margin:0 0 16px;font-size:18px;text-transform:uppercase}
.club-facts dl{display:grid;gap:0;margin-bottom:22px}
.club-facts dl > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.club-facts dl > div:last-child{border-bottom:0}
.club-facts dt{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);padding-top:2px}
.club-facts dd{font-size:14px;font-weight:600;text-align:right}
.notable{display:grid;gap:12px}
@media (min-width:820px){.notable{grid-template-columns:repeat(3,1fr);gap:20px}}
.note-card{border:1px solid var(--line);background:var(--white);padding:24px 22px}
.note-year{font-family:var(--display);font-size:34px;line-height:1;color:var(--pink);display:block;margin-bottom:12px}
.note-card h3{font-size:18px;margin-bottom:8px;line-height:1.2}
.note-card p{font-size:14px;color:var(--grey);line-height:1.5}
.club-links{display:flex;flex-wrap:wrap;gap:8px}
.club-chip{display:inline-flex;align-items:center;height:42px;padding:0 16px;border:1px solid var(--line);background:var(--white);font-size:13.5px;font-weight:600;transition:border-color .16s,color .16s}
.club-cards{display:grid;gap:12px}
@media (min-width:700px){.club-cards{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1100px){.club-cards{grid-template-columns:repeat(4,1fr)}}
.club-card{border:1px solid var(--line);background:var(--white);padding:26px 22px 22px;display:flex;flex-direction:column;min-height:196px;transition:border-color .2s}
.cc-league{font-family:var(--head);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:auto}
.club-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.6vw,28px);line-height:.95;margin:18px 0 8px}
.club-card p{font-size:13px;color:var(--grey);margin-bottom:16px;line-height:1.45}
.club-card .link{margin-top:auto}

/* Drop side panel */
.drop-side{display:grid;gap:14px;min-width:0}
@media (min-width:900px){.drop-side{width:340px}}
.cd-label{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0}
.drop-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px}
.drop-form input[type=email]{height:50px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:var(--white);padding:0 14px;font-size:15px;min-width:0}
.drop-form input[type=email]::placeholder{color:rgba(255,255,255,.45)}
.drop-form input[type=email]:focus{border-color:var(--pink);outline:none}
.drop-form .btn{height:50px;padding:0 20px}
.drop-consent{grid-column:1/-1;font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.4;align-items:flex-start;gap:9px;margin-top:2px}
.drop-consent .box{border-color:rgba(255,255,255,.4);margin-top:1px}
.drop-consent input:checked+.box{background:var(--pink);border-color:var(--pink)}

/* ============================================================
   HOW IT WORKS  (request page)
   ============================================================ */
.how{position:relative;overflow:hidden;background:var(--ink);min-height:440px;display:flex}
@media (min-width:1000px){.how{min-height:560px}}
.how img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.how::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.88) 65%)}
.how-in{position:relative;z-index:2;align-self:flex-end;padding:28px;width:100%;color:var(--white)}
@media (min-width:768px){.how-in{padding:36px}}
.how-label{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:20px}
.how-steps{display:grid;gap:18px;list-style:none}
.how-steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.how-n{font-family:var(--display);font-size:22px;line-height:1;color:rgba(255,255,255,.35)}
.how-steps b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.how-steps span{display:block;font-size:13px;color:rgba(255,255,255,.62);line-height:1.45}
.how-foot{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.75);font-family:var(--head)}
.about-hero .media.has-img::before,.final .media.has-img::before{display:none}

/* On-screen Wix diagnostics, only shown with ?debug=wix */
.wix-debug{position:fixed;left:0;right:0;bottom:0;max-height:52vh;overflow:auto;z-index:9999;
  background:#111;color:#8fe;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:14px 16px;margin:0;white-space:pre-wrap;word-break:break-word;border-top:3px solid var(--pink)}

/* ============================================================
   INSTAGRAM DM BUTTON
   Sits above the mobile buy bar so it never covers Add to Bag.
   ============================================================ */
.dm-fab{position:fixed;right:16px;bottom:18px;z-index:45;display:inline-flex;align-items:center;gap:9px;
  height:50px;padding:0 18px 0 15px;background:var(--ink);color:var(--white);
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.26);transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s}
.dm-fab .ic{width:19px;height:19px;stroke-width:1.9}
.dm-fab span{white-space:nowrap}
body.has-buybar .dm-fab{bottom:86px}
@media (max-width:420px){
  .dm-fab{padding:0;width:52px;height:52px;justify-content:center;border-radius:50%}
  .dm-fab span{display:none}
}
@media (hover:hover) and (pointer:fine){
  .dm-fab:hover{background:var(--pink);transform:translateY(-2px)}
}
@media print{.dm-fab{display:none}}

/* Long club list scrolls inside its own section */
.f-scroll{max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin-right:-4px;padding-right:4px}
.f-scroll::-webkit-scrollbar{width:3px}
.f-scroll::-webkit-scrollbar-thumb{background:var(--line)}
.f-list li[hidden]{display:none}

/* ============================================================
   LOAD STABILITY
   Reserve space for anything that fills in after the page paints,
   so content never jumps once products or images arrive.
   ============================================================ */
.hero .frame{aspect-ratio:766/848;background:var(--paper-2)}
@media (max-width:899px){.hero .frame{aspect-ratio:704/848}}
.hero .frame img{width:100%;height:100%;object-fit:cover;display:block}
.products:empty{min-height:60vh}
#featured:empty,#grid:empty,#club-grid:empty{min-height:60vh}
#collections:empty{min-height:50vh}
/* The hero is built by JavaScript, so hold its height before it fills.
   Without this the whole page jumps down once the hero appears. */
#hero:empty{display:block;min-height:1096px}
@media (min-width:700px) and (max-width:1023px){#hero:empty{min-height:1599px}}
@media (min-width:1024px){#hero:empty{min-height:791px}}

/* Same for the other JavaScript-filled sections on the homepage */
#collections:empty{min-height:1378px}
@media (min-width:700px) and (max-width:1023px){#collections:empty{min-height:2305px}}
@media (min-width:1024px){#collections:empty{min-height:556px}}
#editorial:empty{min-height:928px}
@media (min-width:1024px){#editorial:empty{min-height:743px}}
#drop:empty{min-height:1100px}
@media (min-width:700px) and (max-width:1023px){#drop:empty{min-height:786px}}
@media (min-width:1024px){#drop:empty{min-height:956px}}
#final:empty{min-height:465px}
@media (min-width:1024px){#final:empty{min-height:568px}}

/* A reveal that is already on screen at first paint should not flash */
@media (prefers-reduced-motion:no-preference){
  .reveal{transition-delay:0s}
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.gallery{position:relative}

/* Oversized club name behind the gallery */
.gallery{padding-top:clamp(30px,7vw,58px);overflow:hidden}
.pghost{position:absolute;top:0;left:0;right:0;z-index:0;pointer-events:none;overflow:hidden;
  font-family:var(--display);font-size:clamp(58px,13vw,120px);line-height:.85;
  color:transparent;-webkit-text-stroke:1.4px rgba(17,17,17,.13);white-space:nowrap;letter-spacing:-.01em}
@media (min-width:1024px){.pghost{top:-6px;-webkit-text-stroke-width:1.6px}}
.gallery-main,.thumbs{position:relative;z-index:1}

/* Image counter */
.gcount{position:absolute;right:12px;bottom:12px;z-index:3;
  background:rgba(17,17,17,.82);color:#fff;backdrop-filter:blur(6px);
  font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;
  padding:6px 11px;font-variant-numeric:tabular-nums}
.gcount b{font-weight:700}

/* Kit type eyebrow with a pink marker */
.pinfo .kicker{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.kdot{width:22px;height:2px;background:var(--pink);display:block}

/* Title: bigger, tighter, in the display face */
.pinfo h1{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,7.2vw,54px);line-height:.92;letter-spacing:0;margin-bottom:14px}
@media (min-width:1024px){.pinfo h1{font-size:clamp(38px,3.4vw,58px)}}

/* Price sits large next to the title */
.pinfo .price{font-family:var(--display);font-weight:400;font-size:clamp(26px,5vw,36px);line-height:1}
.pinfo .price-was{font-size:.6em}

/* Thumbnails: squared, active one marked in pink */
.thumbs .thumb{aspect-ratio:3/4;border:1px solid var(--line);background:linear-gradient(180deg,#F8E2DC 0%,#FFF2ED 100%);transition:border-color .2s}
.thumbs .thumb.on{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--pink)}

/* Arrows: square, high contrast, only where there's a pointer */
.gal-arrow{width:46px;height:46px;background:rgba(255,255,255,.92);border:1px solid var(--line);
  backdrop-filter:blur(4px);transition:background .2s,color .2s,border-color .2s}
@media (hover:hover) and (pointer:fine){
  .gal-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .thumbs .thumb:hover{border-color:var(--ink)}
}

/* About hero sits on the same light photography */
.about-hero{color:var(--ink)}
.about-hero .shade{background:linear-gradient(180deg,rgba(255,242,237,.35) 0%,rgba(255,242,237,.72) 100%)}
.about-hero h1{color:var(--ink)}
.about-hero .season{color:var(--ink-2)}
.final .btn{background:var(--ink);color:var(--white);border-color:var(--ink)}
.final .btn::after{background:var(--pink)}


/* ==================================================================
   DREAM THEME, second pass
   Built from the research spec: one continuous rose-to-cream canvas,
   sections separated by rhythm and hairlines (never coloured slabs),
   glass on chrome only, one radius family, one light source, tinted
   shadows, grain to stop banding, and every text pair contrast-checked.
   ================================================================== */
:root{
  /* Canvas, sampled from the hero photography */
  --sky-top:#CA8D92;
  --sky-mid:#E5C4BD;
  --sky-low:#F0D9C9;
  --sky-base:#F2DFCE;

  /* Surfaces: a short ladder, each a touch lighter than the floor */
  --surface-0:#F6E8DC;
  --surface-1:#FAF0E6;
  --surface-2:#FFF7F0;

  /* Ink: warm plum near-black, never #000. Alphas for hierarchy. */
  --ink:#2E1F24;
  --ink-90:rgba(46,31,36,.90);
  --ink-70:rgba(46,31,36,.70);
  --ink-55:rgba(46,31,36,.72);   /* audited: 4.8:1 on sky-mid, 5.4:1 on cream */
  --hairline:rgba(46,31,36,.12);
  --hairline-strong:rgba(46,31,36,.22);

  /* Accent: a spark, not a surface. The deeper value is for any surface
     carrying white text; it clears 5:1 where #FF0057 only reaches 3.9:1. */
  --pink:#FF0057;
  --pink-deep:#DB0049;

  /* Radius family: pills, cards, inputs. Nothing else. */
  --r-pill:9999px;
  --r-card:18px;
  --r-input:12px;

  /* One light source, top-left. Shadows tinted to the plum. */
  --shadow-1:0 1px 2px rgba(46,31,36,.05),0 4px 10px rgba(46,31,36,.05);
  --shadow-2:0 2px 4px rgba(46,31,36,.05),0 10px 24px rgba(46,31,36,.08);
  --shadow-3:0 4px 8px rgba(46,31,36,.05),0 22px 48px rgba(46,31,36,.12);
  --float-shadow:drop-shadow(0 24px 28px rgba(74,45,54,.22));

  /* Fluid spacing ladder, shared by type and space */
  --space-2xs:clamp(8px,1vw,12px);
  --space-xs:clamp(12px,1.5vw,16px);
  --space-s:clamp(16px,2vw,24px);
  --space-m:clamp(24px,3vw,40px);
  --space-l:clamp(40px,5vw,64px);
  --section:clamp(72px,9vw,120px);

  /* Legacy aliases used across older rules */
  --paper:transparent;
  --paper-2:var(--surface-0);
  --cream:var(--surface-2);
  --cream-2:var(--surface-0);
  --black:var(--ink);
  --ink-2:var(--ink-70);
  --grey:var(--ink-55);
  --grey-2:var(--ink-55);
  --line:var(--hairline);
  --white:var(--surface-2);
}

/* ---------- The canvas ----------
   background-attachment:fixed is broken on iOS, so the sky is a fixed
   layer behind the page. No filters, so it costs almost nothing. */
html{background:var(--sky-base)}
body{color:var(--ink);position:relative;min-height:100dvh;
  /* Rose lives at the top of the page and settles into cream well before the
     first fold ends, so long pages don't turn everything below into a wash. */
  background:
    radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.26),transparent 60%),
    linear-gradient(180deg,var(--sky-top) 0px,var(--sky-mid) 620px,var(--sky-low) 1200px,var(--sky-base) 1800px)}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--sky-base)}
/* Grain at ~4% kills banding on the long gradient */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0 0.14 0 0 0 0.55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");background-size:160px 160px;
}

/* ---------- Ambient drift: transform only, very slow ---------- */
.sky-drift{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky-drift i{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 68%);
  will-change:transform}
.sky-drift i:nth-child(1){width:70vw;height:70vw;left:-18vw;top:-14vh;animation:driftA 36s ease-in-out infinite alternate}
.sky-drift i:nth-child(2){width:56vw;height:56vw;right:-16vw;top:38vh;opacity:.7;
  background:radial-gradient(circle at 50% 50%,rgba(255,222,230,.65),rgba(255,222,230,0) 68%);
  animation:driftB 44s ease-in-out infinite alternate}
@keyframes driftA{to{transform:translate3d(7vw,5vh,0) scale(1.06)}}
@keyframes driftB{to{transform:translate3d(-8vw,-6vh,0) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.sky-drift i{animation:none}}

/* ---------- Type ----------
   Anton earns its size at hero and section level only. Slight positive
   tracking and ink-90 take the edge off against the soft canvas. */
h1,h2,h3,.h2{color:var(--ink-90);letter-spacing:.01em}
.hero h1{font-size:clamp(2.75rem,8vw,6rem);line-height:.95;letter-spacing:.012em}
.section .head h2,.head h2{font-size:clamp(1.75rem,4vw,3rem);line-height:.98}
body,p,li{color:var(--ink)}
.lede,.muted,.card .sub,.head p{color:var(--ink-70)}
.hero .lede,.hero .meta,.hero .meta span,.hero .season,.hero .link{color:var(--ink)}
.n,.kicker,.season,.small-label,.pmeta,.ptype{color:var(--ink-55)}
.section{padding-block:var(--section)}
.section.tight{padding-block:var(--space-l)}
.wrap{padding-inline:clamp(18px,4vw,40px)}

/* Section separation: rhythm first, a single hairline where needed */
.head{border-bottom:1px solid var(--hairline);padding-bottom:var(--space-s);margin-bottom:var(--space-m)}
.hr,.stat-row,.pinfo .trust,.faq-list .acc,.acc,.footer .bottom,.hero .meta,.bag-item{border-color:var(--hairline)}

/* ---------- Chrome: the only glass on the site ----------
   Sticky (not fixed) so iOS doesn't re-blur every frame. Both prefixes.
   No will-change. Alpha stays low so it still reads as glass. */
.announce{background:var(--pink-deep);height:32px}
.header{
  position:sticky;top:0;color:var(--ink);
  background:rgba(246,232,220,.22);
  -webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
  border-bottom:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);will-change:auto}
@media (min-width:1024px){.header{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}}
.header.stuck{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 24px rgba(46,31,36,.06)}
.header .brand-img{content:url("../img/logo-dark.png?v=4b3ab782")}
.header .icon-btn,.header .burger{color:var(--ink)}
.nav a{color:var(--ink);letter-spacing:.12em}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a::after{background:var(--pink)}
.mega{background:rgba(250,240,230,.92);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid var(--hairline);box-shadow:var(--shadow-3);color:var(--ink)}
.mega-label,.mega-links a{color:var(--ink)!important}
.mtile{border-radius:var(--r-card);background:var(--surface-0);color:var(--ink)!important;box-shadow:var(--shadow-1);border:1px solid var(--hairline)}
.mtile-go{color:var(--pink)}
.setup{background:rgba(255,255,255,.45);border-bottom:1px solid var(--hairline);color:var(--ink-70)}

/* Filter bar: the third and last glass surface */
.toolbar{background:rgba(246,232,220,.22);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
  border-color:var(--hairline);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.toolbar .tbtn,.toolbar select{border-radius:var(--r-pill);background:var(--surface-1);border:1px solid var(--hairline);color:var(--ink)}

/* ---------- Drawers, modals, bars: solid surfaces, no blur on fixed elements ---------- */
.drawer .panel,.modal-box,.sf-box,.buybar{background:var(--surface-1);color:var(--ink);box-shadow:var(--shadow-3)}
.drawer .panel{border-radius:0}
.modal-box,.sf-box{border-radius:var(--r-card);border:1px solid var(--hairline)}
.buybar{border-top:1px solid var(--hairline)}
.scrim{background:rgba(46,31,36,.38)}
#MenuDrawer .panel{background:var(--surface-1);color:var(--ink)}
#MenuDrawer .panel::before{display:none}
#MenuDrawer .brand-img{content:url("../img/logo-dark.png?v=4b3ab782")}
#MenuDrawer .close,#MenuDrawer .menu li a,#MenuDrawer .menu li summary{color:var(--ink);border-bottom-color:var(--hairline)}
#MenuDrawer .menu-sub{border-bottom-color:var(--hairline)}
#MenuDrawer .menu-sub li a{color:var(--ink-70)}
#MenuDrawer .menu-foot{color:var(--ink-55);border-top-color:var(--hairline)}
#MenuDrawer .menu-foot a{color:var(--ink)}
#MenuDrawer .social-row a{border-color:var(--hairline-strong);color:var(--ink)}
.menu-tiles .mtile{background:var(--surface-2)}
.toast{border-radius:var(--r-pill);background:var(--ink);color:var(--surface-2);box-shadow:var(--shadow-3)}
.dm-fab{border-radius:var(--r-pill);background:var(--ink);color:var(--surface-2);box-shadow:var(--shadow-3)}

/* ---------- Buttons and inputs ---------- */
.btn{border-radius:var(--r-pill);letter-spacing:.12em}
.btn.pink{background:var(--pink-deep);border-color:var(--pink-deep);box-shadow:0 8px 20px rgba(219,0,73,.22)}
.btn.pink::after{background:var(--ink)}
.btn.ghost{background:var(--surface-1);border:1px solid var(--hairline-strong);color:var(--ink);box-shadow:none}
.btn.ghost::after{background:var(--ink)}
.btn.light{background:var(--surface-2);color:var(--ink);border-color:var(--surface-2)}
.btn.light::after{background:var(--pink)}
.btn.light:hover{color:#fff}
.btn:not(.pink):not(.ghost):not(.light){background:var(--ink);color:var(--surface-2);border-color:var(--ink)}
input:not([type=checkbox]):not([type=radio]),select,textarea,.field input,.field textarea,.pers-fields input,.sf-input input{
  border-radius:var(--r-input)!important;background:var(--surface-2)!important;border:1px solid var(--hairline-strong)!important;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pink);outline-offset:2px;border-color:var(--pink)!important}
.check .box{border-radius:6px;border-color:var(--hairline-strong);background:var(--surface-2)}
.opt .pill,.pills .pill{border-radius:var(--r-input);background:var(--surface-2);border:1px solid var(--hairline-strong);color:var(--ink)}
.opt .pill.on,.pills .pill.on{background:var(--ink);color:var(--surface-2);border-color:var(--ink)}
.opt .pill.out{background:transparent;color:var(--ink-55)}
.chip,.club-chip{border-radius:var(--r-pill);background:var(--surface-1);border:1px solid var(--hairline);color:var(--ink)}
.icon-btn .count{border-radius:var(--r-pill)}

/* ---------- Cards: image zone above, text zone below, never overlaid ---------- */
.card .ph{border:0;border-radius:var(--r-card);background:var(--surface-0);box-shadow:var(--shadow-2);overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.card .ph img{border-radius:var(--r-card)}
.card .ph svg{filter:var(--float-shadow)}
.card .add{border-radius:var(--r-input);background:var(--ink);color:var(--surface-2)}
.badge{border-radius:var(--r-pill);padding:6px 12px}
.card .name{color:var(--ink)}
.card .price{color:var(--ink)}

/* Collection tiles: art on a surface, copy on a hairline-bordered zone */
.col{border-radius:var(--r-card);overflow:hidden;background:var(--surface-1);color:var(--ink);
  border:1px solid var(--hairline);box-shadow:var(--shadow-2);aspect-ratio:auto;padding:0;display:flex;flex-direction:column}
.col::after{display:none}
.col .art{position:relative;display:block;aspect-ratio:4/3;background:var(--surface-0);overflow:hidden}
.col .art svg{position:absolute;left:50%;top:52%;right:auto;bottom:auto;height:86%;width:auto;transform:translate(-50%,-50%);filter:var(--float-shadow);opacity:1}
.col .col-body{padding:var(--space-s) var(--space-s) var(--space-m);border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:6px}
.col .n{color:var(--ink-55);margin:0 0 2px}
.col h3{color:var(--ink);max-width:none;font-size:clamp(24px,4vw,34px)}
.col p{color:var(--ink-70);opacity:1;margin:0 0 10px}
.col .link{color:var(--ink);margin-top:auto}
@media (min-width:860px){.col{aspect-ratio:auto;padding:0}.col .art svg{height:88%}}

/* ---------- Former dark blocks: now they live on the canvas ---------- */
.drop,.why,.phead,.tagband,.edit .panel,.final,.about-hero{background:transparent;color:var(--ink);box-shadow:none;border-radius:0;margin:0;max-width:none}
.drop::before,.drop::after,.phead::before,.phead::after,.why::before,.why::after{display:none}

.drop{padding-block:var(--section);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.drop h2{color:var(--ink-90)}
.drop p{color:var(--ink-70)}
.drop .live{color:var(--pink)}
.countdown .unit{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-input);box-shadow:var(--shadow-1)}
.countdown b{color:var(--ink)}
.countdown span,.cd-label{color:var(--ink-55)}
.drop-form input[type=email]{background:var(--surface-2)!important;color:var(--ink);border:1px solid var(--hairline-strong)!important}
.drop-form input[type=email]::placeholder{color:var(--ink-55)}
.drop-consent{color:var(--ink-55)}

.why{color:var(--ink);padding-block:var(--section)}
.why .wrap{padding-block:0}
.why h2,.why .item h3{color:var(--ink-90)}
.why .item p{color:var(--ink-70)}
.why .item{border-color:var(--hairline)}
.why .item .ic{color:var(--pink)}

.phead{padding-block:var(--space-l) var(--space-m)}
.phead h1{color:var(--ink-90);font-size:clamp(2.5rem,8vw,5.5rem)}
.phead .lede{color:var(--ink-70)}
.phead .crumbs,.phead .crumbs a{color:var(--ink-55)}
.phead .crumbs [aria-current]{color:var(--ink)}
.phead .season{color:var(--ink-55)}
.phead .ghost-word{display:none}

.tagband{padding-block:var(--space-l);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.tagband h3,.tagband .values h3{color:var(--ink-90)}
.tagband p,.tagband .values p{color:var(--ink-70)}
.values > div{border-color:var(--hairline)}

.edit .panel{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-2);color:var(--ink)}
.edit .panel .quote{color:var(--ink)}
.edit .panel .sig{color:var(--ink-55)}
.edit .panel .crown{color:var(--pink)}
.stat b{color:var(--ink)}
.stat span{color:var(--ink-55)}

.marquee{background:transparent;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);color:var(--ink-70)}
.marquee span::after{background:var(--pink)}
.bigmark{background:transparent;padding:0}
.bigmark span{color:transparent;-webkit-text-stroke:1px rgba(46,31,36,.10);padding:var(--space-m) 0 0}

/* Final band: the photo fades into the canvas at top and bottom */
.final{color:var(--ink);min-height:auto;padding-block:var(--space-l)}
.final .media img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);object-position:70% 50%}
@media (max-width:760px){.final .media img{object-position:18% 50%}}
.final .shade{background:linear-gradient(180deg,rgba(242,223,206,.55),rgba(242,223,206,.10) 35%,rgba(242,223,206,.10) 65%,rgba(242,223,206,.6))}
.final h2{color:var(--ink-90);text-shadow:none}
.final p{color:var(--ink-70)}
.final .btn{background:var(--ink);color:var(--surface-2);border-color:var(--ink)}

.about-hero .shade{background:linear-gradient(180deg,rgba(242,223,206,.25),rgba(242,223,206,.72))}
.about-hero h1{color:var(--ink-90)}
.about-hero .season{color:var(--ink-70)}

/* Journal */
.story{border-radius:var(--r-card);background:var(--surface-1);border:1px solid var(--hairline);box-shadow:var(--shadow-1);padding:var(--space-s);color:var(--ink)}
.story.big{background:var(--surface-2)}
.story h3{color:var(--ink)}
.story p{color:var(--ink-70)}
.story .kicker{color:var(--pink)}
.story .link{color:var(--ink)}

/* Club and static page furniture */
.club-facts,.note-card,.club-card,.personalise,.delivery,.sf-opt,.how,.faq-side .btn{border-radius:var(--r-card)}
.club-facts,.note-card,.club-card,.personalise,.delivery,.sf-opt{background:var(--surface-1);border:1px solid var(--hairline);box-shadow:var(--shadow-1)}
.note-year{color:var(--pink)}
.vstrip{background:transparent;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.vstrip .v{background:transparent;border-radius:0}
.vstrip .v b{color:var(--ink)}
.vstrip .v small{color:var(--ink-55)}
.vstrip .v .ic{color:var(--pink)}

/* Footer: continue the canvas, one hairline above */
.footer{background:transparent;border-top:1px solid var(--hairline);border-radius:0;margin-top:var(--space-m);color:var(--ink)}
.footer h4{color:var(--ink)}
.footer a,.footer p{color:var(--ink-70)}
.footer a:hover{color:var(--ink)}
.footer .bottom{border-top-color:var(--hairline)}
.footer .news input{background:var(--surface-2)!important}
.footer .brand-img{content:url("../img/logo-stack.png?v=4b3ab782")}

/* ---------- Product page ---------- */
.gallery-main{background:transparent;border:0;box-shadow:none}
.gallery-main .slide img{filter:var(--float-shadow)}
.thumbs .thumb{border-radius:var(--r-input);background:var(--surface-0);border:1px solid var(--hairline);box-shadow:none}
.thumbs .thumb.on{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--pink)}
.gcount{border-radius:var(--r-pill);background:var(--ink);color:var(--surface-2)}
.gal-arrow{border-radius:50%;background:var(--surface-2);border:1px solid var(--hairline);box-shadow:var(--shadow-1);color:var(--ink)}
.pghost{-webkit-text-stroke:1px rgba(46,31,36,.07)}
.pinfo h1{color:var(--ink-90)}
.pinfo .price{color:var(--ink)}
.kdot{background:var(--pink)}
.pinfo .kicker{color:var(--ink-55)}
.finalsale,.pers-note{color:var(--ink-55)}
.finalsale a,.pers-note b{color:var(--ink)}

/* ---------- Floating imagery: small amplitude, long duration, staggered ---------- */
@keyframes floatIdle{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
.hero .frame{background:transparent;border-radius:var(--r-card);overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 100% at 55% 50%,#000 58%,transparent 100%);
  mask-image:radial-gradient(120% 100% at 55% 50%,#000 58%,transparent 100%)}
@media (hover:hover) and (pointer:fine){
  .card:hover .ph{transform:translateY(-5px);box-shadow:var(--shadow-3)}
}

/* ---------- Reveal: short, opacity + small translate ---------- */
.reveal{transform:translateY(14px);transition-duration:.6s;transition-timing-function:cubic-bezier(.25,.46,.45,.94)}

/* Small pink text can't reach 4.5:1 on cream, so small labels use ink with a pink marker */
.badge.pink,.icon-btn .count{background:var(--pink-deep)}
.drop .live{color:var(--ink)}
.drop .live i{background:var(--pink)}
.story .kicker{color:var(--ink);padding-left:14px;position:relative}
.story .kicker::before{content:"";position:absolute;left:0;top:50%;width:8px;height:2px;background:var(--pink)}
.mtile-go{color:var(--ink)}
.mtile-go .ic{color:var(--pink)}
.small-label{color:var(--ink-55)}
.kicker{color:var(--ink-55)}
.col.c-1,.col.c-2,.col.c-3{background:var(--surface-1);color:var(--ink)}
.col.c-1 .art,.col.c-2 .art,.col.c-3 .art{background:var(--surface-0)}
.col.c-1 h3,.col.c-2 h3,.col.c-3 h3,.col.c-1 .link,.col.c-2 .link,.col.c-3 .link{color:var(--ink)}
.col.c-1 p,.col.c-2 p,.col.c-3 p{color:var(--ink-70)}

/* Delivery summary inside "why": a surface card, not a dark inset */
.ship{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.ship .lead{color:var(--ink-90)}
.ship .lead small,.ship dt{color:var(--ink-55)}
.ship dd{color:var(--ink)}

/* Review meta: small text stays ink, the pink lives in the stars */
.rev .who .v{color:var(--ink-55)}
.rev{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.rev .q{color:var(--ink)}
.rev .who{color:var(--ink-70)}

/* Closing band dissolves on all four edges so it never reads as a slab */
.final .media img{
  -webkit-mask-image:radial-gradient(115% 95% at 50% 50%,#000 40%,transparent 92%);
  mask-image:radial-gradient(115% 95% at 50% 50%,#000 40%,transparent 92%)}
.final .shade{background:radial-gradient(100% 80% at 50% 50%,rgba(242,223,206,.05),rgba(242,223,206,.55) 85%)}

/* The header is built by JavaScript. Hold its height before it arrives,
   otherwise the whole page drops by ~93px on first paint. */
#site-header:empty{display:block;min-height:93px}
@media (min-width:1024px){#site-header:empty{min-height:109px}}

/* ==================================================================
   FILTER BAR
   No glass, no band. The bar itself is invisible; the two controls are
   solid pills that float over the grid when the bar is stuck.
   ================================================================== */
.toolbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;
  margin:0 0 var(--space-s);padding:var(--space-xs) 0;pointer-events:none}
.toolbar > *{pointer-events:auto}
.toolbar .count,.toolbar #count{color:var(--ink-70);font-size:13px;font-weight:500}
.toolbar-right{display:flex;gap:8px}
.toolbar .tb-btn,.toolbar .sort select{height:44px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--hairline);
  box-shadow:var(--shadow-1);color:var(--ink);font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0 18px}
.toolbar .sort{position:relative}
.toolbar .sort select{padding-right:40px;appearance:none;-webkit-appearance:none}
.toolbar .sort .ic{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;color:var(--ink)}
.toolbar .tb-btn .n{background:var(--ink);color:var(--surface-2);border-radius:var(--r-pill);min-width:18px;height:18px;font-size:10px;display:inline-grid;place-items:center;padding:0 5px;margin-left:8px}
@media (max-width:520px){
  .toolbar{flex-wrap:wrap}
  .toolbar .count{width:100%;order:-1;margin-bottom:6px}
}
.active-filters{margin-top:-4px;margin-bottom:var(--space-s)}

/* ==================================================================
   TRUST STRIP
   One quiet row. Icon, label, detail. Hairline above and below,
   hairline between cells. Nothing bold competing with the section titles.
   ================================================================== */
.vstrip{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:transparent;margin:0}
.vstrip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;padding-block:0}
@media (min-width:860px){.vstrip .wrap{grid-template-columns:repeat(4,1fr)}}
.vstrip .v{display:flex;gap:12px;align-items:flex-start;padding:18px 16px 18px 0;border:0;background:transparent;border-radius:0;min-height:0}
.vstrip .v + .v{padding-left:16px;border-left:1px solid var(--hairline)}
@media (max-width:859px){
  .vstrip .v:nth-child(3){border-left:0;padding-left:0}
  .vstrip .v:nth-child(n+3){border-top:1px solid var(--hairline)}
}
.vstrip .v .ic{width:18px;height:18px;flex:none;margin-top:2px;color:var(--pink);stroke-width:1.8}
.vstrip .v b{display:block;font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.3}
.vstrip .v small{display:block;font-size:12.5px;color:var(--ink-55);margin-top:3px;line-height:1.4}
.toolbar .count,.toolbar #count{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--hairline);box-shadow:var(--shadow-1);color:var(--ink-70);font-size:12.5px;font-weight:600;letter-spacing:.02em}
@media (max-width:520px){.toolbar .count{width:auto;order:0;margin-bottom:0}}

/* Reserve the JavaScript-filled grids on the collections and club pages */
#cols:empty{min-height:1357px}
@media (min-width:700px) and (max-width:1023px){#cols:empty{min-height:402px}}
@media (min-width:1024px){#cols:empty{min-height:535px}}
#club-grid:empty{min-height:344px}
@media (min-width:700px){#club-grid:empty{min-height:414px}}
@media (min-width:1024px){#club-grid:empty{min-height:513px}}
#posts:empty{min-height:757px}
@media (min-width:700px) and (max-width:1023px){#posts:empty{min-height:523px}}
@media (min-width:1024px){#posts:empty{min-height:587px}}
#recs-grid:empty,#recent-grid:empty{min-height:340px}
#article:empty{min-height:1402px}
@media (min-width:700px) and (max-width:1023px){#article:empty{min-height:1120px}}
@media (min-width:1024px){#article:empty{min-height:1312px}}
#cart-root:empty{min-height:244px}
.banner{min-height:auto;padding-block:var(--space-l) var(--space-m)}
.banner .wrap{padding-block:0}
.banner h1{margin-bottom:var(--space-xs)}
.banner p{max-width:52ch}
/* Collection banner: sits tight above the filter bar */
.col-banner{padding-block:var(--space-m) var(--space-xs);min-height:auto}
.col-banner .content{padding-block:0}
.collection-main{padding-top:var(--space-xs)}

/* ==================================================================
   POLISH PASS
   ================================================================== */

/* Search drawer: one pill input, suggestions directly beneath it */
.search-box{border:1px solid var(--hairline-strong);border-radius:var(--r-pill);background:var(--surface-2);padding:0 8px 0 16px;height:52px;margin-bottom:var(--space-s)}
.search-box .ic{color:var(--ink-55);width:18px;height:18px;flex:none}
.search-box input{height:100%;background:transparent!important;border:0!important;border-radius:0!important;padding:0;font-size:16px}
.search-box input:focus{outline:none;box-shadow:none}
.search-box:focus-within{border-color:var(--ink)}
#SearchDrawer .menu-foot{margin-top:0;padding-top:0;border-top:0}
#SearchDrawer .popular .small-label{margin:var(--space-xs) 0 6px}
#SearchDrawer .popular a{display:block;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:15px;color:var(--ink)}
#SearchDrawer .popular a:last-child{border-bottom:0}
.predictive:empty{display:none}

/* Footer newsletter: a single pill group, no outer box */
.nl-form{display:flex;gap:6px;border:0;padding:0;background:transparent;box-shadow:none}
.nl-form input[type=email]{flex:1;height:48px;padding:0 16px;min-width:0}
.nl-form .btn{height:48px;padding:0 20px;background:var(--ink);color:var(--surface-2);border-color:var(--ink);white-space:nowrap}

/* Journal cards: one surface, sized to content, feature card no longer a different tone */
.culture{align-items:start}
.story,.story.big{background:var(--surface-1)}
.story .link{margin-top:var(--space-xs)}
.culture .story{min-height:0}
@media (min-width:860px){.culture .story{border-left:0;padding:var(--space-s)}}
.blog-grid .story{border-top:1px solid var(--hairline);padding:var(--space-s)}

/* Closing band: mask the container as well as the image, so the edge is soft
   on every engine, and keep it short */
.final .media{
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 38%,transparent 90%);
  mask-image:radial-gradient(120% 100% at 50% 50%,#000 38%,transparent 90%)}
.final{min-height:0;padding-block:var(--space-l) var(--space-m)}
.final .content{padding:var(--space-l) var(--gutter)}

/* All three journal cards are identical cards */
.story,.story.big,.culture .story,.culture .story:first-child{border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--surface-1);box-shadow:var(--shadow-1);padding:var(--space-s);margin:0}

/* ==================================================================
   HEADER: transparent over the sky, pill controls, primary lockup
   ================================================================== */
.header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;box-shadow:none;
  transition:background .3s,transform .34s cubic-bezier(.2,.8,.2,1)}
/* Once scrolled, a rose tint (never white) keeps content from colliding with the controls */
.header.stuck{background:rgba(202,141,146,.78);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.28);box-shadow:0 8px 24px rgba(46,31,36,.08)}
.header .brand-img{content:url("../img/logo-light.png?v=4b3ab782");filter:drop-shadow(0 2px 8px rgba(46,31,36,.22))}
.header .icon-btn,.header .burger{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.65);color:var(--ink);box-shadow:0 2px 8px rgba(46,31,36,.08);margin:0}
.header .burger{justify-self:start;margin-left:0}
.header .icons{gap:8px}
.header .icon-btn .count{top:-4px;right:-4px}
@media (min-width:1024px){
  .nav{gap:2px;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-pill);height:44px;align-self:center;padding:0 6px;box-shadow:0 2px 8px rgba(46,31,36,.06)}
  .nav a{height:100%;padding:0 14px;color:var(--ink);font-size:11px}
  .nav a::after{bottom:12px;left:14px;right:14px}
}
.mega{margin-top:0}

/* Search input: the pill is the container, the input has no chrome of its own */
#SearchDrawer .search-box input,#SearchDrawer .search-box input[type=search]{border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:0}
#SearchDrawer .search-box input:focus{outline:none!important;border:0!important}
#SearchDrawer .search-box input::-webkit-search-decoration,#SearchDrawer .search-box input::-webkit-search-cancel-button{-webkit-appearance:none}
#SearchDrawer .search-box:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,0,87,.15)}

/* Request page panel sits on a dark photo: all its text must be light */
.how-in,.how-in *,.how-steps li,.how-steps b,.how-steps span,.how-foot{color:var(--surface-2)}
.how-steps span{color:rgba(255,247,240,.78)}
.how-n{color:rgba(255,247,240,.55)}
.how-label{color:#FF8FB1}

/* Journal: one voice for every card title, a proper meta row */
.blog-grid .story.feature h3{font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(22px,3vw,30px);line-height:1.15;max-width:24ch}
.blog-grid .story.feature p{font-size:15px}
.blog-grid .story.feature{padding:var(--space-s)}
.story h3{font-weight:700;letter-spacing:-.01em}
.story .link{display:inline-flex;align-items:center}
.story time,.story .date{font-size:12.5px;color:var(--ink-55);margin-left:14px}
.story .kicker{margin-bottom:10px}
@media (min-width:1024px){
  .nav{justify-self:center;width:max-content}

  .mtile-art{width:40%;right:5%;top:10%;left:auto}
  .mtile b,.mtile-go{max-width:52%}
}

/* ==================================================================
   HEADER: transparent on the sky, pill controls, rose tint when stuck
   ================================================================== */
.header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;box-shadow:none;transition:background .3s,transform .34s cubic-bezier(.2,.8,.2,1)}
/* The header stays transparent at every scroll position. The pill controls and
   the lockup carry their own contrast, so nothing needs a bar behind it. */
.header.stuck{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
/* A very soft scrim only under the lockup keeps it readable over dark product photos */
.header .brand{position:relative}
/* The lockup gets its own soft pill so it reads over any colour beneath */
.header .brand::before{content:"";position:absolute;inset:-9px -18px;z-index:-1;border-radius:var(--r-pill);
  background:rgba(255,247,240,.72);-webkit-backdrop-filter:blur(6px) saturate(130%);backdrop-filter:blur(6px) saturate(130%);
  border:1px solid rgba(46,31,36,.08);box-shadow:0 2px 8px rgba(46,31,36,.06);opacity:0;transition:opacity .28s}
.header.stuck .brand::before{opacity:1}
.header .icon-btn,.header .burger{width:42px;height:42px;border-radius:var(--r-pill);background:rgba(255,247,240,.72);border:1px solid rgba(46,31,36,.10);
  box-shadow:0 2px 8px rgba(46,31,36,.06);color:var(--ink);display:grid;place-items:center;margin:0}
.header .icons{gap:8px}
.header .burger{justify-self:start}
.header .icon-btn .count{top:-4px;right:-4px}
.header .brand-img{content:url("../img/logo-dark.png?v=4b3ab782");height:30px}
@media (min-width:1024px){.header .brand-img{height:36px}}
.nav a{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.header .icon-btn:hover,.header .burger:hover{background:var(--surface-2);transform:none}}
/* the setup notice sits under the header and should not look like a band */
.setup{background:transparent;border-bottom:0;color:var(--ink-55);font-size:11px}

/* Search input: the inner field must have no border of its own */
.search-box input[type=search]{border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;outline:none!important;height:100%;padding:0}
.search-box input[type=search]:focus{outline:none!important;box-shadow:none!important;border:0!important}
.search-box input[type=search]::-webkit-search-decoration,.search-box input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* Journal cards: cover art above, copy below, all three identical */
.story{display:flex;flex-direction:column;padding:0;overflow:hidden}
.story-art{display:block;aspect-ratio:16/9;position:relative;overflow:hidden}
.story-art svg{position:absolute;left:50%;top:50%;height:96%;width:auto;transform:translate(-50%,-50%);filter:var(--float-shadow)}
.story-body{display:flex;flex-direction:column;padding:var(--space-s);gap:8px;border-top:1px solid var(--hairline)}
.story h3,.blog-grid .story.feature h3,.culture .story.big h3{font-family:var(--body);font-weight:700;text-transform:none;font-size:clamp(18px,2.2vw,22px);line-height:1.2;letter-spacing:-.01em;max-width:none;margin:0}
.story p{margin:0;font-size:14px;line-height:1.55}
.story-meta{display:flex;align-items:center;gap:14px;margin-top:6px}
.story-meta .muted{color:var(--ink-55);font-size:12px}
.blog-grid{display:grid;gap:14px}
@media (min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (min-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-grid .story.feature{grid-column:auto;padding:0}
.culture{display:grid;gap:14px}
@media (min-width:860px){.culture{grid-template-columns:repeat(3,1fr);gap:18px}.culture .story{padding:0}}

/* Request page panel: photo above, steps below, nothing overlaid */
.how{display:flex;flex-direction:column;min-height:0;background:var(--surface-1);border:1px solid var(--hairline);box-shadow:var(--shadow-2)}
.how::after{display:none}
.how-img{display:block;aspect-ratio:4/3;overflow:hidden;position:relative}
.how-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.how-in{position:static;align-self:auto;color:var(--ink);padding:var(--space-s);border-top:1px solid var(--hairline)}
.how-label{color:var(--ink-55)}
.how-n{color:var(--pink)}
.how-steps b{color:var(--ink)}
.how-steps span{color:var(--ink-70)}
.how-foot{border-top-color:var(--hairline);color:var(--ink-55)}
.split-form{gap:var(--space-l)}
.split-form .split-copy + *{margin-top:var(--space-m)}

/* Section-level fills that would hide the sky. Cards and controls keep their surfaces. */
.hero,.edit,.reviews,.tagband,.trust,.bg-white,.section.bg-white{background:transparent}
.edit{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.reviews{padding-block:var(--section)}
/* the filter drawer's sticky footer needs a real surface to cover scrolling content */
#FilterDrawer .filter-foot{background:var(--surface-1)}
/* cart summary and form success panels join the card family */
.cart-summary,.form-ok.big{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface-1);box-shadow:var(--shadow-1)}
.eta{border-radius:var(--r-input);background:var(--surface-2);border:1px solid var(--hairline)}
.form .file{border-radius:var(--r-input);background:var(--surface-2)}
.pay span{border-radius:6px;background:var(--surface-2);border:1px solid var(--hairline)}
.pick{border-radius:var(--r-input);background:var(--surface-2);border:1px solid var(--hairline-strong)}
/* The headline accent can't be pink on rose (1.6:1). Ink with a pink rule reads and keeps the brand moment. */
.hero h1 em,.hero h1 em span{color:var(--ink-90)}
.hero h1 em span{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:.07em;text-underline-offset:.1em}
.story h3,.blog-grid .story h3,.culture .story h3{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.story:hover h3{color:var(--pink-deep)}}
.story-meta .link{margin-top:0}
.story-meta{align-items:baseline}
.story,.story.big,.culture .story,.culture .story:first-child,.blog-grid .story,.blog-grid .story.feature{padding:0}

/* ==================================================================
   SIZE POPOVER on cards: a proper sheet inside the card, no overlap
   ================================================================== */
.card{position:relative}
/* The picker sits over the image, never over the name and price */
.ph-wrap{position:relative;display:block}
.pick{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:6;
  background:rgba(255,247,240,.97);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-top:1px solid var(--hairline);border-radius:0 0 var(--r-card) var(--r-card);
  box-shadow:0 -10px 24px rgba(46,31,36,.10);padding:14px}
.pick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pick-head b,.pick .small-label{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.pick .pick-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pick .pick-opts .pill{min-width:0;width:100%;height:40px;border-radius:var(--r-input);
  background:var(--surface-1);border:1px solid var(--hairline-strong);color:var(--ink);font-size:13px;font-weight:600}
.pick .pill.out{opacity:.45}
.pick .pick-close{position:static;width:30px;height:30px;border-radius:var(--r-pill);background:transparent;border:0;color:var(--ink-55);display:grid;place-items:center}
/* while the picker is open the card's own quick-add is hidden, not layered under it */
.card:has(.ph-wrap .pick:not([hidden])) .add{opacity:0;pointer-events:none}

/* Filter drawer footer: real surface, safe-area aware, never over the inputs */
#FilterDrawer .panel{display:flex;flex-direction:column}
#FilterDrawer #filter-form{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
#FilterDrawer .filter-foot{position:sticky;bottom:0;z-index:3;margin:0 calc(var(--gutter) * -1);
  padding:14px var(--gutter);padding-bottom:max(14px,env(safe-area-inset-bottom));
  background:var(--surface-1);border-top:1px solid var(--hairline);box-shadow:0 -10px 24px rgba(46,31,36,.07)}
.filter-foot .btn{height:48px}

/* ==================================================================
   PRODUCT PAGE
   ================================================================== */
/* The ghost club name was a half-cropped word behind the gallery. Replaced by
   a proper eyebrow above the title, so nothing looks accidental. */
.pghost{display:none}
.gallery{padding-top:0}
.pclub{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}
.pclub::before{content:"";width:22px;height:2px;background:var(--pink)}

/* Gallery: the shirt floats on the sky, arrows only where there's a pointer */
.gallery-main{border-radius:var(--r-card);background:linear-gradient(180deg,rgba(255,247,240,.55),rgba(255,247,240,.20));
  border:1px solid var(--hairline);box-shadow:var(--shadow-2)}
.gallery-main .slide img{padding:6%}
.gal-arrow{width:44px;height:44px;opacity:0;transition:opacity .2s}
@media (hover:hover) and (pointer:fine){.gallery:hover .gal-arrow{opacity:1}}
@media (max-width:1023px){.gal-arrow{display:none}}
.gal-dots{bottom:14px}
.gal-dots span{width:6px;height:6px;border-radius:var(--r-pill);background:var(--hairline-strong)}
.gal-dots span.on{background:var(--ink);width:20px}
.thumbs{gap:8px;margin-top:10px}

/* Info column: clear hierarchy, generous rhythm */
.pinfo{display:flex;flex-direction:column;gap:0}
.pinfo h1{margin:10px 0 6px}
.pinfo-row{margin-bottom:var(--space-s)}
.pform{display:flex;flex-direction:column;gap:var(--space-s)}
.opt{margin:0}
.opt .opt-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.opt .pills{display:flex;flex-wrap:wrap;gap:8px}
.opt .pill{min-width:54px;height:46px;font-size:13.5px;font-weight:600}
.personalise{border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--surface-1);margin:0;overflow:hidden}
.personalise summary{padding:16px}
.pers-body{padding:0 16px 16px}
.buy-row{display:flex;gap:10px;align-items:stretch}
.qty{height:52px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);background:var(--surface-2);margin:0}
.buy-row .btn{flex:1;height:52px}
.eta{margin-top:var(--space-xs)}
.pinfo .trust{margin-top:var(--space-m);padding-top:var(--space-s);border-top:1px solid var(--hairline);display:grid;gap:12px}
.finalsale{margin-top:10px;font-size:12.5px;line-height:1.5}

/* Product page hierarchy: club, title, kit chip, then a clear price block */
.pinfo .pclub{margin-bottom:10px}
.ptype-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--surface-1);border:1px solid var(--hairline);color:var(--ink-70);
  font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.pinfo .price{font-size:clamp(30px,6vw,42px)}
.pinfo-row{padding-bottom:var(--space-s);border-bottom:1px solid var(--hairline)}

/* Accordions become cards so they stop reading as bare rules */
.pinfo .acc,.faq-list .acc{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface-1);
  margin-bottom:8px;overflow:hidden}
.pinfo .acc summary,.faq-list .acc summary{padding:16px}
.pinfo .acc .acc-body,.faq-list .acc .acc-body{padding:0 16px 16px}
.pinfo .acc[open]{background:var(--surface-2)}
.acc + .acc{border-top:1px solid var(--hairline)}

/* Trust list on the product page: icons aligned, generous line height */
.pinfo .trust{gap:14px}
.pinfo .trust li,.pinfo .trust > div{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-70)}
.pinfo .trust b{color:var(--ink)}
.pinfo .trust .ic{color:var(--pink);width:17px;height:17px;flex:none;margin-top:2px}

/* Recommendations heading sits on the same rhythm as the rest */
.recs .head{margin-bottom:var(--space-m)}
.ptype-chip{width:fit-content;align-self:flex-start}
/* Collection tile photography fills its zone */
.col .art{background:var(--surface-0)}
.col .col-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
/* Menu tiles carry the same photography as the collection cards */
.mtile-art{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--surface-0)}
.mtile-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.mtile{padding:8px;display:flex;flex-direction:column;gap:8px}
.mtile b{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:left}
.menu-tiles .mtile b{font-size:10.5px}
.story-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* Article hero image */
.article-hero{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hairline);box-shadow:var(--shadow-2);margin:var(--space-m) 0 var(--space-l);background:var(--surface-0)}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}

/* Menu tiles: photo on top in a fixed 4:3 frame, label beneath. No stretch. */
.mtile,.menu-tiles .mtile{aspect-ratio:auto;align-items:stretch;text-align:left;justify-content:flex-start}
.mtile-art{width:100%;left:auto;right:auto;top:auto;position:relative;aspect-ratio:4/3;flex:none}
.menu-tiles .mtile-art{width:100%;left:auto;right:auto;top:auto}
.mtile b{margin-top:2px}
/* Header grid holds four children: burger, brand, nav, icons */
.header .wrap{grid-template-columns:auto 1fr auto;grid-auto-flow:column}
@media (min-width:1024px){.header .wrap{grid-template-columns:auto auto 1fr auto;column-gap:22px}
  .header .brand{justify-self:start}
  .header .nav{justify-self:end}
  .header .icons{justify-self:end}}
@media (min-width:1024px){.header .burger{display:none}
  .header .wrap{grid-template-columns:auto 1fr auto}}

/* ==================================================================
   MENU TILES, final: the photo fills the whole tile, label sits on it
   ================================================================== */
.mtile,.menu-tiles .mtile{
  position:relative;display:block!important;padding:0!important;overflow:hidden;
  border-radius:var(--r-card);border:1px solid var(--hairline);box-shadow:var(--shadow-1);
  aspect-ratio:5/7;background:var(--surface-0);isolation:isolate}
.mtile-art{position:absolute!important;inset:0;width:100%!important;height:100%;aspect-ratio:auto;
  left:0!important;right:0!important;top:0!important;border-radius:0;z-index:0}
.mtile-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* a soft veil at the foot so the label always reads */
.mtile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,241,233,0),rgba(252,241,233,.92) 55%,rgba(252,241,233,1))}
.mtile b,.menu-tiles .mtile b{
  position:absolute;left:10px;right:10px;bottom:9px;z-index:2;margin:0;text-align:left;line-height:1.15;
  font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mtile-go{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:none}
/* the mega menu has room for the call to action under the label */
@media (min-width:1024px){
  .mtile{aspect-ratio:4/5}
  .mtile b{bottom:32px;font-size:11.5px}
  .mtile-go{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-70)}
  .mtile-go .ic{width:12px;height:12px;color:var(--pink)}
}

/* The header must be fixed to stay on screen; sticky only works within its
   short wrapper. It carries no blur, so fixed is safe on iOS. */
.header{position:fixed;left:0;right:0;top:0}
#site-header{min-height:93px}
@media (min-width:1024px){#site-header{min-height:109px}}

/* ==================================================================
   HEADER, corrected
   The ticker and the header travel together as one fixed unit, and the
   lockup needs no pill because the ticker sits above it at all times.
   ================================================================== */
#site-header{position:fixed;left:0;right:0;top:0;z-index:60;min-height:0}
#site-header .announce{position:relative;z-index:2}
.header{position:relative;left:auto;right:auto;top:auto;z-index:1}
/* Reserve the space the fixed unit would have taken */
body{padding-top:var(--header-total,93px)}
/* the fixed unit must never leave a seam under itself */
#site-header{background:transparent}
.header{margin-bottom:-1px}
@media (min-width:1024px){body{--header-total:109px}}
/* No pill behind the lockup: it never sits over product imagery now */
.header .brand::before{display:none}
/* Hide the whole unit, ticker included, when scrolling down */
.header.up{transform:none}
#site-header:has(.header.up){transform:translateY(-100%)}
#site-header{transition:transform .34s cubic-bezier(.2,.8,.2,1)}


/* ==================================================================
   HEADER
   Fixed. Transparent at the very top, solid rose once you scroll.
   Its height is measured in JS, so nothing can slide underneath.
   ================================================================== */
#site-header{position:fixed;left:0;right:0;top:0;z-index:60;min-height:0;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
#site-header .announce{position:relative;z-index:2}
.header{position:relative;left:auto;right:auto;top:auto;z-index:1;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;box-shadow:none;transition:background .3s ease}
body{padding-top:var(--header-total,93px)}

/* Once scrolled, the header takes the rose of the sky behind it */
.header.stuck{background:linear-gradient(180deg,#D5A1A6 0%,#D9A8AB 100%)}
.header.stuck .brand::before{display:none}
.header .brand::before{display:none}

/* The whole unit, ticker included, leaves on scroll down and returns on scroll up */
.header.up{transform:none}
#site-header:has(.header.up){transform:translateY(-100%)}

/* Legal pages: comfortable reading measure and clear hierarchy */
.rte.legal{max-width:68ch}
.rte.legal h3{font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:-.01em;
  margin:var(--space-m) 0 8px;color:var(--ink)}
.rte.legal h3:first-of-type{margin-top:var(--space-s)}
.rte.legal p{margin:0 0 12px;line-height:1.65;color:var(--ink)}
.rte.legal ul{margin:0 0 12px;padding-left:20px}
.rte.legal li{margin-bottom:8px;line-height:1.6}
.rte.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.rte.legal .tiny.muted{margin-bottom:var(--space-s);color:var(--ink-55)}

/* Footer legal links */
.footer .base{flex-wrap:wrap;gap:12px}
.legal-links{display:flex;gap:16px;flex-wrap:wrap}
.legal-links a{font-size:12.5px;color:var(--ink-70)}
.legal-links a:hover{color:var(--ink)}

/* ==================================================================
   CLUB FINDER
   Replaces the old daily-drop band. Built from the live catalogue, so
   the leagues, clubs and counts are always true.
   ================================================================== */
.drop{padding-block:var(--section);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.drop .head{border-bottom:0;padding-bottom:0;margin-bottom:var(--space-m)}
.drop .head .lede{max-width:52ch;margin-top:10px}

.finder{display:grid;gap:12px}
@media (min-width:640px){.finder{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (min-width:1024px){.finder{grid-template-columns:repeat(3,1fr);gap:16px}}

.finder-group{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);padding:var(--space-s);display:flex;flex-direction:column}
.finder-league{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;
  font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.finder-league span{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--surface-0);border:1px solid var(--hairline);
  font-size:10.5px;letter-spacing:.06em;color:var(--ink-70)}

.finder-clubs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.finder-clubs li + li{border-top:1px solid var(--hairline)}
.finder-clubs a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:46px;padding:4px 0;font-size:14.5px;font-weight:500;color:var(--ink);transition:color .18s}
.finder-clubs small{font-size:12px;color:var(--ink-55);font-variant-numeric:tabular-nums;flex:none}
@media (hover:hover) and (pointer:fine){
  .finder-clubs a:hover{color:var(--pink-deep)}
  .finder-clubs a:hover small{color:var(--pink-deep)}
}
.finder-skel{min-height:260px}
@media (min-width:1024px){.finder-skel{min-height:300px}}
.drop .cta{margin-top:var(--space-m);display:flex;align-items:center;gap:var(--space-s);flex-wrap:wrap}
/* Each league card sizes to its own content rather than stretching */
.finder{align-items:start}

/* ==================================================================
   OFFER: 3 for 2
   One mark, a progress state, and tiles that let people act without
   leaving the page. Restrained on purpose: it supports the buy, never
   dominates it.
   ================================================================== */
.offer-mark{display:inline-grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  line-height:1;background:var(--pink-deep);color:#fff;border-radius:var(--r-pill);
  padding:9px 14px 7px;font-size:15px;white-space:nowrap}
.offer-mark.sm{padding:6px 10px 4px;font-size:11.5px}

/* --- product page module --- */
.offer-mod{margin-top:var(--space-s);border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--surface-1);overflow:hidden}
.offer-mod-head{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid var(--hairline)}
.offer-mod-head b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25}
.offer-mod-head span{display:block;font-size:12.5px;color:var(--ink-70);line-height:1.4;margin-top:2px}
.offer-mod-body{padding:0 15px}
.offer-mod-body:empty{display:none}
.offer-terms{display:block;padding:11px 15px 13px;font-size:12px;color:var(--ink-55);text-decoration:underline;
  text-decoration-color:var(--hairline-strong);text-underline-offset:3px}

/* --- progress --- */
.offer-prog{padding:14px 0 4px}
.offer-mod-body .offer-prog{padding-top:14px}
.offer-prog-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.offer-prog-copy{flex:1;min-width:0;font-size:13.5px;line-height:1.35;color:var(--ink-70)}
.offer-prog-copy b{color:var(--ink);font-weight:700}
.offer-step{flex:none;font-size:12px;font-weight:600;color:var(--ink-55);font-variant-numeric:tabular-nums}
.offer-track{height:5px;border-radius:var(--r-pill);background:var(--hairline);overflow:hidden}
.offer-track i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ink);
  transition:width .45s cubic-bezier(.2,.8,.2,1)}
.offer-prog.is-on .offer-track i{background:var(--pink-deep)}
.offer-prog.is-on .offer-prog-copy b{color:var(--pink-deep)}

/* --- suggestion tiles, used in the module and the bag --- */
.sug-head{margin:14px 0 8px;font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.sug{display:flex;align-items:center;gap:12px;padding:9px 0;position:relative}
.sug + .sug{border-top:1px solid var(--hairline)}
.sug-art{width:54px;height:68px;flex:none;border-radius:10px;overflow:hidden;background:var(--surface-0);
  display:grid;place-items:center;position:relative}
.sug-art img{width:100%;height:100%;object-fit:cover}
.sug-art svg{width:100%;height:100%}
.sug-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sug-body b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sug-body small{font-size:12.5px;color:var(--ink-70)}
.sug-add{width:44px;height:44px;flex:none;border-radius:var(--r-pill);background:var(--ink);color:var(--surface-2);
  border:0;display:grid;place-items:center}
.sug-add svg{width:17px;height:17px}
.sug-sizes{position:absolute;right:0;bottom:calc(100% - 6px);z-index:5;display:flex;gap:5px;flex-wrap:wrap;
  max-width:230px;padding:9px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--hairline);box-shadow:var(--shadow-3)}
.sug-size{min-width:40px;height:38px;padding:0 10px;border-radius:10px;background:var(--surface-1);
  border:1px solid var(--hairline-strong);color:var(--ink);font-size:13px;font-weight:600}
@media (hover:hover) and (pointer:fine){.sug-size:hover{background:var(--ink);color:var(--surface-2);border-color:var(--ink)}}
.sug-wrap{padding-bottom:var(--space-xs);border-bottom:1px solid var(--hairline);margin-bottom:var(--space-xs)}

/* --- small roundel on eligible product cards --- */
.card-offer{position:absolute;right:10px;bottom:10px;z-index:3;
  font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,247,240,.92);border:1px solid var(--hairline);
  padding:5px 9px 3px;border-radius:var(--r-pill);line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Search landing state */
.search-start{margin-bottom:var(--space-s)}
.search-start .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.search-start .chip{padding:9px 14px;font-size:13.5px}

/* Touch targets: footer links, breadcrumbs and product names all reach 44px,
   which is the minimum comfortable size on a phone. */
.footer .links a,.footer nav a,.legal-links a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a,.crumbs span{display:inline-flex;align-items:center;min-height:44px}
.card .name{display:flex;align-items:flex-start;min-height:44px}
.footer li a{display:inline-flex;align-items:center;min-height:44px}
.sf-cta{min-height:44px;display:inline-flex;align-items:center;gap:7px}

/* Contrast fixes found by auditing the rendered pages */
/* The 3 for 2 mark was inheriting ink at 70%, which is unreadable on pink */
.offer-mark,.offer-mark.sm{color:#fff!important}
/* Hot pink fails at small sizes on light backgrounds; use the deeper pink */
.pers-price,.opt small,.personalise small,.pinfo small.pink,.price-add{color:var(--pink-deep)}
summary small{color:var(--pink-deep)}
/* Toast action link on the dark toast */
.toast a,.toast .link{color:#FFD7E3;text-decoration:underline;text-underline-offset:3px}
.personalise summary small{color:var(--pink-deep)!important}