:root{
  --bg:#07090c; --panel:#0d1117; --panel-2:#111722; --panel-3:#151d29;
  --ink:#edf1f7; --ink-2:#dce7f3; --muted:#a7b1c2; --muted-2:#8793a5;
  --ov:255,255,255;                       /* overlay tint: white on dark, dark on light */
  --line:rgba(var(--ov),.10); --line-2:color-mix(in srgb,var(--accent) 18%,transparent);
  --accent:#ca742b; --accent-2:#9a4b18; --accent-bright:#ffe1c1;
  --gold:#c79b57; --gold-2:#a67a3d; --success:#31d28c; --danger:#ff6b6b;
  --shadow:0 16px 50px rgba(0,0,0,.35); --radius:10px; --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% -10%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 28%),
    linear-gradient(180deg, var(--bg), var(--panel) 35%, var(--bg));
  color:var(--ink);
  font:16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 40px));margin:0 auto}
.topo{
  position:relative;
}
.topo::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--accent) 5%,transparent), transparent 30%),
    repeating-radial-gradient(circle at 10% 10%, rgba(var(--ov),.03) 0 1px, transparent 1px 14px);
  opacity:.18;
  pointer-events:none;
}
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(var(--ov),.08);
}
.nav{
  min-height:78px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.logo{
  display:inline-flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.04em; font-size:28px;
}
.logo-mark{
  width:40px;height:40px;border-radius:8px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 15%,transparent), color-mix(in srgb,var(--accent) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  display:grid;place-items:center;font-size:15px;font-weight:900;color:var(--accent)
}
.logo .accent{color:var(--accent)}
.nav-links{
  display:flex; align-items:center; gap:26px;
  color:var(--ink-2); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.nav-links a:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions .mobile-btn{display:none}
/* Always-available header search (takes the middle of the nav; stays visible on mobile where the links collapse).
   position:relative (not overflow:hidden) because the typeahead dropdown is an absolutely-positioned child that
   must escape the box; the button's own right-corner radius does the clipping overflow:hidden used to do. */
.header-search{
  flex:1 1 auto; max-width:520px; min-width:120px;
  display:flex; align-items:center; position:relative;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  border:1px solid rgba(var(--ov),.16); border-radius:10px;
}
.header-search input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  color:var(--ink); font:inherit; font-size:14px; padding:0 14px; height:42px;
}
.header-search input::placeholder{color:var(--muted-2)}
.header-search button{
  flex:0 0 auto; border:0; cursor:pointer; height:42px; padding:0 16px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:var(--panel);
  font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.04em;
  border-radius:0 9px 9px 0;   /* 10px container radius minus the 1px border */
}
/* Typeahead dropdown (filled by js/header-suggest.js from the /suggest fragment; [hidden] until it has
   rows, so with JS off it never appears). Sits above the sticky header's neighbors (z over .nav's 50). */
.suggest-list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:70;
  margin:0; padding:6px; list-style:none;
  background:var(--panel-2); border:1px solid rgba(var(--ov),.16); border-radius:10px;
  box-shadow:var(--shadow); max-height:60vh; overflow:auto;
}
.suggest-list[hidden]{display:none}
.suggest-item a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px}
.suggest-item a:hover,.suggest-item.active a{background:rgba(var(--ov),.06)}
.suggest-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600}
.suggest-meta{flex:0 0 auto; color:var(--muted); font-size:12.5px; white-space:nowrap}
.suggest-tick{flex:0 0 auto; min-height:22px; white-space:nowrap}   /* compact override of the shared .status chip */
/* Visually hidden but kept for screen readers / SEO - preserves a page <h1> after the visible headline is removed. */
.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}
/* CSS-only mobile menu (Static SSR, no JS): a <details> disclosure. Hidden on desktop, shown ≤820px. */
.mobile-menu{display:none;position:relative}
.mobile-menu>summary{list-style:none;cursor:pointer}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel,var(--panel-2));
  border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;
  min-width:210px;z-index:60;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.mobile-menu-panel a,.mobile-menu-panel button{color:var(--ink);text-decoration:none;font-size:15px;
  text-align:left;background:none;border:none;padding:8px 6px;cursor:pointer;border-radius:6px;width:100%}
.mobile-menu-panel a:hover,.mobile-menu-panel button:hover{background:rgba(var(--ov),.05);color:var(--accent)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 18px;
  border-radius:7px; font-weight:900; font-size:14px;
  text-transform:uppercase; letter-spacing:.05em;
  border:1px solid transparent; transition:.16s ease;
  cursor:pointer; white-space:nowrap;
}
.btn-primary{
  color:var(--panel); background:linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent-2) 25%,transparent);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{
  color:var(--ink); background:transparent; border-color:rgba(var(--ov),.16);
}
.btn-secondary:hover{border-color:color-mix(in srgb,var(--accent) 35%,transparent); color:var(--accent)}
.btn-gold{
  color:#170f05; background:linear-gradient(180deg, var(--gold), var(--gold-2));
}
/* Payment submit in flight: js/checkout-accept.js sets aria-busy while it tokenizes and places, cycling the
   button label as staged progress copy. aria-busy doubles as the styling hook so the visual state and what
   assistive tech announces can never disagree. Hover-lift is suppressed - a busy control should hold still. */
.btn[aria-busy="true"]{opacity:.7; cursor:progress}
.btn[aria-busy="true"]:hover{transform:none}
.hero{
  position:relative; overflow:hidden;
  padding:84px 0 68px;
  border-bottom:1px solid rgba(var(--ov),.08);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,8,12,.96) 0%, rgba(5,8,12,.88) 38%, rgba(5,8,12,.58) 62%, rgba(5,8,12,.35) 100%);
  pointer-events:none;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.95) contrast(1.05) brightness(.72);
}
.hero .container{position:relative; z-index:1}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent-bright);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  text-transform:uppercase; font-weight:900; font-size:12px; letter-spacing:.08em;
}
.eyebrow .dot{width:7px;height:7px;border-radius:99px;background:var(--accent)}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:end;
}
h1,h2,h3{margin:0; line-height:1.03; letter-spacing:-.05em}
h1{font-size:clamp(46px, 6vw, 80px); text-transform:uppercase; margin-top:0}
h2{font-size:clamp(30px, 4.3vw, 56px); text-transform:uppercase}
h3{font-size:22px}
.lead{
  max-width:770px;
  color:var(--ink-2); font-size:20px; margin:18px 0 0;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero-search{
  margin-top:22px;
  display:grid; grid-template-columns:1fr 160px;
  max-width:720px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  border:1px solid rgba(var(--ov),.12);
  box-shadow:var(--shadow); border-radius:10px; overflow:hidden;
}
.hero-search input{
  border:0; outline:0; background:transparent; color:var(--ink);
  padding:0 18px; min-height:58px; font:inherit;
}
.hero-search input::placeholder{color:var(--muted-2)}
.hero-search .btn{border-radius:0; min-height:58px}
.hero-panel{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 92%,transparent), color-mix(in srgb,var(--panel-2) 88%,transparent));
  border:1px solid rgba(var(--ov),.10);
  box-shadow:var(--shadow);
  border-radius:12px;
  overflow:hidden;
}
.panel-head{
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(var(--ov),.08);
  text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:900;
  color:var(--ink-2);
}
.offer-table{padding:10px 12px 12px}
.offer-row{
  display:grid; grid-template-columns:1.3fr .7fr .8fr .6fr;
  gap:10px; align-items:center;
  padding:12px;
  border-top:1px solid rgba(var(--ov),.08);
  font-size:13px;
}
.offer-row:first-child{
  border-top:0; color:var(--ink-2); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:900;
}
.status{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:28px; padding:0 8px; border-radius:6px; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap;
}
/* Verdict-chip text was tuned for a dark panel (pale mint/gold/pink) and washed out to near-invisible on the
   light storefront. Mix the accent toward the theme's --ink so the text stays legible in BOTH light and dark. */
.status.ok{background:color-mix(in srgb,var(--success) 14%,transparent); color:color-mix(in srgb,var(--success) 42%,var(--ink)); border:1px solid color-mix(in srgb,var(--success) 45%,transparent)}
.status.ffl{background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent-bright); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.status.warn{background:color-mix(in srgb,var(--gold) 16%,transparent); color:color-mix(in srgb,var(--gold) 40%,var(--ink)); border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.status.block{background:color-mix(in srgb,var(--danger) 12%,transparent); color:color-mix(in srgb,var(--danger) 48%,var(--ink)); border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}
.shipto-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(var(--ov),.08);
  background:rgba(var(--ov),.03);
}
.shipto-label{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
.shipto-select{
  flex:0 1 220px;
  min-width:0;
  margin:0;
  width:auto;
}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 0;
}
.stat{
  background:rgba(var(--ov),.03);
  border:1px solid rgba(var(--ov),.08);
  padding:16px; border-radius:10px;
}
.stat strong{display:block; font-size:28px; letter-spacing:-.04em}
.stat span{display:block; color:var(--muted); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.06em}
.section{padding:40px 0}
.section.alt{
  background:linear-gradient(180deg, rgba(var(--ov),.02), rgba(var(--ov),.01));
  border-top:1px solid rgba(var(--ov),.06);
  border-bottom:1px solid rgba(var(--ov),.06);
}
.section-head{max-width:860px; margin-bottom:26px}
.section-head.center{text-align:center; margin:0 auto 32px}
.section-head h2{font-size:clamp(22px, 2.6vw, 32px)}   /* the global h2 (clamp 30-56) is hero-sized for a section label */
.section-head p{margin:16px 0 0; color:var(--muted); font-size:18px}
.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)}
.card{
  position:relative;
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 92%,transparent), color-mix(in srgb,var(--panel-2) 82%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:12px;
  padding:24px;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute; inset:auto -40px -40px auto; width:140px; height:140px;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 8%,transparent), transparent 70%);
  pointer-events:none;
}
.card h3{margin-bottom:10px; text-transform:uppercase}
.card p{margin:0; color:var(--muted)}
.icon{
  width:46px; height:46px; border-radius:10px;
  display:grid; place-items:center;
  background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  color:var(--accent); font-weight:900; margin-bottom:15px;
}
.category-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.visual-card{
  position:relative; min-height:360px; overflow:hidden; border-radius:14px;
  border:1px solid rgba(var(--ov),.08);
  box-shadow:var(--shadow);
  background:var(--panel);
}
.visual-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:brightness(.85) saturate(.92);
}
.visual-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,8,12,.06), rgba(5,8,12,.72) 68%, rgba(5,8,12,.94) 100%);
}
.visual-content{
  position:absolute; inset:0 0 auto 0; z-index:1; padding:22px;   /* title at the TOP of the card */
  background:linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.42) 60%, transparent);  /* keep top text legible */
}
.kicker{
  color:var(--accent-bright); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
}
.visual-content h3{margin-top:0; font-size:20px}
.visual-content p{margin:10px 0 0; color:var(--ink-2)}
.info-band{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.band-item{
  background:rgba(var(--ov),.03); border:1px solid rgba(var(--ov),.08); border-radius:12px; padding:18px;
}
.band-item h4{
  margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-bright);
}
.band-item p{margin:0; color:var(--muted)}
.steps{
  counter-reset:step;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.step{
  position:relative;
  padding:22px 22px 22px 78px;
  background:rgba(var(--ov),.03);
  border:1px solid rgba(var(--ov),.08);
  border-radius:12px;
}
.step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute; left:22px; top:22px;
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; font-weight:900; font-size:18px;
  background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
}
.step h3{font-size:18px; margin-bottom:10px}
.step p{margin:0; color:var(--muted)}
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
}
.image-frame{
  border-radius:14px; overflow:hidden; border:1px solid rgba(var(--ov),.08); box-shadow:var(--shadow);
  background:var(--panel);
}
.image-frame img{width:100%; height:100%; object-fit:cover}
.check-list{display:grid; gap:14px; margin-top:20px}
.check{
  display:flex; gap:12px; color:var(--ink-2); font-weight:650;
}
.check::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:var(--accent); margin-top:8px; box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent);
  flex:0 0 auto;
}
.quote-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.quote{
  background:rgba(var(--ov),.03);
  border:1px solid rgba(var(--ov),.08);
  border-radius:12px; padding:22px;
}
.quote .title{font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; color:var(--accent-bright)}
.quote p{margin:10px 0 0; color:var(--ink-2)}
.cta-banner{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--panel) 94%,transparent), color-mix(in srgb,var(--panel-2) 92%,transparent)),
    radial-gradient(circle at 85% 20%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 25%);
  border:1px solid rgba(var(--ov),.08);
  border-radius:16px; padding:40px; box-shadow:var(--shadow);
}
.cta-banner::after{
  content:""; position:absolute; inset:auto -60px -60px auto; width:240px; height:240px;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 10%,transparent), transparent 70%);
}
.cta-banner .inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px}
.cta-banner p{color:var(--muted); margin:14px 0 0; font-size:18px}
.form-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 92%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:12px; padding:24px; box-shadow:var(--shadow);
}
.form-grid{display:grid; gap:14px}
label{
  display:grid; gap:8px;
  font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-bright);
}
/* A label wrapping a checkbox/radio is a CONSENT / TOGGLE row (small control + sentence text), not a field
   caption - so it must not inherit the grid + uppercase + 900 + accent field-label styling above. */
label:has(> input[type=checkbox]), label:has(> input[type=radio]){
  display:flex; gap:10px; align-items:flex-start;
  text-transform:none; font-weight:400; letter-spacing:normal; color:var(--muted); font-size:13px; line-height:1.45;
}
/* The full-width/48px/dark field styling is for TEXT-ENTRY controls; checkboxes and radios must stay their
   native small size (excluding them here is why they no longer render as giant dark squares on checkout). */
input:not([type=checkbox]):not([type=radio]), textarea, select{
  width:100%; min-height:48px; border-radius:8px;
  border:1px solid rgba(var(--ov),.12);
  background:var(--panel); color:var(--ink); padding:12px 14px; font:inherit;
  color-scheme: dark;
}
textarea{min-height:140px; resize:vertical}
.file-note{font-size:13px; color:var(--muted)}
.page-hero{
  position:relative; overflow:hidden; padding:44px 0 34px;
  border-bottom:1px solid rgba(var(--ov),.08);
}
/* Dark-media bands sit on a dark image + dark scrim in EVERY theme, so each is a self-contained "dark island":
   restore the dark token set locally so headings/lead/search render light-on-dark even on a light storefront.
   color: re-asserts inherited text from the local (light) --ink so plain <h1>/<p> follow. No-op on the dark
   theme. Mirrors the :root dark defaults - keep in sync. */
.hero, .cta-banner, .page-hero, .store-hero, .visual-card{
  --bg:#07090c; --panel:#0d1117; --panel-2:#111722; --panel-3:#151d29;
  --ink:#edf1f7; --ink-2:#dce7f3; --muted:#a7b1c2; --muted-2:#8793a5; --ov:255,255,255;
  color:var(--ink);
}
.page-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:brightness(.58) saturate(.9);
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,8,12,.95), rgba(5,8,12,.84) 45%, rgba(5,8,12,.55) 100%);
}
.page-hero .container{position:relative; z-index:1}
.breadcrumb{
  color:var(--accent-bright); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.notice{
  border-left:3px solid var(--accent); padding:16px 18px;
  background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--accent-bright); border-radius:8px;
}
.footer{
  padding:54px 0 24px; background:var(--bg); border-top:1px solid rgba(var(--ov),.08)
}
.footer-grid{
  display:grid; grid-template-columns:minmax(220px,1.15fr) repeat(5, minmax(0,1fr)); gap:16px; align-items:start;
}
.footer-grid h4{
  margin:0 0 12px; font-size:13px; color:var(--accent-bright); text-transform:uppercase; letter-spacing:.08em;
}
.footer-grid a,.footer-grid p{
  display:block; margin:0 0 9px; color:var(--muted); font-size:13px; line-height:1.45;
}
.footer-grid > *{
  min-width:0;
  overflow-wrap:anywhere;
}
.footer-bottom{
  margin-top:28px; padding-top:18px; border-top:1px solid rgba(var(--ov),.08);
  color:var(--muted-2); font-size:13px;
}
.hide-desktop{display:none}
@media (max-width: 1100px){
  .hero-grid, .split, .grid-4, .category-grid, .steps, .quote-grid, .info-band{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 820px){
  .nav-links{display:none}
  .nav-actions .mobile-btn{display:inline-flex}
  .mobile-menu{display:block}
  .hero-grid, .split, .grid-3, .grid-2, .grid-4, .category-grid, .steps, .quote-grid, .info-band, .footer-grid{grid-template-columns:1fr}
  .hero-search{grid-template-columns:1fr}
  .hero-search .btn{border-radius:0}
  .offer-row{grid-template-columns:1fr}
  .cta-banner .inner{flex-direction:column; align-items:flex-start}
  .nav{min-height:72px}
  .nav-actions .btn-secondary:not(.mobile-btn){display:none}
  .nav-actions .btn-primary{display:none}
}

.fine-print{color:var(--muted-2);font-size:13px;line-height:1.55}
.table{width:100%;border-collapse:collapse;background:rgba(var(--ov),.03);border:1px solid rgba(var(--ov),.08);border-radius:12px;overflow:hidden}
.table th,.table td{text-align:left;padding:15px;border-bottom:1px solid rgba(var(--ov),.08);vertical-align:top}
.table th{color:var(--accent-bright);text-transform:uppercase;font-size:12px;letter-spacing:.07em}
.table tr:last-child td{border-bottom:0}


.search-layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:22px;
  align-items:start;
}
.facets{
  position:sticky;
  top:96px;
  display:grid;
  gap:16px;
}
.facet-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 92%,transparent), color-mix(in srgb,var(--panel-2) 84%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:12px;
  padding:18px;
}
.facet-card h3{
  margin:0 0 14px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent-bright);
}
.facet-list{display:grid;gap:10px}
.facet-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--ink-2);
  font-size:14px;
}
.facet-option span:last-child{
  color:var(--muted-2);
  font-size:13px;
}
.facet-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 0;
}
.facet-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  color:var(--accent-bright);
  font-size:13px;
  font-weight:800;
}
.results-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.results-meta p{
  margin:8px 0 0;
  color:var(--muted);
}
.sort-box{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent-bright);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.sort-box select{
  min-width:220px;
}
.results-list{
  display:grid;
  gap:18px;
}
.result-card{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:20px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 94%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.result-image{
  position:relative;
  min-height:220px;
  background:#fff;
  display:grid;
  place-items:center;
  padding:14px;
}
.result-image img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.result-body{
  padding:20px 20px 20px 0;
  display:grid;
  gap:14px;
}
.result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.result-head h3{
  font-size:24px;
  margin:0;
}
.result-sub{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
}
.result-price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}
.result-price strong{
  display:block;
  font-size:30px;
  letter-spacing:-.04em;
}
.result-price span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.spec-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.spec-pill{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(var(--ov),.10);
  background:rgba(var(--ov),.03);
  color:var(--ink-2);
  font-size:13px;
  font-weight:700;
}
.offer-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.offer-mini{
  padding:12px;
  border-radius:10px;
  background:rgba(var(--ov),.03);
  border:1px solid rgba(var(--ov),.08);
}
.offer-mini .label{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:900;
  margin-bottom:4px;
}
.offer-mini strong{
  display:block;
  color:var(--ink);
  font-size:16px;
}
.result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.mini-fine{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.checkbox{
  width:16px;
  height:16px;
  border:1px solid rgba(var(--ov),.18);
  border-radius:4px;
  background:rgba(var(--ov),.03);
  display:inline-block;
  margin-right:10px;
  position:relative;
  top:2px;
}
.checkbox.checked{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
}
.checkbox.checked::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:5px;
  height:9px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
}
.range-line{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 55%,transparent), color-mix(in srgb,var(--accent) 16%,transparent));
  margin:12px 0 8px;
}
.pager{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.pager a{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(var(--ov),.10);
  background:rgba(var(--ov),.03);
  font-weight:800;
  color:var(--ink-2);
}
.pager a.active{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent) 24%,transparent);
  color:var(--accent-bright);
}
@media (max-width: 980px){
  .search-layout{grid-template-columns:1fr}
  .facets{position:static}
}
@media (max-width: 820px){
  .result-card{grid-template-columns:1fr}
  .result-body{padding:18px}
  .offer-strip{grid-template-columns:1fr 1fr}
  .results-top{flex-direction:column}
}
@media (max-width: 560px){
  .offer-strip{grid-template-columns:1fr}
}


.product-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap:28px;
  align-items:start;
}
.product-gallery{
  display:grid;
  gap:14px;
}
.main-product-image{
  position:relative;
  min-height:560px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(var(--ov),.08);
  background:#fff;
  box-shadow:var(--shadow);
}
.main-product-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(var(--zoom, 1));
  transform-origin:center center;
  transition:transform .16s ease;
  background:#fff;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.main-product-image.is-dragging img{
  cursor:grabbing;
}
.image-zoom-controls{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:10px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(var(--ov),.14);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.image-zoom-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:var(--accent);
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 20%,transparent);
}
.image-zoom-btn:hover:not(:disabled){
  background:color-mix(in srgb,var(--accent) 88%,#000 12%);
}
.image-zoom-btn:disabled{
  opacity:.55;
  cursor:default;
}
.thumb-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.thumb{
  height:110px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(var(--ov),.10);
  background:var(--panel);
  padding:0; width:100%; cursor:pointer;        /* it's a <button> - reset to look like the old tile */
  transition:border-color .12s ease;
}
.thumb:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.thumb.active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-summary{
  position:sticky;
  top:96px;
  display:grid;
  gap:10px;
}
.product-title-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 94%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow);
}
.product-title-card h1{
  font-size:clamp(20px, 2.2vw, 28px);   /* product names run long; the hero-size global h1 was overwhelming */
  line-height:1.25;
  text-transform:none;                  /* keep the original casing - more readable than ALL-CAPS for a long SKU name */
  letter-spacing:-.01em;
  margin:6px 0 0;
}
.product-meta-line{
  margin-top:12px;
  color:var(--muted);
}
.product-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.product-badges-compact{
  gap:8px;
  margin-top:4px;
}
.product-badge{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(var(--ov),.10);
  background:rgba(var(--ov),.03);
  color:var(--ink-2);
  font-size:13px;
  font-weight:800;
}
.product-attributes,
.secondary-attributes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  margin-bottom:10px;
}
.secondary-attributes{
  margin-top:0;
}
.attribute-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(var(--ov),.10);
  background:rgba(var(--ov),.035);
  color:var(--ink);
  font-size:12px;
  font-weight:800;
}
.attribute-chip.secondary{
  min-height:26px;
  padding:0 9px;
  background:transparent;
  color:var(--muted);
  border-color:rgba(var(--ov),.08);
}
.product-badge.blue{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--accent-bright);
}
.product-badge.gold{
  background:rgba(199,155,87,.10);
  border-color:rgba(199,155,87,.22);
  color:#f1d19c;
}
.price-box{
  display:grid;
  gap:6px;
  padding:20px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
}
.price-box .from{
  color:var(--muted);
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.price-box strong{
  font-size:44px;
  line-height:1;
  letter-spacing:-.05em;
}
.price-box .sub{
  color:var(--ink-2);
}
.offer-table-large{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.offer-table-large th{
  text-align:left;
  color:var(--accent-bright);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:11px;
  padding:0 12px 2px;
}
.offer-table-large td{
  padding:14px 12px;
  background:rgba(var(--ov),.035);
  border-top:1px solid rgba(var(--ov),.08);
  border-bottom:1px solid rgba(var(--ov),.08);
  vertical-align:middle;
}
.offer-table-large td:first-child{
  border-left:1px solid rgba(var(--ov),.08);
  border-radius:10px 0 0 10px;
}
.offer-table-large td:last-child{
  border-right:1px solid rgba(var(--ov),.08);
  border-radius:0 10px 10px 0;
}
.seller-name{
  font-weight:900;
  color:var(--ink-2);
}
.seller-note{
  color:var(--muted);
  font-size:13px;
  margin-top:3px;
}
.qty{
  color:var(--ink-2);
  font-size:13px;
}
.product-section-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 92%,transparent), color-mix(in srgb,var(--panel-2) 82%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:16px;
  padding:24px;
}
.product-section-card h2{
  font-size:32px;
  margin-bottom:16px;
}
.spec-table{
  width:100%;
  border-collapse:collapse;
}
.spec-table td{
  padding:13px 0;
  border-bottom:1px solid rgba(var(--ov),.08);
}
.spec-table tr:last-child td{
  border-bottom:0;
}
.spec-table td:first-child{
  color:var(--muted);
  width:38%;
  font-weight:800;
}
.spec-table td:last-child{
  color:var(--ink);
}
.availability-box{
  display:grid;
  gap:12px;
}
/* Product-page ship map. The grid/tile bases (.shipmap-grid, .shipmap-tile + tone classes) live in
   app-shell.css, shared with the console Where-Can-I-Sell page - both stylesheets load on every page, so
   redefining them here would fork the look. Only the shopper's-own-state marker is site-level; it derives
   from --accent so tenant themes restyle it for free. */
.shipmap-tile.here{
  outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  outline-offset:1px;
}
.mini-product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.related-card{
  border:1px solid rgba(var(--ov),.10);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.related-card img{
  height:180px;
  width:100%;
  object-fit:cover;
}
.related-card div{
  padding:16px;
}
.related-card h3{
  font-size:18px;
  margin-bottom:7px;
  color:#111722;
}
.related-card .home-live strong{
  color:var(--accent);
}
.related-card p{
  margin:0;
  color:var(--muted);
}
@media (max-width: 1050px){
  .product-layout{grid-template-columns:1fr}
  .product-summary{position:static}
}
@media (max-width: 760px){
  .main-product-image{min-height:360px}
  .thumb-grid{grid-template-columns:repeat(2,1fr)}
  .offer-table-large, .offer-table-large thead, .offer-table-large tbody, .offer-table-large tr, .offer-table-large th, .offer-table-large td{display:block}
  .offer-table-large thead{display:none}
  .offer-table-large tr{margin-bottom:12px}
  .offer-table-large td{border:1px solid rgba(var(--ov),.08);border-bottom:0;border-radius:0}
  .offer-table-large td:first-child{border-radius:10px 10px 0 0}
  .offer-table-large td:last-child{border-bottom:1px solid rgba(var(--ov),.08);border-radius:0 0 10px 10px}
  .mini-product-grid{grid-template-columns:1fr}
}


.account-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:24px;
  align-items:start;
}
.account-sidebar{
  position:sticky;
  top:96px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 94%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
}
.account-name{
  padding:10px 10px 18px;
  border-bottom:1px solid rgba(var(--ov),.08);
  margin-bottom:12px;
}
.account-name strong{display:block;font-size:18px}
.account-name span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.account-nav{display:grid;gap:6px}
.account-nav a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:42px;
  padding:0 12px;
  border-radius:9px;
  color:var(--ink-2);
  font-weight:800;
  font-size:14px;
}
.account-nav a.active,.account-nav a:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent-bright);
}
.account-main{display:grid;gap:20px}
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.metric-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 94%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:14px;
  padding:18px;
}
.metric-card span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.metric-card strong{
  display:block;
  font-size:34px;
  letter-spacing:-.05em;
  margin-top:5px;
}
.metric-card em{
  display:block;
  font-style:normal;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  margin-top:4px;
}
.login-field{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.02em}
.login-field input{
  padding:11px; border-radius:8px; border:1px solid rgba(var(--ov),.16);
  background:rgba(var(--ov),.03); color:var(--ink); font-size:14px; font-weight:400;
}
.panel-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 94%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
}
.panel-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.panel-title h2{font-size:30px}
.panel-title p{margin:8px 0 0;color:var(--muted)}
.clean-table{
  width:100%;
  border-collapse:collapse;
}
.clean-table th,.clean-table td{
  padding:14px 12px;
  border-bottom:1px solid rgba(var(--ov),.08);
  text-align:left;
  vertical-align:middle;
}
.clean-table th{
  color:var(--accent-bright);
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.clean-table tr:last-child td{border-bottom:0}
/* Dealer getting-started guide (DealerDashboard "start here" card): the ordered setup checklist and its step markers.
   A done step dims slightly so attention lands on what's still outstanding. */
.gs-step{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border:1px solid rgba(var(--ov),.08); border-radius:12px;
}
.gs-step.done{opacity:.66}
.gs-check{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  font-weight:900; font-size:15px; line-height:1;
  border:1px solid rgba(var(--ov),.16); color:var(--muted);
}
.gs-check.done{background:rgba(49,210,140,.14); color:#97f2c6; border-color:rgba(49,210,140,.30)}
.gs-check.wip{background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent-bright); border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
.order-timeline{
  display:grid;
  gap:12px;
}
.timeline-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:start;
}
.timeline-dot{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--accent);
  font-weight:900;
}
.timeline-item strong{display:block}
.timeline-item span{display:block;color:var(--muted);margin-top:3px}
/* Buyer FFL transfer tracker: four stops, pure server-rendered CSS (Static SSR - works with JS off). */
.transfer-tracker{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  align-items:flex-start;
}
.tracker-stop{
  flex:1;
  position:relative;
  text-align:center;
  padding-top:24px;
}
.tracker-dot{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:rgba(var(--ov),.06);
  border:2px solid rgba(var(--ov),.20);
  z-index:1; /* above the connector line drawn by the next stop's ::before */
}
/* Connector back to the previous stop; the first stop has none. */
.tracker-stop + .tracker-stop::before{
  content:"";
  position:absolute;
  top:8px; right:50%;
  width:100%; height:2px;
  background:rgba(var(--ov),.12);
}
/* A connector "fills" when the stop BEHIND it is done - progress is drawn up to, not past, the truth. */
.tracker-stop.done + .tracker-stop::before{
  background:color-mix(in srgb,var(--success) 55%,transparent);
}
.tracker-stop.done .tracker-dot{
  background:var(--success);
  border-color:var(--success);
}
.tracker-stop.current .tracker-dot{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent);
}
/* current+done = the final stop of a completed transfer: green wins, keep the emphasis ring. */
.tracker-stop.current.done .tracker-dot{
  background:var(--success);
  border-color:var(--success);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 16%,transparent);
}
.tracker-label{
  display:block;
  padding:0 6px;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}
.tracker-stop.current .tracker-label{color:var(--ink); font-weight:800}
.tracker-stop.next .tracker-dot{opacity:.5}
.tracker-stop.next .tracker-label{opacity:.55}
.tracker-next{
  margin:0 0 16px;
  color:var(--ink-2);
  font-size:14px;
}
.dealer-card{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid rgba(var(--ov),.08);
  border-radius:12px;
  background:rgba(var(--ov),.03);
}
@media (max-width:640px){
  .tracker-label{font-size:11px; padding:0 3px}
}
.checkout-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:24px;
  align-items:start;
}
.checkout-steps{
  display:grid;
  gap:18px;
}
.checkout-summary{
  position:sticky;
  top:96px;
}
.checkout-option{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border:1px solid rgba(var(--ov),.08);
  border-radius:12px;
  background:rgba(var(--ov),.03);
  margin-top:12px;
}
.radio-dot{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent);
  flex:0 0 auto;
  margin-top:2px;
}
.store-hero{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(var(--ov),.08);
  box-shadow:var(--shadow);
  background:var(--panel);
  min-height:360px;
  display:flex;
  align-items:flex-end;
  padding:34px;
}
.store-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.50) saturate(.9);
}
.store-hero::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,12,.10),rgba(5,8,12,.92));
}
.store-hero-content{position:relative;z-index:1;max-width:760px}
.store-hero h1{font-size:clamp(38px,5vw,68px)}
.store-meta{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
}
@media (max-width: 1050px){
  .account-shell,.checkout-layout{grid-template-columns:1fr}
  .account-sidebar,.checkout-summary{position:static}
  .dashboard-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .dashboard-grid{grid-template-columns:1fr}
  .clean-table, .clean-table thead, .clean-table tbody, .clean-table tr, .clean-table th, .clean-table td{display:block}
  .clean-table thead{display:none}
  .clean-table tr{border-bottom:1px solid rgba(var(--ov),.08);padding:10px 0}
  .clean-table td{border:0;padding:9px 0}
}


.brand-dashboard{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
  align-items:start;
}
.brand-product-row{
  display:grid;
  grid-template-columns:1.2fr .8fr .7fr .7fr .7fr;
  gap:12px;
  align-items:center;
  padding:14px;
  border-bottom:1px solid rgba(var(--ov),.08);
}
.brand-product-row:first-child{
  color:var(--accent-bright);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.brand-product-row:last-child{border-bottom:0}
.brand-score{
  display:grid;
  gap:12px;
}
.score-card{
  padding:16px;
  border-radius:12px;
  background:rgba(var(--ov),.035);
  border:1px solid rgba(var(--ov),.08);
}
.score-card span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:900;
}
.score-card strong{
  display:block;
  margin-top:5px;
  font-size:30px;
  letter-spacing:-.05em;
}
.partner-strip{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
  align-items:center;
}
@media (max-width: 980px){
  .brand-dashboard,.partner-strip{grid-template-columns:1fr}
  .brand-product-row{grid-template-columns:1fr}
}


.brand-logo-link{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.brand-logo-img{display:block;height:48px;width:auto}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-brand-icon{width:40px;height:40px;border-radius:8px;display:block;flex:0 0 auto}
.footer-brand-word{
  font-weight:900;
  letter-spacing:.02em;
  color:var(--ink);
}
@media (max-width: 820px){
  .brand-logo-img{height:40px;}
}

.logo .logo-mark{display:none;}

.brand-logo-img{height:48px !important;width:auto;}
.footer-brand-icon{width:40px !important;height:40px !important;}
@media (max-width: 820px){.brand-logo-img{height:40px !important;}}


.buy-search-panel{
  max-width:980px;
  margin-top:26px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 92%,transparent), color-mix(in srgb,var(--panel-2) 82%,transparent));
  border:1px solid rgba(var(--ov),.08);
  box-shadow:var(--shadow);
}
.browse-directory{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:start;
}
.directory-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 94%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent));
  border:1px solid rgba(var(--ov),.08);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
}
.directory-card h3{
  font-size:23px;
  margin-bottom:12px;
  color:var(--ink);
}
.directory-card p{
  margin:0 0 16px;
  color:var(--muted);
}
.directory-links{
  display:grid;
  gap:9px;
}
.directory-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:36px;
  padding:0 10px;
  border-radius:8px;
  color:var(--ink-2);
  background:rgba(var(--ov),.025);
  border:1px solid rgba(var(--ov),.06);
  font-weight:750;
  font-size:14px;
}
.directory-links a:hover{
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border-color:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent-bright);
}
.directory-links a span{
  color:var(--muted-2);
  font-weight:900;
}
.quick-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.quick-row a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(var(--ov),.10);
  background:rgba(var(--ov),.04);
  color:var(--ink-2);
  font-weight:850;
  font-size:13px;
}
@media (max-width: 1050px){
  .browse-directory{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 700px){
  .browse-directory{grid-template-columns:1fr}
}


/* Product search results should favor horizontal firearm photos. */
.result-card{
  grid-template-columns: 340px 1fr;
  background:linear-gradient(90deg, #fff 0 340px, color-mix(in srgb,var(--panel) 94%,transparent) 340px, color-mix(in srgb,var(--panel-2) 86%,transparent) 100%);
}
.result-image{
  min-height: 190px;
  aspect-ratio: 16 / 9;
  background:transparent;
  border-right:1px solid rgba(var(--ov),.08);
  padding:14px;
  display:grid;
  place-items:center;
}
.result-image img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit: contain;
  object-position: center;
  margin:auto;
}
@media (max-width: 820px){
  .result-card{grid-template-columns:1fr}
  .result-image{
    min-height: 210px;
    aspect-ratio: 16 / 9;
  }
}


/* Header alignment: keep marketplace navigation hanging left after the logo. */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:28px;
}
.brand-logo-link{
  flex:0 0 auto;
}
.nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:30px;
  margin-left:6px;
  margin-right:auto;
}
.nav-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
@media (max-width: 820px){
  .nav{
    gap:14px;
  }
  .nav-links{
    margin-left:0;
    margin-right:0;
  }
  .nav-actions{
    margin-left:auto;
  }
}


/* Verdict chips carry a state name ("Restricted in CA") and must stay one line in the narrow price column. */
.result-price .status{white-space:nowrap}

/* Divider between the lead results and the collapsed can't-ship group on the results page. */
.restricted-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 0;
  padding:12px 16px;
  border:1px dashed rgba(255,107,107,.35);
  border-radius:12px;
  background:rgba(255,107,107,.05);
  color:var(--ink-2);
  font-size:14px;
  font-weight:700;
}
.restricted-divider a{
  margin-left:auto;
  color:var(--accent-bright);
  font-weight:800;
  white-space:nowrap;
}

/* Mobile sticky buy bar (product page). Desktop keeps the buy box above the fold, so the bar exists
   only under the mobile breakpoint. */
.pdp-buybar{display:none}
@media (max-width: 820px){
  .pdp-buybar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:70;   /* above the sticky header (50) and its dropdowns (60) */
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--panel) 96%,transparent);
    border-top:1px solid rgba(var(--ov),.14);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .pdp-buybar-price{font-size:21px;font-weight:800;letter-spacing:-.02em}
  .pdp-buybar .status{white-space:nowrap}
  .pdp-buybar .btn{margin-left:auto;white-space:nowrap}
  /* The fixed bar would otherwise sit over the footer's legal text at the end of the page; give the
     document that height back. Scoped by :has so pages without the bar keep their normal footer. */
  body:has(.pdp-buybar){padding-bottom:74px}
}

/* Cross-document view transitions: the browser fades between full document loads, so Static-SSR page
   navigation reads as one continuous surface instead of a flash-to-white swap. 150ms is deliberate:
   long enough to mask the repaint, short enough that back-to-back navigations never feel gated. */
@view-transition{navigation:auto;}
::view-transition-old(root),
::view-transition-new(root){animation-duration:150ms;}
/* Vestibular safety: any motion-triggered discomfort outranks polish, so reduced-motion visitors get an
   instant cut (navigation:none skips the snapshot entirely rather than just zeroing the animation). */
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none;}
}