/*
Theme Name: Mad Dog Armory Enterprise
Theme URI: https://ffl-bro.com
Author: FFL-BRO
Author URI: https://ffl-bro.com
Description: Enterprise-tier customer-facing theme for Mad Dog Armory (Largo, South Tampa, East Tampa). Bone retail pages, charcoal chrome and the dealer's own crimson, wearing the Enterprise suite's structure: Barlow and Barlow Condensed, the 66px blurred nav, the stat tile, the card, pill and tab treatments, and the reserved status / division / magnitude colour channels. Navy and purple stay on the staff consoles. Reads tenant identity from FFL-BRO options and the locations table; nothing about the dealer is hardcoded in templates.
Version: 2.0.5
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: mda-theme
*/

/* ============================================================ tokens (v2.0.0)
   THE SPLIT. v1.8.0 put the console's navy and purple on the customer site;
   v2.0.0 puts the palette back and keeps everything else. JR: "option A for the
   site, option C for the backend (all modules and FFL-Bro stuff)."

     SITE      bone paper, charcoal chrome, the dealer's own crimson #b3121a,
               bronze as the secondary. One look, no mode toggle.
     BACK END  the console's navy #060a18 and purple #a855f7, on every FFL-BRO
               admin page. That lives in the Onyx mu-plugin, not here.

   What v1.8.x brought over from the suite and v2.0.0 KEEPS, because none of it
   was ever about colour: Barlow and Barlow Condensed in place of Oswald and
   Inter; the 66px full-bleed blurred nav, which is what stopped the cart being
   clipped; the stat tile; the card, pill and tab treatments; the 14px radius
   and the 5px hover lift on cubic-bezier(.16,1,.3,1); and the three reserved
   colour channels below.

   Colour is split into channels that never borrow from one another:
     STATUS      good / watch / critical / info. Reserved. Always paired with a
                 word or an icon, never used to say what something IS.
     DIVISION    which business unit. Fixed order, never cycled. Training keeps
                 bronze, which the suite chose when purple became ITS brand.
     MAGNITUDE   how much. One hue, five ordinal steps.
     BRAND       money, nav, interactive chrome. The accent, and nothing else.

   Two naming notes. --chrome is the DARK band (top bar, nav, hero, footer) that
   sits on a light page, so --on-chrome* is light ink while --ink* is the ink on
   the bone page. And --brand is the crimson: the --red* names stay as aliases
   because sixty rules and two templates still spell it that way.              */

:root{
  color-scheme:light;

  /* bone page + surfaces */
  --bg:#f4f1ea;--bg-2:#ebe7dd;--surface:#ffffff;--surface-2:#faf8f3;
  --paper:var(--bg);--paper-2:var(--bg-2);--card:var(--surface);--card-2:var(--surface-2);

  /* charcoal chrome: top bar, nav, hero, footer, dark bands */
  --chrome:#141414;--chrome-2:#1d1d1d;--chrome-3:#262626;
  --chrome-blur:rgba(20,20,20,.92);

  /* hairlines. --line is on the page, --line-dark is on the chrome. */
  --line:#dcd6c8;--line-2:#c8c1b0;
  --line-dark:rgba(255,255,255,.10);--line-dark-2:rgba(255,255,255,.18);

  /* ink */
  --hi:#151515;
  --ink:#151515;--ink-2:#4a4a4a;--ink-3:#7a766d;
  --on-chrome:#f4f1ea;--on-chrome-2:#b9b3a6;--on-chrome-3:#8f8a7e;
  --ink-on-dark:var(--on-chrome);--ink-on-dark-2:var(--on-chrome-2);--ink-on-dark-3:var(--on-chrome-3);

  /* brand chrome -- the dealer's crimson */
  --brand:#b3121a;--brand-2:#8f0d14;--brand-3:#d4262f;
  --brand-tint:rgba(179,18,26,.09);--brand-glow:rgba(179,18,26,.24);
  --on-brand:#ffffff;
  --red:var(--brand);--red-2:var(--brand-2);--red-3:var(--brand-3);--red-tint:var(--brand-tint);

  /* status -- reserved */
  --green:#1f7a3a;--green-tint:rgba(31,122,58,.10);--green-line:rgba(31,122,58,.30);
  --gold:#a16207;--gold-tint:rgba(161,98,7,.10);--gold-line:rgba(161,98,7,.30);
  --crit:#b3121a;--crit-tint:rgba(179,18,26,.09);--crit-line:rgba(179,18,26,.28);
  --info:#4a4a4a;--info-tint:rgba(74,74,74,.09);
  --amber:#c2410c;--amber-tint:rgba(194,65,12,.10);

  /* division identity -- fixed order, never cycled */
  --div-training:#b8862e;--div-gunsmith:#0d7d72;--div-consign:#1f4e79;--div-booking:#b5306e;
  --brass:#b8862e;--brass-2:#9a6f22;--brass-tint:rgba(184,134,46,.12);
  --blue:#1f4e79;--blue-tint:rgba(31,78,121,.10);
  --pink:#b5306e;--pink-tint:rgba(181,48,110,.10);
  /* purple is a console colour; on the public site it means only "Enterprise" */
  --purple:#6d28d9;--purple-tint:rgba(109,40,217,.10);

  /* magnitude */
  --heat-1:#fcd9a4;--heat-2:#f0a844;--heat-3:#d97e0d;--heat-4:#b45309;--heat-5:#7a3f07;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(20,20,20,.06),0 1px 1px rgba(20,20,20,.04);
  --shadow-md:0 10px 26px rgba(20,20,20,.12);
  --shadow-lg:0 18px 46px rgba(20,20,20,.18);

  /* type + metrics -- the suite's, kept */
  --font:'Barlow','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --font-display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --font-mono:'Courier New',ui-monospace,monospace;
  --radius:12px;--radius-sm:8px;--radius-lg:14px;--wrap:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* the chrome laid back over the hero canvas so the copy always has ground
     under it; it clears by 62% so the dog on the right stays untouched */
  --hero-scrim:linear-gradient(90deg,rgba(20,20,20,.86) 0%,rgba(20,20,20,.5) 36%,rgba(20,20,20,0) 62%);
}

/* -------------------------------------------------------- LEO collection band
   leo-pricing-bro renders the band on /leo/ with its own scoped palette. Since
   the plugin's v2.0.8 every colour and face in it is a themable hook with the
   band's own value as the fallback, so it still stands alone anywhere else. */
:root{
  --leo-accent:#b3121a;--leo-accent-2:#8f0d14;--leo-on-accent:#ffffff;
  --leo-cat:#1f4e79;
  --leo-bg:#f4f1ea;--leo-surface:#ffffff;--leo-line:#dcd6c8;
  --leo-text:#151515;--leo-muted:#7a766d;--leo-heading:#151515;--leo-body:#4a4a4a;
  --leo-plate:#ffffff;
  --leo-good:#1f7a3a;--leo-bad:#b3121a;
  --leo-hero-bg:radial-gradient(900px 420px at 82% -10%,rgba(179,18,26,.10),transparent 62%),radial-gradient(700px 360px at 0% 110%,rgba(184,134,46,.12),transparent 68%),#ffffff;
  --leo-font:'Barlow','Segoe UI',system-ui,sans-serif;
  --leo-font-display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --leo-font-condensed:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --leo-radius:14px;
}

/* fflbro-brand emits the tenant storefront palette as --flb-store-* on :root
   from a PHP filter, which functions.php sets. --flb-store-card is hard-coded
   to #1C1C1E inside the plugin's on-dark branch where a filter cannot reach it,
   so it is overridden here. */
:root{--flb-store-card:#ffffff}

/* ============================================================ base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.6;min-height:100vh}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color .15s}
a:hover{color:var(--brand-3)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.2px;color:var(--hi);text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,3.8rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.3rem;letter-spacing:.2px}
p{color:var(--ink-2)}
b,strong{color:var(--ink)}
::selection{background:var(--brand);color:var(--on-brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:5px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:var(--on-brand);padding:8px 14px;z-index:1000;font-weight:700}
.skip-link:focus{left:12px;top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================ buttons / badges */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--radius-sm);font:700 .88rem var(--font);cursor:pointer;border:1px solid transparent;transition:all .2s var(--ease);white-space:nowrap;letter-spacing:.2px}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-2);color:var(--on-brand);box-shadow:0 6px 20px var(--brand-glow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-dark{background:var(--chrome);color:#fff;border-color:var(--chrome)}
.btn-dark:hover{background:var(--chrome-3);color:#fff;border-color:var(--chrome-3)}
.btn-brass{background:var(--brass);color:#fff}.btn-brass:hover{background:var(--brass-2);color:#fff}
.on-dark .btn-ghost{color:var(--on-chrome);border-color:var(--line-dark-2)}
.on-dark .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-sm{padding:8px 14px;font-size:.8rem}.btn-block{width:100%}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.64rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;border:1px solid transparent}
.badge-orange,.badge-red{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-tint)}
.badge-purple{background:var(--chrome);color:#fff;border-color:var(--chrome)}
.badge-green{background:var(--green-tint);color:var(--green);border-color:var(--green-line)}
.badge-gold,.badge-brass{background:var(--brass-tint);color:var(--brass);border-color:var(--brass-tint)}
.badge-blue{background:var(--blue-tint);color:var(--blue)}
.badge-pink{background:var(--pink-tint);color:var(--pink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================ top bar + nav
   66px, hairline border, translucent ground with a 10px blur — the console's
   nav, on the storefront. No heavy rule underneath it any more. */
.topbar{background:var(--chrome);color:var(--on-chrome-3);font-size:.78rem;border-bottom:1px solid var(--line-dark)}
.topbar .wrap{display:flex;gap:18px;align-items:center;min-height:36px;flex-wrap:wrap;max-width:none;padding:0 32px}
.topbar a{color:var(--on-chrome-2)}.topbar a:hover{color:#fff}
.topbar .stores{display:flex;gap:16px;flex-wrap:wrap}
.topbar .right{margin-left:auto;display:flex;gap:14px;align-items:center}
.mda-leo-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 6px;border-radius:999px;background:rgba(184,134,46,.16);border:1px solid rgba(184,134,46,.45);color:#e5c777!important;font-weight:700;letter-spacing:.3px}
.mda-leo-pill i{width:16px;height:16px;border-radius:50%;background:var(--brass);color:#141414;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:.6rem;font-weight:800}
.mda-leo-pill:hover{background:rgba(184,134,46,.30);color:#f2dda6!important}

.nav{position:sticky;top:0;z-index:500;background:var(--chrome-blur);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid var(--brand)}
/* the console's nav is full-bleed at 32px, not centred in the content wrap.
   Centring it put ~1340px of chrome inside 1152px and clipped the cart. */
.nav .wrap{display:flex;align-items:center;gap:14px;height:66px;max-width:none;padding:0 32px;min-width:0}
.nav nav{min-width:0}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:.6px;text-transform:uppercase}
.brand img{width:30px;height:40px}
.brand small{display:block;font:600 .58rem var(--font);letter-spacing:1.6px;color:var(--brass);text-transform:uppercase}
.menu{display:flex;gap:2px;list-style:none;margin-left:2px}
.menu li{position:relative}
.menu a{display:block;padding:9px 11px;border-radius:7px;color:var(--on-chrome-3);font-weight:600;font-size:.84rem;white-space:nowrap;transition:.15s}
.menu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.menu .current-menu-item>a,.menu .current_page_item>a,.menu .current-menu-ancestor>a{color:#fff;background:rgba(179,18,26,.45)}
.menu .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:230px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow-lg);list-style:none;z-index:600}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.menu .sub-menu a{font-size:.86rem;padding:8px 12px;color:var(--ink-2);white-space:normal}
.menu .sub-menu a:hover{background:var(--brand-tint);color:var(--brand)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* the cart is .btn-dark, which is --chrome, and the bar is --chrome too, so on
   the nav it needs to lift off its own ground */
.nav .btn-dark{background:var(--chrome-3);border-color:var(--line-dark-2)}
.nav .btn-dark:hover{background:#333;border-color:#4a4a4a}
.nav .btn-ghost{color:#fff;border-color:var(--line-dark-2)}
.nav .btn-ghost:hover{border-color:#fff;color:#fff}
.nav-toggle{display:none;background:none;border:1px solid var(--line-dark-2);color:#fff;border-radius:7px;padding:8px 10px;cursor:pointer;font-size:1.1rem}
/* the menu is wide; drop the secondary buttons before the links are allowed to
   wrap, because "Training & Classes" breaking mid-phrase is what wrapping
   actually looks like at 1100px */
@media(max-width:1340px){.nav-right .btn-ghost{display:none}}
@media(max-width:1180px){.brand small{display:none}}
@media(max-width:1020px){
  .topbar .wrap,.nav .wrap{padding:0 20px}
  .menu{display:none;position:absolute;left:0;right:0;top:66px;background:var(--chrome-2);border-bottom:2px solid var(--brand);flex-direction:column;padding:12px 16px 18px;gap:2px;max-height:calc(100vh - 66px);overflow:auto}
  .menu.open{display:flex}
  .menu a{white-space:normal}
  .menu .sub-menu{position:static;display:block;box-shadow:none;border:none;background:transparent;padding:0 0 4px 14px}
  .nav-toggle{display:inline-block}
  .topbar .right{display:none}
}

/* ============================================================ hero
   Console hero: the ground, two radial washes over it, the second headline
   line in the brand. No photograph, no heavy divider. */
.hero{position:relative;background:var(--chrome);color:var(--on-chrome);padding:80px 0 62px;overflow:hidden;text-align:left}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 85% 0%,rgba(179,18,26,.28),transparent 65%),
             radial-gradient(600px 320px at 0% 100%,rgba(184,134,46,.14),transparent 70%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,var(--brand) 0 60px,var(--brass) 60px 90px,transparent 90px 120px);opacity:.9}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--line-dark-2);color:var(--on-chrome-2);padding:6px 15px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin-bottom:22px}
.hero h1{color:#fff}.hero h1 span{color:var(--brand-3)}
.hero p.lead{font-size:1.1rem;color:var(--on-chrome-2);max-width:620px;margin:18px 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* the console stat tile: condensed numeral in the brand, micro label under it */
.hstat{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--radius);padding:20px 18px;transition:border-color .2s}
.hstat:hover{border-color:var(--line-dark-2)}
.hstat-num{font-family:var(--font-display);font-size:2.5rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.hstat-num em{font-style:normal;color:var(--brass)}
.hstat-label{font-size:.68rem;color:var(--on-chrome-3);text-transform:uppercase;letter-spacing:1.1px;margin-top:6px;font-weight:700}

/* ============================================================ sections */
.section{padding:64px 0}
.section.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark{background:var(--chrome);color:var(--on-chrome)}
.section.dark h2,.section.dark h3{color:var(--hi)}.section.dark p{color:var(--on-chrome-2)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.sec-kicker{font-size:.68rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.sec-sub{color:var(--ink-3);margin-top:8px;max-width:640px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

/* ============================================================ cards
   Suite card: hairline border, 14px radius, and on hover it lifts 5px, takes
   the brand on its border and drops a shadow. .25s on the suite easing. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);position:relative}
.card:hover{border-color:var(--brand);transform:translateY(-5px);box-shadow:var(--shadow-md),0 0 0 1px var(--brand-glow)}
.card .ico{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--brand-tint);color:var(--brand);margin-bottom:14px}
.card .ico svg{width:24px;height:24px}
.card h3{margin-bottom:8px}
.card p{font-size:.93rem;color:var(--ink-3)}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;font-size:.85rem;color:var(--brand)}
.card.link{cursor:pointer}
.card.link a.cover{position:absolute;inset:0;border-radius:var(--radius-lg)}
.card.purple{border-left:3px solid var(--brand)}
.cat-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius);color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm);transition:.25s var(--ease)}
.cat-card:hover{border-color:var(--brand);border-left-color:var(--brand);color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.cat-card .ico{width:38px;height:38px;border-radius:9px;background:var(--brand-tint);display:flex;align-items:center;justify-content:center;color:var(--brand);flex:none}
.cat-card small{display:block;font-weight:500;font-size:.78rem;color:var(--ink-3)}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:18px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.trust span{display:inline-flex;align-items:center;gap:8px;font-size:.79rem;color:var(--ink-2);font-weight:600;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.trust svg{width:15px;height:15px;color:var(--green)}

/* ============================================================ product cards */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);color:var(--ink)}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md),0 0 0 1px var(--brand-glow);border-color:var(--brand);color:var(--ink)}
/* product photography is shot on white, so it keeps a light plate on both
   themes rather than being punched out of the dark surface */
.pimg{height:174px;background:linear-gradient(160deg,#fff,var(--bg-2));display:flex;align-items:center;justify-content:center;color:var(--line-2);position:relative;border-bottom:1px solid var(--line)}
.pimg img{max-height:152px;width:auto;object-fit:contain}
.pimg .flag{position:absolute;top:10px;left:10px;z-index:2}
/* Badges are tint-filled, which works on a flat surface and not at all over
   product photography — the gun showed straight through the In-store pill.
   Over the image plate they get an opaque backing. Crimson and this green both
   clear 4.5:1 on it, so here they can stay on the tokens. */
.pimg .flag.badge{background:rgba(255,255,255,.94);border-color:var(--line);box-shadow:0 1px 3px rgba(20,20,20,.14)}
.pimg .flag.badge-red,.pimg .flag.badge-orange{color:var(--brand)}
.pimg .flag.badge-green{color:var(--green)}
.pbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ptag{font-size:.64rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-3)}
.pname{font-weight:700;color:var(--ink);line-height:1.25;font-size:.97rem}
.pmeta{font-size:.78rem;color:var(--ink-3)}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.price{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--hi);font-variant-numeric:tabular-nums}
.price small{font-size:.68rem;color:var(--ink-3);font-family:var(--font);font-weight:600;margin-left:4px;text-transform:uppercase;letter-spacing:.6px}
.pcard .stock{font-size:.72rem;font-weight:700}
.skeleton{background:linear-gradient(90deg,var(--bg-2) 25%,#fff 50%,var(--bg-2) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--radius-lg);min-height:280px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================ classes
   Training wears bronze, not the brand: purple is the brand now, and a colour
   must not mean two things. */
.class-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--div-training);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.class-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.class-top{padding:18px 20px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.class-body{padding:12px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.class-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--ink-3);font-weight:600}
.class-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.bar{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;background:var(--brand)}
/* pill tray: the suite's tab row */
.tabs{display:inline-flex;gap:6px;flex-wrap:wrap;margin-bottom:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px}
.tab{padding:9px 18px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--ink-3);font:700 .84rem var(--font);cursor:pointer;transition:.2s}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--chrome);border-color:var(--chrome);color:#fff;box-shadow:0 4px 16px rgba(20,20,20,.22)}

/* ============================================================ locations */
.loc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm)}
.loc-card.primary{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.loc-card h3{display:flex;align-items:center;gap:10px}
.loc-card address{font-style:normal;color:var(--ink-2);line-height:1.5}
.loc-card .hours{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.86rem;color:var(--ink-2)}
.loc-card .hours b{color:var(--ink);font-weight:700}
.loc-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ============================================================ faq */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 18px;margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--brand);font-weight:700;font-size:1.2rem;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details[open]{border-color:var(--line-2)}
.faq details p{padding:0 0 16px;color:var(--ink-3)}
.faq h3.group{margin:30px 0 12px;color:var(--brand);font-size:.95rem;letter-spacing:1.4px}

/* ============================================================ forms */
.form{display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-size:.7rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius-sm);padding:11px 13px;font:500 .95rem var(--font);outline:none;transition:.18s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-3)}
.form .note{font-size:.8rem;color:var(--ink-3)}
.form .msg{padding:12px 14px;border-radius:var(--radius-sm);font-weight:700;display:none}
.form .msg.ok{display:block;background:var(--green-tint);color:var(--green);border:1px solid var(--green-line)}
.form .msg.err{display:block;background:var(--crit-tint);color:var(--crit);border:1px solid var(--crit-line)}
.footer .form label{color:var(--on-chrome-3)}
.footer .form input{background:rgba(255,255,255,.06);border-color:var(--line-dark-2);color:#fff;min-width:0}
.footer .form .btn{flex:none}

/* ---------------------------------------------------------------- awards
   Bronze on the surface. Bronze is the division colour, not the brand, so an
   accolade never competes with a call to action. Only shown on the premises
   that actually won. */
.mda-award{display:inline-flex;align-items:center;gap:9px;margin:2px 0 12px;
  padding:7px 12px 7px 9px;border:1px solid var(--brass);
  background:var(--brass-tint);border-radius:999px;line-height:1.15}
.mda-award-cup{width:20px;height:24px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.mda-award-txt{display:flex;flex-direction:column;gap:1px}
.mda-award-txt b{font:700 .76rem/1 var(--font);letter-spacing:.9px;text-transform:uppercase;color:var(--brass)}
.mda-award-txt i{font-style:normal;font:600 .7rem/1 var(--font);letter-spacing:1.3px;color:var(--ink-3)}
.on-dark .mda-award-txt b,.section.dark .mda-award-txt b,.page-hero .mda-award-txt b{color:var(--brass)}
.on-dark .mda-award-txt i,.section.dark .mda-award-txt i,.page-hero .mda-award-txt i{color:var(--on-chrome-2)}
.mda-award-lg{padding:12px 20px 12px 15px;gap:14px}
.mda-award-lg .mda-award-cup{width:44px;height:52px}
.mda-award-lg .mda-award-txt b{font-size:1.05rem;letter-spacing:1px}
.mda-award-lg .mda-award-txt i{font-size:.84rem}
.mda-award-band-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.mda-award-band-in > div{flex:1 1 320px}
.mda-award-band-in h2{margin:8px 0 0}
.mda-award-band-in .sec-sub{margin-top:10px}
.mda-award-band-in .btn{margin-top:16px}
@media (max-width:640px){.mda-award-band-in{gap:18px}}

/* ============================================================ content pages */
.page-hero{background:var(--chrome);color:var(--on-chrome);padding:56px 0 40px;border-bottom:4px solid var(--brand);position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 88% -20%,rgba(179,18,26,.30),transparent 64%)}
.page-hero > *{position:relative}
/* animated MDA backdrop (assets/js/mda-backdrop.js), opt-in via page-hero's
   `backdrop` arg. isolation keeps the canvas out of the page stacking context;
   min-height gives it something to fill since the canvas is absolute and
   cannot size its own parent. */
.page-hero.has-backdrop{isolation:isolate;background:#0a0a0a;min-height:290px;display:flex;align-items:center}
.page-hero.has-backdrop:before{inset:0;background:var(--hero-scrim);z-index:1}
@media(max-width:900px){.page-hero.has-backdrop:before{background:linear-gradient(180deg,transparent 0%,var(--bg) 78%)}}
.page-hero .mda-bd{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.page-hero .mda-fg{position:relative;z-index:2;width:100%}
/* the dog parks on the right, so hold the copy off that half on wide screens */
@media (min-width:900px){.page-hero.has-backdrop .mda-fg h1,.page-hero.has-backdrop .mda-fg p.lead{max-width:min(640px,62%)}}
@media (max-width:640px){.page-hero.has-backdrop{min-height:240px}}
@media (prefers-reduced-motion:reduce){.page-hero.has-backdrop{min-height:0}}
.page-hero h1{color:#fff}
.page-hero p.lead{font-size:1.06rem;max-width:720px;margin-top:12px;color:var(--on-chrome-2)}
.page-hero.has-backdrop p.lead{color:var(--on-chrome)}
.page-hero.has-backdrop .crumbs{color:var(--on-chrome-2)}
.page-hero .sec-kicker{color:var(--brass)}
.crumbs{font-size:.76rem;color:var(--on-chrome-3);margin-bottom:14px}
.crumbs a{color:var(--on-chrome-2)}.crumbs a:hover{color:#fff}.crumbs span{margin:0 6px}
.prose{max-width:820px}
.prose h2{margin:34px 0 12px;font-size:1.7rem}.prose h3{margin:24px 0 8px}
.prose p,.prose li{margin-bottom:12px;color:var(--ink-2)}
.prose ul,.prose ol{padding-left:22px}
.prose strong{color:var(--ink)}
.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius);padding:18px 20px;margin:20px 0;box-shadow:var(--shadow-sm)}
.callout.purple{border-left-color:var(--brass)}
.fee-table{width:100%;border-collapse:collapse;margin:16px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fee-table th,.fee-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.fee-table tr:last-child td{border-bottom:0}
.fee-table th{color:var(--ink-3);font-size:.68rem;letter-spacing:1.1px;text-transform:uppercase;background:var(--bg);font-weight:700}
.fee-table td b{font-family:var(--font-display);font-size:1.3rem;color:var(--brand);font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
.steps{counter-reset:s;display:grid;gap:14px}
.step{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm)}
.step:before{counter-increment:s;content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;background:var(--chrome);color:#fff;font:700 1.05rem var(--font-display);display:flex;align-items:center;justify-content:center}
.step h3{font-size:1.05rem;margin-bottom:4px}
.cta-band{background:var(--chrome);border:1px solid var(--chrome);color:var(--on-chrome);border-radius:var(--radius-lg);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band:before{content:"";position:absolute;inset:0;background:radial-gradient(520px 260px at 100% 0%,rgba(179,18,26,.35),transparent 68%)}
.cta-band>*{position:relative}
.cta-band h2{margin-bottom:6px;color:#fff}.cta-band p{color:var(--on-chrome-2)}.cta-band .sec-kicker{color:var(--brass)}
.cta-band .btn-ghost{color:#fff;border-color:var(--line-dark-2)}
.embed-shell{background:#0e1119;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;min-height:60vh}
.embed-shell iframe{width:100%;min-height:80vh;border:0;display:block}
.stars{color:var(--gold);letter-spacing:2px;font-size:.9rem}

/* LEO section on home */
.leo-band{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--shadow-sm)}
.leo-band .shield{width:52px;height:52px;border-radius:12px;background:var(--brass-tint);color:var(--brass);display:flex;align-items:center;justify-content:center}
.leo-band h3{margin-bottom:4px}
@media(max-width:800px){.leo-band{grid-template-columns:1fr}}

/* posts */
.post-list article{padding:22px 0;border-bottom:1px solid var(--line)}
.post-list h2{font-size:1.6rem}
.entry-meta{font-size:.78rem;color:var(--ink-3);margin:6px 0 10px}

/* ============================================================ footer */
.footer{background:var(--chrome);color:var(--on-chrome-2);border-top:4px solid var(--brand);padding:52px 0 26px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:34px;margin-bottom:30px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer .brand{font-size:1.15rem;margin-bottom:12px}
.footer-desc{font-size:.84rem;color:var(--on-chrome-3);line-height:1.7;max-width:320px}
.footer-h{font-size:.68rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.footer ul{list-style:none}.footer li{margin-bottom:8px;font-size:.86rem}
.footer li a{color:var(--on-chrome-2)}.footer li a:hover{color:#fff}
.footer-store{font-size:.82rem;color:var(--on-chrome-2);margin-bottom:12px;line-height:1.5}
.footer-store b{color:#fff;display:block}
.footer-store a{color:var(--brass)}
.social{display:flex;gap:10px;margin-top:14px}
.social a{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-dark-2);display:flex;align-items:center;justify-content:center;color:var(--on-chrome-2);transition:.2s}
.social a:hover{border-color:#fff;color:#fff}
.social svg{width:16px;height:16px;fill:currentColor}
.footer-bottom{border-top:1px solid var(--line-dark);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.76rem;color:var(--on-chrome-3)}
.footer-bottom a{color:var(--on-chrome-3)}.footer-bottom a:hover{color:#fff}
.powered{display:inline-flex;align-items:center;gap:6px}
.powered b{color:var(--brass)}

/* reveal animation (skipped under reduced motion) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .dot{animation:none}
  html{scroll-behavior:auto}
  .card:hover,.pcard:hover,.cat-card:hover,.class-card:hover{transform:none}
}
@media print{.topbar,.nav,.footer,.hero-cta,.cta-band{display:none}body{background:#fff;color:#000}}

/* ------------------------------------------------------------- NFA wait card
   Was inline-styled with `border-bottom:1px solid var(--border)`, a token this
   theme has never defined, so every row rule fell back to currentColor. */
.nfa-wait-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink-2)}
.nfa-wait-row:last-of-type{border-bottom:0}
.nfa-wait-row b{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--brand);white-space:nowrap;font-variant-numeric:tabular-nums}
.nfa-wait-meta{margin-top:10px;font:700 .66rem var(--font);letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3)}

/* ---------------------------------------------------------------- FFL finder
   EP+ renders the finder itself (class-wtf-hooks.php) with its own markup and
   no styling of its own on this site, so it came through as raw browser
   controls. Its button carries `btn--primary`, not the theme's `btn-primary`,
   which is why it inherited .btn geometry and no colour. */
.wtf-ffl-finder .ffl-search-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wtf-ffl-finder input[type="text"]{flex:1 1 220px;min-width:0;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius-sm);padding:11px 13px;font:500 .95rem var(--font);outline:none;transition:.18s}
.wtf-ffl-finder input[type="text"]::placeholder{color:var(--ink-3)}
.wtf-ffl-finder input[type="text"]:focus,.wtf-ffl-finder select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.wtf-ffl-finder select{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius-sm);padding:11px 12px;font:600 .9rem var(--font);outline:none}
.wtf-ffl-finder .btn--primary{background:var(--brand);color:var(--on-brand);border:1px solid var(--brand)}
.wtf-ffl-finder .btn--primary:hover{background:var(--brand-2);border-color:var(--brand-2);box-shadow:0 6px 20px var(--brand-glow)}
.ffl-results{display:grid;gap:12px;margin-top:18px}
.ffl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.ffl-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.ffl-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ffl-name{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.2px;text-transform:uppercase;color:var(--ink)}
.ffl-dist{font:700 .7rem var(--font);letter-spacing:.9px;text-transform:uppercase;color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:4px 10px;font-variant-numeric:tabular-nums}
.ffl-addr{color:var(--ink-2);font-size:.92rem}
.ffl-meta{color:var(--ink-3);font-size:.84rem;margin-top:4px}
.ffl-loading,.ffl-err{color:var(--ink-3);font-weight:600;padding:10px 0}
.ffl-err{color:var(--crit)}

/* ============================================================ headless catalog */
.catalog-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.catalog-search{position:relative;flex:1 1 380px;display:flex;gap:8px}
.catalog-search input{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 14px;font:500 .95rem var(--font);color:var(--ink);outline:none;transition:.18s}
.catalog-search input::placeholder{color:var(--ink-3)}
.catalog-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.suggest{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:50;padding:6px;margin-top:4px}
.suggest button{display:flex;justify-content:space-between;width:100%;text-align:left;background:none;border:0;padding:9px 10px;font:600 .9rem var(--font);color:var(--ink);cursor:pointer;border-radius:var(--radius-sm)}
.suggest button:hover{background:var(--bg);color:var(--brand)}
.suggest small{color:var(--ink-3);font-size:.7rem;text-transform:uppercase;letter-spacing:.8px}
.catalog-sort{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.8px}
.catalog-sort select{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:9px 10px;font:600 .88rem var(--font);color:var(--ink);text-transform:none;letter-spacing:0}
.cart-badge{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:.7rem;font-weight:800;align-items:center;justify-content:center;margin-left:4px}
.nav-cart{padding:8px 12px}
.catalog-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;font:700 .78rem var(--font);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active,.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.catalog-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
@media(max-width:900px){.catalog-layout{grid-template-columns:1fr}.catalog-side{order:2;position:static;max-height:none}}
.catalog-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;position:sticky;top:82px;max-height:calc(100vh - 100px);overflow:auto}
.facet{margin-bottom:18px}
.facet-h{font-size:.66rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.facet-list{list-style:none}.facet-list li{margin-bottom:2px}
.facet-opt{width:100%;text-align:left;background:none;border:0;padding:7px 10px;border-radius:var(--radius-sm);font:600 .88rem var(--font);color:var(--ink-2);cursor:pointer;transition:.15s}
.facet-opt:hover{background:var(--bg);color:var(--ink)}
.facet-opt.active{background:var(--brand-tint);color:var(--brand);font-weight:700}
.facet-sel{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:9px 10px;font:600 .88rem var(--font);color:var(--ink)}
.facet-check{display:flex;gap:8px;align-items:center;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.catalog-meta{font-size:.8rem;color:var(--ink-3);margin-bottom:12px;font-weight:700;font-variant-numeric:tabular-nums}
.catalog-pager{margin-top:22px;justify-content:center}
.pager-gap{padding:9px 4px;color:var(--ink-3)}
.catalog .pgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.catalog .pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.catalog .pgrid{grid-template-columns:1fr}}
.pimg{cursor:pointer}
.drawer,.modal{position:fixed;inset:0;z-index:900;display:none}
.drawer.open,.modal.open{display:block}
.drawer-backdrop,.modal-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-body{flex:1;overflow:auto;padding:16px 20px}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--line);display:grid;gap:10px;background:var(--bg)}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-img{width:64px;height:64px;border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--bg)}
.cart-img img{max-height:56px}
.cart-qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.cart-qty button{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);border-radius:6px;width:28px;height:28px;cursor:pointer;font-weight:700}
.cart-qty button:hover{border-color:var(--brand);color:var(--brand)}
.cart-qty .cart-rm{width:auto;padding:0 8px;font-size:.75rem;color:var(--crit);border-color:transparent;background:transparent}
.cart-sub{display:flex;justify-content:space-between;font-size:1.05rem}
.modal-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px,94vw);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px}
.modal-x{position:absolute;top:12px;right:12px;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:50%;width:34px;height:34px;cursor:pointer}
.modal-x:hover{border-color:var(--brand);color:var(--brand)}
.qv{display:grid;grid-template-columns:1fr 1.2fr;gap:26px}@media(max-width:700px){.qv{grid-template-columns:1fr}}
.qv-img{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;min-height:280px;padding:16px}
.qv-img img{max-height:340px;object-fit:contain}
.qv-specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0;font-size:.9rem}
.qv-specs dt{color:var(--ink-3);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.9px;padding-top:2px}
.qv-specs dd{color:var(--ink)}
.qv-price{display:flex;align-items:baseline;gap:12px}.qv-price .price{font-size:2.1rem}.qv-price s{color:var(--ink-3)}
.qv-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.qv-actions label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-3)}
.qv-actions input{width:70px;padding:9px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
.mda-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--chrome);border:1px solid var(--chrome);color:#fff;padding:12px 18px;border-radius:var(--radius-sm);font-weight:700;opacity:0;transition:.25s;z-index:1000;pointer-events:none;box-shadow:var(--shadow-lg)}
.mda-toast.on{opacity:1;transform:translate(-50%,0)}