/* Sticks & Stones — shared design system (Ticket 00).
   Canonical source for tokens + shell + catalog components, extracted
   verbatim from the shop pages' previously-duplicated <style> block.
   New homepage/hub components are appended below. */

  :root{
    --bg:#0b0b0c; --bg2:#121214; --card:#161618; --tile:#f3f3f5;
    --red:#e11d2a; --red2:#b3121d; --red-glow:rgba(225,29,42,.45);
    --gold:#e8b34a; --gold2:#caa036; --gold-glow:rgba(232,179,74,.45);
    --text:#f5f5f6; --muted:#9a9aa3; --line:#26262b; --green:#36d17a;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.5;
  }
  a{color:inherit; text-decoration:none}
  h1,h2,h3,.dt{font-family:"Oswald",sans-serif; font-weight:600; letter-spacing:.02em; margin:0}
  .wrap{max-width:1200px; margin:0 auto; padding:0 22px}
  .red{color:var(--red)}

  /* ── announcement bar ── */
  .topbar{background:var(--red); color:#fff; text-align:center; font-size:11px;
    font-weight:600; letter-spacing:.13em; text-transform:uppercase; padding:5px 14px}

  /* ── header ── */
  header{position:sticky; top:0; z-index:50; background:rgba(11,11,12,.72);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background .25s}
  header.solid{background:rgba(11,11,12,.97)}
  .nav{display:flex; align-items:center; gap:20px; height:64px}
  .brand{display:flex; align-items:center; gap:11px; font-family:"Oswald",sans-serif;
    font-weight:700; font-size:19px; letter-spacing:.06em; text-transform:uppercase;
    white-space:nowrap; flex:none}
  .brand .mark{width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
    background:linear-gradient(145deg,var(--red),var(--red2)); color:#fff; font-size:15px;
    box-shadow:0 0 18px var(--red-glow)}
  .nav .links{display:flex; gap:18px; margin-left:auto; font-size:13px; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
  .nav .links a:hover{color:#fff}
  .btn{display:inline-flex; align-items:center; gap:8px; border-radius:50px; font-weight:600;
    font-size:14px; padding:11px 22px; cursor:pointer; border:1px solid transparent;
    transition:transform .12s, box-shadow .2s, background .2s; white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn-red{background:linear-gradient(145deg,var(--red),var(--red2)); color:#fff;
    box-shadow:0 6px 22px -6px var(--red-glow)}
  .btn-red:hover{box-shadow:0 10px 30px -6px var(--red-glow)}
  .btn-ghost{background:transparent; color:#fff; border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--red); color:#fff}
  .nav .btn{margin-left:4px}
  .hide-sm{display:inline-flex}

  /* ── hero ── */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
    background:
      radial-gradient(900px 420px at 78% -8%, rgba(225,29,42,.20), transparent 60%),
      radial-gradient(700px 500px at 0% 110%, rgba(225,29,42,.10), transparent 55%),
      var(--bg)}
  .hero::after{content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(transparent 95%, rgba(255,255,255,.03) 95%),
                     linear-gradient(90deg, transparent 95%, rgba(255,255,255,.03) 95%);
    background-size:46px 46px; opacity:.5}
  .hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr;
    gap:40px; align-items:center; padding:64px 22px 60px}
  .eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700;
    letter-spacing:.22em; text-transform:uppercase; color:var(--red); margin-bottom:18px}
  .eyebrow::before{content:""; width:26px; height:2px; background:var(--red)}
  .hero h1{font-size:clamp(44px,7vw,84px); line-height:.96; font-weight:700; text-transform:uppercase}
  .hero p.lede{color:var(--muted); font-size:17px; max-width:30em; margin:20px 0 28px}
  .hero .cta{display:flex; gap:13px; flex-wrap:wrap}
  .stats{display:flex; gap:30px; margin-top:34px; flex-wrap:wrap}
  .stat .n{font-family:"Oswald",sans-serif; font-size:30px; font-weight:700; line-height:1}
  .stat .l{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:5px}
  /* featured tile */
  .feature{position:relative; justify-self:center; width:100%; max-width:400px}
  .feature .ring{position:relative; border-radius:20px; padding:26px; background:var(--tile);
    box-shadow:0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05),
               0 0 60px -10px var(--red-glow)}
  .feature .ring::before{content:"IN STOCK"; position:absolute; top:16px; left:16px; z-index:2;
    background:var(--red); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.12em;
    padding:5px 10px; border-radius:50px}
  .feature img{display:block; width:100%; height:240px; object-fit:contain; mix-blend-mode:multiply}
  .feature .cap{margin-top:14px; text-align:center}
  .feature .cap .nm{font-family:"Oswald",sans-serif; font-weight:600; font-size:18px;
    text-transform:uppercase; color:#111; letter-spacing:.02em}
  .feature .cap .pr{color:#555; font-size:13px; margin-top:2px}
  /* hero brand logo (replaces the featured gun photo) */
  .feature .ring--brand{display:grid; place-items:center; min-height:300px; padding:46px 26px}
  .feature .ring--brand::before{display:none}            /* hide the "IN STOCK" pill */
  .gl-mark{text-align:center; line-height:1}
  .gl-word{display:block; font-family:"Archivo Black","Montserrat",sans-serif; font-weight:400;
    font-size:clamp(50px,6.6vw,76px); letter-spacing:-.02em; color:#0c0c0d}
  .gl-word--ss{font-size:clamp(34px,4.9vw,55px); line-height:.9; letter-spacing:-.02em}
  .gl-tag{display:block; margin-top:15px; font-family:"Archivo Black","Inter",sans-serif; font-weight:400;
    font-size:clamp(10px,1.35vw,13px); letter-spacing:.62em; color:var(--red); padding-left:.62em}

  /* ── trust strip ── */
  .trust{border-bottom:1px solid var(--line); background:var(--bg2)}
  .trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:20px 22px}
  .trust .t{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted)}
  .trust .t b{color:#fff; font-weight:600}
  .trust .ic{width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center;
    background:rgba(225,29,42,.12); color:var(--red); font-size:15px}

  /* ── sections ── */
  section.cat{padding:58px 0 8px}
  .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
    margin-bottom:26px; flex-wrap:wrap}
  .sec-head h2{font-size:clamp(28px,4vw,42px); text-transform:uppercase}
  .sec-head .sub{color:var(--muted); font-size:14px; margin-top:6px}
  .sec-head .count{font-family:"Oswald",sans-serif; color:var(--red); font-weight:600}
  .accent{width:54px; height:4px; background:var(--red); border-radius:3px; margin-bottom:16px}

  /* ── product grid ── */
  /* --cols (default 4) is set per page from grid_config.py (curate ▦ Grid control). */
  .grid{display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:20px; padding-bottom:30px}
  /* Desktop = exactly --cols across (sidebar present, ≥981px).  Tablet (no sidebar) goes fluid. */
  @media (min-width:521px) and (max-width:980px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  }
  /* ── "Flatten" view: shop_filter.js adds .flat to .catalog when a NON-brand filter is
        active.  display:contents dissolves the per-brand section + header boxes so every
        matching card flows into ONE continuous grid (no brand grouping).  DOM is untouched
        (curate/filter logic unaffected).  Revert: FLATTEN_ON_FILTER=false in shop_filter.js. */
  .catalog.flat{display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:20px; align-content:start}
  .catalog.flat > .filter-sec, .catalog.flat > .filter-sec > .grid{display:contents}
  .catalog.flat .accent, .catalog.flat .sec-head, .catalog.flat .showall{display:none}
  .catalog.flat #noResults{grid-column:1/-1}
  @media (min-width:521px) and (max-width:980px){
    .catalog.flat{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  }
  @media (max-width:520px){
    .catalog.flat{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:13px}
  }
  .pcard{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column; transition:transform .14s, border-color .2s, box-shadow .2s}
  .pcard:hover{transform:translateY(-4px); border-color:rgba(225,29,42,.55);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(225,29,42,.25)}
  .pcard__img{position:relative; background:var(--tile); height:188px; display:grid; place-items:center; padding:18px}
  .pcard__img img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
  .pcard__img--empty{font-family:"Oswald",sans-serif; color:#c7c7cc; font-weight:600; letter-spacing:.1em}
  .badge{position:absolute; top:11px; font-size:10px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; padding:5px 9px; border-radius:50px}
  .badge.stock{left:11px; background:var(--green); color:#06210f}
  .badge.low{left:11px; background:var(--red); color:#fff}
  .badge.cal{right:11px; background:#101012; color:#fff; border:1px solid rgba(255,255,255,.14)}
  .pcard__body{padding:15px 16px 17px; display:flex; flex-direction:column; gap:9px; flex:1}
  .pcard__title{font-family:"Oswald",sans-serif; font-weight:600; font-size:17.5px;
    text-transform:uppercase; letter-spacing:.02em; line-height:1.1}
  .pcard__sub{font-size:12px; color:var(--muted); line-height:1.35; min-height:2.5em}
  .pills{display:flex; flex-wrap:wrap; gap:6px}
  .pill{font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:#d6d6db; background:#1d1d20; border:1px solid var(--line); padding:4px 8px; border-radius:50px}
  .price{margin-top:auto; padding-top:11px; border-top:1px solid var(--line)}
  .price .msrp{display:flex; align-items:baseline; gap:8px}
  .price .amt{font-family:"Oswald",sans-serif; font-size:23px; font-weight:700}
  .price .tag{font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--muted);
    border:1px solid var(--line); padding:2px 7px; border-radius:50px}
  .price .hint{font-size:11.5px; color:var(--red); font-weight:600; margin-top:2px}
  .pcard .btn-red{width:100%; justify-content:center; margin-top:12px; padding:11px}
  /* ── Featured (owner curate ★) — bold standout colour scheme, shown to everyone.
        Double-class so it beats the per-template inline .pcard regardless of source order. */
  .pcard.pcard--featured{border:1.5px solid var(--gold);
    background:linear-gradient(157deg, rgba(232,179,74,.16), rgba(232,179,74,0) 46%), var(--card);
    box-shadow:0 0 0 1px rgba(232,179,74,.4), 0 18px 44px -20px var(--gold-glow)}
  .pcard.pcard--featured:hover{transform:translateY(-4px); border-color:var(--gold);
    box-shadow:0 0 0 1px rgba(232,179,74,.6), 0 24px 52px -18px var(--gold-glow)}
  .pcard.pcard--featured .pcard__img{background:linear-gradient(180deg,#fbf2dd,#f3f3f5)}
  .pcard.pcard--featured .pcard__title{color:var(--gold)}
  .pcard.pcard--featured .price{border-top-color:rgba(232,179,74,.3)}
  .pcard.pcard--featured .price .amt{color:var(--gold)}
  /* Deleted (owner curate 🗑) — only ever rendered to the owner via ?show_deleted=1.
     Heavily greyed + a "DELETED" ribbon so it's unmistakable from a hidden item. */
  .pcard.pcard--deleted{opacity:.45; filter:grayscale(.9); border-style:dashed; border-color:#5a2a2e}
  .pcard.pcard--deleted:hover{opacity:.7}
  .pcard.pcard--deleted .pcard__img::after{content:"Deleted"; position:absolute; top:11px;
    left:50%; transform:translateX(-50%); z-index:6;
    background:#7a1620; color:#ffd9dc; font:700 10px/1 "Inter",system-ui,sans-serif;
    letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border-radius:50px;
    box-shadow:0 4px 14px rgba(0,0,0,.55); white-space:nowrap}
  /* "★ Featured" ribbon — CSS-only (no markup change), centred at the BOTTOM of the image
     so it never collides with the top stock / category badges. */
  .pcard.pcard--featured .pcard__img::after{content:"★ Featured"; position:absolute; bottom:10px;
    left:50%; transform:translateX(-50%); z-index:5;
    background:linear-gradient(145deg,var(--gold),var(--gold2)); color:#241a05;
    font:700 10px/1 "Inter",system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
    padding:5px 11px; border-radius:50px; box-shadow:0 4px 14px rgba(0,0,0,.5); white-space:nowrap}

  /* ── CTA band ── */
  .band{margin:64px 0 0; border-top:1px solid var(--line);
    background:radial-gradient(700px 300px at 50% 0%, rgba(225,29,42,.16), transparent 60%), var(--bg2)}
  .band .wrap{text-align:center; padding:60px 22px}
  .band h2{font-size:clamp(28px,4.4vw,46px); text-transform:uppercase}
  .band p{color:var(--muted); max-width:34em; margin:14px auto 26px; font-size:15.5px}

  /* ── footer ── */
  footer{border-top:1px solid var(--line); background:var(--bg); margin-top:0}
  footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:40px 22px}
  footer .fnote{color:var(--muted); font-size:12.5px; max-width:46em; line-height:1.6}
  footer .brand{font-size:17px}
  footer a.eml{color:var(--red); font-weight:600}

  .empty{padding:70px 22px; text-align:center; color:var(--muted)}

  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr; padding:46px 22px}
    .feature{order:-1; max-width:320px}
    .trust .wrap{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:520px){
    .trust .wrap{grid-template-columns:1fr}
    .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:13px}
    .stats{gap:22px}
  }

  /* ── sale pricing + card actions ── */
  .badge.sale{left:11px; background:var(--red); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.14)}
  .pricerow{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
  .price .amt.sale{color:var(--red)}
  .price .was{font-size:14px; color:var(--muted); text-decoration:line-through;
    text-decoration-color:rgba(225,29,42,.7)}
  .price .save{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--green); margin-top:4px}
  .actions{display:flex; gap:8px; margin-top:12px}
  .actions .addcart{flex:1; justify-content:center; padding:11px}
  .actions .btn-quote{padding:11px 14px; font-size:13px}

  /* ── header cart button ── */
  .cartbtn{display:inline-flex; align-items:center; gap:8px; background:transparent; color:#fff;
    border:1px solid var(--line); border-radius:50px; padding:9px 15px; font-size:14px; font-weight:600;
    cursor:pointer; transition:border-color .2s}
  .cartbtn:hover{border-color:var(--red)}
  .cartbtn svg{width:18px; height:18px}
  .cartcount{min-width:20px; height:20px; padding:0 6px; border-radius:50px; background:var(--red);
    color:#fff; font-size:12px; font-weight:700; display:inline-grid; place-items:center}
  .cartcount.empty{background:#2a2a2f; color:var(--muted)}

  /* ── cart drawer ── */
  .cart{position:fixed; inset:0; z-index:150; display:none}
  .cart.open{display:block}
  .cart__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px)}
  .cart__panel{position:absolute; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--bg2);
    border-left:1px solid var(--line); display:flex; flex-direction:column;
    box-shadow:-30px 0 80px -20px rgba(0,0,0,.8); animation:cartin .25s ease}
  @keyframes cartin{from{transform:translateX(100%)} to{transform:none}}
  .cart__head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px;
    border-bottom:1px solid var(--line)}
  .cart__head h3{font-family:"Oswald",sans-serif; font-size:22px; text-transform:uppercase}
  .cart__x{background:none; border:none; color:var(--muted); font-size:26px; cursor:pointer; line-height:1}
  .cart__x:hover{color:#fff}
  .cart__items{flex:1; overflow-y:auto; padding:6px 22px}
  .cart__empty{flex:1; display:grid; place-items:center; text-align:center; color:var(--muted);
    font-size:14px; padding:40px; line-height:1.7}
  .citem{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
  .citem__img{width:60px; height:60px; flex:none; background:var(--tile); border-radius:9px;
    display:grid; place-items:center; padding:6px; font-family:"Oswald",sans-serif; color:#c7c7cc; font-size:10px}
  .citem__img img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
  .citem__main{flex:1; min-width:0}
  .citem__name{font-family:"Oswald",sans-serif; font-size:14.5px; text-transform:uppercase; line-height:1.15}
  .citem__price{color:var(--red); font-weight:600; font-size:13.5px; margin-top:3px}
  .citem__row{display:flex; align-items:center; justify-content:space-between; margin-top:9px}
  .qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden}
  .qty button{background:#101012; color:#fff; border:none; width:27px; height:27px; cursor:pointer; font-size:15px; line-height:1}
  .qty button:hover{background:var(--red)}
  .qty span{min-width:30px; text-align:center; font-size:13px; font-weight:600}
  .citem__rm{background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; text-decoration:underline}
  .citem__rm:hover{color:var(--red)}
  .cart__foot{border-top:1px solid var(--line); padding:18px 22px; background:var(--bg)}
  .cart__sub{display:flex; justify-content:space-between; font-family:"Oswald",sans-serif;
    font-size:20px; font-weight:600; text-transform:uppercase}
  .cart__sub span:last-child{color:var(--red)}
  .cart__note{font-size:11.5px; color:var(--muted); margin:10px 0 14px; line-height:1.5}
  .cart__checkout{width:100%; justify-content:center; padding:13px}
  .cart__checkout:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
  .cart__clear{display:block; width:100%; background:none; border:none; color:var(--muted);
    font-size:12.5px; margin-top:10px; cursor:pointer}
  .cart__clear:hover{color:#fff}

  /* ── toast ── */
  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:300;
    background:var(--card); border:1px solid var(--line); border-left:3px solid var(--red); color:#fff;
    padding:13px 20px; border-radius:10px; font-size:14px; font-weight:500; opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s; box-shadow:0 20px 50px -16px rgba(0,0,0,.8); max-width:90vw}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  /* ── product detail panel (specs) ── */
  .pcard{cursor:pointer}
  .pcard .actions{cursor:default}
  .pd{position:fixed; inset:0; z-index:155; display:none}
  .pd.open{display:block}
  .pd__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px)}
  .pd__panel{position:absolute; top:0; right:0; height:100%; width:min(440px,94vw); background:var(--bg2);
    border-left:1px solid var(--line); display:flex; flex-direction:column;
    box-shadow:-30px 0 80px -20px rgba(0,0,0,.8); animation:cartin .25s ease}
  .pd__head{display:flex; align-items:center; justify-content:space-between; padding:15px 22px;
    border-bottom:1px solid var(--line)}
  .pd__eyebrow{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
  .pd__x{background:none; border:none; color:var(--muted); font-size:26px; cursor:pointer; line-height:1}
  .pd__x:hover{color:#fff}
  .pd__scroll{flex:1; overflow-y:auto; padding:20px 22px}
  .pd__img{background:var(--tile); border-radius:12px; height:210px; display:grid; place-items:center;
    padding:20px; margin-bottom:18px; position:relative}
  .pd__img img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
  .pd__img .sale{position:absolute; top:12px; left:12px; background:var(--red); color:#fff; font-size:10px;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:50px}
  .pd__title{font-family:"Oswald",sans-serif; font-size:24px; text-transform:uppercase; line-height:1.05; margin-bottom:6px}
  .pd__sub{color:var(--muted); font-size:13px; margin-bottom:14px; line-height:1.4}
  .pd__desc{color:var(--muted); font-size:13px; line-height:1.55; margin:2px 0 16px}
  .pd__price{display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap}
  .pd__price .amt{font-family:"Oswald",sans-serif; font-size:28px; font-weight:700}
  .pd__price .amt.sale{color:var(--red)}
  .pd__price .was{font-size:15px; color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(225,29,42,.7)}
  .pd__price .save{font-size:11px; font-weight:700; text-transform:uppercase; color:var(--green)}
  .pd__spectitle{font-family:"Oswald",sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--red); margin:20px 0 6px; padding-top:16px; border-top:1px solid var(--line)}
  .pd__specs{width:100%; border-collapse:collapse; font-size:13px}
  .pd__specs td{padding:8px 0; border-bottom:1px solid var(--line); vertical-align:top}
  .pd__specs td:first-child{color:var(--muted); width:44%; padding-right:12px}
  .pd__specs td:last-child{color:#fff; font-weight:500}
  .pd__foot{border-top:1px solid var(--line); padding:15px 22px; display:flex; gap:8px}
  .pd__foot .addcart{flex:1; justify-content:center}

  /* ── checkout (age gate + FFL) ── */
  .co{position:fixed; inset:0; z-index:160; display:none; align-items:flex-start; justify-content:center;
    padding:30px 16px; overflow-y:auto}
  .co.open{display:flex}
  .co__backdrop{position:fixed; inset:0; background:rgba(0,0,0,.74); backdrop-filter:blur(4px)}
  .co__panel{position:relative; width:100%; max-width:540px; background:var(--bg2); border:1px solid var(--line);
    border-radius:16px; box-shadow:0 40px 90px -20px rgba(0,0,0,.85); animation:mlpop .22s ease; margin:auto}
  .co__head{display:flex; align-items:center; justify-content:space-between; padding:18px 24px;
    border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg2);
    border-radius:16px 16px 0 0; z-index:2}
  .co__head h3{font-family:"Oswald",sans-serif; font-size:23px; text-transform:uppercase}
  .co__x{background:none; border:none; color:var(--muted); font-size:26px; cursor:pointer; line-height:1}
  .co__x:hover{color:#fff}
  .co__body{padding:18px 24px 24px}
  .co__summary{background:#101012; border:1px solid var(--line); border-radius:10px; padding:13px 15px;
    margin-bottom:18px; font-size:13px}
  .co__summary .li{display:flex; justify-content:space-between; gap:12px; padding:3px 0; color:var(--muted)}
  .co__summary .li b{color:#fff; font-weight:600}
  .co__summary .tot{display:flex; justify-content:space-between; border-top:1px solid var(--line);
    margin-top:8px; padding-top:8px; font-family:"Oswald",sans-serif; font-size:17px; text-transform:uppercase; color:#fff}
  .co__summary .tot span:last-child{color:var(--red)}
  .co__sec{border:none; padding:0; margin:0 0 20px; min-inline-size:0}
  .co__sec legend{font-family:"Oswald",sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--red); padding:0; margin-bottom:9px}
  .co__hint{font-size:12px; color:var(--muted); margin:0 0 12px; line-height:1.5}
  .co__field{display:block; margin-bottom:11px}
  .co__field span{display:block; font-size:12px; font-weight:600; color:#d6d6db; margin-bottom:5px}
  .co__field em{color:var(--muted); font-style:normal; font-weight:400}
  .co__field input{width:100%; background:#0e0e10; border:1px solid var(--line); border-radius:9px;
    padding:11px 13px; color:#fff; font-size:14px; font-family:inherit}
  .co__field input:focus{outline:none; border-color:var(--red)}
  .co__grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
  .co__check{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:#e6e6ea; cursor:pointer;
    margin-top:8px; line-height:1.4}
  .co__check input{margin-top:1px; width:17px; height:17px; accent-color:var(--red); flex:none}
  .co__foot{border-top:1px solid var(--line); padding-top:16px}
  .co__err{color:#ff6b6b; font-size:13px; margin-bottom:10px; font-weight:600}
  .co__submit{width:100%; justify-content:center; padding:13px}
  .co__note{font-size:11.5px; color:var(--muted); text-align:center; margin:11px 0 0; line-height:1.5}
  .co__done{text-align:center; padding:34px 24px 30px}
  .co__done .ic{width:54px; height:54px; border-radius:50%; background:rgba(54,209,122,.15); color:var(--green);
    display:grid; place-items:center; margin:0 auto 16px; font-size:30px}
  .co__done h4{font-family:"Oswald",sans-serif; font-size:24px; text-transform:uppercase; margin-bottom:8px}
  .co__done p{color:var(--muted); font-size:14px; max-width:34em; margin:0 auto; line-height:1.6}
  .co__done #coDoneEmail{color:var(--red)}
  @media (max-width:520px){ .co__grid2{grid-template-columns:1fr} }

  /* ── checkout: delivery radios + FFL locator ── */
  .co__radio{display:flex; align-items:flex-start; gap:10px; background:#101012; border:1px solid var(--line);
    border-radius:10px; padding:13px 15px; margin-bottom:9px; cursor:pointer; font-size:13.5px; color:#e6e6ea}
  .co__radio input{margin-top:2px; width:17px; height:17px; accent-color:var(--red); flex:none}
  .co__radio b{color:#fff; font-weight:600}
  .co__radio em{color:var(--muted); font-style:normal; font-size:12px}
  .co__radio:has(input:checked){border-color:var(--red); background:rgba(225,29,42,.07)}
  .ffl-find{display:flex; gap:8px}
  .ffl-find input{flex:1; background:#0e0e10; border:1px solid var(--line); border-radius:9px;
    padding:11px 13px; color:#fff; font-size:14px; font-family:inherit}
  .ffl-find input:focus{outline:none; border-color:var(--red)}
  .ffl-find .btn{padding:11px 18px}
  .ffl-results{margin:12px 0 4px}
  .ffl-map{height:200px; border-radius:10px; overflow:hidden; border:1px solid var(--line);
    margin-bottom:10px; background:#0e0e10}
  .ffl-list{max-height:210px; overflow-y:auto; display:flex; flex-direction:column; gap:7px}
  .ffl-card{text-align:left; background:#101012; border:1px solid var(--line); border-radius:9px;
    padding:10px 12px; cursor:pointer; transition:border-color .15s; display:block; width:100%}
  .ffl-card:hover{border-color:var(--red)}
  .ffl-card.sel{border-color:var(--red); background:rgba(225,29,42,.08)}
  .ffl-card .nm{font-weight:600; font-size:13px; color:#fff}
  .ffl-card .ad{font-size:11.5px; color:var(--muted); margin-top:2px}
  .ffl-card .mi{float:right; font-size:11px; color:var(--red); font-weight:600; margin-left:8px}
  .ffl-empty{font-size:12.5px; color:var(--muted); padding:8px 2px}
  .leaflet-popup-content{font-size:12px; margin:9px 12px}
  .leaflet-popup-content b{display:block; margin-bottom:2px}

  /* ── mailing-list consent gate (shown before any email/quote action) ── */
  .ml-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center;
    justify-content:center; padding:20px}
  .ml-modal.open{display:flex}
  .ml-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.74); backdrop-filter:blur(5px)}
  .ml-modal__card{position:relative; width:100%; max-width:444px; background:var(--card);
    border:1px solid var(--line); border-radius:18px; padding:32px 28px 22px; text-align:center;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.85), 0 0 70px -16px var(--red-glow);
    animation:mlpop .22s ease}
  @keyframes mlpop{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}
  .ml-modal__x{position:absolute; top:12px; right:14px; background:none; border:none;
    color:var(--muted); font-size:26px; line-height:1; cursor:pointer}
  .ml-modal__x:hover{color:#fff}
  .ml-modal__badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--red); background:rgba(225,29,42,.12);
    border:1px solid rgba(225,29,42,.32); padding:5px 12px; border-radius:50px; margin-bottom:15px}
  .ml-modal__card h3{font-family:"Oswald",sans-serif; font-size:27px; text-transform:uppercase;
    margin-bottom:10px; line-height:1.05}
  .ml-modal__card p{color:var(--muted); font-size:14px; margin:0 auto 18px; max-width:33em}
  .ml-check{display:flex; align-items:flex-start; gap:11px; text-align:left; background:#101012;
    border:1px solid var(--line); border-radius:11px; padding:13px 15px; margin-bottom:16px; cursor:pointer}
  .ml-check input{margin-top:1px; width:18px; height:18px; accent-color:var(--red); flex:none; cursor:pointer}
  .ml-check span{font-size:13.5px; color:#e6e6ea; line-height:1.4}
  .ml-modal__go{width:100%; justify-content:center; padding:13px}
  .ml-modal__go:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
  .ml-modal__later{display:block; width:100%; background:none; border:none; color:var(--muted);
    font-size:13px; margin-top:11px; cursor:pointer; padding:6px}
  .ml-modal__later:hover{color:#fff}

  /* ============================================================
     Shared site components — added in Ticket 00 (homepage + /shop)
     ============================================================ */

  /* mobile nav toggle + active link state */
  .navtoggle{display:none; background:transparent; border:1px solid var(--line); border-radius:10px;
    padding:7px 8px; color:#fff; cursor:pointer; margin-left:auto}
  .navtoggle svg{width:22px; height:22px; display:block}
  .nav .links a.active{color:#fff; position:relative}
  .nav .links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
    background:var(--red); border-radius:2px}
  .only-sm{display:none}

  @media (max-width:1024px){
    header .wrap.nav{position:relative}
    .navtoggle{display:inline-flex; align-items:center; justify-content:center}
    .nav .links{position:absolute; top:64px; left:0; right:0; margin:0;
      flex-direction:column; gap:0; align-items:stretch;
      background:rgba(11,11,12,.985); border-bottom:1px solid var(--line);
      padding:6px 22px 14px; display:none; box-shadow:0 24px 40px -22px rgba(0,0,0,.9)}
    .nav .links.open{display:flex}
    .nav .links a{padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--text)}
    .nav .links a:last-child{border-bottom:0}
    .nav .links a.active::after{display:none}
    .only-sm{display:block}
    .hide-sm{display:none}
  }

  /* category tiles (homepage + /shop hub) */
  .cat-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding-bottom:8px}
  .cat-tile{position:relative; display:flex; flex-direction:column; justify-content:space-between;
    min-height:182px; padding:24px; border-radius:18px; background:var(--card); border:1px solid var(--line);
    overflow:hidden; transition:transform .14s, border-color .2s, box-shadow .2s}
  .cat-tile::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:radial-gradient(420px 220px at 110% -20%, var(--red-glow), transparent 60%); transition:opacity .25s}
  .cat-tile:hover{transform:translateY(-4px); border-color:rgba(225,29,42,.55);
    box-shadow:0 22px 46px -26px rgba(0,0,0,.9)}
  .cat-tile:hover::before{opacity:1}
  .cat-tile h3{font-size:25px; text-transform:uppercase; letter-spacing:.02em; position:relative}
  .cat-tile p{color:var(--muted); font-size:13.5px; line-height:1.45; margin-top:8px; max-width:30em; position:relative}
  .cat-tile .go{display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--red);
    font-family:"Oswald",sans-serif; font-weight:600; font-size:13px; letter-spacing:.06em;
    text-transform:uppercase; position:relative}
  .cat-tile .soon{position:absolute; top:18px; right:18px; font-size:10px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:50px; padding:4px 9px}
  .cat-tile.is-soon{opacity:.85}
  .cat-tile.is-soon:hover{transform:none}

  /* trusted-manufacturers brand strip */
  .brand-strip{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:center; padding:6px 0 2px}
  .brand-strip .b{font-family:"Oswald",sans-serif; font-weight:600; font-size:18px; letter-spacing:.06em;
    text-transform:uppercase; color:#cfcfd6; opacity:.78; transition:opacity .2s, color .2s}
  .brand-strip .b:hover{opacity:1; color:#fff}

  /* featured pcard helpers */
  .pcard .pc-from{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-right:6px}

  /* contact / location + site-wide FFL finder */
  .contact{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start}
  .contact .info p{color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 8px}
  .contact .info b{color:#fff; font-weight:600}
  .fflbox{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px}
  .fflbox h3{font-size:20px; text-transform:uppercase}
  .fflbox .lbl{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; display:block}
  .fflrow{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
  .fflrow input{flex:1; min-width:150px; background:var(--bg2); border:1px solid var(--line); border-radius:50px;
    color:var(--text); padding:11px 18px; font-size:14px; font-family:inherit}
  .fflrow input:focus{outline:none; border-color:var(--red)}
  .ffllist{margin-top:16px; display:flex; flex-direction:column; gap:10px}
  .ffllist .f{background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px}
  .ffllist .f b{color:#fff}
  .ffllist .f .d{color:var(--muted); margin-top:3px}
  .ffllist .muted{color:var(--muted); font-size:13px}
  @media (max-width:760px){ .contact{grid-template-columns:1fr} }


/* ════════════════════════════════════════════════════════════════════════
   Shop filter sidebar + per-brand "top 5 / show all" (shared by /shop/* pages)
   Paired with /static/shop_filter.js.  Class names match the optics page.
   ════════════════════════════════════════════════════════════════════════ */
.layout{max-width:1200px; margin:0 auto; padding:10px 22px 0;
  display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start}
.sidebar{position:sticky; top:80px; max-height:calc(100vh - 96px); overflow-y:auto;
  background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:18px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#3a3a42}
/* keep the Filters header + count pinned while the filter groups scroll under them */
.sidebar__head{position:sticky; top:-18px; z-index:2; background:var(--bg2); margin:-18px -18px 0; padding:18px 18px 8px}
.sidebar__count{position:sticky; top:34px; z-index:2; background:var(--bg2); margin:0 -18px; padding:0 18px 10px}
.sidebar__head{display:flex; align-items:center; justify-content:space-between}
.sidebar__head h3{font-family:"Oswald",sans-serif; font-size:18px; text-transform:uppercase; letter-spacing:.04em}
.sidebar__clear{background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; text-decoration:underline}
.sidebar__clear:hover{color:var(--red)}
.sidebar__count{font-size:12px; color:var(--muted); margin-top:4px}
.sidebar__count b{color:#fff; font-family:"Oswald",sans-serif; font-size:14px}
.sidebar__search{position:relative; margin-top:12px}
.sidebar__search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; fill:var(--muted); pointer-events:none}
.sidebar__search input{width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--line); border-radius:9px; color:#fff; font-size:13px; padding:9px 12px 9px 34px}
.sidebar__search input::placeholder{color:var(--muted)}
.sidebar__search input:focus{outline:none; border-color:#e1b463}
.sidebar__search input::-webkit-search-cancel-button{-webkit-appearance:none; height:14px; width:14px; background:var(--muted); cursor:pointer;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15 5L5 15M5 5l10 10' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.fgroup{border-top:1px solid var(--line); margin-top:14px; padding-top:14px}
.fgroup h4{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 9px}
.fopt{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px; color:#d6d6db; cursor:pointer}
.fopt:hover{color:#fff}
.fopt input{appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none;
  border:1px solid var(--line); border-radius:5px; background:#0e0e10; cursor:pointer; position:relative}
.fopt input:checked{background:var(--red); border-color:var(--red)}
.fopt input:checked::after{content:"\2713"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:11px; color:#fff; font-weight:700}
.fopt span{flex:1}
.fopt em{color:var(--muted); font-style:normal; font-size:11.5px}
/* Scoped under .layout so it beats a page's inline `.btn{display:inline-flex}`
   (equal specificity + later in cascade) — otherwise the toggle shows on desktop
   and becomes a stray grid cell, breaking the sidebar layout. */
.layout .filter-toggle{display:none; width:100%; justify-content:center; margin-bottom:14px}

.showall{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:var(--card); border:1.5px dashed var(--line); border-radius:16px; cursor:pointer;
  color:#d6d6db; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.04em;
  min-height:160px; transition:border-color .2s, color .2s, transform .14s}
.showall:hover{border-color:var(--red); color:#fff; transform:translateY(-4px)}
.showall .n{font-size:30px; font-weight:700; line-height:1; color:var(--red)}
.showall .t{font-size:12.5px; font-weight:600}
.showall .arr{font-size:17px; margin-top:2px}
.showall[hidden]{display:none}

@media (max-width:980px){
  .layout{grid-template-columns:1fr; gap:0}
  .sidebar{position:static; display:none; margin-bottom:22px}
  .sidebar.open{display:block}
  .layout .filter-toggle{display:inline-flex}
}

/* Wide product-detail panel (opt-in via .pd--wide, used on /shop/silencers):
   the panel fills the page to the RIGHT of the 250px filter sidebar, which stays
   visible + clickable.  Sidebar's right edge = centred-layout left + 22px pad +
   250px sidebar = layout-left + 272px.  Content is centred + width-capped so the
   roomy panel still reads well.  Mobile (≤980px, sidebar is a drawer) keeps the
   default right-side panel. */
@media (min-width:981px){
  .pd--wide{pointer-events:none}                       /* let clicks fall through to the sidebar */
  .pd--wide .pd__backdrop, .pd--wide .pd__panel{pointer-events:auto}
  .pd--wide .pd__backdrop{left:calc(max((100vw - 1200px) / 2, 0px) + 272px)}
  .pd--wide .pd__panel{left:calc(max((100vw - 1200px) / 2, 0px) + 272px);
    right:0; width:auto; max-width:none}
  .pd--wide .pd__scroll{padding:30px max(40px, 5%)}
  .pd--wide .pd__img{height:340px}
  .pd--wide .pd__scroll > *{max-width:860px; margin-left:auto; margin-right:auto}
}

/* ════════════════════════════════════════════════════════════════════════
   GOLD / BLUE / CHARCOAL theme — OPT-IN per page via <body class="theme-gbc">.
   Applied to all storefront pages EXCEPT The Vault (shop_reserve) and Premium
   (shop_atelier), which keep their own looks by simply NOT adding the class.
   To REVERT a page: remove class="theme-gbc" from its <body>.  To revert
   everywhere: delete this block (and the class from each body).
   ════════════════════════════════════════════════════════════════════════ */
body.theme-gbc{
  --bg:#16171b; --bg2:#1d1f25; --card:#23262f; --tile:#f3f3f5;
  --red:#3a5fd9; --red2:#2a47b0; --red-glow:rgba(58,95,217,.45);   /* royal blue = actions/buttons */
  --green:#cba24a;                                                  /* In-Stock badge → gold */
  --text:#f5f5f6; --muted:#9b9ba6; --line:#353944;
  --gold:#cba24a;
}
/* gold for the premium text/line highlights (white-text-safe on charcoal) */
.theme-gbc .red,
.theme-gbc .sec-head .count,
.theme-gbc .eyebrow,
.theme-gbc .gl-tag,
.theme-gbc .price .hint,
.theme-gbc .price .amt.sale,
.theme-gbc .pd__eyebrow,
.theme-gbc .pd__spectitle,
.theme-gbc footer a.eml{ color:var(--gold) }
.theme-gbc .accent,
.theme-gbc .eyebrow::before{ background:var(--gold) }
.theme-gbc .badge.stock{ background:var(--gold); color:#231a04 }   /* gold pill, dark text */
/* re-tint the hardcoded reds (not driven by --red) */
.theme-gbc .hero{
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(203,162,74,.18), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(58,95,217,.15), transparent 55%),
    var(--bg); }
.theme-gbc .band{
  background:radial-gradient(700px 300px at 50% 0%, rgba(203,162,74,.14), transparent 60%), var(--bg2); }
.theme-gbc .pcard:hover{ border-color:rgba(58,95,217,.6);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(203,162,74,.30) }
.theme-gbc .cat-tile:hover{ border-color:rgba(58,95,217,.55) }
.theme-gbc .trust .ic{ background:rgba(203,162,74,.14); color:var(--gold) }
.theme-gbc .price .was,
.theme-gbc .pd__price .was{ text-decoration-color:rgba(203,162,74,.7) }
.theme-gbc .co__radio:has(input:checked),
.theme-gbc .ffl-card.sel{ background:rgba(58,95,217,.08) }