/* =========================================================================
   Steele Arms TX — public storefront
   Design system ported from the approved "Concept A — Personal Counter".
   Self-contained: no external fonts, no CDNs. Warm parchment + gun-metal,
   serif display (Georgia) over a system sans body, 2px edges, brown/tan accents.
   ========================================================================= */
/* Palette. Each value falls back to the approved Concept A colour, but
   defers to a compiler theme token when theme.css supplies one — so a
   dealer's branding can drive this sheet without forking it, while Steele
   renders exactly the design that was approved. */
:root{
  --parch:var(--color-surface-base,#f3ecdb); --parch2:var(--color-surface-sunken,#e8dfc8);
  --tan:#b8a06a; --tan-d:var(--color-state-warning,#8a7344);
  --gun:#2b2b28; --brown:var(--color-accent-muted,#6b4f2a);
  --ink:var(--color-text-primary,#1f1e1b); --muted:var(--color-text-secondary,#5a5346);
  --card:var(--color-surface-raised,#fffdf8); --rule:var(--color-border-subtle,#d6cbb0);
  --accent:var(--color-accent-primary,#8b3a1a);
  --ok:#3f6a3a;
  --serif:var(--font-family-heading,Georgia,"Times New Roman",Times,serif);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1160px;
}

/* =========================================================================
   LEGACY ALIAS REMAP — style.css's dark palette → the counter palette
   =========================================================================
   includes/head.php loads theme.css + style.css on EVERY page; those sheets
   are the previous dark "tactical" theme and declare the legacy names
   (--bg-primary, --green-primary, --text-primary, …) on :root. counter.css
   loads after them but only styles its OWN classes, so any legacy rule we do
   not override still paints — with the legacy DARK values.

   That is not hypothetical. style.css's `.hero` rule set a near-black gradient
   from --bg-primary, while counter.css sets the h1 to --gun (#2b2b28). Result
   on the live homepage: near-black text on a near-black hero, ~1.1:1 contrast,
   with only the gold <em> readable. Setting a hero background alone would fix
   that one spot and leave every other legacy rule still dark, so remap the
   ALIASES instead — it repaints the whole class at once, including inline
   style="…var(--…)…" fragments that JS writes and a stylesheet cannot reach.

   counter-checkout.css already does exactly this for checkout.php; this is the
   same block so the storefront and the checkout cannot drift apart.
   ========================================================================= */
:root{
  --bg-primary:var(--parch);
  --bg-secondary:var(--parch2);
  --bg-card:var(--card);
  --bg-card-hover:var(--parch2);

  --text-primary:var(--ink);
  --text-secondary:var(--muted);
  --text-muted:#7f7768;
  --text-inverse:var(--parch);

  --green-primary:var(--brown);
  --green-dark:var(--tan-d);
  --green-glow:color-mix(in srgb,var(--brown) 22%,transparent);
  --green-faint:color-mix(in srgb,var(--brown) 8%,transparent);
  --border-green:color-mix(in srgb,var(--brown) 30%,transparent);

  --border-color:var(--rule);
  --danger:#a3301f;
  --success:var(--ok);
  --warning:var(--tan-d);

  --font-main:var(--sans);
  --font-heading:var(--serif);
  --font-body:var(--sans);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--parch);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--brown)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;color:var(--gun);line-height:1.1}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.skip{position:absolute;left:-999px;top:0;background:var(--gun);color:#fff;padding:10px 14px;z-index:200}
.skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;padding:15px 26px;border-radius:2px;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(43,43,40,.18)}
.btn-primary{background:var(--gun);color:var(--parch)}
.btn-primary:hover{background:#000;color:#fff}
.btn-ghost{border:2px solid var(--gun);color:var(--gun);background:transparent}
.btn-ghost:hover{background:var(--gun);color:var(--parch)}
.btn-sm{padding:11px 18px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(243,236,219,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:84px;height:64px;object-fit:contain}
.brand .nm{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--gun);line-height:1.1}
.brand .sb{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brown)}
.nav a[aria-current="page"]{border-bottom:2px solid var(--tan)}
.nav .call{background:var(--gun);color:var(--parch);padding:10px 18px;border-radius:2px;letter-spacing:.02em;border-bottom:0}
.nav .call:hover{background:#000;color:#fff}
@media(max-width:860px){.nav a:not(.call){display:none}.brand img{width:66px;height:50px}}

/* ---------- generic section head ---------- */
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.sec-head .n{font-family:var(--serif);font-style:italic;color:var(--tan-d)}

/* ---------- notice banner ---------- */
.notice{background:var(--parch2);border:1px solid var(--rule);border-left:3px solid var(--tan);padding:12px 16px;font-size:13.5px;color:var(--muted);border-radius:2px}
.notice b{color:var(--ink)}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:20px 0 0}
.crumbs a{color:var(--brown);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--rule);margin:0 8px}
.crumbs b{color:var(--ink);font-weight:600}

/* =========================================================================
   HOME
   ========================================================================= */
.hero{padding:70px 0 60px}
.hero .grid{display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:start}
.hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero .eyebrow .line{height:1px;flex:1;background:var(--tan);opacity:.6}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--brown)}
.hero .lede{font-size:clamp(1.1rem,2vw,1.28rem);color:var(--muted);max-width:46ch;margin:24px 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .assure{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.hero .assure b{color:var(--ink)}

.card-side{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--brown);padding:30px 28px;box-shadow:0 14px 40px rgba(43,43,40,.08)}
.card-side .crest{width:150px;height:115px;margin-bottom:14px;object-fit:contain}
.card-side h2{font-size:1.35rem;margin-bottom:4px}
.card-side .place{font-size:14px;color:var(--muted);margin-bottom:18px}
.card-side dl{border-top:1px solid var(--rule);margin-top:4px}
.card-side .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dotted var(--rule);font-size:14.5px}
.card-side dt{color:var(--muted)}
.card-side dd{color:var(--ink);font-weight:600;text-align:right}
.card-side .phone{display:block;margin-top:20px;background:var(--gun);color:var(--parch);text-align:center;padding:15px;border-radius:2px;font-weight:700;font-size:1.15rem;text-decoration:none;letter-spacing:.02em}
.card-side .phone:hover{background:#000}
.card-side .ph-note{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr;gap:40px}.card-side{max-width:520px}}

.owner{background:var(--parch2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:64px 0}
.owner .grid{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:center}
.owner .portrait{aspect-ratio:4/5;border:1px solid var(--rule);background:linear-gradient(135deg,#e4d9bd,#d3c39a);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--tan-d);position:relative}
.owner .portrait .ph{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--parch);padding:3px 7px;opacity:.8}
.owner .portrait img{width:100%;height:100%;object-fit:cover;border:0}
/* No owner photo configured: show the crest, contained and centred, instead of
   a box that announces itself as a placeholder. */
.owner .portrait-crest{background:linear-gradient(135deg,#e4d9bd,#d3c39a)}
.owner .portrait-crest img.crest-fallback{width:auto;height:auto;max-width:58%;max-height:58%;object-fit:contain;opacity:.55;margin:auto}
.owner .portrait span{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.4}
.owner blockquote{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.4;color:var(--gun)}
.owner blockquote:first-letter{float:left;font-size:4.6rem;line-height:.8;padding:8px 12px 0 0;color:var(--brown);font-weight:700}
.owner .sig{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--brown)}
.owner .sig b{font-style:normal}
@media(max-width:760px){.owner .grid{grid-template-columns:1fr;gap:26px}.owner .portrait{max-width:220px}}

.cats{padding:66px 0}
.cats h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin:6px 0 6px;max-width:20ch}
.cats .body{max-width:60ch;color:var(--muted);margin-bottom:8px}
.chip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.chip{background:var(--card);border:1px solid var(--rule);padding:24px 22px;text-decoration:none;color:inherit;transition:transform .16s,border-color .16s,box-shadow .16s;display:block}
.chip:hover{transform:translateY(-3px);border-color:var(--tan);box-shadow:0 10px 26px rgba(43,43,40,.1)}
.chip .ic{width:34px;height:34px;color:var(--brown);margin-bottom:14px}
.chip h3{font-size:1.15rem;margin-bottom:4px}
.chip p{font-size:13px;color:var(--muted)}
.chip .go{margin-top:12px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--brown);text-transform:uppercase}
@media(max-width:760px){.chip-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.chip-grid{grid-template-columns:1fr}}

.brands-strip{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.brands-strip .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.brand-list{display:flex;flex-wrap:wrap;gap:10px 12px}
.brand-list a,.brand-list span{font-family:var(--serif);font-size:1.05rem;color:var(--gun);padding:6px 14px;border:1px solid var(--rule);background:var(--card);border-radius:2px;text-decoration:none}
.brand-list a:hover{border-color:var(--tan);color:var(--brown)}

/* featured / product grid */
.featured{padding:10px 0 76px}
.featured h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin:6px 0 6px}
.featured .body{max-width:60ch;color:var(--muted);margin-bottom:8px}
.grid-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.grid-head .see-all{font-size:13.5px;font-weight:700;color:var(--brown);text-decoration:none;white-space:nowrap}
.grid-head .see-all:hover{text-decoration:underline}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}
@media(max-width:980px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.product-grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:420px){.product-grid{grid-template-columns:1fr}}

.pcard{background:var(--card);border:1px solid var(--rule);display:flex;flex-direction:column;transition:transform .16s,border-color .16s,box-shadow .16s;position:relative}
.pcard:hover{transform:translateY(-3px);border-color:var(--tan);box-shadow:0 12px 28px rgba(43,43,40,.12)}
.pcard-link{text-decoration:none;color:inherit;display:block}
.pcard-body{padding:16px 16px 14px}
.pcard .brand-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tan-d)}
.pcard h3{font-family:var(--serif);font-size:1.08rem;margin:4px 0 2px;color:var(--gun);line-height:1.2}
.pcard .cat-k{font-size:12px;color:var(--muted)}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 16px}
.pcard .price{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--ink)}
.pcard .price .unit{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em}

/* subtle on-hand emphasis: a warm edge + quiet "In the shop" tag. Catalog
   items get neither and simply read as ordinary available listings. */
.pcard.onhand{border-color:var(--tan)}
.pcard.onhand:hover{border-color:var(--tan-d)}
.avail-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tan-d);margin-top:6px}
.avail-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px}
.pd-avail{margin:2px 0 14px}
.pd-avail .avail-tag{font-size:12px}

/* placeholder image tile (honest, self-contained) */
.ptile{position:relative;aspect-ratio:4/3;background:
  radial-gradient(120% 120% at 30% 10%,#fffdf8 0%,var(--parch) 60%,var(--parch2) 100%);
  border-bottom:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.ptile::after{content:"";position:absolute;inset:0;background-image:
  repeating-linear-gradient(45deg,rgba(139,116,68,.05) 0 2px,transparent 2px 9px);pointer-events:none}
.ptile .tile-ic{width:44%;max-width:120px;height:auto;color:var(--tan-d);opacity:.9}
.ptile .tile-ic svg{width:100%;height:auto;display:block}
.ptile .tile-brand{font-family:var(--serif);font-size:1rem;color:var(--tan-d);letter-spacing:.02em}
.ptile .tile-badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--parch);padding:3px 7px;opacity:.82;border-radius:1px}
.ptile.lg{aspect-ratio:16/12}

/* =========================================================================
   CATALOG
   ========================================================================= */
.catalog-hero{padding:26px 0 6px}
.catalog-hero h1{font-size:clamp(2rem,4.4vw,3rem)}
.catalog-hero .lede{color:var(--muted);max-width:60ch;margin-top:10px}
.catalog-layout{padding:26px 0 80px}
.toolbar{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0;margin-bottom:8px}
.filter-group{display:flex;flex-direction:column;gap:8px}
.filter-group .flabel{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--rule);padding:8px 14px;border-radius:2px;cursor:pointer;transition:background .14s,color .14s,border-color .14s}
.fchip:hover{border-color:var(--tan)}
.fchip[aria-pressed="true"]{background:var(--gun);color:var(--parch);border-color:var(--gun)}
.toolbar .sort{display:flex;flex-direction:column;gap:8px}
.toolbar select{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:9px 12px;cursor:pointer}
.result-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0 6px}
.result-bar .count{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.result-bar .clear{font-size:13px;color:var(--brown);background:none;border:0;cursor:pointer;font-weight:600}
.result-bar .clear:hover{text-decoration:underline}
.filter-search{flex:1 1 260px;min-width:220px}
.csearch{display:flex;gap:6px}
.csearch input[type=search]{flex:1;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:9px 12px}
.csearch input[type=search]:focus{outline:2px solid var(--tan);outline-offset:1px}
.csearch-go{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--parch);background:var(--gun);border:1px solid var(--gun);border-radius:2px;padding:9px 16px;cursor:pointer}
.csearch-go:hover{opacity:.9}

/* Catalog pager. Borrows .fchip's visual language so paging reads as part of
   the same filter furniture. The catalogue is ~19k rows / 319 pages, so the
   markup renders a WINDOW around the current page, never one button per page. */
.catalog-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:28px 0 4px}
.pager-btn{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--rule);padding:8px 13px;border-radius:2px;cursor:pointer;transition:background .14s,color .14s,border-color .14s}
.pager-btn:hover{border-color:var(--tan)}
.pager-btn[aria-current="page"]{background:var(--gun);color:var(--parch);border-color:var(--gun);cursor:default}
.pager-gap{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);padding:8px 6px;user-select:none}
.empty{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--rule);border-radius:2px;background:var(--card)}
.empty h3{margin-bottom:8px}

/* =========================================================================
   PRODUCT DETAIL
   ========================================================================= */
.pd{padding:26px 0 80px}
.pd-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-top:14px}
@media(max-width:860px){.pd-grid{grid-template-columns:1fr;gap:30px}}
.pd-media{position:sticky;top:96px}
.pd-media .ptile{border:1px solid var(--rule)}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumbs .ptile{aspect-ratio:1;width:74px;flex:0 0 auto;border:1px solid var(--rule)}
.pd-thumbs .ptile .tile-ic{width:52%}
.pd-thumbs .ptile .tile-brand,.pd-thumbs .ptile .tile-badge{display:none}
@media(max-width:860px){.pd-media{position:static}}

.pd-info .brand-k{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tan-d)}
.pd-info h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:6px 0 10px}
.pd-info .cat-line{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.pd-info .cat-line a{color:var(--brown)}
.pd-price{font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.pd-price .unit{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.03em}
.pd-price .repnote{display:block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);margin-top:4px;letter-spacing:normal}
.pd-desc{color:var(--ink);margin:18px 0;max-width:56ch}
.pd-fulfill{background:var(--parch2);border:1px solid var(--rule);border-left:3px solid var(--tan);padding:16px 18px;border-radius:2px;margin:18px 0}
.pd-fulfill h3{font-size:1rem;margin-bottom:6px}
.pd-fulfill p{font-size:14px;color:var(--muted)}
.pd-fulfill .ship-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);background:var(--card);border:1px solid var(--rule);padding:3px 9px;border-radius:2px;margin-bottom:8px}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 6px}
.pd-actions .btn-primary{flex:1;justify-content:center;min-width:200px}
.pd-actions .ordernote{font-size:12.5px;color:var(--muted);width:100%}
.specs{margin-top:30px;border-top:1px solid var(--rule)}
.specs h3{font-size:1.15rem;margin:22px 0 8px}
.specs dl{border-top:1px solid var(--rule)}
.specs .row{display:flex;justify-content:space-between;gap:16px;padding:11px 2px;border-bottom:1px dotted var(--rule);font-size:14.5px}
.specs dt{color:var(--muted)}
.specs dd{color:var(--ink);font-weight:600;text-align:right}
.related{padding:16px 0 0}
.related h2{font-size:1.5rem;margin-bottom:4px}

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
.hiw-hero{padding:40px 0 20px}
.hiw-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);max-width:20ch}
.hiw-hero .lede{color:var(--muted);max-width:60ch;font-size:1.12rem;margin-top:14px}
.methods{padding:24px 0 10px}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
@media(max-width:820px){.method-grid{grid-template-columns:1fr}}
.method{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--brown);padding:26px 24px}
.method .ic{width:36px;height:36px;color:var(--brown);margin-bottom:12px}
.method h3{font-size:1.25rem;margin-bottom:8px}
.method p{color:var(--muted);font-size:14.5px}

.transfer{background:var(--gun);color:#e8dfc8;padding:70px 0}
.transfer .kicker{color:var(--tan)}
.transfer h2{color:#f3ecdb;font-size:clamp(1.7rem,3.4vw,2.3rem);margin:8px 0 6px}
.transfer .intro{color:#c3b998;max-width:56ch;margin-bottom:34px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{border-top:2px solid var(--tan)}
.step .num{font-family:var(--serif);font-size:2.6rem;color:var(--tan);line-height:1;margin:14px 0 8px}
.step h3{color:#f3ecdb;font-size:1.2rem;margin-bottom:6px}
.step p{color:#c3b998;font-size:14.5px}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:16px}}

.faq{padding:66px 0}
.faq h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:18px}
.faq details{border-top:1px solid var(--rule);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:1.15rem;color:var(--gun);padding:16px 40px 16px 2px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.5rem;color:var(--brown);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 18px;color:var(--muted);max-width:70ch}

/* =========================================================================
   CLOSING + FOOTER + CALLBAR
   ========================================================================= */
.closing{background:var(--parch2);border-top:1px solid var(--rule);padding:76px 0;text-align:center}
.closing h2{font-size:clamp(1.9rem,4vw,2.7rem);max-width:20ch;margin:10px auto 16px}
.closing p{max-width:48ch;margin:0 auto 28px;color:var(--muted)}
.closing .phone-line{margin-top:20px;font-size:1.3rem;font-weight:700}
.closing .phone-line a{color:var(--gun);text-decoration:none;border-bottom:2px solid var(--tan)}

footer{background:var(--gun);color:#cfc6b2;padding:44px 0 110px;font-size:13px}
footer .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:26px;border-bottom:1px solid #46443e}
footer h4{color:#f0ead9;font-size:1rem;margin-bottom:12px}
footer a{color:#cfc6b2;text-decoration:none}
footer a:hover{color:#fff}
footer .fcols ul{list-style:none;display:flex;flex-direction:column;gap:8px}
footer .fbrand b{color:#f0ead9;font-size:1.05rem;display:block;margin-bottom:8px;font-family:var(--serif)}
footer .fbrand p{color:#a99f88;max-width:38ch;line-height:1.55}
footer .meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;padding-top:18px}
footer .meta b{color:#f0ead9}
/* #948a70 on the gun-metal footer measured 4.14:1 — under the 4.5:1 AA floor
   for text this size. This is the notice explaining what is and is not real on
   a preview storefront, so it is exactly the small print that must be readable. */
footer .ph{color:#a89d81;max-width:100%;margin-top:14px;line-height:1.55;font-size:12px}
footer .tbd{color:#b9ad90}
@media(max-width:760px){footer .fcols{grid-template-columns:1fr;gap:22px}}
@media(min-width:861px){footer{padding-bottom:44px}}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;background:var(--gun);border-top:2px solid var(--tan);padding:10px 14px;gap:10px;align-items:center;justify-content:space-between}
.callbar .t{color:#e8dfc8;font-size:13px;line-height:1.3}
.callbar .t b{color:#fff;display:block;font-size:14px}
.callbar a{background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:2px;font-size:15px;white-space:nowrap}
@media(max-width:860px){.callbar{display:flex}}

/* =========================================================================
   ORDER MODAL (non-functional "coming soon" — no cart, no order, ever)
   ========================================================================= */
.modal-overlay{position:fixed;inset:0;z-index:120;background:rgba(31,30,27,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--brown);max-width:440px;width:100%;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.3);position:relative}
.modal .close{position:absolute;top:10px;right:10px;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:6px 10px;border-radius:2px}
.modal .close:hover{color:var(--ink)}
.modal .m-kicker{color:var(--brown)}
.modal h2{font-size:1.5rem;margin:8px 0 10px}
.modal p{color:var(--muted);font-size:14.5px;margin-bottom:8px}
.modal .m-item{font-weight:600;color:var(--ink)}
.modal .m-actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.modal .m-actions .btn{flex:1;justify-content:center;min-width:150px}

/* ---------- entrance motion (transform-only: content opacity is ALWAYS 1, so
   it can never be hidden — even if animations are paused/disabled) ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{animation:up .6s ease both}
  .reveal.d1{animation-delay:.06s}.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.18s}.reveal.d4{animation-delay:.24s}
  @keyframes up{from{transform:translateY(16px)}to{transform:none}}
}


/* =========================================================================
   VISUAL ENHANCEMENTS — tactile depth, ornament & choreographed motion.
   Palette + logo are UNCHANGED. Everything below is self-contained (inline
   SVG / CSS only, no CDNs, no fonts). Continuous motion is gated on
   prefers-reduced-motion; scroll reveals are gated on a JS-added
   html.reveal-ready flag, so content is NEVER hidden without working JS.
   ========================================================================= */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:0 4px 14px rgba(107,79,42,.07);
  --shadow-md:0 16px 38px rgba(43,43,40,.11);
  --shadow-lg:0 30px 66px rgba(43,43,40,.17);
  --edge-hi:rgba(255,255,255,.72);
}

/* ---- paper / gun-oil grain over the whole page (fractal-noise SVG) ------ */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---- letterpress emboss on serif display over parchment ----------------- */
.hero h1,.owner blockquote,.cats h2,.featured h2,.closing h2,
.catalog-hero h1,.hiw-hero h1,.faq h2,.methods h2{
  text-shadow:0 1px 0 var(--edge-hi);
}

/* ---- engraved (etched) divider utility ---------------------------------- */
.brands-strip,.toolbar,.result-bar{box-shadow:inset 0 1px 0 var(--edge-hi)}

/* ---- section head: add a small engraved rule + star tick ---------------- */
.sec-head{position:relative}
.sec-head .n{position:relative}
.cats .sec-head::after,.featured .sec-head::after,.methods .sec-head::after,
.faq .sec-head::after,.hiw-hero .sec-head::after{
  content:"";flex:1;height:1px;align-self:center;
  background:linear-gradient(90deg,var(--tan) 0,transparent 100%);opacity:.5;
}

/* ---- buttons: metallic sheen sweep + crisper edge ----------------------- */
.btn{position:relative;overflow:hidden;border:1px solid transparent}
.btn-primary{border-color:var(--ink)}
.btn-ghost{border-color:var(--gun)}
.btn::after{
  content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-160%) skewX(-18deg);pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .btn::after{transition:transform .7s var(--ease-out)}
  .btn:hover::after{transform:translateX(360%) skewX(-18deg)}
}

/* ---- nav: animated underline on hover ----------------------------------- */
.nav a:not(.call){position:relative}
.nav a:not(.call)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--tan);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.nav a:not(.call):hover::after{transform:scaleX(1)}

/* ---- sticky header gains depth once scrolled ---------------------------- */
header.site{transition:box-shadow .3s ease,background .3s ease}
header.site.scrolled{box-shadow:0 6px 24px rgba(43,43,40,.12);background:rgba(243,236,219,.97)}
.brand img{transition:transform .5s var(--ease-out)}
.brand:hover img{transform:rotate(-2deg) scale(1.04)}

/* =========================================================================
   HERO — layered engraved backdrop + floating Texas star + floating card
   ========================================================================= */
/* Own the hero background EXPLICITLY. The alias remap at the top of this file
   already neutralises style.css's dark gradient, but the hero is the one
   surface where a regression is unmissable and unreadable at the same time
   (near-black h1 on a near-black gradient), so it does not rely on inheritance
   resolving correctly. The engraving layers below are designed to sit on warm
   parchment, not on black. */
.hero{position:relative;overflow:hidden;background:var(--parch)}
.hero .wrap{position:relative;z-index:2}
.hero::before{ /* faint crosshatch engraving, fading to the right */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(45deg,rgba(139,116,68,.06) 0 1px,transparent 1px 17px),
    repeating-linear-gradient(-45deg,rgba(139,116,68,.045) 0 1px,transparent 1px 23px);
  -webkit-mask-image:linear-gradient(105deg,#000 0,transparent 62%);
          mask-image:linear-gradient(105deg,#000 0,transparent 62%);
}
.hero::after{ /* big faint engraved star, top-right */
  content:"";position:absolute;top:-70px;right:-60px;width:420px;height:420px;z-index:0;
  pointer-events:none;opacity:.10;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 L61.8 37.6 L98 37.6 L68.9 59 L80.4 94 L50 72.4 L19.6 94 L31.1 59 L2 37.6 L38.2 37.6 Z' fill='none' stroke='%236b4f2a' stroke-width='1.4'/%3E%3Cpath d='M50 15 L58.5 40 L85 40 L63.6 55.6 L72 81 L50 65.4 L28 81 L36.4 55.6 L15 40 L41.5 40 Z' fill='none' stroke='%238a7344' stroke-width='0.9'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:no-preference){
  .hero::after{animation:floatStar 18s ease-in-out infinite}
}
@keyframes floatStar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(18px) rotate(6deg)}}
@media(max-width:900px){.hero::after{width:280px;height:280px;top:-40px;right:-50px}}

.card-side{position:relative;box-shadow:var(--shadow-lg);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.card-side::before{ /* corner fold accent */
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-top:26px solid var(--tan);border-left:26px solid transparent;opacity:.85;
}
.card-side:hover{transform:translateY(-6px);box-shadow:0 40px 80px rgba(43,43,40,.22)}
.card-side .crest{transition:transform .5s var(--ease-spring)}
.card-side:hover .crest{transform:scale(1.05) rotate(-2deg)}
.card-side .phone{position:relative;overflow:hidden}
.card-side .phone::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-160%) skewX(-18deg)}
@media(prefers-reduced-motion:no-preference){.card-side .phone::after{transition:transform .8s var(--ease-out)}.card-side .phone:hover::after{transform:translateX(360%) skewX(-18deg)}}

/* hero assurance chips get a leading tan tick + hover */
.hero .assure span{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;background:var(--card);border:1px solid var(--rule);border-radius:2px;box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s}
.hero .assure span::before{content:"";width:7px;height:7px;flex:0 0 auto;transform:rotate(45deg);background:var(--tan);box-shadow:0 0 0 1px rgba(138,115,68,.4)}
.hero .assure span:hover{border-color:var(--tan);transform:translateY(-2px)}

/* =========================================================================
   OWNER note — big engraved star behind the portrait
   ========================================================================= */
.owner{position:relative;overflow:hidden}
.owner::before{
  content:"";position:absolute;left:-90px;bottom:-90px;width:340px;height:340px;z-index:0;
  pointer-events:none;opacity:.07;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 L61.8 37.6 L98 37.6 L68.9 59 L80.4 94 L50 72.4 L19.6 94 L31.1 59 L2 37.6 L38.2 37.6 Z' fill='none' stroke='%238a7344' stroke-width='1.2'/%3E%3C/svg%3E");
}
.owner .wrap{position:relative;z-index:2}
.owner .portrait{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);box-shadow:var(--shadow-sm)}
.owner .portrait:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--shadow-md)}

/* =========================================================================
   CATEGORY chips — corner accent, icon lift, arrow slide
   ========================================================================= */
.chip{position:relative;overflow:hidden}
.chip::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--brown);transition:width .35s var(--ease-out)}
.chip:hover::before{width:100%}
.chip .ic{transition:transform .35s var(--ease-spring),color .2s}
.chip:hover .ic{transform:translateY(-3px) scale(1.12);color:var(--tan-d)}
.chip .go{display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--ease-out)}
.chip:hover .go{gap:12px}

/* brand chips: subtle stagger-ready + hover lift */
.brand-list a{transition:transform .2s var(--ease-out),border-color .2s,color .2s;box-shadow:var(--shadow-sm)}
.brand-list a:hover{transform:translateY(-3px)}

/* =========================================================================
   PRODUCT CARDS — recessed image tray, lift, sheen, icon zoom, live dot
   ========================================================================= */
.pcard{border-radius:4px;box-shadow:var(--shadow-sm);transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(107,79,42,.20)}
.pcard .ptile{box-shadow:inset 0 0 22px rgba(107,79,42,.10)}
.pcard .ptile .tile-ic{transition:transform .45s var(--ease-spring)}
.pcard:hover .ptile .tile-ic{transform:scale(1.14) rotate(-2deg)}
.pcard .ptile::before{ /* sheen sweep across the tile on hover */
  content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-160%) skewX(-14deg);pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .pcard .ptile::before{transition:transform .8s var(--ease-out)}
  .pcard:hover .ptile::before{transform:translateX(520%) skewX(-14deg)}
}
.pcard .foot .btn{transition:transform .2s var(--ease-out),background .15s,color .15s,box-shadow .15s}
.pcard:hover .foot .btn-ghost{background:var(--gun);color:var(--parch)}

/* on-hand: warm top strap + pulsing "live" dot */
.pcard.onhand{box-shadow:var(--shadow-sm),inset 0 3px 0 var(--tan)}
.avail-tag{padding:4px 9px;background:var(--parch2);border:1px solid var(--ok);border-radius:2px}
.avail-tag .dot{position:relative}
@media(prefers-reduced-motion:no-preference){
  .avail-tag .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--ok);opacity:.5;animation:pulseDot 2.2s ease-out infinite}
}
@keyframes pulseDot{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}

/* =========================================================================
   PRODUCT DETAIL — floating media, ship tag pop
   ========================================================================= */
.pd-media .ptile{box-shadow:var(--shadow-md);border-radius:4px;overflow:hidden;position:relative}
.pd-thumbs .ptile{transition:transform .25s var(--ease-out),border-color .2s;cursor:default}
.pd-thumbs .ptile:hover{transform:translateY(-3px);border-color:var(--tan)}
.pd-fulfill{box-shadow:var(--shadow-sm)}
.pd-actions .btn-primary{box-shadow:var(--shadow-sm)}

/* =========================================================================
   HOW IT WORKS — method lift, transfer step connector + number pop
   ========================================================================= */
.method{border-radius:4px;box-shadow:var(--shadow-sm);transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)}
.method:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.method .ic{transition:transform .4s var(--ease-spring)}
.method:hover .ic{transform:scale(1.14) translateY(-2px)}

.steps{position:relative}
.step{position:relative;padding-top:6px}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border:2px solid var(--tan);border-radius:50%;font-size:1.7rem;transition:transform .35s var(--ease-spring),background .25s,color .25s}
.step:hover .num{transform:translateY(-4px) scale(1.06);background:var(--tan);color:var(--gun)}

/* =========================================================================
   FAQ — smooth open, hover tint
   ========================================================================= */
.faq summary{transition:color .2s,padding-left .25s var(--ease-out)}
.faq summary:hover{color:var(--brown);padding-left:8px}
@media(prefers-reduced-motion:no-preference){
  .faq details[open] p{animation:faqIn .4s var(--ease-out) both}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =========================================================================
   CLOSING — subtle radial glow + phone underline draw
   ========================================================================= */
.closing{position:relative;overflow:hidden}
.closing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0,rgba(184,160,106,.16),transparent 70%)}
.closing .wrap{position:relative;z-index:2}
.closing .phone-line a{transition:border-color .2s}
.closing .phone-line a:hover{border-bottom-color:var(--brown)}

/* =========================================================================
   MOBILE CALL BAR — gentle attention pulse on the button
   ========================================================================= */
@media(prefers-reduced-motion:no-preference){
  .callbar a{animation:callPulse 2.6s ease-in-out infinite}
}
@keyframes callPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,58,26,.5)}50%{box-shadow:0 0 0 8px rgba(139,58,26,0)}}

/* =========================================================================
   ORDER MODAL — spring entrance
   ========================================================================= */
@media(prefers-reduced-motion:no-preference){
  .modal-overlay{transition:opacity .25s ease}
  .modal-overlay.open .modal{animation:modalIn .4s var(--ease-spring) both}
}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

/* =========================================================================
   SCROLL REVEALS — only active once JS adds html.reveal-ready (so content is
   never hidden without JS, and is skipped under prefers-reduced-motion).
   ========================================================================= */
html.reveal-ready .sr{opacity:0;transform:translateY(30px)}
html.reveal-ready .sr.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  html.reveal-ready .sr{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--rvd,0ms)}
}

/* mobile: the fixed bottom call-bar already surfaces the phone CTA, so drop
   the redundant header call pill (desktop nav links are already hidden). */
@media(max-width:860px){.nav{display:none}}

/* =========================================================================
   CART — nav pill, grid add button, slide-over drawer.
   Rendered ONLY when ffl_feature('online_orders') is on; a browse-and-call
   tenant never sees any of it. Behaviour lives in
   public/assets/counter-cart.js. Same vocabulary as the rest of this sheet:
   parchment card over gun-metal, 2px edges, serif display, tan accents.
   ========================================================================= */

/* ---------- nav cart pill (counter header) ---------- */
.nav .cart-pill{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--gun);color:var(--gun);padding:8px 14px;border-radius:2px;font-weight:700;letter-spacing:.02em;border-bottom:2px solid var(--gun);cursor:pointer;font-family:var(--sans);font-size:14px;transition:background .15s,color .15s}
.nav .cart-pill:hover{background:var(--gun);color:var(--parch)}
.nav .cart-pill .cart-ic{width:17px;height:17px;flex:0 0 auto}
.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cart-badge[hidden]{display:none}
/* the mobile call-bar hides .nav entirely, so keep the pill reachable there */
@media(max-width:860px){.nav.has-cart{display:flex;gap:12px}.nav.has-cart a:not(.cart-pill){display:none}}

/* ---------- add-to-cart on grid cards ---------- */
.pcard .foot{flex-wrap:wrap}
.pcard-add{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--parch);background:var(--gun);border:1px solid var(--ink);padding:9px 14px;border-radius:2px;cursor:pointer;transition:background .15s,transform .15s}
.pcard-add:hover{background:#000;transform:translateY(-1px)}
.pcard-add[data-cart-busy="1"]{background:var(--ok);border-color:var(--ok)}
.pcard-actions{display:flex;gap:8px;align-items:center;margin-left:auto}

/* ---------- product-detail actions ---------- */
.pd-actions .pd-add{flex:1;justify-content:center;min-width:200px}
.pd-actions .deposit-line{width:100%;font-size:12.5px;color:var(--muted);margin-top:-2px}

/* ---------- slide-over drawer ---------- */
html.cart-open{overflow:hidden}
.cart-drawer{position:fixed;inset:0;z-index:140;display:flex;justify-content:flex-end}
.cart-drawer[hidden]{display:none}
.cart-scrim{position:absolute;inset:0;background:rgba(31,30,27,.55);backdrop-filter:blur(3px);border:0;padding:0;cursor:pointer}
.cart-panel{position:relative;z-index:1;width:min(430px,100%);height:100%;background:var(--card);border-left:1px solid var(--rule);box-shadow:-24px 0 60px rgba(0,0,0,.3);display:flex;flex-direction:column}
@media(prefers-reduced-motion:no-preference){.cart-panel{animation:cartIn .34s var(--ease-out) both}}
@keyframes cartIn{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
.cart-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--rule);border-top:4px solid var(--brown)}
.cart-panel-head h2{font-size:1.35rem}
.cart-panel-head .sub{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tan-d);margin-bottom:2px}
.cart-panel-close{background:none;border:0;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:2px}
.cart-panel-close:hover{color:var(--ink)}
.cart-panel-body{flex:1;overflow-y:auto;padding:6px 22px}
.cart-empty{color:var(--muted);font-size:14.5px;padding:26px 0}

.cart-row{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px dotted var(--rule)}
.cart-row-media{flex:0 0 62px;width:62px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--parch);border:1px solid var(--rule);overflow:hidden}
.cart-row-media img{width:100%;height:100%;object-fit:contain}
.cart-row-noimg{color:var(--tan-d);font-size:1.3rem}
.cart-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cart-row-brand{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tan-d)}
.cart-row-name{font-family:var(--serif);font-size:1rem;color:var(--gun);line-height:1.25}
.cart-row-meta{font-size:12px;color:var(--muted)}
.cart-row-controls{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.cart-qty{display:inline-flex;align-items:center;border:1px solid var(--rule);background:var(--parch);border-radius:2px}
.cart-qty button{width:28px;height:28px;background:none;border:0;color:var(--gun);font-size:15px;line-height:1;cursor:pointer}
.cart-qty button:hover{background:var(--parch2)}
.cart-qty b{min-width:26px;text-align:center;font-size:13.5px;font-variant-numeric:tabular-nums}
.cart-qty-fixed{font-size:12px;color:var(--muted);border:1px solid var(--rule);background:var(--parch);padding:5px 9px;border-radius:2px}
.cart-row-remove{background:none;border:0;color:var(--brown);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;font-family:var(--sans)}
.cart-row-remove:hover{text-decoration:underline}
.cart-row-price{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--ink);white-space:nowrap}

.cart-panel-foot{border-top:1px solid var(--rule);background:var(--parch);padding:16px 22px 20px;display:flex;flex-direction:column;gap:10px}
.cart-subtotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.cart-subtotal b{font-family:var(--serif);font-size:1.4rem;color:var(--ink)}
.cart-note{font-size:12px;color:var(--muted);line-height:1.45}
.cart-note b{color:var(--ink)}
.cart-foot-wide{width:100%;justify-content:center;text-align:center}
@media(max-width:480px){.cart-panel{width:100%}.cart-panel-body{padding:6px 16px}.cart-panel-head,.cart-panel-foot{padding-left:16px;padding-right:16px}}

/* =========================================================================
   COMPARE-AT PRICING — struck MSRP beside the dealer's advertised price
   =========================================================================
   Renders ONLY what api/catalog.php / product.php already decided. The
   strike-through markup is emitted server-side (product.php) or from the
   server's compare_at_shown flag (catalog.php's card renderer); nothing here
   is conditional on client state, and no rule may be used to "hide" a price —
   a suppressed compare-at is absent from the DOM, not display:none.

   Vocabulary is the existing Personal Counter one: --serif for money, --sans
   for the small caps line, --muted for the secondary figure, --ok for the
   savings tag (the same green the "In the shop" dot uses), 2px edges.
   ------------------------------------------------------------------------- */

/* The advertised figure keeps the weight it already had; .price-now exists so
   the struck figure can sit beside it without inheriting that size.
   flex-basis:100% claims the whole first line of .pcard .foot so the actions
   always sit on the row BELOW the price. Without it the card's wrap point
   depends on how wide that particular price + MSRP + save tag happens to be,
   and a grid mixes cards with the buttons beside the price and cards with them
   under it — measured in the browser, not assumed. */
.pcard .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;flex:1 1 100%}
.pcard .foot{flex-wrap:wrap;justify-content:flex-start}
.pcard .price .price-now,
.pd-price .price-now{font-family:var(--serif);font-weight:700;color:var(--ink)}

/* Struck MSRP. Lighter, smaller, tabular so the digits line up under the
   advertised price on a wrapped card. */
.price-was{
  font-family:var(--serif);
  font-size:.78em;
  font-weight:600;
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Savings tag — same small-caps treatment as .avail-tag / .ship-tag. */
.price-save{
  display:inline-block;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ok);
  background:var(--parch2);
  border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);
  border-radius:2px;
  padding:2px 7px;
  white-space:nowrap;
}

/* Detail page: the price block is already a baseline flex row, so the struck
   figure and the tag fall in beside the big number and wrap under it on
   narrow screens. .repnote keeps its own full-width line (flex-basis:100%). */
.pd-price{flex-wrap:wrap}
.pd-price .price-was{font-size:1.05rem}
.pd-price .price-save{font-size:11px}
.pd-price .repnote{flex-basis:100%}

@media(max-width:480px){
  .pcard .price-was{font-size:.75em}
  .pcard .price-save{font-size:10px;padding:1px 6px}
}