/* ============================================================
   Default theme — utilitarian firearms-marketplace aesthetic
   (modeled after guns.com: light gray bg, Roboto, dense product
   density, uppercase chrome, accent color from brand palette)
   ============================================================ */

:root {
  --bg: #f4f5f7;
  --bg-2: #ffffff;
  --bg-3: #f3f4f6;
  --border: #e4e6ea;
  --border-2: #eef0f3;
  --text: #181b21;
  --text-2: #424954;
  --muted: #717784;
  --muted-2: #9aa0ab;
  --accent-2: #c8c8c8;
  --ink: #1b1e25;          /* refined graphite for dark chrome (softer than pure black) */
  --ink-2: #23272f;        /* secondary graphite surface */
  --danger: #c8412f;
  --success: #2a8b3a;
  --warn: #b8860b;
  --shadow-sm: 0 1px 2px rgba(16,19,26,0.05);
  --shadow-md: 0 6px 22px rgba(16,19,26,0.08);
  --shadow-lg: 0 14px 40px rgba(16,19,26,0.12);
  --max: 1280px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body {
  font-family: 'Roboto', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--text-2);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent); }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-family: inherit; color: var(--text); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; margin: 0 0 14px; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; margin: 0 0 12px; }
h3 { font-size: 1.08rem; margin: 0 0 6px; letter-spacing: -0.005em; }
p { line-height: 1.65; color: var(--text-2); }

/* Utility bar — thin top strip with shipping note + account links */
.utility { background: var(--ink); color: #b8bcc4; font-size: 11.5px; letter-spacing: 0.03em; }
.utility .row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; flex-wrap: wrap; }
.utility a { color: #b8bcc4; }
.utility a:hover { color: #fff; }

/* Main header bar */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
header.site .row { display: flex; align-items: center; gap: 28px; padding: 16px 0; }
.brand-mark { display: flex; align-items: center; gap: 10px; font-size: 1.32rem; font-weight: 800; color: var(--text); letter-spacing: -0.015em; text-transform: uppercase; }
.brand-mark .badge { width: 38px; height: 38px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; border-radius: 8px; font-size: 0.92rem; letter-spacing: 0; box-shadow: var(--shadow-sm); }
/* Logo image — constrain to header height (source images vary wildly in intrinsic size) */
.brand-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; }
.brand-logo--footer { height: 38px; width: auto; max-width: 220px; filter: brightness(0) invert(1); }

/* Primary nav (top tier) */
nav.primary { margin-left: auto; display: flex; gap: 26px; font-size: 14px; align-items: center; font-weight: 500; }
nav.primary a { color: var(--text-2); padding: 6px 0; position: relative; }
nav.primary a:hover { color: var(--accent); }
nav.primary > a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--accent); transition: right 0.2s ease; }
nav.primary > a:hover::after { right: 0; }
nav.primary a.cart-link, nav.primary a.account-link { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
nav.primary a.cart-link::after, nav.primary a.account-link::after { display: none; }

.nav-drop { position: relative; }
.nav-drop-toggle { cursor: pointer; }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px; background: var(--bg-2); border: 1px solid var(--border); padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100; margin-top: 8px; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: block; }
.nav-drop-menu a { display: flex; padding: 9px 18px; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); }
.nav-drop-menu a:hover { background: var(--bg-3); color: var(--accent); }
.nav-drop-count { color: var(--muted-2); font-size: 11px; }
.nav-drop-all { border-top: 1px solid var(--border-2) !important; color: var(--accent) !important; font-weight: 600; }

.menu-toggle { display: none; background: transparent; border: none; color: var(--text); padding: 8px; font-size: 1.4rem; cursor: pointer; }

/* Shop dropdown polish */
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-weight: 500; }
.nav-drop:hover .nav-drop-toggle, .nav-drop:focus-within .nav-drop-toggle { color: var(--accent); }
.nav-drop-toggle .caret { font-size: 0.7em; transition: transform 0.18s ease; }
.nav-drop:hover .nav-drop-toggle .caret, .nav-drop:focus-within .nav-drop-toggle .caret { transform: rotate(180deg); }
.nav-drop-menu { border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; padding: 8px 0; }
.nav-drop-menu a { font-weight: 500; }

.cart-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--text); font-size: 14px; font-weight: 600; }
.cart-link .cart-icon { font-size: 1rem; color: var(--accent); }
.cart-link .cart-count { font-weight: 700; min-width: 16px; text-align: center; background: var(--accent); color: #fff; padding: 1px 7px; border-radius: 999px; font-size: 11px; }

/* Category mega-bar — dense second tier (refined graphite, calmer type) */
.cat-bar { background: var(--ink); color: #e7e8ec; border-bottom: 3px solid var(--accent); }
.cat-bar .row { display: flex; gap: 0; padding: 0; flex-wrap: wrap; }
.cat-bar a { display: inline-block; padding: 13px 18px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #cdd0d6; transition: background 0.15s ease, color 0.15s ease; position: relative; }
.cat-bar a::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; background: var(--accent); opacity: 0; transition: opacity 0.15s ease; }
.cat-bar a:hover, .cat-bar a.active { background: rgba(255,255,255,0.04); color: #fff; }
.cat-bar a:hover::after, .cat-bar a.active::after { opacity: 1; }

/* Trust bar / banner */
.trust { background: var(--bg-2); padding: 18px 0; border-bottom: 1px solid var(--border); }
.trust .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; }
.trust .item { display: flex; gap: 12px; align-items: center; color: var(--text-2); font-size: 12.5px; }
.trust .item strong { color: var(--text); display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0; margin-bottom: 1px; }
.trust .item .mark { width: 30px; height: 30px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 30px; border-radius: 50%; }

/* Hero (compact, NOT a giant gradient — guns.com-style) */
.hero { background: var(--ink); color: #fff; padding: 0; border-bottom: 3px solid var(--accent); }
.hero .row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; align-items: stretch; padding: 0; min-height: 280px; }
.hero > .container { padding: 0; max-width: var(--max); }
.hero .row > div { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.hero .row > div:first-child {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(238,107,31,0.16) 0%, rgba(238,107,31,0) 46%),
    linear-gradient(135deg, #22262e 0%, #14171c 60%, #0d0f13 100%);
}
.hero .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; margin-bottom: 12px; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.02; margin-bottom: 10px; font-weight: 800; letter-spacing: -0.025em; }
.hero h1 br { display: none; }
.hero p.lead { font-size: 0.95rem; color: #c2c6cd; margin-bottom: 22px; line-height: 1.6; max-width: 480px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .visual { background: linear-gradient(135deg, var(--accent) 0%, #d9560f 100%); display: grid; place-items: center; padding: 36px; }
.hero .visual .badge { width: 110px; height: 110px; background: rgba(255,255,255,0.95); color: var(--accent); display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; border-radius: 50%; box-shadow: var(--shadow-lg); }

/* Card price-row rating fix — was floating with margin-left:auto, sometimes
   getting clipped if price was very wide. Constrain explicitly. */
.card .price-row .rating { color: var(--warn); font-size: 11px; font-weight: 700; margin-left: auto; white-space: nowrap; }

/* Buttons — confident, slightly softened, utilitarian */
.btn { display: inline-block; padding: 12px 24px; background: var(--accent); color: #fff; border: 2px solid var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; border-radius: var(--btn-radius, 6px); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; box-shadow: var(--shadow-sm); }
.btn:hover { background: #d9560f; border-color: #d9560f; color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.55); box-shadow: none; }
.btn.ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn.outline { background: transparent; color: var(--text); border-color: var(--border); box-shadow: none; }
.btn.outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.lg { padding: 15px 34px; font-size: 13px; }

/* Main */
main { background: var(--bg); }

/* Section + section head */
section.block { padding: 52px 0; }
section.block.alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.block.tight { padding: 36px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.section-head .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; margin-bottom: 5px; }
.section-head h2 { font-size: 1.45rem; margin: 0; letter-spacing: -0.015em; }
.section-head a.see-all { color: var(--accent); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.section-head a.see-all:hover { color: var(--ink); }

/* Breadcrumbs */
nav.breadcrumbs { color: var(--muted); font-size: 12px; margin-bottom: 14px; padding-top: 14px; }
nav.breadcrumbs a { color: var(--muted); }
nav.breadcrumbs a:hover { color: var(--accent); }

/* PRODUCT GRID — image-led, with real breathing room.
   Default = 4 columns. Per-site axis can flip to 3 or 6 for SpamBrain diversity. */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid.grid--3col { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid.grid--4col { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid.grid--6col { grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 1100px) {
  .grid.grid--6col { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 800px) {
  .grid.grid--3col, .grid.grid--4col, .grid.grid--6col { grid-template-columns: repeat(2, 1fr); }
}

/* Hero variants — anti-fingerprint axis
   .split (default) = 2-col text+badge as defined above
   .full            = full-width single column, accent stripe underneath
   .none            = handled in template (section not rendered) */
.hero.full .row { grid-template-columns: 1fr; min-height: 240px; }
.hero.full .row > div:first-child {
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(238,107,31,0.18) 0%, rgba(238,107,31,0) 50%),
    linear-gradient(135deg, #20242b 0%, #14171c 55%, #0b0d10 100%);
  padding: 60px 40px;
}
.hero.full .visual { display: none; }
.hero.full h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
.hero.full + .trust { border-top: none; }
.card { background: var(--bg-2); border: 1px solid var(--border); display: flex; flex-direction: column; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; color: inherit; text-decoration: none; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-sm); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card .card-img { aspect-ratio: 1; background: linear-gradient(180deg, #ffffff 0%, var(--bg-3) 100%); display: grid; place-items: center; padding: 22px; border-bottom: 1px solid var(--border-2); overflow: hidden; }
.card .card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card .card-img .no-image { color: var(--muted-2); font-size: 0.85rem; opacity: 0.6; text-align: center; line-height: 1.3; }
.card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.card .cat { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.card h3.title { color: var(--text); font-size: 0.96rem; line-height: 1.4; margin: 0 0 4px; min-height: 2.7rem; font-weight: 600; letter-spacing: -0.005em; }
.card:hover h3.title { color: var(--accent); }
.card .desc { font-size: 12px; color: var(--muted); line-height: 1.45; flex: 1; display: none; }
.card .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-2); }
.card .price { color: var(--text); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }

/* Featured-strip — horizontal scrollable row of cards */
.featured-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.featured-strip .card { width: auto; min-width: 220px; }
.featured-strip::-webkit-scrollbar { height: 8px; }
.featured-strip::-webkit-scrollbar-track { background: var(--bg-3); }
.featured-strip::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

/* Category tiles — image cards for "Shop By Interest" */
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-tile { display: flex; flex-direction: column; justify-content: flex-end; min-height: 130px; background: linear-gradient(150deg, var(--ink-2) 0%, var(--ink) 100%); color: #fff; padding: 26px 22px; border-radius: 12px; transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.cat-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(238,107,31,0.9) 0%, rgba(217,86,15,0.9) 100%); opacity: 0; transition: opacity 0.2s ease; }
.cat-tile::after { content: ''; position: absolute; left: 22px; bottom: 0; width: 34px; height: 3px; background: var(--accent); transition: width 0.2s ease, background 0.2s ease; }
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-tile:hover::before { opacity: 1; }
.cat-tile:hover::after { width: calc(100% - 44px); background: #fff; }
.cat-tile h3 { position: relative; z-index: 1; color: #fff; font-size: 1.08rem; margin-bottom: 4px; letter-spacing: -0.01em; }
.cat-tile span { position: relative; z-index: 1; color: rgba(255,255,255,0.72); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* PDP — light bg with white card, two-column.
   `minmax(0, 1fr)` is critical: default `1fr` is shorthand for
   `minmax(auto, 1fr)` which lets a column overflow to its content size.
   With aspect-ratio: 1 + a wide intrinsic image, the gallery column would
   blow out to thousands of px. minmax(0, ...) caps it to the share. */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; background: var(--bg-2); border: 1px solid var(--border); padding: 32px; margin: 24px auto; border-radius: 14px; box-shadow: var(--shadow-sm); }
.pdp > * { min-width: 0; }
.pdp .gallery { background: linear-gradient(180deg, #ffffff 0%, var(--bg-3) 100%); aspect-ratio: 1; display: grid; place-items: center; padding: 28px; position: relative; border-radius: 10px; border: 1px solid var(--border-2); max-width: 100%; overflow: hidden; }
.pdp .gallery img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp .gallery .badge { font-size: 2rem; color: var(--muted-2); text-align: center; padding: 32px; line-height: 1; font-weight: 600; }
.pdp .info h1 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 10px; color: var(--text); font-weight: 700; }
.pdp .info .brand-line { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 6px; }
.pdp .info .id-strip { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pdp .info .id-strip strong { color: var(--text); font-weight: 700; margin-left: 4px; }
.pdp .info .price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.pdp .info .price { font-size: 2.4rem; color: var(--accent); font-weight: 800; letter-spacing: -0.01em; }
.pdp .info .price-was { color: var(--muted-2); text-decoration: line-through; font-size: 1.1rem; }
.pdp .info p.summary { font-size: 0.95rem; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.pdp .qty-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.pdp .qty-row label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.pdp .qty-row input { width: 70px; padding: 9px 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: 14px; border-radius: 3px; }
.pdp .buy-row { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.pdp .buy-row .btn { flex: 1; min-width: 160px; text-align: center; padding: 14px 24px; }
.pdp .meta-line { color: var(--muted); font-size: 12px; margin-top: 6px; }
.pdp .specs-block { margin-top: 24px; }
.pdp h2.section { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; color: var(--text); font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.specs { width: 100%; border-collapse: collapse; }
.specs td { padding: 8px 0; border-bottom: 1px solid var(--border-2); font-size: 13px; color: var(--text-2); }
.specs td:first-child { color: var(--muted); width: 40%; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 600; }
.pdp ul.use-cases, .pdp ul.materials, .pdp ul.box { list-style: none; margin-top: 12px; }
.pdp ul.use-cases li, .pdp ul.materials li, .pdp ul.box li { padding: 8px 0 8px 18px; border-bottom: 1px solid var(--border-2); position: relative; color: var(--text-2); font-size: 13px; }
.pdp ul.use-cases li::before, .pdp ul.materials li::before, .pdp ul.box li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.pdp .care { padding: 14px 16px; background: var(--bg-3); border-left: 3px solid var(--warn); margin-top: 10px; color: var(--text-2); font-size: 13px; border-radius: 0 3px 3px 0; }
.pdp .tags { margin-top: 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.pill { background: var(--bg-3); color: var(--text-2); padding: 4px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--border); border-radius: 3px; font-weight: 600; }
.pill:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Image gallery thumbs (PDP) */
.pdp-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumbs img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.12s; border-radius: 3px; }
.pdp-thumbs img:hover, .pdp-thumbs img.active { border-color: var(--accent); }

/* PDP expert review section */
.pdp-expert { margin-top: 28px; background: var(--bg-2); border: 1px solid var(--border); padding: 24px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.pdp-expert .byline { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-2); }
.pdp-expert .avatar { width: 42px; height: 42px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; flex: 0 0 42px; border-radius: 50%; font-size: 0.95rem; }
.pdp-expert .meta { color: var(--muted); font-size: 12px; }
.pdp-expert h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.pdp-expert .body { color: var(--text-2); }
.pdp-expert .body p { margin-bottom: 12px; }
.pdp-expert .body h3 { font-size: 0.95rem; margin: 18px 0 6px; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
.pdp-expert .body strong { color: var(--text); }

/* PDP FAQ */
.pdp-faq { margin-top: 24px; background: var(--bg-2); border: 1px solid var(--border); padding: 24px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.pdp-faq h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.pdp-faq dt { font-weight: 700; color: var(--text); margin-top: 14px; font-size: 0.95rem; }
.pdp-faq dt:first-child { margin-top: 0; }
.pdp-faq dd { margin: 6px 0 0 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }

/* SEO body / "About this product" */
.specs-block.seo-body { background: var(--bg-2); border: 1px solid var(--border); padding: 24px; margin-top: 24px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.specs-block.seo-body h2 { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.specs-block.seo-body h3 { font-size: 0.95rem; margin: 16px 0 6px; color: var(--text); }
.specs-block.seo-body p { color: var(--text-2); margin-bottom: 10px; line-height: 1.6; font-size: 13px; }
.specs-block.seo-body strong { color: var(--text); }

/* Variant picker — siblings for color/caliber/capacity families */
.variant-picker { margin: 24px 0; padding: 18px; background: var(--bg-2, #1a1a1a); border: 1px solid var(--border, #2a2a2a); border-radius: 4px; }
.variant-picker h2.section { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; color: var(--text); font-weight: 700; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.variant-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bg, #0e0e0e); border: 1px solid var(--border, #2a2a2a); border-radius: 4px; overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.variant-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.variant-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #111; }
.variant-meta { padding: 8px 10px; }
.variant-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.variant-price { font-size: 12px; color: var(--accent); font-weight: 700; }

/* Sticky mobile CTA */
.sticky-cta { display: none; }
@media (max-width: 768px) {
  .sticky-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-2); border-top: 1px solid var(--border); padding: 10px 14px; gap: 10px; align-items: center; z-index: 50; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); }
  .sticky-cta .price { font-size: 1.2rem; font-weight: 800; color: var(--accent); }
  .sticky-cta .btn { flex: 1; padding: 12px; }
}

/* Article / blog page */
article.post { max-width: 760px; margin: 24px auto 0; padding: 0 20px 56px; background: var(--bg-2); border-radius: 4px; }
article.post > * { padding-left: 32px; padding-right: 32px; }
article.post h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.15; margin-bottom: 10px; padding-top: 32px; }
article.post h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 32px 0 12px; color: var(--text); }
article.post h3 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--text); font-weight: 700; }
article.post p { margin-bottom: 14px; font-size: 0.95rem; color: var(--text-2); line-height: 1.65; }
article.post a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
article.post a:hover { border-bottom-color: var(--accent); }
article.post ul, article.post ol { margin: 0 0 18px 22px; color: var(--text-2); }
article.post li { margin-bottom: 6px; line-height: 1.6; }
article.post dl.faq { margin: 20px 0; }
article.post dl.faq dt { font-weight: 700; margin-top: 18px; color: var(--text); }
article.post dl.faq dd { margin: 4px 0 0 0; color: var(--text-2); line-height: 1.6; }
article.post ul.citations { list-style: none; margin: 0 0 16px; padding: 14px 18px; background: var(--bg-3); border-left: 3px solid var(--accent); border-radius: 0 3px 3px 0; }
article.post ul.citations li { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
article.post p.disclosure { margin-top: 28px; padding: 12px 16px; background: var(--bg-3); color: var(--muted); font-size: 12px; border: 1px solid var(--border); border-radius: 3px; font-style: italic; }

.byline { display: flex; align-items: center; gap: 12px; margin: 16px 0 24px; padding: 12px 16px; background: var(--bg-3); border: 1px solid var(--border); font-size: 13px; border-radius: 3px; }
.byline .avatar { width: 38px; height: 38px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; flex: 0 0 38px; border-radius: 50%; font-size: 0.9rem; }
.byline a { color: var(--text); font-weight: 700; }
.byline a:hover { color: var(--accent); }

.related { margin-top: 32px; padding: 20px; background: var(--bg-3); border-radius: 3px; }
.related h2 { font-size: 0.95rem; margin-bottom: 10px; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin-bottom: 6px; padding: 8px 0; border-bottom: 1px solid var(--border-2); }
.related li:last-child { border-bottom: none; }
.related a { color: var(--text-2); display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.related a:hover { color: var(--accent); }

/* Blog index */
.blog-list { display: grid; gap: 14px; }
.blog-card { display: block; background: var(--bg-2); border: 1px solid var(--border); padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color 0.12s, transform 0.12s; border-radius: 3px; }
.blog-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.blog-card h3 { font-weight: 700; font-size: 1.05rem; line-height: 1.3; margin-bottom: 4px; color: var(--text); }
.blog-card:hover h3 { color: var(--accent); }
.blog-card .meta { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.blog-card .pill { margin-right: 8px; background: var(--accent); color: #fff; border-color: var(--accent); }

/* Cart / checkout */
.cart-page { max-width: 960px; margin: 24px auto 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 32px; }
.cart-page h1 { margin-bottom: 18px; color: var(--text); }
.cart-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-2); font-size: 14px; }
.cart-row .title { color: var(--text); font-weight: 600; }
.cart-row .qty input { width: 60px; padding: 7px 10px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); font-size: 14px; border-radius: 3px; }
.cart-row .price { font-weight: 800; font-size: 1.05rem; color: var(--accent); }
.cart-row .remove { color: var(--muted); background: transparent; border: 1px solid var(--border); padding: 5px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 3px; }
.cart-row .remove:hover { color: var(--danger); border-color: var(--danger); }
.cart-totals { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.cart-totals .total-amt { font-size: 2rem; color: var(--accent); font-weight: 800; }
.cart-empty { padding: 48px 0; text-align: center; color: var(--muted); }

.checkout-page { max-width: 720px; margin: 24px auto 0; padding: 0 20px 56px; }
.checkout-page > * { background: var(--bg-2); }
.checkout-page h1 { margin-bottom: 8px; color: var(--text); padding-top: 24px; padding-left: 28px; padding-right: 28px; }
.checkout-page p.lead { margin-bottom: 24px; padding: 0 28px; }
.checkout-page form { padding: 0 28px 28px; }
.checkout-page .field { margin-bottom: 14px; }
.checkout-page label { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 600; }
.checkout-page input { width: 100%; padding: 12px 14px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); font-size: 14px; border-radius: 3px; }
.checkout-page .summary { background: var(--bg-3); border: 1px solid var(--border); padding: 18px 20px; margin-bottom: 24px; border-radius: 10px; }
.checkout-page .summary .line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-2); font-size: 13px; }
.checkout-page .summary .line:last-child { border-bottom: none; font-weight: 700; padding-top: 12px; }
.checkout-page .checkout-msg { margin-top: 14px; padding: 10px 14px; font-size: 13px; min-height: 16px; border-radius: 3px; }
.checkout-page .checkout-msg.error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border: 1px solid var(--danger); }
.checkout-page .checkout-msg.info { color: var(--muted); }

.thank-you { max-width: 640px; margin: 56px auto; padding: 44px 28px; text-align: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); }
.thank-you .check { width: 80px; height: 80px; margin: 0 auto 16px; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 2.4rem; font-weight: 700; border-radius: 50%; }
.thank-you h1 { margin-bottom: 10px; color: var(--text); }
.thank-you p { margin-bottom: 14px; }

/* Newsletter */
.newsletter { background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 100%); color: #fff; padding: 52px 0; border-top: 3px solid var(--accent); }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.newsletter-inner .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.newsletter-inner h2 { color: #fff; font-size: 1.4rem; margin-bottom: 6px; }
.newsletter-inner p { color: #c8c8c8; font-size: 13px; }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 200px; padding: 12px 14px; background: #fff; border: 2px solid #fff; color: var(--text); font-size: 14px; border-radius: 3px; }
.newsletter-form button { padding: 12px 22px; background: var(--accent); color: #fff; border: 2px solid var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; border-radius: 3px; cursor: pointer; }
.newsletter-form button:hover { background: #fff; color: var(--accent); }
.newsletter-msg { color: #c8c8c8; font-size: 12px; flex-basis: 100%; min-height: 14px; }
.newsletter-msg.ok { color: #6dde7d; }
.newsletter-msg.error { color: #ff6b5e; }

/* Footer */
footer.site { background: var(--ink); color: #fff; padding: 56px 0 22px; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
footer.site h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin: 0 0 14px; font-weight: 700; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 9px; }
footer.site a { color: #aab0ba; font-size: 13px; }
footer.site a:hover { color: var(--accent); }
footer.site p.tagline { font-size: 13px; max-width: 320px; color: #aab0ba; line-height: 1.6; }
footer.site .brand-mark { color: #fff; }
footer.site .legal { padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #7c828c; font-size: 11.5px; }

.back { color: var(--muted); font-size: 12px; }
.back:hover { color: var(--accent); }

/* Responsive */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .cat-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  nav.primary { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-2); flex-direction: column; padding: 12px 20px; gap: 0; border-bottom: 1px solid var(--border); }
  nav.primary.open { display: flex; }
  nav.primary a { padding: 12px 0; border-bottom: 1px solid var(--border-2); }
  nav.primary > a::after { display: none; }
  .menu-toggle { display: block; }
  /* Submenu expands inline (no hover dropdown on touch) */
  .nav-drop { width: 100%; border-bottom: 1px solid var(--border-2); }
  .nav-drop-toggle { padding: 12px 0; }
  .nav-drop-toggle .caret { display: none; }
  .nav-drop-menu { position: static; display: block; transform: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 14px; margin: 0; background: transparent; }
  .nav-drop-menu a { padding: 9px 0; border-bottom: 0; font-size: 13px; }
  .nav-drop-all { border-top: 0 !important; padding-top: 10px !important; }
  .hero .row { grid-template-columns: 1fr; min-height: auto; }
  .hero .row > div { padding: 22px 18px; }
  .hero .visual { display: none; }
  .hero h1 { font-size: 1.6rem; margin-bottom: 6px; }
  .hero p.lead { font-size: 0.85rem; margin-bottom: 14px; }
  .hero p.lead.compact-hide-mobile { display: none; }
  .trust .row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .grid.grid--3col, .grid.grid--4col, .grid.grid--6col { gap: 16px; }
  .cat-tiles { grid-template-columns: repeat(2, 1fr); }
  .pdp { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  footer.site .cols { grid-template-columns: repeat(2, 1fr); }
  section.block { padding: 28px 0; }
  .newsletter-inner { grid-template-columns: 1fr; gap: 18px; }
  .cat-bar .row { overflow-x: auto; flex-wrap: nowrap; }
  .cat-bar a { padding: 10px 14px; font-size: 11px; flex: 0 0 auto; }
}
@media (max-width: 540px) {
  .trust .row { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid.grid--3col, .grid.grid--4col, .grid.grid--6col { gap: 12px; }
  .cat-tiles { grid-template-columns: 1fr 1fr; }
  footer.site .cols { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 1fr; gap: 8px; }
  .card .body { padding: 10px 12px 14px; }
  .card h3.title { font-size: 0.85rem; min-height: auto; }
}

/* ============================================================
   Featured products section variants — anti-fingerprint axis
   .featured-scroll   = current horizontal scroll-strip (default)
   .featured-carousel = auto-rotating single-item slider w/ arrows + dots
   .featured-grid     = static 4-up grid (no scroll, no rotation)
   ============================================================ */

/* Static grid variant — basic 4-up */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }

/* Carousel variant — single large slide w/ image left + body right */
.carousel {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-height: 360px;
}
.carousel-track {
  position: relative;
  height: 100%;
  min-height: 360px;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  text-decoration: none;
  color: inherit;
}
.carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
}
.carousel-slide-img {
  background: var(--bg-3);
  display: grid;
  place-items: center;
  padding: 24px;
}
.carousel-slide-img img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.carousel-slide-img span {
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}
.carousel-slide-body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.carousel-slide-body .cat {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
}
.carousel-slide-body h3.title {
  font-size: 1.5rem;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.carousel-slide-body p.lead { color: var(--muted); font-size: 14px; }
.carousel-slide-body .price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}
.carousel-slide-body .price {
  color: var(--text);
  font-weight: 800;
  font-size: 1.6rem;
}
.carousel-slide-body .rating {
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
}
.carousel-slide-body .btn {
  margin-top: 8px;
  align-self: flex-start;
}

/* Arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.12s, color 0.12s, transform 0.12s;
}
.carousel-arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.05);
}
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.carousel-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
  padding: 0;
}
.carousel-dot.is-active { background: var(--accent); transform: scale(1.3); }
.carousel-dot:hover { background: var(--accent-2); }

@media (max-width: 760px) {
  .carousel-slide { grid-template-columns: 1fr; }
  .carousel-slide-img { padding: 16px; }
  .carousel-slide-img img { max-height: 180px; }
  .carousel-slide-body { padding: 20px; gap: 8px; }
  .carousel-slide-body h3.title { font-size: 1.1rem; }
  .carousel-slide-body .price { font-size: 1.2rem; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 20px; }
}

/* ===== Dynamic shop: sort / filter / pagination ===== */
.shop-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 22px;padding:14px 18px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
.shop-controls .ctl{display:flex;align-items:center;gap:6px}
.shop-controls label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.shop-controls select,.shop-controls input[type=search]{background:var(--bg-3);border:1px solid var(--border);color:var(--text);padding:8px 10px;font-size:13px;font-family:inherit;min-width:130px}
.shop-controls input[type=search]{min-width:180px}
.shop-controls select:focus,.shop-controls input:focus{outline:none;border-color:var(--accent)}
.shop-controls .results{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}
.shop-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:34px 0 6px}
.shop-pager .pg-btn{background:var(--bg-3);border:1px solid var(--border);color:var(--text);padding:8px 13px;font-size:13px;font-family:inherit;cursor:pointer;min-width:40px}
.shop-pager .pg-btn:hover{border-color:var(--accent);color:var(--accent)}
.shop-pager .pg-btn.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700}
.shop-pager .pg-btn.disabled{opacity:.4;cursor:default}
.shop-pager .pg-gap{padding:8px 4px;color:var(--muted)}
.cat-intro{margin:0 0 26px;max-width:760px;color:var(--muted);font-size:15px;line-height:1.6}


/* ==== california overrides (generated from _overrides.css) ==== */
/* ==========================================================================
   California Gun Shop — "Golden State" design system (v2, 2026-09-20)
   --------------------------------------------------------------------------
   Sunlit California poster palette: Pacific ink, state gold, poppy orange on
   warm paper. Everything is drawn in CSS/SVG — no stock photography, no
   borrowed imagery. Layered on top of the default theme stylesheet by
   static/build_style.py; re-run that script after editing this file.
   ========================================================================== */

:root {
  --ink:      #0E2A45;   /* Pacific night — chrome, headings */
  --ink-2:    #163B5C;
  --ink-3:    #0A1E31;
  --gold:     #E8A733;   /* state gold — rules, marks, highlights */
  --gold-2:   #F6CC72;
  --gold-3:   #C98A1E;
  --poppy:    #D9542B;   /* California poppy — calls to action */
  --poppy-2:  #B8401C;
  --accent:   #D9542B;   /* framework alias */
  --accent-2: #E8A733;
  --accent-3: #0E2A45;
  --paper:    #FBF7EF;   /* warm paper */
  --sand:     #F4EADA;
  --sand-2:   #EFE2CC;
  --bg:       #FBF7EF;
  --bg-2:     #FFFFFF;
  --bg-3:     #F4EADA;
  --border:   #E7DCC7;
  --border-2: #F1E8D8;
  --text:     #16202B;
  --text-2:   #4C5763;
  --muted:    #8A8172;
  --ca-green: #2C6A4F;
  --ca-red:   #A6321F;
  --ca-amber: #97680F;
  --radius:   14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(22,32,43,.05), 0 2px 8px rgba(22,32,43,.04);
  --shadow-md: 0 8px 28px rgba(30,20,6,.10);
  --shadow-lg: 0 20px 56px rgba(30,20,6,.16);
  --maxw: 1240px;
}

/* --- Foundations ---------------------------------------------------------- */
html, body { background: var(--paper); }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; color: var(--text); -webkit-font-smoothing: antialiased;
}
.container { max-width: var(--maxw); }
h1, h2, h3, h4, .wordmark, .eyebrow, .btn, .price, .stat-n {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
}
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.02em; font-weight: 800; }
h1 { line-height: 1.04; }
h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.12; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
p { color: var(--text-2); line-height: 1.68; }
a { color: var(--ink); }
a:hover { color: var(--poppy); }
::selection { background: var(--gold); color: var(--ink); }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  font-weight: 800; color: var(--poppy);
}

/* --- Utility strip -------------------------------------------------------- */
.utility {
  background: var(--ink-3); color: #BCCBD9; font-size: 12.5px;
  border-bottom: 1px solid rgba(232,167,51,.25);
}
.utility .row { padding: 8px 0; }
.utility .utility-note { position: relative; padding-left: 16px; }
.utility .utility-note::before {
  content: "\2605"; position: absolute; left: 0; top: -1px; color: var(--gold); font-size: 11px;
}
.utility a { color: #DCE6EF; }
.utility a:hover { color: var(--gold); }
@media (max-width: 760px) { .utility .utility-links { display: none; } }

/* --- Header --------------------------------------------------------------- */
header.site {
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(14,42,69,.04);
}
header.site .row {
  display: flex; align-items: center; gap: 26px; padding: 14px 0; min-height: 76px;
}
.brand-mark { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.ca-mark { display: block; flex: 0 0 auto; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark b {
  font-weight: 900; font-size: 19px; letter-spacing: 0.005em; color: var(--ink);
  text-transform: uppercase;
}
.wordmark i {
  font-style: normal; font-weight: 800; font-size: 19px; letter-spacing: 0.005em;
  color: var(--poppy); text-transform: uppercase; margin-top: 2px;
}
.brand-mark:hover .wordmark b { color: var(--ink-2); }

/* Header search — the primary action on a 5,000-product catalogue */
.hdr-search { flex: 1 1 auto; display: flex; max-width: 560px; }
.hdr-search input[type=search] {
  flex: 1; min-width: 0; padding: 12px 18px; font-size: 14.5px; font-family: inherit;
  background: var(--paper); border: 1.5px solid var(--border); border-right: 0;
  border-radius: 999px 0 0 999px; color: var(--text); outline: none;
}
.hdr-search input[type=search]::placeholder { color: var(--muted); }
.hdr-search input[type=search]:focus { border-color: var(--gold); background: #fff; }
.hdr-search button {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; cursor: pointer;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink);
  border-radius: 0 999px 999px 0; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 13.5px; letter-spacing: 0.04em;
}
.hdr-search button:hover { background: var(--poppy); border-color: var(--poppy); }
.hdr-search-ico { font-size: 17px; line-height: 1; }
@media (max-width: 1080px) { .hdr-search { max-width: 320px; } .hdr-search-txt { display: none; } }
@media (max-width: 860px) { .hdr-search { display: none; } }

nav.primary { display: flex; align-items: center; gap: 22px; margin-left: auto; }
nav.primary > a, .nav-drop-toggle {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--ink); letter-spacing: -0.005em;
}
nav.primary > a::after, .nav-drop-toggle::after { display: none; }
nav.primary > a:hover, .nav-drop-toggle:hover { color: var(--poppy); }
.nav-drop-toggle .caret { font-size: 9px; opacity: .55; margin-left: 2px; }

.nav-drop-menu {
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); padding: 10px;
}
.nav-drop-menu a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: 14px;
}
.nav-drop-menu a:hover { background: var(--sand); color: var(--poppy); }
.nav-drop-ca { min-width: 320px; }
.nav-drop-menu .mega-desc {
  display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px;
}
.mega-head {
  font-family: 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 10.5px; font-weight: 800; color: var(--gold-3); padding: 6px 12px 8px;
}
.mega-all { color: var(--poppy) !important; font-weight: 800 !important; }

.cart-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  background: var(--ink); color: #fff !important; border-radius: 999px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px;
}
.cart-link:hover { background: var(--poppy); }
.cart-link .cart-count { background: var(--gold); color: var(--ink); font-weight: 800; }
.menu-toggle { color: var(--ink); font-size: 24px; }

/* --- Category bar --------------------------------------------------------- */
.cat-bar { background: var(--sand); border-bottom: 1px solid var(--border); }
.cat-bar .row { gap: 4px; padding: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.cat-bar .row::-webkit-scrollbar { display: none; }
.cat-bar a {
  padding: 11px 13px; font-size: 13.5px; font-weight: 600; color: var(--text-2);
  white-space: nowrap;
}
.cat-bar a::after { background: var(--poppy); }
.cat-bar a:hover, .cat-bar a.active { color: var(--ink); }
.cat-bar .cat-bar-flag {
  color: var(--ink); font-weight: 800; padding-left: 0; padding-right: 16px;
  margin-right: 8px; border-right: 1px solid var(--border-2);
}
.cat-bar .cat-bar-flag span { color: var(--poppy); }
.cat-bar .cat-bar-flag::after { display: none; }

/* ==========================================================================
   Hero — golden-hour California, drawn entirely in CSS
   ========================================================================== */
.ca-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(90% 120% at 76% 6%, rgba(246,204,114,.85) 0%, rgba(232,167,51,.30) 34%, rgba(232,167,51,0) 62%),
    linear-gradient(168deg, #1C5680 0%, #14405F 38%, #0E2A45 74%, #0A1E31 100%);
}
/* sun disc */
.ca-hero::before {
  content: ""; position: absolute; right: -70px; top: 8px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, #FFE7B4 0%, #F6C15E 46%, rgba(246,193,94,0) 70%);
  opacity: .55; pointer-events: none;
}
/* layered ridgelines */
.ca-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'><path d='M0 126 L96 96 L180 118 L286 66 L392 106 L520 52 L648 100 L790 44 L920 96 L1058 62 L1180 108 L1310 74 L1440 116 L1440 240 L0 240 Z' fill='%23123A58'/><path d='M0 160 L130 134 L268 156 L420 118 L566 152 L716 126 L880 158 L1040 128 L1200 160 L1330 136 L1440 154 L1440 240 L0 240 Z' fill='%230E2C48'/><path d='M0 196 L170 176 L340 198 L520 172 L700 200 L880 174 L1060 200 L1240 176 L1440 198 L1440 240 L0 240 Z' fill='%230A1E31'/></svg>") bottom center / 100% 240px no-repeat;
}
.ca-hero .container { position: relative; z-index: 2; }
.ca-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px; align-items: center; padding: 62px 0 96px;
}
.ca-hero .eyebrow { color: var(--gold-2); }
.ca-hero h1 {
  color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 900;
  margin: 12px 0 0; letter-spacing: -0.03em;
}
.ca-hero h1 .h1-sub {
  display: block; font-size: clamp(1rem, 1.7vw, 1.32rem); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.35; color: #CFE0EE; margin-top: 14px; max-width: 30ch;
}
.ca-hero-search { display: flex; margin: 26px 0 18px; max-width: 520px; box-shadow: var(--shadow-lg); border-radius: 999px; }
.ca-hero-search input {
  flex: 1; min-width: 0; padding: 15px 22px; font-size: 15px; font-family: inherit;
  border: 0; border-radius: 999px 0 0 999px; outline: none; color: var(--text); background: #fff;
}
.ca-hero-search button {
  padding: 0 26px; border: 0; border-radius: 0 999px 999px 0; cursor: pointer;
  background: var(--poppy); color: #fff; font-family: 'Archivo', sans-serif;
  font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
}
.ca-hero-search button:hover { background: var(--poppy-2); }
.ca-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ca-hero-ctas .btn.ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.ca-hero-ctas .btn.ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.ca-hero-stats { display: flex; gap: 34px; margin-top: 34px; flex-wrap: wrap; }
.ca-hero-stats .stat-n {
  display: block; font-size: 1.55rem; font-weight: 900; color: var(--gold-2); line-height: 1;
}
.ca-hero-stats span.stat-l {
  display: block; font-size: 12px; color: #A9BECF; margin-top: 6px; line-height: 1.4; max-width: 17ch;
}

/* Hero card: the state, the bear, the promise */
.ca-hero-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(246,204,114,.35);
  border-radius: 20px; padding: 26px 26px 22px; text-align: center;
}
.ca-hero-card .ca-state { width: 138px; height: auto; margin: 0 auto; display: block; }
.ca-hero-card h2 { color: #fff; font-size: 1.12rem; margin: 12px 0 6px; letter-spacing: -0.01em; }
.ca-hero-card p { color: #C6D6E4; font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.ca-hero-legend { display: grid; gap: 8px; text-align: left; }
.ca-hero-legend div {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #DCE7F0;
  background: rgba(10,30,49,.45); border-radius: 999px; padding: 7px 12px;
}
.ca-hero-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ca-hero-legend .dot--ok { background: #59C08D; }
.ca-hero-legend .dot--amber { background: var(--gold); }
.ca-hero-legend .dot--no { background: #E06B54; }
@media (max-width: 980px) {
  .ca-hero-grid { grid-template-columns: 1fr; gap: 34px; padding: 44px 0 80px; }
  .ca-hero-card { max-width: 420px; }
  .ca-hero::before { right: -40px; top: 10px; width: 150px; height: 150px; }
}

/* --- Sections ------------------------------------------------------------- */
main { background: var(--paper); }
section.block { padding: 56px 0; }
section.block.tight { padding: 40px 0; }
section.block.alt { background: var(--sand); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.section-head { margin-bottom: 26px; align-items: flex-end; }
.section-head h2 { margin: 6px 0 0; }
.section-head h2::before { display: none; }
.section-head a.see-all {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--poppy);
}
.section-head a.see-all:hover { color: var(--poppy-2); }
.rule-gold { height: 4px; width: 56px; background: var(--gold); border-radius: 2px; margin-bottom: 14px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  background: var(--poppy); border: 1.5px solid var(--poppy); color: #fff;
  border-radius: 999px; font-family: 'Archivo', sans-serif; font-weight: 700;
  letter-spacing: 0.01em; padding: 11px 22px; box-shadow: none;
}
.btn:hover { background: var(--poppy-2); border-color: var(--poppy-2); }
.btn.lg { padding: 14px 28px; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--poppy); border-color: var(--poppy); }
.btn.ghost:hover { background: var(--poppy); color: #fff; }
.btn.outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn.outline:hover { background: var(--ink); color: #fff; }
.btn.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ink:hover { background: var(--ink-2); border-color: var(--ink-2); }

/* --- Product cards -------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.card .card-img { background: #fff; padding: 12px; }
.card .body { padding: 14px 16px 16px; }
.card .cat {
  font-family: 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 10px; font-weight: 800; color: var(--gold-3);
}
.card h3.title { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.card:hover h3.title { color: var(--poppy); }
.card .price { color: var(--ink); font-weight: 800; font-size: 1.06rem; }
.card .price-row { border-top: 1px solid var(--border-2); padding-top: 10px; margin-top: 10px; }

/* --- Category tiles ------------------------------------------------------- */
.cat-tiles { gap: 16px; }
.cat-tile {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.cat-tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gold);
  opacity: 1; transition: width .18s ease;
}
.cat-tile::after { display: none; }
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-tile:hover::before { width: 100%; opacity: .1; }
.cat-tile h3 { color: var(--ink); font-size: 1.02rem; position: relative; }
.cat-tile span { color: var(--muted); font-size: 12.5px; position: relative; }

/* ==========================================================================
   California-specific blocks
   ========================================================================== */

/* Status chips on cards + PDP */
.ca-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: 'Archivo', sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.2;
}
.ca-chip--ok { color: var(--ca-green); background: rgba(44,106,79,.08); }
.ca-chip--config, .ca-chip--roster { color: var(--ca-amber); background: rgba(151,104,15,.09); }
.ca-chip--no { color: var(--ca-red); background: rgba(166,50,31,.08); }
.card .ca-chip, .sr-card .ca-chip { position: absolute; top: 10px; left: 10px; z-index: 2; background: #fff; }
.card .card-img, .sr-card .im { position: relative; }
.ca-note {
  border-left: 4px solid var(--gold); background: var(--sand); color: var(--text);
  padding: 14px 16px; margin: 16px 0; font-size: 14px; line-height: 1.6; border-radius: 0 10px 10px 0;
}

/* Four-step "how buying online works in California" rail */
.ca-steps { background: var(--ink); color: #DCE7F0; position: relative; }
.ca-steps::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--poppy) 100%);
}
.ca-steps .inner { padding: 46px 0 50px; }
.ca-steps .ca-steps-head { max-width: 640px; margin-bottom: 30px; }
.ca-steps .ca-steps-head h2 { color: #fff; }
.ca-steps .ca-steps-head p { color: #A9BECF; margin: 10px 0 0; }
.ca-steps .ca-steps-head .eyebrow { color: var(--gold-2); }
.ca-steps .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ca-step {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 22px 20px 20px; position: relative;
}
.ca-step .n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--ink); font-family: 'Archivo', sans-serif;
  font-weight: 900; font-size: 15px; margin-bottom: 14px;
}
.ca-step strong { display: block; color: #fff; font-family: 'Archivo', sans-serif; font-size: 15px; margin-bottom: 7px; }
.ca-step span { display: block; font-size: 13px; color: #A9BECF; line-height: 1.6; }
.ca-steps .steps-cta { margin-top: 26px; }
@media (max-width: 1000px) { .ca-steps .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ca-steps .grid4 { grid-template-columns: 1fr; } }

/* "Is it legal in California?" answer tiles */
.ca-legal-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ca-legal-tile {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ca-legal-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.ca-legal-tile .ico {
  width: 42px; height: 42px; border-radius: 12px; background: var(--sand); color: var(--gold-3);
  display: grid; place-items: center; font-size: 20px; margin-bottom: 14px;
}
.ca-legal-tile h3 { margin: 0 0 7px; font-size: 1.02rem; }
.ca-legal-tile p { margin: 0; font-size: 13.2px; line-height: 1.6; }
.ca-legal-tile .more {
  display: inline-block; margin-top: 12px; color: var(--poppy); font-weight: 700;
  font-family: 'Archivo', sans-serif; font-size: 13px;
}
@media (max-width: 1000px) { .ca-legal-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ca-legal-tiles { grid-template-columns: 1fr; } }

/* City coverage chips */
.ca-cities { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.ca-cities a {
  border: 1px solid var(--border); background: #fff; padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2); box-shadow: var(--shadow-sm);
}
.ca-cities a:hover { border-color: var(--poppy); color: var(--poppy); }

/* Long-form homepage copy */
.homepage-intro { background: #fff; border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.homepage-intro h2 { font-size: 1.32rem; }
.homepage-intro p, .homepage-intro li { color: var(--text-2); }
.homepage-intro a { color: var(--poppy); }

/* FAQ */
.homepage-faq .faq-item { border-bottom: 1px solid var(--border); }
.homepage-faq summary { color: var(--ink); font-family: 'Archivo', sans-serif; font-weight: 700; }
.homepage-faq summary::after { color: var(--poppy); }

/* --- Newsletter ----------------------------------------------------------- */
.newsletter { background: var(--sand-2); border-top: 1px solid var(--border); }
.newsletter h2 { color: var(--ink); }
.newsletter p { color: var(--text-2); }
.newsletter .eyebrow { color: var(--gold-3); }
.newsletter-form input {
  border: 1.5px solid var(--border); border-radius: 999px 0 0 999px; background: #fff; padding: 13px 20px;
}
.newsletter-form button {
  background: var(--ink); color: #fff; border-radius: 0 999px 999px 0; border: 1.5px solid var(--ink);
  font-family: 'Archivo', sans-serif; font-weight: 700; padding: 13px 24px;
}
.newsletter-form button:hover { background: var(--poppy); border-color: var(--poppy); }

/* --- Footer --------------------------------------------------------------- */
footer.site { background: var(--ink-3); color: #A9BECF; border-top: 4px solid var(--gold); }
footer.site .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
footer.site h4 {
  color: #fff; font-family: 'Archivo', sans-serif; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 800; margin-bottom: 12px;
}
footer.site a { color: #A9BECF; }
footer.site a:hover { color: var(--gold); }
footer.site .brand-mark--footer { margin-bottom: 14px; }
footer.site .wordmark b { color: #fff; }
footer.site .wordmark i { color: var(--gold); }
footer.site .tagline { color: #93A9BC; font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
footer.site .footer-location { font-style: normal; font-size: 13px; line-height: 1.65; color: #93A9BC; }
footer.site .footer-location strong {
  display: block; color: #fff; margin-bottom: 4px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Archivo', sans-serif;
}
footer.site .legal { border-top: 1px solid rgba(255,255,255,.1); color: #7E93A6; font-size: 12.5px; }
@media (max-width: 1000px) { footer.site .cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }

/* --- Logo sizing fallbacks (schema/OG logo still uses the SVG lockup) ------ */
.brand-logo { height: 50px; max-width: 250px; }
.brand-logo--footer { height: 44px; }
@media (max-width: 700px) {
  .wordmark b, .wordmark i { font-size: 16px; }
  header.site .row { gap: 12px; }
}

/* --- Product page: description and specs run the full page width ----------- */
/* The default theme nests all long-form content inside the narrow buy column,
   leaving a tall empty gap under the gallery. The template closes the two-column
   area after the buy box; everything below is this full-width block. */
.pdp-content {
  margin: 0 auto 28px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 34px; box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .pdp-content { padding: 20px 18px; border-radius: 10px; } }
.pdp-content .specs-block, .pdp-content .seo-body { max-width: none; }
.pdp-content .seo-body p, .pdp-content .seo-body li { font-size: 14.8px; line-height: 1.72; }
.pdp-content .seo-body p, .pdp-content .seo-body ul, .pdp-content .seo-body ol { max-width: 108ch; }
.pdp-content .specs-block h2.section { font-size: 1.15rem; }
.pdp-content .specs-table { width: 100%; }
@media (min-width: 1000px) {
  .pdp-content .pdp-faq dl { columns: 2; column-gap: 40px; }
  .pdp-content .pdp-faq dd { break-inside: avoid; }
}
.pdp .info h1 { color: var(--ink); }
.pdp .info .price { color: var(--ink); font-weight: 900; }
.pill { border-color: var(--border); background: #fff; }
.pill:hover { border-color: var(--poppy); color: var(--poppy); }

/* --- Blog / article ------------------------------------------------------- */
article.post h1, article.post h2, article.post h3 { color: var(--ink); }
article.post a { color: var(--poppy); }
.blog-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.blog-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.blog-card h3 { color: var(--ink); }

/* --- Long-form hub pages (article.post) ----------------------------------- */
article.post { max-width: 860px; }
article.post p.lede { font-size: 1.1rem; line-height: 1.65; color: var(--text); }
article.post h2 { margin-top: 2rem; }
article.post ol, article.post ul { line-height: 1.7; color: var(--text-2); }
article.post ol li, article.post ul li { margin: .45rem 0; }
article.post table.specs {
  width: 100%; border-collapse: collapse; margin: 1.4rem 0; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  font-size: 14.5px;
}
article.post table.specs th {
  background: var(--sand); color: var(--ink); font-family: 'Archivo', sans-serif;
  font-weight: 800; text-align: left; padding: 11px 14px; font-size: 13px;
}
article.post table.specs td {
  padding: 10px 14px; border-top: 1px solid var(--border-2); color: var(--text-2);
}
article.post table.specs td:first-child { color: var(--ink); font-weight: 600; width: 34%; }
@media (max-width: 600px) { article.post table.specs { font-size: 13px; } }

/* --- Mobile nav ------------------------------------------------------------
   These re-assert the default theme's collapsed nav. The override layer is
   appended after the default stylesheet, so a plain `nav.primary { display:flex }`
   above would otherwise beat the default's `@media (max-width:960px)` rule and
   leave the whole menu expanded on phones. */
header.site { position: relative; }
@media (max-width: 960px) {
  nav.primary {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 18px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
  }
  nav.primary.open { display: flex; }
  nav.primary > a { padding: 13px 0; border-bottom: 1px solid var(--border-2); }
  .nav-drop { width: 100%; border-bottom: 1px solid var(--border-2); }
  .nav-drop-toggle { display: block; padding: 13px 0; }
  .nav-drop-menu {
    position: static; display: block; transform: none; min-width: 0; border: 0;
    border-radius: 0; box-shadow: none; padding: 0 0 8px 12px; margin: 0; background: transparent;
  }
  .nav-drop-ca { min-width: 0; }
  .nav-drop-menu a { padding: 8px 0; font-size: 13.5px; }
  .nav-drop-menu a:hover { background: transparent; }
  .cart-link { margin-top: 14px; justify-content: center; }
  .menu-toggle { display: block; margin-left: auto; }
}

/* --- Trims ---------------------------------------------------------------- */
.ca-hero-grid { padding: 56px 0 74px; }
.ca-hero::after { height: 180px; background-size: 100% 180px; }
.cat-tile { min-height: 112px; display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 560px) {
  .ca-hero-search { width: 100%; max-width: none; }
  .ca-hero-search button { padding: 0 18px; font-size: 13px; }
  .ca-hero-ctas .btn { width: 100%; text-align: center; }
  .ca-hero-stats { gap: 22px; }
}