/* Wondered — boutique design system. */
:root{
  --ink:#0b0a09; --ink2:#12100e; --bottle:#0f2f26; --gold:#c9a961; --ox:#6e1423; --bone:#efe9df; --ash:#a39c8f;
  --line:rgba(239,233,223,.12); --line2:rgba(201,169,97,.35);
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --ui:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1280px; --gut:clamp(16px,4vw,44px); --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font:400 15.5px/1.7 var(--ui);letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:10px;background:var(--gold);color:var(--ink);padding:8px 14px;z-index:99}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(44px,7vw,104px)} h2{font-size:clamp(32px,4.4vw,62px)} h3{font-size:clamp(20px,1.8vw,26px)}
h1 em,h2 em{font-style:italic;color:var(--gold)}
p{margin:0 0 1em}
.eyebrow{font:600 11px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--ash)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);font:600 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s,transform .4s var(--ease);cursor:pointer}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* announcement + nav */
.bar{background:var(--bottle);text-align:center;font:600 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;padding:11px var(--gut);color:var(--bone)}
.bar span+span::before{content:"·";margin:0 12px;color:var(--gold)}
@media (max-width:520px){.bar{letter-spacing:.12em;font-size:10px;padding:10px 8px}.bar span+span::before{margin:0 6px}}
.crumbs{font-size:12px;color:var(--ash);margin:18px 0;letter-spacing:.06em}.crumbs a{text-decoration:none;color:var(--ash)}.crumbs a:hover{color:var(--gold)}
.nav{position:sticky;top:0;z-index:40;background:rgba(11,10,9,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px}
#mainnav{display:flex;gap:26px;list-style:none;margin:0;padding:0}
#mainnav a{font:500 12px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--bone)}
#mainnav a:hover,#mainnav a[aria-current=page]{color:var(--gold)}
.mark{justify-self:center;display:block;width:132px}
.mark img{width:132px;height:auto}
.tools{justify-self:end;display:flex;gap:18px;align-items:center}
.bagbtn{background:none;border:0;color:var(--bone);font:500 12px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:8px 0}
.bagbtn b{color:var(--gold);font-weight:600}
.menu{display:none;background:none;border:0;color:var(--bone);font:500 12px var(--ui);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
@media (max-width:860px){
  /* `.nav #mainnav` (1-1-0), not `#mainnav` (1-0-0): a later id rule declares
     display:flex for the desktop bar and would otherwise win here, which left the
     full desktop nav on screen at 390px and scrolled the whole page sideways. */
  .nav #mainnav{display:none}.menu{display:block}
  .nav.open #mainnav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:68px;background:var(--ink);border-bottom:1px solid var(--line);padding:6px var(--gut) 14px}
  .nav.open #mainnav a{display:block;padding:14px 0;font-size:13px}
  .mark,.mark img{width:112px}
}

/* hero: landscape film full-bleed with the copy over its dark right side (>= 900 px); portrait film under the copy below that */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 106px);border-bottom:1px solid var(--line)}
.hero .copy{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(40px,6vw,96px) var(--gut) clamp(40px,6vw,96px) max(var(--gut),calc((100vw - var(--wrap))/2))}
.hero .film{position:relative;overflow:hidden;background:var(--ink2)}
.hero .film video,.hero .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .lede{font-size:clamp(16px,1.3vw,19px);max-width:34ch;color:#d9d2c6}
@media (min-width:900px){
  .hero{position:relative}
  .hero .film{position:absolute;inset:0}
  .hero .film video,.hero .film img{object-position:22% 50%}
  .hero .film::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,9,0) 38%,rgba(11,10,9,.5) 62%,rgba(11,10,9,.78))}
  .hero .copy{grid-column:2;position:relative;z-index:1;padding-left:clamp(24px,4vw,64px);padding-right:max(var(--gut),calc((100vw - var(--wrap))/2))}
}
@media (max-width:899px){
  .hero{grid-template-columns:1fr;min-height:0;position:relative}
  .hero .film{position:absolute;inset:0}
  .hero .film::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,10,9,.94) 18%,rgba(11,10,9,.35) 60%,rgba(11,10,9,.1))}
  .hero .copy{position:relative;z-index:1;min-height:calc(100svh - 106px);justify-content:flex-end;padding:40px var(--gut)}
}

/* trust bar */
.trust{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.trust div{padding:22px var(--gut);text-align:center;font:500 12px/1.4 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:#ddd5c8}
.trust div+div{border-left:1px solid var(--line)}
@media (max-width:620px){.trust{grid-template-columns:1fr}.trust div+div{border-left:0;border-top:1px solid var(--line)}}

.sec{padding:clamp(70px,9vw,130px) 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(28px,4vw,52px);flex-wrap:wrap}
.head p{max-width:46ch;margin:0}

/* edits */
.edits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.edit{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;text-decoration:none;background:var(--ink2)}
.edit img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.edit:hover img{transform:scale(1.04)}
.edit .cap{position:absolute;left:0;right:0;bottom:0;padding:26px;background:linear-gradient(0deg,rgba(11,10,9,.9),rgba(11,10,9,0));display:grid;gap:6px}
.edit .cap span{font:600 11px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
@media (max-width:860px){.edits{grid-template-columns:1fr}}

/* second film band */
.band{position:relative;min-height:78svh;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--line)}
.band img,.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,9,.82),rgba(11,10,9,.2) 70%)}
.band .wrap{position:relative;z-index:1;display:grid;gap:20px}

/* club */
.club{background:var(--ox);padding:clamp(60px,8vw,110px) 0}
.club .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.club h2 em{color:var(--bone)}
.club form{display:flex;gap:0;border-bottom:1px solid rgba(239,233,223,.45)}
.club input{flex:1;background:transparent;border:0;color:var(--bone);font:400 16px var(--ui);padding:14px 0;outline:none}
.club input::placeholder{color:rgba(239,233,223,.6)}
.club button{background:none;border:0;color:var(--bone);font:600 12px var(--ui);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.club .note{font-size:12.5px;color:rgba(239,233,223,.75);margin-top:12px}
@media (max-width:860px){.club .wrap{grid-template-columns:1fr}}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,100px);align-items:center}
.story figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.story figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.story{grid-template-columns:1fr}}

/* collection header + chips */
.phead{padding:clamp(50px,7vw,100px) 0 30px;border-bottom:1px solid var(--line)}
.phead .crumbs{font-size:12px;color:var(--ash);margin-bottom:18px;letter-spacing:.06em}
.phead .crumbs a{text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{background:none;border:1px solid var(--line2);color:var(--bone);font:500 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;padding:11px 16px;cursor:pointer}
.chip[aria-pressed=true],.chip:hover{border-color:var(--gold);color:var(--gold)}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);padding:clamp(28px,4vw,50px) 0 clamp(70px,8vw,120px)}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
.tile{text-decoration:none;display:grid;gap:12px}
.tile .img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink2)}
.tile .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s,transform 1.2s var(--ease)}
.tile .img img.alt{opacity:0}
@media (hover:hover){.tile:hover .img img.alt{opacity:1}.tile:hover .img img{transform:scale(1.03)}}
.tile .t{font:400 17px/1.3 var(--display)}
.tile .p{font:500 13px/1 var(--ui);color:var(--gold);letter-spacing:.06em}
.tile .b{font:600 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.tile.hide{display:none}

/* product page */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,80px);padding:clamp(30px,5vw,70px) 0 clamp(70px,8vw,120px)}
.gal{display:grid;gap:12px}
.gal figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--ink2)}
.gal img{width:100%;height:100%;object-fit:cover}
.info{position:sticky;top:96px;align-self:start;display:grid;gap:20px}
.info .price{font:500 20px/1 var(--ui);color:var(--gold);letter-spacing:.04em}
.info .ind{font-size:12px;color:var(--ash);margin-top:-12px}
.info .line{font:400 22px/1.35 var(--display);color:#e6dfd3}
.info .plain{display:flex;gap:10px;align-items:center;font-size:13px;color:#d6cfc3;border-top:1px solid var(--line);padding-top:18px}
@media (max-width:860px){.pdp{grid-template-columns:1fr}.info{position:relative;top:0}}

/* bag drawer */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden}
.drawer.open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .35s}
.drawer.open .scrim{opacity:1}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--ink2);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column}
.drawer.open .panel{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer .items{flex:1;overflow:auto;padding:10px 24px}
.drawer .item{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.drawer footer{padding:22px 24px;border-top:1px solid var(--line);display:grid;gap:12px}
.drawer .x{background:none;border:0;color:var(--bone);font:500 12px var(--ui);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* prose + gate */
.prose{max-width:720px;padding:clamp(40px,6vw,80px) 0 clamp(70px,8vw,120px)}
.prose h1{font-size:clamp(40px,5vw,68px);margin-bottom:24px}
.gate{min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px var(--gut);background:radial-gradient(60% 50% at 50% 40%,rgba(15,47,38,.55),var(--ink))}
.gate .box{display:grid;gap:26px;justify-items:center;max-width:520px}
.gate img{width:220px;height:auto}

/* footer */
.foot{border-top:1px solid var(--line);padding:60px 0 34px}
.foot .top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px;margin-bottom:40px}
.foot h4{font:600 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:#d3ccc0}.foot a:hover{color:var(--gold)}
.foot .legal{border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:var(--ash);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:760px){.foot .top{grid-template-columns:1fr}}

.js .rv{transform:translateY(22px);transition:transform 1s var(--ease)}
.js .rv.in{transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none;transition:none}*{scroll-behavior:auto}}

/* ===== Brief 2 layer (15 Sep 2026): HB teardown applied with Wondered tokens. Dials: DV 7 · MI 5 · VD 3. ===== */
/* 1 typography: labels in Manrope uppercase at .12–.18em; headlines Bodoni, sentence case, balanced */
h1,h2,h3{text-wrap:balance}
.eyebrow{letter-spacing:.18em}
.bar{letter-spacing:.16em}
.edit .cap span,.foot h4{letter-spacing:.18em}
.tile .b{letter-spacing:.16em}
.tile .p,.info .price{letter-spacing:.12em;text-transform:uppercase}
.club button,.chip,.bagbtn,.menu{letter-spacing:.16em}

/* 6 CTAs: sharp rectangles, ink or bone fills, gold only on the club; focus visible; touch targets >= 44px */
.btn,.chip,.size,.qa-open,button{border-radius:0}
.btn{min-height:48px;background:var(--bone);border-color:var(--bone);color:var(--ink);letter-spacing:.16em;transition:background .25s cubic-bezier(.25,.46,.45,.94),color .25s cubic-bezier(.25,.46,.45,.94),border-color .25s}
.btn:hover{background:var(--ink);color:var(--bone);border-color:var(--bone)}
.btn.ghost{min-height:48px}
.club .btn,.club button[type=submit]{color:var(--gold)}
.chip{min-height:44px}
.bagbtn,.menu{min-height:44px;min-width:44px}
#mainnav a{display:inline-flex;align-items:center;min-height:44px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 2 alert bar: bone on ink, no border */
.bar{background:var(--ink);color:var(--bone);border:0}
.bar span+span::before{color:var(--gold)}

/* 2 header: transparent over the home hero at Y=0, solid ink and shorter after 50px; the box height never changes (CLS 0) */
.nav{transition:background-color .25s cubic-bezier(.25,.46,.45,.94),border-color .25s}
.nav::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:1;transition:opacity .25s,transform .25s cubic-bezier(.25,.46,.45,.94);transform-origin:top;z-index:-1}
.nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
.nav .in{transition:transform .25s cubic-bezier(.25,.46,.45,.94)}
.nav .mark img{transition:transform .25s cubic-bezier(.25,.46,.45,.94);transform-origin:center}
.home .nav{margin-bottom:-68px;border-bottom-color:transparent}
.home .nav:not(.solid)::before{opacity:0}
.nav.solid{border-bottom-color:var(--line)}
.nav.solid::before{transform:scaleY(.8)}
.nav.solid .in{transform:translateY(-7px)}
.nav.solid .mark img{transform:scale(.82)}
.home .hero{min-height:calc(100svh - 38px)}
@media (max-width:899px){.home .hero .copy{min-height:calc(100svh - 38px)}}
@media (min-width:900px){.home .hero .copy{padding-top:168px}}

/* 4 parallax bands: media is taller than the band and moves at 0.5x the scroll; transform only; off under reduced motion */
.band{isolation:isolate}
.band .media{position:absolute;left:0;right:0;top:var(--par-top,0);height:var(--par-h,100%);will-change:transform;z-index:-1}
.band .media img,.band .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{z-index:0}
.band .wrap{z-index:1}
.band.play{min-height:86svh}
.band.play::after{background:linear-gradient(90deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,.62) 46%,rgba(11,10,9,.12) 78%)}
.band.play .lede{max-width:44ch;color:#ddd5c8;margin:0}
.band.play .fine{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin:0}
.band.play video{opacity:0;transition:opacity .8s}
.band.play video.on{opacity:1}
@media (max-width:899px){.band.play::after{background:linear-gradient(0deg,rgba(11,10,9,.94) 30%,rgba(11,10,9,.45) 70%,rgba(11,10,9,.2))}.band.play{align-items:flex-end;padding-bottom:40px}}
@media (prefers-reduced-motion:reduce){.band .media{top:0!important;height:100%!important;transform:none!important}}

/* 5 New-in rail: horizontal, snap; on phones the right-most card is cropped ~15% (the peek) */
.newin .head{margin-bottom:26px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((min(var(--wrap),100vw - 2*var(--gut)) - 3*16px) / 4.3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 8px max(var(--gut),calc((100vw - var(--wrap))/2));scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail .tile{scroll-snap-align:start}
@media (max-width:899px){.rail{grid-auto-columns:calc((100vw - var(--gut) - 12px) / 1.85);gap:12px;padding-left:var(--gut);scroll-padding-left:var(--gut)}}

/* 5 cards: borderless, whitespace only; two states (hover on pointer devices, tap toggles on touch); quick add */
.tile{display:grid;gap:12px;position:relative}
.tile .img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink2)}
.tile .imglink{position:absolute;inset:0;display:block}
.tile .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s cubic-bezier(.25,.46,.45,.94),transform .4s cubic-bezier(.25,.46,.45,.94)}
.tile .img img.alt{opacity:0}
.tile .ph{position:absolute;inset:0;background:#efe9df}
@media (hover:hover){.tile[data-states="2"] .img:hover img.alt{opacity:1}.tile .img:hover img{transform:scale(1.03)}}
.tile.b-on .img img.alt{opacity:1}
.tile .meta{display:grid;gap:6px;text-decoration:none;text-align:left}
.qa{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:1px;background:rgba(11,10,9,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:translateY(100%);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.25,.46,.45,.94),opacity .3s}
.qa .size{flex:1 1 0;min-height:44px;background:transparent;border:0;color:var(--bone);font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.qa .size:hover,.qa .size:focus-visible{background:var(--bone);color:var(--ink)}
.qa .size.wide{flex-basis:100%}
@media (hover:hover){.tile .img:hover .qa,.tile .img:focus-within .qa{transform:none;opacity:1;pointer-events:auto}}
.tile .qa.open{transform:none;opacity:1;pointer-events:auto}
.qa-open{position:absolute;right:8px;top:8px;width:44px;height:44px;background:rgba(11,10,9,.72);color:var(--bone);border:1px solid var(--line2);font:400 22px/1 var(--ui);cursor:pointer;display:none;z-index:2}
@media (hover:none),(max-width:899px){.qa-open{display:block}}
.tile .img:focus-within .qa-open{display:block}

/* product page sizes */
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sizes .size{min-width:48px;min-height:48px;background:transparent;border:1px solid var(--line2);color:var(--bone);font:600 12px var(--ui);letter-spacing:.14em;cursor:pointer}
.sizes .size[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.sizes.need .size{border-color:var(--gold)}

/* 7 phones: shop filters become a bottom dock in the thumb zone */
.chips .sep{width:1px;align-self:stretch;background:var(--line2);margin:0 4px}
@media (max-width:899px){
  .shop .chips{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));flex-wrap:nowrap;overflow-x:auto;background:rgba(11,10,9,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);scrollbar-width:none;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
  .shop .chips::-webkit-scrollbar{display:none}
  .shop .chips .chip{flex:0 0 auto}
  .shop .chips.tuck{transform:translateY(100%)}
  .shop .grid{padding-bottom:110px}
}

/* 8 drawer: ink surface, scroll lock with scrollbar compensation */
body.locked{overflow:hidden;padding-right:var(--sbw,0px)}
.drawer .panel{background:var(--ink)}

/* 1 the door as a brand introduction: muted film underlay, poster first */
.gate{position:relative;overflow:hidden;isolation:isolate}
.gate .under{position:absolute;inset:0;z-index:-1}
.gate .under img,.gate .under video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:25% 50%}
.gate .under::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(11,10,9,.72),rgba(11,10,9,.9))}
.gate .box{position:relative}
/* 3 hero: the poster is the largest paint; the film fades in over it only once it is playing (JS adds .on) */
.hero .film video{opacity:0;transition:opacity .6s cubic-bezier(.25,.46,.45,.94)}
.hero .film video.on{opacity:1}
.gate .under video{opacity:0;transition:opacity .6s}.gate .under video.on{opacity:1}
/* Lingerie film: a portrait panel beside the collection heading; third item in the balconette gallery */
.phead.withfilm .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,5vw,80px);align-items:end}
.lfilm,.gfilm{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--ink2)}
.lfilm img,.lfilm video,.gfilm img,.gfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lfilm video,.gfilm video{opacity:0;transition:opacity .6s}.lfilm video.on,.gfilm video.on{opacity:1}
@media (max-width:899px){.phead.withfilm .wrap{grid-template-columns:1fr}.lfilm{aspect-ratio:4/5;max-height:70svh}}
/* snap the first New-in card to the content edge, not the viewport edge */
@media (min-width:900px){.rail{scroll-padding-left:max(var(--gut),calc((100vw - var(--wrap))/2))}}

/* ===== Brief 3 light layer (15 Sep 2026, John: "a little too dark", "look at lelo ... that colour side").
   Active only when the build runs with WONDERED_THEME=light (html.light). Tokens = option B of 02-brand/options-15sep.html, JOHN'S PICK (voice note 15 Sep 09:55: "i do like the middle one ... the off-white"):
   LELO cream #f1edea, stone, plum #7a4e63, charcoal #2b2a2a; Fraunces + Manrope (the pairing shown on card B). ===== */
html.light{
  --ink:#f1edea; --ink2:#e8e2dd; --bone:#2b2a2a; --gold:#7a4e63; --ash:#6f6964; --bottle:#e8e2dd; --ox:#e8e2dd;
  --line:rgba(43,42,42,.12); --line2:rgba(122,78,99,.36);
  --display:"Bodoni Moda", "Didot", Georgia, serif; --ui:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Bodoni Moda is loaded at wght 400 only and its variable range starts there, so the old
   font-weight:300 asked for a face that does not exist and the browser synthesised a
   thinner one; on a Didone at 100px the hairlines then fell under a pixel and "Have"
   read as "Ilave". 400 is the real weight, and opsz 72 keeps the hairlines on screen. */
html.light h1,html.light h2,html.light h3{font-weight:400;font-variation-settings:"opsz" 72}
html.light .trust div,html.light .info .line,html.light .foot a{color:var(--bone)}
html.light .info .plain{color:var(--ash)}
html.light .tile .ph{background:var(--ink2)}
html.light .bar{background:#2b2a2a;color:#f1edea}
html.light .bar span+span::before{color:#d9bccb}
html.light .club input::placeholder{color:rgba(43,42,42,.55)}
html.light .club form{border-bottom-color:rgba(43,42,42,.35)}
html.light .club .note{color:var(--ash)}
html.light .club button[type=submit]{color:var(--bone)}
/* 29 Sep eve (John: "black box, you can't see the wording"): .btn is a charcoal fill in the light theme, so its text must be the light ink, not --bone */
html.light .club .btn{background:#2b2a2a;border-color:#2b2a2a;color:#f1edea}
html.light .club .btn:hover{background:transparent;color:#2b2a2a}
.club .clubimg{margin:0;aspect-ratio:4/3;overflow:hidden}
.club .clubimg img{width:100%;height:100%;object-fit:cover;display:block}
.club .fine{font-size:12.5px;opacity:.8}
html.light .shop .chips{background:rgba(241,237,234,.96)}
html.light .drawer .scrim{background:rgba(43,42,42,.35)}
/* the wordmark: ink on cream; bone only while the home header floats over the hero */
.mk-i{display:none}
html.light .nav .mk-b{display:none} html.light .nav .mk-i{display:block}
html.light .home .nav:not(.solid) .mk-b{display:block} html.light .home .nav:not(.solid) .mk-i{display:none}
/* anything that sits ON a photograph or film keeps light type over a neutral scrim (no coloured light) */
html.light .home .nav:not(.solid),html.light .hero,html.light .band,html.light .gate,html.light .edit .cap,html.light .qa,html.light .qa-open{
  --bone:#f1edea; --ink:#2b2a2a; --gold:#e7d3dd; --ash:#d8cfc4; --line:rgba(241,237,234,.18); --line2:rgba(241,237,234,.42);
}
html.light .gate{background:#2b2a2a}
html.light .hero{border-bottom:0}
/* product imagery on cream, soft and even; the contact shadow lives in the photograph (re-shoot on the new style plate) */
html.light .tile .img,html.light .gal figure{background:var(--ink2)}
html.light .tile .t{font-family:var(--display)}
html.light .home .nav:not(.solid),html.light .hero,html.light .band,html.light .gate,html.light .edit .cap,html.light .qa,html.light .qa-open{color:var(--bone)}

/* 15 Sep light hero: the couple film. Desktop: strapline large on the left over the empty cream wall, charcoal, no scrim.
   Phone: faces fill the top, copy sits in the lower third over a soft cream scrim. */
html.light .home .hero{--bone:#2b2a2a; --gold:#7a4e63; --ash:#5f5955; color:var(--bone)}
html.light .home .hero .lede{color:#3a3836}
html.light .home .hero .btn{background:#2b2a2a;border-color:#2b2a2a;color:#f1edea}
html.light .home .hero .btn:hover{background:transparent;color:#2b2a2a}
html.light .home .hero .btn.ghost{background:transparent;color:#2b2a2a;border-color:rgba(43,42,42,.45)}
html.light .home .nav:not(.solid){--bone:#2b2a2a; --gold:#7a4e63; color:#2b2a2a}
html.light .home .nav:not(.solid) .mk-b{display:none} html.light .home .nav:not(.solid) .mk-i{display:block}
html.light .home .hero .film{background:#e8e2dd}
@media (min-width:900px){
  html.light .home .hero .film::after{display:none}
  html.light .home .hero .film video,html.light .home .hero .film img{object-position:62% 40%}
  html.light .home .hero .copy{grid-column:1;margin-left:max(var(--gut),calc((100vw - var(--wrap))/2));padding-left:0;padding-right:clamp(24px,4vw,64px);max-width:640px}
  html.light .home .hero h1{font-size:clamp(56px,6.4vw,104px);line-height:.98}
}
@media (max-width:899px){
  html.light .home .hero .film::after{background:linear-gradient(0deg,rgba(241,237,234,.96) 0%,rgba(241,237,234,.86) 26%,rgba(241,237,234,0) 50%)}
  html.light .home .hero .film video,html.light .home .hero .film img{object-position:50% 0%}
  html.light .home .hero h1{font-size:clamp(44px,12vw,64px)}
}
/* 15 Sep fix: the couple's heads sit high in frame, so on the light home the header is solid cream above the film (the wordmark never sits on hair) */
html.light .home .nav{margin-bottom:0}
html.light .home .nav:not(.solid)::before{opacity:1}
html.light .home .hero{min-height:calc(100svh - 106px)}
@media (max-width:899px){html.light .home .hero .copy{min-height:calc(100svh - 106px)}}
@media (min-width:900px){html.light .home .hero .copy{padding-top:0} html.light .home .hero h1{font-size:clamp(52px,5.4vw,88px)}}
html.light .home .nav:not(.solid){--ink:#f1edea; --line:rgba(43,42,42,.12)}
html.light .home .hero h1 em{color:#5a3748}
/* 15 Sep: cream products — captions and the "Take your time" band fade to cream with charcoal type (the come-play band stays a night scene) */
html.light .edit .cap{background:linear-gradient(0deg,rgba(241,237,234,.94),rgba(241,237,234,.6) 55%,rgba(241,237,234,0));--bone:#2b2a2a;--gold:#5a3748;color:#2b2a2a}
html.light .band:not(.play){--bone:#2b2a2a;--gold:#5a3748;--ash:#5f5955;color:#2b2a2a}
html.light .band:not(.play)::after{background:linear-gradient(90deg,rgba(241,237,234,.94) 0%,rgba(241,237,234,.6) 45%,rgba(241,237,234,0) 70%)}
html.light .band:not(.play) .btn.ghost{color:#2b2a2a;border-color:rgba(43,42,42,.45)}
@media (max-width:899px){html.light .band:not(.play)::after{background:linear-gradient(0deg,rgba(241,237,234,.94) 30%,rgba(241,237,234,.5) 65%,rgba(241,237,234,0))}}
/* 15 Sep night: hero is now the dark HB-format film, so the strapline is cream over a soft warm-charcoal shadow */
html.light .home .hero{--bone:#f1edea;--gold:#e7cfd9;--ash:#e2d8d0;color:#f1edea}
html.light .home .hero .lede{color:#efe6de}
html.light .home .hero h1 em{color:#ecd3de}
html.light .home .hero .btn{background:#f1edea;border-color:#f1edea;color:#2b2a2a}
html.light .home .hero .btn.ghost{background:transparent;color:#f1edea;border-color:rgba(241,237,234,.6)}
@media (min-width:900px){html.light .home .hero .film::after{display:block;background:linear-gradient(90deg,rgba(26,18,20,.72) 0%,rgba(26,18,20,.45) 38%,rgba(26,18,20,0) 62%)}}
@media (max-width:899px){html.light .home .hero .film::after{background:linear-gradient(0deg,rgba(26,18,20,.9) 0%,rgba(26,18,20,.6) 32%,rgba(26,18,20,0) 58%)}}

/* 15 Sep 22:4x show + clubfilm */
.phead.show{position:relative;overflow:hidden;min-height:clamp(340px,52vh,560px);display:flex;flex-direction:column;justify-content:flex-end}
.phead.show>.wrap{position:relative;z-index:2}
.showbg{position:absolute;inset:0;z-index:0;opacity:.92}
.showbg picture{position:absolute;inset:0;opacity:0;animation:showfade 28s linear infinite}
.showbg img{width:100%;height:100%;object-fit:cover;object-position:62% 35%}
.showbg picture:nth-child(1){animation-delay:-1.4s}.showbg picture:nth-child(2){animation-delay:5.6s}.showbg picture:nth-child(3){animation-delay:12.6s}.showbg picture:nth-child(4){animation-delay:19.6s}
@keyframes showfade{0%{opacity:0;transform:scale(1.06)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* the scrim buys legibility for the headline on the left and then gets out of the way:
   it used to sit at 78% across nearly half the frame and the photograph never showed. */
.phead.show::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 62%,transparent) 34%,transparent 74%),linear-gradient(0deg,color-mix(in srgb,var(--ink) 72%,transparent) 0%,transparent 32%)}
@media (max-width:899px){.phead.show{min-height:clamp(300px,48svh,440px)}.phead.show::after{background:linear-gradient(0deg,var(--ink) 10%,color-mix(in srgb,var(--ink) 70%,transparent) 58%,color-mix(in srgb,var(--ink) 20%,transparent) 100%)}}
@media (prefers-reduced-motion:reduce){.showbg picture{animation:none}.showbg picture:first-child{opacity:1}}
.band.clubfilm{min-height:88svh;padding:clamp(90px,10vw,140px) 0 clamp(50px,6vw,90px);background:var(--ink2)}
.band.clubfilm .wrap{grid-template-columns:minmax(0,520px);align-content:center}
.band.clubfilm .media img,.band.clubfilm .media video{object-position:64% 42%}
.band.clubfilm video{opacity:0;transition:opacity .8s}.band.clubfilm video.on{opacity:1}
@media (max-width:899px){.band.clubfilm .wrap{align-content:end}.band.clubfilm .media img,.band.clubfilm .media video{object-position:50% 30%}}
@media (max-width:899px){.band.clubfilm{min-height:0;display:block;padding:0 0 clamp(40px,8vw,60px)}.band.clubfilm::after{display:none}.band.clubfilm .media{position:relative;top:auto;height:auto;aspect-ratio:4/5;max-height:72svh}.band.clubfilm .media img,.band.clubfilm .media video{object-position:50% 35%}.band.clubfilm .wrap{padding-top:28px}}
@media (min-width:900px){html.light .phead.show .chips{background:transparent}}

/* 18 Sep — friendlier CTAs: a 2px corner keeps the sharp register but stops it reading as a box;
   the label sits wider and the hover lifts rather than inverts hard. */
.btn{border-radius:2px;letter-spacing:.14em;padding-left:clamp(22px,2.4vw,34px);padding-right:clamp(22px,2.4vw,34px);transition:background .25s cubic-bezier(.25,.46,.45,.94),color .25s,transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(11,10,9,.18)}
.btn.ghost:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ===== 18 Sep — product gallery: a contained main shot, a magnifier on hover, thumbnails beneath.
   The main image is deliberately smaller than the old full-bleed: the detail lives in the lens,
   so the page reads as a considered object rather than a poster. ===== */
.gal{display:grid;gap:14px}
.galmain{position:relative;margin:0;aspect-ratio:4/5;max-width:min(100%,520px);overflow:hidden;background:var(--ink2);cursor:zoom-in}
.galmain img{width:100%;height:100%;object-fit:cover;display:block}
.galzoom{position:absolute;inset:0;opacity:0;pointer-events:none;background-repeat:no-repeat;background-size:250%;transition:opacity .22s cubic-bezier(.25,.46,.45,.94)}
.galmain.zooming .galzoom{opacity:1}
.galhint{position:absolute;left:10px;bottom:10px;z-index:2;font:500 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;background:rgba(11,10,9,.62);color:var(--bone);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .22s}
.galmain.zooming .galhint{opacity:0}
.galthumbs{display:flex;gap:10px;flex-wrap:wrap;max-width:min(100%,520px)}
.galthumbs button{width:76px;aspect-ratio:1/1;padding:0;border:1px solid var(--line);background:var(--ink2);overflow:hidden;cursor:pointer;opacity:.62;transition:opacity .25s,border-color .25s}
.galthumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.galthumbs button[aria-current="true"]{opacity:1;border-color:var(--gold)}
.galthumbs button:hover{opacity:1}
@media (hover:none){.galmain{cursor:default}.galhint{display:none}}
@media (max-width:860px){.galmain,.galthumbs{max-width:100%}.galthumbs button{width:64px}}
@media (prefers-reduced-motion:reduce){.galzoom{transition:none}}

/* 18 Sep — product specifics under the buy button: materials and the three facts that matter */
.specs{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.specs .spec{font:400 14px/1.6 var(--ui);color:var(--ash);margin:0 0 8px}
.specs .spec b{color:var(--bone);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px;margin-right:8px}
ul.spec{list-style:none;margin:10px 0 0;padding:0}
ul.spec li{font:400 14px/1.7 var(--ui);color:var(--ash);padding-left:16px;position:relative}
ul.spec li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--gold)}

/* ===== 18 Sep — LELO-style mega menu. Audience columns, mechanism rows, one featured piece.
   Opens on hover at fine-pointer widths, on click everywhere, Escape closes. ===== */
.mmbtn{background:none;border:0;color:inherit;font:500 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;padding:10px 14px;cursor:pointer;position:relative}
.mmbtn::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.25,.46,.45,.94)}
.mmbtn[aria-expanded="true"]::after{transform:scaleX(1)}
.nav{position:sticky}
.mega{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 22px 50px rgba(11,10,9,.28)}
.mega[hidden]{display:none}
.megawrap{max-width:var(--wrap);margin:0 auto;padding:clamp(26px,3vw,42px) var(--gut);display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 260px;gap:clamp(18px,2.4vw,40px)}
.mmcol .mmh,.mmfeat .mmh{display:block;font:600 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.mmcol ul{list-style:none;margin:0;padding:0}
.mmcol li+li{margin-top:2px}
.mmcol a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;font:400 15px/1.3 var(--display);color:var(--bone);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .22s,color .22s}
.mmcol a i{font:500 10px/1 var(--ui);font-style:normal;letter-spacing:.1em;color:var(--ash)}
.mmcol a:hover{border-bottom-color:var(--gold)}
.mmfeat{display:block;text-decoration:none;color:var(--bone)}
.mmfeat picture,.mmfeat img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.mmfeat b{display:block;margin-top:12px;font:400 15px/1.25 var(--display)}
.mmfeat em{display:block;margin-top:5px;font:500 11px/1 var(--ui);font-style:normal;letter-spacing:.14em;color:var(--ash)}
@media (max-width:1100px){.megawrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.mmfeat{display:none}}
@media (max-width:640px){.megawrap{grid-template-columns:repeat(2,minmax(0,1fr));padding:22px var(--gut)}}
@media (prefers-reduced-motion:reduce){.mmbtn::after{transition:none}}

/* 18 Sep — the brand index. Tiered by median price, the way a distributor separates houses. */
.brands{padding:clamp(30px,5vw,60px) 0 clamp(70px,8vw,110px);display:grid;gap:clamp(34px,4vw,56px)}
.btier .eyebrow{display:block;margin-bottom:16px}
.blist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--line)}
.blist li{background:var(--ink)}
.blist a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px;text-decoration:none;color:var(--bone);transition:background .22s}
.blist a:hover{background:var(--ink2)}
.blist b{font:400 17px/1.2 var(--display);font-weight:400}
.blist i{font:500 10px/1 var(--ui);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.mmall{border-top:1px solid var(--line);margin-top:8px;padding-top:12px!important;font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;font-family:var(--ui)!important}
@media (max-width:1400px){.megawrap{grid-template-columns:repeat(6,minmax(0,1fr))}.mmfeat{display:none}}

/* 18 Sep — per-header panels: one per collection, anchored under the sticky nav */
#mainnav li[data-panel]{position:static}
.mega[data-panel]{position:absolute;left:0;right:0;top:100%}

/* ===== 18 Sep — the elements every calibre site carries and we did not.
   Read off Honey Birdette, Coco de Mer and Bluebella above-fold captures. ===== */

/* announcement bar: a rotating strip above the nav, with a region marker */
.annb{background:var(--ink2);border-bottom:1px solid var(--line);position:relative;z-index:45}
.annwrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:10px;min-height:34px}
.annrot{list-style:none;margin:0;padding:0;flex:1;position:relative;height:34px;overflow:hidden}
.annrot li{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
  opacity:0;transition:opacity .5s cubic-bezier(.25,.46,.45,.94)}
.annrot li.on{opacity:1}
.annprev,.annnext{background:none;border:0;color:var(--ash);cursor:pointer;font-size:15px;line-height:1;padding:6px 8px}
.annprev:hover,.annnext:hover{color:var(--bone)}
.annloc{font:500 10px/1 var(--ui);letter-spacing:.16em;color:var(--ash);white-space:nowrap}
@media (max-width:640px){.annloc{display:none}}
@media (prefers-reduced-motion:reduce){.annrot li{transition:none}}

/* utility icons beside the bag */
.uicon{background:none;border:0;color:inherit;cursor:pointer;padding:8px;display:inline-flex;align-items:center;
  text-decoration:none;opacity:.82;transition:opacity .2s}
.uicon:hover{opacity:1}

/* search overlay */
.srch{position:absolute;left:0;right:0;top:100%;z-index:70;background:var(--ink);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:0 22px 50px rgba(11,10,9,.3)}
.srch[hidden]{display:none}
.srchwrap{max-width:var(--wrap);margin:0 auto;padding:clamp(18px,2.4vw,28px) var(--gut);display:grid;
  grid-template-columns:1fr auto;gap:14px;align-items:center}
.srchwrap input{grid-column:1;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--bone);
  font:400 clamp(20px,2.6vw,30px)/1.2 var(--display);padding:10px 0;outline:none}
.srchwrap input:focus{border-bottom-color:var(--gold)}
.srchx{grid-column:2;background:none;border:0;color:var(--ash);cursor:pointer;
  font:500 10px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase}
.srchres{grid-column:1/-1;display:grid;gap:1px;background:var(--line);max-height:46vh;overflow:auto}
.srchres a{background:var(--ink);display:flex;justify-content:space-between;gap:14px;padding:13px 16px;
  text-decoration:none;color:var(--bone);font:400 15px/1.3 var(--display)}
.srchres a:hover{background:var(--ink2)}
.srchres a em{font:500 10px/1 var(--ui);font-style:normal;letter-spacing:.12em;color:var(--ash);white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* listing sidebar — the way Honey Birdette and Bluebella refine */
.withside{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(22px,3vw,48px);
  padding:clamp(26px,4vw,52px) 0 clamp(70px,8vw,110px);align-items:start}
.side{position:sticky;top:96px;display:grid;gap:26px}
.sideg .sideh{display:block;font:600 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.sideg ul{list-style:none;margin:0;padding:0}
.sideg a,.sidea{display:flex;justify-content:space-between;gap:10px;padding:6px 0;text-decoration:none;
  color:var(--bone);font:400 14px/1.35 var(--display);border-bottom:1px solid transparent;transition:border-color .2s}
.sideg a:hover{border-bottom-color:var(--gold)}
.sideg a i{font:500 10px/1 var(--ui);font-style:normal;color:var(--ash)}
.sideg a[aria-current=page]{color:var(--gold)}
.withside .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--line)}
@media (max-width:899px){.withside{grid-template-columns:1fr}.side{position:static;
  display:flex;gap:18px;overflow:auto;padding-bottom:6px}.sideg{min-width:170px}}

/* ===== 18 Sep — nav rebalance. Director: the hover panels were overlapping the type, the wordmark
   needed air, and the headers move right and tighten because a sidebar now lives on the left. ===== */
.nav .in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,54px);
  padding-top:14px;padding-bottom:14px}
.nav .mark{grid-column:1;padding-right:clamp(16px,2.4vw,38px);display:flex;align-items:center}
.nav nav{grid-column:2;justify-self:start}
.nav .tools{grid-column:3;justify-self:end;display:flex;align-items:center;gap:2px}
#mainnav{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);list-style:none;margin:0;padding:0}
#mainnav a{font:500 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);padding:12px 2px;display:block;white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .22s,opacity .22s;opacity:.86}
#mainnav a:hover,#mainnav a[aria-current=page]{opacity:1;border-bottom-color:var(--gold)}

/* the panel sits BELOW the whole header, never over the nav type */
.mega[data-panel]{top:100%;padding-top:2px}
.megawrap{grid-template-columns:repeat(auto-fit,minmax(190px,230px));justify-content:start;
  max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:clamp(26px,3vw,42px) var(--gut)}
/* the panel lists are NOT the nav bar: they stack, one line per entry */
.mmcol ul{display:block}
.mmcol li{display:list-item}
.mmcol a{font-size:14px;padding:6px 0}
@media (max-width:1100px){.megawrap{max-width:none;margin:0 auto}}
@media (max-width:899px){.nav .in{grid-template-columns:auto 1fr auto;gap:12px}
  #mainnav{gap:10px}#mainnav a{font-size:9px;letter-spacing:.12em}}

/* patterned rule under the announcement strip — a small piece of structure to hold the eye */
.annb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 14px,transparent 14px 34px);opacity:.34}

/* ===== the Brands page, rebuilt. A living index rather than a list: each house is a panel with a
   slow parallax plate behind it that shifts on scroll. ===== */
.brands{padding:0 0 clamp(70px,8vw,110px);display:block}
.btier{margin-top:clamp(34px,4vw,58px)}
.btier>.eyebrow{display:block;margin:0 0 18px}
/* hairlines come from the cards themselves, never from a filled container: a tier whose last
   row is short used to paint the container's grey straight across the empty cells. */
.blist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:transparent}
.blist li{background:var(--ink);position:relative;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.blist a{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:186px;padding:22px;gap:6px;text-decoration:none;color:var(--bone)}
.blist a::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 18%,color-mix(in srgb,var(--ink) 82%,transparent) 72%,var(--ink) 100%)}
.blist .bplate{position:absolute;inset:-14% 0;z-index:0;background-size:cover;background-position:50% 40%;
  opacity:.5;transform:translateY(0) scale(1.06);transition:opacity .5s,transform .9s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.blist li:hover .bplate{opacity:.74;transform:translateY(-10px) scale(1.11)}
.blist b{font:400 24px/1.05 var(--display);font-weight:400}
.blist i{font:500 10px/1 var(--ui);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.blist .bmed{font:500 10px/1 var(--ui);letter-spacing:.14em;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.blist .bplate{transition:none;transform:none}}
/* 21 Sep (Director: "a dull gray under the imagery"): the side-filtered grid paints var(--line) behind 1px gaps, but
   tiles had no fill, so the grey showed under every title and as an empty band above row one. Tiles now carry the page
   cream, the grid's spacing sits outside the grey, and pure-white supplier packshots take the brand cream (multiply). */
.withside .grid{padding:0;margin:clamp(28px,4vw,50px) 0 clamp(70px,8vw,120px)}
.withside .grid .tile{background:var(--ink)}
html.light .tile .img,html.light .gal figure{background:var(--ink)}
/* 21 Sep: multiply removed -- every tile and gallery image is now our own photo on its set (packshot.py / shoot.py), and multiply only dulled it */
/* 21 Sep: tiles in the hairline grid must not slide in, or the grey grid shows above each row mid-reveal */
.withside .grid .tile.rv{transform:none;transition:none}

/* 21 Sep (John): the Wonder Club as one split screen, the Honey Club shape: film one side, a single sign-up the other */
.clubsplit{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 110px)}
.clubsplit .csmedia{position:relative;overflow:hidden;background:var(--ink2);min-height:420px}
.clubsplit .csmedia img,.clubsplit .csmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:25% 50%}
.clubsplit .csmedia video{opacity:0;transition:opacity .8s}.clubsplit .csmedia video.on{opacity:1}
.clubsplit .csform{display:flex;align-items:center;justify-content:center;padding:clamp(40px,6vw,90px) var(--gut)}
.clubsplit .csin{width:100%;max-width:420px}
.clubsplit h1{margin:14px 0 16px;font-size:clamp(40px,4.6vw,64px)}
.clubsplit .muted{margin-bottom:30px}
.clubsplit form{display:flex;flex-direction:column;gap:12px}
.clubsplit label{font:600 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase}
.clubsplit input{border:1px solid var(--line2,rgba(43,42,42,.3));background:transparent;padding:15px 14px;font:400 16px var(--ui);color:inherit}
.clubsplit .btn{width:100%;justify-content:center;margin-top:6px}
.clubsplit .note{font-size:13px;margin-top:12px}
.clubsplit .fine{font-size:12px;opacity:.7;margin-top:22px}
.clubsplit .crumbs{margin-bottom:22px}
@media (max-width:899px){.clubsplit{grid-template-columns:1fr;min-height:0}.clubsplit .csmedia{min-height:0;aspect-ratio:4/5}}
@media (max-width:520px){.bar span:first-child{display:none}.bar span:nth-child(2)::before{content:none}}   /* 21 Sep: one line on phones */
/* 24 Sep — search result count line (price-limited searches) */
.srchres .srchnote{margin:0;background:var(--ink);padding:10px 16px;font:500 10px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
/* 24 Sep — the search panel lives inside the nav, which takes the pale over-photo tokens on the home
   page; reset it to the standard light tokens so result prices and the count line stay readable */
html.light .srch{--ink:#f1edea; --ink2:#e8e2dd; --bone:#2b2a2a; --ash:#6f6964; --gold:#7a4e63; --line:rgba(43,42,42,.12)}
/* 24 Sep — Chrome draws its own blue clear-cross inside type=search, beside our Close button; hide it */
#srchq::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

/* ===== 28 Sep 2026 — premium listing refit (Director decisions D + E). Grid: clean gutters on the page cream, no hairlines,
   4 columns desktop / 2 columns phone. Card: image, brand, name (2 lines), quiet colour line, price (same £x.xx as the PDP). ===== */
.withside .grid,.grid{background:transparent}
.withside .grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:40px}
@media (max-width:899px){.withside .grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:28px}}
.withside .grid .tile{background:transparent;border:0;align-content:start;grid-template-rows:auto 1fr}
.tile .meta{display:flex;flex-direction:column;gap:6px}
.tile .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:0;font-size:16px;line-height:1.3;min-height:2.6em}
.tile .c{font:400 12px/1.2 var(--ui);color:var(--ash);letter-spacing:0}
.tile .p{margin-top:auto;padding-top:2px}
.tile .p,.info .price{letter-spacing:0;text-transform:none}
@media (max-width:899px){.tile .t{font-size:14.5px}}
/* PDP: smaller title, no tracking on the Bodoni, standfirst in the body face; the one-size fit is a line of text, not a button */
.info h1{font-size:clamp(28px,3vw,40px);letter-spacing:0;line-height:1.12}
.info .colour{margin:-12px 0 0;font:400 14px/1.3 var(--ui);color:var(--ash)}
.info .line,html.light .info .line{font:400 16px/1.65 var(--ui)}
.info .fit{margin:0;font:500 14px/1.4 var(--ui);color:var(--bone)}

/* 28 Sep: checkout toggle. .btn sets display, which would beat the hidden attribute. */
.drawer [hidden]{display:none!important}

/* 29 Sep 2026: card marks + trader line (Nochex), legal text, Wonder Club one-question-at-a-time sign-up */
.foot .pay{display:flex;gap:14px;align-items:center;margin-top:28px}
.foot .pay img{height:22px;width:auto;background:#fff;padding:6px 9px;border-radius:4px;box-sizing:content-box}
.foot .trader{font-size:12px;opacity:.75;margin-top:14px;line-height:1.6}
.legaltext{max-width:70ch}.legaltext h1{margin-bottom:22px}.legaltext h2{margin:34px 0 10px;font-size:22px}
.legaltext p,.legaltext li{line-height:1.7;margin-top:8px}.legaltext ul{padding-left:20px}
.quiz{margin-top:22px}.quiz .qstep{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:10px}
.quiz fieldset{border:0;padding:0;margin:0;min-width:0}.quiz legend{font-size:22px;margin-bottom:14px;padding:0}
.quiz .qopt{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;margin-top:8px;border:1px solid currentColor;border-color:rgba(127,127,127,.35);border-radius:8px;cursor:pointer;line-height:1.45}
.quiz .qopt input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0}
.quiz .qopt:has(input:checked){border-color:currentColor}
.quiz input[type=email]{display:block;width:100%;box-sizing:border-box;margin:8px 0 6px;padding:13px 14px;font:inherit;border:1px solid rgba(127,127,127,.5);border-radius:8px;background:transparent;color:inherit}
.quiz .qnav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.quiz .qnav .btn[disabled]{opacity:.4;cursor:not-allowed}

/* 5 Oct — search results page */
.srchform{display:flex;gap:10px;margin-top:18px;max-width:560px}
.srchform input{flex:1;min-width:0;padding:12px 14px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;border-radius:4px}
.srchall{display:block;font-weight:600}

/* 5 Oct: Wonder Club welcome pop-up */
.cwel{padding:0;border:1px solid var(--line2);background:var(--ink);color:var(--bone);width:min(760px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto}
.cwel::backdrop{background:rgba(11,10,9,.62)}
.cwel[open]{display:grid;grid-template-columns:300px 1fr}
.cwel .cwmedia{position:relative;min-height:100%}
.cwel .cwmedia img,.cwel .cwmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.cwel .cwmedia video{opacity:0;transition:opacity .6s}.cwel .cwmedia video.on{opacity:1}
.cwel .cwbody{padding:clamp(26px,4vw,44px)}
.cwel h2{margin:12px 0 16px;font-size:clamp(34px,4vw,48px)}
.cwel .cwh{margin:20px 0 10px;font:600 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase}
.cwel .cwlinks{display:flex;gap:10px;flex-wrap:wrap}
.cwel .fine{font-size:12px;opacity:.7;margin-top:22px}
.cwel form{margin-top:8px}
@media (max-width:699px){.cwel[open]{grid-template-columns:1fr}.cwel .cwmedia{aspect-ratio:4/3;min-height:0}}

/* 5 Oct pm (John): the welcome opens full screen, picture/film on one half like the club page */
.cwel{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;border:0}
.cwel[open]{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.cwel .cwbody{align-self:center;max-width:520px;padding:clamp(28px,5vw,72px)}
@media (max-width:699px){.cwel[open]{grid-template-columns:1fr;grid-template-rows:46svh auto}.cwel .cwmedia{aspect-ratio:auto;min-height:0}}

/* ===== 5 Oct (Director-approved product page; Amazon / Farfetch / adidas pattern + The Cyber Effect, Aiken: information about
   the product, buy without being seen, no pressure tricks). Desktop: square thumbnails in a column on the LEFT, the main
   picture shows the WHOLE item (contain, not crop). Phone: full-width swipe track with a counter, and an Add to bag bar
   that stays at the bottom once the main button has scrolled away. No countdowns, no "only 1 left", no coupon pop-ups. ===== */
.gal{grid-template-columns:auto 1fr;grid-template-areas:"thumbs main";align-items:start;gap:14px}
.gal .galmain{grid-area:main;max-width:min(100%,560px);background:var(--ink2)}
.gal .galmain img{object-fit:contain}
.gal .galthumbs{grid-area:thumbs;flex-direction:column;flex-wrap:nowrap;max-height:min(700px,calc(100vh - 140px));overflow-y:auto;gap:10px}
.gal .galthumbs button{width:64px;aspect-ratio:1/1;flex:0 0 auto}
.gal:not(:has(.galthumbs)){grid-template-columns:1fr;grid-template-areas:"main"}
.galswipe{display:none}
.info .plain{border-top:0;padding-top:0;margin-top:-8px}
.info .line{border-top:1px solid var(--line);padding-top:20px}
.stickybuy{display:none}
@media (max-width:860px){
  .gal{grid-template-columns:1fr;grid-template-areas:"main"}
  .gal:has(.galswipe) .galmain,.gal .galthumbs{display:none}
  .galswipe{display:block;position:relative;margin:0 calc(-1 * var(--gut))}
  .gstrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gstrack::-webkit-scrollbar{display:none}
  .gsitem{flex:0 0 100%;scroll-snap-align:center;margin:0;aspect-ratio:4/5;background:var(--ink2)}
  .gsitem img{width:100%;height:100%;object-fit:contain}
  .gscount{position:absolute;right:12px;bottom:12px;font:500 11px/1 var(--ui);letter-spacing:.12em;padding:7px 10px;background:rgba(11,10,9,.62);color:var(--bone)}
  .stickybuy:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid var(--line)}
  .stickybuy .sbname{flex:1;min-width:0;font:500 13px/1.3 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stickybuy .sbprice{font:500 14px/1 var(--ui);color:var(--gold)}
  .stickybuy .btn{padding:12px 18px}
}
/* 5 Oct pm — refinements from the measured competitor pass (04-research/pdp-gallery-patterns.md): Amazon-size square thumbs shown
   whole and at full strength with a gold ring on the chosen one; main picture up to 640px like Coco de Mer / Agent Provocateur. */
.gal .galmain{max-width:min(100%,640px)}
.gal .galthumbs{gap:8px}
.gal .galthumbs button{width:56px;opacity:1;border-radius:2px;border:1px solid var(--line)}
.gal .galthumbs button img{object-fit:contain}
.gal .galthumbs button[aria-current="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}

/* 7 Oct 2026 (growth): sold-out buttons, the Sets page, the "Make it a set" link, the bag's "Complete it" and delivery line.
   Colours are the theme variables only, so the dark and the light theme both follow. Rollback = site.css.pre-growth-1007. */
.is-soldout,.is-soldout:hover{opacity:.55;cursor:not-allowed}
.btn.is-soldout,.btn.is-soldout:hover{background:transparent;color:var(--bone);border-color:var(--line2)}
.qa .size.is-soldout,.qa .size.is-soldout:hover{background:transparent;color:var(--ash)}
.sizes .size.is-soldout,.sizes .size.is-soldout:hover{text-decoration:line-through;opacity:.45;background:transparent;color:var(--bone)}
.setlink{margin:-4px 0 20px;font:500 13px/1.5 var(--ui)}
.setlink a{color:var(--gold);text-underline-offset:3px}
.sets .setgrid{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));padding:clamp(8px,2vw,24px) 0 80px}
.setcard{display:flex;flex-direction:column;gap:14px;scroll-margin-top:96px}
.setcard .setimg{display:block;background:var(--ink2)}
.setcard .setimg img{width:100%;height:auto}
.setcard h2{font-size:clamp(24px,2.4vw,32px);margin:2px 0 0}
.setcard p{margin:0}
.setincl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);font:400 14px/1.5 var(--ui)}
.setincl li{padding:9px 0;border-bottom:1px solid var(--line)}
.setbuy{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.setprice{font:500 20px var(--ui)}
.setcard:target{outline:1px solid var(--gold);outline-offset:10px}
.drawer .addons{margin:20px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.drawer .addons h4{margin:0 0 4px;font:600 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.drawer .addrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:13.5px;line-height:1.4}
.drawer .addrow .addbtn{padding:9px 16px;flex:0 0 auto}
.drawer .bagdel{font-size:12.5px;margin:0;color:var(--gold)}
/* 13 Oct — Play sections, the sort control and the sets band (Director: "sort the play section out", "add the gifting and sets"
   without new tabs). The sort control is rendered hidden and shown by site.js, so a page with JS off shows no dead control. */
.jumps{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.jumps .chip{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:899px){.jumps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}.jumps::-webkit-scrollbar{display:none}.jumps .chip{flex:0 0 auto}}
html.light .phead.show .jumps .chip{background:color-mix(in srgb,var(--ink) 70%,transparent)}
.lmain{min-width:0}
.lbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(28px,4vw,50px);padding-bottom:14px;border-bottom:1px solid var(--line)}
.lcount{font:500 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.lsort{display:inline-flex;align-items:center;gap:10px;font:600 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lsort[hidden]{display:none}
.lsort select{font:400 14px/1.2 var(--ui);letter-spacing:0;text-transform:none;color:var(--bone);background:transparent;border:1px solid var(--line2);border-radius:0;padding:10px 30px 10px 12px;min-height:44px;cursor:pointer}
.lmain .grid,.withside .lmain .grid{margin-top:clamp(22px,3vw,34px)}
.psec{scroll-margin-top:110px}
.psec+.psec{margin-top:clamp(10px,2vw,24px)}
.psech{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px);padding-bottom:12px;border-bottom:1px solid var(--line)}
.psech h2{font-size:clamp(28px,3vw,40px)}
.psech p{margin:0;font-size:13.5px}
.psec .grid{margin-bottom:clamp(20px,3vw,36px)}
.setband{border-bottom:1px solid var(--line);background:var(--ink2)}
.setband .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.setband p{margin:0;font-size:14px;line-height:1.5}
.setband .eyebrow{margin-right:12px}
.setband a{font:500 13px/1.5 var(--ui);color:var(--gold);text-underline-offset:3px;white-space:nowrap}

/* 14 Oct 2026 (checkout UX) — bag drawer: free-delivery progress at the top, rows with a picture and a quantity stepper, the stockings offer.
   .fdbar is shared with the checkout summary (checkout_build.py PAGE_CSS), so it is not scoped to the drawer. */
.fdbar{position:relative;height:3px;background:var(--line);overflow:hidden}
.fdbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);transition:width .45s var(--ease)}
@media (prefers-reduced-motion:reduce){.fdbar i{transition:none}}
.drawer .fd{padding:14px 24px 16px;border-bottom:1px solid var(--line);background:var(--ink2)}
.drawer .bagdel{margin:0 0 10px;font:500 12.5px/1.4 var(--ui);letter-spacing:.02em;color:var(--bone)}
.drawer .fd.done .bagdel{color:var(--gold)}
.drawer .item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;justify-content:normal;gap:0 14px;align-items:start;padding:16px 0}
.drawer .itimg{display:block;width:72px;height:90px;background:var(--ink2);overflow:hidden}
.drawer .itimg img{width:100%;height:100%;object-fit:cover}
.drawer .itbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.drawer .itname{font:500 14px/1.35 var(--ui);color:var(--bone);text-decoration:none}
.drawer .itname:hover{color:var(--gold)}
.drawer .itopt{font:400 12.5px/1.4 var(--ui);color:var(--ash)}
.drawer .itctl{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px;margin-top:8px}
.drawer .qty{display:inline-flex;align-items:stretch;border:1px solid var(--line2)}
.drawer .qbtn{width:40px;height:40px;padding:0;border:0;background:none;color:var(--bone);font:400 18px/1 var(--ui);cursor:pointer}
.drawer .qbtn:hover:not([disabled]){color:var(--gold)}
.drawer .qbtn[disabled]{opacity:.35;cursor:not-allowed}
.drawer .qn{min-width:32px;display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--ui)}
.drawer .itrm{min-height:40px;padding:0;border:0;background:none;color:var(--ash);font:500 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.drawer .itrm:hover{color:var(--gold)}
.drawer .itprice{display:flex;flex-direction:column;align-items:flex-end;font:500 14px/1.35 var(--ui);white-space:nowrap}
.drawer .itprice small{font:400 12px/1.4 var(--ui);color:var(--ash)}
.drawer .itmax{margin-top:4px;font:400 12px/1.4 var(--ui);color:var(--ash)}
.drawer .bagnote{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line2);font:500 13px/1.45 var(--ui)}
.drawer .addimg{flex:none;width:40px;height:50px;object-fit:cover;background:var(--ink2)}
.drawer .addrow span{flex:1;min-width:0}
@media (max-width:420px){.drawer .item{grid-template-columns:64px minmax(0,1fr) auto}.drawer .itimg{width:64px;height:80px}}

/* 14 Oct 2026 — product page: reassurance row, rails, Add to bag bar */
.info .assure{list-style:none;margin:-6px 0 0;padding:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--line)}
.assure li{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;font:600 10px/1.5 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.assure span{text-wrap:balance}
.assure svg{width:24px;height:24px;flex:none;color:var(--bone);fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.assure + .setlink{margin:-4px 0 0}
@media (max-width:380px){.assure li{letter-spacing:.1em;font-size:9.5px}}
.xs{padding:0 0 clamp(44px,5vw,72px)}
.xs h2{font-size:clamp(24px,2.5vw,32px);line-height:1.15;margin:0 0 clamp(18px,2vw,26px)}
.xrail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100vw - var(--gut) - 12px) / 1.85);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 6px;scroll-padding-left:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.xrail::-webkit-scrollbar{display:none}
.xrail .tile{scroll-snap-align:start;min-width:0}
@media (min-width:600px) and (max-width:899px){.xrail{grid-auto-columns:calc((100vw - var(--gut) - 24px) / 3.3)}}
@media (min-width:900px){.xrail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;overflow:visible;scroll-snap-type:none;margin:0;padding:0}}
.stickybuy.sbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;padding:0 0 env(safe-area-inset-bottom);background:var(--ink);border-top:1px solid var(--line);transform:translateY(105%);visibility:hidden;transition:transform .28s var(--ease),visibility 0s linear .28s}
.stickybuy.sbar.on{transform:none;visibility:visible;transition:transform .28s var(--ease)}
.sbar .sbin{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto;display:flex;align-items:center;gap:12px;padding:10px 0}
.sbar .sbimg{flex:none;width:40px;height:50px;background:var(--ink2) center/cover no-repeat}
.sbar .sbtxt{flex:1;min-width:0;display:grid;gap:3px}
.sbar .sbname{flex:none;font:500 13px/1.3 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar .sbprice{font:500 13px/1 var(--ui);color:var(--gold)}
.sbar .btn{flex:none;padding:12px 20px}
@media (min-width:861px){.sbar .sbin{gap:18px}.sbar .sbname{font-size:14px}.sbar .btn{padding-inline:32px}}
@media (prefers-reduced-motion:reduce){.stickybuy.sbar,.stickybuy.sbar.on{transition:none}}
body:has(.stickybuy.sbar) .foot{padding-bottom:calc(34px + 76px + env(safe-area-inset-bottom))}
/* 16 Oct (variants): colour swatches = real links to each colour's page; size picker = buttons that swap the Add to bag button */
.vsw,.vsize{margin:18px 0 6px}
.vlab{font:500 13px/1.4 var(--ui);margin:0 0 10px;color:var(--mute,inherit)}.vlab b{font-weight:600;color:var(--bone)}
.vsws{display:flex;gap:10px;flex-wrap:wrap}
.vsws .sw{display:grid;justify-items:center;gap:6px;padding:4px;border:1px solid var(--line2);text-decoration:none;color:inherit;min-width:64px}
.vsws .sw img{width:56px;height:70px;object-fit:cover;display:block}
.vsws .sw span{font:500 11px/1.2 var(--ui);letter-spacing:.06em}
.vsws .sw[aria-current=page]{border-color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)}
.vsws .sw:hover,.vsws .sw:focus-visible{border-color:var(--gold)}
.vbtns{display:flex;gap:8px;flex-wrap:wrap}
.vbtns .size{min-width:64px;min-height:48px;padding:0 14px;background:transparent;border:1px solid var(--line2);color:var(--bone);font:600 12px var(--ui);letter-spacing:.08em;cursor:pointer}
.vbtns .size[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.vbtns .size.is-soldout{opacity:.45;text-decoration:line-through}
/* 16 Oct (search build): category copy, questions, guides */
.catintro{margin-top:14px;max-width:68ch}.catintro p{margin:0 0 8px}
.catcopy{padding:clamp(40px,6vw,80px) 0;max-width:72ch}
.catcopy h2,.guide h2{margin:28px 0 10px}.catcopy a,.guide a{text-decoration:underline;text-underline-offset:3px}
.faq{margin-top:34px}.faq details{border-top:1px solid var(--line2);padding:14px 0}.faq details:last-child{border-bottom:1px solid var(--line2)}
.faq summary{cursor:pointer;font:600 15px/1.4 var(--ui)}.faq .faqa{margin-top:10px}
.guide{padding:clamp(30px,5vw,70px) 0;max-width:72ch}.guide .lede{font-size:18px;margin:10px 0 24px}
.glist{list-style:none;padding:0;margin:clamp(30px,5vw,60px) 0;display:grid;gap:14px}
.glist a{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--line2);text-decoration:none;color:inherit}.glist b{font:500 20px/1.3 var(--display,inherit)}
/* 16 Oct pm: the 18+ door as a dialog over the page (html.ag is set in <head> when the w18 cookie is missing; site.js writes .agegate) */
html.ag{overflow:hidden}
html.ag body::after{content:"";position:fixed;inset:0;z-index:9998;background:rgba(20,19,18,.88)}
.agegate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px var(--gut)}
.agegate .agbox{--bone:#f1edea;--ink:#2b2a2a;--gold:#e7d3dd;--line2:rgba(241,237,234,.42);display:grid;gap:18px;justify-items:center;text-align:center;max-width:460px;
  padding:clamp(28px,5vw,46px);background:#2b2a2a;color:var(--bone);border:1px solid rgba(241,237,234,.16)}
.agegate .agbox img{width:180px;height:auto}.agegate h2{font-size:clamp(30px,4.4vw,46px);margin:0;color:var(--bone)}.agegate p{margin:0;color:rgba(241,237,234,.82)}
.agegate .btns{justify-content:center}
/* 16 Oct: the age line in every footer */
.foot .agel{margin:14px 0 0;font:500 12px/1.5 var(--ui);letter-spacing:.04em}