@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;src:url(/assets/fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;src:url(/assets/fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(/assets/fonts/roboto-400.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(/assets/fonts/roboto-700.woff2) format('woff2')}
:root{
  --bg:#000000; --bg-2:#101010; --tile:#161616; --text:#ffffff; --muted:#9a9a9a;
  --faint:#696969; --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.07);
  --accent:#c00000; --accent-down:#9a0000;
  --inverse-bg:#ffffff; --inverse-text:#000000; --inverse-muted:#696969;
  --ok:#4caf6d; --warn:#ff7a14;
  --logo-dark:inline-flex; --logo-light:none;
  --display:'Barlow Condensed','Avenir Next Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Roboto','Helvetica Neue',Arial,sans-serif;
  /* One page gutter for the whole site. Anything that also sets its own padding
     must use this variable, or it silently wipes .wrap's side padding and the
     text runs into the window edge on any screen under 1240px. */
  --gutter:clamp(18px,4.5vw,28px);
}
/* Hybrid design (decided 2026-07-25, Sig Sauer reference): the site commits to
   ONE look. Black chrome and information surfaces. Any SECTION holding cutout
   product photography becomes a full-width light surface (not white islands on
   black): the shop catalog, the homepage armory band, the PDP gallery side,
   and the pairs-with rail. */
:root{
  --card:#ffffff; --card-text:#0a0a0a; --card-muted:#696969;
  --card-line:#e4e4e4; --card-ok:#1e7c3e;
  --zone:#f2f2f2; --zone-line:#e0e0e0;
  /* Stock semantics (Josh 2026-07-25): GREEN in stock, vibrant ORANGE for anything
     you can still order but we don't have on the shelf (low stock, pre-order,
     made to order), RED reserved for out of stock and unorderable. The darker
     orange is only for orange TEXT on white, where the vibrant tone fails
     contrast; the square swatches stay vibrant on both grounds. */
  --low:#ff7a14; --card-low:#c2540a; --card-warn:#c2540a;
}
.zone-light{background:var(--zone);color:var(--card-text)}
.zone-light .eyebrow{color:var(--card-muted)}
.zone-light h1,.zone-light h2,.zone-light h3{color:var(--card-text)}
.zone-light .sec-meta,.zone-light .count-line{color:var(--card-muted)}
.zone-light .no-match{border-color:#cfcfcf;color:var(--card-muted)}
.zone-light .arrow-link{color:var(--card-text);border-color:var(--card-text)}
section.block.zone-light{border-bottom:1px solid var(--zone-line)}
/* Buy column lives INSIDE the light zone alongside the photography */
.zone-light .crumbs,.zone-light .crumbs a,.zone-light .crumbs .sep{color:var(--card-muted)}
.zone-light .crumbs a:hover{color:var(--card-text)}
.zone-light .bigprice,.zone-light .buy h1{color:var(--card-text)}
.zone-light .sku-line{color:var(--card-muted)}
.zone-light .opt-label{color:var(--card-muted)}
.zone-light .opt-label em{color:var(--card-text)}
.zone-light .variant{border-color:#d6d6d6;color:var(--card-text);background:var(--card)}
.zone-light .variant:hover{border-color:#9a9a9a}
.zone-light .variant[aria-pressed="true"]{border:2px solid var(--card-text);padding:12px 15px;background:var(--card)}
.zone-light .variant .v-price{color:var(--card-muted)}
.zone-light .qty{border-color:#d6d6d6;background:var(--card)}
.zone-light .qty button{color:var(--card-text)}
.zone-light .qty button:hover{background:#ebebeb}
.zone-light .qty output{border-color:#d6d6d6}
.zone-light .ship-note{color:var(--card-muted)}
.zone-light .chip{color:var(--card-muted)}
.zone-light .chip::before{background:var(--card-muted)}
.zone-light .chip.ok{color:var(--card-ok)} .zone-light .chip.ok::before{background:var(--card-ok)}
.zone-light .chip.low{color:var(--card-low)} .zone-light .chip.low::before{background:var(--low)}
.zone-light .chip.mto{color:var(--card-warn)} .zone-light .chip.mto::before{background:var(--warn)}
.zone-light .chip.out{color:var(--accent)} .zone-light .chip.out::before{background:var(--accent)}
.zone-light .v-dot.low{background:var(--low)}
.zone-light .v-dot.ok{background:var(--card-ok)}
.zone-light .v-dot.mto{background:var(--warn)}
/* Full-width detail section below the light zone: two columns, dark surface */
section.detail{padding:72px 0 84px;background:var(--bg)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:60px;align-items:start}
.detail-main h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:20px}
.desc{color:var(--muted);font-size:15px}
.desc h2,.desc h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:20px;letter-spacing:.04em;color:var(--text);margin:28px 0 8px}
.desc>*:first-child{margin-top:0}
.desc p{margin:12px 0;max-width:68ch}
.desc ul{margin:12px 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.desc li{margin:0}
.desc img{margin:20px 0;border:1px solid var(--line)}
.detail-side{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.panel{background:var(--bg-2);padding:20px 22px 22px}
.panel h3{font-size:17px;letter-spacing:.08em;margin-bottom:12px}
.panel p{color:var(--muted);font-size:13px;margin:0}
.panel table{width:100%;border-collapse:collapse;font-size:13px}
.panel td{padding:8px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--text)}
.panel tr:last-child td{border-bottom:none}
.panel td.label{color:var(--faint);text-transform:uppercase;font-size:11px;letter-spacing:.1em;
  padding-right:20px;white-space:nowrap;width:1%}
.panel td.q{color:var(--muted);font-variant-numeric:tabular-nums;width:38px}
.panel td.pn{color:var(--faint);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* "What's included" copy, lifted out of the eCommerce Description */
.included{color:var(--muted);font-size:13px}
.included ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.included li{display:flex;gap:10px;align-items:baseline}
.included li::before{content:"//";color:var(--accent);font-weight:700;flex:none;font-size:11px}
.included p{margin:0 0 10px}
.included p:last-child{margin-bottom:0}
@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr;gap:36px}
  section.detail{padding:52px 0 64px}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden would make the body a scroll container and break
     every sticky header on the site. Backstop only, real widths are fixed below. */
  overflow-x:clip}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img,svg{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3,.disp{font-family:var(--display);font-weight:700;text-transform:uppercase;
  line-height:.95;letter-spacing:.01em;margin:0;text-wrap:balance;overflow-wrap:break-word}
.eyebrow{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.mock-strip{background:var(--bg-2);border-bottom:1px solid var(--line-soft);color:var(--faint);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:6px 16px}
.announce{background:#000;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:8px 16px}
.announce b{color:#fff;font-weight:700}
.announce span{color:#9a9a9a}
header.site{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:32px;height:68px}
.logo-mark{display:inline-flex;align-items:center}
.logo-mark svg{height:38px;width:auto}
.logo-svg-dark{display:var(--logo-dark)}
.logo-svg-light{display:var(--logo-light)}
.nav-links{display:flex;gap:26px;font-family:var(--display);font-size:15px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;margin-left:8px;flex-wrap:nowrap}
/* Never let a link break mid-label: a wrapped nav puts the bar on two lines. */
.nav-links a{color:var(--muted);padding:6px 0;transition:color .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.new::after{content:"NEW";color:var(--accent);font-size:10px;letter-spacing:.08em;
  vertical-align:super;margin-left:4px}
.nav-tools{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-tools a{color:var(--muted);transition:color .15s;position:relative}
.nav-tools a:hover{color:var(--text)}
.nav-icon{background:none;border:none;padding:0;color:var(--muted);cursor:pointer;
  display:inline-flex;transition:color .15s}
.nav-icon:hover,.nav-icon[aria-expanded="true"]{color:var(--text)}
/* ---- mobile menu: the nav links are hidden below 1080px, so they have to
   live somewhere. Same sheet pattern as search (real button, tap to open, no
   hover), so nothing on this site is a hover-only Easter egg. ---- */
.nav-burger{display:none}
.menu-overlay{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.72);
  backdrop-filter:blur(2px)}
.menu-sheet{background:var(--bg);border-bottom:2px solid var(--accent);
  padding:6px 0 20px;max-height:92vh;overflow-y:auto}
.menu-sheet a{display:flex;align-items:center;justify-content:space-between;
  padding:15px 0;min-height:56px;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text)}
.menu-sheet a[aria-current]{color:var(--accent)}
.menu-sheet a::after{content:"\203A";color:var(--faint);font-family:var(--body);font-size:20px}
.menu-sheet a.new::after{content:"NEW";color:var(--accent);font-family:var(--display);
  font-size:11px;letter-spacing:.14em;vertical-align:baseline;margin-left:0}
.menu-foot{display:flex;flex-wrap:wrap;gap:14px 26px;padding-top:20px;font-size:13px;
  color:var(--muted);letter-spacing:.04em}
.menu-foot a{display:inline;padding:0;min-height:0;border:none;font-family:var(--body);
  font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.menu-foot a::after{content:none}
/* ---- search sheet: one panel, opened by a real button, so touch works ---- */
.search-overlay{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);
  backdrop-filter:blur(2px)}
.search-sheet{background:var(--bg);border-bottom:2px solid var(--accent);
  padding:22px 0 24px;max-height:88vh;overflow-y:auto}
.search-form{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);
  padding-bottom:14px}
.search-form>svg{color:var(--faint);flex:none}
#search-input{flex:1;min-width:0;background:transparent;border:none;color:var(--text);
  font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;padding:6px 0}
#search-input::placeholder{color:var(--faint);text-transform:none;
  font-family:var(--body);font-size:17px;letter-spacing:0}
#search-input:focus{outline:none}
.search-close{background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 14px;flex:none;min-height:40px}
.search-close:hover{color:var(--text);border-color:var(--muted)}
.search-results{display:flex;flex-direction:column;gap:1px;margin-top:16px}
.search-hint{color:var(--faint);font-size:13px;margin:14px 0 0}
.search-hint a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.search-hit{display:flex;align-items:center;gap:16px;padding:10px 12px;text-decoration:none;
  border:1px solid transparent;transition:background .12s,border-color .12s}
.search-hit:hover,.search-hit.on{background:var(--bg-2);border-color:var(--line)}
.hit-img{flex:none;width:56px;height:56px;background:var(--card);display:grid;place-items:center;
  overflow:hidden}
.hit-img img{width:100%;height:100%;object-fit:contain}
.hit-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hit-name{font-family:var(--display);font-size:18px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.15}
.hit-meta{font-size:11px;color:var(--faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.hit-right{display:flex;align-items:center;gap:16px;flex:none}
.hit-price{font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  #search-input{font-size:20px}
  .hit-right{flex-direction:column;align-items:flex-end;gap:4px}
  .hit-name{font-size:16px}
}
.cart-count{position:absolute;top:-7px;right:-9px;background:var(--text);color:var(--bg);
  font-size:9px;font-weight:700;width:15px;height:15px;display:grid;place-items:center}
/* hero (always Blackout, brand default) */
.hero{position:relative;background:#000;color:#fff;overflow:hidden;border-bottom:1px solid var(--accent)}
.hero-img{position:absolute;inset:0;background:url(/images/hero.jpg) 70% 30%/cover no-repeat;pointer-events:none}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 34%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.16) 100%),
  linear-gradient(0deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,0) 36%);pointer-events:none}
@media (max-width:760px){.hero-scrim{background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.62) 100%)}}
.hero-inner{position:relative;padding:96px var(--gutter) 110px;max-width:760px}
.hero .eyebrow{color:#9a9a9a}
.hero h1{font-size:clamp(60px,9.5vw,132px);margin:22px 0 0}
.hero h1 .underline{display:inline-block;border-bottom:6px solid var(--accent);padding-bottom:.06em}
.hero p.lede{max-width:54ch;color:#d4d4d4;font-size:16px;margin:26px 0 0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:14px 28px;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;display:inline-block}
.btn-red{background:var(--accent);color:#fff}
.btn-red:hover{background:var(--accent-down)}
.btn-red[disabled]{background:var(--tile);color:var(--faint);cursor:not-allowed}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-inner>*{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.hero-inner>*:nth-child(2){animation-delay:.08s}
.hero-inner>*:nth-child(3){animation-delay:.16s}
.hero-inner>*:nth-child(4){animation-delay:.24s}
/* trust strip */
.trust{border-bottom:1px solid var(--line);background:var(--bg-2)}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
.trust-item{padding:22px 26px 24px;border-left:1px solid var(--line-soft)}
.trust-item:first-child{border-left:none;padding-left:0}
.trust-item h3{font-size:18px;letter-spacing:.08em;margin-bottom:6px}
.trust-item p{margin:0;color:var(--muted);font-size:13px}
/* sections */
section.block{padding:78px 0 84px;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:38px}
.sec-head h2{font-size:clamp(36px,5vw,56px);margin-top:14px}
.sec-meta{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;padding-bottom:8px}
.pulse{width:7px;height:7px;background:var(--accent);border-radius:50%;flex:none}
/* category rail: lifestyle photo tiles */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.cat{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--bg-2);
  overflow:hidden;transition:border-color .15s,transform .15s}
.cat:hover{border-color:var(--text);transform:translateY(-3px)}
.cat-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#0b0b0b}
.cat-img img{width:100%;height:100%;object-fit:cover;opacity:.88;
  transition:transform .4s ease,opacity .3s}
.cat:hover .cat-img img{transform:scale(1.05);opacity:1}
.cat-body{display:block;padding:14px 16px 16px;border-top:2px solid var(--accent)}
.cat-name{display:block;font-family:var(--display);font-size:18px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}
.cat small{color:var(--faint);font-size:11px;letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.cat-img img{transition:none}}
/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px}
/* Product cards: WHITE tiles on the black page (hybrid design). Photo and all
   card text live on white with dark type; the page around them stays Blackout. */
.card{border:1px solid var(--card-line);background:var(--card);color:var(--card-text);
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s;position:relative}
/* Hover goes graphite, not red: the static red accent rule below owns the red */
.card:hover{border-color:#8a8a8a;transform:translateY(-3px)}
.ph{aspect-ratio:4/3;background:var(--card);display:grid;place-items:center;position:relative;
  border-bottom:1px solid var(--card-line);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:contain}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.chip{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;color:var(--muted);
  align-self:flex-start}
.chip::before{content:"";width:6px;height:6px;flex:none;background:var(--muted)}
.chip.ok{color:var(--ok)} .chip.ok::before{background:var(--ok)}
.chip.low{color:var(--low)} .chip.low::before{background:var(--low)}
.chip.mto{color:var(--warn)} .chip.mto::before{background:var(--warn)}
.chip.out{color:var(--accent)} .chip.out::before{background:var(--accent)}
.card .chip.ok{color:var(--card-ok)} .card .chip.ok::before{background:var(--card-ok)}
.card .chip.low{color:var(--card-low)} .card .chip.low::before{background:var(--low)}
.card .chip.mto{color:var(--card-warn)} .card .chip.mto::before{background:var(--warn)}
.card .chip.out{color:var(--accent)} .card .chip.out::before{background:var(--accent)}
.card h3{font-size:19px;letter-spacing:.05em;line-height:1.1}
.card h3 a{color:var(--card-text)}
.card .sku{color:var(--card-muted);font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* Accent rule (option B, chosen 2026-07-25): the gray divider above the price row
   becomes a short red rule echoing the logo lockup, growing to full width on hover. */
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:11px;border-top:none;position:relative}
.card-foot::before{content:"";position:absolute;top:0;left:0;width:33%;height:2px;
  background:var(--accent);transition:width .25s ease}
.card:hover .card-foot::before{width:100%}
@media (prefers-reduced-motion:reduce){.card-foot::before{transition:none}}
.price{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.card .price{color:var(--card-text)}
.add{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid #c9c9c9;background:transparent;color:var(--card-text);
  padding:9px 14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.add:hover{background:var(--card-text);color:var(--card);border-color:var(--card-text)}
/* feature band */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.feature .fimg{aspect-ratio:16/11;border:1px solid var(--line);overflow:hidden}
.feature .fimg img{width:100%;height:100%;object-fit:cover}
.feature h2{font-size:clamp(38px,5vw,64px);margin:16px 0 0}
.feature p{color:var(--muted);max-width:48ch;margin:20px 0 0}
.feature ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:10px;font-size:13px}
.feature li{display:flex;gap:12px;align-items:baseline}
.feature li::before{content:"//";color:var(--accent);font-weight:700;flex:none}
.arrow-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:2px solid var(--text);padding-bottom:6px;transition:gap .15s}
.arrow-link:hover{gap:16px}
/* manifesto */
.manifesto{background:var(--inverse-bg);color:var(--inverse-text);padding:92px 0;
  border-bottom:1px solid var(--line)}
.manifesto .eyebrow{color:var(--inverse-muted)}
.manifesto h2{font-size:clamp(42px,6.5vw,88px);margin:20px 0 0;max-width:14ch}
.manifesto blockquote{margin:30px 0 0;padding-left:22px;border-left:3px solid var(--accent);
  font-size:18px;color:var(--inverse-muted);max-width:44ch}
.manifesto .sig{margin-top:26px;font-family:var(--display);font-size:13px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--inverse-muted)}
/* dispatch */
.dispatch{padding:72px 0;border-bottom:1px solid var(--line)}
.dispatch-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.dispatch h2{font-size:clamp(32px,4vw,48px);margin-top:14px}
.dispatch p{color:var(--muted);margin:12px 0 0;max-width:42ch}
.dispatch form{display:flex;gap:0}
.dispatch input{flex:1;background:transparent;border:1px solid var(--line);border-right:none;
  color:var(--text);font-family:var(--body);font-size:14px;padding:15px 18px;min-width:0}
.dispatch input::placeholder{color:var(--faint)}
.dispatch button{background:var(--text);color:var(--bg);border:1px solid var(--text);
  font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 26px;cursor:pointer}
.dispatch button:hover{background:var(--muted);border-color:var(--muted)}
/* footer */
footer.site{padding:64px 0 34px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;
  border-bottom:1px solid var(--line)}
.foot-brand .logo-mark svg{height:34px}
.foot-brand p{color:var(--muted);font-size:13px;max-width:34ch;margin:16px 0 0}
.foot-col h4{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{color:var(--muted);font-size:13px;transition:color .15s}
.foot-col a:hover{color:var(--text)}
.foot-legal{padding-top:26px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* ============ shop (approved concept) ============ */
.page-head{padding:52px var(--gutter) 34px}
.page-head h1{font-size:clamp(44px,6vw,76px);margin-top:14px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.live-meta{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;padding-bottom:10px}
.filters{position:sticky;top:68px;z-index:40;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.filter-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:transparent;color:var(--muted);border:1px solid var(--line);
  padding:8px 16px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.pill:hover{border-color:var(--text);color:var(--text)}
.pill[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.pill.has-sub{display:inline-flex;align-items:center;gap:8px}
.pill .caret{transition:transform .2s;flex:none;opacity:.75}
.pill[aria-expanded="true"] .caret{transform:rotate(180deg);opacity:1}
/* Sub-filters: one panel under the pill row, full width. Same panel on every
   device, opened by tap or click, so touch users never hunt for a hover target.
   It is absolutely positioned (the bar is sticky, so it is the containing block)
   and OVERLAYS the catalog. Two reasons: the page never jumps when the panel
   opens, closes, or swaps between families of different heights; and the bar's
   own box stays a constant size, so swapping panels can't move the layout out
   from under the pointer and fire a spurious mouseleave. */
.submenu{position:absolute;left:0;right:0;top:100%;z-index:2;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.submenu-inner{padding:18px var(--gutter) 20px;display:flex;flex-direction:column;gap:16px}
.sub-row{display:flex;flex-wrap:wrap;gap:8px}
.sub{font-family:var(--body);font-size:13px;background:transparent;color:var(--muted);
  border:1px solid var(--line);padding:9px 14px;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;min-height:40px;transition:color .15s,border-color .15s}
.sub:hover{color:var(--text);border-color:var(--muted)}
.sub em{font-style:normal;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.sub:hover em{color:var(--muted)}
.sub-group{display:flex;flex-direction:column;gap:8px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.sub-group-label{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.sub-group-label:hover{color:var(--text)}
@media (max-width:760px){
  .submenu-inner{padding:16px 24px 18px}
  .sub{flex:1 1 calc(50% - 8px);justify-content:space-between}
}
.filter-tools{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.stock-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  cursor:pointer;user-select:none}
.stock-toggle input{accent-color:var(--accent);width:14px;height:14px;margin:0}
.sort{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;background:var(--bg);color:var(--text);border:1px solid var(--line);
  padding:8px 12px;cursor:pointer}
.catalog{padding:40px var(--gutter) 84px}
.count-line{font-size:12px;color:var(--faint);margin:0 0 22px;letter-spacing:.06em;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* names the filter the panel is no longer standing open to show */
.active-filter{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.zone-light .active-filter{color:var(--card-text)}
.clear-filter{background:none;border:1px solid var(--zone-line);color:inherit;cursor:pointer;
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;min-height:30px}
.clear-filter:hover{border-color:var(--card-muted)}
.no-match{display:none;border:1px dashed var(--line);padding:48px 24px;text-align:center;color:var(--muted)}
.no-match h3{font-size:22px;margin-bottom:8px}
.no-match p{margin:0;font-size:13px}
.spec{font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.spec:hover{color:var(--text)}
/* ============ PDP (approved concept) ============ */
.crumbs{padding:18px 0;font-family:var(--display);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--text)}
.crumbs .sep{color:var(--faint)}
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-bottom:84px;align-items:start}
.gallery{display:flex;flex-direction:column;gap:12px;background:var(--card);padding:16px}
.ph-main{aspect-ratio:4/3;background:var(--card);border:none;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.ph-main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.thumb{aspect-ratio:1;padding:0;cursor:pointer;background:var(--card);border:1px solid var(--zone-line);
  overflow:hidden;transition:border-color .15s}
.thumb[aria-selected="true"]{border-color:var(--accent);border-width:2px}
.thumb:hover{border-color:var(--muted)}
.thumb img{width:100%;height:100%;object-fit:contain}
.buy{position:sticky;top:92px;display:flex;flex-direction:column;gap:22px}
.buy h1{font-size:clamp(36px,4.5vw,54px)}
.price-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.bigprice{font-family:var(--display);font-size:36px;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.sku-line{color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.stock-note{font-size:12px;color:var(--muted);margin:6px 0 0}
.chip.mto::before{background:var(--warn)}
.opt-label{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;
  justify-content:space-between;align-items:baseline}
.opt-label em{font-style:normal;color:var(--text)}
.attr-group{margin-bottom:16px}
.variants{display:flex;flex-direction:column;gap:8px}
.variant{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line);background:transparent;color:var(--text);font-family:var(--body);
  font-size:13px;padding:13px 16px;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s}
.variant:hover{border-color:var(--muted)}
.variant[aria-pressed="true"]{border:2px solid var(--text);padding:12px 15px;background:var(--bg-2)}
.variant .v-name{font-weight:700;letter-spacing:.04em}
.variant .v-meta{display:flex;align-items:center;gap:14px;flex:none}
.variant .v-price{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.v-dot{width:7px;height:7px;flex:none}
.v-dot.ok{background:var(--ok)} .v-dot.low{background:var(--low)}
.v-dot.mto{background:var(--warn)} .v-dot.out{background:var(--accent)}
.buy-row{display:flex;gap:12px}
/* max-content: the steppers inside are fixed widths, so without it the bordered
   box stretches to whatever it sits in (a wide table cell on the cart) and reads
   as an oversized empty field. It is a flex item on the PDP, so nothing changes there. */
.qty{display:flex;align-items:stretch;border:1px solid var(--line);flex:none;width:max-content}
/* flex:none for the same reason as the cart thumbnail: in a squeezed table cell
   the steppers would otherwise shrink below their own width */
.qty button,.qty output,.qty span{flex:none}
.qty button{width:42px;background:transparent;border:none;color:var(--text);font-size:17px;
  cursor:pointer;font-family:var(--body)}
.qty button:hover{background:var(--bg-2)}
.qty output,.qty span{width:44px;display:grid;place-items:center;font-weight:700;
  font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.btn-buy{flex:1;background:var(--accent);color:#fff;border:none;font-family:var(--display);
  font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;cursor:pointer;transition:background .15s}
.btn-buy:hover{background:var(--accent-down)}
.btn-buy[disabled]{background:var(--tile);color:var(--faint);cursor:not-allowed}
.ship-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.ship-note::before{content:"//";color:var(--accent);font-weight:700}
.acc{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px;font-family:var(--display);font-size:18px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-family:var(--body);font-size:18px;font-weight:400}
details[open] summary::after{content:"\2212"}
.acc-body{padding:0 2px 20px;color:var(--muted);font-size:14px}
.acc-body p{margin:10px 0}
.acc-body>ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.acc-body>ul>li{display:flex;gap:12px;align-items:baseline}
.acc-body>ul>li::before{content:"//";color:var(--accent);font-weight:700;flex:none;font-size:12px}
.acc-body .desc h2,.acc-body .desc h3{font-size:17px;margin:16px 0 6px;color:var(--text)}
.acc-body .desc ul{padding-left:20px;margin:8px 0}
.spec-table{width:100%;border-collapse:collapse;font-size:13px}
.spec-table td{padding:9px 2px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.spec-table td:first-child{color:var(--faint);text-transform:uppercase;font-size:11px;
  letter-spacing:.1em;padding-right:24px;white-space:nowrap}
.kit-table{width:100%;border-collapse:collapse;font-size:13px}
.kit-table td{padding:8px 2px;border-bottom:1px solid var(--line-soft)}
.kit-table td.q{width:44px;color:var(--muted);font-variant-numeric:tabular-nums}
.kit-table td.pn{width:110px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
section.pairs{padding:64px 0 84px;border-top:1px solid var(--line)}
section.pairs.zone-light{border-top:none}
.pairs .sec-head h2{font-size:clamp(30px,4vw,44px)}
/* cart */
.cart-table{width:100%;border-collapse:collapse;margin:26px 0}
.cart-table td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table td:first-child{padding-left:0} .cart-table td:last-child{padding-right:0}
/* min-width, not just width: the name column below claims 100%, which squeezes
   every other column to its MINIMUM. The global img{max-width:100%} then lets the
   thumbnail shrink with the squeezed cell instead of holding 64px, and the
   thumbnails disappear to a sliver. Belt and braces on the cell and the image. */
.cart-table td.c-img{width:64px;min-width:64px}
/* The name column absorbs all the slack. Without this the table spreads the
   spare width across every column, which parked the stepper and the price out in
   the middle of nowhere with a huge gap behind them. */
.cart-table td.c-name{width:100%}
.cart-table td.c-qty{white-space:nowrap}
.cart-table td.c-price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-table img{width:64px;min-width:64px;max-width:none;height:64px;object-fit:contain;
  background:#fff;border:1px solid var(--line-soft)}
.cart-table .rm{background:none;border:none;color:var(--faint);cursor:pointer;font-size:18px}
.c-sku{color:var(--faint);font-size:12px}
/* cart lines link back to their product page */
.cart-table a{color:inherit}
.cart-table a.c-link strong{transition:color .15s}
.cart-table a.c-link:hover strong{text-decoration:underline;text-underline-offset:3px}
.cart-table td.c-img a{display:block}
.cart-table td.c-img a:hover img{border-color:var(--muted)}
.zone-light .cart-table td.c-img a:hover img{border-color:#9a9a9a}
/* the two cart surfaces: light band of line items, dark totals under it */
.cart-items{padding:30px var(--gutter) 34px}
.cart-items .cart-table{margin:0}
.cart-items tr:last-child td{border-bottom:none}
.cart-summary{padding:32px var(--gutter) 24px}
/* Suggested accessories, from Odoo's own accessory_product_ids. Compact rows
   rather than full product cards: this is a nudge under the order, not a
   second catalog, and it sits inside the light zone with the line items. */
.sugg{margin-top:30px;padding-top:24px;border-top:1px solid var(--zone-line)}
.sugg h2{font-size:20px;letter-spacing:.06em;margin-bottom:4px}
.sugg-note{color:var(--card-muted);font-size:12px;margin:0 0 16px}
/* min() so the track can never demand more than the screen has */
.sugg-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.sugg-item{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--card-line);padding:12px}
.sugg-item img{width:56px;min-width:56px;max-width:none;height:56px;object-fit:contain;
  background:#fff;flex:none}
.sugg-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.sugg-name{font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.15;color:var(--card-text)}
.sugg-price{font-size:13px;font-weight:700;color:var(--card-text);font-variant-numeric:tabular-nums}
.sugg-add{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid #c9c9c9;background:transparent;color:var(--card-text);
  padding:9px 13px;min-height:40px;cursor:pointer;flex:none;text-align:center}
.sugg-add:hover{background:var(--card-text);color:var(--card);border-color:var(--card-text)}
/* same rows in the product page's buy column, which is narrower: one per line */
.pdp-opt{margin-top:4px;padding-top:20px}
.pdp-opt h2{font-size:18px}
.pdp-opt .sugg-row{grid-template-columns:minmax(0,1fr)}
/* Cart rows on a light zone. Under review 2026-07-26: the rows carry product
   photography, which by the hybrid rule belongs on a light surface. */
.zone-light .cart-table td{border-bottom-color:var(--zone-line)}
.zone-light .cart-table img{border-color:#dcdcdc}
.zone-light .cart-table strong,.zone-light .cart-table td.c-price{color:var(--card-text)}
.zone-light .c-sku{color:var(--card-muted)}
.zone-light .cart-table .rm{color:#8a8a8a}
.zone-light .cart-table .rm:hover{color:var(--card-text)}
.totals{max-width:380px;margin-left:auto;font-variant-numeric:tabular-nums}
.totals .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.totals .grand{font-size:20px;font-weight:700}
/* ---- checkout column: ship-to fields, the problem list, and the source line.
   Same 380px right-hand column as .totals, same square borders, same tokens.
   No new colours: the accent red already means "stop" everywhere on this site. */
.ship-est{max-width:380px;margin-left:auto;margin-bottom:20px}
.est-label{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.est-row{display:flex;gap:10px;margin-bottom:10px}
.est-input{flex:1;min-width:0;background:transparent;border:1px solid var(--line);color:var(--text);
  font-family:var(--body);font-size:14px;padding:12px 14px;width:100%}
.est-input::placeholder{color:var(--faint)}
.est-hint{margin:8px 0 0;font-size:12px;color:var(--muted);letter-spacing:.02em}
.est-resolved{align-self:center;font-size:13px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.co-pending{font-size:13px;color:var(--muted);font-style:italic;letter-spacing:.02em}
.co-note{font-size:13px;color:var(--muted);margin:16px 0 0}
.co-note.bad{color:var(--accent)}
.co-problems{margin:16px 0 0;display:flex;flex-direction:column;gap:1px;background:var(--line)}
.co-problem{background:var(--bg-2);padding:12px 14px;display:flex;align-items:center;gap:12px;
  justify-content:space-between;font-size:13px;color:var(--muted)}
.co-problem b{color:var(--text);font-variant-numeric:tabular-nums}
.co-fixes{display:flex;gap:8px;flex:none}
.co-fix{background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 11px;min-height:34px}
.co-fix:hover{color:var(--text);border-color:var(--muted)}
/* Says out loud whose numbers are on screen: our server's, or the browser's guess */
.src-line{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  margin:12px 0 0}
.empty{color:var(--muted);padding:40px 0}
.empty a{text-decoration:underline;text-underline-offset:3px}
main.page{min-height:52vh;padding-bottom:84px}
/* ============ responsive ============
   Breakpoints, from wide to narrow:
   1180  tighten the nav so seven links keep fitting on one line
    960  nav links move into the mobile sheet (tightened, they need ~840px)
    900  every two-column layout collapses
    760  cart rows stop being a table and stack
    560  footer collapses to one column                                    */
@media (max-width:1180px){
  .nav{gap:22px}
  .nav-links{gap:17px;font-size:14px;margin-left:0}
  .nav-tools{gap:17px}
}
@media (max-width:960px){
  .nav{height:60px;gap:18px}
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .filters{top:60px}          /* sticky filter bar sits under the shorter header */
  .buy{top:84px}
}
/* Sub-filters: the floating overlay exists for MOUSE users, where it keeps the
   sticky bar a constant height so a hover swap can't fire a spurious mouseleave.
   On a touch screen or a narrow window there is no hover, and the panel just
   covers the first product. So it goes back into the flow and pushes the grid
   down, and the bar stops sticking, because a sticky bar plus an in-flow panel
   would hold most of a phone screen hostage. */
@media (max-width:960px),(hover:none){
  .filters{position:static;top:auto}
  .submenu{position:static;box-shadow:none;border-bottom:none;background:var(--bg-2)}
}
@media (max-width:900px){
  .trust-row{grid-template-columns:1fr}
  .trust-item{border-left:none;padding-left:0}
  .feature{grid-template-columns:1fr}
  .dispatch-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .pdp{grid-template-columns:1fr;gap:36px}
  .buy{position:static}
  .page-head{padding:34px var(--gutter) 26px}
  .hero-inner{padding:64px var(--gutter) 72px}
  section.block{padding:56px 0 60px}
  .catalog{padding:28px var(--gutter) 60px}
}
/* Cart: the five-column table needs ~520px of room. Below that it stacks, which
   is also what stopped the page overflowing sideways on a phone. */
@media (max-width:760px){
  .cart-table{display:block;margin:20px 0}
  .cart-table tbody,.cart-table tr,.cart-table td{display:block}
  .cart-table tr{display:grid;grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:"img name" "img qty" "img price";gap:10px 14px;
    padding:18px 0;border-bottom:1px solid var(--line);position:relative}
  .cart-table td{padding:0;border-bottom:none}
  .cart-table td.c-img{grid-area:img;align-self:start}
  .cart-table td.c-name{grid-area:name;padding-right:30px}
  .cart-table td.c-qty{grid-area:qty}
  .cart-table td.c-price{grid-area:price;text-align:left;font-weight:700}
  .cart-table td.c-rm{position:absolute;top:14px;right:0}
  .cart-table .qty button{width:38px}
  .cart-table .qty span{width:40px}
  .totals{max-width:none;margin-left:0}
  .ship-est{max-width:none;margin-left:0}
  .co-problem{flex-direction:column;align-items:flex-start}
  .spec-table td:first-child{white-space:normal}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  /* once the filter bar wraps, the tools belong at the left with the pills */
  .filter-tools{margin-left:0;width:100%;justify-content:space-between;gap:12px}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:30px}
  /* Fixed track minimums are wider than the screen down here */
  .grid,.cats{grid-template-columns:minmax(0,1fr)}
  .menu-sheet a{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}