/* ---- SELF-HOSTED FONTS ----
   🔴 Gate 1.5: Google Fonts was LIVE IN PRODUCTION until 2026-09-12. The CDN copy
   cost a 2-deep serial third-party chain before any text painted — HTML -> the
   googleapis CSS (measured 237 ms TTFB) -> the gstatic woff2. Self-hosted here, so
   both third-party origins are gone from the critical path.
   These are VARIABLE fonts: Google served one byte-identical file per family per
   subset for every weight, so 14 downloads deduped to 4 (640 KB -> 176 KB) and the
   weight axis is declared as a RANGE below. Do not re-split them per weight.
   Own block, like .btn — a neighbouring rewrite must not take them with it. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('/assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('/assets/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outlaw X — derived from the logo (charcoal #202225 / white) + #e02b20 accent.
   CONTRAST (measured): red/white 4.63:1 AA-normal · red/charcoal 3.44:1 LARGE ONLY
   => never use --accent for small text on a dark ground; use white. */
:root{
  --ink:#202225; --ink-2:#3f3f41; --paper:#ffffff; --wash:#f5f5f6;
  --muted:#6b6d70; --line:#e3e4e5;
  --accent:#e02b20; --accent-dark:#b32118;
  --nav-h:72px;
  --f-head:'Oswald','Arial Narrow',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%;height:auto;display:block}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.1;letter-spacing:.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.6rem);text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);text-transform:uppercase}
h3{font-size:1.25rem}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* ---- BUTTONS ----
   ⚠ These live in their OWN block on purpose. They previously sat inside the header
   block and were deleted wholesale when that block was rewritten (2026-09-02), which
   silently turned all 22 buttons on the site into plain red text links. Do not fold
   them back into a component block. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-size:.95rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;line-height:1;
  padding:14px 26px;border-radius:2px;border:2px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover,.btn:focus{text-decoration:none}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover,.btn--primary:focus{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
/* on a dark ground the outline button is white; on a light ground it takes the ink */
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover,.btn--ghost:focus{background:#fff;color:var(--ink);border-color:#fff}
.sec:not(.hero) .btn--ghost{color:var(--ink);border-color:var(--ink)}
.sec:not(.hero) .btn--ghost:hover{background:var(--ink);color:#fff}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:100;background:var(--ink);border-bottom:3px solid var(--accent)}
.hdr__bar{display:flex;align-items:center;gap:18px;height:var(--nav-h)}
.hdr__logo{flex:0 0 auto;display:flex;align-items:center}
.hdr__logo img{height:42px;width:auto;display:block}

.nav{display:none;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-head);font-size:.9rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;
  color:#fff;background:none;border:0;cursor:pointer;
  padding:8px 11px;border-radius:2px;
  white-space:nowrap;                      /* ← the wrapping that broke the bar */
  line-height:1;                           /* ← every item on ONE baseline */
  position:relative;
}
.nav__link::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:transparent}
.nav__link:hover{color:#fff;background:#2c2d31;text-decoration:none}
.nav__link.is-active::after{background:var(--accent)}

/* dropdown */
.nav__group{position:relative}
.nav__caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--accent);transition:transform .15s ease;flex:0 0 auto}
.nav__group.is-open .nav__caret{transform:rotate(180deg)}
.dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:232px;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:2px;box-shadow:0 14px 34px rgba(32,34,37,.22);padding:6px;z-index:120}
.nav__group.is-open .dropdown{display:block}
.dropdown a{display:block;padding:11px 14px;color:var(--ink);font-family:var(--f-head);
  font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-radius:2px}
.dropdown a:hover{background:var(--wash);color:var(--accent);text-decoration:none}
.dropdown a[aria-current]{color:var(--accent)}

.hdr__cta{display:none;flex:0 0 auto;padding:12px 20px;font-size:.85rem}
.hamburger{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:1px solid #55565a;border-radius:2px;
  color:#fff;font-size:1.3rem;flex:0 0 auto;cursor:pointer}

/* 9 links + a CTA genuinely need the room — hold the hamburger until they fit */
@media(min-width:1080px){
  .nav,.hdr__cta{display:inline-flex}
  .hamburger{display:none}
  .mobile-menu{display:none!important}
}

/* mobile */
.mobile-menu{display:none;background:var(--ink);border-top:1px solid #35363a;padding:6px 0 16px}
.mobile-menu.is-open{display:block}
.mobile-menu a,.mm__toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;
  color:#fff;background:none;border:0;border-bottom:1px solid #2c2d31;
  padding:14px 20px;text-align:left;cursor:pointer}
.mobile-menu a:hover,.mm__toggle:hover{background:#2a2b2f;text-decoration:none}
.mm__toggle .nav__caret{border-top-width:7px;border-left-width:6px;border-right-width:6px}
.mm__toggle.is-open .nav__caret{transform:rotate(180deg)}
.mm__sub{display:none;background:#1a1b1e}
.mm__sub.is-open{display:block}
.mm__sub a{padding-left:36px;font-size:.9rem;color:#d3d4d4}
.mm__cta{background:var(--accent);color:#fff;justify-content:center;margin:12px 20px 0;
  border-bottom:0;border-radius:2px}
.mm__cta:hover{background:var(--accent-dark)}

/* ---- shipping bar ---- */
.shipbar{background:var(--accent);color:#fff;font-family:var(--f-head);text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;text-align:center;padding:9px 20px}
/* ---- hero ---- */
.hero{position:relative;background:var(--ink);color:#fff;padding:72px 0 80px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 400px at 78% 30%,rgba(224,43,32,.20),transparent 60%);pointer-events:none}
.hero__in{position:relative;z-index:2;max-width:720px}
.hero__eyebrow{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.22em;
  font-size:.82rem;color:#fff;opacity:.85;margin:0 0 14px}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__sub{font-size:1.12rem;color:#d3d4d4;margin:0 0 30px;max-width:56ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__phones{margin:22px 0 0;font-size:.98rem;color:#d3d4d4}
.hero__phones a{color:#fff;font-weight:600}
/* ---- trust strip ---- */
.trust{background:var(--wash);border-bottom:1px solid var(--line)}
.trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.trust__i{background:var(--wash);padding:20px 16px;text-align:center}
.trust__n{font-family:var(--f-head);font-size:1.5rem;color:var(--ink);line-height:1}
.trust__l{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:5px}
@media(min-width:760px){.trust__grid{grid-template-columns:repeat(4,1fr)}}
/* ---- SHOP-BY-CATEGORY BAR ----
   Its own block, like .btn, so a neighbouring rewrite can't take it with it.
   Charcoal ground => labels are WHITE, never --accent (red on charcoal is 3.44:1,
   large-text only). Hover and current-page invert to a red fill with white text,
   which is 4.63:1 and AA at this size. Scrolls horizontally on narrow screens
   rather than wrapping, so it always reads as one strip. */
.catbar{background:var(--ink)}
.catbar__in{display:flex;align-items:center;justify-content:center;gap:20px}
.catbar__lede{flex:0 0 auto;font-family:var(--f-head);text-transform:uppercase;
  letter-spacing:.11em;font-size:.72rem;color:#9a9c9f;white-space:nowrap}
.catbar__list{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.catbar__list::-webkit-scrollbar{display:none}
.catbar__link{display:flex;align-items:center;height:54px;padding:0 17px;white-space:nowrap;
  font-family:var(--f-head);font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;
  color:#fff;transition:background-color .15s ease,color .15s ease}
.catbar__link:hover,.catbar__link:focus{background:var(--accent);color:#fff;text-decoration:none}
.catbar__link.is-active{background:var(--accent);color:#fff}
.catbar__link--all{color:#b9babc}
.catbar__link--all span{margin-left:.45em}
.catbar__link--all:hover,.catbar__link--all:focus{color:#fff}
@media(max-width:859px){
  .catbar__in{gap:0;padding-left:8px;padding-right:8px}
  .catbar__lede{display:none}
  .catbar__link{height:50px;padding:0 14px;font-size:.86rem}
}
/* ---- sections ---- */
.sec{padding:64px 0}
.sec--wash{background:var(--wash)}
.sec__head{max-width:62ch;margin-bottom:34px}
.sec__head p{color:var(--muted);font-size:1.05rem}
/* ---- category cards ---- */
.cats{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:600px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.cat:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(32,34,37,.13);text-decoration:none}
.cat__img{aspect-ratio:16/10;background:var(--ink);object-fit:cover;width:100%}
.cat__b{padding:20px 20px 24px}
.cat h3{color:var(--ink);margin-bottom:8px}
.cat p{color:var(--muted);font-size:.95rem;margin:0 0 14px}
.cat__go{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-size:.9rem}
/* ---- prose ---- */
.prose{max-width:72ch}
.prose h2{margin-top:2em}
.prose p{margin:0 0 1.1em}
.prose ul{padding-left:1.2em}.prose li{margin-bottom:.5em}
/* ---- store ---- */
.storewrap{min-height:420px}
/* ---- footer ---- */
.ftr{background:var(--ink);color:#d3d4d4;padding:52px 0 26px;font-size:.94rem}
.ftr a{color:#fff}
.ftr__grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:34px}
@media(min-width:760px){.ftr__grid{grid-template-columns:2fr 1fr 1fr}}
.ftr__h{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.07em;color:#fff;font-size:.95rem;margin:0 0 14px}
.ftr__list{list-style:none;margin:0;padding:0}
.ftr__list li{margin-bottom:9px}
.ftr__list a{padding:3px 0;display:inline-block}
.ftr__legal{border-top:1px solid #35363a;padding-top:20px;font-size:.85rem;color:#9a9b9e;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- content + rail: kills the 38% dead space on category pages ---- */
.layout{display:grid;grid-template-columns:1fr;gap:38px}
@media(min-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 330px;gap:48px}}
.layout .prose{max-width:none}
.rail{align-self:start}
@media(min-width:1000px){.rail{position:sticky;top:calc(var(--nav-h) + 20px)}}
.rail__card{background:var(--ink);color:#fff;border-radius:3px;padding:24px;margin-bottom:20px}
.rail__card h3{color:#fff;margin-bottom:10px}
.rail__card p{color:#d3d4d4;font-size:.95rem;margin:0 0 16px}
.rail__card .btn{width:100%;text-align:center}
.rail__list{background:var(--wash);border:1px solid var(--line);border-radius:3px;padding:20px 22px}
.rail__list h3{font-size:1.05rem;margin-bottom:12px}
.rail__list ul{list-style:none;margin:0;padding:0}
.rail__list li{margin-bottom:9px;font-size:.95rem}
.rail__list li::before{content:"▸";color:var(--accent);margin-right:8px;font-weight:700}

/* ---- inline Ecwid product cards (reproduces the WordPress [ecwid_product] layout) ---- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;margin:8px 0 0}
.prod-grid .ecwid-SingleProduct-v2{background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:16px;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.prod-grid .ecwid-SingleProduct-v2:hover{box-shadow:0 8px 22px rgba(32,34,37,.12)}
.ecwid-SingleProduct-v2-placeholder{min-height:230px;background:
  linear-gradient(100deg,var(--wash) 30%,#eceded 50%,var(--wash) 70%);background-size:200% 100%;
  animation:oxshim 1.4s linear infinite;border-radius:2px}
@keyframes oxshim{to{background-position:-200% 0}}
.prod-note{color:var(--muted);font-size:.9rem;margin:14px 0 0}

/* ---- section heads: centre them so a short heading reads as intentional,
        not as a column that ran out of text (Eric, 2026-09-02) ---- */
.sec__head--center{max-width:64ch;margin-left:auto;margin-right:auto;text-align:center}
.sec__head--center p{margin-left:auto;margin-right:auto}

/* ---- prose + supporting image: fills the right-hand space with something real ---- */
.split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:56px}}
.split__media img{border-radius:3px;width:100%;height:100%;max-height:420px;object-fit:cover}
.split .prose{max-width:none}

/* A standalone prose column (no rail, no split) centres itself — a 72ch measure hard against
   the left edge of a 1200px wrap reads as a layout bug, which is exactly what it looked like. */
.sec > .wrap > .prose{margin-left:auto;margin-right:auto}

/* A content page with no rail still should not read as a narrow strip in a 1200px wrap.
   72ch is right for an article; these pages are marketing copy and take more. */
.prose--wide{max-width:none}
.prose--wide > p, .prose--wide > ul{max-width:88ch}
/* consecutive short bold lines extracted from WordPress read as a feature list, not headings */
.prose h3 + h3{margin-top:.35em}
/* legal pages: centred, slightly wider than an article, obviously deliberate */
.prose--legal{max-width:82ch;margin-left:auto;margin-right:auto}