/* =====================================================================
   BROTHERHOOD SUPPLIES — DESIGN SYSTEM
   Premium first responder apparel with a police-forward identity.
   Midnight navy carries the site, white carries the type, and the bright
   Emergency Blue is spent only on the actions that matter. No olive, no
   khaki, no camo. Square edges, heavy condensed headlines, quiet motion.
   ===================================================================== */

/* Headlines */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
/* Body */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  /* ---- Palette: police-forward first responder apparel ----
     Ratio held across the site: about 65% navy and dark surfaces,
     20% white and light product areas, 10% gray, 5% bright blue.
     Emergency Blue is a call to action, never decoration.          */
  --midnight: #07182C;         /* primary dark: header, footer, big sections */
  --navy: #0B2341;             /* secondary dark: cards, panels, menus       */
  --police: #1464A5;           /* brand accent: links, active states, icons  */
  --emergency: #1597F4;        /* bright CTA blue: progress, glow, hover     */
  --emergency-ink: #1179C4;    /* same hue, dark enough for white type on it */
  --ice: #F7F9FC;              /* primary light background                   */
  --white: #FFFFFF;            /* type on dark, buttons, logo                */
  --steel: #AAB7C4;            /* secondary copy, borders, specs             */
  --charcoal: #111820;         /* alternative to pure black                  */
  --footer: #07101C;

  --police-light: #4E9BDD;     /* police blue lifted, for type on midnight   */

  /* ---- Legacy token names, mapped to the palette above ---- */
  --obsidian: var(--charcoal);
  --graphite: var(--midnight);
  --gunmetal: #1B3A5C;
  --bone: var(--ice);
  --tan: var(--police-light);
  --tan-deep: #1173C4;
  --tan-ink: #12588F;
  --bone-2: #E3E9F1;
  --od: #4D6B57;
  --beam: var(--emergency);
  --cool: var(--steel);
  --steel-light: var(--police-light);

  --ink: #0A1119;              /* text on light */
  --muted: #58636F;            /* secondary text on light */
  --muted-dark: #9AA8B6;       /* secondary text on dark */
  --soft: var(--steel);        /* body text on dark */
  --rule: #D6DEE7;             /* hairline on light */
  --rule-dark: #16324F;        /* hairline on dark */

  --display: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", sans-serif;
  --body: "Inter", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 44px);
  --header-h: 82px;
  --topbar-h: 32px;

  /* Fine woven texture, closer to uniform fabric than to grit. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --twill: repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px);
  --prof-texture: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font: 400 16px/1.65 var(--body);
  color: var(--ink);
  background: var(--obsidian);
  -webkit-font-smoothing: antialiased;
}
body:has(dialog[open]), body.nav-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); text-transform: uppercase; line-height: .95; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3.2rem, 7.4vw, 6rem); font-weight: 800; letter-spacing: .012em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: .014em; }
h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 760px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--bone); color: var(--ink); padding: 10px 16px; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }

.eyebrow {
  font: 600 .78rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tan-ink); margin: 0 0 16px;
}
.section-dark .eyebrow, .section-graphite .eyebrow, .on-dark .eyebrow { color: var(--tan); }
.lede { font-size: 1.08rem; max-width: 56ch; color: var(--muted); }
.section-dark .lede, .section-graphite .lede, .on-dark .lede { color: var(--soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font: 700 1rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border: 1.5px solid transparent; border-radius: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--white); color: var(--midnight); }
.btn-primary:hover { background: var(--bone-2); }
/* Emergency Blue: add to cart, checkout, join. Nothing else. */
/* The button surface is the same hue as Emergency Blue, one step down so
   white type on it clears WCAG AA. The bright value stays on the progress
   bar and the loader, where it carries no text. */
.btn-cta { background: var(--emergency-ink); color: var(--white); }
.btn-cta:hover { background: #0E6AAE; }
.section-light .btn-primary, .split-body .btn-primary { background: var(--midnight); color: var(--white); }
.section-light .btn-primary:hover, .split-body .btn-primary:hover { background: var(--police); }
.btn-ghost { border-color: rgba(247,249,252,.45); color: var(--bone); }
.btn-ghost:hover { border-color: var(--bone); background: rgba(247,249,252,.09); }
.btn-dark { background: var(--midnight); color: var(--white); }
.btn-dark:hover { background: var(--police); }
.btn-outline { border-color: var(--gunmetal); color: var(--ink); }
.btn-outline:hover { background: var(--obsidian); color: var(--bone); border-color: var(--obsidian); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.text-link {
  background: none; border: 0; padding: 0 0 3px; color: inherit; text-decoration: none; cursor: pointer;
  font: 700 .86rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--tan);
}
.text-link::after { content: " \2192"; }

/* ---------- Form controls ---------- */
label { display: grid; gap: 7px; font-size: .86rem; font-weight: 500; }
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0; font: 400 .95rem var(--body);
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--tan); }
input:user-invalid { border-color: #C0685C; }

/* ---------- 3. Top bar ---------- */
.topbar {
  background: var(--midnight); color: var(--muted-dark);
  font: 500 .7rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule-dark);
}
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--topbar-h); }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--bone); }
.topbar-social, .topbar-links { display: flex; gap: 18px; flex: 1; }
.topbar-links { justify-content: flex-end; }
.topbar-claim { color: var(--bone); white-space: nowrap; display: flex; align-items: center; gap: 9px; }
.topbar-claim .star { width: .72em; color: var(--tan); }
@media (max-width: 900px) {
  .topbar-social, .topbar-links { display: none; }
  .topbar-row { justify-content: center; }
  .topbar-claim { white-space: normal; text-align: center; font-size: .62rem; letter-spacing: .1em; padding-block: 7px; }
}

.star { display: inline-block; aspect-ratio: 1; background: currentColor; flex: none;
  clip-path: polygon(50% 3%, 61% 35%, 95% 35%, 68% 56%, 78% 89%, 50% 69%, 22% 89%, 32% 56%, 5% 35%, 39% 35%); }

/* ---------- 4. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--midnight) 97%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-dark);
  color: var(--bone);
}
.header-row { display: flex; align-items: center; gap: 20px; height: var(--header-h); transition: height .22s ease; }
.site-header.shrunk .header-row { height: 62px; }
.site-header.shrunk .brand img { height: 40px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 54px; width: auto; transition: height .22s ease; }
.main-nav { display: flex; gap: clamp(10px, 1.7vw, 26px); margin-inline: auto; }
.main-nav a {
  font: 600 .92rem/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.main-nav a:hover { border-color: var(--tan); }
.header-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.tool {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; color: inherit; text-decoration: none;
}
.tool:hover { color: var(--tan); }
.tool svg { width: 21px; height: 21px; }
.tool-count {
  position: absolute; top: 5px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--emergency-ink); color: var(--white);
  font: 600 .66rem/1 var(--body); letter-spacing: 0;
}
.tool-count[hidden] { display: none; }
.nav-toggle { display: none; }
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .nav-toggle { display: grid; }
  .brand { margin-inline: auto 0; }
  .header-row { gap: 4px; }
}

/* Fullscreen drawer menu on phones */
.nav-drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--midnight);
  display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(-100%); transition: transform .26s ease; visibility: hidden;
}
body.nav-open .nav-drawer { transform: none; visibility: visible; }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); border-bottom: 1px solid var(--rule-dark); color: var(--bone); }
.nav-drawer-head img { height: 40px; }
.nav-drawer nav { display: grid; align-content: start; padding: 4px var(--gutter); overflow-y: auto; }
.nav-drawer nav a {
  font: 800 1.8rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em;
  color: var(--bone); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--rule-dark);
}
.nav-drawer-foot { padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-dark);
  display: flex; gap: 20px; flex-wrap: wrap;
  font: 600 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.nav-drawer-foot a { text-decoration: none; }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative; background: var(--midnight);
  min-height: clamp(560px, 78vh, 800px); display: grid; align-items: center; overflow: clip;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain);
}
/* The diagonal twill gave the hero texture back when it was an empty dark
   ground. Over a photograph it is just a hatch of lines across the
   picture, so a hero with a photo keeps only the film grain, which stops
   the dark gradients banding. */
.hero.has-photo::after { background-image: none; }
.hero.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(94deg, var(--obsidian) 0 24%, rgba(8,10,11,.88) 46%, rgba(8,10,11,.55) 76%, rgba(7,16,28,.78)),
    linear-gradient(0deg, var(--obsidian), transparent 42%);
}
.hero:not(.has-photo) { background-image:
  radial-gradient(1100px 620px at 78% 34%, rgba(20,100,165,.3), transparent 68%),
  linear-gradient(180deg, var(--midnight), #05121F); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px;
  align-items: center; padding-block: clamp(56px, 8vw, 104px); }
.hero-copy { color: var(--bone); }
.hero h1 { margin-bottom: 20px; }
.hero h1 span { display: block; }
.hero h1 .thin { font-weight: 600; color: var(--tan); }
.hero-sub {
  font: 600 .82rem/1.9 var(--body); letter-spacing: .24em; text-transform: uppercase;
  color: var(--soft); margin: 0 0 30px; max-width: 34ch;
}
.hero-sub b { display: block; color: var(--bone); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-lines { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 38px 0 0; }
.hero-lines a { display: flex; align-items: center; gap: 9px; min-height: 34px; text-decoration: none; white-space: nowrap;
  font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.hero-lines a::before { content: ""; width: 18px; height: 3px; background: var(--line); }
.hero-lines a:hover { color: var(--bone); }

.hero-creed { justify-self: end; display: grid; gap: 2px; padding-left: 26px; border-left: 2px solid var(--tan); }
.hero-creed span { font: 800 clamp(1.3rem, 2vw, 1.9rem)/1.14 var(--display); text-transform: uppercase; color: var(--bone); letter-spacing: .03em; }
.hero-creed span:last-child { color: var(--tan); }
/* The creed block is gone from the hero, so the grid is a single column
   at every width and the copy keeps its own measure. */
.hero-grid { grid-template-columns: 1fr; }
.hero-copy { max-width: 62ch; }

/* ---------- 6. Trust bar ---------- */
.trust { background: var(--navy); color: var(--bone); border-bottom: 1px solid var(--rule-dark); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; row-gap: 1px; align-items: start;
  padding: 26px 24px; border-left: 1px solid var(--rule-dark); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item svg { grid-row: span 2; width: 30px; height: 30px; color: var(--tan); margin-top: 2px; }
.trust-item b { font: 700 1rem/1.15 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.trust-item span { font-size: .84rem; color: var(--muted-dark); }
@media (max-width: 960px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 20px 16px 20px 0; border-left: 0; border-top: 1px solid var(--rule-dark); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 460px) { .trust-item { grid-template-columns: 1fr; } .trust-item svg { display: none; } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(60px, 7.5vw, 112px); }
.section-light { background: var(--bone); color: var(--ink); }
.section-dark { background: var(--midnight); color: var(--bone); background-image: var(--grain); }
.section-graphite { background: var(--navy); color: var(--bone); background-image: var(--grain); }
.section-head { margin-bottom: 40px; }
.section-head h2 + .lede, .section-head h2 + .section-sub { margin-top: 14px; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.section-sub { font: 600 .76rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); margin: 0; }
.section-light .section-sub { color: var(--muted); }

/* ---------- 7. Shop by profession ---------- */
/* Ten ways in: eight professions plus Off Duty Gear and Accessories.
   Five across in two rows rather than ten in one — at ten columns each
   card is too narrow for the photograph to read. */
.prof-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.prof-card { aspect-ratio: 3 / 4; }
.prof-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 5; padding: 14px 12px; text-decoration: none; overflow: hidden;
  background: var(--navy); color: var(--white);
}
.prof-card-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--navy); }
.prof-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.prof-card-art { position: absolute; left: 50%; top: 36%; translate: -50% -50%; width: 62%; transition: transform .45s ease; z-index: 1; }
.prof-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(7,24,44,0) 40%, rgba(7,24,44,.94));
  transition: background .3s ease;
}
.prof-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--prof-texture); background-size: cover; background-position: center;
  opacity: .16; mix-blend-mode: luminosity;
}
/* The blurb and the heading sit above the gradient. The media wrapper is
   also a span, so it has to be excluded or the photo lands on top of the
   overlay and the label stops being readable. */
.prof-card > strong, .prof-card > span:not(.prof-card-media) { position: relative; z-index: 3; }
/* The photo fills the card, so it only scales. The translate below
   belongs to the drawn emblem, which is centred by its own offset —
   applying it to a full-bleed image shoves the picture up and left.

   Guarded on a real pointer: a touch device has no hover, but it does
   leave :hover stuck on the last thing tapped, which would freeze one
   card enlarged until you tap elsewhere. */
@media (hover: hover) {
  .prof-card:hover .prof-card-media img { transform: scale(1.04); }
}
@media (hover: hover) { .prof-card:hover .prof-card-art { transform: translate(-50%, -50%) scale(1.05); } }
.prof-card:hover::before { background: linear-gradient(180deg, rgba(7,24,44,.22) 32%, rgba(7,24,44,.96)); }
.prof-card strong { font: 800 .98rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.prof-card strong em { font-style: normal; color: var(--tan); opacity: 0; translate: -6px 0; transition: opacity .25s ease, translate .25s ease; flex: none; }
.prof-card:hover strong em { opacity: 1; translate: 0 0; }
/* Hides the blurb on the narrow cards — but never the photo wrapper,
   which is a span too. Without the exclusion no profession photo can
   ever appear. */
.prof-card > span:not(.prof-card-media) { display: none; }

@media (max-width: 1200px) { .prof-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .prof-grid { grid-template-columns: repeat(3, 1fr); } .prof-card { aspect-ratio: 4 / 5; } .prof-card strong { font-size: 1.2rem; } }
@media (max-width: 640px) {
  /* horizontal rail on phones, per spec */
  .prof-grid {
    grid-auto-flow: column; grid-auto-columns: 46%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); gap: 10px;
  }
  .prof-grid::-webkit-scrollbar { display: none; }
  .prof-card { scroll-snap-align: start; }
}

/* ---------- Product cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 22px; }
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.product-grid.cols-6 { grid-template-columns: repeat(6, 1fr); gap: 26px 14px; }
.product-grid.cols-6 .product-name { font-size: .95rem; }
.product-grid.cols-6 .price { font-size: .88rem; }
@media (max-width: 1200px) { .product-grid.cols-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .product-grid, .product-grid.cols-4, .product-grid.cols-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .product-grid, .product-grid.cols-4, .product-grid.cols-6 { gap: 24px 12px; } }
.product { display: flex; flex-direction: column; }
.product-media {
  position: relative; aspect-ratio: 1 / 1.14; width: 100%; padding: 0; border: 0; overflow: hidden;
  background: var(--bone); display: block;
}
.product-media .shot { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  transition: opacity .3s ease, transform .5s ease; }
.product-media .shot svg, .product-media .shot img { width: 100%; height: 100%; object-fit: cover; }
/* The hover image must never swallow a tap on touch devices. */
.product-media .shot-b { opacity: 0; pointer-events: none; }
.product-media:hover .shot-a { opacity: 0; }
.product-media:hover .shot-b { opacity: 1; }
.product-media:hover .shot { transform: scale(1.03); }
.badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; gap: 5px; justify-items: start; }
.badge { background: var(--obsidian); color: var(--bone); padding: 6px 9px;
  font: 600 .64rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.badge-tan { background: var(--police); color: var(--white); }
.badge-out { background: transparent; color: var(--obsidian); box-shadow: inset 0 0 0 1.5px var(--obsidian); }
.wish {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px;
  display: grid; place-items: center; border: 0; background: rgba(247,249,252,.9); color: var(--ink);
}
.wish svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wish[aria-pressed="true"] { background: var(--midnight); color: var(--emergency); }
.wish[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; }
.product-meta { padding-top: 13px; display: grid; gap: 5px; justify-items: start; }
.section-dark .product-meta, .section-graphite .product-meta { color: var(--bone); }
.ship-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 .66rem/1 var(--body);
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.section-dark .ship-tag, .section-graphite .ship-tag { color: var(--muted-dark); }
.ship-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ship-ok i { background: #5C9E7A; }
.ship-warn i { background: var(--steel-light); }
.ship-red i { background: #C0685C; }
.product-name { font: 700 1.18rem/1.12 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.product-line { font: 500 .72rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; }
.section-dark .product-line, .section-graphite .product-line { color: var(--muted-dark); }
.product-line::before { content: ""; width: 14px; height: 3px; background: var(--line); flex: none; }
.product-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin-top: 2px; }
.price { font-weight: 600; font-size: .98rem; }
.price s { color: var(--muted); font-weight: 400; margin-left: 5px; }
.section-dark .price s, .section-graphite .price s { color: var(--muted-dark); }
.dots { display: flex; gap: 4px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }
.section-dark .dots i, .section-graphite .dots i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.empty { grid-column: 1 / -1; padding: 44px 0; color: var(--muted); }
.section-dark .empty, .section-graphite .empty { color: var(--muted-dark); }

/* ---------- Shop filters ---------- */
.filters { display: grid; gap: 2px; margin-bottom: 24px; padding: 20px 22px; background: var(--navy); border: 1px solid var(--rule-dark); }
.section-light .filters { background: #fff; border-color: var(--rule); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 6px 0; }
.filter-label { flex: none; width: 96px; font: 600 .68rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); }
.section-light .filter-label { color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 38px; padding: 0 14px; border-radius: 0; background: transparent;
  border: 1px solid var(--gunmetal); color: var(--bone);
  font: 600 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-light .chip { border-color: var(--rule); color: var(--ink); }
.chip i { width: 12px; height: 4px; background: var(--line); display: block; flex: none; }
.chip:hover { border-color: var(--tan); }
.chip[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--midnight); }
.chip-toggle { margin-left: auto; }
.sort { display: flex; align-items: center; gap: 10px; font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.section-light .sort { color: var(--muted); }
.sort select { min-height: 42px; padding: 0 12px; border: 1px solid var(--gunmetal); background: var(--navy); border-radius: 0;
  font: 400 .92rem var(--body); text-transform: none; letter-spacing: 0; color: var(--bone); }
.section-light .sort select { border-color: var(--rule); background: #fff; color: var(--ink); }
.result-count { color: var(--muted-dark); font-size: .84rem; margin-bottom: 20px; letter-spacing: .06em; text-transform: uppercase; }
.section-light .result-count { color: var(--muted); }
@media (max-width: 680px) { .filter-label { width: 100%; } .chip-toggle { margin-left: 0; } }

/* ---------- 9. Bundle banner ---------- */
.bundle-banner { background: var(--navy); color: var(--bone); background-image: var(--grain); border-block: 1px solid var(--rule-dark); }
.bundle-row { display: flex; align-items: center; gap: 28px; padding-block: 26px; }
.bundle-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.bundle-copy p { margin: 6px 0 0; color: var(--muted-dark); font: 600 .74rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.bundle-strip { display: flex; gap: 8px; margin-left: auto; }
.bundle-strip > * { width: 86px; aspect-ratio: 1 / 1.14; background: var(--bone); overflow: hidden; flex: none; }
.bundle-strip svg, .bundle-strip img { width: 100%; height: 100%; object-fit: cover; }
.bundle-row .btn { flex: none; }
@media (max-width: 900px) { .bundle-strip { display: none; } .bundle-row { flex-wrap: wrap; gap: 18px; } .bundle-row .btn { width: 100%; } }

/* ---------- Drops ---------- */
.drop-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.drop-media { background: var(--bone); aspect-ratio: 1 / 1.14; overflow: hidden; }
.drop-media svg, .drop-media img { width: 100%; height: 100%; object-fit: cover; }
.drop-grid .steps-row { margin: 24px 0 20px; }
.drop-grid .pd-price { font: 700 1.5rem/1 var(--display); margin: 0 0 20px; }
@media (max-width: 860px) { .drop-grid { grid-template-columns: 1fr; } .drop-media { max-width: 320px; } }

/* ---------- 10. American made pair ---------- */
.made-pair { display: grid; grid-template-columns: 1fr 2fr; gap: 2px; background: var(--midnight); }
.made-panel { position: relative; min-height: 380px; display: grid; align-content: end; padding: clamp(28px, 3.4vw, 46px); overflow: hidden; color: var(--bone); }
.made-panel-media { position: absolute; inset: 0; z-index: 0; }
.made-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.made-panel-ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #0A2039 0 14px, #0E2A49 14px 28px); }
.made-panel-ph svg { width: 22%; max-width: 150px; opacity: .2; }
.made-panel::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,24,44,.38) 22%, rgba(7,24,44,.96)); }
.made-panel > * { position: relative; z-index: 2; }
.made-panel h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 10px; }
.made-panel p { color: var(--soft); font-size: .96rem; max-width: 42ch; }
.made-panel .btn { justify-self: start; margin-top: 12px; }
.made-panel-wide { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.made-claims { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; text-align: right;
  font: 600 .7rem/1 var(--body); letter-spacing: .15em; text-transform: uppercase; color: var(--muted-dark); }
@media (max-width: 1000px) { .made-pair { grid-template-columns: 1fr; } .made-panel-wide { grid-template-columns: 1fr; } .made-claims { text-align: left; } }

/* ---------- Split (custom form) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split-media { position: relative; min-height: 440px; background: var(--gunmetal); overflow: hidden; }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #0A2039 0 14px, #0E2A49 14px 28px); }
.split-ph svg { width: 26%; max-width: 160px; opacity: .22; }
.split-body { padding: clamp(34px, 5vw, 76px); display: grid; align-content: center; }
.steps-row { display: flex; flex-wrap: wrap; margin: 26px 0 30px; border-top: 1px solid var(--rule-dark); }
.section-light .steps-row { border-color: var(--rule); }
.steps-row span {
  flex: 1 1 0; min-width: 82px; padding: 16px 0 0; position: relative;
  font: 700 .8rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark);
}
.section-light .steps-row span { color: var(--muted); }
.steps-row span::before { content: ""; position: absolute; top: -1px; left: 0; width: 26px; height: 3px; background: var(--tan); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-media { min-height: 300px; } }

/* ---------- 11. Brand story ---------- */
.story-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px;
  border-top: 1px solid var(--rule-dark); padding-top: 26px; }
.section-light .story-stats { border-color: var(--rule); }
.story-stats div { display: grid; gap: 4px; }
.story-stats b { font: 800 clamp(2rem, 3.6vw, 3rem)/1 var(--display); color: var(--tan); }
.section-light .story-stats b { color: var(--tan-ink); }
.story-stats span { font: 500 .72rem/1.35 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.section-light .story-stats span { color: var(--muted); }
@media (max-width: 760px) { .story-stats { grid-template-columns: 1fr 1fr; gap: 24px 16px; } }

/* ---------- 12. Feature panels ---------- */
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.panel {
  position: relative; display: grid; align-content: center; gap: 8px; min-height: 230px;
  padding: 28px; padding-right: 44%;
  background: var(--navy); color: var(--white); overflow: hidden; text-decoration: none;
  border-top: 4px solid var(--tan); transition: background-color .2s ease;
}
.panel-media { position: absolute; inset: 0 0 0 52%; z-index: 0; overflow: hidden; }
.panel-media img { width: 100%; height: 100%; object-fit: cover; }
.panel-media-ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #0A2039 0 12px, #0E2A49 12px 24px); }
.panel-media-ph svg { width: 40%; max-width: 110px; opacity: .22; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: var(--grain);
  background-color: linear-gradient(90deg, var(--graphite) 55%, transparent); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--navy) 48%, rgba(11,35,65,.62) 66%, transparent); }
.panel > *:not(.panel-media) { position: relative; z-index: 2; }
.panel p { color: var(--muted-dark); font-size: .92rem; margin: 0; }
.panel .text-link { justify-self: start; margin-top: 14px; }
.panel:hover { background: #10304F; }
@media (max-width: 900px) { .panels { grid-template-columns: 1fr; } .panel { min-height: 190px; padding-right: 40%; } }

/* ---------- 13. Field tested ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { aspect-ratio: 1; background: var(--gunmetal); overflow: hidden; position: relative; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tile:hover img { transform: scale(1.04); }
.tile-empty { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #0A2039 0 12px, #0E2A49 12px 24px); }
.tile-empty svg { width: 32%; opacity: .22; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } }

/* Police is a photographed badge where the rest are drawn emblems, so it
   needs its own sizing. Without these it would inherit `.tile img`, which is
   the rule for a customer photograph and would crop it to a full-bleed
   square. It also sits at a higher opacity than the drawn marks: at .22 a
   photograph turns to mud, where a flat two-colour emblem still reads. */
.art-photo { display: block; width: 100%; height: auto; object-fit: contain; }
.tile-empty .art-photo { width: 30%; height: auto; opacity: .55; }
img.prof-card-art { width: 44%; height: auto; }
.page-head-prof .prof-emblem .art-photo { width: auto; height: 100%; margin-inline: auto; }

/* A readable list of sentences. `.join-perks` is a wrapping row of short
   uppercase chips, which turns full sentences into an unreadable mosaic, so
   the support pages use this instead. */
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.plain-list li { position: relative; padding-left: 18px; line-height: 1.65; font-size: .94rem; }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 2px; background: var(--police);
}
.plain-list b { color: inherit; font-weight: 600; }

/* ---------- 13a. Order lookup result ---------- */
.track-card { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule); }
.track-card h3 { font-size: 1.35rem; margin-bottom: 4px; }
.track-card h4 {
  font: 600 .72rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 24px 0 10px;
}
.track-items { margin-top: 16px; }

/* Newest first, because the question is "where is it now" and the answer
   should not be at the bottom of a list. */
.track-timeline { list-style: none; padding: 0; margin: 0; }
.track-step {
  position: relative; padding: 0 0 18px 22px; border-left: 1px solid var(--rule);
}
.track-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.track-step::before {
  content: ""; position: absolute; left: -5px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--rule);
}
.track-step:first-child::before { background: var(--police); }
.track-step b { display: block; font-size: .96rem; }
.track-step p { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.track-when { display: block; font-size: .78rem; color: var(--muted); letter-spacing: .04em; }

/* ---------- 13b. Support cards (Help, Track order) ---------- */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.help-card {
  display: block; text-decoration: none; padding: 24px 22px 26px;
  background: rgba(247, 249, 252, .04); border: 1px solid var(--rule-dark);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.help-card h3 { font-size: 1.02rem; margin-bottom: 8px; color: var(--bone); }
.help-card p { color: var(--steel); font-size: .92rem; line-height: 1.6; }
/* The lift is hover-only: on a touch screen :hover sticks after a tap and
   the card stays raised, which reads as a bug. */
@media (hover: hover) {
  .help-card:hover { border-color: var(--police); background: rgba(20, 100, 165, .1); transform: translateY(-2px); }
}
.help-card:focus-visible { outline: 2px solid var(--police-light, var(--police)); outline-offset: 2px; }
/* Four cards in a three-column grid leave one orphan on its own row, so
   the four-card section asks for two columns and gets a tidy 2 by 2. */
.help-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .help-grid { grid-template-columns: 1fr; } }

/* ---------- 14. Reviews ---------- */
.reviews-empty { border: 1px dashed var(--rule); padding: clamp(28px, 5vw, 54px); text-align: center; max-width: 720px; margin-inline: auto; }
.reviews-empty h3 { margin-bottom: 12px; }
.reviews-empty p { color: var(--muted); margin: 0 auto; max-width: 54ch; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { background: #fff; border: 1px solid var(--rule); padding: 24px; display: grid; gap: 8px; align-content: start; }
.stars { display: flex; gap: 3px; color: var(--tan-ink); }
.stars .star { width: 14px; }
.review-who { font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }

/* ---------- 15. Newsletter ---------- */
.join { background: var(--navy); color: var(--bone); background-image: var(--grain); }
.join-grid { display: grid; grid-template-columns: auto minmax(300px, 1fr) auto; gap: clamp(20px, 2.4vw, 40px); align-items: center;
  padding-block: clamp(40px, 4.4vw, 62px); }
.join h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.join p { color: var(--muted-dark); margin: 8px 0 0; font-size: .92rem; max-width: 38ch; }
.join-form { display: flex; gap: 10px; }
.join-form input { flex: 1; min-width: 200px; min-height: 54px; padding: 0 16px; background: var(--midnight); color: var(--white);
  border: 1px solid var(--gunmetal); border-radius: 0; font: 400 .98rem var(--body); }
.join-form input::placeholder { color: var(--muted-dark); }
.join-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0;
  font: 600 .66rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.join-perks li { display: flex; align-items: center; gap: 8px; }
.join-perks .star { width: 9px; color: var(--tan); }
@media (max-width: 1100px) { .join-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .join-form { flex-direction: column; } }

/* ---------- 16. Footer ---------- */
.site-footer { background: var(--footer); color: var(--bone); padding-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 34px; padding-bottom: 46px; }
.footer-brand img { height: 92px; margin-bottom: 18px; }
.footer-brand p { color: var(--muted-dark); font-size: .88rem; max-width: 34ch; }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rule-dark); }
.footer-social a:hover { border-color: var(--tan); color: var(--tan); }
.footer-social svg { width: 17px; height: 17px; }
.site-footer h4 { font-size: .84rem; letter-spacing: .18em; color: var(--tan); margin-bottom: 14px; font-weight: 700; }
.site-footer nav { display: grid; align-content: start; gap: 1px; }
.site-footer nav a { text-decoration: none; color: var(--muted-dark); padding: 6px 0; font-size: .86rem; }
.site-footer nav a:hover { color: var(--bone); }
.footer-creed { border-top: 1px solid var(--rule-dark); padding-block: 26px; text-align: center;
  font: 800 clamp(1.3rem, 3vw, 2.2rem)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.footer-base { border-top: 1px solid var(--rule-dark); padding-block: 22px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 6px 24px; font-size: .76rem; color: var(--muted-dark); }
.footer-base nav { display: flex; gap: 20px; }
.footer-base nav a { text-decoration: none; }
.footer-base nav a:hover { color: var(--bone); }
.footer-tag { font: 600 .72rem/1.6 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); margin-top: 16px; }
.footer-tag b { display: block; color: var(--tan); font-weight: 600; }
.footer-base p { margin: 0; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- 17. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes rise { from { opacity: 0; transform: translateY(20px); } }
    .reveal { animation: rise auto ease-out backwards; animation-timeline: view(); animation-range: entry 2% entry 58%; }
  }
  @keyframes fade-in { from { opacity: 0; } }
  .hero-grid { animation: fade-in .7s ease-out both; }
}

/* ---------- Dialogs ---------- */
dialog { border: 0; padding: 0; color: var(--ink); background: var(--bone); max-width: none; }
dialog::backdrop { background: rgba(7,16,28,.78); backdrop-filter: blur(3px); }
.icon-close { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.8rem; line-height: 1; }
.icon-close:hover { color: var(--tan-ink); }

.modal { width: min(1020px, calc(100% - 20px)); max-height: calc(100dvh - 20px); overflow: auto; border-top: 3px solid var(--tan); }
.modal > .icon-close { position: absolute; top: 6px; right: 6px; z-index: 4; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; }
.pd-media { background: #fff; min-height: 340px; }
.pd-media svg, .pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-info { padding: clamp(24px, 3.4vw, 44px); }
.pd-info h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); padding-right: 34px; }
.pd-price { font-size: 1.32rem; font-weight: 600; margin: 12px 0 14px; }
.pd-price s { color: var(--muted); font-weight: 400; font-size: 1.05rem; margin-left: 6px; }
.pd-ship { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 18px; font-size: .9rem; }
.pd-ship b { font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.pd-ship span { color: var(--muted); }
.pd-facts { list-style: none; padding: 18px 0; margin: 0; display: grid; gap: 11px; border-block: 1px solid var(--rule); }
.pd-facts li { display: grid; gap: 1px; }
.pd-facts b { font: 600 .74rem/1.2 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.pd-facts span { font-size: .84rem; color: var(--muted); }
.opt { border: 0; padding: 0; margin: 20px 0 0; }
.opt legend { font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 11px;
  padding: 0; display: flex; align-items: baseline; gap: 12px; }
.opt legend span { color: var(--muted); letter-spacing: .04em; }
.opt legend .text-link { font-size: .66rem; }
.swatches, .sizes, .profs { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--bone); box-shadow: 0 0 0 1px var(--rule); background: var(--c); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--police); }
.size { min-width: 50px; min-height: 44px; padding: 0 12px; background: #fff; border: 1px solid var(--rule); border-radius: 0; font-weight: 500; font-size: .92rem; }
.size[aria-pressed="true"] { background: var(--midnight); color: var(--white); border-color: var(--midnight); }
.size[disabled] { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.prof-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; background: #fff;
  border: 1px solid var(--rule); border-radius: 0; font: 600 .76rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.prof-pill i { width: 11px; height: 4px; background: var(--line); flex: none; }
.prof-pill[aria-pressed="true"] { background: var(--midnight); border-color: var(--midnight); color: var(--white); }
.pd-buy { display: flex; gap: 10px; margin-top: 26px; }
.pd-buy .btn { flex: 1; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); background: #fff; }
.qty button { width: 40px; height: 50px; border: 0; background: transparent; font-size: 1.2rem; }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.pd-specs { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pd-specs h3 { font-size: 1rem; letter-spacing: .1em; margin-bottom: 11px; }
.pd-specs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pd-specs li { position: relative; padding-left: 20px; font-size: .87rem; color: var(--muted); }
.pd-specs li::before { content: ""; position: absolute; left: 0; top: .6em; width: 11px; height: 2px; background: var(--tan); }
@media (max-width: 760px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-media { min-height: 0; aspect-ratio: 4 / 3; }
  .pd-buy { position: sticky; bottom: 0; z-index: 3; margin-inline: calc(clamp(24px, 3.4vw, 44px) * -1);
    padding: 12px clamp(24px, 3.4vw, 44px) calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bone) 95%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--rule); }
}

.modal-sm { width: min(540px, calc(100% - 20px)); padding: clamp(24px, 4vw, 38px); }
.modal-sm h2 { font-size: 2rem; margin-bottom: 18px; }
.demo-note { background: #fff; border-left: 3px solid var(--tan); padding: 14px 16px; font-size: .9rem; margin: 18px 0; }
.co-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.co-line.total { font-weight: 700; font-size: 1.05rem; border-bottom: 0; }
.size-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.size-table th, .size-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); font-size: .88rem; }
.size-table th { font: 600 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; background: var(--bone-2); }

/* The same table on a dark section. The modal's pale header band is
   invisible here — white type on a white strip — so the dark page takes
   its own header and rules. */
.size-table-page { max-width: 560px; }
.size-table-page th, .size-table-page td { border-bottom-color: var(--rule-dark); color: var(--bone); }
.size-table-page th { background: rgba(247, 249, 252, .06); color: var(--steel); }
.size-table-page td:first-child { font-weight: 600; }
.form-note { font-size: .82rem; color: var(--muted); margin: 0; }

/* Cart drawer */
.drawer { margin: 0 0 0 auto; width: min(430px, 100%); height: 100dvh; max-height: none; }
.drawer[open] { display: flex; flex-direction: column; animation: slide .26s ease-out; }
@keyframes slide { from { transform: translateX(100%); } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 12px 16px 22px;
  background: var(--midnight); color: var(--white); }
.drawer-head h2 { font-size: 1.55rem; letter-spacing: .06em; }
.ship-meter { padding: 15px 22px; background: #fff; border-bottom: 1px solid var(--rule); }
.ship-meter p { margin: 0 0 9px; font-size: .84rem; font-weight: 500; }
.meter { height: 5px; background: var(--bone-2); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: var(--emergency); transition: width .3s ease; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 22px; }
.cart-empty { text-align: center; padding: 56px 0; color: var(--muted); }
.cart-empty .btn { margin-top: 14px; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.line-thumb { width: 72px; height: 82px; background: #fff; overflow: hidden; }
.line-thumb svg, .line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.line-name { font: 700 1rem/1.12 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.line-opts { font-size: .8rem; color: var(--muted); margin: 3px 0 9px; }
.line .qty button { width: 32px; height: 32px; font-size: 1rem; }
.line-side { display: grid; align-content: space-between; justify-items: end; font-size: .92rem; }
.remove { border: 0; background: transparent; color: var(--muted); font-size: .76rem; text-decoration: underline; padding: 6px 0; }
.drawer-foot { padding: 16px 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: #fff; }
.upsell { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.upsell-thumb { width: 50px; height: 56px; background: var(--bone); flex: none; overflow: hidden; }
.upsell-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.upsell-body { flex: 1; min-width: 0; }
.upsell-body b { display: block; font: 700 .9rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.upsell-body span { font-size: .78rem; color: var(--muted); }
.upsell button { flex: none; min-height: 36px; padding: 0 12px; background: var(--obsidian); color: var(--bone); border: 0;
  font: 600 .68rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.totals { margin: 0 0 14px; }
.totals div { display: flex; justify-content: space-between; padding: 3px 0; font-size: .92rem; }
.totals dd { margin: 0; }
.totals .grand { font-weight: 700; font-size: 1.06rem; padding-top: 9px; margin-top: 7px; border-top: 1px solid var(--rule); }

/* Search */
.search-modal { width: min(680px, calc(100% - 20px)); margin-top: 8vh; }
.search-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.search-head svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.search-head input { flex: 1; min-width: 0; border: 0; background: none; font: 500 1.1rem var(--body); outline: none; }
.search-results { max-height: 58vh; overflow-y: auto; padding: 6px 0 10px; }
.search-hit { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; background: none; border: 0; text-align: left; }
.search-hit:hover { background: var(--bone-2); }
.search-thumb { width: 46px; height: 52px; background: #fff; flex: none; overflow: hidden; }
.search-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.search-hit b { display: block; font: 700 .96rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.search-hit span { font-size: .78rem; color: var(--muted); }
.search-empty { padding: 24px 16px; color: var(--muted); font-size: .9rem; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 26px; translate: -50% 18px; background: var(--obsidian); color: var(--bone);
  padding: 13px 20px; border-left: 3px solid var(--tan); font-size: .9rem; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, translate .2s ease; z-index: 120; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; translate: -50% 0; }

/* ---------- 18. Mobile hero, per spec: 4:5 image, copy underneath ---------- */
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero.has-photo { display: block; }
  .hero.has-photo .hero-photo { position: relative; aspect-ratio: 4 / 5; height: auto; }
  .hero.has-photo::before { background: linear-gradient(180deg, rgba(7,24,44,.22) 0 38%, rgba(7,24,44,.97)); }
  .hero.has-photo .hero-grid { margin-top: -36%; padding-block: 0 40px; }
  .hero:not(.has-photo) .hero-grid { padding-block: 52px 44px; }
  .hero-copy { max-width: none; }
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }
}


/* =====================================================================
   LOADING SCREEN
   Navy, cold light, one horizontal bar. It leaves with a light wash, the
   way a light bar sweeps a wall, not with a curtain or a garage door.
   ===================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background-color: var(--midnight);
  background-image: var(--grain), var(--twill),
    radial-gradient(900px 600px at 50% 42%, rgba(11,35,65,.9), transparent 70%);
  color: var(--ice);
  overflow: hidden;
  transition: opacity .42s ease, visibility .42s;
}
/* Failsafe: if the script never runs, the screen still clears itself. */
.loader { animation: loader-failsafe 0s 6s forwards; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-photo { position: absolute; inset: 0; z-index: 0; }
.loader-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.loader-photo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 520px at 50% 44%, rgba(7,24,44,.55), rgba(7,24,44,.94) 78%); }

.loader-core { position: relative; z-index: 2; display: grid; justify-items: center; gap: 0;
  padding-inline: var(--gutter); text-align: center; }
.loader-logo { width: min(240px, 54vw); height: auto; }
.loader-tagline {
  margin: 20px 0 0; font: 600 .76rem/1.6 var(--body); letter-spacing: .26em; text-transform: uppercase;
  color: var(--cool); max-width: 26ch;
}
.loader-bar { width: min(260px, 62vw); height: 2px; margin: 30px 0 14px; background: rgba(199,208,218,.22); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--emergency);
  box-shadow: 0 0 10px rgba(21,151,244,.6); transition: width .28s ease; }
.loader-msg { margin: 0; font: 600 .66rem/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--steel-light); }

.loader-corner { position: absolute; bottom: 26px; z-index: 2; margin: 0;
  font: 600 .6rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dark); }
.loader-left { left: var(--gutter); }
.loader-right { right: var(--gutter); }

/* The light wash: one cold sweep across the screen as it hands over. */
.loader-wash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 32%, rgba(21,151,244,.3) 46%, rgba(255,255,255,.55) 50%, rgba(21,151,244,.3) 54%, transparent 68%);
  transform: translateX(-60%); }
.loader.is-washing .loader-wash { opacity: 1; animation: light-wash .42s ease-out forwards; }
@keyframes light-wash { to { transform: translateX(60%); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  @keyframes loader-rise { from { opacity: 0; transform: translateY(14px); } }
  .loader-logo { animation: loader-rise .5s ease-out both; }
  .loader-tagline { animation: loader-rise .5s .12s ease-out both; }
  .loader-bar, .loader-msg { animation: loader-rise .5s .2s ease-out both; }
  .loader-corner { animation: loader-rise .5s .3s ease-out both; }
}
/* No motion preference, no loading screen at all. */
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

@media (max-width: 640px) {
  .loader-corner { bottom: 20px; font-size: .55rem; letter-spacing: .18em; }
  .loader-right { display: none; }
  .loader-left { left: 0; right: 0; text-align: center; }
  .loader-tagline { letter-spacing: .2em; font-size: .7rem; }
}


/* =====================================================================
   POLICE DIRECTION — additions
   ===================================================================== */

/* Utility bar: flag, claim, agency links */
/* The thin blue line flag is 1.71:1, not the 1.5:1 the drawn mark used, so
   the height follows the width instead of being fixed, or it squashes. The
   outline keeps the black field from sinking into the navy bar. */
.topbar-claim .flag {
  width: 20px; height: auto; flex: none; display: block;
  outline: 1px solid rgba(247, 249, 252, .2); outline-offset: -1px;
}
.topbar-row { justify-content: space-between; }
.topbar-claim { justify-content: flex-start; }

/* Hero: accent line above the headline, blue rule under the creed */
.hero-eyebrow {
  font: 600 .74rem/1 var(--body); letter-spacing: .26em; text-transform: uppercase;
  color: var(--steel); margin: 0 0 18px;
}
.hero h1 { margin-bottom: 20px; }
.hero-sub { text-transform: none; letter-spacing: normal; font: 400 1.05rem/1.6 var(--body); color: var(--steel); max-width: 40ch; }
.hero-creed { border-left: 0; padding-left: 0; }
.hero-creed span { font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: .12em; }
.hero-creed::after { content: ""; display: block; width: 58px; height: 2px; background: var(--police); margin-top: 14px; }

/* Profession card: blue underline grows on hover, per the brief */
.prof-card strong::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px;
  background: var(--police); transition: width .25s ease; }
.prof-card:hover strong::after { width: 34px; }
.prof-card strong { position: relative; }

/* Product feature bar under the buy button */
.pd-features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  padding: 20px 0 0; margin: 0; }
.pd-features li { display: flex; align-items: center; gap: 9px;
  font: 600 .68rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pd-features svg { width: 17px; height: 17px; color: var(--police); flex: none; }

/* Accordions */
.pd-accordion { margin-top: 24px; border-top: 1px solid var(--rule); }
.pd-accordion details { border: 0; border-bottom: 1px solid var(--rule); }
.pd-accordion summary { padding: 15px 30px 15px 0; font: 700 .82rem/1 var(--display);
  letter-spacing: .16em; text-transform: uppercase; }
.pd-accordion summary::after { content: "+"; position: absolute; right: 2px; top: 50%; translate: 0 -50%;
  font-size: 1.4rem; color: var(--police); }
.pd-accordion details[open] summary::after { content: "\2212"; }
.pd-accordion p, .pd-accordion ul { font-size: .9rem; color: var(--muted); margin: 0 0 15px; }
.pd-accordion ul { list-style: none; padding: 0; display: grid; gap: 5px; }
.pd-accordion li { position: relative; padding-left: 18px; }
.pd-accordion li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--police); }

/* You may also like */
.pd-also { padding: clamp(24px, 3.4vw, 44px); border-top: 1px solid var(--rule); background: var(--ice); }
.pd-also h3 { font-size: 1.1rem; letter-spacing: .14em; margin-bottom: 20px; }
.pd-also .product-media { background: var(--white); }
@media (max-width: 760px) { .pd-also .product-grid.cols-4 { grid-template-columns: 1fr 1fr; } }

/* Cart note and the secondary action */
.cart-note { font: 600 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.cart-note textarea { min-height: 58px; font-size: .9rem; text-transform: none; letter-spacing: normal; }
.cart-view { display: block; width: fit-content; margin: 14px auto 0; }

/* Links take the brand accent */
.section-light a:not(.btn):not(.text-link):not(.product-media):not(.tool) { color: var(--tan-ink); }

/* =====================================================================
   MULTI-PAGE

   The site is many pages now, each with its own URL. These are the
   pieces that only exist once a section stands on its own: the page
   header that replaces the homepage hero, the breadcrumb, and the
   product page, which uses the same markup as the quick view so both
   stay in step.
   ===================================================================== */

.page-head {
  background: var(--navy);
  color: var(--white);
  padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 6vw, 64px);
  border-bottom: 1px solid var(--rule-dark);
}
.page-eyebrow {
  font: 600 .7rem/1 var(--body);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--police-light);
  margin: 0 0 14px;
}
.page-head h1 {
  font: 800 clamp(2.1rem, 6vw, 3.6rem)/.98 var(--display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.page-sub {
  margin: 16px 0 0;
  max-width: 54ch;
  color: var(--muted-dark);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* A profession page leads with its own emblem, in its own accent. */
.page-head-prof .prof-emblem {
  width: 86px;
  height: 80px;
  margin-bottom: 20px;
}
.page-head-prof .prof-emblem svg { width: 100%; height: 100%; display: block; }
.page-head-prof .page-eyebrow { color: var(--line, var(--police-light)); }

/* Breadcrumb */
.crumbs {
  background: var(--ice);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  font-size: .82rem;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--police); text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 8px; color: var(--steel); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* The product page. .pd-grid is shared with the quick view, so only the
   page-level framing lives here.

   The dialog took its light surface from the `dialog` element rule. On a
   page there is no dialog, and body is charcoal, so the section has to
   paint its own ground or the type lands dark on dark. */
.pdp {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(32px, 5vw, 64px) 0;
}
.pdp .pd-grid { padding: 0; align-items: start; gap: clamp(24px, 4vw, 56px); }
.pdp .pd-media {
  aspect-ratio: 4 / 5;
  min-height: 0;
  border-radius: 2px;
  overflow: hidden;
  position: sticky;
  top: 96px;
}
.pdp .pd-info { padding: 0; }
.pdp .pd-info h1 {
  font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 6px 0 10px;
}
.pd-for {
  margin: 14px 0 0;
  font-size: .86rem;
  color: var(--muted);
}
.pd-also-page {
  padding: clamp(40px, 6vw, 80px) 0;
  border-top: 1px solid var(--rule);
  background: var(--ice);
  color: var(--ink);
}

/* One column on a phone, and the image stops sticking. */
@media (max-width: 860px) {
  .pdp .pd-grid { grid-template-columns: 1fr; }
  .pdp .pd-media { position: static; }
}

/* The card's image and name are links now, so a product can be opened in
   a new tab, shared, and followed by a crawler. Quick view stays for
   people who just want a look without leaving the grid. */
a.shot-a { display: block; cursor: pointer; }
a.product-name { color: inherit; text-decoration: none; }
a.product-name:hover { text-decoration: underline; text-underline-offset: 3px; }

.quick-view {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 8px;
  z-index: 3;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font: 600 .72rem/1 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s, translate .18s;
}
.product-media:hover .quick-view,
.quick-view:focus-visible { opacity: 1; translate: -50% 0; }

/* Touch devices get no hover, so the button would never appear. */
@media (hover: none) {
  .quick-view { display: none; }
}

a.search-hit { text-decoration: none; }

/* The nav marks where you are. */
.site-header a.is-current,
.nav-drawer a.is-current { color: var(--white); }
.site-header a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--emergency);
}
.site-header nav a { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .quick-view { transition: none; }
}

/* The accordion marker is absolutely positioned. Inside the dialog it
   anchored to .modal; on a page nothing was positioned, so it escaped to
   the viewport edge. The summary is its own anchor either way. */
.pd-accordion summary { position: relative; }

/* At phone width the buy row becomes a sticky bar, and inside the dialog it
   uses a negative inline margin to cancel .pd-info's padding and reach the
   dialog's edges. The product page gives .pd-info no padding of its own, so
   that same negative margin pulled the bar off the screen. Here the wrap
   supplies the gutter, so the bar keeps it. */
.pd-buy { flex-wrap: wrap; }
.pd-buy .btn { min-width: 0; }
.pdp .pd-buy { margin-inline: 0; }