/* =============================================================================
   Armory storefront — the design system.

   One external stylesheet, because the Content-Security-Policy this app sends is
   `style-src 'self'`: no inline <style>, no style="" attribute anywhere. Every
   look on the site is a class defined here.

   The palette is the brasstown brand, token for token — navy, rust, gold and
   paper set in Alfa Slab One over Lato. The site chrome (header, footer, the
   home/contact/department pages) is the Brasstown WordPress theme's site.css,
   ported verbatim in the "Brasstown site" block at the end of this file; the
   catalog/product/cart/checkout styles above it are this storefront's own. There is NO dark mode: a gun shop's
   catalog is read in daylight and printed, the brand is a paper ground, and the
   owner does not want one. The type is fluid (clamp), the layout uses logical
   properties and CSS grid, the cards are container-query aware, and motion is
   tasteful and switched off for anyone who asks (prefers-reduced-motion).
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */
/* Self-hosted, latin subset, SIL Open Font License. Served from this origin —
   font-src 'self' — so a customer entering a date of birth to buy a firearm
   loads nothing from a third party. */
@font-face{font-family:'Alfa Slab One';src:url(/assets/fonts/AlfaSlabOne-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(/assets/fonts/Lato-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(/assets/fonts/Lato-700.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(/assets/fonts/Lato-900.woff2) format('woff2');
  font-weight:900;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
:root{
  color-scheme:light;

  /* Brand, verbatim. Do not re-pick. */
  --ink:#11141a; --navy:#1d3557; --rust:#8d3a1d; --rust-deep:#6f2d15;
  --gold:#d4b26f; --paper:#f4efe6; --white:#ffffff; --faint:#dcd4c9;

  /* Working surfaces derived from the brand neutrals. */
  --bg:var(--paper); --surface:var(--white); --surface-2:#efe8dc; --surface-3:#e7dfd2;
  --ink-2:#39404b; --dim:#6d6659; --faintink:#9a9184;
  --line:var(--faint); --line-strong:#c7bcab;
  --accent:var(--rust); --accent-ink:#ffffff; --accent-soft:#f6ece4;

  /* Semantic routing/verdict colours. */
  --dealer:#8d3a1d; --dealer-bg:#f8ece4;
  --buyer:#1f5c46;  --buyer-bg:#e8f1ec;
  --stop:#9c2620;   --stop-bg:#fbeae7;
  --warn:#7d5f10;   --warn-bg:#faf1d9;
  --ok:#1f5c46;     --ok-bg:#e8f1ec;

  /* Shape & depth. Tight radii and restrained shadows: a 17,000-SKU catalog is
     a reference document, not a landing page. */
  --radius:4px; --radius-sm:2px; --radius-lg:8px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(17,20,26,.07);
  --shadow-md:0 4px 14px rgba(17,20,26,.10);
  --shadow-lg:0 10px 30px rgba(17,20,26,.16);
  --shadow-head:0 1px 0 rgba(17,20,26,.10), 0 6px 18px rgba(17,20,26,.06);

  /* Fluid type scale. */
  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(.92rem,.9rem + .15vw,1rem);
  --step-1:clamp(1.12rem,1.05rem + .35vw,1.28rem);
  --step-2:clamp(1.35rem,1.2rem + .7vw,1.7rem);
  --step-3:clamp(1.7rem,1.4rem + 1.3vw,2.3rem);

  --gradient-navy:linear-gradient(112deg,#1a2f4e 0%,#264164 62%,#2e4b71 100%);
  --gradient-hero:linear-gradient(112deg,#11141a 0%,var(--navy) 58%,var(--rust) 100%);
  --gradient-rust:linear-gradient(90deg,var(--rust),var(--rust-deep));
  --gradient-top:linear-gradient(90deg,#0f141c 0%,var(--navy) 55%,var(--rust) 100%);

  --ease:cubic-bezier(.2,.6,.2,1);
  --header-h:12rem; /* approximate sticky Brasstown header height (topbar+brand row+nav), for scroll offsets */
}

/* --------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 var(--step-0)/1.5 'Lato',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:2px}
svg{display:block}
::selection{background:var(--gold);color:var(--ink)}

.display,h1,.hero h1,.brand b{font-family:'Alfa Slab One','Georgia',serif;font-weight:400;
  letter-spacing:0;line-height:1.08}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}

.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;background:var(--accent);
  color:var(--accent-ink);padding:.6rem 1rem;z-index:60;border-end-end-radius:var(--radius)}
.skip:focus{inset-inline-start:0}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- layout */
.shell{width:min(1240px,calc(100% - 2rem));margin-inline:auto}
main{padding-block:1.2rem 3rem;min-height:50vh}
main.bdg-main-bleed{padding-block:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.pad{padding:1rem 1.1rem}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.stack{display:flex;flex-direction:column;gap:1rem}

/* Utility layer — because inline styles are forbidden by the CSP, these cover
   the one-off spacing and flex the page templates would otherwise reach for. */
.flex{display:flex}.flex-col{flex-direction:column}.wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.grow{flex:1}
.gap-1{gap:.4rem}.gap-2{gap:.7rem}.gap-3{gap:1.1rem}
.mt-1{margin-block-start:.5rem}.mt-2{margin-block-start:1rem}.mt-3{margin-block-start:1.5rem}
.mb-1{margin-block-end:.5rem}.mb-2{margin-block-end:1rem}.mb-3{margin-block-end:1.5rem}
.text-center{text-align:center}.nowrap{white-space:nowrap}.hidden{display:none}

.two{display:grid;grid-template-columns:16.5rem minmax(0,1fr);gap:1.8rem;align-items:start}
.detail{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:2.5rem;align-items:start}
.checkout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.6rem;align-items:start}
/* The rail is sticky AND its own scroll region: a long filter list scrolls
   inside the rail instead of running past the bottom of the screen, so it never
   makes you scroll the whole product grid to reach the bottom of the filters. */
.filters{position:sticky;top:calc(var(--header-h) + .8rem);
  max-height:calc(100vh - var(--header-h) - 1.6rem);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding-inline-end:.5rem}
@media (max-width:56rem){
  .two,.detail,.checkout{grid-template-columns:1fr}
  .filters{position:static;top:auto;max-height:none;overflow:visible;padding-inline-end:0}
}

/* --------------------------------------------------------------- type */
h1{font-size:var(--step-3);margin:0 0 .4rem}
h2{font-size:var(--step-1);margin:0 0 .5rem;font-weight:800;letter-spacing:-.01em}
h3{font-size:var(--step-0);margin:0 0 .3rem;font-weight:700}
p{margin:0 0 .7rem}
.lede{color:var(--dim);font-size:var(--step-0);max-width:56ch;margin:0 0 1.1rem}
.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin:0 0 .35rem;font-weight:700}
.muted{color:var(--dim)}
.small{font-size:var(--step--1)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;color:var(--dim);
  overflow-wrap:anywhere}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--surface-2);padding:.05em .35em;border-radius:var(--radius-sm)}

.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1.1rem;
  border-block-end:2px solid var(--navy);padding-block-end:.5rem}
.rowhead h2{margin:0;font-family:'Alfa Slab One','Georgia',serif;font-weight:400;
  letter-spacing:.005em;font-size:var(--step-1);color:var(--navy);text-transform:none}
.rowhead a{font-size:1rem;color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.rowhead a:hover{text-decoration:underline}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--gradient-rust);color:var(--accent-ink);border:1px solid var(--rust-deep);
  border-radius:var(--radius);padding:.62rem 1.15rem;cursor:pointer;text-decoration:none;
  font-size:.98rem;font-weight:700;letter-spacing:.01em;line-height:1.2;
  transition:filter .15s var(--ease),transform .1s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{filter:brightness(1.08);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:.85rem 1.7rem;font-size:1.1rem;border-radius:var(--radius-lg)}
.btn.navy{background:linear-gradient(90deg,#264164,var(--navy));border-color:var(--navy)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);font-weight:600;filter:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--rust-deep);filter:none;box-shadow:none}
/* For dark backgrounds (the hero): a light outline that fills on hover. */
.btn.ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.5);filter:none}
.btn.ghost-light:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff;filter:none}
.btn.wide{display:flex;width:100%}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;filter:none}
.btn svg{width:18px;height:18px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;
  font:inherit;font-size:.84rem}
.linkbtn:hover{color:var(--rust-deep)}

/* --------------------------------------------------------------- forms */
input,select,button,textarea{font:inherit;color:var(--ink)}
input[type=text],input[type=search],input[type=date],input[type=number],input[type=tel],input[type=email],
select,textarea{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.5rem .6rem;width:100%;max-width:100%;font-size:.9rem;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--stop);box-shadow:0 0 0 3px var(--stop-bg)}
textarea{min-height:6rem;resize:vertical}
label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);
  margin-block-end:.28rem;font-weight:700}

.field{margin-block-end:1rem}
.field-sm{max-width:12rem}.field-md{max-width:16rem}.field-lg{max-width:24rem}
.field .req{color:var(--accent)}
.field-help{font-size:.78rem;color:var(--dim);margin:.3rem 0 0;text-transform:none;letter-spacing:0}
.field-error{font-size:.8rem;color:var(--stop);font-weight:700;margin:.3rem 0 0;text-transform:none;letter-spacing:0}

fieldset{border:0;padding:0;margin:0 0 1rem}
legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);padding:0;margin-block-end:.4rem}
.check{display:flex;align-items:center;gap:.6rem;font-size:.9rem;margin-block-end:.1rem;
  text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;padding-block:.32rem;border-radius:var(--radius-sm)}
.check:hover{color:var(--rust-deep)}
.check input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--accent);flex:0 0 auto}
.check .n{margin-inline-start:auto;color:var(--dim);font-size:.8rem;font-variant-numeric:tabular-nums;font-weight:600}

/* Collapsible filter group — bigger, clearer headers like a real store's rail. */
.facet-group{border-block-end:1px solid var(--line);padding-block:.9rem}
.facet-group:first-of-type{padding-block-start:0}
.facet-group:last-of-type{border-block-end:0}
.facet-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-weight:800;padding-block:.25rem}
.facet-group>summary::-webkit-details-marker{display:none}
.facet-group>summary::after{content:'+';font-size:1rem;color:var(--dim)}
.facet-group[open]>summary::after{content:'–'}
.facet-group-body{padding-block-start:.5rem}

/* --------------------------------------------------------------- pills */
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.07em;padding:.18rem .55rem;border-radius:var(--radius-pill);white-space:nowrap;font-weight:700}
.pill.plain{background:var(--surface-2);color:var(--dim)}
.pill.dealer{background:var(--dealer-bg);color:var(--dealer)}
.pill.buyer{background:var(--buyer-bg);color:var(--buyer)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.stop{background:var(--stop-bg);color:var(--stop)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}

/* Active-filter chips. */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:.24rem .7rem;
  text-decoration:none;color:var(--ink);transition:border-color .15s var(--ease),background .15s var(--ease)}
.chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.chip .x{color:var(--dim);font-weight:700;font-size:1rem;line-height:1}

/* --------------------------------------------------------------- price */
.price{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rust-deep)}
.price-lg{font-size:1.25rem}
.price-xl{font-size:1.7rem;letter-spacing:-.01em}

/* --------------------------------------------------------------- grid/cards */
/* Roomy product cards — ~4 across on a 1240px shell, ~2 on a phone. Big image,
   readable title, a bold price and an always-visible Add button. This is the
   card a real store leads with, sized for eyes that do not want to squint. */
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.tile{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease)}
.tile:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tile-media{display:block;overflow:hidden;background:var(--white);border-block-end:1px solid var(--line);padding:.75rem}
.thumb{aspect-ratio:1/1;width:100%;object-fit:contain;transition:transform .3s var(--ease)}
.tile:hover .thumb{transform:scale(1.04)}
.tile-body{padding:.85rem .95rem .5rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.brandline{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:800}
.ttl{font-size:.95rem;line-height:1.32;font-weight:700;margin:0;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ttl a.hit{text-decoration:none;color:inherit}
.ttl a.hit:hover{color:var(--rust-deep)}
.tile-pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-block-start:.05rem}
.tile-price{margin-block-start:auto;padding-block-start:.45rem;font-size:1.15rem;font-weight:800}
.quick-add{padding:.15rem .95rem 1rem}
.quick-add .btn{padding:.7rem .6rem;font-size:.95rem}

/* List view: the same catalog as a dense, scannable table of rows. */
.rows{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) 7rem 7rem 6rem;gap:.8rem;align-items:center;
  padding:.5rem .7rem;border-block-end:1px solid var(--line);font-size:.85rem;
  transition:background .12s var(--ease)}
.row:last-child{border-block-end:0}
.row:hover{background:var(--surface-2)}
.row-media img{width:56px;height:56px;object-fit:contain;background:var(--surface-2);border-radius:var(--radius-sm)}
.row-main .ttl{-webkit-line-clamp:1;font-weight:600}
.row-main .ttl a.hit{text-decoration:none}
.row-price{font-weight:800;text-align:end;color:var(--rust-deep)}
.row-add{display:flex;justify-content:flex-end}
.row-add .btn{padding:.36rem .6rem;font-size:.78rem}
@media (max-width:52rem){
  .row{grid-template-columns:48px minmax(0,1fr) auto;row-gap:.35rem}
  .row .stockcell{display:none}
}

.viewtoggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.viewtoggle a{padding:.3rem .7rem;font-size:.76rem;text-decoration:none;background:var(--surface);
  color:var(--dim);font-weight:700}
.viewtoggle a[aria-current="true"]{background:var(--navy);color:#fff}

/* --------------------------------------------------------------- product detail */
.detail-img{overflow:hidden;padding:.6rem;background:var(--surface);max-width:26rem}
.detail-img img{width:100%;aspect-ratio:3/2;max-height:18rem;object-fit:contain;background:var(--surface-2);border-radius:var(--radius-sm)}
.gallery-thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-block-start:.6rem}
.gallery-thumbs button{width:56px;height:56px;padding:2px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.gallery-thumbs button[aria-current="true"]{border-color:var(--accent)}
.gallery-thumbs img{width:100%;height:100%;object-fit:contain}

/* Added for the product page (routes/product.php, ProductPage.php): the
   breadcrumb trail, the hero magnify, the buy-box heading sizing, and the fixed
   mobile add-to-cart bar. Nothing here is used elsewhere. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.78rem;color:var(--dim);
  margin-block:.1rem 1rem}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{color:var(--faintink)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:700;max-width:26rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Hero magnify: a tasteful centred zoom on hover, applied only to a real
   photograph (never the placeholder). The thumbnail-swap half of the gallery is
   driven by app.js via .gallery-thumbs; the two are independent. */
.detail-img.zoomable{cursor:zoom-in}
.detail-img.zoomable img{transition:transform .35s var(--ease)}
.detail-img.zoomable:hover img{transform:scale(1.6)}

.buybox{max-width:34rem}
.buybox .eyebrow{margin-block-start:.2rem}
.buybox h1{font-size:var(--step-2);margin-block-end:.5rem}
.buybox .price-xl{line-height:1.05}
.pdp-meta{margin-block:.4rem .2rem}

/* Fixed mobile add-to-cart bar: small screens only; the desktop action lives in
   the buy box. body.has-buybar pads the page so the bar never covers the footer. */
.buybar{display:none}
@media (max-width:56rem){
  .buybar{display:flex;align-items:center;gap:.9rem;position:fixed;inset-inline:0;inset-block-end:0;z-index:50;
    padding:.6rem clamp(.8rem,4vw,1.2rem);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-block-start:1px solid var(--line-strong);box-shadow:0 -4px 14px rgba(17,20,26,.10)}
  .buybar .price{font-size:1.15rem;white-space:nowrap}
  .buybar form{margin:0}
  body.has-buybar main{padding-block-end:5.5rem}
}
@media (prefers-reduced-motion:reduce){
  .detail-img.zoomable:hover img{transform:none}
}

/* --------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:start;padding:.6rem .7rem;border-block-end:1px solid var(--line);vertical-align:top}
th{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700}
tbody tr:last-child td{border-block-end:0}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}
caption{text-align:start}

/* --------------------------------------------------------------- notices */
.notice{border:1px solid var(--line);border-inline-start:4px solid var(--line-strong);
  border-radius:var(--radius);padding:1rem 1.1rem;margin:0 0 1.2rem;background:var(--surface)}
.notice h2{margin:0 0 .35rem;font-size:1.05rem}
.notice.allow{border-inline-start-color:var(--buyer);background:var(--buyer-bg)}
.notice.stop{border-inline-start-color:var(--stop);background:var(--stop-bg)}
.notice.ffl{border-inline-start-color:var(--dealer);background:var(--dealer-bg)}
.notice.warn{border-inline-start-color:var(--warn);background:var(--warn-bg)}
.reasons{margin:.7rem 0 0;padding-inline-start:1.1rem;font-size:.84rem;color:var(--ink-2)}
.reasons li{margin-block-end:.25rem}

/* --------------------------------------------------------------- steps */
.steps{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 1.4rem;font-size:.78rem}
.steps li{display:flex;align-items:center;gap:.4rem;color:var(--dim)}
.steps li::after{content:"›";margin-inline-start:.5rem;color:var(--faintink)}
.steps li:last-child::after{content:""}
.steps li[aria-current="step"]{color:var(--ink);font-weight:800}

/* --------------------------------------------------------------- pager */
.pager{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin-block-start:1.6rem}
.pager a,.pager span{display:inline-block;min-width:2.3rem;text-align:center;padding:.4rem .6rem;
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;font-size:.86rem;background:var(--surface)}
.pager a:hover{border-color:var(--accent)}
.pager [aria-current="page"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.pager .gap{border:0;background:none;color:var(--dim)}

/* --------------------------------------------------------------- home */
/* A confident, uncluttered hero: a headline, one line of copy, two clear CTAs.
   No stats, no duplicate search, no department grid — the header carries those. */
.hero{background:var(--gradient-hero);color:#f6f2ea;border-radius:var(--radius-lg);
  padding:clamp(2rem,1.4rem + 3vw,3.75rem) clamp(1.5rem,1rem + 3vw,3.5rem);
  margin-block-end:1.8rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.hero-copy{max-width:40rem;position:relative;z-index:1}
.hero .eyebrow{color:var(--gold);font-size:.82rem;letter-spacing:.16em;margin-block-end:.7rem}
.hero h1{font-size:var(--step-3);line-height:1.05;color:#fff;margin:0 0 .9rem;letter-spacing:.005em}
.hero-sub{color:rgba(246,242,234,.9);font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  line-height:1.5;max-width:34rem;margin:0 0 1.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}

/* Section rhythm for the home shelves + showcase. */
.section{margin-block:2.4rem 0}
.section:first-of-type{margin-block-start:0}
.rowhead-link{white-space:nowrap}

/* --------------------------------------------------------------- dealer / qty */
.dealercard{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;
  border-block-end:1px solid var(--line);padding-block:1rem}
.dealercard:last-of-type{border-block-end:0}
.dealercard .name{font-weight:800;font-size:.96rem;margin:0 0 .15rem}
.dealercard .meta{font-size:.84rem;color:var(--dim);margin:.05rem 0}
.dealercard .pick{text-align:end;display:flex;flex-direction:column;gap:.4rem;align-items:flex-end}
@media (max-width:34rem){
  .dealercard{grid-template-columns:1fr}
  .dealercard .pick{align-items:stretch;text-align:start}
}
.qty{display:flex;gap:.35rem;align-items:center}
.qty input{width:4.4rem;text-align:center}

/* --------------------------------------------------------------- cart drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(17,20,26,.42);z-index:70;opacity:0;
  transition:opacity .25s var(--ease)}
.drawer-overlay.show{opacity:1}
.drawer-overlay[hidden]{display:none}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:80;width:min(26rem,92vw);
  background:var(--surface);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s var(--ease);visibility:hidden}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;border-block-end:1px solid var(--line);background:var(--surface-2)}
.drawer-title{margin:0;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}
.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);cursor:pointer}
.drawer-close:hover{border-color:var(--accent)}
.drawer-body{padding:1.1rem;overflow-y:auto;flex:1}
.drawer-empty{color:var(--dim);font-size:.9rem;text-align:center;padding-block:2rem}

/* --------------------------------------------------------------- style guide */
.kit-section{margin-block-end:1.5rem}
.kit-pills{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.kit-rail{max-width:18rem}

/* --------------------------------------------------------------- cart lines + checkout
   Added by the cart+checkout pages. The line-item list is shared by the cart
   drawer and the checkout order-summary aside so both read the same; the cart
   PAGE itself keeps the table (editable quantities want columns). No new colours
   or tokens — everything is drawn from the brand set defined at the top. */
.cart-lines{list-style:none;margin:0 0 1rem;padding:0}
.cart-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:.75rem;align-items:start;
  padding-block:.85rem;border-block-end:1px solid var(--line)}
.cart-line:first-child{padding-block-start:0}
.cart-line:last-child{border-block-end:0}
.cart-line-media{display:block;width:52px;height:52px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);overflow:hidden}
.cart-line-media img{width:100%;height:100%;object-fit:contain}
.cart-line-main{min-width:0}
.cart-line-main .ttl{font-size:.84rem;line-height:1.3;font-weight:600;margin:0 0 .1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-line-main .ttl a{text-decoration:none;color:inherit}
.cart-line-main .ttl a:hover{color:var(--rust-deep)}
.cart-line-end{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;white-space:nowrap}
.cart-line-qty{font-size:.78rem;color:var(--dim);font-variant-numeric:tabular-nums}

/* Subtotal + actions foot, shared by the drawer and the summary aside. */
.cart-foot{border-block-start:2px solid var(--navy);padding-block-start:.85rem}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-block-end:.9rem}
.cart-total .amt{font-weight:800;font-size:1.2rem;color:var(--rust-deep);font-variant-numeric:tabular-nums}
.cart-actions{display:flex;flex-direction:column;gap:.5rem}

/* Checkout small parts: the destination summary line, the "how this ships" note,
   the date-of-birth/state row, and the dealer search bar. */
.destline{color:var(--dim);font-size:.9rem;margin:0 0 1.1rem}
.destline strong{color:var(--ink)}
.ship-note{background:var(--surface-2);border-radius:var(--radius);padding:.75rem .9rem;
  font-size:.84rem;color:var(--ink-2);margin:0 0 1rem}
.form-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.form-row .field{margin-block-end:0}
.dealer-search{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end;margin:0}
.dealer-search .field{margin-block-end:0}
.dealer-search .grow{flex:1 1 12rem}

/* --------------------------------------------------------------- cart page + checkout (grouped)
   The cart page and the checkout share one vocabulary: items GROUPED by how they
   reach the customer (ships to you / ships to your dealer / pick up in store),
   each group with its own shipping line; a summary with Subtotal / Shipping /
   Tax / Total; delivery-option radio cards; and the address form with inline,
   per-field errors. Everything below draws on the brand tokens at the top. */
.nojs-only{display:inline}
.js .nojs-only{display:none}

/* Layout: groups left, sticky summary right; stacked on phones. */
.cart-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(18rem,1fr);gap:1.4rem;align-items:start}
.cart-main{min-width:0}
.cart-summary{position:sticky;top:calc(var(--header-h) + .8rem)}
.cart-summary h2,.co-summary h2{font-size:1.05rem;margin:0 0 .8rem;padding-block-end:.5rem;border-block-end:2px solid var(--navy)}
@media (max-width:56rem){
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
}

/* A delivery group. */
.cart-group{margin-block-end:1rem;overflow:hidden}
.cart-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;
  padding:.7rem 1rem;background:var(--surface-2);border-block-end:1px solid var(--line)}
.cart-group-kind{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--navy);
  display:inline-flex;align-items:center;gap:.45rem}
.cart-group-kind::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--buyer)}
.cart-group-dealer::before{background:var(--dealer)}
.cart-group-store::before{background:var(--navy)}
.cart-group-to{font-size:.84rem;color:var(--ink-2)}
.cart-group .cart-lines{margin:0;padding:0 1rem}
.cart-group .cart-line:first-child{padding-block-start:.9rem}
.cart-group .cart-line:last-child{padding-block-end:.9rem}
.cart-group-foot{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 1rem;font-size:.86rem;
  color:var(--ink-2);border-block-start:1px dashed var(--line-strong);background:var(--surface)}
.cart-group-ship{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.co-summary .cart-group{margin-block-end:.8rem}
.co-summary .cart-group-head{padding:.5rem .8rem}
.co-summary .cart-group .cart-lines{padding:0 .8rem}
.co-summary .cart-group-foot{padding:.45rem .8rem;font-size:.82rem}

/* An editable line: thumb | details | stepper | price+remove. */
.cart-line-edit{grid-template-columns:72px minmax(0,1fr) auto auto;gap:.9rem;align-items:center}
.cart-line-edit .cart-line-media{width:72px;height:72px}
.cart-line-edit .ttl{font-size:.92rem;-webkit-line-clamp:2}
.cart-line-meta{font-size:.8rem;color:var(--dim);margin:0 0 .15rem}
.cart-line-unit{font-size:.84rem;color:var(--ink-2);margin:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cart-line-note{font-size:.78rem;color:var(--dim);margin:.25rem 0 0}
.cart-line-note.stop{color:var(--stop);font-weight:700}
.cart-line-ctl{display:flex;align-items:center}
.cart-line-edit .cart-line-end{gap:.35rem;min-width:5.5rem}
.cart-line-edit .cart-line-end form{margin:0}
@media (max-width:36rem){
  .cart-line-edit{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"media main main" "ctl ctl end";row-gap:.6rem;column-gap:.7rem}
  .cart-line-edit .cart-line-media{grid-area:media;width:64px;height:64px}
  .cart-line-edit .cart-line-main{grid-area:main}
  .cart-line-edit .cart-line-ctl{grid-area:ctl}
  .cart-line-edit .cart-line-end{grid-area:end;flex-direction:row;align-items:center;justify-content:flex-end;gap:.8rem}
}

/* The − n + stepper. The number input is the source of truth; the buttons post a
   step and the server clamps to stock. */
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--surface);overflow:hidden}
.qty-stepper button[name=step]{width:2.1rem;height:2.2rem;border:0;background:var(--surface-2);color:var(--ink);font-size:1.05rem;
  line-height:1;cursor:pointer;font-weight:700}
.qty-stepper button[name=step]:hover:not(:disabled){background:var(--surface-3)}
.qty-stepper button[name=step]:disabled{color:var(--faintink);cursor:not-allowed}
.qty-stepper input[type=number]{width:3.2rem;border:0;border-radius:0;text-align:center;padding:.45rem .2rem;
  -moz-appearance:textfield;appearance:textfield;font-weight:700;box-shadow:none}
.qty-stepper input[type=number]::-webkit-outer-spin-button,.qty-stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper input[type=number]:focus{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none;border-color:transparent}
.qty-stepper .linkbtn{margin-inline:.5rem}

/* Delivery-option radio cards (cart summary: compact; checkout: full width). */
.opts{margin:0 0 1rem;padding:0;border:0}
.opts legend{margin-block-end:.4rem}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:start;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:.65rem .8rem;margin-block-end:.5rem;
  text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);background:var(--surface);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);background:#fffdfa}
.opt input{margin:.2rem 0 0;width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.opt-main{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.opt-label{font-weight:700}
.opt-note{font-size:.8rem;color:var(--dim);font-weight:400}
.opt-price{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.opt[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* The cart summary's estimate box. */
.estimate{margin:0 0 1rem;padding:.8rem;background:var(--surface-2);border-radius:var(--radius)}
.estimate-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:700;margin:0 0 .45rem}
.estimate-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:.45rem;align-items:center}
.estimate-row select,.estimate-row input{padding:.45rem .5rem;font-size:.86rem}
.estimate-row .btn{padding:.45rem .7rem;font-size:.86rem}
.estimate .field-error{margin-block-start:.4rem}
@media (max-width:24rem){.estimate-row{grid-template-columns:1fr 1fr}.estimate-row .btn{grid-column:1/-1}}

/* Subtotal / Shipping / Tax / Total. */
.totals{margin:0 0 1rem;border-block-start:2px solid var(--navy);padding-block-start:.6rem}
.totals>div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding-block:.3rem;font-size:.92rem}
.totals dt{color:var(--ink-2)}
.totals dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.totals .grand{border-block-start:1px solid var(--line);margin-block-start:.35rem;padding-block-start:.6rem;font-size:1.05rem}
.totals .grand dt{color:var(--ink);font-weight:800}
.totals .grand dd{font-weight:800;font-size:1.25rem;color:var(--rust-deep)}
.totals-hint{font-size:.76rem;color:var(--dim);margin:-.1rem 0 .35rem}
.keep-shopping{display:block;text-align:center;font-size:.9rem;color:var(--accent);margin-block-start:.25rem}
.summary-todo{background:var(--warn-bg);border-inline-start:3px solid var(--warn);border-radius:var(--radius);
  padding:.6rem .8rem;margin:0 0 .8rem;font-size:.84rem}
.summary-todo-title{font-weight:800;margin:0 0 .25rem;color:var(--warn)}
.summary-todo ul{margin:0;padding-inline-start:1.1rem}

/* Checkout: sections, the sticky summary, inline field errors, dealer slot. */
.co-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(19rem,1fr);gap:1.6rem;align-items:start}
.co-main{min-width:0}
.co-aside{position:sticky;top:calc(var(--header-h) + .8rem)}
.co-summary{transition:opacity .15s var(--ease)}
.co-summary.htmx-request{opacity:.55}
.co-section{margin-block-end:1rem}
.co-section h2{display:flex;align-items:baseline;gap:.6rem;font-size:1.05rem;margin:0 0 .6rem}
.co-section h2 .n{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.78rem;font-weight:800;flex:0 0 auto}
.co-section .lede{margin-block-end:.8rem;font-size:.88rem}
.co-section .form-row{margin-block-end:1rem}
.co-section .field-error[hidden]{display:none}
.co-address-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem 1rem}
.co-address-grid .field{margin:0}
.co-address-grid .span-6{grid-column:span 6}.co-address-grid .span-4{grid-column:span 4}
.co-address-grid .span-3{grid-column:span 3}.co-address-grid .span-2{grid-column:span 2}
@media (max-width:40rem){
  .co-address-grid .span-4,.co-address-grid .span-3{grid-column:span 6}
  .co-address-grid .span-2{grid-column:span 3}
  .co-section .field-sm,.co-section .field-md,.co-section .field-lg{max-width:none}
  .co-section .form-row>.field{flex:1 1 100%}
  .co-place .btn{display:flex;width:100%}
}
.co-place{border-block-start:1px solid var(--line);padding-block-start:1rem;margin-block-start:1rem}
.co-place .btn{font-size:1.05rem;padding:.8rem 1.6rem}
.check-inline{display:flex;align-items:center;gap:.55rem;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);
  font-weight:400;cursor:pointer;margin:0}
.check-inline input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--accent)}
.co-pickup-card{background:var(--surface-2);border-radius:var(--radius);padding:.8rem 1rem;font-size:.9rem;margin:0 0 1rem}
.co-pickup-card p{margin:0 0 .3rem}
.chosen-dealer{border:1px solid var(--line-strong);border-inline-start:4px solid var(--dealer);border-radius:var(--radius);
  padding:.7rem .9rem;background:var(--dealer-bg)}
.chosen-dealer p{margin:0 0 .2rem}
/* The mobile summary fold: a bar with the total that opens the summary. On wide
   screens the bar is hidden and the summary is simply always open. */
.co-fold>summary{list-style:none;display:none}
.co-fold>summary::-webkit-details-marker{display:none}
@media (max-width:56rem){
  .co-layout{grid-template-columns:1fr}
  .co-aside{position:static;order:-1}
  .co-fold{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .co-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:.8rem;cursor:pointer;
    padding:.8rem 1rem;font-weight:700;color:var(--navy)}
  .co-fold>summary::after{content:"";width:.55rem;height:.55rem;border-inline-end:2px solid var(--dim);border-block-end:2px solid var(--dim);
    transform:rotate(45deg);margin-inline-start:auto;margin-inline-end:.2rem;transition:transform .15s var(--ease)}
  .co-fold[open]>summary::after{transform:rotate(-135deg)}
  .co-fold-total{font-weight:800;color:var(--rust-deep);font-variant-numeric:tabular-nums}
  .co-fold>.co-summary{padding:0 1rem 1rem}
  .co-fold>.co-summary>h2{display:none}
}
.details-toggle>summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--navy);list-style:none;display:flex;align-items:center;gap:.4rem}
.details-toggle>summary::-webkit-details-marker{display:none}
.details-toggle>summary::before{content:"+";display:inline-flex;width:1.2rem;height:1.2rem;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:.9rem;color:var(--dim)}
.details-toggle[open]>summary::before{content:"–"}
.details-body{padding-block-start:.8rem}

/* Receipt: groups + itemised totals. */
.receipt-groups .cart-group{margin-block-end:1rem}
.receipt-steps{margin:0;padding-inline-start:1.1rem;font-size:.9rem}
.receipt-steps li{margin-block-end:.35rem}

/* --------------------------------------------------------------- catalog listing
   The listing page chrome (added by the catalog-browse agent): the page heading,
   the results toolbar (count + sort + grid/list toggle), the filter-rail head,
   the empty state, and the htmx "loading" dim on the results region. The rail
   itself, the grid, the rows, the chips, the facet groups, the view toggle and
   the pager all reuse classes defined above. */
.catalog-head{margin-block-end:1rem}
.catalog-head h1{margin:0 0 .2rem}
.catalog-head .lede{margin:0}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1rem;flex-wrap:wrap;
  margin-block-end:.9rem;padding-block-end:.7rem;border-block-end:1px solid var(--line)}
.result-count{margin:0;font-size:.86rem;color:var(--dim);font-weight:600}
.result-count strong{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.toolbar-controls{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.sortwrap{display:flex;align-items:center;gap:.4rem}
.sortwrap .sort-label{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:700}
.sortwrap select{width:auto;min-width:11rem;padding-block:.34rem}

/* Filter-rail head (the form is a .card.pad; .filters supplies the sticky). */
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-block-end:.4rem;padding-block-end:.55rem;border-block-end:2px solid var(--navy)}
.rail-head h2{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.rail-head a{font-size:.75rem;color:var(--accent);font-weight:700;text-decoration:none}
.rail-head a:hover{text-decoration:underline}
.rail-actions{margin-block-start:.9rem}

.empty-state{padding-block:2.6rem}
.empty-state h2{margin:0 0 .4rem}
.empty-state p{max-width:44ch;margin-inline:auto}

/* htmx in-place update: dim the results while the fragment is in flight. Driven
   by hx-indicator="#results", which puts .htmx-request on #results itself; the
   innerHTML swap leaves that class on the element, so the dim releases cleanly.
   The !important reduced-motion rule above still zeroes this transition. */
#results{position:relative;transition:opacity .18s var(--ease)}
#results.htmx-request{opacity:.5}
/* A thin indeterminate progress bar across the top of the results while a swap
   is in flight — a real "working" cue rather than a dim alone. */
#results.htmx-request::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:3px;border-radius:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--rust),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:results-progress 1s var(--ease) infinite}
@keyframes results-progress{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}

/* --------------------------------------------------------------- motion off */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .tile:hover{transform:none}
  .tile:hover .thumb{transform:none}
  .dept:hover{transform:none}
}

/* =============================================================================
   Brasstown site — the WordPress theme's site.css, ported.

   Everything below is brasstown-storefront/assets/css/site.css (the design of
   the Brasstown website), class for class, so View.php and SitePages.php can
   carry the theme's markup 1:1. Differences, all forced by this app's CSP
   (`style-src 'self'`, no inline style) or by what this storefront is:
     - the hero and the department cards take their photograph as an <img>
       (.bdg-hero-bg / .bdg-dept-bg) behind an overlay, not an inline
       background-image; app.js rotates the hero by swapping that img's src;
     - fonts are the self-hosted @font-face names at the top of this file, so
       the theme's Google Fonts link is not needed;
     - WooCommerce/My Account rules are dropped (no accounts here), and the
       footer gains .bdg-footer-compliance for the storefront's legal text;
     - `.screen-reader-text` is the theme's name for `.vh`.
   ========================================================================== */
:root{
  --bdg-ink:#11141a; --bdg-night:#1d3557; --bdg-rust:#8d3a1d; --bdg-rust-deep:#6f2d15;
  --bdg-gold:#d4b26f; --bdg-paper:#f4efe6; --bdg-white:#ffffff; --bdg-faint:#dcd4c9;
  --bdg-shadow:0 24px 60px rgba(10,14,20,0.2);
  --bdg-radius-lg:22px; --bdg-radius-md:14px; --bdg-radius-sm:10px;
}
/* The theme's links are unadorned; this storefront's default keeps the underline
   for body copy on the catalog pages, so the reset is scoped to the theme's own
   regions. */
.bdg-header a,.bdg-footer a,.bdg-floating-cart,.bdg-btn,.bdg-main-bleed a{text-decoration:none}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bdg-wrap{width:min(1240px,calc(100% - 2.4rem));margin:0 auto}
.bdg-header{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px)}
.bdg-topbar{background:linear-gradient(90deg,#0f141c 0%,#1d3557 55%,#8d3a1d 100%);color:#f3efe8;font-size:0.8rem;letter-spacing:0.02em}
.bdg-topbar .bdg-wrap{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:1rem}
.bdg-topbar p{margin:0}
.bdg-topbar-right{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.bdg-topbar a{color:var(--bdg-gold);font-weight:700}
.bdg-topbar-gnp{width:120px;max-width:100%;border-radius:8px;background:#fff;padding:0.2rem 0.35rem;margin-left:0.25rem;flex-shrink:0}
.bdg-topbar-rx-link{border:1px solid rgba(255,255,255,0.3);border-radius:999px;padding:0.2rem 0.7rem;color:#fff9ec !important;font-size:0.78rem;letter-spacing:0.03em}
.bdg-brand-row{background:rgba(244,239,230,0.94);border-bottom:1px solid rgba(23,28,36,0.09)}
.bdg-brand-row .bdg-wrap{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:74px}
.bdg-logo{display:inline-flex;align-items:center;justify-self:start;min-height:auto;padding:0.3rem 0.5rem;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:linear-gradient(112deg,#1a2f4e 0%,#264164 62%,#2e4b71 100%);box-shadow:0 10px 26px rgba(13,23,35,0.2)}
.bdg-logo img{max-width:250px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35))}
.bdg-quick-search{position:relative;display:flex;align-items:center}
.bdg-quick-search input{width:100%;min-height:40px;border:1px solid rgba(15,20,28,0.16);border-radius:999px;padding:0 130px 0 1rem;font-size:0.98rem;background:rgba(255,255,255,0.88)}
.bdg-quick-search button{position:absolute;right:5px;border:0;min-height:30px;padding:0 .9rem;font-size:.88rem;border-radius:999px;background:linear-gradient(90deg,var(--bdg-rust) 0%,var(--bdg-rust-deep) 100%);color:var(--bdg-white);font-weight:700;cursor:pointer}
.bdg-action-links{display:flex;align-items:center;gap:0.6rem}
.bdg-action-links a{border:1px solid rgba(17,20,26,0.12);border-radius:999px;padding:0.45rem 0.85rem;font-size:.92rem;font-weight:700;background:rgba(255,255,255,0.76)}
.bdg-pill{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:0.4rem;border-radius:50%;background:var(--bdg-night);color:var(--bdg-white);font-size:0.78rem}
.bdg-nav{background:#11141a;color:#f0ede8;border-bottom:1px solid rgba(250,250,250,0.08)}
.bdg-nav .bdg-wrap{display:flex;align-items:center;min-height:46px}
.bdg-menu-toggle{display:none;border:0;border-radius:999px;padding:0.46rem 0.92rem;font-weight:700;background:var(--bdg-rust);color:var(--bdg-white)}
body.nav-open{overflow:hidden}
.bdg-nav-inner{width:100%}
/* --- mobile chrome: hidden on desktop, shown under 760px (see media query) --- */
.bdg-mobilebar,.bdg-msearch,.bdg-drawer,.bdg-drawer-scrim{display:none}
.bdg-search-word{display:inline}
.bdg-quick-search button svg{display:none}
.bdg-mb-btn{display:inline-flex;align-items:center;justify-content:center;position:relative;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--bdg-ink,#171c24);cursor:pointer;border-radius:12px}
.bdg-mb-btn:active{background:rgba(23,28,36,0.06)}
.bdg-mb-badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--bdg-rust);color:#fff;font-size:.68rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.bdg-main-nav{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:1.4rem}
.bdg-main-nav a{display:inline-flex;align-items:center;min-height:46px;font-size:.95rem;font-weight:700;letter-spacing:0.02em;position:relative}
.bdg-main-nav a::after{content:'';position:absolute;left:0;bottom:12px;width:0;height:2px;background:var(--bdg-gold);transition:width 0.25s ease}
.bdg-main-nav a:hover::after,.bdg-main-nav .current-menu-item a::after,.bdg-main-nav a[aria-current="page"]::after{width:100%}
.bdg-main-nav a[aria-current="page"]{color:var(--bdg-gold)}
.bdg-main{background:radial-gradient(circle at 95% 2%,rgba(29,53,87,0.19) 0%,rgba(29,53,87,0) 42%),radial-gradient(circle at 4% 20%,rgba(141,58,29,0.14) 0%,rgba(141,58,29,0) 38%),var(--bdg-paper);min-height:50vh}
.bdg-hero{position:relative;isolation:isolate;overflow:hidden;color:#f6f1e8;background:#11141a;padding:clamp(1.8rem,4vw,3rem) 0;border-bottom:1px solid rgba(255,255,255,0.12)}
.bdg-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:opacity .6s ease}
.bdg-hero-bg.is-fading{opacity:0}
.bdg-hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(112deg,rgba(8,13,19,0.9) 0%,rgba(16,35,52,0.78) 52%,rgba(96,38,18,0.58) 100%)}
.bdg-hero .bdg-wrap{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:stretch}
.bdg-eyebrow{margin:0 0 0.45rem;text-transform:uppercase;font-size:0.78rem;letter-spacing:0.11em;color:#c88f75;font-weight:900}
.bdg-hero h1,.bdg-section-head h2,.bdg-section h2,.bdg-footer-links h3{margin:0;font-family:'Alfa Slab One','Georgia',serif;font-weight:400;letter-spacing:0.02em}
.bdg-hero h1{font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.05;margin-bottom:0.7rem}
.bdg-hero-copy p{max-width:86ch;margin:0;color:rgba(247,243,236,0.91);font-size:0.95rem}
.bdg-hero-actions{margin-top:1rem;display:flex;gap:0.78rem;flex-wrap:wrap}
.bdg-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;min-height:40px;padding:0 1.1rem;font-size:.92rem;font-weight:800;letter-spacing:0.01em;transition:transform 0.2s ease,box-shadow 0.2s ease}
.bdg-btn:hover{transform:translateY(-1px)}
.bdg-btn-primary{background:linear-gradient(90deg,var(--bdg-rust) 0%,#a64a22 100%);color:var(--bdg-white);box-shadow:0 12px 24px rgba(141,58,29,0.34)}
.bdg-btn-ghost{border:1px solid rgba(255,255,255,0.34);color:#fcf8f1;background:rgba(255,255,255,0.06)}
.bdg-btn-ghost-dark{border:1px solid rgba(17,20,26,0.16);color:#152538;background:rgba(255,255,255,0.9)}
.bdg-section-shopcards{padding-top:2.6rem;padding-bottom:2.2rem}
.bdg-shop-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.bdg-shop-card{border-radius:var(--bdg-radius-lg);border:1px solid rgba(20,24,30,0.08);background:linear-gradient(135deg,rgba(255,255,255,0.92) 0%,rgba(236,230,220,0.9) 100%);box-shadow:0 16px 36px rgba(18,23,31,0.09);padding:1.2rem;display:flex;flex-direction:column;gap:0.7rem}
.bdg-shop-card h2{margin:0;color:#0f1521;font-size:clamp(1.15rem,2vw,1.5rem)}
.bdg-silencer-logo{width:200px;max-width:100%;padding:0.55rem 0.65rem;border-radius:10px;background:#fff;border:1px solid rgba(20,24,30,0.08)}
.bdg-shop-card p{margin:0.35rem 0 0;color:#2f3845}
.bdg-shop-card .bdg-btn{margin-top:auto;align-self:flex-start}
.bdg-shop-card-gunstore{background:linear-gradient(118deg,rgba(9,14,20,0.85) 0%,rgba(17,39,61,0.72) 52%,rgba(111,45,21,0.55) 100%),url(/assets/img/firearms-980x660.jpg);background-size:cover;background-position:center}
.bdg-shop-card-gunstore h2,.bdg-shop-card-gunstore p,.bdg-shop-card-gunstore .bdg-eyebrow{color:#f8f3ea}
.bdg-section-featured{padding-top:1rem}
.bdg-featured-carousel{position:relative;border-radius:var(--bdg-radius-lg);border:1px solid rgba(20,24,30,0.1);background:#fff;box-shadow:0 12px 28px rgba(15,19,24,0.08);padding:0.65rem 2.4rem 1.2rem}
.bdg-featured-carousel-compact{width:min(1040px,100%);margin:0 auto}
.bdg-featured-viewport{overflow:hidden}
.bdg-featured-track{display:flex;margin:0 -0.45rem;transition:transform 420ms ease;will-change:transform}
.bdg-featured-slide{min-width:33.3333%;padding:0 0.45rem;opacity:0.56;transform:scale(0.92);transition:transform 280ms ease,opacity 280ms ease}
.bdg-featured-slide.is-visible{opacity:0.78;transform:scale(0.95)}
.bdg-featured-slide.is-focus{opacity:1;transform:scale(1)}
.bdg-featured-image{display:block;border-radius:var(--bdg-radius-md);overflow:hidden;border:1px solid rgba(20,24,30,0.09);background:#f6f2ea;min-height:138px;aspect-ratio:4 / 3}
.bdg-featured-image img{width:100%;height:100%;object-fit:cover}
.bdg-featured-content{margin-top:0.35rem;border-radius:12px;border:1px solid rgba(20,24,30,0.08);background:#fff;padding:0.48rem 0.58rem 0.55rem;display:flex;flex-direction:column;gap:0.22rem}
.bdg-featured-title{margin:0;color:#172d4a;font-family:'Lato',sans-serif;font-weight:800;line-height:1.3;font-size:0.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bdg-featured-price{color:#8d3a1d !important;font-weight:900;font-size:0.95rem;margin:0}
.bdg-carousel-nav{position:absolute;top:42%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:linear-gradient(90deg,#8d3a1d 0%,#6f2d15 100%);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:0 10px 24px rgba(111,45,21,0.3)}
.bdg-carousel-prev{left:0.35rem}
.bdg-carousel-next{right:0.35rem}
.bdg-carousel-nav:disabled{opacity:0.45;cursor:default}
.bdg-carousel-dots{display:flex;justify-content:center;gap:0.42rem;margin-top:0.95rem}
.bdg-carousel-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(29,53,87,0.3);cursor:pointer;padding:0}
.bdg-carousel-dots button.is-active{background:#8d3a1d}
.bdg-section{padding:clamp(0.95rem,2vw,1.6rem) 0}
.bdg-section-head{max-width:76ch;margin-bottom:0.7rem}
.bdg-section-head p{margin:0 0 0.5rem;text-transform:uppercase;font-size:0.78rem;letter-spacing:0.11em;color:#6f2d15;font-weight:900}
.bdg-section-head h2{font-size:clamp(1.15rem,1.9vw,1.6rem);color:#0f1521;line-height:1.14}
.bdg-section-depts{padding-top:1.5rem}
.bdg-dept-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.bdg-dept-card{min-height:208px;border-radius:var(--bdg-radius-lg);padding:0.82rem;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:space-between;color:#f6f2e9;box-shadow:var(--bdg-shadow);animation:bdgIn 480ms ease both;position:relative;overflow:hidden;isolation:isolate}
.bdg-dept-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,24,0.54) 0%,rgba(10,14,19,0.88) 78%,rgba(10,14,19,0.94) 100%);z-index:0}
.bdg-dept-card > *{position:relative;z-index:1}
.bdg-dept-card > .bdg-dept-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1}
.bdg-dept-card > div{border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(9,13,18,0.35);padding:0.58rem 0.66rem;backdrop-filter:blur(1.8px)}
.bdg-dept-card h3{margin:0 0 0.5rem;font-family:'Lato',sans-serif;font-weight:900;font-size:1.08rem;line-height:1.22;letter-spacing:0.035em;text-shadow:0 2px 8px rgba(0,0,0,0.32)}
.bdg-dept-card p{margin:0;font-size:0.94rem;max-width:30ch;text-shadow:0 1px 6px rgba(0,0,0,0.32)}
.bdg-dept-card a{width:fit-content;border-radius:999px;border:1px solid rgba(255,255,255,0.44);padding:0.45rem 0.95rem;font-weight:800;background:rgba(8,12,17,0.42)}
.bdg-shop-hero{position:relative;isolation:isolate;overflow:hidden;margin-top:0;color:#f5f2eb;background:#11141a;border-bottom:1px solid rgba(255,255,255,0.14)}
.bdg-shop-hero .bdg-hero-overlay{background:linear-gradient(112deg,rgba(8,13,19,0.72) 0%,rgba(16,35,52,0.5) 52%,rgba(96,38,18,0.42) 100%)}
.bdg-shop-hero .bdg-eyebrow{color:#e9c3ad}
.bdg-shop-hero .bdg-wrap{min-height:clamp(240px,36vw,440px);display:flex;align-items:flex-end;padding:clamp(1.4rem,4vw,2.6rem) 0}
.bdg-shop-hero-copy{width:min(780px,100%);border-radius:var(--bdg-radius-md);background:rgba(9,13,19,0.56);border:1px solid rgba(255,255,255,0.15);backdrop-filter:blur(4px);box-shadow:var(--bdg-shadow);padding:clamp(1.4rem,3vw,2.25rem)}
.bdg-shop-hero-copy h1{margin:0;color:#fff8ee;font-family:'Alfa Slab One','Georgia',serif;font-weight:400;line-height:1.06;font-size:clamp(1.5rem,3vw,2.4rem)}
.bdg-shop-hero-copy p{margin:0.7rem 0 0;max-width:65ch;color:rgba(249,245,236,0.93)}
.bdg-shop-hero-copy .bdg-btn{margin-top:0.95rem;align-self:flex-start}
.bdg-section-cta .bdg-wrap{border-radius:var(--bdg-radius-lg);background:linear-gradient(120deg,#11141a 0%,#1d3557 62%,#8d3a1d 100%);color:#fff;text-align:center;padding:clamp(1.8rem,4vw,2.6rem)}
.bdg-contact-shell h1{margin:0;font-family:'Alfa Slab One','Georgia',serif;font-weight:400;line-height:1.08;font-size:clamp(1.5rem,3vw,2.2rem)}
.bdg-contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:0.9rem}
.bdg-contact-details{display:grid;grid-template-columns:1.1fr 0.9fr;gap:1rem;margin-top:1rem}
.bdg-contact-card{border-radius:var(--bdg-radius-md);border:1px solid rgba(17,20,26,0.1);background:#fff;box-shadow:0 8px 20px rgba(17,21,27,0.06);padding:1rem}
.bdg-contact-card h2{margin:0 0 0.45rem;color:#172d4a;font-size:1.12rem}
.bdg-contact-card p{margin:0 0 0.6rem;color:#39424d}
.bdg-contact-card a:not(.bdg-btn){color:var(--bdg-rust-deep);font-weight:800}
.bdg-contact-location .bdg-btn{margin-top:0.85rem}
.bdg-contact-location{padding:1.35rem 1.35rem 1.45rem}
.bdg-contact-location .bdg-btn-map{color:#fff !important}
.bdg-section-cta h2{margin:0 0 0.8rem;font-size:clamp(1.42rem,3vw,2rem)}
.bdg-section-cta p{margin:0 0 1.1rem;color:rgba(252,249,242,0.88)}
.bdg-floating-cart{position:fixed;right:1.2rem;bottom:1.2rem;z-index:40;border-radius:999px;background:linear-gradient(90deg,var(--bdg-rust) 0%,var(--bdg-rust-deep) 100%);color:#fff;padding:0.55rem 0.85rem;font-size:.9rem;box-shadow:0 16px 26px rgba(141,58,29,0.42);font-weight:800;display:inline-flex;align-items:center;gap:0.5rem}
.bdg-floating-cart .bdg-floating-cart-count{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.24);font-size:0.82rem}
.bdg-footer{margin-top:1.8rem;background:#0f131a;color:#e7e3dd;border-top:1px solid rgba(255,255,255,0.08)}
.bdg-footer .bdg-wrap{display:grid;grid-template-columns:1.5fr repeat(2,1fr);gap:1rem;padding:2rem 0}
.bdg-footer-brand img{width:96px;margin-bottom:0.8rem}
.bdg-footer-good-neighbor{margin-top:0.7rem}
.bdg-footer-good-neighbor img{width:168px;max-width:100%;border-radius:8px;background:#fff;padding:0.3rem 0.45rem}
.bdg-footer-links h3{margin:0 0 0.8rem;font-size:1rem;color:#f8f3ea}
.bdg-footer-links,.bdg-footer-links p,.bdg-footer-links a{display:grid;gap:0.45rem;margin:0;color:#d6d0c5}
.bdg-footer-legal{border-top:1px solid rgba(255,255,255,0.08);text-align:center;font-size:0.86rem;color:#a8a196;padding:0.95rem}
.bdg-home-hero-grid{max-width:1200px}
.bdg-hero-copy{display:flex;flex-direction:column;gap:1rem}
.bdg-hero-copy p{margin:0;max-width:96ch;color:rgba(247,243,236,0.92)}
.bdg-section-prescription{padding-top:1.4rem}
.bdg-prescription-shell{display:grid;grid-template-columns:0.95fr 1.05fr;gap:1rem;align-items:start}
.bdg-prescription-compounding-card{border-radius:var(--bdg-radius-lg);border:1px solid rgba(19,26,34,0.1);background:linear-gradient(128deg,#112641 0%,#1d3557 62%,#8d3a1d 100%);color:#fff;box-shadow:0 16px 34px rgba(15,20,28,0.22);padding:0.72rem}
.bdg-prescription-compounding-card img{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,0.2);margin-bottom:0.6rem}
.bdg-prescription-compounding-card h3{margin:0;color:#fff7eb;font-family:'Alfa Slab One','Georgia',serif;font-weight:400;font-size:clamp(1rem,1.9vw,1.3rem)}
.bdg-prescription-compounding-card p{margin:0.5rem 0 0;color:rgba(250,246,238,0.94);line-height:1.5}
.bdg-prescription-compounding-card .bdg-btn{margin-top:0.85rem}
.bdg-prescription-intro{border-radius:var(--bdg-radius-lg);border:1px solid rgba(19,26,34,0.09);background:#fff;box-shadow:0 14px 32px rgba(15,19,24,0.06);padding:clamp(0.85rem,2vw,1.15rem)}
.bdg-prescription-intro p{margin:0;color:#333c49;line-height:1.6}
.bdg-prescription-intro p + p{margin-top:0.6rem}
.bdg-rx-actions{margin-top:0.8rem;display:flex;flex-wrap:wrap;gap:0.55rem}
.bdg-prescription-pillar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7rem;margin-top:0.7rem}
.bdg-rx-support-card{margin-top:0.7rem;border-radius:12px;border:1px solid rgba(20,24,30,0.12);background:linear-gradient(145deg,#f7f2e8 0%,#fff 100%);padding:0.72rem}
.bdg-rx-support-card h4{margin:0;color:#142b47;font-size:0.95rem}
.bdg-rx-support-card h4 a{color:#8d3a1d}
.bdg-rx-support-card p{margin:0.35rem 0 0;color:#334050;line-height:1.4;font-size:0.88rem}
.bdg-rx-hours-label{margin-top:0.5rem !important;font-weight:800;color:#132744 !important}
.bdg-pillar-card{border-radius:12px;border:1px solid rgba(20,24,30,0.1);background:linear-gradient(145deg,#ffffff 0%,#f4efe6 100%);padding:0.68rem}
.bdg-pillar-card h4{margin:0;color:#153053;font-size:0.92rem}
.bdg-pillar-card p{margin:0.45rem 0 0;color:#344050;line-height:1.45;font-size:0.88rem}
.bdg-section-pharmacy-services{padding-top:0.1rem}
.bdg-service-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.8rem}
.bdg-service-lane{border-radius:var(--bdg-radius-md);border:1px solid rgba(19,26,34,0.1);background:linear-gradient(145deg,#ffffff 0%,#f7f2e9 100%);box-shadow:0 10px 24px rgba(15,19,24,0.06);padding:0.82rem;display:flex;flex-direction:column;gap:0.45rem}
.bdg-service-lane h3{margin:0;color:#132744;font-size:0.98rem}
.bdg-service-lane ul{margin:0;padding:0;list-style:none;display:grid;gap:0.35rem}
.bdg-service-lane li{position:relative;padding-left:0.92rem;color:#313b48;line-height:1.35;font-size:0.9rem}
.bdg-service-lane li::before{content:'';position:absolute;left:0;top:0.5em;width:0.36rem;height:0.36rem;border-radius:50%;background:#8d3a1d}
.bdg-pharmacy-service-cta{margin-top:0.7rem;display:flex;flex-wrap:wrap;gap:0.65rem;justify-content:center}
.bdg-section-shopcards{padding-top:0.35rem;padding-bottom:1.5rem}
.bdg-shop-card{padding:0.95rem;min-height:206px}
.bdg-shop-card-silencer{background:linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(238,233,224,0.92) 100%)}
.bdg-shop-card-silencer .bdg-eyebrow{color:#7b3118}
.bdg-cta-links{display:flex;justify-content:center;gap:0.7rem;flex-wrap:wrap}
.bdg-section-cta .bdg-btn-ghost{border-color:rgba(255,255,255,0.42);color:#fff;background:rgba(255,255,255,0.08)}
@keyframes bdgIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1080px) {
  .bdg-brand-row .bdg-wrap{grid-template-columns:1fr;padding:0.9rem 0}
  .bdg-logo img{max-width:280px}
  .bdg-action-links{justify-content:flex-start}
  .bdg-hero .bdg-wrap,.bdg-home-hero-grid,.bdg-prescription-shell,.bdg-shop-card-grid{grid-template-columns:1fr}
  .bdg-featured-slide{min-width:50%}
  .bdg-dept-grid,.bdg-service-lanes,.bdg-footer .bdg-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bdg-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bdg-contact-details{grid-template-columns:1fr}
}
@media (max-width: 760px) {
  /* The three desktop tiers and the floating cart give way to one compact bar. */
  .bdg-topbar,.bdg-brand-row,.bdg-nav,.bdg-floating-cart{display:none}
  .bdg-mobilebar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.15rem;
    padding:.3rem .5rem;background:rgba(244,239,230,0.97);border-bottom:1px solid rgba(23,28,36,0.1)}
  .bdg-mb-logo{justify-self:center;display:inline-flex;align-items:center;min-height:44px;padding:.2rem .55rem;border-radius:10px;
    background:linear-gradient(112deg,#1a2f4e 0%,#264164 62%,#2e4b71 100%)}
  .bdg-mb-logo img{height:30px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  /* Collapsible search drops below the bar when the magnifier is tapped. */
  .bdg-msearch{display:block;padding:.5rem .6rem;background:rgba(244,239,230,0.97);border-bottom:1px solid rgba(23,28,36,0.1)}
  .bdg-msearch[hidden]{display:none}
  .bdg-msearch .bdg-quick-search input{padding-right:96px}
  .bdg-search-word{display:none}
  .bdg-msearch .bdg-quick-search button .bdg-search-word{display:inline}
.bdg-quick-search button svg{display:none}
  .bdg-msearch .bdg-quick-search button{gap:.3rem;padding:0 .8rem}
  .bdg-msearch .bdg-quick-search button svg{display:inline-block;vertical-align:middle}
  /* Off-canvas menu drawer. */
  .bdg-drawer-scrim{display:block;position:fixed;inset:0;z-index:44;background:rgba(9,12,18,0.5);opacity:0;transition:opacity .2s ease}
  .bdg-drawer-scrim[hidden]{display:none}
  body.nav-open .bdg-drawer-scrim{opacity:1}
  .bdg-drawer{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:45;width:min(84vw,340px);
    background:#12161d;color:#f0ede8;transform:translateX(-100%);transition:transform .24s ease;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.5)}
  body.nav-open .bdg-drawer{transform:translateX(0)}
  .bdg-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}
  .bdg-drawer-title{font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:.82rem;color:var(--bdg-gold)}
  .bdg-drawer-head .bdg-mb-btn{color:#f0ede8}
  .bdg-drawer-nav ul{list-style:none;margin:0;padding:.4rem 0}
  .bdg-drawer-nav li{margin:0}
  .bdg-drawer-nav a{display:block;padding:.85rem 1.2rem;color:#f0ede8;font-weight:700;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.055)}
  .bdg-drawer-nav .current-menu-item a{color:var(--bdg-gold);box-shadow:inset 3px 0 0 var(--bdg-gold)}
  .bdg-drawer-rx{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem 1.2rem}
  .bdg-drawer-rx a{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.4rem .9rem;color:#fff9ec;font-weight:700;font-size:.85rem}
  .bdg-drawer-foot{margin-top:auto;padding:1.1rem 1.2rem 1.6rem}
  .bdg-drawer-foot img{width:120px;border-radius:8px;background:#fff;padding:.25rem .4rem}
  .bdg-main-nav{flex-direction:column;align-items:flex-start;gap:0.35rem}
  .bdg-main-nav a{min-height:34px}
  .bdg-prescription-pillar-grid{grid-template-columns:1fr}
  .bdg-rx-actions .bdg-btn{width:100%}
  .bdg-dept-grid,.bdg-service-lanes,.bdg-footer .bdg-wrap{grid-template-columns:1fr}
  .bdg-featured-carousel{padding:0.75rem 0.68rem 2.5rem}
  .bdg-featured-slide{min-width:100%;opacity:1;transform:none}
  .bdg-carousel-nav{top:auto;bottom:0.72rem;transform:none;width:34px;height:34px}
  .bdg-carousel-prev{left:calc(50% - 56px)}
  .bdg-carousel-next{right:calc(50% - 56px)}
  .bdg-carousel-dots{margin-top:1rem}
  .bdg-contact-grid{grid-template-columns:1fr}
  .bdg-cta-links{flex-direction:column}
  .bdg-pharmacy-service-cta{flex-direction:column}
  .bdg-cta-links .bdg-btn{width:100%}
  .bdg-pharmacy-service-cta .bdg-btn{width:100%}
  .bdg-floating-cart{right:0.8rem;bottom:0.8rem}
}

/* --- additions for this storefront (not in site.css) --- */
/* Anchor targets (#compounding-services, #prescription-help, …) land below the
   sticky header instead of under it. The header grows as the brand row stacks
   (theme breakpoints 1080px / 760px), so the offset token follows it. */
.bdg-section,.bdg-prescription-compounding-card,.bdg-contact-shell{scroll-margin-top:calc(var(--header-h) + .5rem)}
@media (max-width:1080px){:root{--header-h:19.5rem}}
@media (max-width:760px){:root{--header-h:3.4rem}}
/* The theme's 16px base inside the theme's own regions; the catalog pages keep
   this storefront's fluid --step-0. */
.bdg-header,.bdg-footer,.bdg-floating-cart,.bdg-main-bleed{font-size:.95rem}
/* The theme's "Back to Shop" ghost button sits on a white card, where a white
   outline is invisible — use the dark ghost there. */
.bdg-contact-note .bdg-btn-ghost{border-color:rgba(17,20,26,0.16);color:#152538;background:rgba(255,255,255,0.9)}
/* The compliance paragraph under the copyright line — required for a firearms shop. */
.bdg-footer-compliance{max-width:78ch;margin:0.75rem auto 0;color:#8a8377;font-size:0.78rem;line-height:1.5}
.bdg-footer-compliance p{margin:0 0 0.45rem}
.bdg-footer-legal>p{margin:0}
/* The Wellness/Apparel department pages. */
.bdg-dept-hero .bdg-hero-bg{z-index:-2}
.bdg-dept-page{padding-top:1.2rem}
.bdg-dept-page .bdg-contact-card{padding:1.35rem}
.bdg-dept-page .bdg-contact-card h2{font-size:1.3rem}
.bdg-dept-page .bdg-contact-location p{color:#39424d;line-height:1.55}
.bdg-dept-actions{justify-content:flex-start;margin-top:0.9rem}
.bdg-dept-page .bdg-rx-actions{margin-top:0.9rem}
/* Keyboard focus on the theme's controls (the theme relied on the browser default). */
.bdg-btn:focus-visible,.bdg-carousel-nav:focus-visible,.bdg-carousel-dots button:focus-visible,.bdg-menu-toggle:focus-visible{outline:2px solid var(--bdg-gold);outline-offset:2px}
/* Carousel: a showcase product photo is a catalogue shot on white, so it is
   letterboxed (contain) rather than cropped (cover, which the theme's own
   photographic fallback tiles keep); a slide's link inherits the title colour;
   the nav buttons hide when there is nothing to scroll to. */
.bdg-featured-image.is-product{background:#fff}
.bdg-featured-image.is-product img{object-fit:contain;padding:.4rem}
.bdg-featured-title a{color:inherit;text-decoration:none}
.bdg-featured-title a:hover{color:var(--bdg-rust-deep)}
.bdg-carousel-nav[hidden]{display:none}
/* The cart drawer scrim must cover the sticky header and the floating cart. */
.bdg-header{z-index:30}
@media (max-width:760px){
  .bdg-dept-actions{flex-direction:column}
  .bdg-dept-actions .bdg-btn{width:100%}
}
/* The product page's fixed mobile add-to-cart bar (.buybar, z-index 50) would
   cover the floating cart; lift the cart above it on those pages. */
@media (max-width:56rem){
  body.has-buybar .bdg-floating-cart{bottom:4.8rem}
}
@media (prefers-reduced-motion:reduce){
  .bdg-btn:hover{transform:none}
  .bdg-dept-card{animation:none}
  .bdg-featured-track{transition:none}
  .bdg-featured-slide{transition:none}
  .bdg-hero-bg{transition:none}
}


/* --------------------------------------------------------------- search suggestions (top bar)
   A listbox under the quick-search field. Server-rendered rows; app.js opens /
   closes it and moves the highlight. Same paper/ink palette as the header. */
.bdg-quick-search{position:relative}
.sg{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;background:#fff;border:1px solid rgba(17,20,26,.12);
  border-radius:16px;box-shadow:0 24px 60px rgba(17,20,26,.22);overflow:hidden;max-height:min(70vh,560px);overflow-y:auto;text-align:left}
.sg[hidden]{display:none}
.sg-group{padding:.35rem 0;border-top:1px solid rgba(17,20,26,.08)}
.sg-group:first-child{border-top:0}
.sg-head{padding:.45rem 1rem .2rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bdg-rust)}
.sg-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;color:var(--bdg-ink);text-decoration:none;font-size:.95rem;line-height:1.3}
.sg-row:hover,.sg-row.is-active{background:rgba(212,178,111,.18);text-decoration:none}
.sg-row .sg-ic{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px;background:rgba(29,53,87,.08);color:var(--bdg-night);flex:none}
.sg-row .sg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sg-row .sg-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-row .sg-sub{font-size:.78rem;color:rgba(17,20,26,.62)}
.sg-row .sg-meta{flex:none;font-size:.8rem;color:rgba(17,20,26,.62);white-space:nowrap}
.sg-row.sg-product{padding:.42rem 1rem}
.sg-thumb{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#f4efe6;border:1px solid rgba(17,20,26,.08);flex:none}
.sg-foot{background:rgba(244,239,230,.7)}
.sg-all .sg-main{font-weight:700;color:var(--bdg-night)}
.sg-empty{padding:.9rem 1rem;font-size:.92rem;color:rgba(17,20,26,.75)}
.sg-empty a{color:var(--bdg-rust);font-weight:700}
@media (max-width:760px){.sg{left:-8px;right:-8px;border-radius:12px;max-height:60vh}}
.sg-all .sg-main{flex-direction:row;gap:.3rem;flex-wrap:wrap}
/* ship-to-store / in-store pickup badge */
.pill.store{background:rgba(29,53,87,.12);color:var(--bdg-night,#1d3557)}

/* "How this ships" — a closed disclosure under the specs, not a banner above them. */
.shipsfold{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-block:1.2rem 0}
.shipsfold>summary{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;cursor:pointer;list-style:none;
  padding:.7rem .9rem;font-weight:700}
.shipsfold>summary::-webkit-details-marker{display:none}
.shipsfold>summary::before{content:'▸';color:var(--dim);font-weight:400}
.shipsfold[open]>summary::before{content:'▾'}
.shipsfold>summary:hover .shipsfold-t{color:var(--accent)}
.shipsfold-b{padding:0 .9rem .9rem;border-block-start:1px solid var(--line-soft)}
.shipsfold-b p{margin-block:.6rem 0;max-width:70ch}

/* =============================================================================
   Checkout: step numbers, the card step, and the phone filter fold.
   ============================================================================= */
/* Step numbers are CSS counters, so a section that appears or disappears (the
   dealer step shows only when a firearm is in the order) never leaves a gap. */
.co-main{counter-reset:co-step}
.co-section h2 .n::before{counter-increment:co-step;content:counter(co-step)}

/* The card step. Plain inputs (no name= — nothing here is ever posted to us). */
.co-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.8rem 1rem;margin:0 0 .9rem}
.co-card .field{margin:0}
.co-card-number{grid-column:span 12}
.co-card-exp,.co-card-cvc{grid-column:span 6}
.co-card-name{grid-column:span 12}
@media (min-width:40rem){
  .co-card-number{grid-column:span 6}.co-card-exp{grid-column:span 3}.co-card-cvc{grid-column:span 3}
  .co-card-name{grid-column:span 6}
}
.cc-wrap{position:relative}
.cc-wrap input{padding-inline-end:7.5rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.cc-brand{position:absolute;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--navy);background:var(--surface-2);border-radius:var(--radius-sm);padding:.2rem .45rem}
.co-card input[aria-invalid="true"]{border-color:var(--stop);box-shadow:0 0 0 3px var(--stop-bg)}
.co-card-mount{min-height:6rem}
.co-secure{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;color:var(--dim);margin:.2rem 0 .4rem}
.co-secure svg{flex:0 0 auto;margin-top:.1rem;color:var(--buyer)}
.co-testmode{margin:0 0 .4rem}
[data-armory-error]:empty{display:none}
.co-place .btn[aria-busy="true"]{opacity:.75;cursor:progress}
.co-place .btn[aria-busy="true"] span::after{content:"";display:inline-block;width:.8rem;height:.8rem;margin-inline-start:.5rem;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;vertical-align:-.1rem;animation:co-spin .8s linear infinite}
@keyframes co-spin{to{transform:rotate(360deg)}}

/* The filter rail folds to one bar on a phone (app.js closes it; on a wide
   screen the bar is hidden and the rail is simply always open). */
.filters-fold>summary{list-style:none;display:none}
.filters-fold>summary::-webkit-details-marker{display:none}
@media (max-width:56rem){
  .filters-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:.8rem;cursor:pointer;
    padding:.75rem 1rem;font-weight:800;color:var(--navy);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
  .filters-fold>summary::after{content:"";width:.55rem;height:.55rem;border-inline-end:2px solid var(--dim);border-block-end:2px solid var(--dim);
    transform:rotate(45deg);margin-inline-start:auto;margin-inline-end:.2rem;transition:transform .15s var(--ease)}
  .filters-fold[open]>summary::after{transform:rotate(-135deg)}
  .filters-fold[open]>summary{border-end-start-radius:0;border-end-end-radius:0;border-block-end:0}
  .filters-fold-n{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:none;letter-spacing:0}
  .filters-fold[open]>.filters-fold-body>#filters{border-start-start-radius:0;border-start-end-radius:0}
  .filters{margin-block-end:1rem}
}
/* Phone: footer links and inline text links are comfortable tap targets. */
@media (max-width:56rem){
  .bdg-footer-links a{display:block;padding-block:.35rem}
  .bdg-footer-links a+a{margin-block-start:0}
}
/* Phone: two product cards across, the way a shopper scans a store on a phone.
   One tall card per row made the first page of 24 products a 15,000px scroll. */
@media (max-width:40rem){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .tile-media{padding:.5rem}
  .tile-body{padding:.6rem .65rem .35rem;gap:.25rem}
  .brandline{font-size:.62rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ttl{font-size:.84rem;line-height:1.3}
  .tile-pills{gap:.25rem}
  .tile-pills .pill{font-size:.6rem;padding:.15rem .4rem}
  .tile-price{font-size:1rem;padding-block-start:.3rem}
  .quick-add{padding:.1rem .65rem .65rem}
  .quick-add .btn{padding:.55rem .4rem;font-size:.85rem}
}