/* KEEL · design system
   Warm, calm, editorial: oat and sand like the packshot backdrop, soft daylight on warm oak and limewash, real dogs, and
   eleven clear product colors as the only bright notes (swatches and photographs, never UI fills). Espresso for the
   few dark sections (the banner, the last section, the footer). A deep cognac is the solid accent for small UI states on
   light grounds (focus rings, the active swatch, links on hover), a warm sand on espresso. The motif is the keel line:
   one long, low, gentle curve, deep at the front and rising toward the back, drawn as a fine stroke under the wordmark,
   under section titles, under the active filter and as the line the numbered steps sit on.
   Type (SIL OFL, self-hosted, latin + latin-ext): Gloock for the big titles (one weight, warm high contrast), Schibsted
   Grotesk for text and UI, Spline Sans Mono for sizes, measurements, prices and specs. Generous air, a precise grid,
   soft corners (8 px on pictures), pill buttons. No third-party request, no layout shift: every picture sits in a box of
   fixed ratio or carries width and height. */

/* ---------- fonts (latin + latin-ext) */
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gloock-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gloock-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/spline-sans-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/spline-sans-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens
   Contrast (WCAG 2.1): ink on oat 15.0, ink-2 on oat 10.3 / on sand 9.3, muted on oat 5.7 / sand 5.1 / surface 6.2 /
   sand-2 4.5, cognac on oat 5.7 / sand 5.1 / surface 6.2; dark-ink on espresso 13.3, dark-muted on espresso 5.9 / on
   espresso-2 5.1, warm sand on espresso 9.1 / espresso-2 8.0. Line colors are for hairlines only. */
:root{
  --oat:#F3EEE6; --sand:#E9E3D9; --sand-2:#DED6C9; --surface:#FBF9F5; --white:#FFFFFF;
  --ink:#1E1A17; --ink-2:#3D3630; --muted:#655C53; --deco:#B9AD9E; --line:#DDD3C6; --line-2:#CBBFAF;
  --espresso:#2A221D; --espresso-2:#352C25; --espresso-3:#43382F; --dark-ink:#F2ECE3; --dark-muted:#A99D90;
  --dark-line:rgba(242,236,227,.13); --dark-line-2:rgba(242,236,227,.26);
  --cognac:#8A4E27; --cognac-soft:#EADCCB; --warm:#D9C3A5;
  --serif:"Gloock",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:16px; --sec:80px; --hdr:62px; --max:1360px;
  --r:8px; --r-sm:6px; --r-lg:14px; --pill:999px;
  --ease:cubic-bezier(.22,.7,.2,1); --slow:cubic-bezier(.16,1,.3,1);
  --focus:var(--cognac);
  --shadow:0 1px 2px rgba(42,34,29,.05),0 12px 32px -18px rgba(42,34,29,.28);
}
@media (min-width:760px){ :root{ --gut:32px; --sec:112px; --hdr:70px; } }
@media (min-width:1100px){ :root{ --gut:56px; --sec:144px; --hdr:78px; } }

/* ---------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 24px); background:var(--oat); overflow-x:clip; }
html.lock{ overflow:hidden; }
body{ margin:0; min-height:100vh; background:var(--oat); color:var(--ink); font:400 16px/1.62 var(--sans); letter-spacing:-.003em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
svg{ flex:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ background:none; border:0; padding:0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4,h5,p,ul,ol,figure,dl,dd,blockquote,fieldset{ margin:0; }
ul,ol{ padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
b,strong{ font-weight:600; }
small{ font-size:inherit; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--ink); color:var(--oat); }
[hidden]{ display:none !important; }
.num{ font-variant-numeric:tabular-nums lining-nums; }
.mono{ font-family:var(--mono); font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.nw{ white-space:nowrap; }
.sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.muted{ color:var(--muted); }
.skip{ position:absolute; left:-9999px; top:10px; z-index:100; padding:12px 20px; border-radius:var(--pill); background:var(--ink); color:var(--oat); font-weight:600; font-size:14px; }
.skip:focus{ left:10px; }
.wrap{ width:100%; max-width:calc(var(--max) + var(--gut) * 2); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:calc(880px + var(--gut) * 2); }
/* dark grounds: a warm sand focus ring, light selection */
.banner,.final,.ftr,.navon .hdr,.navon .nav{ --focus:var(--warm); }
.banner ::selection,.final ::selection,.ftr ::selection{ background:var(--dark-ink); color:var(--espresso); }

/* ---------- type */
.h1,.h2,.buy__h1,.legal h1{ font-family:var(--serif); font-weight:400; color:inherit; text-wrap:balance; font-feature-settings:"kern","liga"; }
.h1{ font-size:clamp(40px,6.4vw,98px); line-height:1.02; letter-spacing:-.018em; }
.h2{ font-size:clamp(31px,3.9vw,58px); line-height:1.06; letter-spacing:-.012em; }
.h3{ font-weight:500; font-size:clamp(19px,1.55vw,23px); line-height:1.28; letter-spacing:-.012em; text-wrap:balance; }
.h4{ font-weight:600; font-size:16px; line-height:1.4; letter-spacing:-.006em; }
.lede{ max-width:46ch; font-size:16.5px; line-height:1.62; color:var(--ink-2); text-wrap:pretty; }
.lede p+p{ margin-top:10px; }
.lede--light{ color:rgba(242,236,227,.82); }
@media (min-width:1100px){ .lede{ font-size:17.5px; } }
.eyebrow{ margin-bottom:20px; font:600 11.5px/1.4 var(--sans); letter-spacing:.17em; text-transform:uppercase; color:var(--ink-2); }
.eyebrow--light{ color:rgba(242,236,227,.78); }
.label{ font:600 11px/1.5 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2); }
.fine{ font-size:13.5px; line-height:1.65; color:var(--muted); }
:is(.lede,.fine,.legal,.acc__b,.co__terms,.specs,.promise__b,.aboutx,.about,.notice,.habit__b,.buy__tag,.pinfo,.use__l,.note,.care,.buy__links,.safety li,.safety__ft,.shopintro__i,.step__b,.spot__cb,.buy__same,.mcard__on,.sg2__c) a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.24em; text-decoration-color:color-mix(in srgb,currentColor 38%,transparent); transition:text-decoration-color .25s,color .25s; }
:is(.lede,.fine,.legal,.acc__b,.co__terms,.specs,.promise__b,.aboutx,.about,.notice,.habit__b,.buy__tag,.pinfo,.use__l,.note,.care,.buy__links,.safety li,.safety__ft,.shopintro__i,.step__b,.spot__cb,.buy__same,.mcard__on,.sg2__c) a:hover{ color:var(--cognac); text-decoration-color:currentColor; }
:is(.banner__b,.ftr__safe,.lede--light) a:hover{ color:var(--warm); }
.tlink{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font:600 14px/1.2 var(--sans); color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px; text-decoration-color:color-mix(in srgb,currentColor 30%,transparent); transition:text-decoration-color .3s,color .3s; }
.tlink:hover{ text-decoration-color:currentColor; color:var(--cognac); }
:is(.banner,.final,.ftr) .tlink:hover{ color:var(--warm); }
.tlink svg{ transition:transform .5s var(--slow); }
.tlink:hover svg{ transform:translateX(4px); }
.tlink--center{ display:flex; justify-content:center; width:100%; }

/* ---------- the motif: the keel line */
.kmark{ display:block; width:64px; height:auto; color:var(--deco); overflow:visible; }
.sec__k{ margin-top:22px; color:var(--cognac); opacity:.8; }
.sec__k + .lede,.sec__k + div > .lede{ margin-top:20px; }
.kline{ display:block; width:100%; height:26px; overflow:visible; color:var(--line-2); }
.lk{ display:block; width:auto; height:30px; overflow:visible; }
.logo__in{ display:inline-flex; align-items:center; }
.lk .kl__p{ transition:transform .8s var(--slow); transform-origin:50% 90%; }
.logo:hover .lk .kl__p{ transform:scaleX(1.04); }
.tick{ position:relative; display:block; flex:none; width:6px; height:6px; margin-top:.66em; border-radius:50%; background:var(--deco); }
.dot{ display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--c,#ccc); box-shadow:inset 0 0 0 1px rgba(30,26,23,.16); flex:none; }
.eta__k{ width:26px; flex:none; margin-top:8px; color:var(--cognac); }

/* ---------- buttons: pills */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 28px; border:1px solid var(--ink); border-radius:var(--pill); background:var(--ink); color:var(--oat); font:600 14.5px/1.1 var(--sans); letter-spacing:.005em; text-align:center; white-space:nowrap; cursor:pointer; transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease); }
.btn:hover{ background:var(--espresso-3); border-color:var(--espresso-3); }
.btn:active{ transform:translateY(1px); }
.btn svg{ transition:transform .5s var(--slow); }
.btn:hover svg:last-child{ transform:translateX(3px); }
.btn--lg{ min-height:56px; padding:0 32px; }
.btn--full{ display:flex; width:100%; }
.btn--grow{ flex:1 1 auto; min-width:0; }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--line:hover{ background:transparent; border-color:var(--ink); }
.btn--light{ background:var(--dark-ink); border-color:var(--dark-ink); color:var(--espresso); }
.btn--light:hover{ background:var(--white); border-color:var(--white); }
.btn--glass{ background:rgba(251,249,245,.66); color:var(--ink); border-color:rgba(30,26,23,.2); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); }
.btn--glass:hover{ background:rgba(251,249,245,.92); border-color:var(--ink); }
.btn[disabled],.btn[aria-disabled="true"]{ background:var(--sand-2); border-color:var(--sand-2); color:var(--muted); cursor:not-allowed; transform:none; }
.btn[disabled] svg{ transform:none !important; }
.btn__sep{ width:1px; height:18px; background:currentColor; opacity:.3; }
.iconbtn{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--pill); color:inherit; transition:background .3s,border-color .3s,opacity .3s,color .3s; }
.iconbtn:hover{ background:rgba(30,26,23,.06); }
.iconbtn--line{ border:1px solid var(--line-2); }
.iconbtn--line:hover{ border-color:var(--ink); background:transparent; }
.iconbtn[disabled]{ opacity:.3; cursor:default; }
.iconbtn[disabled]:hover{ border-color:var(--line-2); }
.pnote{ font-size:12.5px; font-weight:400; color:var(--muted); }

/* ---------- header: oat glass, a hairline once the page scrolls */
.hdr{ position:sticky; top:0; z-index:40; color:var(--ink); background:rgba(243,238,230,.88); -webkit-backdrop-filter:saturate(1.1) blur(16px); backdrop-filter:saturate(1.1) blur(16px); box-shadow:0 1px 0 transparent; transition:background .4s var(--ease),box-shadow .4s var(--ease); }
.hdr.is-scrolled{ box-shadow:0 1px 0 var(--line); }
.hdr__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; height:var(--hdr); }
.hdr__burger{ justify-self:start; margin-left:-11px; }
.hdr__burger .i-close,.navon .hdr__burger .i-menu{ display:none; }
.navon .hdr__burger .i-close{ display:block; }
.logo{ justify-self:center; display:inline-flex; align-items:center; height:48px; padding-inline:4px; color:inherit; }
.hdr__end{ justify-self:end; display:flex; align-items:center; }
.cartbtn{ position:relative; display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 2px 0 10px; margin-right:-2px; font:600 13.5px/1 var(--sans); }
.cartbtn__t{ display:none; }
.cartbtn__n{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--pill); background:var(--ink); color:var(--oat); font:500 10.5px/1 var(--mono); letter-spacing:0; }
.cartbtn.bump .cartbtn__n{ animation:bump .6s var(--ease); }
@keyframes bump{ 35%{ transform:scale(1.25); } }
/* home and about: the header floats over the light photograph until the page scrolls (the ink stays the same) */
.is-home .hdr,.is-light-top .hdr{ position:fixed; left:0; right:0; }
.js .is-home .hdr:not(.is-scrolled),.js .is-light-top .hdr:not(.is-scrolled){ background:linear-gradient(180deg,rgba(243,238,230,.82) 0%,rgba(243,238,230,.5) 62%,rgba(243,238,230,0) 100%); -webkit-backdrop-filter:none; backdrop-filter:none; }
/* the mobile menu is espresso: the header turns dark with it */
body.navon .hdr{ background:var(--espresso) !important; color:var(--dark-ink) !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 1px 0 var(--dark-line); }
body.navon .hdr .cartbtn__n{ background:var(--dark-ink) !important; color:var(--espresso) !important; }
body.navon .hdr .iconbtn:hover{ background:rgba(242,236,227,.1); }
@media (min-width:1100px){
  .hdr__in{ grid-template-columns:auto 1fr auto; gap:40px; }
  .hdr__burger{ display:none; }
  .logo{ grid-column:1; justify-self:start; padding-inline:0; }
  .lk{ height:32px; }
  .nav{ grid-column:2; justify-self:center; }
  .hdr__end{ grid-column:3; }
  .nav__main{ display:flex; gap:clamp(18px,2.2vw,34px); }
  .nav__main a{ position:relative; display:inline-flex; align-items:center; height:44px; font:500 14px/1 var(--sans); color:var(--ink-2); transition:color .3s; }
  .nav__main a::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:var(--line-2); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--slow); }
  .nav__main a:hover{ color:var(--ink); }
  .nav__main a:hover::after{ transform:scaleX(1); }
  .nav__main a[aria-current]{ color:var(--ink); }
  .nav__main a[aria-current]::after{ transform:scaleX(1); background:var(--cognac); }
  .nav__x{ display:none; }
  .cartbtn__t{ display:inline; }
}
@media (max-width:1099px){
  .nav{ position:fixed; left:0; right:0; top:var(--navtop,var(--hdr)); bottom:0; z-index:39; display:flex; flex-direction:column; padding:8px var(--gut) calc(40px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; background:var(--espresso); color:var(--dark-ink); visibility:hidden; opacity:0; transition:opacity .4s var(--ease),visibility 0s .4s; }
  .navon .nav{ visibility:visible; opacity:1; transition:opacity .4s var(--ease); }
  .nav__main li{ border-bottom:1px solid var(--dark-line); opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease),transform .6s var(--slow); }
  .navon .nav__main li{ opacity:1; transform:none; }
  .navon .nav__main li:nth-child(2){ transition-delay:.04s; } .navon .nav__main li:nth-child(3){ transition-delay:.08s; }
  .navon .nav__main li:nth-child(4){ transition-delay:.12s; } .navon .nav__main li:nth-child(5){ transition-delay:.16s; }
  .navon .nav__main li:nth-child(6){ transition-delay:.2s; }
  .nav__main a{ display:flex; align-items:center; min-height:62px; font:400 28px/1.1 var(--serif); letter-spacing:-.01em; }
  .nav__main a[aria-current]{ color:var(--warm); }
  .nav__x{ margin-top:30px; display:grid; gap:12px; }
  .nav__lbl{ margin-top:12px; font:600 11px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--dark-muted); }
  .nav__sub{ display:flex; flex-wrap:wrap; gap:4px 20px; }
  .nav__sub a{ display:inline-flex; align-items:center; min-height:40px; font-size:15px; color:rgba(242,236,227,.88); }
  .nav__tag{ display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid var(--dark-line); font-size:14px; color:var(--dark-muted); }
  .nav__mark{ width:46px; color:var(--warm); }
}

/* ---------- sections */
.sec{ padding-block:var(--sec); }
.sec--tight{ padding-block:calc(var(--sec) * .55); }
.sec--flush{ padding-top:0; }
.sec--sand{ background:var(--sand); }
.sec--surface{ background:var(--surface); }
.sec__head{ display:grid; gap:20px; margin-bottom:clamp(36px,5vw,64px); }
.sec__head .h2{ max-width:18ch; }
.sec__side{ display:grid; gap:14px; align-content:end; justify-items:start; }
@media (min-width:900px){
  .sec__head{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:end; gap:48px; }
  .sec__head--stack{ grid-template-columns:1fr; }
}
.sec__divider{ margin-top:clamp(48px,7vw,96px); height:30px; color:var(--line-2); }
.note{ display:flex; align-items:center; gap:16px; margin-top:clamp(28px,4vw,44px); padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-2); max-width:70ch; }
.note__k{ width:48px; color:var(--cognac); flex:none; }
.note svg:not(.kmark){ flex:none; color:var(--muted); }
/* the reveal: a calm rise once in view (none without script or with reduced motion) */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease),transform 1.1s var(--slow); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- placeholders: calm sand blocks while a photograph is missing (the product, its family, its color) */
.ph{ position:relative; display:grid; place-items:center; width:100%; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(170deg,var(--sand) 0%,var(--sand-2) 100%); color:var(--ink-2); container-type:inline-size; }
.ph__in{ display:grid; justify-items:center; gap:8px; padding:12% 10%; text-align:center; }
.ph__sw{ width:clamp(14px,8cqi,30px); height:clamp(14px,8cqi,30px); border-radius:50%; background:var(--c,var(--deco)); box-shadow:0 0 0 4px rgba(251,249,245,.7),inset 0 0 0 1px rgba(30,26,23,.14); margin-bottom:6px; }
.ph__in b{ font:400 clamp(15px,8.5cqi,30px)/1.1 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.ph__in span{ font:500 clamp(9.5px,3.4cqi,12px)/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ph__k{ position:absolute; left:50%; bottom:9%; width:34%; transform:translateX(-50%); color:var(--line-2); }
@container (max-width:150px){ .ph__in b,.ph__in span{ display:none; } .ph__sw{ margin:0; } .ph__k{ display:none; } }
.ph--life{ aspect-ratio:16/9; background:linear-gradient(160deg,#F1EBE1 0%,var(--sand) 60%,var(--sand-2) 100%); }
.ph--life .ph__line{ position:absolute; left:12%; right:12%; top:56%; width:auto; height:12%; color:var(--line-2); }
.ph--dark{ background:linear-gradient(170deg,var(--espresso-3) 0%,var(--espresso) 100%); }
.ph--dark .ph__line{ color:rgba(217,195,165,.35); }
.ph--measure,.ph--habit-fit,.ph--habit-first,.ph--habit-check{ aspect-ratio:4/5; }

/* ---------- hero: a light photograph, dark ink on its calm left third (desktop) or top third (phones) */
.hero{ position:relative; display:grid; color:var(--ink); background:var(--oat); overflow:hidden; }
.hero__media{ position:relative; grid-row:2; aspect-ratio:4/5; margin-top:-26vw; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%); mask-image:linear-gradient(180deg,transparent 0,#000 30%); }
.hero__media picture,.hero__media img,.hero__media .ph{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero__media .ph{ aspect-ratio:auto; }
.hero__veil{ display:none; position:absolute; inset:0; pointer-events:none; }
.hero__in{ position:relative; z-index:1; grid-row:1; padding-top:calc(var(--hdr) + 28px); padding-bottom:0; }
.hero__txt{ max-width:560px; }
.hero__h1{ max-width:12ch; }
.hero__sub{ max-width:38ch; margin-top:20px; font-size:16.5px; line-height:1.58; color:var(--ink-2); text-wrap:pretty; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
@media (min-width:900px){
  .hero{ display:flex; align-items:center; min-height:clamp(640px,92vh,980px); background:var(--sand); }
  .hero__media{ position:absolute; inset:0; aspect-ratio:auto; margin:0; -webkit-mask-image:none; mask-image:none; }
  .hero__media picture,.hero__media img{ object-position:62% 55%; }
  .hero__media img{ transform-origin:62% 100%; transform:scale(1.1); }
  .hero__veil{ display:block; background:linear-gradient(90deg,rgba(243,238,230,.86) 0%,rgba(243,238,230,.58) 30%,rgba(243,238,230,0) 56%); }
  .hero__in{ padding-top:var(--hdr); padding-bottom:0; }
  .hero__sub{ font-size:18px; }
  .hero__cta{ margin-top:36px; }
}
.facts-sec{ border-bottom:1px solid var(--line); background:var(--oat); }
.facts{ display:grid; gap:0; }
.facts li{ display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 0; font-size:14.5px; font-weight:500; color:var(--ink-2); border-top:1px solid var(--line); }
.facts li:first-child{ border-top:0; }
.facts__k{ width:30px; color:var(--cognac); }
@media (min-width:900px){
  .facts{ grid-template-columns:repeat(3,1fr); }
  .facts li{ border-top:0; min-height:88px; padding:0 32px; border-left:1px solid var(--line); }
  .facts li:first-child{ border-left:0; padding-left:0; }
}

/* ---------- breeds: four harness pages, four dogs */
.breeds{ display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) 6px; scroll-padding-inline:var(--gut); scrollbar-width:none; }
.breeds::-webkit-scrollbar{ display:none; }
.breed{ scroll-snap-align:start; }
.breed__a{ display:flex; flex-direction:column; height:100%; }
.breed__img{ display:block; overflow:hidden; border-radius:var(--r); background:var(--sand); }
.breed__img img,.breed__img .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.4s var(--slow); }
.breed__a:hover .breed__img img{ transform:scale(1.03); }
.breed__t{ display:grid; gap:8px; padding:20px 2px 0; }
.breed__t .h3{ font:400 clamp(24px,2.1vw,30px)/1.1 var(--serif); letter-spacing:-.01em; }
.breed__b{ font-size:15px; line-height:1.55; color:var(--muted); text-wrap:pretty; }
.breed__p{ display:flex; align-items:center; gap:10px; margin-top:auto; padding:16px 2px 4px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.breed__p .mono{ margin-left:auto; font-weight:400; }
.breed__p svg{ transition:transform .5s var(--slow); }
.breed__a:hover .breed__p svg{ transform:translateX(4px); }
.breed__a:hover .breed__p{ border-color:var(--ink); }
.breed__t{ margin-bottom:16px; }
@media (min-width:760px){ .breeds{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); overflow:visible; margin:0; padding:0; gap:28px 20px; } }
@media (min-width:1100px){ .breeds{ grid-template-columns:repeat(4,1fr); gap:24px; } }

/* ---------- spotlight */
.spot{ display:grid; gap:44px; }
.spot__media{ position:relative; padding-bottom:18%; }
.spot__m{ display:block; overflow:hidden; border-radius:var(--r); background:var(--sand-2); }
.spot__m img,.spot__m .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.spot__m--1{ width:82%; }
.spot__m--2{ position:absolute; right:0; bottom:0; width:44%; box-shadow:0 0 0 6px var(--sand),var(--shadow); }
.spot__txt{ display:grid; gap:34px; align-content:center; }
.spot__items{ display:grid; gap:0; border-top:1px solid var(--line-2); }
.spot__items li{ display:grid; grid-template-columns:40px 1fr; gap:4px 14px; padding:20px 0; border-bottom:1px solid var(--line-2); }
.spot__n{ font-size:12px; color:var(--cognac); padding-top:3px; }
.spot__cb{ margin-top:4px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.spot__buy{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.spot__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-weight:600; }
.spot__price .mono{ font-size:18px; font-weight:400; }
.spot__price .pnote{ flex-basis:100%; }
@media (min-width:600px){ .spot__items{ grid-template-columns:1fr 1fr; column-gap:28px; border-top:0; } .spot__items li{ border-top:1px solid var(--line-2); border-bottom:0; } }
@media (min-width:1100px){ .spot{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(56px,7vw,120px); align-items:center; } }

/* ---------- color pickers: round swatches, a thin ring on the chosen one, its name beside them */
.pick__l{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; margin-bottom:14px; font-size:14px; color:var(--ink-2); }
.pick__l b{ font-weight:600; color:var(--ink); }
.pick__n{ margin-left:auto; font:400 12px/1 var(--mono); color:var(--muted); }
.cpick__b{ display:flex; flex-wrap:wrap; gap:10px 9px; }
.sw{ position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; transition:transform .3s var(--ease); }
.sw__c{ width:30px; height:30px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(30,26,23,.14); transition:transform .35s var(--ease); }
.sw::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 1px transparent; transition:box-shadow .3s var(--ease); }
.sw:hover .sw__c{ transform:scale(.92); }
.sw:hover::after{ box-shadow:0 0 0 1px var(--line-2); }
.sw[aria-checked="true"]::after{ box-shadow:0 0 0 1.5px var(--ink); }
.sw[aria-checked="true"] .sw__c{ transform:scale(.82); }
.sw:focus-visible{ outline:2px solid var(--cognac); outline-offset:3px; }

/* ---------- match: eleven colors, the four families */
.match__top{ display:grid; gap:32px; margin-bottom:clamp(40px,5vw,64px); }
.match__img{ overflow:hidden; border-radius:var(--r); background:var(--sand); }
.match__img img,.match__img .ph{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.match__txt .h2{ max-width:14ch; }
.match__txt .lede{ margin-top:22px; }
.match__bar{ padding:20px 0 26px; border-top:1px solid var(--line); }
.match__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 14px; margin-top:8px; }
@media (min-width:1100px){
  .match__top{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:end; gap:64px; }
  .match__bar{ display:flex; align-items:center; justify-content:space-between; gap:32px; }
  .match__bar .pick__l{ margin:0; flex:none; }
  .match__bar .pick__n{ margin-left:14px; }
  .match__grid{ grid-template-columns:repeat(4,1fr); gap:24px; }
}
.mcard{ display:flex; flex-direction:column; }
.mcard__a{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:start; }
.mcard__img{ grid-column:1 / -1; display:block; overflow:hidden; border-radius:var(--r); background:var(--sand); margin-bottom:12px; }
.mcard__img img,.mcard__img .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.2s var(--slow),opacity .4s var(--ease); }
.mcard__a:hover .mcard__img img{ transform:scale(1.03); }
.mcard__t{ display:grid; gap:2px; }
.mcard__t b{ font-weight:600; font-size:15px; }
.mcard__c{ font-size:13.5px; color:var(--muted); }
.mcard__p{ font-size:14px; padding-top:1px; }
.mcard__on{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2); }
.mcard__on .label{ font-size:10px; margin-right:4px; color:var(--muted); }

/* ---------- banner: the brand idea on the dusk picture */
.banner{ position:relative; display:grid; color:var(--dark-ink); background:var(--espresso); overflow:hidden; }
.banner__media{ position:relative; aspect-ratio:5/4; -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 38%); mask-image:linear-gradient(0deg,transparent 0,#000 38%); }
.banner__media img,.banner__media .ph{ width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:62% 50%; }
.banner__shade{ display:none; position:absolute; inset:0; }
.banner__in{ position:relative; z-index:1; margin-top:-12vw; padding-bottom:var(--sec); }
.banner__txt{ max-width:620px; }
.banner__t{ max-width:11ch; }
.banner__b{ margin-top:24px; max-width:44ch; font-size:17px; line-height:1.65; color:rgba(242,236,227,.86); }
.banner__b p+p{ margin-top:12px; }
.banner__line{ margin-top:40px; width:min(100%,420px); height:34px; color:var(--warm); }
@media (min-width:900px){
  .banner{ display:flex; align-items:center; min-height:clamp(600px,82vh,860px); }
  .banner__media{ position:absolute; inset:0; aspect-ratio:auto; -webkit-mask-image:none; mask-image:none; }
  .banner__shade{ display:block; background:linear-gradient(90deg,rgba(42,34,29,.94) 0%,rgba(42,34,29,.74) 34%,rgba(42,34,29,0) 66%); }
  .banner__in{ margin:0; padding-block:var(--sec); }
}

/* ---------- measure: two numbers, three steps on the keel line, the compact chart */
.measure{ display:grid; gap:44px; }
.measure__img{ overflow:hidden; border-radius:var(--r); background:var(--sand); }
.measure__img img,.measure__img .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.measure__txt{ display:grid; gap:40px; align-content:center; min-width:0; }
.measure__chart{ display:grid; gap:12px; }
.measure__cta{ margin-top:-8px; }
@media (min-width:1100px){ .measure{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(56px,7vw,112px); align-items:center; } }
.steps{ position:relative; }
.steps__line{ display:none; }
.steps__l{ display:grid; gap:22px; }
.step{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:4px 14px; }
.step .h4,.step p,.step .step__b{ grid-column:2; }
.step p{ font-size:15px; line-height:1.55; color:var(--ink-2); }
.step__n{ grid-row:1 / span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:var(--oat); font-size:11.5px; color:var(--cognac); }
.sec--sand .step__n{ background:var(--sand); }
.step__b{ font-size:15px; line-height:1.55; color:var(--ink-2); }
@media (min-width:900px){
  .steps__line{ display:block; position:absolute; left:0; top:0; width:100%; height:68px; color:var(--line-2); }
  .steps__l{ grid-template-columns:repeat(var(--n,3),1fr); gap:24px; }
  .steps--5 .steps__l{ --n:5; }
  .step{ grid-template-columns:1fr; justify-items:center; text-align:center; padding-top:calc(var(--y) * 1px + 40px); }
  .step .h4,.step p,.step .step__b{ grid-column:1; }
  .step__n{ position:absolute; grid-row:auto; top:calc(var(--y) * 1px + 6px - 17px); left:50%; transform:translateX(-50%); }
  .step p,.step__b{ max-width:30ch; }
}
/* size tables: mono figures, hairline rows, the size column set apart */
.szt-wrap{ overflow-x:auto; }
.szt{ min-width:100%; font-size:14px; }
.szt th,.szt td{ padding:12px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.szt th:first-child,.szt td:first-child{ padding-left:0; }
.szt thead th{ padding-top:0; font:600 10.5px/1.4 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); border-bottom-color:var(--line-2); }
.szt tbody th{ width:56px; font:600 15px/1 var(--sans); }
.szt td{ font-size:14px; color:var(--ink-2); }
.szt tr:last-child th,.szt tr:last-child td{ border-bottom:0; }
.szt--compact{ min-width:0; width:auto; }
.szt--compact td{ padding-right:48px; }
.unitbox{ display:grid; gap:14px; }
.units{ display:none; justify-self:start; padding:3px; border-radius:var(--pill); background:var(--sand); border:1px solid var(--line); }
.js .units{ display:inline-flex; }
.units button{ min-height:36px; padding:0 16px; border-radius:var(--pill); font-size:13px; font-weight:600; color:var(--muted); transition:background .3s,color .3s; }
.units button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(42,34,29,.12); }
.js [data-unitbox][data-show="in"] [data-unit-t="cm"],.js [data-unitbox][data-show="cm"] [data-unit-t="in"]{ display:none; }
.unitbox .szt + .szt{ margin-top:24px; }
.js .unitbox .szt + .szt{ margin-top:0; }

/* ---------- product grids, cards and rows */
.grid{ display:grid; gap:32px 14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 20px; } .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .grid--4,.grid--shop{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:52px 24px; } }
.grid--pairs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:760px){ .grid--pairs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.card{ position:relative; display:flex; flex-direction:column; min-width:0; }
.card__media{ position:relative; display:block; overflow:hidden; border-radius:var(--r); background:var(--sand); aspect-ratio:4/5; }
.sec--sand .card__media{ background:var(--sand-2); }
.card__media img,.card__media .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s var(--ease),transform 1.4s var(--slow); }
.card__media .ph{ aspect-ratio:auto; }
.card__alt{ opacity:0; }
@media (hover:hover){
  .card:hover .card__alt{ opacity:1; }
  .card:hover .card__img{ transform:scale(1.03); }
}
.card__body{ display:flex; flex-direction:column; flex:1; gap:4px; padding:14px 2px 0; }
.card__name{ font:600 15.5px/1.3 var(--sans); letter-spacing:-.006em; }
.card__sub{ font-size:13.5px; line-height:1.45; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; }
@media (max-width:759px){ .card__sub{ -webkit-line-clamp:3; } }
/* the harness packshot stands small in its frame: a little closer in the cards, the match row and the 'Same color' rows */
.card__media img[src*="/c/harness-"],.mcard__img img[src*="/c/harness-"]{ transform:scale(1.3); }
.mcard__a:hover .mcard__img img[src*="/c/harness-"]{ transform:scale(1.34); }
.card__price{ font-size:14.5px; }
.cdots{ display:flex; align-items:center; gap:8px; min-width:0; }
.cdots__d{ display:flex; align-items:center; }
.cdots__d i{ width:12px; height:12px; margin-right:-3px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1.5px var(--oat),inset 0 0 0 1px rgba(30,26,23,.14); }
.sec--sand .cdots__d i{ box-shadow:0 0 0 1.5px var(--sand),inset 0 0 0 1px rgba(30,26,23,.14); }
.sec--surface .cdots__d i{ box-shadow:0 0 0 1.5px var(--surface),inset 0 0 0 1px rgba(30,26,23,.14); }
.cdots__more{ margin-left:9px; font-size:11px; color:var(--muted); }
.cdots__t{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.card.in-filter{ animation:rise .7s var(--slow) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.row{ position:relative; }
.row__track{ display:grid; grid-auto-flow:column; grid-auto-columns:64%; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) 8px; scrollbar-width:none; }
.row__track::-webkit-scrollbar{ display:none; }
.row__track .card{ scroll-snap-align:start; }
.row__nav{ display:none; }
@media (min-width:760px){ .row__track{ grid-auto-columns:31%; gap:20px; } }
@media (min-width:1100px){
  .row__track{ grid-auto-columns:calc((100% - 72px) / 4); gap:24px; margin:0; padding:0 0 8px; scroll-padding-inline:0; }
  .row__nav{ display:flex; gap:8px; justify-content:flex-end; margin-top:24px; }
  .row--static .row__nav{ display:none; }
}

/* ---------- habits, promises */
.habits{ display:grid; gap:40px; }
.habit__media{ overflow:hidden; border-radius:var(--r); background:var(--sand); }
.habit__media img,.habit__media .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.habit__txt{ display:grid; gap:10px; padding-top:22px; }
.habit__n{ font-size:12px; color:var(--cognac); }
.habit__b{ font-size:15px; line-height:1.6; color:var(--ink-2); max-width:36ch; }
@media (min-width:760px){ .habits{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.promises{ display:grid; gap:30px; }
.promises li{ display:grid; gap:8px; align-content:start; }
.promise__n{ font-size:12px; color:var(--cognac); }
.promise__k{ width:40px; margin:2px 0 6px; color:var(--cognac); opacity:.8; }
.promise__b{ font-size:14.5px; line-height:1.58; color:var(--muted); max-width:30ch; }
@media (min-width:600px){ .promises{ grid-template-columns:repeat(2,1fr); gap:36px 28px; } }
@media (min-width:1100px){ .promises{ grid-template-columns:repeat(4,1fr); } }

/* ---------- questions */
.faq{ display:grid; gap:40px; }
.faq__head .lede{ margin-top:20px; font-size:15.5px; }
@media (min-width:1000px){
  .faq{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:80px; align-items:start; }
  .faq__head{ position:sticky; top:calc(var(--hdr) + 40px); }
}
.acc{ border-top:1px solid var(--line-2); }
.acc__i{ border-bottom:1px solid var(--line-2); }
.acc__i summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:18px 0; cursor:pointer; list-style:none; font:500 16.5px/1.4 var(--sans); letter-spacing:-.006em; }
.acc__i summary::-webkit-details-marker{ display:none; }
.acc__i summary i{ position:relative; flex:none; width:16px; height:16px; }
.acc__i summary i::before,.acc__i summary i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.3px; margin-top:-.65px; background:currentColor; transition:transform .5s var(--slow); }
.acc__i summary i::after{ transform:rotate(90deg); }
.acc__i[open] summary i::after{ transform:rotate(0); }
.acc__i summary:hover{ color:var(--cognac); }
.acc__b{ padding:0 0 24px; max-width:62ch; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.acc__b p+p{ margin-top:10px; }
.acc__i[data-med] summary span::before{ content:""; display:inline-block; width:6px; height:6px; margin:0 10px 2px 0; border-radius:50%; background:var(--cognac); vertical-align:middle; }

/* ---------- final */
.final{ position:relative; padding-block:calc(var(--sec) * 1.05); background:var(--espresso-2); color:var(--dark-ink); text-align:center; overflow:hidden; }
.final__in{ display:grid; justify-items:center; gap:26px; }
.final__line{ width:min(100%,560px); height:52px; color:var(--warm); opacity:.9; }
.final__t{ max-width:14ch; }
.final .lede{ max-width:46ch; margin-inline:auto; }
.final__cta{ margin-top:8px; }

/* ---------- footer: espresso */
.ftr{ background:var(--espresso); color:var(--dark-ink); padding:clamp(64px,8vw,112px) 0 calc(36px + env(safe-area-inset-bottom)); font-size:14.5px; }
.ftr__top{ display:grid; gap:44px; }
.logo--ftr{ height:auto; padding:0; }
.logo--ftr .lk{ height:38px; }
.logo--ftr .kl__p{ fill:var(--warm); }
.ftr__tag{ margin-top:22px; font:400 22px/1.25 var(--serif); letter-spacing:-.01em; max-width:20ch; }
.ftr__meaning{ margin-top:12px; max-width:42ch; color:var(--dark-muted); font-size:14px; line-height:1.6; }
.ftr__mail{ margin-top:22px; }
.ftr__mail a{ display:inline-flex; align-items:center; gap:10px; min-height:40px; color:var(--dark-ink); border-bottom:1px solid var(--dark-line-2); }
.ftr__mail a:hover{ color:var(--warm); border-color:var(--warm); }
.ftr__col h2{ margin-bottom:14px; font:600 11px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--dark-muted); }
.ftr__col ul{ display:grid; gap:2px; }
.ftr__col a{ display:inline-flex; align-items:center; min-height:34px; color:rgba(242,236,227,.88); transition:color .3s; }
.ftr__col a:hover{ color:var(--warm); }
.ftr__line{ margin:clamp(44px,6vw,72px) 0 28px; height:30px; color:var(--dark-line-2); }
.ftr__bot{ display:grid; gap:20px; font-size:13px; line-height:1.6; color:var(--dark-muted); }
.ftr__co,.ftr__end{ display:grid; gap:8px; }
.ftr__op{ color:rgba(242,236,227,.82); max-width:62ch; }
.ftr__safe{ color:rgba(242,236,227,.82); max-width:56ch; }
@media (max-width:759px){
  .ftr__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 20px; }
  .ftr__brand,.ftr__col--info{ grid-column:1 / -1; }
  .ftr__col--info ul{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
  .ftr__col a{ line-height:1.35; padding:5px 0; }
}
@media (min-width:760px){
  .ftr__top{ grid-template-columns:repeat(3,1fr); }
  .ftr__brand{ grid-column:1 / -1; }
  .ftr__bot{ grid-template-columns:1fr 1fr; gap:40px; }
}
@media (min-width:1100px){
  .ftr__top{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:48px; }
  .ftr__brand{ grid-column:auto; }
}

/* ---------- page heads, shop */
.pagehead{ padding:calc(var(--hdr) * .2 + 40px) 0 clamp(36px,5vw,64px); }
.pagehead__in{ display:grid; gap:22px; }
@media (min-width:900px){ .pagehead__in{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:end; gap:56px; } }
.pagehead--sm{ padding-bottom:28px; }
.pagehead--sm .h1{ font-size:clamp(36px,4.6vw,64px); }
.pagehead--sm .lede{ margin-top:14px; }
.shopbar{ position:sticky; top:var(--hdr); z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-inline:calc(var(--gut) * -1); padding:10px var(--gut); background:rgba(243,238,230,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.fchip{ position:relative; display:inline-flex; align-items:center; gap:8px; flex:none; min-height:42px; padding:0 14px 6px; font-size:14px; font-weight:600; color:var(--muted); transition:color .3s; }
.fchip .mono{ font-size:11px; font-weight:400; color:var(--muted); }
.fchip__k{ position:absolute; left:12px; right:12px; bottom:4px; width:auto; height:9px; color:var(--cognac); opacity:0; transform:scaleX(.4); transform-origin:0 50%; transition:opacity .4s var(--ease),transform .6s var(--slow); }
.fchip:hover{ color:var(--ink); }
.fchip[aria-pressed="true"]{ color:var(--ink); }
.fchip[aria-pressed="true"] .fchip__k{ opacity:1; transform:none; }
.shopbar__n{ display:none; font-size:12px; color:var(--muted); }
@media (min-width:760px){ .shopbar__n{ display:block; } }
.pagehead__side{ display:grid; }
.shopbar + .grid{ margin-top:24px; }
.chips.is-more{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); }
@media (max-width:479px){ .chips{ gap:0; } .fchip{ gap:5px; padding:0 8px 6px; font-size:13.5px; } .fchip__k{ left:6px; right:6px; } }
.grid--shop{ margin-top:28px; }
.note--shop{ margin-top:64px; }

/* ---------- product page */
.crumb{ display:flex; flex-wrap:wrap; gap:6px 10px; padding:22px 0 18px; font-size:13px; color:var(--muted); }
.crumb a:hover{ color:var(--ink); }
.crumb [aria-current]{ color:var(--ink-2); }
.pdp{ display:grid; gap:28px; padding-bottom:clamp(48px,6vw,96px); }
@media (min-width:1100px){ .pdp{ grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:clamp(48px,5vw,88px); align-items:start; } .gal{ position:sticky; top:calc(var(--hdr) + 20px); } }
.gal{ display:grid; gap:12px; min-width:0; }
.gal__main{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:var(--r); background:var(--sand); scrollbar-width:none; }
.gal__main::-webkit-scrollbar{ display:none; }
.gal__slide{ scroll-snap-align:start; aspect-ratio:4/5; overflow:hidden; }
.gal__slide img,.gal__slide .ph{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; }
.gal__count{ justify-self:end; align-self:start; height:26px; margin-top:-46px; margin-right:12px; padding:0 10px; border-radius:var(--pill); background:rgba(251,249,245,.86); font-size:11px; line-height:26px; z-index:1; position:relative; }
.gal__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gal__thumbs button{ display:block; overflow:hidden; border-radius:var(--r-sm); background:var(--sand); box-shadow:0 0 0 1px transparent; opacity:.66; transition:opacity .3s,box-shadow .3s; }
.gal__thumbs button.on{ opacity:1; box-shadow:0 0 0 1.5px var(--ink); }
.gal__thumbs button:hover{ opacity:1; }
.gal__th{ display:block; aspect-ratio:4/5; }
.gal__th img,.gal__th .ph{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; }
.gal__note{ font-size:12.5px; color:var(--muted); }
.buy__in{ display:grid; gap:22px; }
.buy__cat a{ font:600 11px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.buy__cat a:hover{ color:var(--cognac); }
.buy__h1{ margin-top:-12px; font-size:clamp(36px,3.6vw,54px); line-height:1.04; letter-spacing:-.014em; }
.buy__sub{ margin-top:-12px; font-size:15.5px; color:var(--ink-2); }
.buy__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
.buy__price .mono{ font-size:22px; }
.buy__tag{ font-size:16px; line-height:1.55; color:var(--ink-2); padding-bottom:22px; border-bottom:1px solid var(--line); }
.buy__color{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); }
.cpick{ display:block; }
.sizes{ display:grid; gap:12px; padding:2px; border-radius:var(--r); }
.sizes__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sizes__hd .pick__l{ margin:0; }
.sizes__hd b:not(.is-set){ color:var(--muted); font-weight:500; }
.sizes__guide{ display:inline-flex; align-items:center; gap:8px; min-height:36px; font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--line-2); }
.sizes__guide:hover{ color:var(--cognac); text-decoration-color:currentColor; }
.sizes__b{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sz{ display:grid; justify-items:center; gap:4px; min-height:64px; padding:10px 4px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); transition:border-color .3s,box-shadow .3s,background .3s; }
.sz b{ font-size:15.5px; font-weight:600; }
.sz .mono{ font-size:10.5px; line-height:1.2; color:var(--muted); letter-spacing:-.02em; }
.sz:hover{ border-color:var(--ink-2); }
.sz[aria-checked="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--white); }
.sz[aria-checked="true"] .mono{ color:var(--ink-2); }
.sizes.is-err .sz{ border-color:var(--cognac); }
.sizes.is-err{ animation:nudge .5s var(--ease); }
@keyframes nudge{ 20%{ transform:translateX(-4px); } 50%{ transform:translateX(4px); } 80%{ transform:translateX(-2px); } }
.sizes__msg{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-sm); background:var(--cognac-soft); color:var(--ink); font-size:14px; }
.sizes__msg svg{ color:var(--cognac); }
.sizes__note{ font-size:13px; color:var(--muted); }
@media (min-width:420px){ .sz .mono{ font-size:11px; } }
.buyrow{ display:flex; gap:10px; }
.qty{ display:inline-flex; align-items:center; flex:none; height:56px; border:1px solid var(--line-2); border-radius:var(--pill); background:var(--surface); }
.qty button{ display:grid; place-items:center; width:44px; height:100%; color:var(--ink-2); }
.qty button:hover{ color:var(--ink); }
.qty button[disabled]{ opacity:.3; }
.qty input{ width:28px; padding:0; border:0; background:none; text-align:center; font-size:15px; font-weight:600; }
.qty--sm{ height:38px; }
.qty--sm button{ width:34px; }
.qty--sm input{ width:24px; font-size:14px; }
.buy__pending{ margin-top:-8px; font-size:13px; color:var(--muted); }
.eta{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--r); background:var(--sand); font-size:14px; }
.eta small{ display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.trust{ display:grid; gap:0; border-top:1px solid var(--line); }
.trust li{ display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.trust .trust__k{ width:28px; margin-top:8px; color:var(--cognac); }
.trust b{ font-weight:600; }
.trust span{ display:block; color:var(--muted); font-size:13px; }
.trust__a:hover b{ color:var(--cognac); }
.buy__same{ display:flex; align-items:center; gap:14px; font-size:14.5px; color:var(--ink-2); }
.buy__k{ width:40px; color:var(--cognac); flex:none; }
.ticks{ display:grid; gap:10px; }
.ticks li{ display:flex; gap:12px; font-size:15px; line-height:1.5; color:var(--ink-2); }
.keyspecs-wrap{ display:grid; gap:10px; }
.keyspecs__h{ color:var(--muted); }
.keyspecs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.keyspecs__c{ display:grid; gap:4px; align-content:start; padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.keyspecs__c:nth-child(2n){ border-right:0; }
.keyspecs__c:nth-last-child(-n+2){ border-bottom:0; }
.keyspecs dt{ font:600 10px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.keyspecs dd{ font-size:13px; line-height:1.45; color:var(--ink); }
.buy__links{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13px; color:var(--muted); }
.buy__links .label{ color:var(--muted); margin-right:4px; font-size:10px; }
.buy__links a{ color:var(--ink-2); }
.pinfo{ display:grid; gap:24px; }
.pinfo__lead{ font:400 clamp(22px,2vw,28px)/1.32 var(--serif); letter-spacing:-.008em; max-width:28ch; text-wrap:pretty; }
.pinfo__side{ display:grid; gap:28px; align-content:start; }
.pinfo__r{ display:grid; gap:12px; max-width:62ch; font-size:16px; line-height:1.65; color:var(--ink-2); }
.box{ padding:24px; border-radius:var(--r); background:var(--sand); }
.box__l{ display:grid; gap:10px; margin-top:12px; }
.box__l li{ display:flex; gap:12px; font-size:15px; }
@media (min-width:900px){ .pinfo{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:80px; align-items:start; } }
.mc{ display:grid; gap:48px; }
@media (min-width:900px){ .mc{ grid-template-columns:1fr 1fr; gap:80px; } }
.mc__col .h3{ margin-bottom:18px; }
.mc__note{ margin-top:14px; }
.mc__col .tlink{ margin-top:6px; }
.specs th,.specs td{ padding:13px 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2); font-size:14.5px; }
.specs th{ width:40%; padding-right:20px; font-weight:500; color:var(--muted); }
.specs--mono td{ font-family:var(--mono); font-size:13.5px; }
.care{ display:grid; gap:12px; }
.care li{ display:flex; gap:12px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.use{ display:grid; gap:40px; }
.use__media{ overflow:hidden; border-radius:var(--r); background:var(--sand); }
.use__media img,.use__media .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.use__l{ display:grid; gap:0; margin-top:28px; border-top:1px solid var(--line); }
.use__l li{ display:grid; grid-template-columns:44px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.use__n{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2); font-size:11px; color:var(--cognac); }
@media (min-width:900px){ .use{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(56px,7vw,112px); align-items:center; } }
.specs-wrap{ display:grid; gap:36px; }
.specs__note{ margin-top:16px; max-width:40ch; }
@media (min-width:900px){ .specs-wrap{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:80px; } }
.safety{ display:grid; gap:22px; padding:clamp(26px,4vw,48px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.safety__hd{ display:flex; align-items:flex-start; gap:18px; }
.safety__hd .eyebrow{ margin-bottom:10px; }
.safety__k{ width:44px; margin-top:6px; color:var(--cognac); }
.safety__l{ display:grid; gap:12px; }
.safety__l li{ display:flex; gap:12px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.safety__ft{ display:grid; gap:6px; padding-top:16px; border-top:1px solid var(--line); }
@media (min-width:900px){ .safety{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); column-gap:64px; } .safety__ft{ grid-column:2; } }
.ww{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 14px; }
.ww .mcard__img{ background:var(--sand-2); }
@media (min-width:760px){ .ww{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background:rgba(251,249,245,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 -1px 0 var(--line),0 -12px 30px -20px rgba(42,34,29,.4); transform:translateY(110%); transition:transform .5s var(--slow); }
.stickybar.on{ transform:none; }
.stickybar__t{ display:grid; gap:2px; min-width:0; font-size:14px; }
.stickybar__t b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stickybar__m{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--muted); }
.stickybar__m .mono{ color:var(--ink); font-size:13px; }
.stickybar__c{ display:inline-flex; align-items:center; gap:6px; }
.stickybar__c .dot{ width:9px; height:9px; }
.stickybar__sz.is-set{ color:var(--ink-2); }
.stickybar .btn{ min-height:46px; padding:0 20px; flex:none; }
@media (min-width:1100px){ .stickybar{ display:none; } }
.has-stickybar .ftr{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
@media (min-width:1100px){ .has-stickybar .ftr{ padding-bottom:36px; } }

/* ---------- the size chart dialog */
.szd{ width:min(640px,calc(100% - 24px)); max-height:min(88vh,860px); padding:0; border:0; border-radius:var(--r-lg); background:var(--oat); color:var(--ink); box-shadow:0 30px 80px -30px rgba(30,26,23,.5); overflow:auto; overscroll-behavior:contain; }
.szd::backdrop{ background:rgba(30,26,23,.48); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.szd[open]{ animation:pop .45s var(--slow); }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
.szd__hd{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 12px 24px; background:var(--oat); border-bottom:1px solid var(--line); }
.szd__t{ font:400 26px/1.1 var(--serif); letter-spacing:-.01em; }
.szd__bd{ display:grid; gap:20px; padding:22px 24px 28px; }
.szd__note{ font-size:13.5px; color:var(--muted); }
.szd .h4{ margin-top:6px; }
.howl{ display:grid; gap:0; border-top:1px solid var(--line); }
.howl li{ display:grid; grid-template-columns:34px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.howl__n{ font-size:11px; color:var(--cognac); padding-top:3px; }

/* ---------- size guide page */
.sg{ display:grid; gap:40px; }
.sg__chart{ display:grid; gap:18px; align-content:start; padding:clamp(22px,3vw,40px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); min-width:0; }
.sg__img{ overflow:hidden; border-radius:var(--r); background:var(--sand); }
.sg__img img,.sg__img .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (min-width:1100px){ .sg{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:56px; align-items:start; } }
.sg2{ display:grid; gap:44px; }
.sg2__c{ display:grid; gap:14px; align-content:start; }
.sg2__n{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); font-size:12px; color:var(--cognac); }
@media (min-width:900px){ .sg2{ grid-template-columns:1fr 1fr; gap:80px; } }

/* ---------- about */
.aboutHero{ position:relative; display:block; background:var(--oat); overflow:hidden; }
.aboutHero__media{ position:relative; aspect-ratio:4/3; background:var(--sand); }
.aboutHero__media img,.aboutHero__media .ph{ width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:74% 50%; }
.aboutHero__veil{ display:none; position:absolute; inset:0; pointer-events:none; }
.aboutHero__in{ position:relative; z-index:1; padding-top:30px; padding-bottom:clamp(40px,6vw,88px); }
.aboutHero__txt{ max-width:620px; }
.aboutHero__txt .lede{ margin-top:22px; }
@media (min-width:900px){
  .aboutHero{ display:flex; align-items:center; min-height:clamp(600px,86vh,880px); background:var(--sand); }
  .aboutHero__media{ position:absolute; inset:0; aspect-ratio:auto; }
  .aboutHero__media img{ object-position:60% 50%; }
  .aboutHero__veil{ display:block; background:linear-gradient(90deg,rgba(243,238,230,.9) 0%,rgba(243,238,230,.6) 22%,rgba(243,238,230,0) 38%); }
  .aboutHero__in{ padding-block:0; }
  .aboutHero__txt{ max-width:min(560px,38vw); }
  .aboutHero__txt .lede{ max-width:32ch; }
}
.aboutx{ display:grid; gap:clamp(48px,6vw,88px); }
.aboutEd{ display:grid; gap:18px; max-width:980px; }
.aboutEd__h{ display:flex; align-items:baseline; gap:18px; }
.aboutEd__n,.aboutQ__n,.about__s__n{ font-size:12px; color:var(--cognac); }
.aboutEd__b{ max-width:62ch; font-size:17px; line-height:1.7; color:var(--ink-2); }
.aboutQ{ display:grid; gap:18px; }
.aboutQ__h{ display:flex; align-items:baseline; gap:18px; }
.aboutQ__b{ max-width:34ch; font:400 clamp(22px,2.5vw,36px)/1.28 var(--serif); letter-spacing:-.008em; text-wrap:pretty; }
@media (min-width:900px){ .aboutEd,.aboutQ{ grid-template-columns:minmax(0,.4fr) minmax(0,1fr); gap:48px; } }
.aboutImg{ margin-block:clamp(56px,7vw,104px); overflow:hidden; border-radius:var(--r); }
.aboutImg img,.aboutImg .ph{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.about{ display:grid; gap:36px; }
.about__s{ display:grid; gap:12px; align-content:start; padding-top:22px; border-top:1px solid var(--line-2); }
.about__s__h{ display:grid; gap:8px; }
.about__s__b{ font-size:15.5px; line-height:1.65; color:var(--ink-2); }
@media (min-width:900px){ .about--n3{ grid-template-columns:repeat(3,1fr); gap:40px; } }
.specs--co td{ font-size:15px; }
.co__link{ margin-top:18px; }

/* ---------- cart drawer, cart and checkout */
.drawer{ position:fixed; inset:0; z-index:60; visibility:hidden; }
.drawer.on{ visibility:visible; }
.drawer__bg{ position:absolute; inset:0; background:rgba(30,26,23,.36); opacity:0; transition:opacity .45s var(--ease); }
.drawer.on .drawer__bg{ opacity:1; }
.drawer__pan{ position:absolute; top:0; right:0; bottom:0; display:flex; flex-direction:column; width:min(460px,100%); background:var(--oat); box-shadow:-20px 0 60px -30px rgba(30,26,23,.45); transform:translateX(102%); transition:transform .6s var(--slow); }
.drawer.on .drawer__pan{ transform:none; }
.drawer__hd{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 14px 24px; border-bottom:1px solid var(--line); }
.drawer__t{ font:400 24px/1.1 var(--serif); letter-spacing:-.01em; }
.drawer__t .num{ font:500 12px/1 var(--mono); color:var(--muted); vertical-align:middle; margin-left:6px; }
.drawer__bd{ flex:1 1 auto; overflow-y:auto; padding:8px 24px; overscroll-behavior:contain; }
.drawer__ft{ display:grid; gap:14px; padding:18px 24px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); }
.lines{ display:grid; }
.ci{ display:grid; grid-template-columns:76px 1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.ci:last-child{ border-bottom:0; }
.ci__img{ display:block; width:76px; overflow:hidden; border-radius:var(--r-sm); background:var(--sand); aspect-ratio:4/5; }
.ci__img img,.ci__img .ph{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; }
.ci__mid{ display:grid; gap:4px; align-content:start; min-width:0; }
.ci__name{ font-weight:600; font-size:15px; line-height:1.3; }
.ci__name:hover{ color:var(--cognac); }
.ci__meta{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--muted); }
.ci__col{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); }
.ci__col .dot{ width:10px; height:10px; }
.ci__sz{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.ci__ctl{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.ci__rm{ font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-2); min-height:32px; }
.ci__rm:hover{ color:var(--ink); }
.ci__tot{ font-family:var(--mono); font-size:14px; }
.empty{ display:grid; gap:10px; justify-items:start; padding:28px 0; }
.empty__t{ font:400 24px/1.2 var(--serif); }
.empty p:not(.empty__t){ color:var(--muted); font-size:15px; max-width:36ch; }
.empty .btn{ margin-top:8px; }
.tots{ display:grid; gap:8px; }
.tot{ display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.tot dt{ color:var(--ink-2); }
.tot dd{ text-align:right; }
.tot--big{ padding-top:12px; margin-top:4px; border-top:1px solid var(--line); font-size:17px; font-weight:600; }
.tot--big small{ display:block; font-size:12px; font-weight:400; color:var(--muted); }
.tot--big dd{ font-size:19px; }
.summary__eta{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); }
.summary__eta .eta__k{ width:22px; margin-top:7px; }
.toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:80; max-width:calc(100% - 32px); padding:13px 20px; border-radius:var(--pill); background:var(--ink); color:var(--oat); font-size:14px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:opacity .4s var(--ease),transform .5s var(--slow); }
.toast.on{ opacity:1; transform:translate(-50%,0); }
/* with the drawer open, the line itself shows what was added: the toast is only read out (role=status), never drawn over it */
.toast.is-quiet{ width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.has-stickybar .toast:not(.is-quiet){ bottom:calc(88px + env(safe-area-inset-bottom)); }
.cartpage{ display:grid; gap:40px; align-items:start; }
.cartpage__lines{ min-width:0; }
.cartpage__more{ margin-top:16px; }
.summary{ display:grid; gap:16px; padding:24px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.summary__t{ font:400 24px/1.1 var(--serif); }
.mini-trust{ display:grid; gap:8px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.mini-trust li{ display:flex; gap:10px; align-items:center; }
.mini-trust__k{ width:22px; flex:none; color:var(--cognac); }
@media (min-width:1000px){
  .cartpage{ grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:64px; }
  .summary{ position:sticky; top:calc(var(--hdr) + 24px); }
  .cartpage--co{ grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr); }
  .cartpage--co .co--b{ grid-column:1; }
  .cartpage--co .summary{ grid-column:2; grid-row:1 / span 2; }
}
.cartpage.is-empty .summary{ display:none; }
.emptypicks{ margin-top:24px; }
.emptypicks__l{ margin-bottom:20px; color:var(--muted); }
.co{ display:grid; gap:18px; min-width:0; }
.co__h{ font:400 26px/1.1 var(--serif); letter-spacing:-.008em; }
.co__scroll{ overflow-x:auto; }
.co__items{ font-size:14.5px; }
.co__items th{ padding:0 0 10px; text-align:left; font:600 10.5px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-2); }
.co__items td{ padding:16px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.co__items .num{ text-align:right; padding-left:14px; white-space:nowrap; font-family:var(--mono); font-size:13.5px; }
.co__items th.num{ font-family:var(--sans); font-size:10.5px; }
.co__it{ display:flex; gap:14px; align-items:flex-start; }
.co__it .ci__img{ width:60px; flex:none; }
.co__it b{ display:block; font-weight:600; }
.co__meta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:13px; color:var(--muted); }
.co__items .co__unit{ display:none; font-size:12.5px; color:var(--muted); text-align:left; padding-left:0; }
.ci__sub{ display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--muted); }
.co__it .ci__sub{ font-weight:400; }
@media (max-width:599px){ .co__items thead,.co__items td.num{ display:none; } .co__items .co__unit{ display:block; margin-top:4px; } }
/* on phones the order summary, the notice and the order button come right after the items, the terms after them */
@media (max-width:999px){ .cartpage--co .co--a{ order:1; } .cartpage--co .summary{ order:2; } .cartpage--co .co--b{ order:3; } }
.co__sum{ display:flex; justify-content:space-between; font-size:17px; font-weight:600; padding-top:4px; }
.co__terms{ display:grid; border-top:1px solid var(--line-2); }
.co__row{ display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.6; }
.co__row dt{ font-weight:600; }
.co__row dd{ color:var(--ink-2); }
@media (min-width:760px){ .co__row{ grid-template-columns:200px 1fr; gap:24px; } }
.co__eta{ display:inline-block; margin-top:6px; color:var(--ink); }
.co__taxline{ margin-top:-6px; }
.co__arealine,.age{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); }
.co__arealine svg,.age svg{ color:var(--muted); margin-top:2px; }
.co__arealine .eta__k{ width:22px; margin-top:8px; color:var(--cognac); }
.notice{ display:flex; gap:12px; padding:16px; border-radius:var(--r); background:var(--cognac-soft); font-size:14px; line-height:1.55; }
.notice svg{ color:var(--cognac); margin-top:2px; }
.notice__t{ font-weight:600; margin-bottom:4px; }

/* ---------- 404 */
.nf{ padding:calc(var(--hdr) * .3 + 60px) 0 var(--sec); }
.nf__wrap{ display:grid; gap:40px; align-items:center; }
.nf__media{ color:var(--line-2); }
.nf__line{ height:90px; }
.nf__in .lede{ margin-top:20px; }
.nf__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
@media (min-width:900px){ .nf__wrap{ grid-template-columns:1fr 1fr; gap:80px; } .nf__line{ height:160px; } }

/* ---------- policy pages */
.legalwrap{ display:grid; gap:36px; padding-top:calc(var(--hdr) * .2 + 36px); padding-bottom:var(--sec); }
@media (min-width:1000px){ .legalwrap{ grid-template-columns:260px minmax(0,1fr); gap:80px; } .legalside{ position:sticky; top:calc(var(--hdr) + 30px); align-self:start; max-height:calc(100vh - var(--hdr) - 60px); overflow:auto; } }
.legalside{ display:grid; gap:24px; align-content:start; }
.legalside .toc--d{ display:none; }
@media (min-width:1000px){ .legalside .toc--d{ display:block; } .legal .toc--m{ display:none; } }
.toc summary{ cursor:pointer; list-style:none; color:var(--muted); }
.toc summary::-webkit-details-marker{ display:none; }
.toc ol{ display:grid; gap:2px; margin-top:12px; }
.toc li a{ display:block; padding:5px 0; font-size:14px; color:var(--ink-2); }
.toc li a:hover{ color:var(--cognac); }
.toc--m{ margin:24px 0 10px; padding:16px 18px; border-radius:var(--r); background:var(--sand); }
.legalnav{ display:none; }
@media (min-width:1000px){ .legalnav{ display:grid; gap:10px; padding-top:20px; border-top:1px solid var(--line); } }
.legalnav ul{ display:grid; gap:2px; }
.legalnav a{ display:block; padding:4px 0; font-size:13.5px; color:var(--muted); }
.legalnav a[aria-current]{ color:var(--ink); font-weight:600; }
.legal{ max-width:760px; min-width:0; font-size:16px; line-height:1.72; color:var(--ink-2); }
.legal h1{ font-size:clamp(36px,4.4vw,60px); line-height:1.04; letter-spacing:-.014em; color:var(--ink); }
.legal__upd{ margin-top:14px; font:400 12px/1.4 var(--mono); color:var(--muted); }
.legal h2{ margin-top:52px; font:500 22px/1.3 var(--sans); letter-spacing:-.012em; color:var(--ink); scroll-margin-top:calc(var(--hdr) + 24px); }
.legal h3{ margin-top:28px; font-weight:600; font-size:16.5px; color:var(--ink); }
.legal p,.legal ul,.legal ol,.legal .tblwrap{ margin-top:14px; }
.legal ul li{ position:relative; padding-left:22px; margin-top:6px; }
.legal ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--deco); }
.legal ol{ counter-reset:o; }
.legal ol li{ position:relative; padding-left:28px; margin-top:6px; counter-increment:o; }
.legal ol li::before{ content:counter(o) "."; position:absolute; left:0; font-family:var(--mono); font-size:13px; color:var(--cognac); }
.tblwrap{ overflow-x:auto; }
.legal table{ font-size:14.5px; }
.legal th,.legal td{ padding:12px 14px 12px 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.legal th{ font-weight:600; color:var(--ink); width:34%; }
.legal strong{ color:var(--ink); }