/* Gunsmoke Firearms and More — concept. Type is on the 4px scale (STANDARDS §2). */
:root {
  --fs-12: 12px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;
  --fs-36: 36px; --fs-44: 44px; --fs-56: 56px; --fs-64: 64px; --fs-88: 88px;

  --fs-label: var(--fs-12);
  --fs-body: var(--fs-16);
  --fs-lead: var(--fs-20);
  --fs-h3: var(--fs-24);
  --fs-h2: var(--fs-32);
  --fs-hero: var(--fs-36);
  --fs-panel: var(--fs-36);

  --black: #0c0b0b;
  --coal: #161414;
  --steel: #232020;
  --line: #3a3434;
  --ink: #f3efe9;
  --muted: #b9b1a7;
  --red: #c9242c;
  --red-hot: #e0353d;
  --brass: #c8a25a;

  --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Karla', system-ui, sans-serif;
  --pad: 16px;
  --max: 1120px;
  --head: 64px;
  --radius: 12px;
}
@media (min-width: 600px) {
  :root { --fs-hero: var(--fs-44); --fs-h2: var(--fs-44); --fs-panel: var(--fs-44); --pad: 24px; }
}
@media (min-width: 1100px) {
  :root { --fs-hero: var(--fs-56); --fs-h2: var(--fs-56); --fs-panel: var(--fs-56); --fs-lead: var(--fs-24); --pad: 40px; --head: 72px; }
}
@media (min-width: 1800px) {
  :root { --fs-hero: var(--fs-64); --fs-h2: var(--fs-64); --fs-panel: var(--fs-64); --fs-body: var(--fs-20); --fs-lead: var(--fs-28); --fs-h3: var(--fs-28); --max: 1520px; --head: 88px; }
}

/* ===== Safari (iOS 26) bars — .claude/reference/reference-safari-ios26-bars.md, "the recipe".
   1. Every full-width background is a one-colour IMAGE (same colour on screen), so Safari shows the page through its
      see-through status strip and URL box instead of painting a flat bar.
   3. Flat colour on purpose while a dark hero (or the top of the page) covers the top: html.dark-zone, set by
      js/site.js. At scroll 0 the status strip sits above the page and an image there would give white.
   5. Anything pinned at a screen edge (call bar, header bar, open menu) also has a flat background-color under its
      image: Safari paints its bar FROM a pinned element and reads that colour.
   6. The open full-screen menu: flat colour on html/body (html.menu-open, set by js/menu.js).
   Steps 2 and 4 sit with the hero and the menu below. ===== */
:root {
  --img-black: linear-gradient(var(--black), var(--black));
  --img-coal: linear-gradient(var(--coal), var(--coal));
  --img-red: linear-gradient(var(--red), var(--red));
  --img-red-hot: linear-gradient(var(--red-hot), var(--red-hot));
}
html, body { background: var(--img-black); }
html.dark-zone, html.dark-zone body { background: var(--black); }
html.menu-open, html.menu-open body { background: var(--black) !important; }

* { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
html { scroll-behavior: smooth; scroll-padding-top: var(--head); }
body { margin: 0; color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: .01em; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.nowrap { white-space: nowrap; }

/* Buttons — 48px tap targets */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border-radius: 999px; font: 600 var(--fs-16)/1 var(--font-body); text-decoration: none; letter-spacing: .02em; white-space: nowrap;
  border: 2px solid transparent; transition: transform .15s, background-color .15s, border-color .15s; }
.btn:active { transform: scale(.97); }
.btn-call { background: var(--red); color: #fff; }
.btn-call:hover { background: var(--red-hot); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
button.btn { cursor: pointer; }
.btn-ghost:hover { background: rgb(255 255 255 / .08); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Two-line buttons: label on top, detail (phone, address) under it */
.btn:has(> .btn__sub) { flex-direction: column; gap: 2px; min-height: 64px; padding: 8px 10px; line-height: 1.2; }
.btn:has(> .btn__sub) > .btn__label { font-size: var(--fs-20); }
.btn__label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn__sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--fs-16)/1.25 var(--font-body); letter-spacing: 0; opacity: .85; }

/* Directions: one button that opens IN PLACE into Google Maps + Apple Maps. The closed button and the
   two map buttons share one grid cell, so the open state has exactly the closed footprint. */
.dir { display: inline-grid; vertical-align: top; }
.dir > * { grid-area: 1 / 1; min-width: 0; }
.dir:not(.open) .dir-opts, .dir.open .dir-toggle { visibility: hidden; }
.dir-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dir-opts .btn { min-width: 0; padding-inline: 6px; gap: 4px; }
.dir-opts .btn svg { width: 16px; height: 16px; }
.dir.open .dir-opts .btn { animation: dir-in .28s cubic-bezier(.2, 1.2, .4, 1) both; }
.dir.open .dir-opts .btn + .btn { animation-delay: .06s; }
.btn-map { background: var(--ink); color: var(--black); }
.btn-map:hover { background: #fff; }
@keyframes dir-in { from { opacity: 0; transform: scale(.85); } }
.hero-ctas .dir, .visit-btns .dir, .callbar .dir { width: 100%; }
.dir-opts .btn__sub { display: none; }
.callbar .btn { padding-inline: 8px; }

/* ---------- Shell: promo, header, menu (shared on every page) ---------- */
/* Phones (< 1100px), like abakystech.com: no header bar. The promo scrolls away; the open pill sits
   top-left under it and scrolls away with the page; the hamburger floats top-right and turns into a
   round glass button once the page scrolls. Desktop: a sticky header bar with the full nav. */
.promo { display: block; position: relative; z-index: 60; padding: 10px var(--pad); background: var(--img-red); color: #fff; text-align: center; font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.35; letter-spacing: .02em; text-decoration: none; }
.promo span { text-decoration: underline; margin-left: .4em; white-space: nowrap; }
.promo:hover { background: var(--img-red-hot); }

.menu-btn { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .3s, border-color .3s, box-shadow .3s; }
.menu-btn:hover { background: rgb(255 255 255 / .08); }
.menu-btn svg { width: 26px; height: 26px; }
.menu-float { position: sticky; top: 0; z-index: 80; height: 0; }
.menu-float .menu-btn { position: absolute; top: 6px; right: calc(var(--pad) - 6px); filter: drop-shadow(0 1px 3px rgb(0 0 0 / .7)); }
.page-scrolled .menu-float .menu-btn { background: rgb(22 20 20 / .92); border-color: rgb(255 255 255 / .14); box-shadow: 0 2px 12px rgb(0 0 0 / .5); filter: none; }
html:not(.js) .menu-btn { display: none; }
.menu-float .menu-btn { transition: background-color .3s, border-color .3s, box-shadow .3s, opacity .2s, visibility 0s; }
.mbar-show .menu-float .menu-btn { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
/* Phones, past the hero: a compact bar slides down on scrolling up and away on scrolling down */
/* Fixed over moving content: no live backdrop-filter (perf rule); a solid colour with a flat background-color (Safari step 5). */
.mbar { position: fixed; top: 0; left: 0; right: 0; z-index: 85; height: 60px; background: var(--img-black); background-color: var(--black);
  border-bottom: 1px solid var(--line); transform: translateY(-100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
.mbar-show .mbar { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.mbar-row { position: relative; height: 100%; display: flex; align-items: center; gap: 10px; }
.mbar-logo { display: grid; place-items: center; min-height: 48px; flex: none; }
.mbar-logo img { height: 34px; width: auto; }
.mbar .open-pill { margin-right: auto; padding-inline: 10px; gap: 6px; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 379px) { .mbar-row { gap: 6px; } .mbar-logo img { height: 30px; } }
.mbar .menu-btn { margin-right: -8px; }
.mbar .hours-pop { top: calc(100% + 10px); left: 0; }

.site-head { position: relative; z-index: 50; height: 0; }
.head-row { position: absolute; top: 10px; left: 0; right: 0; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.head-row > * { pointer-events: auto; }
.head-left { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; position: relative; }
.site-head .mark { display: none; place-items: center; min-height: 48px; flex: none; }
.site-head .mark img { height: 44px; width: auto; }
.head-nav, .head-call, .site-head .menu-btn { display: none; }
.drop-toggle { font-size: var(--fs-16); }
html:not(.js) .site-head { height: auto; }
html:not(.js) .head-row { position: static; flex-wrap: wrap; padding-block: 8px; }
html:not(.js) .head-nav { display: flex; flex-wrap: wrap; }
html:not(.js) .head-nav a { padding: 12px 10px; color: var(--ink); }
/* Phones: the floating hours pill is for the home page only (Ryan, 2026-10-16); elsewhere the hours, Call and Directions
   live in the menu, and the scroll-up bar is just the logo and the hamburger. <body data-page="home"> marks the home page,
   so this is pure CSS and nothing flashes. The menu keeps its pill on every page. */
@media (max-width: 1099px) {
  body:not([data-page="home"]) :is(.site-head, .mbar) :is(.open-pill, .hours-pop) { display: none; }
  body:not([data-page="home"]) .mbar-logo { margin-right: auto; }
  .site-head .head-left { margin-inline: auto; max-width: calc(100% - 96px); }
  .site-head .hours-pop { left: 50%; transform: translateX(-50%); }
}
/* Desktop (>= 1100px), like The Pig: sub-pages have a sticky header bar from the top (logo, open pill, nav, Call; no
   hamburger). Home: at the hero there is no bar, only the open pill floating top-centre and the round hamburger
   top-right; once the hero logo has scrolled under the header line, html.dhead-shown (site.js) slides the bar down and
   it stays; the floating hamburger goes. Pinned bars: a flat background-color, no backdrop-filter (Safari rules). */
@media (min-width: 1100px) {
  .mbar, .menu-float { display: none; }
  body[data-page="home"] .menu-float { display: block; }
  body[data-page="home"] .menu-float .menu-btn { top: 12px; }
  .dhead-shown .menu-float .menu-btn { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  .site-head { position: sticky; top: 0; height: var(--head); background: var(--img-black); background-color: var(--black); border-bottom: 1px solid var(--line); }
  .head-row { position: static; height: 100%; pointer-events: auto; }
  .site-head .mark { display: grid; }
  .site-head .open-pill { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .head-nav { display: flex; align-items: center; gap: 2px; }
  .head-nav > a, .drop-toggle { min-height: 48px; padding: 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; text-decoration: none; font: 600 var(--fs-16)/1 var(--font-body); color: var(--muted); cursor: pointer; border-radius: 8px; white-space: nowrap; }
  .head-nav > a:hover, .drop-toggle:hover, .drop-toggle[aria-expanded='true'] { color: var(--ink); }
  .head-nav [aria-current='page'], .drop-toggle.is-section { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); border-radius: 0; }
  .head-nav .nav-home { display: none; }
  .head-call { display: inline-flex; min-height: 44px; padding: 10px 18px; }

  body[data-page="home"] .site-head { height: 0; background: none; border: 0; }
  /* At the hero the open pill belongs to the hero: it scrolls away with the page. The header only pins once it is shown. */
  html:not(.dhead-shown) body[data-page="home"] .site-head { position: relative; }
  body[data-page="home"] .site-head::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--head); background: var(--img-black); background-color: var(--black);
    border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-100%); transition: transform .3s ease, opacity 0s .3s; }
  body[data-page="home"] .head-row { position: absolute; top: 0; left: 0; right: 0; height: var(--head); }
  body[data-page="home"] :is(.mark, .head-nav, .head-call) { visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
  html:not(.dhead-shown) body[data-page="home"] .head-left { position: absolute; left: 50%; transform: translateX(-50%); }
  html:not(.dhead-shown) body[data-page="home"] .site-head .hours-pop { left: 50%; transform: translateX(-50%); }
  .dhead-shown body[data-page="home"] .site-head::before { opacity: 1; transform: none; transition: transform .3s ease; }
  .dhead-shown body[data-page="home"] :is(.mark, .head-nav, .head-call) { visibility: visible; opacity: 1; transition: opacity .25s .1s; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .head-nav > a, .drop-toggle { padding-inline: 10px; }
  .head-call { width: 44px; padding: 0; gap: 0; font-size: 0; }
}

/* Open pill — green dot when open; tap for the week's hours */
.open-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); background: rgb(12 11 11 / .6);
  color: var(--muted); font: 600 var(--fs-16)/1.1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; min-width: 0; position: relative; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.open-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9c978f; flex: none; }
.open-pill.is-open { color: #b9f0ae; background: rgb(20 40 16 / .6); border-color: rgb(95 208 74 / .45); }
.open-pill.is-open::before { background: #5fd04a; box-shadow: 0 0 8px #5fd04a; }
.open-pill::after { content: ''; position: absolute; inset: -6px -2px; }
.open-pill svg { width: 14px; height: 14px; flex: none; transition: transform .2s; }
.open-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.open-pill[aria-expanded='true'] svg { transform: rotate(180deg); }
@media (max-width: 359px) { .open-pill .ob-more { display: none; } }
.hours-pop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 70; min-width: 240px; padding: 12px 16px; border-radius: var(--radius); background: var(--coal); border: 1px solid var(--line); box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
.hours-pop[hidden] { display: none; }
.hours-pop table { border-collapse: collapse; width: 100%; font-size: var(--fs-16); }
.hours-pop td { padding: 4px 0; color: var(--muted); }
.hours-pop td + td { text-align: right; padding-left: 24px; }
.hours-pop tr.today td { color: var(--ink); font-weight: 600; }
.hours-pop a { display: block; margin-top: 8px; color: var(--brass); font-weight: 600; text-decoration: none; min-height: 32px; line-height: 32px; }

/* Desktop Inventory dropdown */
.drop { position: relative; }
.drop-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.drop-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.drop-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 220px; margin: 0; padding: 8px; list-style: none; border-radius: var(--radius); background: var(--coal); border: 1px solid var(--line); box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
.drop-menu[hidden] { display: none; }
.drop-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.drop-menu a:hover, .drop-menu a:focus-visible { background: var(--steel); }
.drop-menu a[aria-current='page'] { color: var(--brass); }
/* The Inventory panel (links written from inventory/categories.csv by tools/inventory.mjs): All inventory on top, then
   one column per category, its name and its subs. Opens under the toggle, right-aligned so it stays on screen. */
.drop-mega { left: auto; right: 0; width: max-content; max-width: calc(100vw - 2 * var(--pad)); padding: 12px; }
.drop-mega svg { width: 18px; height: 18px; flex: none; margin-right: 10px; color: var(--brass); }
.drop-mega .drop-all { border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 8px; }
.drop-cols { display: grid; grid-template-columns: repeat(3, minmax(170px, auto)); gap: 4px 12px; }
.drop-col ul { list-style: none; margin: 0; padding: 0; }
.drop-mega .drop-head { font: 600 var(--fs-12)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.drop-col li a { font-weight: 500; color: var(--muted); padding-left: 40px; }
.drop-col li a:hover, .drop-col li a:focus-visible { color: var(--ink); }
.drop-mega a[aria-current='page'] { color: var(--brass); }

/* Menu — full screen, laid out like abakystech.com: hours pill and close on top, the logo, search,
   then big rounded rows (icon left, label centred, chevron right) */
/* Its top and bottom edges are the page black, so the flat colours Safari paints (html.menu-open, the sheet's
   background-color) meet it without a seam; the red glow sits behind the logo, away from both bars. */
.menu { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background-color: var(--black);
  background-image: linear-gradient(var(--black), rgb(12 11 11 / 0) calc(env(safe-area-inset-top, 0px) + 72px)), radial-gradient(120% 60% at 50% 14%, #3a1416 0%, #1a1212 50%, #0c0b0b 100%);
  animation: menu-fade .22s both; }
.menu[hidden] { display: none; }
@keyframes menu-fade { from { opacity: .01; } }
.menu-panel { min-height: 100%; width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); }
.menu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; }
.menu-top .open-pill { min-height: 44px; padding: 8px 16px; font-size: var(--fs-16); }
.menu-close { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .07); color: var(--ink); cursor: pointer; }
.menu-close:hover { background: rgb(255 255 255 / .14); }
.menu-close svg { width: 22px; height: 22px; }
.menu-logo { display: block; margin: 24px auto 24px; }
.menu-logo img { width: 230px; max-width: 64vw; height: auto; }
.menu-search { display: flex; align-items: stretch; margin-bottom: 20px; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; background: rgb(0 0 0 / .35); overflow: hidden; }
.menu-search:focus-within { border-color: var(--brass); }
.menu-search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 0 0 20px; border: 0; background: transparent; color: var(--ink); font: 400 var(--fs-16) var(--font-body); outline: none; }
.menu-search input::placeholder { color: var(--muted); }
.menu-search input::-webkit-search-cancel-button { filter: invert(1); }
.menu-search button { width: 56px; display: grid; place-items: center; border: 0; background: transparent; color: var(--brass); cursor: pointer; }
.menu-search button svg { width: 22px; height: 22px; }
.menu-links, .menu-sub { list-style: none; margin: 0; padding: 0; }
.menu-links { display: grid; gap: 12px; }
.mrow { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 6px 56px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .05); color: var(--ink); text-decoration: none; text-align: center; cursor: pointer;
  font: 500 var(--fs-20)/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; transition: background-color .15s, border-color .15s; }
.mrow:hover { background: rgb(255 255 255 / .09); }
.mrow small { font: 400 var(--fs-16)/1.25 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.mrow-ic, .mrow-ch { position: absolute; top: 50%; transform: translateY(-50%); }
.mrow-ic { left: 20px; width: 20px; height: 20px; color: var(--brass); }
.mrow-ch { right: 20px; width: 16px; height: 16px; opacity: .5; transition: transform .2s, opacity .2s; }
.mrow[aria-current='page'], .menu-sub-toggle.is-section, .menu-sub-toggle[aria-expanded='true'] { border-color: rgb(201 36 44 / .7); background: rgb(201 36 44 / .16); color: #fff; }
.mrow[aria-current='page'] .mrow-ic, .menu-sub-toggle[aria-expanded='true'] .mrow-ic { color: var(--red-hot); }
.menu-sub-toggle[aria-expanded='true'] .mrow-ch { transform: translateY(-50%) rotate(180deg); opacity: .9; }
.mrow-primary { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 4px 20px rgb(201 36 44 / .35); }
.mrow-primary:hover { background: var(--red-hot); }
.mrow-primary small { color: rgb(255 255 255 / .85); }
.mrow-primary .mrow-ic { color: #fff; }
.menu .dir { display: grid; width: 100%; }
.menu .dir-opts .btn { min-height: 52px; border-radius: 999px; }
.menu-sub { margin-top: 8px; padding: 8px; border-radius: 24px; background: rgb(0 0 0 / .3); border: 1px solid rgb(201 36 44 / .3); }
.menu-sub[hidden] { display: none; }
.menu-sub a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 16px; color: var(--ink); text-decoration: none; font: 600 var(--fs-16)/1.2 var(--font-body); }
.menu-sub a:hover { background: rgb(255 255 255 / .06); }
.menu-sub a svg { width: 18px; height: 18px; flex: none; color: var(--brass); }
.menu-sub a[aria-current='page'] { color: var(--brass); background: rgb(255 255 255 / .05); }
/* Nested groups inside Inventory: Firearms / Suppressors / Vape open in place (one at a time) to their subs. A step
   smaller than the rows above, indented, same rounded-row language; every target 44px+. */
.mgrp-toggle { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 44px 0 16px; border: 0; border-radius: 16px;
  background: none; color: var(--ink); font: 600 var(--fs-20)/1.2 var(--font-body); text-align: left; cursor: pointer; }
.mgrp-toggle:hover { background: rgb(255 255 255 / .06); }
.mgrp-toggle > svg:first-child { width: 18px; height: 18px; flex: none; color: var(--brass); }
.mgrp-ch { position: absolute; right: 16px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); opacity: .6; transition: transform .2s; }
.mgrp-toggle[aria-expanded='true'] { background: rgb(201 36 44 / .14); }
.mgrp-toggle[aria-expanded='true'] .mgrp-ch { transform: translateY(-50%) rotate(180deg); opacity: .9; }
.mgrp-toggle.is-section > svg:first-child { color: var(--red-hot); }
.mgrp-list { list-style: none; margin: 4px 0 6px 26px; padding: 0 0 0 12px; border-left: 1px solid rgb(201 36 44 / .35); display: grid; }
.mgrp-list[hidden] { display: none; }
.menu-sub .mgrp-list a { min-height: 44px; padding: 0 14px; font: 500 var(--fs-16)/1.2 var(--font-body); color: rgb(244 239 232 / .85); border-radius: 12px; }
.menu-sub .mgrp-list a:hover { color: var(--ink); }
.menu-sub .mgrp-list a[aria-current='page'] { color: var(--brass); }
.menu-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 4px; text-align: center; color: rgb(185 177 167 / .7); font-size: var(--fs-12); line-height: 1.5; }
/* Phones and tablets — Safari fix, step 4 for the menu: a fixed full-screen sheet makes Safari paint its URL box flat
   from it (Ryan's iPhone, 2026-10-16: a RED strip under the URL box with the menu open). Open, the sheet is ordinary
   page content at the top of the document (js/menu.js scrolls to it and back), everything else is display: none
   (the call bar and its red Call button included), and it runs past the screen bottom so the URL box shows the menu. */
@media (max-width: 1099px) {
  html.menu-open .menu:not([hidden]) { position: relative; inset: auto; overflow: visible; overscroll-behavior: auto; display: flex; flex-direction: column;
    min-height: calc(100lvh + env(safe-area-inset-bottom, 0px) + 96px); }
  html.menu-open .menu-panel { flex: 1 0 auto; min-height: 0; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px) + 96px); }
  html.menu-open :is(.promo, .menu-float, .mbar, .site-head, main, .site-foot, .credit, .callbar) { display: none; }
  html.menu-open body { padding-bottom: 0; }
}
/* Desktop (>= 1100px), like The Pig: the menu is a pop-out card anchored top-right at the hero's hamburger (menu.js
   sets --menu-top from the button), not a full screen. The page stays visible and scrollable; a click outside or
   Esc closes it; a card taller than the screen scrolls inside itself. */
@media (min-width: 1100px) {
  .menu { inset: auto; top: var(--menu-top, 16px); right: 16px; width: 372px; max-width: calc(100vw - 32px); max-height: calc(100vh - var(--menu-top, 16px) - 16px);
    border: 1px solid rgb(255 255 255 / .14); border-radius: 24px; box-shadow: 0 24px 60px rgb(0 0 0 / .55);
    background-color: var(--coal); background-image: radial-gradient(120% 45% at 50% 0%, #3a1416 0%, #1a1212 60%, #161414 100%);
    transform-origin: top right; animation: menu-pop .2s ease-out both; }
  .menu-panel { min-height: 0; max-width: none; padding: 14px 18px 20px; }
  .menu-logo { margin: 4px auto 16px; }
  .menu-logo img { width: 150px; }
  .menu-search { margin-bottom: 14px; }
  .menu-search input { min-height: 48px; }
  .menu-links { gap: 10px; }
  .mrow { min-height: 48px; font-size: var(--fs-16); padding-inline: 48px; }
  .mrow-ic { left: 18px; }
  .mrow-ch { right: 18px; }
  .menu-foot { display: none; }
}
@keyframes menu-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--head)); display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center;
  padding: 48px var(--pad); background: var(--img-black); }
.hero-bg picture { display: contents; }
/* Phones — Safari fix, step 2: the page under iOS 26's floating URL box reaches past 100lvh, so the home hero runs past
   the screen bottom by --under (the toolbar's share, the bottom safe area and 96px more). Its height and its bottom
   padding grow by the same amount, so the logo and buttons stay exactly where they were and the gun wall shows
   through the URL box on first load. */
@media (max-width: 1099px) {
  :root { --under: calc(100lvh - 100svh + env(safe-area-inset-bottom, 0px) + 96px); }
  .intro-smoke { min-height: calc(100svh - var(--promo-h, 44px) + var(--under)); padding-bottom: calc(48px + var(--under)); }
  .intro-smoke .hero-scroll { bottom: auto; top: calc(100svh - var(--promo-h, 44px) - 72px); }
}
/* Home hero fills the screen under the red promo strip (no header bar over the hero any more). */
@media (min-width: 1100px) { .intro-smoke { min-height: calc(100svh - var(--promo-h, 44px)); } }
.hero-scroll { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 8px 12px;
  color: rgb(243 239 233 / .7); font: 600 var(--fs-12)/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.hero-scroll:hover { color: var(--ink); }
.hero-scroll svg { width: 22px; height: 22px; animation: hero-nudge 2.2s ease-in-out infinite; }
@keyframes hero-nudge { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll svg { animation: none; } }
@media (max-height: 640px) { .hero-scroll { display: none; } }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse at 50% 45%, rgb(12 11 11 / .45), rgb(12 11 11 / .88) 70%), linear-gradient(180deg, rgb(12 11 11 / .3), var(--black)); }
.hero-inner { width: 100%; max-width: 760px; display: grid; justify-items: center; gap: 20px; }
.hero-logo { width: min(100%, 340px); height: auto; filter: drop-shadow(0 8px 24px rgb(0 0 0 / .6)); }
.hero h1 { font-size: var(--fs-hero); text-transform: uppercase; }
.hero .kicker { font: 600 var(--fs-label)/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.hero .lead { font-size: var(--fs-lead); color: var(--muted); max-width: 32ch; }
/* Home hero: a wider measure from tablets up, so the intro sits on three balanced lines instead of four. */
@media (min-width: 700px) { .intro-smoke .lead { max-width: none; } .intro-smoke .lead span { display: block; } }
.hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 420px); margin-top: 8px; }
@media (min-width: 700px) { .hero-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 480px); } }
.hero-ctas > *, .hero-ctas .dir > * { width: 100%; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: var(--fs-16); color: var(--muted); }
.open-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.open-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.open-badge.is-open { color: #9be38f; }
.open-badge.is-open::before { background: #5fd04a; box-shadow: 0 0 8px #5fd04a; }
@media (min-width: 600px) { .hero-logo { width: min(100%, 500px); } }
@media (min-width: 1100px) { .hero-logo { width: 600px; } .hero-inner { max-width: 900px; } }
@media (min-width: 1800px) { .hero-logo { width: 760px; } .hero-inner { max-width: 1100px; } }

.js .hero [data-step] { opacity: .01; transform: translateY(16px); }
.hero.done [data-step] { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--d, 0) * 120ms); }
.hero-ctas { opacity: 1 !important; transform: none !important; } /* buttons work and show from the first frame */

/* Hero intro — smoke clears off the logo */
.intro-smoke canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.intro-smoke .hero-inner { position: relative; z-index: 2; }
.js .intro-smoke .hero-logo { opacity: .01; filter: blur(16px) drop-shadow(0 8px 24px rgb(0 0 0 / .6)); }
.intro-smoke.lit .hero-logo { opacity: 1; filter: blur(0) drop-shadow(0 8px 24px rgb(0 0 0 / .6)); transition: opacity 1.6s ease, filter 1.8s ease; }

/* Two sides of the store — the section under the hero */
.sides-band { padding-bottom: 0; }
.sides-band .band-head { margin-bottom: 32px; }
.sides { display: grid; overflow: hidden; }
.side { position: relative; display: grid; place-items: center; text-decoration: none; overflow: hidden; isolation: isolate; min-height: 320px;
  padding: 32px var(--pad); color: var(--ink); transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 6s ease-out; }
.side::after { content: ''; position: absolute; inset: 0; z-index: -1; }
.side-guns::after { background: linear-gradient(180deg, rgb(12 11 11 / .35), rgb(12 11 11 / .8)); }
.side-vape::after { background: linear-gradient(180deg, rgb(80 8 12 / .55), rgb(12 11 11 / .85)); }
.side-vape { transition-delay: .12s; }
.side-label { display: grid; gap: 8px; justify-items: center; text-align: center; }
.side-label b { font: 600 var(--fs-panel)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.side-label small { font-size: var(--fs-16); color: var(--muted); max-width: 30ch; }
.side-label em { font: 600 var(--fs-12)/1 var(--font-body); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.side-label .arrow { margin-top: 4px; display: inline-flex; min-height: 48px; align-items: center; padding: 0 20px; border-radius: 999px; border: 2px solid currentColor; font: 600 var(--fs-16)/1 var(--font-body); }
.side:hover img { transform: scale(1.05); }
.js .sides:not(.in) .side-guns { transform: translateX(-100%); opacity: 0; }
.js .sides:not(.in) .side-vape { transform: translateX(100%); opacity: 0; }
@media (min-width: 900px) {
  .sides { grid-template-columns: 1fr 1fr; height: min(72vh, 720px); min-height: 480px; }
  .side { min-height: 0; padding: 48px; place-items: end center; }
  .side-guns { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); margin-right: -4%; }
  .side-vape { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); margin-left: -4%; }
}
@media (min-width: 1800px) { .sides { height: min(72vh, 960px); } .side { padding: 96px 64px; } }

/* ---------- Sections ---------- */
section.band { padding: 80px 0; }
@media (min-width: 1100px) { section.band { padding: 120px 0; } }
.band-head { display: grid; gap: 12px; margin-bottom: 40px; text-align: center; justify-items: center; }
.band-head h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.band-head p { color: var(--muted); max-width: 56ch; font-size: var(--fs-lead); }
.eyebrow { font: 600 var(--fs-12)/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.concept-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--brass); color: var(--brass);
  font: 600 var(--fs-12)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }

.trust { border-block: 1px solid var(--line); background: var(--img-coal); }
.trust ul { list-style: none; margin: 0 auto; padding: 20px var(--pad); display: grid; gap: 12px; text-align: center; font-weight: 600; }
.trust li { color: var(--muted); }
.trust b { color: var(--ink); }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(3, 1fr); } }

.cards { display: grid; gap: 16px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--coal); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card div { padding: 20px; display: grid; gap: 8px; align-content: start; }
.card h3 { font-size: var(--fs-h3); text-transform: uppercase; }
.card p { color: var(--muted); }
.card .price { color: var(--brass); font-weight: 600; }

.justin { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .justin { grid-template-columns: repeat(4, 1fr); } }
.ghost-item { border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; }
.ghost-item i { display: block; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(110deg, var(--steel) 40%, #2e2a2a 50%, var(--steel) 60%) 0 0 / 300% 100%; animation: shimmer 2.4s linear infinite; }
.ghost-item b { font-size: var(--fs-16); }
.ghost-item small { font-size: var(--fs-12); color: var(--brass); letter-spacing: .1em; text-transform: uppercase; }
.stock-item { border-style: solid; }
.carousel + .nic-warning { margin-top: 24px; }
.carousel { position: relative; }
.car-ask { text-align: center; margin: 24px 0 0; }
.car-filter { justify-content: center; margin-bottom: 16px; }
.car-track > li[hidden] { display: none; }
.car-track { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.car-track::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .car-track { grid-auto-columns: calc((100% - 24px) / 3); } }
@media (min-width: 1000px) { .car-track { grid-auto-columns: calc((100% - 36px) / 4); } }
.car-track > li { scroll-snap-align: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.car-btn { position: absolute; top: 40%; z-index: 2; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line); background: rgb(12 11 11 / .85); color: var(--ink); font-size: var(--fs-32); line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 4px; }
.car-btn:hover { background: var(--steel); }
.car-btn[disabled] { opacity: 0; pointer-events: none; }
.car-prev { left: -8px; } .car-next { right: -8px; }
@media (min-width: 1200px) { .car-prev { left: -24px; } .car-next { right: -24px; } }
.stock-item img { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
@keyframes shimmer { to { background-position: -300% 0; } }
.band-note { margin-top: 24px; text-align: center; color: var(--muted); font-size: var(--fs-16); }

.split-band { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .split-band { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split-band img { border-radius: var(--radius); width: 100%; height: auto; }
.split-band .copy { display: grid; gap: 16px; }
.split-band h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.split-band .copy p { color: var(--muted); }
@media (max-width: 999px) { .split-band .copy > :is(h2, .eyebrow, .concept-tag) { text-align: center; justify-self: center; } .split-band .copy .btn { justify-self: center; } }

.age { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; background: var(--red); color: #fff; font-weight: 600; justify-self: start; }
@media (max-width: 999px) { .age { justify-self: center; } }
.nic-warning { border: 2px solid var(--ink); padding: 16px; font: 700 var(--fs-16)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .02em; }

.flavors { margin-top: 48px; background: var(--coal); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; text-align: center; justify-items: center; }
.flavors h3 { font-size: var(--fs-h3); text-transform: uppercase; }
.flavor-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--line); background: transparent; color: var(--ink); font: 600 var(--fs-16)/1 var(--font-body); cursor: pointer; }
.chip[aria-pressed='true'] { background: var(--red); border-color: var(--red); }
.also { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; width: 100%; max-width: 480px; }
.also li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--steel); text-align: left; }
.also small { color: var(--muted); font-size: var(--fs-16); }

.review { text-align: center; display: grid; gap: 16px; justify-items: center; }
.review blockquote { margin: 0; font: 500 var(--fs-h3)/1.4 var(--font-display); max-width: 36ch; }
.review cite { font-style: normal; color: var(--muted); }

.visit { display: grid; gap: 32px; }
@media (min-width: 1000px) { .visit { grid-template-columns: 1fr 1fr; align-items: start; } }
.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
.hours td { padding: 12px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; }
.hours tr.today td { color: var(--ink); font-weight: 700; }
.hours tr { color: var(--muted); }
.visit-info { display: grid; gap: 20px; }
.visit-info address { font-style: normal; font-size: var(--fs-lead); }
.visit-btns { display: grid; grid-template-columns: minmax(0, 360px); justify-content: center; gap: 12px; }
.visit-btns > *, .visit-btns .dir > * { width: 100%; }
.visit-btns .dir-opts .btn { padding: 12px 8px; }
@media (max-width: 599px) { .visit-btns { grid-template-columns: 1fr; } .visit-info { text-align: center; } .visit-info address { justify-self: center; } }
.map { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--coal); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.map iframe { width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.6); }

.site-foot { border-top: 1px solid var(--line); padding: 48px 0 24px; text-align: center; display: grid; gap: 12px; color: var(--muted); font-size: var(--fs-16); }
.site-foot img { height: 48px; width: auto; margin: 0 auto 8px; }
.site-foot a { color: var(--ink); }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 4px 0 8px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; text-decoration: none; font-weight: 600; color: var(--ink); }
.foot-nav a:hover { color: var(--brass); }
.site-foot .legal { font-size: var(--fs-12); max-width: 64ch; margin: 8px auto 0; }
.credit { text-align: center; font-size: var(--fs-12); color: var(--muted); border-top: 1px solid var(--line); margin: 24px auto 0; padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom)); }
.credit a { color: var(--ink); text-decoration: none; }

/* Phone call bar — slides away while scrolling down, back on scrolling up; hidden while the
   home hero's own Call buttons are on screen and while the menu is open (STANDARDS §4) */
/* Pinned at the bottom edge: Safari paints the area under its URL box from it and reads background-color (step 5),
   so it is solid black — no backdrop-filter over moving content (perf rule). Hidden, it fades out in place with a short
   slide: a bar slid just off-screen still shows under the floating URL box (STANDARDS §4). */
.callbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--img-black); background-color: var(--black); border-top: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s .2s; }
.callbar.show { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s; }
.callbar .btn { width: 100%; }
/* Directions in the bottom bar opens into Apple + Google Maps across the whole bar; Call steps aside until it closes. */
.callbar:has(.dir.open) > .btn-call { display: none; }
.callbar:has(.dir.open) > .dir { grid-column: 1 / -1; }
@media (min-width: 1100px) { .callbar { display: none; } }
@media (max-width: 1099px) { body { padding-bottom: 84px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero [data-step], .intro-smoke .hero-logo, .side { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto; }
}

/* Contact form — FormSubmit emails gunsmokeandmore@gmail.com */
.contact { margin-top: 48px; max-width: 720px; margin-inline: auto; display: grid; gap: 16px; }
.contact h3 { font-size: var(--fs-h3); text-transform: uppercase; text-align: center; }
.contact > p { color: var(--muted); text-align: center; margin: 0; }
.contact-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: 1fr 1fr; } .contact-wide { grid-column: 1 / -1; } }
.contact label { display: grid; gap: 8px; font-size: var(--fs-16); color: var(--muted); }
.contact input, .contact textarea, .contact select { font: inherit; font-size: var(--fs-16); color: var(--ink); background: var(--steel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.contact input:focus, .contact textarea:focus, .contact select:focus { outline: 2px solid var(--brass); outline-offset: 2px; }
.contact .btn { justify-self: center; }
.contact .hp { position: absolute; left: -9999px; }
.contact-status { text-align: center; min-height: 1.6em; margin: 0; color: var(--brass); }
.contact select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.contact .opt { font-size: var(--fs-12); }
.contact-how { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.contact-how legend { color: var(--muted); font-size: var(--fs-16); margin-bottom: 8px; padding: 0; width: 100%; text-align: center; }
.contact .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 2px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; }
.contact .pill input { accent-color: var(--red); width: 18px; height: 18px; padding: 0; }
.contact .pill:has(input:checked) { border-color: var(--red); }

.gun-filters { display: grid; gap: 16px; justify-items: center; margin-bottom: 32px; }
.gun-selects { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gun-selects label { display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; }
.gun-selects select { min-height: 48px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--line); background: var(--coal); color: var(--ink); font: 600 var(--fs-16)/1 var(--font-body); }
.gun-count { color: var(--muted); }
.guns { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); }
@media (min-width: 700px) { .guns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } }
@media (max-width: 699px) { .gun-body { padding: 12px 14px 16px; } .gun h3 { font-size: var(--fs-16); } .gun-price b { font-size: var(--fs-24); } }
.gun { background: var(--coal); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.gun[hidden] { display: none; }
.gun img, .gun-nophoto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.gun-nophoto { display: grid; place-items: center; background: var(--steel); color: var(--muted); font: 600 var(--fs-20)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .05em; padding: 16px; text-align: center; }
.gun-body { padding: 16px 20px 20px; display: grid; gap: 6px; align-content: start; }
.gun-brand { font: 600 var(--fs-12)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.gun h3 { font-size: var(--fs-20); text-transform: uppercase; line-height: 1.15; }
.gun-meta { color: var(--muted); }
.gun-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gun-tag { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--brass); color: var(--brass); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .1em; }
.gun-price { margin-top: 6px; color: var(--muted); }
.gun-price b { color: var(--ink); font: 600 var(--fs-28)/1 var(--font-display); margin-right: 4px; }
.gun-price span { display: block; font-size: var(--fs-label); margin-top: 4px; }
.gun-ask { margin-top: 10px; color: var(--red-hot); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }