/* ============================================================
   Vertikal Sport: site styles
   Mobile first. Every value comes from css/tokens.css.
   Sections, in order: base, layout, type, buttons, forms, chips,
   header + menus, search, breadcrumbs, product card, category,
   product page, dialogs (drawer, sheet, modal), cart + checkout,
   content pages, home, professional, footer, utilities.
   ============================================================ */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh-body);font-weight:var(--fw-regular);
  color:var(--txt);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-xs)}
.on-dark :focus-visible,.pro :focus-visible{outline-color:var(--hivis)}
::selection{background:var(--hivis);color:var(--ink)}

/* language blocks: markup carries both, the page shows one.
   The edge function strips the other language server-side. */
html[lang="en"] [data-l="mk"],html[lang="mk"] [data-l="en"]{display:none!important}

.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--on-dark);padding:12px 16px;border-radius:var(--r-sm)}
.skip:focus{left:8px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding-top:var(--s-10);padding-bottom:var(--s-10)}
@media (min-width:1024px){.section{padding-top:var(--s-16);padding-bottom:var(--s-16)}}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.section-head a{font-weight:var(--fw-medium);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;min-height:var(--tap);display:inline-flex;align-items:center}
.stack>*+*{margin-top:var(--s-4)}

/* ---------- type ---------- */
h1,h2,h3,h4{line-height:var(--lh-snug);font-weight:var(--fw-black);letter-spacing:var(--track-display)}
.h1{font-size:var(--fs-2xl);line-height:var(--lh-tight)}
.h2{font-size:var(--fs-xl)}
.h3{font-size:var(--fs-lg)}
@media (min-width:1024px){.h1{font-size:var(--fs-4xl)}.h2{font-size:var(--fs-2xl)}}
.lead{font-size:var(--fs-lg);color:var(--txt-2);max-width:var(--measure)}
.muted{color:var(--txt-2)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.num{font-variant-numeric:tabular-nums}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1em}
.prose h2{font-size:var(--fs-xl);margin-top:1.8em}
.prose h3{font-size:var(--fs-lg);margin-top:1.4em}
.prose ul{list-style:disc;padding-left:1.25em}
.prose ol{list-style:decimal;padding-left:1.25em}
.prose li+li{margin-top:.4em}
.prose a{text-decoration:underline;text-underline-offset:3px;font-weight:var(--fw-medium)}
.prose table{font-size:var(--fs-sm)}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:var(--fw-bold)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-6);
  border-radius:var(--r-pill);font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:1.2;text-align:center;
  transition:background var(--t-fast) var(--ease),color var(--t-fast),border-color var(--t-fast);border:2px solid transparent;white-space:nowrap}
.btn-primary{background:var(--rope);color:#fff}
.btn-primary:hover{background:var(--rope-hover)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#333}
.btn-outline{border-color:var(--ink);background:var(--paper)}
.btn-outline:hover{background:var(--chalk)}
.btn-ghost{padding:0 var(--s-3)}
.btn-ghost:hover{background:var(--chalk)}
.btn-hivis{background:var(--hivis);color:var(--ink)}
.btn-hivis:hover{background:#ffe04d}
.btn-sm{min-height:36px;padding:0 var(--s-4);font-size:var(--fs-sm)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--chalk-2);color:var(--txt-3);cursor:not-allowed;border-color:transparent}
.link{text-decoration:underline;text-underline-offset:3px;font-weight:var(--fw-medium)}
.link-btn{text-decoration:underline;text-underline-offset:3px;font-weight:var(--fw-medium);min-height:var(--tap);display:inline-flex;align-items:center}

/* ---------- forms ---------- */
.field{display:grid;gap:6px}
.field label,.label{font-weight:var(--fw-medium);font-size:var(--fs-sm)}
.input,.select,.textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid #bdbbbc;border-radius:var(--r-sm);background:var(--paper);font-size:16px}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(245,121,6,.35)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--bad);background:var(--bad-bg)}
.field .err{color:var(--bad);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.hint{font-size:var(--fs-xs);color:var(--txt-2)}
.check{display:flex;gap:10px;align-items:flex-start;min-height:var(--tap);padding-top:10px;cursor:pointer;font-size:var(--fs-sm)}
.check input{width:20px;height:20px;accent-color:var(--rope);flex:none;margin-top:1px}
.row-2{display:grid;gap:var(--s-3)}
@media (min-width:640px){.row-2{grid-template-columns:1fr 1fr}}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer;min-height:var(--tap)}
.radio-card input{width:20px;height:20px;accent-color:var(--rope);margin-top:2px;flex:none}
.radio-card:has(input:checked){border-color:var(--ink);background:var(--chalk)}
.radio-card .rc-main{flex:1;display:grid;gap:2px}
.radio-card .rc-price{font-weight:var(--fw-bold);white-space:nowrap}
.hp{position:absolute;left:-9999px}  /* honeypot */

/* ---------- chips, tags, badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--paper);font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"],a.chip[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-x::after{content:"";width:10px;height:10px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
/* certification stamp: the one "loud" motif, styled like the label sewn on gear */
.cert{display:inline-flex;align-items:center;min-height:26px;padding:2px 8px;border:1.5px solid var(--ink);border-radius:var(--r-xs);
  font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.02em;font-variant-numeric:tabular-nums;background:var(--paper)}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.badge-new{background:var(--ink);color:#fff}
.badge-sale{background:var(--bad);color:#fff}
.badge-last{background:var(--warn-bg);color:var(--warn)}
.badge-best{background:var(--hivis);color:var(--ink)}
.badge-kit{background:var(--chalk-2);color:var(--ink)}

/* ---------- announcement + header ---------- */
.announce .a2{display:none}@media (min-width:768px){.announce .a2{display:inline}}
.announce{min-height:33px;background:var(--ink);color:#fff;font-size:var(--fs-xs);text-align:center;padding:8px var(--gutter);font-weight:var(--fw-medium)}
.announce a{text-decoration:underline}
.hdr{position:sticky;top:0;z-index:var(--z-header);background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow var(--t-base)}
.hdr.is-compact{box-shadow:var(--shadow-1)}
.hdr-row{display:flex;align-items:center;gap:var(--s-2);height:var(--header-h);transition:height var(--t-base) var(--ease)}
.hdr.is-compact .hdr-row{height:var(--header-h-compact)}
.logo{font-weight:var(--fw-black);font-size:1.125rem;letter-spacing:-.03em;white-space:nowrap;min-height:var(--tap);display:flex;align-items:center;margin-right:auto}
@media (min-width:1024px){.logo{font-size:1.375rem;margin-right:var(--s-6)}}
.icon-btn{position:relative;width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill)}
.icon-btn:hover{background:var(--chalk)}
.icon-btn svg{width:22px;height:22px}
.count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rope);color:#fff;
  font-size:11px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.count:empty,.count[data-n="0"]{display:none}
.burger{margin-left:-10px}
@media (min-width:1024px){.burger{display:none}}
.lang{font-size:var(--fs-sm);font-weight:var(--fw-bold);min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill)}
.lang:hover{background:var(--chalk)}
.hdr .lang{display:none}
@media (min-width:640px){.hdr .lang{display:inline-flex}}
.hdr-search{display:none}
@media (min-width:1024px){
  .hdr-search{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--chalk);
    color:var(--txt-2);font-size:var(--fs-sm);width:260px;margin-right:var(--s-2)}
  .hdr-search:hover{background:var(--chalk-2)}
  .hdr-search svg{width:18px;height:18px;flex:none}
  .hdr-search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hdr .icon-search{display:none}
}

/* desktop nav + mega menu */
.nav{display:none}
@media (min-width:1024px){
  .nav{display:flex;align-items:stretch;gap:2px;height:100%;margin-right:auto}
  .nav>li{display:flex;align-items:center}
  .nav-link{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 12px;border-radius:var(--r-pill);font-weight:var(--fw-medium);font-size:var(--fs-md)}
  .nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--chalk)}
  .nav-link svg{width:12px;height:12px;transition:transform var(--t-base)}
  .nav-link[aria-expanded="true"] svg{transform:rotate(180deg)}
  .nav-link.is-pro{border:1.5px solid var(--ink)}
  .nav-link.is-pro::before{content:"";width:8px;height:8px;background:var(--hivis);border:1.5px solid var(--ink);border-radius:2px}
}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-2);
  max-height:calc(100vh - var(--header-h) - 40px);overflow:auto}
.mega-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:var(--s-8);padding-top:var(--s-8);padding-bottom:var(--s-10)}
.mega h3{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--txt-2);margin-bottom:var(--s-3);letter-spacing:0}
.mega-cats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-6)}
.mega-cat>a{font-weight:var(--fw-bold)}
.mega a{display:flex;align-items:center;min-height:32px}
.mega a:hover{text-decoration:underline;text-underline-offset:3px}
.mega-sub{font-size:var(--fs-sm);color:var(--txt-2)}
.mega-sub a{min-height:28px}
.mega small{margin-left:6px;color:var(--txt-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.mega-all{margin-top:var(--s-4);font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:3px}
.mega a.merch{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;border-radius:var(--r-md);background:var(--chalk);padding:var(--s-5);min-height:0;align-self:start}
.mega a.merch:hover{text-decoration:none}
.mega a.merch:hover b{text-decoration:underline;text-underline-offset:3px}
.merch:hover{background:var(--chalk-2)}
.merch img{width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply;margin-bottom:var(--s-3)}
.merch .kicker{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--rope)}
.merch b{display:block;font-size:var(--fs-lg);line-height:var(--lh-snug)}
.merch .small{display:block;line-height:var(--lh-body)}

/* ---------- dialogs: shared ---------- */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;color:inherit}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog[open]{animation:fade var(--t-base) var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide-l{from{transform:translateX(-100%)}to{transform:none}}
@keyframes slide-r{from{transform:translateX(100%)}to{transform:none}}
@keyframes slide-up{from{transform:translateY(100%)}to{transform:none}}
body:has(dialog[open]){overflow:hidden}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);border-bottom:1px solid var(--line);flex:none}
.dlg-head h2{font-size:var(--fs-lg)}
.dlg-body{flex:1;overflow:auto;padding:var(--s-5)}
.dlg-foot{flex:none;padding:var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
/* side drawer (cart, mobile menu) */
.drawer{position:fixed;inset:0 0 0 auto;height:100%;width:min(440px,100vw);margin:0}
.drawer[open]{display:flex;animation:slide-r var(--t-slow) var(--ease)}
.drawer.from-left{inset:0 auto 0 0}
.drawer.from-left[open]{animation:slide-l var(--t-slow) var(--ease)}
.drawer>.panel{display:flex;flex-direction:column;width:100%;height:100%;background:var(--paper)}
/* bottom sheet on phones, side panel on desktop (filters) */
.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-height:92vh;margin:0}
.sheet[open]{display:flex;animation:slide-up var(--t-slow) var(--ease)}
.sheet>.panel{display:flex;flex-direction:column;width:100%;max-height:92vh;background:var(--paper);border-radius:var(--r-lg) var(--r-lg) 0 0}
/* centred modal */
.modal{margin:auto;width:min(720px,calc(100vw - 24px))}
.modal>.panel{display:flex;flex-direction:column;max-height:calc(100vh - 48px);background:var(--paper);border-radius:var(--r-lg);overflow:hidden}

/* mobile menu */
.mnav .dlg-body{padding:0}
.mnav-list>li{border-bottom:1px solid var(--line)}
.mnav-list a,.mnav-list summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 var(--s-5);font-weight:var(--fw-bold);font-size:var(--fs-lg);cursor:pointer;list-style:none}
.mnav-list summary::-webkit-details-marker{display:none}
.mnav-list summary::after{content:"+";font-weight:400;font-size:24px}
.mnav-list details[open]>summary::after{content:"−"}
.mnav-sub{padding:0 var(--s-5) var(--s-4)}
.mnav-sub h3{font-size:var(--fs-xs);color:var(--txt-2);margin:var(--s-3) 0 var(--s-1)}
.mnav-sub a{min-height:44px;padding:0;font-weight:var(--fw-medium);font-size:var(--fs-md)}
.mnav-foot{padding:var(--s-5);display:grid;gap:var(--s-2)}
.mnav-foot a{min-height:44px;display:flex;align-items:center;font-weight:var(--fw-medium)}

/* ---------- search ---------- */
.search-dlg{position:fixed;inset:0 0 auto 0;width:100%;margin:0;max-height:100vh}
.search-dlg[open]{display:block}
.search-dlg>.panel{background:var(--paper);max-height:100vh;overflow:auto;padding-bottom:var(--s-8)}
.search-bar{display:flex;align-items:center;gap:var(--s-2);height:68px;border-bottom:1px solid var(--line)}
.search-bar svg{width:22px;height:22px;flex:none}
.search-bar input{flex:1;min-width:0;height:48px;border:0;font-size:var(--fs-lg);font-weight:var(--fw-medium);background:transparent}
.search-bar input:focus{outline:none}
.search-bar input::-webkit-search-cancel-button{display:none}
.sr-cols{display:grid;gap:var(--s-6);padding-top:var(--s-5)}
@media (min-width:1024px){.sr-cols{grid-template-columns:1fr 2fr}}
.sr-group h3{font-size:var(--fs-sm);color:var(--txt-2);font-weight:var(--fw-bold);margin-bottom:var(--s-2)}
.sr-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.sr-list{display:grid;gap:2px}
.sr-item{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:6px 8px;border-radius:var(--r-sm)}
.sr-item:hover,.sr-item[aria-selected="true"]{background:var(--chalk)}
.sr-item img{width:48px;height:48px;object-fit:contain;background:var(--chalk);border-radius:var(--r-sm);mix-blend-mode:multiply;flex:none}
.sr-item .sr-main{flex:1;min-width:0;display:grid}
.sr-item .sr-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-item small{color:var(--txt-2)}
.sr-item .price{white-space:nowrap}
.sr-link{display:flex;align-items:center;min-height:44px;font-weight:var(--fw-medium)}
.sr-link:hover{text-decoration:underline}
mark{background:var(--hivis);color:inherit;border-radius:2px}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:var(--s-3) 0;font-size:var(--fs-sm);color:var(--txt-2)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";color:var(--txt-3)}
.crumbs a{min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:var(--fw-medium)}

/* ---------- product card ---------- */
.grid-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-3)}
@media (min-width:768px){.grid-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8) var(--s-5)}}
@media (min-width:1200px){.grid-products.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44%,1fr);gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-2);scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
@media (min-width:768px){.rail{grid-auto-columns:minmax(28%,1fr);gap:var(--s-5)}}
@media (min-width:1200px){.rail{grid-auto-columns:calc(25% - 15px)}}
.card{position:relative;display:flex;flex-direction:column;min-width:0}
.card-media{position:relative;aspect-ratio:1/1;background:var(--chalk);border-radius:var(--r-md);overflow:hidden}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;transition:opacity var(--t-base)}
.card-media .alt{opacity:0}
@media (hover:hover){.card:hover .card-media .alt{opacity:1}.card:hover .card-media.has-alt .main{opacity:0}}
.card-badges{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;gap:4px;z-index:2;pointer-events:none}
.card-wish{position:absolute;right:4px;top:4px;z-index:3}
.card-wish svg{width:20px;height:20px}
.card-wish[aria-pressed="true"] svg{fill:var(--bad);stroke:var(--bad)}
.card.is-out .card-media img{opacity:.55}
.card-body{display:flex;flex-direction:column;gap:4px;padding-top:var(--s-3);flex:1}
.card-brand{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--txt-2)}
.card-name{font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:var(--lh-snug)}
.card-name a::after{content:"";position:absolute;inset:0;z-index:1}  /* whole card clickable, buttons sit above */
.card-name a:focus-visible{outline:none}
.card:has(.card-name a:focus-visible){outline:3px solid var(--ink);outline-offset:4px;border-radius:var(--r-md)}
.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-variant-numeric:tabular-nums}
.price{font-weight:var(--fw-black);font-size:var(--fs-md)}
.price.is-sale{color:var(--bad)}
.price-old{color:var(--txt-2);text-decoration:line-through;font-size:var(--fs-sm)}
.price-off{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--bad)}
.swatches{display:flex;gap:4px;align-items:center;min-height:16px}
.sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex:none}
.swatches small{font-size:var(--fs-xs);color:var(--txt-2);margin-left:2px}
.stock-hint{font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.stock-hint.low{color:var(--warn)}
.stock-hint.out{color:var(--bad)}
.card-actions{position:relative;z-index:2;display:flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-2)}
.card-actions .btn{flex:1;min-height:40px;padding:0 10px;font-size:var(--fs-sm)}
.card-compare{position:relative;z-index:2;display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:var(--fw-medium);min-height:36px;cursor:pointer}
.card-compare input{width:18px;height:18px;accent-color:var(--ink)}
/* quick-add size picker inside the card */
.qa-sizes{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-md);padding:var(--s-3);box-shadow:var(--shadow-2)}
.qa-sizes p{font-size:var(--fs-xs);font-weight:var(--fw-bold);margin-bottom:var(--s-2);display:flex;justify-content:space-between;align-items:center}
.qa-sizes .opts{display:flex;flex-wrap:wrap;gap:6px}
.qa-sizes .chip{min-height:36px;padding:0 10px}
.chip.is-out{color:var(--txt-3);text-decoration:line-through;border-style:dashed}
/* skeleton */
.skel{background:linear-gradient(90deg,var(--chalk) 0,var(--chalk-2) 50%,var(--chalk) 100%);background-size:200% 100%;animation:skel 1.2s linear infinite;border-radius:var(--r-sm)}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.card-skel .card-media{background:none}
.card-skel .line{height:12px;margin-top:10px}

/* ---------- category page ---------- */
.cat-head{padding:var(--s-2) 0 var(--s-3)}
.cat-head h1{font-size:var(--fs-2xl);line-height:var(--lh-tight)}
@media (min-width:1024px){.cat-head h1{font-size:var(--fs-3xl)}}
.cat-head .count-line{color:var(--txt-2);font-size:var(--fs-sm);margin-top:4px}
.subnav{display:flex;gap:var(--s-2);overflow-x:auto;padding:var(--s-2) 0 var(--s-3);scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none}
.toolbar{position:sticky;top:var(--header-h-compact);z-index:20;background:var(--paper);display:flex;gap:var(--s-2);align-items:center;padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.toolbar .btn{min-height:40px;padding:0 16px;font-size:var(--fs-sm)}
.toolbar .sort{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.toolbar .sort select{min-height:40px;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 12px;background:var(--paper);font-weight:var(--fw-medium);max-width:170px}
.filters-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:var(--rope);color:#fff;font-size:11px;padding:0 5px}
.chips-active{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) 0 0}
.chips-active:empty{display:none}
.cat-layout{display:grid;gap:var(--s-6);padding-top:var(--s-4)}
.facets-side{display:none}
@media (min-width:1024px){
  .cat-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--s-10)}
  .facets-side{display:block;position:sticky;top:calc(var(--header-h-compact) + 70px);align-self:start;max-height:calc(100vh - 150px);overflow:auto;padding-right:6px}
  .toolbar .btn-filters{display:none}
}
.facet{border-bottom:1px solid var(--line)}
.facet summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:var(--fw-bold);cursor:pointer;list-style:none}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:"+";font-weight:400;font-size:22px}
.facet[open] summary::after{content:"−"}
.facet-body{padding-bottom:var(--s-4);display:grid;gap:2px}
.facet-opt{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:var(--fs-sm)}
.facet-opt input{width:18px;height:18px;accent-color:var(--ink);flex:none}
.facet-opt .n{margin-left:auto;color:var(--txt-3);font-variant-numeric:tabular-nums}
.facet-opt.is-empty{color:var(--txt-3);cursor:not-allowed}
.facet-opt .sw{width:18px;height:18px}
.facet-tree a{display:flex;justify-content:space-between;min-height:40px;align-items:center;font-size:var(--fs-sm)}
.facet-tree a[aria-current]{font-weight:var(--fw-black)}
.facet-tree .lvl-2{padding-left:12px}
.facet-tree .lvl-3{padding-left:24px}
.price-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.price-inputs .input{min-height:44px;padding:8px 10px}
.load-more{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-10) 0 var(--s-4)}
.load-more .bar{width:200px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.load-more .bar i{display:block;height:100%;background:var(--ink)}
.cat-intro{border-top:1px solid var(--line);margin-top:var(--s-10);padding-top:var(--s-8);color:var(--txt-2)}
.cat-intro h2{color:var(--ink);font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.sec-tabs{display:flex;gap:var(--s-2);padding-bottom:var(--s-3)}
.empty{text-align:center;padding:var(--s-12) var(--s-4);display:grid;justify-items:center;gap:var(--s-3);grid-column:1/-1}
.empty h2{font-size:var(--fs-xl)}
.empty p{color:var(--txt-2);max-width:44ch}
.empty .sr-chips{justify-content:center}
/* compare */
.compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);color:#fff;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:var(--s-3);transform:translateY(110%);transition:transform var(--t-base) var(--ease)}
.compare-bar.show{transform:none}
.compare-bar .thumbs{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden}
.compare-bar img{width:40px;height:40px;border-radius:var(--r-sm);background:#fff;object-fit:contain;flex:none}
.compare-bar .btn-ghost{color:#fff}
.compare-bar .btn-ghost:hover{background:#333}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{min-width:560px;font-size:var(--fs-sm)}
.cmp th,.cmp td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead td{vertical-align:bottom}
.cmp tbody th{width:150px;font-weight:var(--fw-bold);position:sticky;left:0;background:var(--paper)}
.cmp tr.differs td{background:#fffbea}
.cmp .cmp-prod img{width:100%;max-width:160px;aspect-ratio:1;object-fit:contain;background:var(--chalk);border-radius:var(--r-md);mix-blend-mode:multiply}
.cmp .cmp-prod a{font-weight:var(--fw-bold);display:block;margin-top:8px}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);padding-bottom:var(--s-8)}
.pdp>*{min-width:0}
@media (min-width:1024px){.pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-12);align-items:start}}
.gal{display:grid;gap:var(--s-3)}
@media (min-width:1024px){.gal{position:sticky;top:calc(var(--header-h-compact) + 16px);grid-template-columns:72px minmax(0,1fr)}.gal-main{grid-column:2;grid-row:1}.gal-thumbs{grid-column:1;grid-row:1;flex-direction:column}}
.gal-main{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r-lg);background:var(--chalk);scrollbar-width:none;aspect-ratio:5/4}
@media (min-width:1024px){.gal-main{aspect-ratio:1/1}}
.gal-main::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;cursor:zoom-in}
.gal-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply}
.gal-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.25)}
.gal-dots i.on{background:var(--ink)}
@media (min-width:1024px){.gal-dots{display:none}}
.gal-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.gal-thumbs button{flex:none;width:64px;height:64px;border-radius:var(--r-sm);background:var(--chalk);border:2px solid transparent;overflow:hidden}
.gal-thumbs button[aria-current="true"]{border-color:var(--ink)}
.gal-thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:4px}
@media (max-width:1023px){.gal-thumbs{display:none}}
.buy{display:grid;gap:var(--s-4)}
.buy-brand{font-weight:var(--fw-bold);color:var(--txt-2);font-size:var(--fs-sm)}
.buy-brand a{text-decoration:underline;text-underline-offset:3px}
.buy h1{font-size:var(--fs-2xl);line-height:var(--lh-tight)}
@media (min-width:1024px){.buy h1{font-size:var(--fs-3xl)}}
.buy .price-row .price{font-size:var(--fs-xl)}
.buy .price-row .price-old{font-size:var(--fs-md)}
.buy .rating-link{font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px;color:var(--txt-2)}
.opt-label{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);margin-bottom:var(--s-2)}
.opt-label b{font-weight:var(--fw-bold)}
.opt-colors{display:flex;flex-wrap:wrap;gap:8px}
.opt-color{width:var(--tap);height:var(--tap);border-radius:50%;border:2px solid transparent;display:grid;place-items:center}
.opt-color span{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.opt-color[aria-pressed="true"]{border-color:var(--ink)}
.opt-color.is-out span{opacity:.35}
.opt-sizes{display:flex;flex-wrap:wrap;gap:8px}
.opt-sizes .chip{min-height:var(--tap);min-width:56px;justify-content:center;font-size:var(--fs-md)}
.stock-line{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.stock-line i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.stock-line.low i{background:var(--flame)}
.stock-line.out i{background:var(--bad)}
.buy-row{display:flex;gap:var(--s-2)}
.buy-row .btn-primary{flex:1;min-width:0;min-height:52px;font-size:var(--fs-md);white-space:normal;padding:0 12px}
@media (min-width:400px){.buy-row .btn-primary{font-size:var(--fs-lg)}}
.buy-row .icon-btn{width:52px;height:52px;border:1.5px solid var(--line)}
.buy-row .icon-btn[aria-pressed="true"] svg{fill:var(--bad);stroke:var(--bad)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);height:52px}
.qty{flex:none}
.qty button{width:44px;height:100%;font-size:20px;border-radius:var(--r-pill)}
.qty button:disabled{color:var(--txt-3);cursor:not-allowed}
.qty output,.qty span{min-width:28px;text-align:center;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.qty.sm{height:40px}
.qty.sm button{width:36px}
.delivery{display:grid;gap:10px;padding:var(--s-4);border-radius:var(--r-md);background:var(--chalk);font-size:var(--fs-sm)}
.delivery div{display:flex;gap:10px;align-items:flex-start}
.delivery svg{width:20px;height:20px;flex:none;margin-top:1px}
.trust-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
@media (min-width:640px){.trust-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trust-row li{display:flex;gap:8px;align-items:flex-start}
.trust-row svg{width:20px;height:20px;flex:none}
.pdp-secs{border-top:1px solid var(--line)}
.pdp-sec{padding:var(--s-8) 0;border-bottom:1px solid var(--line)}
.pdp-sec>h2{font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.pdp-sec .cols{display:grid;gap:var(--s-8)}
@media (min-width:1024px){.pdp-sec .cols{grid-template-columns:1fr 1fr;gap:var(--s-12)}}
.spec{font-size:var(--fs-sm)}
.spec th,.spec td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{width:42%;font-weight:var(--fw-medium);color:var(--txt-2);padding-right:var(--s-3)}
.spec td{font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.spec .certs{display:flex;flex-wrap:wrap;gap:6px}
.note{display:flex;gap:12px;padding:var(--s-4);border-radius:var(--r-md);background:var(--chalk);font-size:var(--fs-sm)}
.note svg{width:22px;height:22px;flex:none}
.note.ppe{background:var(--ink);color:#fff}
.note.ppe a{color:var(--hivis);text-decoration:underline}
.docs{display:grid;gap:6px}
.docs a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 var(--s-4);border:1.5px solid var(--line);border-radius:var(--r-md);font-weight:var(--fw-medium)}
.docs a:hover{border-color:var(--ink)}
.docs svg{width:20px;height:20px;flex:none}
.docs small{margin-left:auto;color:var(--txt-2)}
.kit{display:grid;gap:var(--s-2)}
.kit-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2);border:1.5px solid var(--line);border-radius:var(--r-md)}
.kit-item img{width:64px;height:64px;object-fit:contain;background:var(--chalk);border-radius:var(--r-sm);mix-blend-mode:multiply;flex:none}
.kit-item .k-main{flex:1;min-width:0}
.kit-item .k-main a{font-weight:var(--fw-bold)}
.kit-item select{min-height:40px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 8px;margin-top:4px;background:var(--paper)}
.rev-summary{display:grid;gap:var(--s-5)}
@media (min-width:768px){.rev-summary{grid-template-columns:220px 1fr}}
.rev-score{font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:1}
.stars{color:var(--ink);letter-spacing:2px}
.dist{display:grid;gap:6px;font-size:var(--fs-sm)}
.dist .r{display:grid;grid-template-columns:28px 1fr 36px;gap:10px;align-items:center}
.dist .bar{height:8px;background:var(--chalk);border-radius:4px;overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--ink)}
.rev{padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.rev-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:var(--fs-sm)}
.verified{color:var(--ok);font-weight:var(--fw-bold);font-size:var(--fs-xs)}
.fitbar{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:var(--fs-sm);align-items:center}
.fitbar .track{position:relative;height:6px;background:var(--chalk);border-radius:3px}
.fitbar .track i{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.qa-item{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.qa-item .q{font-weight:var(--fw-bold)}
.qa-item .a{margin-top:6px;color:var(--txt-2)}
.qa-item .a b{color:var(--ink)}
.acc{border-bottom:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-weight:var(--fw-bold);cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:400;font-size:22px}
.acc[open] summary::after{content:"−"}
.acc .acc-body{padding-bottom:var(--s-5);color:var(--txt-2);max-width:var(--measure)}
.acc .acc-body>*+*{margin-top:.7em}
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:var(--s-3);transform:translateY(110%);transition:transform var(--t-base) var(--ease)}
.sticky-atc.show{transform:none}
.sticky-atc img{width:44px;height:44px;border-radius:var(--r-sm);object-fit:contain;background:var(--chalk);mix-blend-mode:multiply;flex:none}
.sticky-atc .s-main{flex:1;min-width:0;display:grid;font-size:var(--fs-sm)}
.sticky-atc .s-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-atc .btn{flex:none}
@media (min-width:1024px){.sticky-atc{display:none}}
.notify{padding:var(--s-4);border:1.5px solid var(--ink);border-radius:var(--r-md);display:grid;gap:var(--s-3)}
.notify form{display:flex;gap:8px}
.notify .input{flex:1;min-width:0}
/* zoom lightbox */
.zoom{position:fixed;inset:0;width:100vw;height:100vh;margin:0}
.zoom>.panel{position:relative;width:100%;height:100%;background:#fff;overflow:hidden}
.zoom img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;transition:transform var(--t-base) var(--ease);transform-origin:center}
.zoom.zoomed img{cursor:zoom-out;transform:scale(2.2)}
.zoom .close{position:absolute;top:12px;right:12px;z-index:2;background:var(--paper);box-shadow:var(--shadow-1)}
.zoom .nav-z{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:var(--paper);box-shadow:var(--shadow-1)}
.zoom .prev{left:12px}.zoom .next{right:12px}
/* size guide */
.sg-table{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.sg-table th,.sg-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.sg-table thead th{font-weight:var(--fw-bold);border-bottom:2px solid var(--ink)}
.sg-steps{counter-reset:s;display:grid;gap:var(--s-3)}
.sg-steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:var(--fs-sm)}
.sg-steps li::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-xs)}

/* ---------- cart drawer + cart page ---------- */
.ship-prog{display:grid;gap:8px;font-size:var(--fs-sm)}
.ship-prog .track{height:6px;background:var(--chalk);border-radius:3px;overflow:hidden}
.ship-prog .track i{display:block;height:100%;background:var(--flame);transition:width var(--t-slow) var(--ease)}
.ship-prog.done .track i{background:var(--ok)}
.line{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s-3);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line-img{width:76px;height:76px;border-radius:var(--r-sm);background:var(--chalk);overflow:hidden}
.line-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6px}
.line-top{display:flex;justify-content:space-between;gap:var(--s-2)}
.line-name{font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.line-meta{font-size:var(--fs-xs);color:var(--txt-2);margin-top:2px}
.line-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-2);flex-wrap:wrap}
.line-links{display:flex;gap:var(--s-3);font-size:var(--fs-xs)}
.line-links button{text-decoration:underline;text-underline-offset:2px;min-height:36px;color:var(--txt-2)}
.line-links button:hover{color:var(--ink)}
.line-warn{font-size:var(--fs-xs);color:var(--warn);font-weight:var(--fw-medium);margin-top:4px}
.xsell{padding-top:var(--s-4)}
.xsell h3{font-size:var(--fs-sm);margin-bottom:var(--s-2)}
.xsell-list{display:grid;gap:var(--s-2)}
.xsell-item{display:flex;gap:var(--s-3);align-items:center;font-size:var(--fs-sm)}
.xsell-item img{width:48px;height:48px;object-fit:contain;background:var(--chalk);border-radius:var(--r-sm);mix-blend-mode:multiply;flex:none}
.xsell-item .x-main{flex:1;min-width:0}
.xsell-item .x-main a{font-weight:var(--fw-bold);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.totals{display:grid;gap:8px;font-size:var(--fs-sm)}
.totals div{display:flex;justify-content:space-between;gap:var(--s-3)}
.totals dd{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;text-align:right}
.totals .grand{font-size:var(--fs-lg);font-weight:var(--fw-black);padding-top:var(--s-2);border-top:1px solid var(--line)}
.totals .grand dd{font-weight:var(--fw-black)}
.totals .disc dd{color:var(--ok)}
.totals-note{font-size:var(--fs-xs);color:var(--txt-2)}
.cart-page{display:grid;gap:var(--s-8);padding-bottom:var(--s-12)}
@media (min-width:1024px){.cart-page{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-12);align-items:start}}
.panel-box{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);display:grid;gap:var(--s-4)}
@media (min-width:1024px){.cart-page .panel-box{position:sticky;top:calc(var(--header-h-compact) + 16px)}}
.saved{margin-top:var(--s-10)}
.promo{display:flex;gap:8px}
.promo .input{min-height:44px;text-transform:uppercase}
.promo-msg{font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.promo-msg.ok{color:var(--ok)}
.promo-msg.bad{color:var(--bad)}

/* ---------- checkout ---------- */
.co{display:grid;gap:var(--s-6);padding-bottom:var(--s-16)}
@media (min-width:1024px){.co{grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-12);align-items:start}}
.co-steps{display:flex;gap:4px;margin:var(--s-2) 0 var(--s-5)}
.co-steps li{flex:1;display:grid;gap:6px;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--txt-3)}
.co-steps li::before{content:"";height:4px;border-radius:2px;background:var(--line)}
.co-steps li[aria-current="step"],.co-steps li.done{color:var(--ink)}
.co-steps li[aria-current="step"]::before,.co-steps li.done::before{background:var(--ink)}
.co-step{display:grid;gap:var(--s-4)}
.co-step h2{font-size:var(--fs-xl)}
.co-nav{display:flex;gap:var(--s-3);align-items:center;justify-content:space-between;margin-top:var(--s-2)}
.co-nav .btn-primary{flex:1;max-width:360px;min-height:52px}
.co-summary{order:-1}
@media (min-width:1024px){.co-summary{order:0;position:sticky;top:calc(var(--header-h-compact) + 16px)}}
.co-summary summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;cursor:pointer;font-weight:var(--fw-bold);list-style:none}
.co-summary summary::-webkit-details-marker{display:none}
@media (min-width:1024px){.co-summary summary{pointer-events:none}.co-summary summary .chev{display:none}}
.co-review{display:grid;gap:var(--s-3)}
.co-review .rv{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--chalk);border-radius:var(--r-md);font-size:var(--fs-sm)}
.co-review .rv button{text-decoration:underline;font-weight:var(--fw-medium);min-height:32px}
.confirm{max-width:640px;margin:0 auto;padding:var(--s-10) 0 var(--s-16);display:grid;gap:var(--s-5)}
.confirm .tick{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.confirm .tick svg{width:32px;height:32px}
.confirm ol{counter-reset:n;display:grid;gap:var(--s-3)}
.confirm ol li{display:grid;grid-template-columns:32px 1fr;gap:12px}
.confirm ol li::before{counter-increment:n;content:counter(n);width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.order-no{font-size:var(--fs-2xl);font-weight:var(--fw-black);font-variant-numeric:tabular-nums}

/* ---------- toast, consent, newsletter ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:var(--z-toast);transform:translate(-50%,160%);background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:var(--r-pill);font-weight:var(--fw-medium);font-size:var(--fs-sm);max-width:calc(100vw - 32px);transition:transform var(--t-base) var(--ease);box-shadow:var(--shadow-2)}
.toast.show{transform:translate(-50%,0)}
.consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(12px + env(safe-area-inset-bottom));z-index:var(--z-toast);background:var(--paper);border:1.5px solid var(--ink);
  border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--shadow-3);display:grid;gap:var(--s-3);max-width:520px;font-size:var(--fs-sm)}
.consent h2{font-size:var(--fs-md)}
.consent .btns{display:flex;flex-wrap:wrap;gap:8px}
.consent .btns .btn{flex:1;min-width:120px}
.nl-pop .panel{position:relative}
.nl-pop .dlg-body{display:grid;gap:var(--s-4);padding:var(--s-6)}
.nl-pop h2{font-size:var(--fs-2xl);line-height:var(--lh-tight)}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:2px dashed var(--ink);border-radius:var(--r-md);font-weight:var(--fw-black);font-size:var(--fs-xl);letter-spacing:.04em}

/* ---------- home ---------- */
.hero{position:relative;background:var(--chalk);overflow:hidden}
.hero-grid{display:grid;gap:var(--s-5);padding-top:var(--s-6);padding-bottom:var(--s-6)}
@media (min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;align-items:center;padding-top:0;padding-bottom:0;min-height:520px}}
.hero h1{font-size:1.75rem;line-height:1.05;letter-spacing:-.035em}
@media (min-width:640px){.hero h1{font-size:2.5rem}}
@media (min-width:1024px){.hero h1{font-size:3.75rem}}
.hero .lead{margin-top:var(--s-3)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
@media (max-width:639px){.hero .lead{font-size:var(--fs-md)}.hero-ctas .btn{flex:1;padding:0 12px;font-size:var(--fs-sm)}}
.hero-media{display:none}
@media (min-width:640px){.hero-media{display:block;position:relative;aspect-ratio:4/3}}
@media (min-width:1024px){.hero-media{aspect-ratio:auto;height:520px;margin:0}}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-proof{display:none;flex-wrap:wrap;gap:8px 16px;margin-top:var(--s-5);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.hero-proof.show,.hero-proof{}
@media (min-width:640px){.hero-proof{display:flex}}
.hero-proof li{display:flex;gap:6px;align-items:center}
.hero-proof svg{width:18px;height:18px}
.entry{display:grid;gap:var(--s-3)}
@media (min-width:768px){.entry{grid-template-columns:1fr 1fr}}
.entry-tile{position:relative;display:grid;grid-template-columns:1fr 38%;gap:var(--s-3);align-items:center;min-height:200px;padding:var(--s-5);border-radius:var(--r-lg);overflow:hidden;background:var(--chalk);color:var(--ink)}
@media (min-width:1024px){.entry-tile{min-height:300px;padding:var(--s-8)}}
.entry-tile img{grid-column:2;grid-row:1/span 3;width:100%;height:auto;max-height:240px;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--t-slow) var(--ease)}
.entry-tile:hover img{transform:scale(1.03)}
.entry-tile h2,.entry-tile p,.entry-tile .btn{grid-column:1}
.entry-tile h2{font-size:var(--fs-2xl);align-self:end}
.entry-tile p{max-width:36ch;font-size:var(--fs-sm)}
@media (min-width:640px){.entry-tile p{font-size:var(--fs-md)}}
.entry-tile .btn{justify-self:start;align-self:start}
.entry-tile.pro{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 4px var(--hivis)}
.entry-tile.pro img{mix-blend-mode:normal;border-radius:var(--r-md);background:#fff}
.cat-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:var(--s-3);overflow-x:auto;scrollbar-width:none}
.cat-strip::-webkit-scrollbar{display:none}
.cat-strip a{display:grid;gap:8px;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.cat-strip .well{aspect-ratio:1;background:var(--chalk);border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden}
.cat-strip img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply}
.cat-strip a:hover .well{background:var(--chalk-2)}
.proof{display:grid;gap:var(--s-5)}
@media (min-width:768px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof li{display:grid;gap:6px;padding-top:var(--s-4);border-top:2px solid var(--ink)}
.proof b{font-size:var(--fs-lg)}
.proof p{color:var(--txt-2);font-size:var(--fs-sm)}
.guide-cards{display:grid;gap:var(--s-4)}
@media (min-width:768px){.guide-cards{grid-template-columns:repeat(3,1fr)}}
.gcard{display:grid;gap:var(--s-2);padding:var(--s-5);border:1.5px solid var(--line);border-radius:var(--r-lg);align-content:start}
.gcard:hover{border-color:var(--ink)}
.gcard .kicker{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--rope)}
.gcard h3{font-size:var(--fs-lg)}
.gcard p{color:var(--txt-2);font-size:var(--fs-sm)}
.story{display:grid;gap:var(--s-6);align-items:center}
@media (min-width:1024px){.story{grid-template-columns:1fr 1fr;gap:var(--s-16)}}
.story img{border-radius:var(--r-lg);width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--chalk)}
.brand-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
@media (min-width:768px){.brand-row{grid-template-columns:repeat(4,1fr)}}
.brand-tile{display:grid;place-items:center;min-height:88px;border:1.5px solid var(--line);border-radius:var(--r-md);font-weight:var(--fw-black);font-size:var(--fs-lg);letter-spacing:-.02em;text-align:center;padding:var(--s-3)}
.brand-tile:hover{border-color:var(--ink)}
.brand-tile small{display:block;font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--txt-2);letter-spacing:0}

/* ---------- content pages ---------- */
.page-head{padding:var(--s-4) 0 var(--s-6)}
.page-head h1{font-size:var(--fs-2xl);line-height:var(--lh-tight);max-width:22ch}
@media (min-width:1024px){.page-head h1{font-size:var(--fs-4xl)}}
.page-head .lead{margin-top:var(--s-3)}
.guide{display:grid;gap:var(--s-8);padding-bottom:var(--s-12)}
@media (min-width:1024px){.guide{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-16);align-items:start}}
.guide aside{display:grid;gap:var(--s-4)}
@media (min-width:1024px){.guide aside{position:sticky;top:calc(var(--header-h-compact) + 16px)}}
.toc{border-left:2px solid var(--ink);padding-left:var(--s-4);font-size:var(--fs-sm);display:grid;gap:4px}
.toc a{min-height:32px;display:flex;align-items:center}
.toc a:hover{text-decoration:underline}
.callout{padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--chalk);border-left:4px solid var(--ink)}
.callout.warn{background:var(--warn-bg);border-left-color:var(--flame)}
.meta-line{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-sm);color:var(--txt-2);margin-top:var(--s-3)}
.contact-grid{display:grid;gap:var(--s-3)}
@media (min-width:768px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-card{display:grid;gap:4px;padding:var(--s-5);border:1.5px solid var(--line);border-radius:var(--r-lg)}
.contact-card:hover{border-color:var(--ink)}
.contact-card svg{width:26px;height:26px;margin-bottom:6px}
.contact-card b{font-size:var(--fs-lg)}
.contact-card span{color:var(--txt-2);font-size:var(--fs-sm)}
.two-col{display:grid;gap:var(--s-8)}
@media (min-width:1024px){.two-col{grid-template-columns:1fr 1fr;gap:var(--s-16)}}

/* ---------- professional ---------- */
.pro{background:var(--ink);color:#fff}
.pro .muted,.pro .lead{color:#c9c9c9}
.pro-hero{padding-top:var(--s-10);padding-bottom:var(--s-10)}
@media (min-width:1024px){.pro-hero{padding-top:var(--s-20);padding-bottom:var(--s-20)}}
.pro-hero h1{font-size:var(--fs-3xl);line-height:1.02;max-width:18ch}
@media (min-width:1024px){.pro-hero h1{font-size:4rem}}
.pro-stripe{height:10px;background:repeating-linear-gradient(-45deg,var(--hivis) 0 14px,var(--ink) 14px 28px)}
.pro-cards{display:grid;gap:var(--s-3)}
@media (min-width:768px){.pro-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.pro-cards{grid-template-columns:repeat(4,1fr)}}
.pro-card{padding:var(--s-5);border:1.5px solid #3a3a3a;border-radius:var(--r-lg);display:grid;gap:var(--s-2);align-content:start}
.pro-card svg{width:28px;height:28px;color:var(--hivis)}
.pro-card h3{font-size:var(--fs-lg)}
.pro-card p{color:#c9c9c9;font-size:var(--fs-sm)}
.pro .chip{background:transparent;color:#fff;border-color:#555}
.pro .chip:hover{border-color:var(--hivis)}
.pro-form{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:var(--s-6);display:grid;gap:var(--s-4)}

/* ---------- footer ---------- */
.ftr{min-height:420px;background:var(--chalk);margin-top:var(--s-12);padding:var(--s-10) 0 calc(var(--s-8) + env(safe-area-inset-bottom));font-size:var(--fs-sm)}
.ftr-nl{display:grid;gap:var(--s-4);padding-bottom:var(--s-8);border-bottom:1px solid var(--line)}
@media (min-width:1024px){.ftr-nl{grid-template-columns:1fr 1fr;align-items:center}}
.ftr-nl h2{font-size:var(--fs-xl)}
.ftr-nl form{display:flex;gap:8px}
.ftr-nl .input{flex:1;min-width:0}
.ftr-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-5);padding:var(--s-8) 0}
@media (min-width:1024px){.ftr-cols{grid-template-columns:1.4fr repeat(4,1fr)}}
.ftr h3{font-size:var(--fs-sm);margin-bottom:var(--s-2)}
.ftr-cols a{display:flex;align-items:center;min-height:36px;color:var(--txt-2)}
.ftr-cols a:hover{color:var(--ink);text-decoration:underline}
.ftr-brand{grid-column:1/-1}
@media (min-width:1024px){.ftr-brand{grid-column:auto}}
.ftr-brand p{color:var(--txt-2);margin-top:var(--s-2);max-width:34ch}
.ftr-bottom{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);justify-content:space-between;align-items:center;padding-top:var(--s-5);border-top:1px solid var(--line);color:var(--txt-2);font-size:var(--fs-xs)}
.ftr-bottom button{text-decoration:underline;min-height:36px}
.pay-list{display:flex;flex-wrap:wrap;gap:6px}
.pay-list span{border:1px solid #cfcdce;border-radius:var(--r-xs);padding:2px 8px;background:var(--paper);font-weight:var(--fw-medium);color:var(--ink)}

/* ---------- 404 ---------- */
.nf{padding:var(--s-12) 0 var(--s-8);display:grid;gap:var(--s-4);max-width:640px}
.nf .big{font-size:5rem;font-weight:var(--fw-black);letter-spacing:-.05em;line-height:1}

/* ---------- utilities ---------- */
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.flex{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.nowrap{white-space:nowrap}
@media (max-width:1023px){.desk-only{display:none!important}}
@media (min-width:1024px){.mob-only{display:none!important}}
@media print{.hdr,.ftr,.announce,.sticky-atc,.consent,.compare-bar{display:none!important}}

/* Pages drawn by JavaScript stay invisible until their first render, so nothing
   jumps while the catalog loads (layout shift). Safety net: shown after 3 s anyway. */
main{min-height:calc(100vh - 100px);min-height:calc(100svh - 100px)}
main[data-pending]{visibility:hidden;animation:vs-reveal 0s 3s forwards}
@keyframes vs-reveal{to{visibility:visible}}
fieldset{border:0;padding:0;margin:0;min-width:0}
.pro .crumbs [aria-current],.pro .crumbs a{color:#fff}

/* ---------- page blocks from the admin (js/blocks.js) ---------- */
.promo{display:grid;gap:var(--s-5);align-items:center;border-radius:var(--r-lg);padding:var(--s-8) var(--s-6);overflow:hidden}
.promo.has-img{grid-template-columns:1fr}
@media (min-width:768px){.promo{padding:var(--s-10) var(--s-10)}.promo.has-img{grid-template-columns:1.2fr 1fr}}
.promo img{width:100%;height:auto;border-radius:var(--r-md);object-fit:cover;max-height:320px}
.promo .h2{margin-bottom:var(--s-2)}
.promo p{max-width:60ch}
.promo .btn{margin-top:var(--s-4)}
.promo .kicker{margin-bottom:var(--s-2)}
.promo-ink{background:var(--ink);color:var(--on-dark)}
.promo-rope{background:var(--rope);color:#fff}
.promo-flame{background:var(--flame);color:#000}
.promo-hivis{background:var(--hivis);color:#000}
.promo-chalk{background:var(--chalk);color:var(--txt)}
.btn-light{background:#fff;color:#000}
.btn-light:hover{background:#f0f0f0}
.nl-inline{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4);max-width:520px}
.nl-inline .input{flex:1;min-width:200px}
.story.img-right{grid-template-columns:1fr}
@media (min-width:768px){.story.img-right{grid-template-columns:1.2fr 1fr}}
.blk-fig{margin:0}
.blk-fig img{width:100%;height:auto;border-radius:var(--r-lg)}
.blk-fig figcaption{font-size:var(--fs-sm);color:var(--txt-2);margin-top:var(--s-2)}
.preview-bar{position:sticky;top:0;z-index:200;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--hivis);color:#000;font-weight:700;font-size:14px}
.preview-bar a{text-decoration:underline}
.proof svg{width:28px;height:28px}
.pro-card svg{width:28px;height:28px}

/* ---------- image wells: blend white photo backgrounds away on every browser ----------
   isolation keeps the multiply blend inside the grey well; iOS Safari and Android
   otherwise blend against the white page (or not at all) when the image is on its own layer */
.card-media,.gal-slide,.gal-thumbs button,.line-img,.cat-strip .well,.entry-tile,.merch,.hero-media{isolation:isolate}

/* quick add on the photo: phones only */
.card-quick{display:none}

/* ---------- phones: calmer, clearer layout ---------- */
@media (max-width:767px){
  /* product cards: one badge, no compare box, a round + on the photo instead of a black bar */
  .card-badges{right:48px}
  .card-badges .badge+.badge{display:none}
  .card-compare{display:none}
  .card-actions{display:none}
  .card{container-type:inline-size}
  .card-quick{display:grid;place-items:center;position:absolute;z-index:3;right:8px;top:calc(100cqw - 48px);width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .card-quick svg{width:20px;height:20px}
  .card-body{gap:2px;padding-top:var(--s-2)}
  .card-brand{font-size:11px;letter-spacing:.02em;text-transform:uppercase}
  .card-name{font-size:var(--fs-sm)}
  .card .price-off{display:none}
  .card .price-row{flex-wrap:wrap;gap:0 6px}
  .card .price-old{font-size:var(--fs-xs)}
  .card .stock-hint{font-size:var(--fs-xs)}
  .card .swatches .sw{width:12px;height:12px}

  /* breadcrumbs: just "‹ parent" instead of a two-line trail */
  .crumbs ol{flex-wrap:nowrap}
  .crumbs li{display:none}
  .crumbs li:nth-last-child(2){display:flex}
  .crumbs li:nth-last-child(2)::before{content:"‹";color:var(--ink);font-size:20px;line-height:1}
  .crumbs li:nth-last-child(2) a{color:var(--ink);font-weight:var(--fw-medium)}

  /* sub-navigation chips: never wider than the screen */
  .sr-chips .chip,.subnav .chip{max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* product page: buy row on one line, sections fold */
  .buy-row .qty{height:48px}
  .buy-row .qty button{width:36px}
  .buy-row .btn-primary{min-height:48px;white-space:nowrap;font-size:var(--fs-sm)}
  .buy-row .icon-btn{width:48px;height:48px}
  .trust-row{grid-template-columns:1fr}
  #secs.acc-mode .subnav{display:none}
  #secs.acc-mode .pdp-sec{padding:0}
  #secs.acc-mode .pdp-sec>h2{margin:0;font-size:var(--fs-lg)}
  #secs.acc-mode .sec-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:var(--s-3) 0;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
  #secs.acc-mode .sec-toggle svg{width:20px;height:20px;flex:none;transition:transform var(--t-base)}
  #secs.acc-mode .sec-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  #secs.acc-mode .pdp-sec>:not(h2){display:none}
  #secs.acc-mode .pdp-sec.open>:not(h2){display:revert}
  #secs.acc-mode .pdp-sec.open{padding-bottom:var(--s-6)}
  #secs.acc-mode .pdp-sec:not(:has(>h2))>*{display:revert}
  #secs.acc-mode .pdp-sec:not(:has(>h2)){padding:var(--s-2) 0}

  /* home: link tiles as compact rows, pictures inside the tile */
  .entry-tile{grid-template-columns:1fr 34%;min-height:0;padding:var(--s-4)}
  .entry-tile h2{font-size:var(--fs-xl)}
  .entry-tile p{font-size:var(--fs-xs)}
  .entry-tile img{max-height:140px}
  .entry-tile.pro img{max-width:100%;border-radius:var(--r-sm)}

  /* sections breathe a little less on a small screen */
  .section{padding-top:var(--s-8);padding-bottom:var(--s-8)}
  .section-head{margin-bottom:var(--s-3)}
}
@media (max-width:767px){
  /* deep pages (product): "‹ Category / Subcategory" */
  .crumbs li:nth-last-child(3):not(:first-child){display:flex}
  .crumbs li:nth-last-child(3):not(:first-child)::before{content:"‹";color:var(--ink);font-size:20px;line-height:1}
  .crumbs li:nth-last-child(3):not(:first-child) a{color:var(--ink);font-weight:var(--fw-medium)}
  .crumbs li:nth-last-child(3):not(:first-child)+li::before{content:"/";font-size:inherit;color:var(--txt-3)}
  .crumbs li:nth-last-child(3):not(:first-child)+li a{color:var(--txt-2);font-weight:400}
}
/* while the size picker is open on a card, its own buttons step aside */
.card:has(.qa-sizes) .card-quick,.card:has(.qa-sizes) .card-wish{visibility:hidden}
/* the size picker lives in the photo well (its own layer for the white-background blend): lift it above the card link */
.card-media:has(.qa-sizes){z-index:4}
.pdp-compare{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer}
.pdp-compare input{width:18px;height:18px;accent-color:var(--ink)}
.pdp-compare-row{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}