/* ============================================================
   TOKENS
============================================================ */
:root {
  --bg:        #0a0c0a;
  --bg2:       #0f120f;
  --surface:   #141a14;
  --surface2:  #1a221a;
  --border:    #222e22;
  --border2:   #2a382a;

  --green:     #6abf69;
  --green-dim: rgba(106,191,105,0.10);
  --green-glow:rgba(106,191,105,0.18);
  --olive:     #8fb34a;
  --gold:      #c9a84c;
  --red:       #e05555;

  --text:      #e8ede8;
  --text-2:    #8fa08f;
  --text-3:    #7a8c7a;

  --syne: 'Outfit', sans-serif;
  --dm:   'Outfit', sans-serif;
  --mono: 'DM Mono', monospace;

  --radius: 10px;
  --radius-sm: 6px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--dm);
  min-height: 100vh;
}

/* Subtle grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--dm); }

/* ============================================================
   NAV
============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,12,10,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bebas Neue', var(--syne);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text);
  flex-shrink: 0;
}

.logo-icon { width: 32px; height: 32px; border-radius: 0; background: none; box-shadow: none; display: block; object-fit: contain; flex-shrink: 0; }

.logo span { color: var(--green); }

.logo-tld {
  font-size: 0.7rem;
  color: var(--text-2);
  font-family: var(--mono);
  font-weight: 400;
  border: 1px solid var(--border2);
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  flex: 1;
}

.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.01em;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--green); background: var(--green-dim); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.btn-ghost {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); }

.btn-primary {
  background: var(--green);
  border: none;
  color: #0a0c0a;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.btn-primary:hover { background: #7dd67c; transform: translateY(-1px); box-shadow: 0 4px 20px var(--green-glow); }

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  padding: 5rem 2rem 3rem;
  text-align: center;
  overflow: hidden;
}

/* Radial glow behind hero */
.hero::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  /* Constrained to the viewport so this decorative glow cannot
     cause horizontal overflow; it previously relied on
     body{overflow-x:hidden} to clip it. */
  width: min(800px, 100vw); height: 500px;
  background: radial-gradient(ellipse at center, rgba(106,191,105,0.08) 0%, transparent 65%);
  pointer-events: none;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-dim);
  border: 1px solid rgba(106,191,105,0.25);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.5s ease both;
}
.hero-pill::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(106,191,105,0.4); }
  50% { opacity:0.6; box-shadow: 0 0 0 4px rgba(106,191,105,0); }
}

.hero h1 {
  font-family: 'Bebas Neue', var(--syne);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.03em;
  margin-bottom: 1.25rem;
  animation: fadeUp 0.5s 0.1s ease both;
}

.hero h1 .highlight {
  color: var(--green);
  position: relative;
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--text-2);
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
  animation: fadeUp 0.5s 0.2s ease both;
}

@keyframes fadeUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Stats row */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 3rem;
  max-width: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  animation: fadeUp 0.5s 0.3s ease both;
}

.hero-stat {
  flex: 1;
  padding: 1rem 1.5rem;
  border-right: 1px solid var(--border);
  text-align: center;
}
.hero-stat:last-child { border-right: none; }

.hero-stat-num {
  font-family: var(--syne);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin-bottom: 3px;
}
.hero-stat-label {
  font-size: 0.68rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   CATEGORY TABS
============================================================ */
.category-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  animation: fadeUp 0.5s 0.35s ease both;
}

.cat-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.cat-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--syne);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 100px;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.cat-tab:hover { border-color: var(--border2); color: var(--text); }
.cat-tab.active {
  background: var(--green-dim);
  border-color: rgba(106,191,105,0.4);
  color: var(--green);
}
.cat-tab .cat-icon { font-size: 1rem; }
.cat-tab .cat-count {
  background: var(--surface2);
  font-size: 0.65rem;
  font-family: var(--mono);
  padding: 1px 6px;
  border-radius: 100px;
  color: var(--text-2);
}
.cat-tab.active .cat-count {
  background: rgba(106,191,105,0.15);
  color: var(--green);
}

/* ============================================================
   SEARCH BAR
============================================================ */
.search-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.search-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 0.75rem;
  align-items: end;
}

.field-group { display: flex; flex-direction: column; gap: 5px; }
/* Required, not redundant: the `hidden` attribute only sets display:none in
   the UA stylesheet, so the author rule above wins and a [hidden] field would
   stay on screen. Data-driven fields (Manufacturer) rely on this to stay out
   of the grid until the catalogue actually has values for them. */
.field-group[hidden] { display: none; }

.field-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
}

.field-select,
.field-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--dm);
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  outline: none;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.field-select:focus,
.field-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(106,191,105,0.12);
}

.select-wrap { position: relative; }
.select-wrap::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-2);
  pointer-events: none;
}

.search-btn-large {
  background: var(--green);
  border: none;
  color: #0a0c0a;
  font-family: var(--syne);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  white-space: nowrap;
  letter-spacing: 0.02em;
  height: 42px;
}
.search-btn-large:hover {
  background: #7dd67c;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--green-glow);
}

/* Filter chips */
.filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 0.68rem;
  color: var(--text-2);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.filter-chip {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 100px;
  transition: all 0.12s;
  font-family: var(--dm);
}
.filter-chip:hover, .filter-chip.on {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-dim);
}

/* ============================================================
   QUICK CALIBERS
============================================================ */
.quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.quick-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--dm);
  display: flex;
  align-items: center;
  gap: 6px;
}
.quick-chip:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-dim);
  transform: translateY(-1px);
}

/* ============================================================
   MAIN LAYOUT
============================================================ */
.main-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

/* ============================================================
   RESULTS
============================================================ */
.results-section {}

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.results-title {
  font-family: var(--syne);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.results-title small {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-2);
  font-weight: 400;
  margin-left: 8px;
}

.sort-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sort-label { font-size: 0.72rem; color: var(--text-2); font-family: var(--mono); }
.sort-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.75rem;
  font-family: var(--mono);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}

/* Result cards */
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.6rem;
  display: grid;
  grid-template-columns: 2.5fr 1fr 0.9fr 0.9fr 1.1fr auto;
  align-items: center;
  gap: 1rem;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.result-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.15s;
}
.result-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.result-card:hover::after { background: var(--green); }
.result-card.sponsored {
  border-color: rgba(201,168,76,0.3);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(201,168,76,0.04) 100%);
}
.result-card.sponsored::after { background: var(--gold); }
.result-card.best { border-color: rgba(106,191,105,0.35); }
.result-card.best::after { background: var(--green); }

.sponsored-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  font-size: 0.58rem;
  font-family: var(--mono);
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.best-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(106,191,105,0.12);
  border: 1px solid rgba(106,191,105,0.3);
  color: var(--green);
  font-size: 0.58rem;
  font-family: var(--mono);
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-retailer {
  font-family: var(--syne);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-product {
  font-size: 0.75rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-price {
  font-family: var(--syne);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.card-price-sub {
  font-size: 0.65rem;
  color: var(--text-2);
  font-family: var(--mono);
  margin-top: 3px;
}

.card-qty {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
}
.card-qty-sub { font-size: 0.65rem; color: var(--text-2); margin-top: 2px; }

.card-ship {
  font-size: 0.78rem;
  color: var(--text-2);
}
.card-ship.free { color: var(--green); font-weight: 500; }

.card-rating {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stars-row { color: var(--gold); font-size: 0.7rem; letter-spacing: -1px; }
.rating-num { font-family: var(--mono); font-size: 0.7rem; color: var(--text-2); }

.buy-btn {
  background: var(--green);
  border: none;
  color: #0a0c0a;
  font-family: var(--syne);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  transition: all 0.12s;
  white-space: nowrap;
}
.buy-btn:hover {
  background: #7dd67c;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--green-glow);
}

/* Column headers */
.results-header-row {
  display: grid;
  grid-template-columns: 2.5fr 1fr 0.9fr 0.9fr 1.1fr auto;
  gap: 1rem;
  padding: 0 1.25rem 0.5rem;
  font-size: 0.62rem;
  font-family: var(--mono);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Placeholder */
.placeholder {
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  padding: 5rem 2rem;
  text-align: center;
}
.placeholder-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.placeholder-title {
  font-family: var(--syne);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.placeholder-sub { font-size: 0.82rem; color: var(--text-3); }
/* Only shown before any retailer is live: the empty page is the best place
   we have to recruit the stores that would fill it. */
.placeholder-cta {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  border: 1px solid rgba(106,191,105,0.32);
  background: var(--green-dim);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  transition: all 0.15s;
}
.placeholder-cta:hover { background: rgba(106,191,105,0.18); border-color: var(--green); }

/* ============================================================
   SIDEBAR
============================================================ */
.sidebar { display: flex; flex-direction: column; gap: 1rem; }

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-head-title {
  font-family: var(--syne);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-head-title .dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.sidebar-head-link {
  font-size: 0.68rem;
  color: var(--text-2);
  font-family: var(--mono);
  transition: color 0.12s;
}
.sidebar-head-link:hover { color: var(--green); }

/* Deal items */
.deal-item {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.deal-item:last-child { border-bottom: none; }
.deal-item:hover { background: var(--surface2); }
.deal-retailer { font-weight: 600; font-size: 0.82rem; color: var(--text); margin-bottom: 4px; }
.deal-desc { font-size: 0.72rem; color: var(--text-2); line-height: 1.4; margin-bottom: 6px; }
.deal-code {
  display: inline-block;
  background: var(--green-dim);
  border: 1px dashed rgba(106,191,105,0.3);
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* Ad card */
.ad-card {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(106,191,105,0.06) 100%);
  border: 1px solid rgba(106,191,105,0.2);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.ad-card-label {
  font-size: 0.6rem;
  font-family: var(--mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
}
.ad-card-title {
  font-family: var(--syne);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.ad-card-sub { font-size: 0.75rem; color: var(--text-2); margin-bottom: 1rem; }
.ad-card-btn {
  background: var(--green);
  border: none;
  color: #0a0c0a;
  font-family: var(--syne);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  width: 100%;
  transition: all 0.12s;
}
.ad-card-btn:hover { background: #7dd67c; }

/* Wait time tracker card */
.wait-tracker { padding: 1rem; }
.wait-title { font-family: var(--syne); font-weight: 700; font-size: 0.88rem; margin-bottom: 0.75rem; }
.wait-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
}
.wait-row:last-child { border-bottom: none; }
.wait-type { color: var(--text-2); }
.wait-days {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
}
.wait-days .trend-up { color: var(--red); font-size: 0.65rem; }
.wait-days .trend-dn { color: var(--green); font-size: 0.65rem; }
.wait-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.wait-bar-fill { height: 100%; background: var(--olive); border-radius: 2px; }

/* Top calibers table */
.caliber-table { width: 100%; }
.caliber-row {
  /* Rendered as a <button> so it is keyboard reachable; these resets stop
     it picking up the default button chrome. */
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0.55rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.caliber-row:last-child { border-bottom: none; }
.caliber-row:hover { background: var(--surface2); }
.cal-name { font-size: 0.78rem; color: var(--text); flex: 1; }

/* ============================================================
   SUPPRESSOR SECTION (below main)
============================================================ */
.supp-section {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.section-title {
  font-family: var(--syne);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-title span { color: var(--green); }
.section-sub { font-size: 0.78rem; color: var(--text-2); margin-top: 3px; }
.section-link {
  /* Now a <button> (it used to be an <a> pointing at index.html, a
     self-link on the homepage). These resets stop the default button
     chrome showing through. */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--green);
  font-family: var(--mono);
  transition: opacity 0.12s;
}
.section-link:hover { opacity: 0.7; }

.supp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.supp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.supp-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.supp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--olive));
  opacity: 0;
  transition: opacity 0.15s;
}
.supp-card:hover::before { opacity: 1; }

.supp-brand { font-size: 0.65rem; font-family: var(--mono); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.supp-name { font-family: var(--syne); font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem; }

.supp-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.spec-tag {
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 0.62rem;
  font-family: var(--mono);
  color: var(--text-2);
  padding: 2px 7px;
  border-radius: 3px;
}

.supp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.supp-price { font-family: var(--syne); font-size: 1.15rem; font-weight: 700; color: var(--green); }
.supp-price-label { font-size: 0.62rem; color: var(--text-2); font-family: var(--mono); }
.supp-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text-2);
  font-size: 0.75rem;
  font-family: var(--syne);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: all 0.12s;
}
.supp-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }

.supp-in-stock { color: var(--green); font-size: 0.65rem; font-family: var(--mono); }
.supp-out-stock { color: var(--red); font-size: 0.65rem; font-family: var(--mono); }

/* ============================================================
   ADVERTISE BANNER
============================================================ */
.ad-banner {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.ad-banner-inner {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(106,191,105,0.07) 100%);
  border: 1px solid rgba(106,191,105,0.2);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ad-banner-inner::before {
  content: 'ADVERTISE';
  position: absolute;
  right: -20px; top: -20px;
  font-family: var(--syne);
  font-size: 6rem;
  font-weight: 800;
  color: rgba(106,191,105,0.04);
  letter-spacing: -0.05em;
  pointer-events: none;
}
.ad-banner-tag {
  display: inline-block;
  background: var(--green-dim);
  border: 1px solid rgba(106,191,105,0.25);
  color: var(--green);
  font-size: 0.65rem;
  font-family: var(--mono);
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.ad-banner-title {
  font-family: var(--syne);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.ad-banner-sub {
  font-size: 0.88rem;
  color: var(--text-2);
  max-width: 500px;
  line-height: 1.5;
}
.ad-banner-btns { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; }
.ad-banner-btn-primary {
  background: var(--green);
  border: none;
  color: #0a0c0a;
  font-family: var(--syne);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  transition: all 0.12s;
  white-space: nowrap;
}
.ad-banner-btn-primary:hover { background: #7dd67c; transform: translateY(-1px); box-shadow: 0 6px 24px var(--green-glow); }
.ad-banner-btn-ghost {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text-2);
  font-family: var(--syne);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  transition: all 0.12s;
  white-space: nowrap;
}
.ad-banner-btn-ghost:hover { border-color: var(--green); color: var(--green); }

/* ============================================================
   FOOTER
============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: 3rem 2rem 2rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-brand-desc {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 0.75rem;
  max-width: 220px;
}
.footer-col-title {
  font-family: var(--syne);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.footer-links-list a {
  font-size: 0.78rem;
  color: var(--text-2);
  transition: color 0.12s;
}
.footer-links-list a:hover { color: var(--green); }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.footer-copy { font-size: 0.72rem; color: var(--text-3); font-family: var(--mono); }
.footer-disclaimer { font-size: 0.68rem; color: var(--text-3); max-width: 500px; line-height: 1.4; }

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 900px) {
  .search-grid { grid-template-columns: 1fr 1fr; }
  .search-btn-large { grid-column: span 2; }
  .main-layout { grid-template-columns: 1fr; }
  .sidebar { order: -1; }
  .supp-grid { grid-template-columns: 1fr 1fr; }
  .result-card { grid-template-columns: 1fr 1fr; }
  .results-header-row { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .ad-banner-inner { grid-template-columns: 1fr; }
  nav .nav-links { display: none; }
}
@media (max-width: 600px) {
  .supp-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.5rem; }
  .detail-panel { width: 100%; }
}

/* ============================================================
   PRODUCT DETAIL PANEL
============================================================ */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.panel-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.detail-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 501;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-panel.open { transform: translateX(0); }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-back {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.06em;
}
.panel-back:hover { border-color: var(--green); color: var(--green); }

.panel-title {
  font-family: var(--syne);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Product header inside panel */
.panel-product-name {
  font-family: var(--syne);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.panel-retailer-name {
  font-size: 0.82rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.panel-verified {
  background: var(--green-dim);
  border: 1px solid rgba(106,191,105,0.3);
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.58rem;
  padding: 1px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Price hero */
.panel-price-hero {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  text-align: center;
}
.panel-price-item {}
.panel-price-num {
  font-family: var(--syne);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.panel-price-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Spec grid */
.panel-section-title {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.panel-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.spec-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
}
.spec-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.spec-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

/* Price history chart */
.chart-container {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  position: relative;
  height: 160px;
}
.chart-canvas { width: 100%; height: 100%; }
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-2);
  letter-spacing: 0.06em;
}

/* Similar listings */
.similar-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.similar-card:hover { border-color: var(--border2); }
.similar-retailer { font-weight: 600; font-size: 0.82rem; color: var(--text); }
.similar-product { font-size: 0.72rem; color: var(--text-2); margin-top: 2px; }
.similar-price {
  font-family: var(--syne);
  font-size: 1rem;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}

/* Retailer info */
.retailer-info-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.retailer-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--syne);
  font-size: 1rem;
  font-weight: 800;
  color: var(--green);
  flex-shrink: 0;
}
.retailer-detail-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}
.retailer-detail-meta {
  font-size: 0.72rem;
  color: var(--text-2);
  margin-top: 3px;
}
.retailer-stars { color: var(--gold); font-size: 0.75rem; }

/* Panel buy button */
.panel-buy-btn {
  background: var(--green);
  border: none;
  color: #0a0c0a;
  font-family: var(--syne);
  font-size: 1rem;
  font-weight: 800;
  padding: 14px;
  border-radius: var(--radius-sm);
  width: 100%;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: block;
  text-align: center;
}
.panel-buy-btn:hover {
  background: #7dd67c;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--green-glow);
}
.panel-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.panel-disclaimer {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-2);
  text-align: center;
  margin-top: 0.6rem;
  letter-spacing: 0.04em;
}

/* Converted from inline style="" attributes for CSP style-src */
.hidden { display: none; }
.wait-note { font-size: 0.68rem; color: var(--text-2); margin-bottom: 0.75rem; font-family: var(--mono); }
.wait-sub { margin-top: 0.75rem; font-size: 0.65rem; color: var(--text-3); font-family: var(--mono); }
.bar-35 { width: 35%; }
.bar-45 { width: 45%; }
.bar-90 { width: 90%; }
.bar-20 { width: 20%; }
.footer-logo-size { font-size: 1.1rem; }
.footer-logo-icon-size { width: 26px; height: 26px; font-size: 0.8rem; }
.panel-stock-status { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; }
.text-accent2 { color: var(--green); }
.text-red { color: var(--red); }
.text-default { color: var(--text); }
.flex-1 { flex: 1; }
.link-green-plain { color: var(--green); text-decoration: none; }


/* ============================================================
   ACCESSIBILITY (WCAG 2.1 AA)
   ============================================================ */

/* 2.4.7 Focus Visible — the palette previously styled :focus on form
   inputs only, leaving buttons, links and the role="button" elements with
   no visible keyboard indicator at all. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 2.4.1 Bypass Blocks — lets keyboard/screen-reader users skip the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--green);
  color: #0a0c0a;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* role="button" elements should look interactive */
[role="button"] { cursor: pointer; }

/* 2.3.3 / prefers-reduced-motion — honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   MOBILE NAV
   The nav links were display:none below the breakpoint with no
   replacement, and .nav-right overflowed narrow viewports (clipped by
   body{overflow-x:hidden}, so the buttons were unreachable rather than
   merely off-screen).
   ============================================================ */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  min-width: 44px;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-2);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: sticky;
  top: 64px;
  z-index: 199;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.mobile-nav.open { max-height: 70vh; overflow-y: auto; }

.mobile-nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;          /* comfortable touch target */
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.mobile-nav-link:hover { background: var(--surface2); }
.mobile-nav-link.active { color: var(--green); background: var(--green-dim); }
.mobile-nav-action { color: var(--green); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .mobile-nav { display: flex; }
  /* The desktop action buttons are represented inside the panel instead. */
  nav .nav-right { display: none; }
  nav { padding: 0 1rem; gap: 0.75rem; }
}


/* ============================================================
   SMALL PHONES (<=480px)
   The smallest breakpoint on most pages was 600-800px, so on a 375-430px
   handset two-column grids stayed two-column and content was cramped.
   ============================================================ */
@media (max-width: 480px) {
  nav { padding: 0 0.75rem; gap: 0.5rem; }
  .logo { font-size: 1.15rem; }
  .logo-tld { display: none; }
}

/* Comfortable touch targets on touch devices (WCAG 2.5.5 / 2.5.8).
   Buttons were ~30px tall from padding alone. Scoped to coarse pointers
   so the desktop layout is untouched. */
@media (pointer: coarse) {
  button, .btn-ghost, .btn-primary, .cat-tab, .filter-chip, .quick-chip,
  .feed-tab, .chart-tab, .save-btn, .danger-btn, .submit-btn, .placement-btn {
    min-height: 44px;
  }
  input, select, textarea, .form-input, .form-select, .field-select {
    min-height: 44px;
    font-size: 16px;   /* iOS zooms the page for anything under 16px */
  }
}

@media (max-width: 480px) {
  .search-grid { grid-template-columns: 1fr; }
  .search-btn-large { grid-column: span 1; }
  .result-card { grid-template-columns: 1fr; gap: 0.35rem; }
  .supp-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .cat-tabs { gap: 0.35rem; }
  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: 0.95rem; }
  .section-wrap, .category-section { padding-left: 1rem; padding-right: 1rem; }
}


/* Long unbreakable strings (product URLs, feed URLs, emails) must not push
   the layout wider than the viewport. Previously body{overflow-x:hidden}
   would have quietly clipped them; that mask has been removed now that the
   decorative glows are viewport-constrained. */
body { overflow-wrap: break-word; }
td, .card-product, .card-retailer, .search-item-detail,
.retailer-detail-meta, .deal-desc, .session-device { overflow-wrap: anywhere; }
table { max-width: 100%; }
img, canvas, svg { max-width: 100%; height: auto; }

/* Empty states for sections that previously showed fabricated data. */
.wait-empty { font-size: 0.72rem; color: var(--text-2); line-height: 1.6; padding: 0.5rem 0; }
.wait-empty a { color: var(--green); }


/* Sections that must stay hidden until real data exists are marked [hidden]
   in the markup and revealed by JS. Author styles beat the UA stylesheet, so
   make the intent explicit and hard to override by accident. */
[hidden] { display: none !important; }

/* ============================================================
   PRICE RANGE SLIDER (dual handle)
   Two native range inputs stacked on one track. Native inputs keep
   keyboard operation and screen-reader announcement for free; the
   inputs themselves are transparent and only their thumbs are visible.
   ============================================================ */
.price-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Match the vertical footprint of a .field-select so the slider lines up
     with the other controls on the `align-items: end` search grid. */
  padding: 8px 0 0;
}

/* The search grid's last column is `auto`, and on ammo/magazines/reloading
   that is where the price field lands. Everything inside .price-track is
   absolutely positioned, so the track contributes ZERO intrinsic width and
   the column would collapse to the width of the readout text -- a ~90px
   stub. Give the field a floor so it is always a usable control. */
.field-group--price { min-width: 165px; }

.price-track {
  position: relative;
  height: 22px;
}
/* The unfilled portion of the track. */
.price-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--border2);
}
/* The selected span between the two handles. JS overwrites left/right on
   every update; the defaults here mean a full-width bar rather than a
   collapsed one if it is ever painted before the first update() runs. */
.price-fill {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--green);
}

.price-slider input[type="range"] {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;          /* overrides the coarse-pointer 44px min-height */
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  /* Only the thumbs should catch the mouse: the two inputs overlap, so a
     track-clickable input would swallow every click meant for the one
     underneath it. */
  pointer-events: none;
}
.price-slider input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
  height: 100%;
}
.price-slider input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
  height: 100%;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg2);
  cursor: pointer;
  margin-top: 3px;        /* centres the thumb on the 22px track */
}
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg2);
  cursor: pointer;
}
/* The global :focus-visible outline would box the full-width invisible
   input rather than the handle, so it is replaced with a ring on the thumb
   itself — a tighter indicator in the same colour. */
.price-slider input[type="range"]:focus-visible {
  outline: none;
}
.price-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--green);
}
.price-slider input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--green);
}

.price-readout {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-2);
}

/* Bigger grab targets on touch, where a 16px thumb is hard to hit. */
@media (pointer: coarse) {
  .price-track { height: 44px; }
  .price-slider input[type="range"]::-webkit-slider-thumb {
    width: 22px; height: 22px; margin-top: 11px;
  }
  .price-slider input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
  }
}


/* ============================================================
   AD SLOTS
   Both are empty until a placement is sold. The hero slot carries the
   `hidden` attribute and must not be given a display value here -- any
   display rule overrides `hidden` and leaves an empty box on the page.
============================================================ */
.hero-ad-slot { padding: 1.25rem 2rem 0; }
.hero-ad-slot[hidden] { display: none; }

.hero-ad {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 1rem 1.35rem;
  text-align: left;
  transition: border-color 0.15s;
}
.hero-ad:hover { border-color: var(--green); }
.hero-ad img {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.hero-ad-body { flex: 1; min-width: 0; }
.hero-ad-title { font-weight: 700; font-size: 0.98rem; color: var(--text); margin-bottom: 2px; }
.hero-ad-desc  { font-size: 0.82rem; color: var(--text-2); }

/* Required by the FTC, and by anyone who wants to be trusted: paid
   placement has to be identifiable as paid. */
.ad-disclosure {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  border: 1px solid var(--border2);
  border-radius: 100px;
  padding: 2px 8px;
  flex-shrink: 0;
  align-self: flex-start;
}

.sidebar-ad-logo {
  width: 100%;
  max-height: 64px;
  object-fit: contain;
  margin-bottom: 0.7rem;
  border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
  .hero-ad-slot { padding: 1rem 1rem 0; }
  .hero-ad { flex-wrap: wrap; gap: 0.8rem; }
}


/* ============================================================
   FOOTER
   Appended last so it overrides whatever this sheet defined earlier --
   every page used to carry its own footer, and they had drifted into
   five different layouts with four different disclaimers.
============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: 3rem 2rem 2rem;
  text-align: left;
  font-family: var(--dm, var(--syne));
  font-size: 1rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo-size { font-size: 1.15rem; }
.footer-brand-desc {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 0.75rem;
  max-width: 220px;
}
.footer-col-title {
  font-family: var(--syne);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; }
.footer-links-list a { font-size: 0.78rem; color: var(--text-2); transition: color 0.12s; }
.footer-links-list a:hover { color: var(--green); }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.footer-copy { font-size: 0.72rem; color: var(--text-3); font-family: var(--mono); flex-shrink: 0; }
.footer-disclaimer { font-size: 0.68rem; color: var(--text-3); max-width: 500px; line-height: 1.5; text-align: left; }
.footer-disclaimer strong { color: var(--text-2); }
.footer-disclaimer a { color: var(--text-2); text-decoration: underline; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  footer { padding: 2rem 1rem 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}


/* The FTC wants a material-connection disclosure clear, conspicuous and
   close to the link -- not in a footer that takes scrolling to reach. This
   sits directly above the results, so it is crossed on the way to any
   retailer link. Deliberately not the faintest text on the page. */
.affiliate-note[hidden] { display: none; }
.affiliate-note {
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.5;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--green);
  border-radius: var(--radius-sm);
}


/* ============================================================
   ACCESSIBILITY HELPERS
============================================================ */
/* Text for screen readers only: names each value in a result, so a list of
   bare numbers becomes "price per round 40.0 cents, 1,000 rounds". */
.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;
}

/* The product name doubles as the keyboard way into the detail panel --
   the card itself only ever responded to a mouse click. */
.card-details-btn {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.card-details-btn:hover { color: var(--green); text-decoration: underline; }

/* Links styled as the buttons they used to wrap. <button> inside <a> is
   invalid and reads inconsistently in screen readers. */
a.buy-btn, a.panel-buy-btn { display: inline-block; text-align: center; text-decoration: none; }

.rating-none { font-size: 0.72rem; color: var(--text-3); }

/* Links now carry these classes directly instead of wrapping a <button>. */
a.btn-ghost, a.btn-primary { display: inline-block; text-align: center; text-decoration: none; }