/* Banger prototype · shared: tokens, header (logo Lottie, white search R-1, quote QX-1 + recap QR-1, categories + SC-2 menu),
   cards CB-2 + badge B-1, quantity fields, footer F2. One --gutter for the header and the content (SH-1). */
:root{
  --bg:#FFFFFF; --ink:#141414; --body:#3A3631; --mute:#77736C; --line:#E7E3DC;
  --tile:#ECEAE6; --tile2:#E4DCCB; --chip:#F3F1EC; --panel:#F2F0EB; --err:#B4432B; --orange:#E0552A; --orange-soft:#FBE7DF;
  /* Sh-4: the only shadow of the site, for floating elements (dropdowns, popovers, bubbles, toast, stuck card, prints); no border line */
  --shadow-float:0 1px 2px rgba(20,20,20,.06),0 18px 40px -22px rgba(20,20,20,.28);
  /* F-3: every input, textarea and search bar; focus = mid-grey border only (it is the keyboard focus indicator) */
  --field-border:#D9D4CB; --field-hover:#B9B2A6; --field-focus:#8E8981; --field-error:#C9A79C;
  --font:"Geist","Geist Fallback","Geist Fallback DV",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;   /* round 24: metric-matched fallbacks (site_build.fonts_head) */
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* SH-1: one gutter and one width for the header and every page content, mobile included */
  --gutter:20px; --maxw:1320px; --cw:calc(var(--maxw) - 2 * var(--gutter));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:140px}
/* hidden tooltips must not widen the page on mobile (clip keeps the sticky header working) */
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--field-focus);outline-offset:2px}
/* F-3: fields show focus with their own border, never an outline, ring or shadow */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
input:disabled,textarea:disabled,select:disabled{opacity:.5}
.g{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.in{max-width:var(--maxw);margin:0 auto}
.sq{width:8px;height:8px;background:var(--orange);display:inline-block;flex:none}
.blink{animation:bl 1.4s steps(1) infinite}@keyframes bl{50%{opacity:.15}}
.mono{font-family:var(--mono)}
.caps{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.vh{position:absolute;left:-9999px}
mark{background:none;color:var(--orange);font-weight:600}

/* NAV · row 1 logo + search + Catalog + Quote, row 2 the 6 categories (SC-2 menu under the hovered tab) */
.nav{position:sticky;top:0;z-index:20;background:var(--bg)}
.nav .row1{display:flex;align-items:center;gap:20px;padding-block:14px;position:relative}
/* SH-1: 1.5px rounded lines that stop at the gutter */
.nav .row1::after,.nav .cats::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:var(--line);pointer-events:none}
.logo{font-weight:700;font-size:22px;letter-spacing:-.045em;display:flex;align-items:center;gap:6px;position:relative}
/* animated logo: getbanger.com Lottie file used as is; left-aligned box (never centered), site.js pins the ink (BANGER and BGR) to its left edge */
.logo{justify-content:flex-start;margin-left:0}
.logo .lt{position:relative;display:block;width:150px;height:26px;overflow:hidden;margin:0;flex:none}
.logo .lt > svg{display:block;width:100%!important;height:100%!important}
/* round 31, part 1: the first paint is the animation's frame 0, inlined (svg.l0, same box, same pinning): the Lottie svg is stacked on it and
   shown only once its first frame is drawn and pinned (.logo.on), then frame 0 goes. No text fallback, no orange square, no layout shift. */
.logo .lt > svg:not(.l0):not(.lr){position:absolute;inset:0}
.logo:not(.on) .lt > svg:not(.l0):not(.lr){visibility:hidden}
.logo.on .lt > svg.l0{display:none}
/* round 31: reduced motion shows the full BANGER wordmark (svg.lr, frame 80 of the animation, inlined like frame 0), never frame 0 (BGR) */
.logo .lt > svg.lr{display:none}
@media (prefers-reduced-motion:reduce){.logo .lt > svg.l0{display:none}.logo .lt > svg.lr{display:block}}
/* A-1: header search, white and static (no T-2 here) */
/* H-4 search: free space between logo and buttons, max 520 px; the placeholder stays on one line (ellipsis), ≥ 14 px before the edge or ⌘K */
.srch{flex:1;position:relative;max-width:520px;min-width:120px;margin:0 auto}
.srch input{width:100%;height:44px;padding:0 60px 0 40px;text-overflow:ellipsis;white-space:nowrap;border-radius:10px;border:1px solid var(--field-border);background:#fff;color:var(--ink);outline:none;font-size:14.5px;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.srch input::-webkit-search-cancel-button{display:none}
.srch input::placeholder{color:#9A958D;opacity:1}
.srch input:hover{border-color:var(--field-hover)}
.srch input:focus{border-color:var(--field-focus)}
.srch .mg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.srch kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--mute);border:1px solid var(--line);background:#fff;padding:3px 6px 1px;border-radius:5px;pointer-events:none}
/* hero search S-A + T-2 (dark field F-3: #2A2A2A, #444 line, grey focus line; mono; empty field decodes example searches) */
.sa input{width:100%;padding:12px 16px 12px 42px;border-radius:12px;border:1px solid #444;background:#2A2A2A;color:#fff;outline:none;font-family:var(--mono);font-size:14px;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.sa input::placeholder{color:transparent}
.sa input:focus::placeholder{color:rgba(255,255,255,.5)}
.sa input:hover{border-color:#5E5A55}
.sa input:focus{border-color:var(--field-focus)}
.term{position:absolute;left:42px;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;line-height:1.3}
.term .pr{color:var(--orange);margin-right:8px}
.term .cur{display:inline-block;width:.6em;height:1.1em;background:var(--orange);vertical-align:-2px;margin-left:2px;animation:bl 1s steps(1) infinite}
input:focus ~ .term,input:not(:placeholder-shown) ~ .term{opacity:0}
/* R-1: results panel under the header field, rows cascade in */
.drop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:25;background:#fff;border-radius:14px;box-shadow:var(--shadow-float);padding:6px;color:var(--ink);max-height:min(560px,calc(100vh - 120px));overflow:auto;animation:dropin .22s var(--ease)}
@keyframes dropin{from{opacity:0;transform:translateY(-6px)}}
.drop[hidden]{display:none}
.drop small{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px 4px}
.drop .rr{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:9px;font-size:14px;cursor:pointer}
.drop .rr:hover,.drop .rr.on{background:var(--chip)}
.drop .rr i{width:34px;height:42px;border-radius:6px;background:var(--tile);flex:none;overflow:hidden}
.drop .rr i img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.drop .rr .cx{width:34px;height:34px;border-radius:8px;background:var(--chip);display:grid;place-items:center;flex:none;color:var(--mute)}
.drop .rr:hover .cx,.drop .rr.on .cx{background:#fff}
.drop .rr .tx{min-width:0}
.drop .rr .tx small{display:block;padding:0;font-size:10.5px;letter-spacing:.05em}
.drop .rr em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--mute);white-space:nowrap}
.drop .empty{padding:22px 12px;color:var(--mute);font-size:14px}
.drop .empty button{all:unset;cursor:pointer;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.drop .empty button:hover{color:var(--orange)}
/* R-1 product rows: live quote host, quantity + Add over the price on hover, keyboard selection or once in the quote; always shown on touch screens (the price moves under the name) */
.drop .rw{position:relative}
.drop .rw .rq{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .15s}
.drop .rw:hover .rq,.drop .rw:focus-within .rq,.drop .rw:has(.rr.on) .rq,.drop .rw.inq .rq{opacity:1;pointer-events:auto}
.drop .rw:hover .rr em,.drop .rw:focus-within .rr em,.drop .rw:has(.rr.on) .rr em,.drop .rw.inq .rr em{visibility:hidden}
.drop .rq .qf.sm{background:#fff}
.drop .rq .add{flex:none;height:32px;padding:0 14px;border-radius:8px;font-size:13px}
.drop .rr .pm{display:none}
/* hybrid list replacing the keyword one: short fade, no cascade */
.drop .sw,.dres.sw{animation:swf .18s var(--ease)}@keyframes swf{from{opacity:.35}}
@media (hover:none){.drop .rw .rq{opacity:1;pointer-events:auto}.drop .rw .rr{padding-right:168px}.drop .rw .rr em{display:none}.drop .rr .pm{display:inline}.drop .rw .tx{overflow:hidden}.drop .rw .tx,.drop .rw .tx small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}
.st{opacity:0;transform:translateY(6px);animation:st .32s var(--ease) forwards}
@keyframes st{to{opacity:1;transform:none}}
.side{display:flex;align-items:center;gap:6px;flex:none}
/* H-4 "Start a project →": orange, black fill left to right on hover, the arrow turns */
.nl{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:11px;font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;flex:none;box-sizing:border-box}
.nl > *{position:relative}
.nl.cta{background:var(--orange);color:#fff}
.nl .ar{display:inline-block;transition:transform .3s var(--ease)}
.nl.cta:hover .ar,.nl.cta:focus-visible .ar{transform:translateX(3px) rotate(-45deg)}
/* QX-1 "Your quote" + count: beige pill on hover; on add it opens into a black island for 2.4 s */
.qx{all:unset;cursor:pointer;height:40px;border-radius:11px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;position:relative;transition:width .45s cubic-bezier(.3,1.3,.5,1),background .25s,color .25s;box-sizing:border-box;width:100%;flex:none}
.qx:hover,.qwrap.open .qx{background:var(--chip)}
.qx .qs{display:none}
/* the island opens over the row (to the left) instead of pushing the search bar */
.qwrap{position:relative;width:132px;height:40px;flex:none}
.qwrap .qx{position:absolute;right:0;top:0;z-index:3}
.qx .n{min-width:20px;height:20px;border-radius:99px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:11px;line-height:1;padding:0 6px;margin-left:auto;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s;flex:none;box-sizing:border-box;font-variant-numeric:tabular-nums}
.qx .d{display:none;align-items:center;gap:8px;font-size:13px;min-width:0}
.qx .d i{width:28px;height:28px;border-radius:5px;overflow:hidden;flex:none;background:#2A2A2A}
.qx .d i img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.qx .d span{overflow:hidden;text-overflow:ellipsis}
.qx.big{width:280px;background:var(--ink);color:#fff;padding:0 6px 0 16px;height:44px;top:-2px;box-shadow:var(--shadow-float)}
.nl.cta{transition:opacity .25s var(--ease)}
.toasting .nl.cta{opacity:0;pointer-events:none}.qx.big .t{display:none}.qx.big .d{display:flex}.qx.big .n{background:var(--orange)}
.bump{transform:scale(1.35)!important}
/* QR-1 recap on hover / focus of Quote */
/* round 32, part 5 (design/quote/banger-quote.html, Q-1 « Apple Bag »): one clean white surface, radius 20, its shadow, everything inside
   clipped to its corners (nothing sticks out past them); products separated by hairlines (no grey card); the amount stays in the button */
.qp{position:absolute;right:0;top:calc(100% + 10px);width:400px;z-index:30;background:#fff;border-radius:20px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(20,20,20,.05),0 2px 6px rgba(20,20,20,.05),0 20px 50px rgba(20,20,20,.12);padding:0;display:flex;flex-direction:column;
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .18s,transform .25s var(--ease),visibility 0s .25s;color:var(--ink)}
.qwrap.open .qp{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s,transform .25s var(--ease)}
.qwrap.open::after{content:"";position:absolute;right:0;top:100%;width:400px;height:12px}   /* the hover bridge (was .qp::before, now clipped) */
.qph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 22px 6px}
.qph b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.qph span{font-family:var(--mono);font-size:12px;color:#8A8680;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.qls{max-height:min(420px,calc(100vh - 300px));overflow:auto;overscroll-behavior:contain}
.ql{transition:opacity .22s,transform .22s}
/* the row (panel and quote page) */
.qr{display:flex;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)}
.qls .qr:last-child{border-bottom:0}
.qr .th{width:64px;height:76px;border-radius:12px;overflow:hidden;background:var(--tile);flex:none;display:block}
.qr .th img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.qr .qi{flex:1;min-width:0}
.qr .r1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.qr .nm{font-size:15px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr .nm:hover{text-decoration:underline;text-underline-offset:3px}
.qr .lt{flex:none;font-family:var(--mono);font-size:12.9px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}   /* N-1: .86em of the 15 px name */
.qr .sub{font-size:13px;color:#8A8680;margin:3px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr .sub [data-qtxt]{font-variant-numeric:tabular-nums}
.qr .r2{display:flex;align-items:center;gap:10px;min-height:30px}
.qr .qf.sm{height:30px;border-radius:10px;background:#fff;outline-color:var(--line)}
.qr .qf.sm:hover{outline-color:var(--field-hover)}.qr .qf.sm:focus-within{outline-color:var(--field-focus)}
.qr .qf.sm button{width:26px;font-size:15px;color:#444}.qr .qf.sm input{width:40px;font-size:13px}
.qr .lgw{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.qr .lgc{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:#555}
.qr .lgc em{width:22px;height:22px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;flex:none;overflow:hidden;font-style:normal}
.qr .lgc em img{width:15px;height:15px;object-fit:contain;display:block}
.qr .lgc em .ico{width:13px;height:13px}
.qr .lgc .fn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr .lgc.nolg{color:#8A8680}
.qr .lgm{font-family:var(--mono);font-size:11px;color:#8A8680}
.qr .lga{font-size:12px;color:var(--orange);white-space:nowrap}.qr .lga:hover{text-decoration:underline;text-underline-offset:2px}
.qr .rmv{all:unset;cursor:pointer;flex:none;margin-left:auto;font-size:12px;color:#8A8680;text-decoration:underline;text-underline-offset:2px;padding:6px 0}
.qr .rmv:hover{color:var(--ink)}
.qpf{padding:12px 16px 16px;border-top:1px solid var(--line)}
.qpf .qnote0{margin:0 0 12px;text-align:center;font-size:12px;color:#8A8680}
.qpf .qfine{margin:10px 0 0;text-align:center;font-size:12px;color:#8A8680}
.qscrim{display:none}
/* phones: the same panel as a full-width sheet from the bottom, over a light scrim */
@media (max-width:760px){
  .qp{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:86vh;max-height:86dvh;border-radius:20px 20px 0 0;transform:translateY(24px);z-index:95;box-shadow:0 -8px 40px rgba(20,20,20,.16)}
  .qwrap.open::after{display:none}
  .qph{padding-top:24px;position:relative}
  .qph::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#D9D4CB}
  .qls{max-height:none;flex:1 1 auto}
  .qr{padding:14px 18px}.qph{padding-left:18px;padding-right:18px}.qpf{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .qscrim{display:block;position:fixed;inset:0;z-index:94;background:rgba(20,20,20,.28);opacity:0;pointer-events:none;transition:opacity .2s}
  .qwrap.open .qscrim{opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.qp,.qscrim{transition:none}}
.ql.out,.qrow.out{opacity:0;transform:translateX(14px)}
.go-p{display:flex;align-items:center;gap:10px;min-width:0}
.go-p i{width:40px;height:48px;border-radius:7px;overflow:hidden;background:var(--tile);flex:none}
.go-p i img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.go-p .nm{min-width:0}
.go-p .nm b{font-weight:600;font-size:14px;display:block}
.go-p:hover .nm b{text-decoration:underline;text-underline-offset:3px}
.go-p .nm small{font-family:var(--mono);font-size:11px;color:var(--mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x{all:unset;cursor:pointer;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--mute);font-size:15px}
.x:hover,.x:focus-visible{background:var(--ink);color:#fff}
.qp .emp{padding:18px 10px;text-align:center;color:var(--mute);font-size:14px}
/* T-1 total: beige block */
.t1{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#F3F1EC;border-radius:12px;padding:14px;margin:8px 0}
.t1 span{font-weight:600;font-size:14px;display:block}
.t1 .t1l{display:flex;align-items:center;gap:7px}
.t1 small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px}
.t1 b{font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.qp .go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:14px;background:var(--orange);color:#fff;font-size:16px;font-weight:500;
  clip-path:inset(0 round 14px)}   /* round 32: its fill clipped to its own corners in every browser (WebKit let a transformed ::before show past them) */
/* quantity field (cards, recap, product page, quote page): text, min 1, max 99999 */
.qf{display:flex;align-items:center;background:#fff;border-radius:10px;height:42px;flex:none;outline:1px solid var(--field-border);outline-offset:-1px;transition:outline-color .2s}
.qf:hover{outline-color:var(--field-hover)}
.qf:focus-within{outline-color:var(--field-focus)}
.qf button{all:unset;cursor:pointer;width:30px;height:100%;display:grid;place-items:center;flex:none;color:var(--ink);font-size:16px}
.qf button:hover{color:var(--orange)}
/* fixed height + line-height on the input itself (same box on every field); 2 px on top: Geist Mono digits sit ~1 px high in their line box */
.qf input{width:42px;height:20px;line-height:18px;border:0;outline:none;background:none;text-align:center;font-family:var(--mono);font-size:13px;padding:1px 0 0;margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
.qf.sm{height:32px;border-radius:8px;background:var(--chip)}
.qf.sm button{width:26px}.qf.sm input{width:38px;font-size:12.5px}
.qf.flash{animation:fl .5s}
@keyframes fl{30%{outline-color:var(--ink)}}
/* row 2: categories */
.nav .cats{display:flex;gap:2px;padding-block:8px;overflow-x:auto;scrollbar-width:none;position:relative}
.nav .cats::-webkit-scrollbar{display:none}
/* active category = the beige background only; symmetric 14 px padding, text + count centered (2 px on top: Geist Mono caps sit high in their line box; the count drops its trailing letter-spacing); the first background starts on the column edge (logo, rules) */
.nav .cats a{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;height:32px;padding:2px 14px 0;border-radius:8px;white-space:nowrap;display:flex;gap:6px;align-items:center;flex:none;color:#4A4741;transition:background .15s,color .15s}
.nav .cats a sup{font-size:.86em;line-height:1;color:var(--mute);vertical-align:baseline;letter-spacing:0;margin-right:-.5px;font-variant-numeric:tabular-nums}
.nav .cats a:hover,.nav .cats a.on,.nav .cats a.cur{background:var(--chip);color:var(--ink)}
/* SC-2: small white menu under the hovered tab, slides from tab to tab */
.subm{position:absolute;left:0;top:100%;z-index:24;width:270px;background:#fff;border-radius:14px;box-shadow:var(--shadow-float);padding:8px;margin-top:6px;opacity:0;transform:translateY(-4px);pointer-events:none;visibility:hidden;transition:opacity .18s,transform .22s var(--ease),left .3s var(--ease),visibility 0s .22s}
.subm.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s,transform .22s var(--ease),left .3s var(--ease)}
.subm::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.subm .sl[hidden]{display:none}
.subm a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px}   /* round 28, N-1: the number on the word's baseline */
.subm a:hover,.subm a:focus-visible{background:var(--chip)}
.subm a span{font-family:var(--mono);font-size:.86em;line-height:1;font-variant-numeric:tabular-nums;text-align:right;color:var(--mute)}
.subm a.all{font-weight:600;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px}
.subm a.all span{color:var(--orange)}
.subm a.on{background:var(--ink);color:#fff}.subm a.on span{color:#A8A39B}
/* H-4 narrower: tighter row, no ⌘K under 760 px; under 600 px logo + buttons on row 1 (logo 21 px, buttons 14 px), the search on its own row (42 px) */
@media (max-width:900px){.nav .row1{gap:12px}.logo .lt{width:120px;height:21px}}
@media (max-width:760px){.srch kbd{display:none}.srch input{padding-right:16px}}
@media (max-width:600px){.nav .row1{flex-wrap:wrap;row-gap:12px;column-gap:8px;padding-block:14px 12px}.srch{order:3;flex-basis:100%;max-width:none}.srch input{height:42px;font-size:14px;padding-left:38px}.srch .mg{left:14px}
  .side{margin-left:auto;gap:2px}.nl{font-size:14px;gap:6px;padding:0 12px}.qx{font-size:14px;gap:6px;padding:0 4px 0 8px}.qx .qt{display:none}.qx .qs{display:inline}.qwrap{width:78px}
  .qx.big{width:240px}}
@media (max-width:380px){.logo .lt{width:100px;height:17.5px}.nl{padding:0 9px}.nav .row1{column-gap:6px}}

/* buttons, links */
.btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:6px;background:var(--ink);color:#fff;font-size:15px;font-weight:500}
.btn.o{background:var(--orange)}
.btn.ghost{background:transparent;color:inherit;outline:1px solid currentColor;outline-offset:-1px}
.lnk{font-family:var(--mono);font-size:12.5px;display:inline-flex;gap:8px;align-items:center;cursor:pointer;border-bottom:1px solid currentColor;padding-bottom:1px}
.lnk:hover{color:var(--orange)}
.dsp{margin:0;font-size:clamp(30px,4.4vw,56px);line-height:.98;letter-spacing:-.045em;font-weight:700;text-wrap:balance}
.kick{margin:0 0 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:8px}
.kick::before{content:"";width:7px;height:7px;background:var(--orange)}
.args{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:18px;border-bottom:1px solid var(--line)}
.args span{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.crumbs{font-family:var(--mono);font-size:12px;color:var(--mute);padding-block:18px 0;display:flex;gap:8px;flex-wrap:wrap;margin:0}
.crumbs a:hover{color:var(--ink)}

/* product card (catalog v3 · S1) with hover scrub: only the thin progress bars on the photo */
/* round 16, C.3: getbanger.com's catalog grid (read 2026-11-02, data/getbanger-r16-sizes.json): 5 columns above 991 px, 3 from 480 to 991, 2 under 480;
   its photos sit 8 px apart, 14.4 px in from the window above 991 px (274 px wide at 1440: (1440 - 28.8) / 5 - 8), edge to edge under 480 (187 px at 390). Ours: the same columns and card width,
   8 px between cards, the grid wider than the page column (centered on it); our 4:5 photos, radius, fonts and the 28 px between rows stay.
   --sbw = the window's scrollbar width (site.js). */
.grid{display:grid;--gw:calc(100vw - var(--sbw,15px) - 37px);grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 8px;padding-top:28px;width:var(--gw);margin-left:calc(50% - var(--gw) / 2);box-sizing:border-box}
@media (max-width:991px){.grid{--gw:calc(100vw - var(--sbw,15px) - 8px);grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:479px){.grid{--gw:calc(100vw - var(--sbw,0px) - 8px);grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 8px}}
/* round 20, F-5 (design/banger-filters.html): the toolbar between the grey box and the cards, the grid's own width: the product count
   left (mono 12.5 px grey), All · Men · Women right; 22 px above, 16 px down to the cards. Phones (< 641 px): the count on its own line,
   the switch under it, left-aligned */
.tb{display:flex;align-items:center;gap:12px;min-height:36px;margin-top:18px;--gw:calc(100vw - var(--sbw,15px) - 37px);width:var(--gw);margin-left:calc(50% - var(--gw) / 2);box-sizing:border-box;
  border-top:1px solid var(--line);padding-top:16px}   /* round 25, 3c: one pattern: a hairline (18 px under what's above), 16 px, the count + Fit row, 16 px, the grid; the grid's own edges */
.tb .n{font-family:var(--mono);font-size:13px;color:var(--mute);margin-right:auto;white-space:nowrap}
/* round 21, G-3 (design/banger-round21.html, tab 2): the fit dropdown, right of the count; phones keep both on one line */
.fitdd{position:relative;flex:none}.fitdd[hidden]{display:none}
.fitdd .dd{all:unset;box-sizing:border-box;cursor:pointer;height:34px;padding:0 12px 0 14px;border-radius:10px;box-shadow:inset 0 0 0 1px #E2DED6;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);white-space:nowrap;background:#fff;transition:box-shadow .2s}
.fitdd .dd:hover,.fitdd.on .dd{box-shadow:inset 0 0 0 1px #B6B1A9}
.fitdd .dd:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fitdd .dd span{color:var(--mute)}.fitdd .dd b{font-weight:500}.fitdd .dd svg{margin-left:2px;color:var(--mute);transition:transform .2s}
.fitdd.on .dd svg{transform:rotate(180deg)}
.fitdd .ddm{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:200px;background:#fff;border-radius:14px;box-shadow:var(--shadow-float),0 0 0 1px #E2DED6;padding:6px;display:grid;gap:2px;animation:ddm .2s var(--ease)}
.fitdd .ddm[hidden]{display:none}
.fitdd .ddm button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:38px;border-radius:9px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink)}
.fitdd .ddm button:hover,.fitdd .ddm button:focus-visible{background:#F5F3EF}
.fitdd .ddm button[aria-checked="true"]::after{content:"";width:11px;height:6px;border:solid var(--ink);border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-2px)}
@keyframes ddm{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.fitdd .ddm{animation:none}}
.tb + .grid,.tb + section .grid{padding-top:16px}
@media (max-width:991px){.tb{--gw:calc(100vw - var(--sbw,15px) - 8px)}}
@media (max-width:340px){.tb{flex-wrap:wrap;row-gap:10px}}   /* round 21: count left, dropdown right on one line while it fits */
@media (max-width:479px){.tb{--gw:calc(100vw - var(--sbw,0px) - 8px)}}
.card{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;align-content:start}
.card[hidden]{display:none}   /* category filters (round 12 fix: display:grid used to win over the hidden attribute) */
.card .ph{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--tile);display:block}
.card .ph picture{position:absolute;inset:0;transition:opacity .25s}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.bars{position:absolute;left:12px;right:12px;top:12px;z-index:3;display:flex;gap:4px;opacity:0;transition:opacity .2s;pointer-events:none}
.card .ph:hover .bars,.card .ph.touch .bars{opacity:1}
.card .bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(20,20,20,.18)}
.card .bars i.on{background:rgba(20,20,20,.7)}
/* CB-2: a bar slides up on hover with the quantity field and an orange Add; in the quote the button is black "In quote ✓", "Remove" on hover */
/* round 15 A.2: the bar no longer slides up from under the photo: it waits in place and fades in. While it slid (.3 s), a quick click
   pressed where the button was going to be, then released over the photo link: the click went to the photo and nothing was added. */
.qbar{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;display:flex;gap:6px;opacity:0;transition:opacity .2s linear}
.qh:hover .qbar,.qh:has(:focus-visible) .qbar{opacity:1}
.add{all:unset;cursor:pointer;box-sizing:border-box;flex:1;min-width:0;height:42px;border-radius:10px;background:var(--orange);color:#fff;font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;white-space:nowrap}
.inq .add::before{transform:scaleX(1)}
.inq .add:not([data-fresh]):hover::before{background:#3A3A3A}
.add span{position:relative}
.add .rm{display:none}
.inq .add:not([data-fresh]):hover .ok{display:none}.inq .add:not([data-fresh]):hover .rm{display:inline}
.add:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* B-1: "In quote · qty" pill bottom-left of the photo; fades down on hover and the bar takes its place */
.bdg{position:absolute;left:12px;bottom:12px;z-index:5;display:none;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;box-sizing:border-box;border-radius:99px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.bdg .sq{width:7px;height:7px;border-radius:1.5px;flex:none}
.bdg em{font-style:normal;color:#C9C4BC;font-variant-numeric:tabular-nums}
.qh.inq .bdg{display:inline-flex}
.bdg.popin{animation:pop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.qh:hover .bdg,.qh:has(:focus-visible) .bdg{opacity:0;transform:translateY(8px)}
.qh.inq .pick{display:none}
@media (hover:none){.qbar{opacity:1}.qh .bdg{bottom:60px}.qh:hover .bdg,.qh:has(:focus-visible) .bdg{opacity:1;transform:none}}
@media (max-width:640px){.qbar{left:6px;right:6px;bottom:6px;gap:4px}.qbar .qf,.qbar .add{height:36px}.qbar .qf button{width:22px}.qbar .qf input{width:30px;font-size:12px}.qbar .add{font-size:13px}.bdg{left:8px;bottom:8px;height:28px;font-size:11px}}
@media (max-width:640px) and (hover:none){.qh .bdg{bottom:48px}}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;padding:12px 4px 0}
/* card name (round 12): the short card_name (18 characters at most), never cut; when the price has no room left it goes under the name */
.meta .nm{font-weight:600;font-size:14px;min-width:0;flex:0 1 auto;white-space:nowrap}.meta .pr{flex:none;margin-left:auto}
.meta .pr{font-family:var(--mono);font-size:12px;white-space:nowrap}
.meta .pr.q{color:var(--mute);text-transform:lowercase}
.card .sub{display:flex;align-items:center;gap:6px;padding:0 4px;color:var(--mute);font-size:12.5px;flex-wrap:wrap}
.card .sws{display:flex;gap:4px;margin-right:2px}
.card .sws i{width:10px;height:10px;border-radius:3px;outline:1px solid rgba(0,0,0,.14);outline-offset:-1px}
.match{position:absolute;top:10px;left:10px;z-index:3;background:var(--bg);border-radius:99px;padding:5px 10px;font-family:var(--mono);font-size:11px;display:flex;align-items:center;gap:7px;transition:opacity .2s,transform .2s var(--ease)}
.qh:hover .match,.qh:has(:focus-visible) .match{opacity:0;transform:translateY(-6px)}
.pick{position:absolute;left:10px;bottom:12px;z-index:3;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:6px 9px;display:flex;align-items:center;gap:7px}
.info{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;line-height:1;display:inline-flex;align-items:center;vertical-align:baseline;cursor:help;position:relative;color:#8A8680}   /* round 31, part 5: the icon set's info */
.info:hover .ico,.info:focus-visible .ico,.info[aria-expanded="true"] .ico{color:#1A1A1A}
/* round 30, part 2: the card's own text stays in the HTML (.tt) but is never laid out: one tooltip (#btip, site.js BTip) shows it in the top layer */
.info .tt{display:none}

.btip{position:fixed;inset:auto;margin:0;left:0;top:0;z-index:2147483000;box-sizing:border-box;width:max-content;max-width:280px;border:0;background:var(--ink);color:#E6E2DC;
  font-family:var(--font);font-size:12.5px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;overflow-wrap:break-word;
  padding:10px 12px;border-radius:10px;box-shadow:var(--shadow-float);pointer-events:auto;display:none;animation:btin .15s var(--ease)}
.btip:popover-open,.btip.on{display:block}
.btip b{color:#fff;display:block;margin-bottom:4px;font-weight:500}
.btip p{margin:0 0 6px}.btip p:last-child{margin:0}
.btip::after{content:"";position:absolute;left:var(--ax,50%);top:100%;width:10px;height:5px;margin-left:-5px;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}
.btip.below::after{top:auto;bottom:100%;clip-path:polygon(50% 0,100% 100%,0 100%)}
@keyframes btin{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.btip{animation:none}}
.live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--ink)}
.live em{font-style:normal;color:var(--mute)}


/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-size:13.5px;box-shadow:var(--shadow-float);opacity:0;transition:.25s;z-index:40;display:flex;gap:9px;align-items:center;max-width:calc(100% - 32px);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* F2 · footer, aligned on the same gutter as the header */
.f2{background:var(--ink);color:#fff;margin-top:72px;--edge:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))}
footer.f2 > .band,footer.f2 > .cols,footer.f2 > .fbar{padding-left:var(--edge);padding-right:var(--edge)}
.f2 .band{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:40px;border-bottom:1px solid #2B2B2B}
.f2 .band .dsp{font-size:clamp(28px,3.4vw,44px)}
.f2 .cols{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:24px;padding-block:40px}
.f2 .cols b{display:block;color:#8E8981;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;margin-bottom:12px}
.f2 .cols a{display:block;padding:4px 0;font-size:14.5px;color:#E6E2DC}.f2 .cols a:hover{color:var(--orange)}
.f2 .cols a.flogo{display:flex;padding:0;color:#fff;font-size:24px;letter-spacing:-.05em}
.flogo .lt{width:180px;height:32px}
.f2 .soc{display:flex;gap:8px;margin-top:16px}
.f2 .cols .soc a{width:40px;height:40px;border-radius:50%;background:#262626;display:grid;place-items:center;color:#fff;padding:0;transition:background .2s}
.f2 .soc a:hover{background:var(--orange);color:#fff}
.f2 .soc svg{width:16px;height:16px;display:block}
.fbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-block:18px;border-top:1px solid #2B2B2B;font-size:13px;color:#8E8981}
.fbar .legal{display:flex;gap:18px;flex-wrap:nowrap}
.fbar .legal a{white-space:nowrap}
.fbar a:hover{color:#fff}
@media (max-width:900px){.f2 .cols{grid-template-columns:1fr 1fr}}
/* round 33, A4: the footer on phones. The CTA band: the title, then two buttons of the same width, full width, stacked; the brand block
   (logo, line, contact buttons) across the whole width; the four link groups as two balanced pairs (Clothing | Gear, About us | Contact) */
@media (max-width:600px){
  .f2 .band{flex-direction:column;align-items:stretch;gap:24px;padding-block:36px}
  .f2 .band > div{display:grid!important;grid-template-columns:1fr;gap:10px;width:100%;align-self:stretch}
  .f2 .band .btn{width:100%;box-sizing:border-box;justify-content:center;min-height:52px}
  .f2 .cols{grid-template-columns:1fr 1fr;gap:32px 16px;padding-block:36px}
  .f2 .cols > div:first-child{grid-column:1 / -1}
  .f2 .cols > div:first-child p{max-width:34ch}
  .fbar{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
/* BR-3 · branding block (product page + quote page lines), from design/banger-produit-devis-3.html */
.bz [hidden]{display:none!important}
.bz{margin-top:28px;border-top:1.5px solid var(--line);padding-top:22px;position:relative}
.bz .bh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bz .bh h4{margin:0;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.bz .inf{all:unset;cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--mute);display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:8px}
.bz .inf:hover{background:var(--chip);color:var(--ink)}.bz .inf[aria-expanded="true"]{color:var(--ink)}.bz .inf .pl{flex:none}
.bz .inf b{width:18px;height:18px;border-radius:50%;border:1.3px solid currentColor;display:grid;place-items:center;font-size:11px;font-weight:500}
.bz .infp{margin-top:12px;background:var(--chip);border-radius:12px;padding:14px 16px;font-size:13.5px;color:#4A4741;display:grid;gap:8px;animation:brfd .25s var(--ease)}
@keyframes brfd{from{opacity:0;transform:translateY(-4px)}}
.bz .infp p{margin:0}.bz .infp b{color:var(--ink);font-weight:600}
.bz .mbody{margin-top:16px;animation:brfd .3s var(--ease)}
.bz .tf{position:relative}
.bz .tfbox{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;min-height:56px;height:56px;padding:9px 8px 9px 44px;border-radius:12px;border:1px solid var(--field-border);background:#fff;transition:border-color .2s;cursor:text;position:relative;overflow:hidden}
.bz .tfbox:hover{border-color:var(--field-hover)}
.bz .tfbox:focus-within{border-color:var(--field-focus)}
.bz .tfbox > svg{position:absolute;left:16px;top:20px;color:var(--mute)}
.bz .toks{display:contents}
.bz .tfsc{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 4px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 4px),transparent)}
.bz .tfsc.start{-webkit-mask-image:none;mask-image:none}
.bz .tfsc::-webkit-scrollbar{display:none}
.bz .tok{display:inline-flex;flex:none;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:9px;height:34px;padding:0 5px 0 12px;font-size:14px;animation:brpop .3s var(--ease);white-space:nowrap}
@keyframes brpop{from{transform:scale(.7);opacity:0}}
.bz .tok button{all:unset;cursor:pointer;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:13px;background:rgba(255,255,255,.16)}
.bz .tok button:hover{background:var(--orange)}
.bz .tfbox input{flex:1 0 190px;min-width:190px;border:0;outline:none;font-size:15px;height:34px;background:none;padding:0}
.bz .sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border-radius:12px;box-shadow:var(--shadow-float);padding:6px;display:grid;gap:1px;animation:brfd .2s var(--ease);max-height:280px;overflow:auto}
.bz .sug[hidden]{display:none}
.bz .sug button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:14px}
.bz .sug button:hover,.bz .sug button.on{background:var(--chip)}
.bz .sug button em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--mute)}
.bz .sug mark{background:none;color:var(--orange);font-weight:600}
.bz .quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;align-items:center}
.bz .quick small{font-family:var(--mono);font-size:11px;color:var(--mute);margin-right:2px}
.bz .quick button{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;background:var(--chip);padding:7px 11px 5px;border-radius:99px}
.bz .quick button:hover{background:#E8E5DE}
.bz .quick button[disabled]{opacity:.4;cursor:default}
.bz .brows{display:grid;gap:10px;margin-top:14px}
.bz .brows:empty{display:none}
.bz .prow{border-radius:14px;outline:1px solid var(--line);outline-offset:-1px;padding:12px;display:grid;gap:10px;animation:brrow .35s var(--ease)}
@keyframes brrow{from{opacity:0;transform:translateY(-6px)}}
.bz .prow .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bz .prow .top b{font-size:15px;font-weight:600}
.bz .bx{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--mute);font-size:15px;flex:none}
.bz .bx:hover{background:var(--ink);color:#fff}
.bz .bdrop{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;border:1.5px dashed #D6D1C8;background:#FCFBF9;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.bz .bdrop:hover,.bz .bdrop.over{border-color:var(--ink);background:#fff}
.bz .bdrop .ic{width:36px;height:36px;border-radius:9px;background:var(--chip);display:grid;place-items:center;flex:none}
.bz .bdrop span b{font-weight:600;font-size:14px;display:block}
.bz .bdrop span small{font-family:var(--mono);font-size:11px;color:var(--mute)}
.bz .bdrop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bz .bdrop.err{border-color:var(--err);background:#FDF3F2}.bz .bdrop.err small{color:var(--err)}
.bz .bfile{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:var(--chip);animation:brrow .3s var(--ease)}
.bz .bfile .pv{width:44px;height:44px;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;font-family:var(--mono);font-size:11px;font-weight:500}
.bz .bfile .pv img{width:100%;height:100%;object-fit:contain;padding:4px}
.bz .bfile > span:nth-child(2){min-width:0;flex:1}
.bz .bfile span b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz .bfile span small{font-family:var(--mono);font-size:11px;color:var(--mute)}
.bz .bfile .lnk{all:unset;cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--mute);padding:4px 6px;border-radius:6px}
.bz .bfile .lnk:hover{color:var(--ink);background:#fff}
.bz .prow textarea,.bz .studio textarea{width:100%;min-height:64px;border-radius:10px;border:1px solid var(--field-border);padding:10px 12px;font-size:14px;resize:vertical;outline:none;transition:border-color .2s}
.bz .prow textarea:hover,.bz .studio textarea:hover{border-color:var(--field-hover)}
.bz .prow textarea:focus,.bz .studio textarea:focus{border-color:var(--field-focus)}
.bz .fmt{margin:12px 0 0;font-family:var(--mono);font-size:11px;color:var(--mute);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.bz .tfrow{display:flex;gap:8px;align-items:flex-start}.bz .tfrow .tf{flex:1;min-width:0}
.bz .dl{all:unset;cursor:pointer;box-sizing:border-box;height:56px;padding:0 16px;border-radius:12px;outline:1px solid var(--line);outline-offset:-1px;background:#fff;font-size:14px;font-weight:500;white-space:nowrap;flex:none;transition:outline-color .2s,background .2s}
.bz .dl:hover{outline-color:var(--ink)}
.bz .undo{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:8px;white-space:nowrap;flex:none}
.bz .later .undo{background:#fff}.bz .later .undo:hover{background:var(--ink);color:#fff}
.bz .studio .sh{display:flex;justify-content:space-between;align-items:center;gap:10px}.bz .studio .undo{color:#C9C4BC;background:#262626}.bz .studio .undo:hover{background:#333;color:#fff}
.bz .lk2{all:unset;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bz .lk2:hover{color:var(--orange)}
@media (max-width:560px){.bz .tfrow{flex-direction:column;align-items:stretch}.bz .dl{height:44px;text-align:center}}
.bz .studio{border-radius:16px;background:var(--ink);color:#fff;padding:20px;display:grid;gap:10px;animation:brfd .3s var(--ease)}
.bz .studio b{font-size:18px;letter-spacing:-.02em}
.bz .studio p{margin:0;color:#C9C4BC;font-size:14px}
.bz .studio textarea{background:#1F1F1F;border-color:#333;color:#fff}
.bz .studio textarea::placeholder{color:#8E8981}
.bz .later{border-radius:16px;background:var(--chip);padding:16px;display:flex;gap:14px;align-items:flex-start;animation:brfd .3s var(--ease)}
.bz .later .ic{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.bz .later b{display:block;margin-bottom:3px}.bz .later p{margin:0;color:#4A4741;font-size:14px}
/* DM-1 designers line (T5): 3 overlapping avatars (initials until the team photos) */
.bz .av{display:inline-flex}
.bz .av i{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-8px;padding-top:2px;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:500;color:#fff}
.bz .av i:first-child{margin-left:0}
.bz .av i:nth-child(1){background:#141414}.bz .av i:nth-child(2){background:#8C7A63}.bz .av i:nth-child(3){background:var(--orange)}
.bz .dm1{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:#4A4741}
.bz .dm1 b{color:var(--ink);font-weight:600}
/* QR-1 recap: branding summary under the line */
.ql .qbr{grid-column:1/-1;margin:-4px 0 0 50px;font-family:var(--mono);font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:6px;align-items:center}
.ql .qbr[hidden]{display:none}
.ql .qbr i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.st{opacity:1;transform:none}}

/* ---------- touch screens (mobile pass): tap targets ≥ 44 × 44 px, fields at 16 px so iOS does not zoom ----------
   Small controls keep their look: an invisible 44 px hit area is centered on them (::after), or the control itself grows
   where it has room (header buttons, card bar, footer links). Desktop (fine pointer) is unchanged. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
  .srch input{height:44px}
  .nl,.qx{height:44px}.qwrap{height:44px}.qx.big{height:44px;top:0}
  .logo,.nav .cats a,.info,.rnd,.bz .quick button,.bz .inf,.bz .lk2,.ip,.crumbs a,.crumb a,.sech > a,.tries a{position:relative}
  .logo::after,.nav .cats a::after,.info::after,.rnd::after,.bz .quick button::after,.bz .inf::after,.bz .lk2::after,.ip::after,.crumbs a::after,.crumb a::after,.sech > a::after,.tries a::after{
    content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .qbar .qf,.qbar .add{height:44px}
  .qf input{height:100%;line-height:normal}
  .qty .qf button{width:44px}
  .qline .qf.sm{height:44px}
  .bz .tfsc input{height:44px}
  .f2 .cols a{display:flex;align-items:center;min-height:44px;padding:0}
  .f2 .cols .soc a{width:44px;height:44px}
  .fbar .legal a{display:inline-flex;align-items:center;min-height:44px}
}
/* touch, continued: "html" in front so these win over the page styles (same selectors in each page's <style>) */
@media (pointer:coarse){
  html .qty .qf button{width:44px}
  html .qline .qf.sm{height:44px}html .qline .qf.sm button{width:44px}html .qline .qf.sm input{width:44px}
  html .filters button{height:44px}
  html .showall a,html .tool,html .stickyc .send.sm,html .bsum{min-height:44px;height:44px}html .tool.mic{width:44px;justify-content:center;padding:0}
  html .opt{min-height:44px}
  html .qstat{overflow:visible}
  html .about-btn,html .ch,html .cb,html .qstat button,html .smh a,html .mores .more,html details.more > summary,html .shd a.lnk,html .qline .nm a,html .hdr .x,html .qadd{position:relative}
  html .about-btn::after,html .ch::after,html .cb::after,html .qstat button::after,html .smh a::after,html .mores .more::after,html details.more > summary::after,
  html .shd a.lnk::after,html .qline .nm a::after,html .hdr .x::after,html .qadd::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
/* Sh-4 / F-3: controls whose 1 px line is drawn as an outline keep a visible keyboard focus (grey) */
:is(button,a,summary,[role=button],[tabindex]):focus-visible{outline:2px solid var(--field-focus)!important;outline-offset:2px!important}
/* round 32, part 1: no ring after a mouse click or a tap, even when a script hands the focus back (html.kb = the last input was a
   navigation key, site.js). The rings drawn with a box-shadow or on a pseudo-element are listed here too. */
html:not(.kb) :focus-visible{outline:none!important}
html:not(.kb) :is(.t3row,.simr,.ssb button):focus-visible,html:not(.kb) .category-intro summary:focus-visible span{box-shadow:none!important}
html:not(.kb) .u2 .row button:focus-visible::after{outline:none!important}

/* r8 (design/PROMPT-product-page.md A-1): product photos never move on hover, anywhere (catalog, category, search, home, product page);
   overrides the zooms of the validated homepage file too */
:is(.card .ph,.pcard,.ct,.col,.h4 .p2,.scrub,.stage,.thumbs button):hover :is(img,picture){transform:none!important}
.scrub .zones{pointer-events:none}
.pcard .lab,.h4 .pl{min-width:0}.pcard .lab b,.h4 .pl b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- chat (design/banger-chat-widget.html, P-2 + H-1, orange square, soft pulse) ----------
   The pill has a faint light inner ring so it stays visible over the black footer.
   H-1: "Chat" chip left of "Start a project", like "Your quote" (chip, radius 11, 40 px). P-2: the black "Chat with us" pill, fixed bottom right,
   only once the page has scrolled past the header's own height; the chip then folds out of the sticky header, so one chat button shows at a time.
   One card for both: under the chip, or above the pill. --lift (site.js) raises the pill and its card above the toast and other bottom bars. */
.cdot{width:8px;height:8px;border-radius:1px;background:var(--orange);flex:none;display:inline-block;animation:cpulse 1.6s ease-in-out infinite}
@keyframes cpulse{0%,100%{opacity:1}50%{opacity:.3}}
.chatw{display:inline-flex;flex:none;max-width:120px;overflow:hidden;transition:max-width .35s var(--ease),opacity .25s var(--ease),margin .35s var(--ease)}
.nav.chat-away .chatw{max-width:0;opacity:0;margin-right:-6px;pointer-events:none}
.nl.chat{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 13px;border-radius:11px;background:var(--chip);color:var(--ink);font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .2s}
.nl.chat:hover,.nl.chat[aria-expanded="true"]{background:#EAE7E0}
.nl.chat:focus-visible,.cpill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cpill{all:unset;cursor:pointer;box-sizing:border-box;position:fixed;z-index:36;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));height:48px;padding:0 18px 0 16px;border-radius:99px;background:var(--ink);color:#fff;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;box-shadow:var(--shadow-float),inset 0 0 0 1px rgba(255,255,255,.16);transform:translateY(calc(-1 * var(--lift,0px)));transition:opacity .3s var(--ease),transform .35s var(--ease),background .2s,visibility 0s}
.cpill:hover{background:#000}
.cpill .xx{display:none}
.cpill[aria-expanded="true"]{padding:0;width:48px;justify-content:center}
.cpill[aria-expanded="true"] .cdot,.cpill[aria-expanded="true"] .lb{display:none}
.cpill[aria-expanded="true"] .xx{display:block}
.cpill .xx svg{display:block}
.cpill.away{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.chatc{position:fixed;z-index:46;width:360px;max-width:calc(100vw - 32px);box-sizing:border-box;background:#fff;color:var(--ink);border-radius:16px;box-shadow:var(--shadow-float);padding:8px;animation:chatup .22s var(--ease)}
.chatc.fl{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px) + var(--lift,0px))}
@keyframes chatup{from{opacity:0;transform:translateY(6px) scale(.98)}}
.chatc{padding:16px}
/* round 16, C.1 L-1: founder avatar, title, reply time, one 50 px row per app */
.chatc .chh{display:flex;align-items:center;gap:12px;padding:0;margin-bottom:14px}
.chatc .cav{width:40px;height:40px;border-radius:50%;background:linear-gradient(160deg,#3A2E28,#141414);color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px;position:relative;flex:none}
.chatc .cav::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#2FB36B;box-shadow:0 0 0 2px #fff}
.chatc .cht{flex:1;min-width:0}
.chatc .chh b{font-size:15px;font-weight:600;display:block;line-height:1.2;white-space:nowrap}   /* round 17: one line, always */
/* round 17, H-1: the hours, two quiet mono lines between the title and the apps */
.chatc .chhrs{margin:-2px 0 14px;font-family:var(--mono);font-size:11.5px;color:var(--mute);display:grid;gap:2px}
.chatc .chh small{font-family:var(--mono);font-size:11.5px;color:var(--mute);display:block;margin-top:2px}
.chx{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--mute);flex:none;align-self:flex-start;margin:-6px -6px 0 0}
.chx:hover{background:var(--chip);color:var(--ink)}
.chx svg{width:18px;height:18px}
.chaps{display:grid;gap:8px}
.chr{display:flex;align-items:center;gap:12px;height:50px;box-sizing:border-box;padding:0 12px;border-radius:12px;background:#F5F3EF;color:var(--ink);text-decoration:none;transition:background .2s}
.chr:hover,.chr:focus-visible{background:#ECE9E3}
.chr:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.chr .lgo{width:26px;height:26px;display:grid;place-items:center;flex:none}
.chr .lgo svg{display:block;width:26px;height:26px}
.chr span{flex:1;min-width:0;font-size:14.5px;font-weight:500}
.chr .cha{font-style:normal;color:var(--mute);transition:transform .25s var(--ease);flex:none}
.chr:hover .cha,.chr:focus-visible .cha{transform:translateX(3px)}
/* under 600 px row 1 has no room for a 4th button (logo + Start a project + Quote fill it): the chip sits right of the search on row 2,
   at the field's height; when it folds (page scrolled) the search takes the room back. .side becomes transparent so the chip can change row. */
@media (max-width:600px){.nav .side{display:contents}.nav .nl.cta{margin-left:auto}.nav .qwrap{margin-left:-6px}
  .nav .srch{flex:1 1 calc(100% - 84px)}.chatw{order:4}.nav.chat-away .chatw{margin-left:-8px;margin-right:0}
  .nl.chat{font-size:14px;gap:8px;padding:0 13px 0 12px;height:42px}
  .cpill{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .chatc{width:calc(100vw - 32px);max-width:360px}.chatc .chh b{font-size:clamp(14px,3.9vw,15px)}.chatc.fl{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px) + var(--lift,0px))}}
@media (pointer:coarse){.nl.chat{height:44px}.chr{min-height:50px}.chx{width:44px;height:44px;margin:-10px -10px 0 0}}
@media (prefers-reduced-motion:reduce){.cdot{animation:none}}
.cpill.blocked,.chatc.blocked{opacity:0;pointer-events:none}
@media (max-width:380px){.nav .qwrap{margin-left:-4px}}

/* round 12 follow-up: a photo of the product alone is never cropped: contain, with a little room on the tile background; model photos keep cover */
img.pk{object-fit:contain!important;padding:4%;box-sizing:border-box}
/* round 17: a packshot on white or light studio grey (Headwear, img.wb) on the grey wall gradient: lifted 10 % so its background reaches white,
   then multiplied onto the tile: the background goes, the product keeps its colors (the lift and the tile's ~8 % darkening cancel out) */
img.wb{filter:brightness(1.1)}
img.wb.wb2{filter:brightness(1.15)}   /* round 19: a light packshot whose background is under 232 (r19_photos.py), lifted a little more */
picture:has(>img.wb),img.wb{mix-blend-mode:multiply}

/* round 13: the "Start a project" hover on every primary CTA with an arrow (one class, .xa): black fill sliding in from the left (.45s),
   the arrow .ar turning −45° (.3s); reduced motion: the fill shows at once, nothing slides */
.xa.xa{position:relative;overflow:hidden;isolation:isolate}   /* round 17: doubled class, so a later "all:unset" (.send) can't drop it */
.xa::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);pointer-events:none}
.xa > *{position:relative;z-index:1}
.xa:hover::before,.xa:focus-visible::before{transform:scaleX(1)}
.xa:hover,.xa:focus-visible{background:var(--orange)}
.xa .ar{display:inline-block;transition:transform .3s var(--ease)}
.xa:hover .ar,.xa:focus-visible .ar{transform:translateX(3px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.xa::before{transition:none}.xa .ar{transition:none}}
/* round 32, part 3: orange buttons are never black. Hover: a 6 % darker orange slides in (the r13 motion, not the black fill); pressed: the
   same darker orange and scale .98; the text is always white (footer a:hover used to turn it ink: a black empty shape). Every orange button
   of the site: header CTA, footer / band buttons, card + bars, Add to quote, Request quote, the Full catalog card, the quote panel's button, the hero's round search button (button.arw). */
:is(.nl.cta,.btn.o,.add,.addq,.send.rq,.pcard.fcx,.qp .go,button.arw),:is(.nl.cta,.btn.o,.add,.addq,.send.rq,.pcard.fcx,.qp .go,button.arw):is(:hover,:active,:visited,:focus-visible){color:#fff!important}
:is(.nl.cta,.btn.o,.add,.addq,.send.rq,.pcard.fcx,.qp .go,button.arw)::before{background:#D35027!important}
:is(.nl.cta,.btn.o,.add,.addq,.send.rq,.pcard.fcx,.qp .go,button.arw):is(:hover,:focus-visible){background:var(--orange)}
:is(.nl.cta,.btn.o,.add,.addq,.send.rq,.pcard.fcx,.qp .go,button.arw):active{background:#D35027!important;transform:scale(.98)}
:is(.nl.cta,.btn.o,.add,.addq,.send.rq,.pcard.fcx,.qp .go,button.arw):active::before{transform:scaleX(1)!important;transition:none!important}
.inq .add::before{background:var(--ink)!important}.inq .add:not([data-fresh]):hover::before{background:#3A3A3A!important}   /* (a card already in the quote: its black « In quote » / « Remove » state is not an orange button) */
/* round 13, I-1: the "In quote" pill on cards, 32 px, 12 px from the photo's corner at every width */
.bdg .sq{width:8px;height:8px;border-radius:1.5px;background:var(--orange)}
@media (max-width:640px){.bdg{left:12px;bottom:12px;height:32px;font-size:12px}}

/* round 13, Q-1 quote dropdown line: thumbnail (128 px since round 16) | content; row 1 name + color (one line, ellipsis) | line total right-aligned;
   row 2 stepper + remove; row 3 branding chips in a horizontal scroller with an edge fade */
/* (round 13 Q-1 grey cards: replaced by .qr, round 32 part 5) */

/* F-2 (round 13): All · Men · Women, right of the filter bar, apart from the subcategory chips; under 760 px on its own line */
.fitsw{display:inline-grid;grid-auto-flow:column;background:#F5F3EF;border-radius:99px;padding:3px;margin-left:auto;flex:none;align-self:center}
.fitsw button{border:0;background:none;cursor:pointer;height:30px;padding:0 14px;border-radius:99px;font-size:13.5px;color:var(--mute);display:grid;place-items:center;font-family:inherit}
.fitsw button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
@media (max-width:760px){.fitsw{margin-left:0}.bar .fitsw{flex:0 0 auto;order:3}}
.fitsw[hidden]{display:none}
/* round 13: the page never changes width when it gets taller (placements added on the product page): the scrollbar's room is kept */
html{scrollbar-gutter:stable}

/* round 14, E-1: the estimate in the "View quote" button (Geist Mono 13.5, .8, tabular); S-1 lines in grey cards */
.qp .go .p{font-family:var(--mono);font-size:.86em;opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}   /* N-1 */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* round 14, N-1 notes */
.nlk{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;line-height:20px;color:var(--mute);height:30px;padding:0 10px;margin-left:-10px;border-radius:8px}
.nlk .pl{display:block;flex:none;width:18px;height:18px}   /* round 16, C.4 */
.nlk:hover,.nlk:focus-visible{background:var(--chip);color:var(--ink)}
textarea.na{display:block;width:100%;box-sizing:border-box;min-height:84px;resize:none;overflow:hidden;border:1px solid var(--field-border,#D9D4CB);border-radius:12px;padding:12px 14px;font:inherit;font-size:14.5px;line-height:1.45;background:#fff;color:var(--ink);animation:nfd .25s var(--ease)}
textarea.na:hover{border-color:var(--field-hover,#B9B2A6)}
textarea.na:focus{outline:none;border-color:var(--ink)}
textarea.na::placeholder{color:#A39E96}
/* round 15b, N-1 close: × in the field (28 px, grey, hover dark), the folded one-line preview on #F5F3EF */
.nbox{position:relative}.nbox textarea.na{padding-right:44px}
.nx{all:unset;cursor:pointer;box-sizing:border-box;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--mute);flex:none;transition:background .15s,color .15s}
.nx:hover,.nx:focus-visible{background:#F5F3EF;color:var(--ink)}
.nbox .nx{position:absolute;right:8px;top:8px}
.nprev{display:flex;align-items:center;gap:10px;padding:10px 6px 10px 12px;border-radius:12px;background:#F5F3EF;cursor:pointer;animation:nfd .25s var(--ease);max-width:100%;box-sizing:border-box}
.nprev .ic{color:var(--mute);flex:none}
.nprev small{font-family:var(--mono);font-size:11px;color:var(--mute);flex:none}
.nprev span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:var(--ink)}
.nprev .nx:hover,.nprev .nx:focus-visible{background:#E9E5DE}
.nprev:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@keyframes nfd{from{opacity:0;transform:translateY(-4px)}}
.pnote{margin-top:14px}

/* round 14, L-2: cards rise in after a subcategory switch */
.card.rise{animation:rise .42s cubic-bezier(0,0,.2,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.card.rise{animation:none}}

/* ===== round 14 header: X-1, one white row (68 px, 56 px once scrolled past 80 px), BANGER exactly centered, search A-1 ===== */
.nav{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #E2DED6}
.nav .hrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"cats logo side";grid-template-rows:68px;align-items:center;column-gap:16px;transition:grid-template-rows .35s var(--ease)}
.nav.compact .hrow{grid-template-rows:56px}
/* round 15 A.3: the header's place in the page never changes: 12 px of margin take over the 12 px the row loses, at the same speed,
   so nothing under the header moves when it turns compact (the browser no longer has to shift the page to hide it) */
.nav{transition:margin-bottom .35s var(--ease)}.nav.compact{margin-bottom:12px}
.nav .cats{grid-area:cats;justify-self:start;min-width:0;padding:0;margin-left:-14px;position:static;transition:opacity .2s linear}
.nav .cats::after{display:none}
.nav .logo{grid-area:logo;justify-self:center;transition:opacity .2s linear}
.nav .logo .lt{width:150px;height:26px}
.nav .side{grid-area:side;justify-self:end;display:flex;align-items:center;gap:6px;min-width:0;transition:opacity .2s linear}
.nav .chatw{max-width:none}
.nav.chat-away .chatw{max-width:none;opacity:1;margin-right:0;pointer-events:auto}
/* the search button: the magnifier turns into a × (rotate + crossfade) when the field is open */
.ib{all:unset;cursor:pointer;box-sizing:border-box;height:40px;min-width:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s;position:relative;flex:none}
.ib:hover,.ib:focus-visible{background:var(--chip)}
.ib:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lp .m,.lp .c{position:absolute;inset:0;margin:auto;transition:opacity .2s linear,transform .4s cubic-bezier(.3,1.15,.4,1)}
.lp .c{opacity:0;transform:rotate(-90deg) scale(.6)}
.nav.searching .lp{background:var(--chip)}
.nav.searching .lp .m{opacity:0;transform:rotate(90deg) scale(.6)}
.nav.searching .lp .c{opacity:1;transform:none}
.lp.lonly{display:none}
.side .lp{margin-right:6px}
/* A-1 field: laid out at its final size (site.js sets left / width), opened with clip-path only, from the magnifier to the left edge */
.sfield{position:absolute;top:50%;height:44px;margin-top:-22px;left:0;width:200px;z-index:3;box-sizing:border-box;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #D9D4CB;
  display:flex;align-items:center;gap:10px;padding:0 12px;opacity:0;pointer-events:none;will-change:clip-path;clip-path:inset(0 0 0 calc(100% - 44px) round 12px);
  transition:clip-path .5s cubic-bezier(.3,1.15,.4,1),opacity .12s linear}
.nav.lft .sfield{clip-path:inset(0 calc(100% - 44px) 0 0 round 12px)}
.nav.searching .sfield{opacity:1;pointer-events:auto;clip-path:inset(0 round 12px)}
.sfield .mg{flex:none;color:var(--mute);position:static;transform:none}
.sfield input{all:unset;flex:1;min-width:0;font-size:15px;color:var(--ink)}
.sfield input::placeholder{color:#8E8981}
.sfield input::-webkit-search-cancel-button{display:none}
.sfield kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--mute);position:static;transform:none}
.nav.searching .cats,.nav.searching .logo{opacity:0;pointer-events:none}
/* results panel under the header (Popular searches + products), fading in 80 ms after the field; a light dim, no blur */
.nav .drop{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 80px);overflow:auto;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);background:#fff;padding:0;
  animation:none;opacity:0;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .3s var(--ease)}
.nav.searching .drop{opacity:1;transform:none;transition-delay:.08s}
.nav .drop .sx{max-width:var(--cw);margin:0 auto;padding:22px var(--gutter,16px) 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
.nav .drop h6{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500}
.nav .drop .spop a{display:block;padding:6px 0;font-size:15px;color:#4A4741}
.nav .drop .spop a:hover,.nav .drop .spop a.on{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.nav .drop .sres4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.nav .drop .sres4 a{display:block;min-width:0}
.nav .drop .sres4 .ph{aspect-ratio:4/5;border-radius:12px;background:var(--tile);overflow:hidden}
.nav .drop .sres4 .ph img{width:100%;height:100%;object-fit:cover;display:block}
.nav .drop .sres4 .ph img.pk{object-fit:contain;padding:4%;box-sizing:border-box}
.nav .drop .sres4 b{display:block;font-size:13.5px;font-weight:600;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .drop .sres4 b mark{background:none;color:var(--orange)}
.nav .drop .sres4 span{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.nav .drop .sres4 a.on b{text-decoration:underline;text-underline-offset:3px}
.nav .drop .sall{grid-column:1 / -1;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.nav .drop .sall:hover{color:var(--orange)}
.nav .drop .snone{color:var(--mute);font-size:14px}
.hscrim{position:fixed;inset:0;z-index:35;background:rgba(20,20,20,.22);opacity:0;pointer-events:none;transition:opacity .25s linear}
body.sdim .hscrim{opacity:1;pointer-events:auto}
/* 761-1240 px: the categories on a second row (horizontal scroll, no wrap), the magnifier left of row 1, logo still centered */
@media (max-width:1240px){
  .nav .hrow{grid-template-areas:"lp logo side" "cats cats cats";grid-template-rows:68px auto}
  .nav.compact .hrow{grid-template-rows:56px auto}
  .lp.lonly{display:inline-flex;grid-area:lp;justify-self:start;margin-left:-8px}
  .side .lp{display:none}
  .nav .cats{justify-self:stretch;margin:0 calc(-1 * var(--gutter,16px));padding:8px var(--gutter,16px);border-top:1px solid #E2DED6;overflow-x:auto;flex-wrap:nowrap}
  .nav .drop .sres4{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* under 761 px: magnifier left, logo 16 px high, Chat square + quote count right, "Start a project" not in the header */
@media (max-width:760px){
  .nav .side{display:flex;gap:2px}.chatw{order:0}
  .nav .logo .lt{width:92px;height:16px}
  .nav .nl.cta{display:none}
  .nav .nl.chat{width:40px;padding:0;justify-content:center;gap:0}.nav .nl.chat span{display:none}
  .nav .qx .qt,.nav .qx .qs{display:none}.nav .qwrap{width:44px}.nav .qx{padding:0 10px}
  .nav .hrow{column-gap:8px}
  .nav .drop .sx{grid-template-columns:1fr;gap:18px}.nav .drop .sres4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.sfield,.lp .m,.lp .c,.nav .drop,.nav .hrow,.hscrim,.nav .cats,.nav .logo{transition:none!important}}

/* round 14: chat card opened on hover from the header chip: an invisible bridge over the gap */
.chatc.hov::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* the field sits on row 1 (centered on its 68 / 56 px), not on the whole header when the categories take a second row */
.sfield{top:34px;transition:clip-path .5s cubic-bezier(.3,1.15,.4,1),opacity .12s linear,top .35s var(--ease)}
.nav.compact .sfield{top:28px}
.sfield input:focus,.sfield input:focus-visible{outline:none}
.sfield:focus-within{box-shadow:inset 0 0 0 1px var(--ink)}
.sfield input:focus-visible{outline:none!important}
@media (max-width:760px){.nav .qwrap{width:44px;margin-left:4px}.nav .qx{right:0;width:44px;justify-content:center;padding:0}.nav .qx .n{margin-left:0}
  .nav .drop{max-height:calc(100vh - 220px)}}

/* ---------- round 17, Curated (design/banger-round17.html tab 2; the Curated previews P-4 + B-1 + C-1) ---------- */
/* P-4: the transparent packshot on the Stanley/Stella wall grey (the tile gradient), a soft floor shadow; on hover (mouse) the color's own
   supplier close-up, whole (contained, never cropped by us), with one fact; no close-up: the normal photo change of every card */
.card.cur .ph img.pk{filter:drop-shadow(0 14px 14px rgba(20,20,20,.16))}
.card.cur .mac{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s var(--ease);background:linear-gradient(180deg,#ECEAE6,#E3E0DA);pointer-events:none}
.card.cur .mac picture{position:absolute;inset:0}
.card.cur .mac img{filter:none}
.card.cur .mac span{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(20,20,20,.62);padding:5px 9px;border-radius:99px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.card.cur .ph:hover .mac{opacity:1}}
/* B-1: the white "■ Curated" pill on the photo */
.curp{position:absolute;left:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;background:#fff;
  color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 1px 2px rgba(20,20,20,.08);pointer-events:none}
.curp .sq,.cchip .sq,.cursw .sq,.ckick .sq{width:8px;height:8px;background:var(--orange);display:inline-block;flex:none;border-radius:0}
/* C-1: the chip is the same as the others, only the orange square in front */
.filters button.cchip{gap:7px}
/* K-2: All · ■ Curated, the same switch as All · Men · Women, right of it; both on one line when they fit, else the second one under */
.sws2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto;flex:none;align-self:center}
.sws2 .fitsw{margin-left:0}
.fitsw.cursw button{gap:6px;display:inline-flex;align-items:center}
@media (max-width:760px){.bar .sws2{flex:0 1 auto;order:3;margin-left:0}}
/* product page: kicker and the 3 facts (weight / fabric / made in) */
.ckick{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.cfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0 4px;max-width:520px}
.cfacts div{padding:12px 0;min-width:0}.cfacts div+div{border-left:1px solid var(--line);padding-left:14px}
.cfacts small{display:block;font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}.cfacts b{font-weight:500}
/* ---------- round 17, search ---------- */
/* live match score on every result card (search page and header panel), mono, small, top right of the photo */
.mpc{position:absolute;right:10px;top:10px;z-index:3;background:rgba(255,255,255,.92);border-radius:99px;padding:3px 8px;font-family:var(--mono);font-size:11px;color:var(--ink);pointer-events:none;font-variant-numeric:tabular-nums}
/* header panel: the category cards, 4 across (3 from 1240 px, 2 under 761 px) */
.nav .drop .sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 8px}
.nav .drop .sgrid .card a.nm.on{text-decoration:underline;text-underline-offset:3px}
.nav .drop .sclose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-right:12px}
@media (max-width:1240px){.nav .drop .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.nav .drop .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ssw{margin-left:0}
/* ---------- round 17b: one search everywhere ---------- */
/* the "Understood" and "Try" chips of a search (header panel, hero), as on the search page */
.schips{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;font-size:13px}
.schips > span{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.schips small{font-family:var(--mono);font-size:11px;color:var(--mute);margin-right:-4px}
.schips .chipx{display:inline-flex;align-items:center;gap:7px}.schips .chipx .sq{width:7px;height:7px;border-radius:1.5px;background:var(--orange);flex:none}
.schips .sch-t a{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;background:var(--chip);font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.schips .sch-t a:hover{background:var(--line)}
/* hero: the same cards, 2 across in the dark tile */
.dres .hund{color:#E6E2DC;padding:8px 8px 4px;margin:4px 0 0;border-top:1px solid #2E2E2E}
.dres .hund small{color:#8E8981}
.dres .hund .sch-t a{background:#262626;color:#E6E2DC}.dres .hund .sch-t a:hover{background:#333}
.dres .hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px;padding:0 0 8px}
.dres .hgrid .card .meta,.dres .hgrid .card .nm{color:#F2EFEA}
.dres .hgrid .card .pr,.dres .hgrid .card .sub{color:#A8A39B}
.dres .hgrid .card .meta{flex-wrap:wrap;row-gap:0}
.dres .hgrid .card .qbar{left:6px;right:6px;bottom:6px}
.dres .hgrid .card .qbar .qf{display:none}
.dres .hgrid .card .mpc{right:6px;top:6px}
.dres .hgrid .card .curp{left:6px;top:6px}
.dres .hgrid .card .meta{display:block}
.dres .hgrid .card .nm{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.dres .hgrid .card .pr{display:block;margin-top:1px}
.dres .hgrid .card .curp{height:20px;padding:0 6px;font-size:9px;gap:4px;letter-spacing:.04em}.dres .hgrid .card .curp .sq{width:6px;height:6px}
.dres .hgrid .card .mpc{font-size:10px;padding:2px 6px}
.dres .hgrid .card .sub{flex-wrap:wrap;font-size:11px}
/* ---------- round 18 ---------- */
.card .sws i.on{outline:1.5px solid var(--ink);outline-offset:1px}   /* the color the card opens on (a color asked in the search) */
.snomatch{margin:0 0 10px;font-size:15px;font-weight:500}
.dres .hnone{padding:6px 8px 0;color:#E6E2DC}
.dres .hnone .snomatch{color:#F2EFEA}
.dres .hnone .spk,.nav .drop .spk{margin:14px 0 10px}
#sAll .spk{grid-column:1/-1;margin:0 0 4px;font-size:18px;letter-spacing:-.02em}

/* round 28, part 1: THE round-button arrow (.rarr: one SVG, viewBox 24, the → path; drawn as ↗ by rotating it about its centre, which keeps
   its visual box centred: ±4.95 on both axes). Sizes chosen so the icon lands on whole pixels in its circle (44/18, 40/18, 32/16, 50/20).
   The move: below (round 29). Reduced motion: the arrow turns to ↗ without the flight */
.rarr{display:block;flex:none;transform:rotate(var(--rr0,0deg));transform-origin:50% 50%;translate:var(--nx,0px) 0;transition:transform .25s var(--ease)}
/* round 29, part 1: THE move, one shared rule for every round arrow button (the /catalog circles, the hero search, the Explore tile, the
   Contact cards). The arrow stays opaque and flies fully OUT of its circle up-right (the circle clips it: overflow hidden), comes back IN from
   down-left and lands exactly centred. On the individual translate property, in screen axes, so every button moves the same way whatever its
   rotation; --fly = how far it goes (the circle's radius + half the arrow), --nx = the optical nudge it rests at. GPU only. */
@keyframes rafly{0%{translate:var(--nx,0px) 0;animation-timing-function:cubic-bezier(.55,0,.8,.3)}
  45%{translate:calc(var(--nx,0px) + var(--fly,22px)) calc(-1 * var(--fly,22px))}
  45.01%{translate:calc(var(--nx,0px) - var(--fly,22px)) var(--fly,22px);animation-timing-function:cubic-bezier(.2,.75,.25,1)}
  100%{translate:var(--nx,0px) 0}}
.ct:hover .rarr,.ct:focus-visible .rarr,.arw:hover .rarr,.arw:focus-visible .rarr,.fcx:hover .rarr,.fcx:focus-visible .rarr,.ccard:hover .rarr,.ccard:focus-visible .rarr{
  transform:rotate(var(--rr,-45deg));animation:rafly .6s both}
/* ↗ is drawn by rotating →: its head is the heavy end, so it rests half a pixel left */
.cgo .rarr{--rr0:-45deg;--nx:-.5px;--fly:21px}
.arw .rarr{--fly:23px}.arw:hover .rarr,.arw:focus-visible .rarr{--nx:-.5px}
.fcx .arr .rarr{--fly:26px}.fcx:hover .arr .rarr,.fcx:focus-visible .arr .rarr{--nx:-.5px}
.fcx .arr{overflow:hidden}
@media (max-width:900px){.fcx .arr .rarr{--fly:21px}}
@media (max-width:600px){.cgo .rarr{--fly:17px}}
@media (prefers-reduced-motion:reduce){.rarr{animation:none!important;transition:none}}

/* round 28, part 4 (N-1, design/banger-numbers.html): a Geist Mono number next to a Geist word sits on the word's baseline, at .86em of it,
   line-height 1, tabular figures; a chip keeps its vertical centring with align-content on a one-line wrapping flex (never align-items:center) */

/* ======================================================================================================================================
   Round 34, part 1: the phone, iPhone first (under 761 px; desktop unchanged). The phone picks of round 33: header HD-1, the dock, the search
   sheet (the MH-1 one, also behind the header's magnifier), the phone footer; one rhythm: 20 px sides, 56 px between sections, 44 px targets.
   ====================================================================================================================================== */
.dock,.fct,.bsheet{display:none}
@media (max-width:760px){
  /* HD-1: a frosted bar, logo left; search · quote count · « Start a project » right (« Start » under 375 px); Chat leaves the header
     (Telegram is in the dock, WhatsApp in the footer and the « Ready for your next drop? » card) */
  .nav{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid rgba(20,20,20,.07)}
  .nav .hrow,.nav.compact .hrow{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"logo . lp side" "cats cats cats cats";grid-template-rows:56px auto;column-gap:0}
  .nav.compact{margin-bottom:0}
  .nav .logo{justify-self:start;grid-area:logo}
  .nav .lp.lonly{grid-area:lp;justify-self:end;margin:0;width:44px;height:44px}
  .nav .side{display:flex!important;gap:0;align-items:center}
  .nav .chatw,.nav .side .lp{display:none!important}
  .nav .qwrap{order:1;margin:0!important;width:44px}.nav .qx{width:44px;height:44px}
  .nav .nl.cta{order:2;display:inline-flex!important;height:40px;margin-left:6px!important;padding:0 14px;border-radius:12px;font-size:15px;gap:0;white-space:nowrap}
  .nav .nl.cta .ar{display:none}
  .cpill,.chatc.fl{display:none!important}
  /* the dock: after the first screen, frosted, « Start a project » · « Quote · N » · Telegram; hidden over the footer and while a sheet is open */
  .dock{display:grid;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;grid-template-columns:minmax(0,1fr) auto 48px;gap:8px;padding:8px;border-radius:22px;
    background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 0 0 1px rgba(20,20,20,.06),0 12px 30px rgba(20,20,20,.14);
    transform:translateY(calc(100% + 30px));transition:transform .35s var(--ease);pointer-events:none}
  .dock.on{transform:none;pointer-events:auto}
  .dock a,.dock button{all:unset;box-sizing:border-box;cursor:pointer;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;white-space:nowrap}
  .dock .dk-go{background:var(--orange);color:#fff;position:relative;overflow:hidden}
  .dock .dk-q{background:#F1EFEB;color:var(--ink);padding:0 16px;gap:6px}.dock .dk-q b{font:500 14px var(--mono);font-variant-numeric:tabular-nums}
  .dock .dk-tg{background:#F1EFEB;color:#229ED9}.dock .dk-tg svg{width:22px;height:22px}
  .dock a:focus-visible,.dock button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  html.sheet-open .dock,html.qopen .dock{transform:translateY(calc(100% + 30px));pointer-events:none}
  body.has-dock .f2 .fbar{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* the footer for phones: the logo, one line, Telegram · WhatsApp · Email, the link groups as accordions (every link in the HTML) */
  footer.f2 .cols .soc{display:none}
  footer.f2 .cols .fct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
  footer.f2 .cols .fct a{height:48px;min-height:48px;border-radius:14px;background:#262626;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;padding:0}
  footer.f2 .cols .fct a:active{background:#333}
  .f2 .cols{grid-template-columns:1fr!important;gap:0!important;padding-block:32px 8px}
  .f2 .cols > div:first-child{padding-bottom:22px}
  .f2 .cols > div:not(:first-child){border-top:1px solid #2B2B2B}
  .f2 .cols > div:last-child{border-bottom:1px solid #2B2B2B}
  .f2 .cols > div:not(:first-child) > b{display:flex!important;align-items:center;justify-content:space-between;min-height:54px;margin:0!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .f2 .cols > div:not(:first-child) > b::after{content:"+";font:300 22px var(--font);color:#8E8981;letter-spacing:0;text-transform:none}
  .f2 .cols.acc > div:not(:first-child) > a{display:none}
  .f2 .cols.acc > div.open > a{display:flex;align-items:center;min-height:44px;font-size:17px}
  .f2 .cols.acc > div.open > a:last-child{margin-bottom:12px}
  .f2 .cols.acc > div.open > b::after{content:"−"}
  .f2 .band .dsp{font-size:34px;line-height:1.02}
  /* the search sheet (MH-1): full screen, the field on top (17 px: no iOS zoom), live results under it, as tall as what the keyboard leaves */
  .bsheet{display:flex;position:fixed;left:0;right:0;top:0;height:100%;z-index:120;background:#fff;flex-direction:column;transform:translateY(102%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s}
  .bsheet.on{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .bsheet .bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--line)}
  .bsheet .fld{flex:1;display:flex;align-items:center;gap:8px;height:44px;border-radius:12px;background:#F1EFEB;padding:0 12px;min-width:0}
  .bsheet .fld svg{width:18px;height:18px;color:#8A8680;flex:none}
  .bsheet .fld input{all:unset;flex:1;min-width:0;font-size:17px!important;color:var(--ink)}
  .bsheet .fld input::placeholder{color:#8A8680}
  .bsheet .cancel{all:unset;cursor:pointer;color:var(--orange);font-size:17px;height:44px;display:flex;align-items:center;padding:0 2px}
  .bsheet .body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 28px}
  .bsheet .bsec{font-size:13px;color:var(--mute);margin:6px 0 10px}
  .bsheet .chips{display:flex;flex-wrap:wrap;gap:8px}
  .bsheet .chips button{all:unset;cursor:pointer;box-sizing:border-box;background:#F1EFEB;border-radius:99px;min-height:44px;padding:0 16px;font-size:15px;color:var(--ink);display:flex;align-items:center}
  .bsheet .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;align-items:start;grid-auto-rows:auto}
  .bsheet .grid2 .card{content-visibility:visible!important;contain-intrinsic-size:none!important;height:auto!important}
  .bsheet .hint{font-size:13px;color:var(--mute);margin:0 0 12px}
  .bsheet .all{display:flex;align-items:center;justify-content:center;height:50px;margin-top:18px;border-radius:14px;background:var(--ink);color:#fff;font-weight:500}
  html.sheet-open,html.sheet-open body{overflow:hidden}
  /* one rhythm: sections 56 px apart; the 2-column card grids 16 px apart, no placeholder height left visible */

}
@media (max-width:374px){.nav .nl.cta .l2{display:none}.nav .nl.cta{padding:0 12px}}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.dock,.bsheet,.bsheet.on{transition:none}}
/* round 34, part 1: 44 x 44 tap targets on phones (the visible size stays where the design needs it small; the hit area grows) */
@media (max-width:760px){
  body .qbar .qf button{position:relative}
  body .qbar .qf button::before{content:"";position:absolute;top:0;bottom:0;left:-11px;right:-11px}
  body .card .nm{display:inline-block;min-width:44px;padding-block:12px;margin-block:-12px}
  body .psws{gap:14px;padding:10px 10px 6px 7px;margin:-10px -10px 0 -7px}
  body .psws button{width:30px;height:30px}
  body .psws button::before{content:"";position:absolute;inset:-7px}
  body .cnav{width:44px;height:44px;margin-top:-22px}
  body .nav .nl.cta{height:44px}
  body :is(.how,.nlk,.dd,.lnk,.back,.rbtn,.tch,#fqask,.fqchips button,.fqd .acts a,.fqd .acts button,.cpy,.docnav a,.tabs a,[role=tab])
    {min-height:44px;min-width:44px;box-sizing:border-box}
  body :is(.lnk,.back){display:inline-flex;align-items:center}
  body .category-intro summary{min-height:44px}
  body .fbar a,body .fbar .legal a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  body .emp a,body .empty a,body .qempty a,body .rqempty a{display:inline-flex!important;align-items:center;min-height:44px!important}
  body .op a,body .op button{display:inline-flex!important;align-items:center;min-height:44px!important}
  /* the essentials' swipe cards: the whole name, on two lines if needed (no ellipsis) */
  body .pg .pcard .lab{align-items:flex-start;gap:8px}body .pg .pcard .lab b{white-space:normal;overflow:visible;text-overflow:clip;min-width:0}body .pg .pcard .lab span{white-space:nowrap;flex:none}
  body .addw .st button{min-width:44px}
}
/* round 34, part 1: the quote forms on phones: the submit button stays at the bottom of the screen while the form is on it (sticky inside
   its form: it lands back in place at the form's end); Turnstile's line right under it */
@media (max-width:760px){
  form .send.rq,.sm.rq#qsend{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:6;box-shadow:0 10px 30px rgba(20,20,20,.18)}
}

/* round 34: every field 16 px or more on touch screens at any width (iPad included): iOS zooms on a smaller one */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:max(16px,1em)!important}}