/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--charcoal:#1a1a1a;--charcoal-light:#252525;--charcoal-mid:#333;--accent:#dc2626;--accent-dark:#b91c1c;--accent-light:#ef4444;--accent-yellow:#f59e0b;--text-primary:#e0e0e0;--text-secondary:#aaa;--text-muted:#777;--white:#fff;--border-color:#3a3a3a;--card-bg:#222;--font-main:'Inter',system-ui,-apple-system,sans-serif;--font-heading:'Oswald',system-ui,sans-serif;--max-width:1200px;--radius:6px}
html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-main);background:var(--charcoal);color:var(--text-primary);line-height:1.7;-webkit-font-smoothing:antialiased}a{color:var(--accent-light);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-yellow)}img{max-width:100%;height:auto;display:block}h1,h2,h3,h4,h5{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.5px;line-height:1.3}
.site-header{background:var(--charcoal-light);border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px)}.header-inner{max-width:var(--max-width);margin:0 auto;padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.logo{font-family:var(--font-heading);font-size:1.5rem;color:var(--white);font-weight:700;letter-spacing:1px}.logo span{color:var(--accent)}.nav-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer}.main-nav ul{list-style:none;display:flex;gap:.3rem;flex-wrap:wrap}.main-nav a{display:block;padding:.4rem .7rem;color:var(--text-secondary);font-size:.85rem;font-weight:500;border-radius:var(--radius);transition:all .2s}.main-nav a:hover,.main-nav a.active{color:var(--white);background:var(--charcoal-mid)}
.hero{background:linear-gradient(135deg,var(--charcoal) 0%,#2a1010 50%,var(--charcoal-light) 100%);padding:4rem 1.5rem;text-align:center;border-bottom:3px solid var(--accent)}.hero h1{font-size:2.8rem;color:var(--white);margin-bottom:1rem}.hero h1 span{color:var(--accent)}.hero p{font-size:1.15rem;color:var(--text-secondary);max-width:760px;margin:0 auto 2rem}.hero-cta{display:inline-block;background:var(--accent);color:var(--white);padding:.8rem 2rem;border-radius:var(--radius);font-weight:600;font-size:1rem;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.hero-cta:hover{background:var(--accent-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 4px 15px rgba(220,38,38,.4)}
.container{max-width:var(--max-width);margin:0 auto;padding:2rem 1.5rem}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.cat-card,.brand-section{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius)}.cat-card{padding:1.8rem;text-align:center;transition:all .2s}.cat-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.3)}.cat-card .icon{font-size:2.5rem;margin-bottom:.8rem}.cat-card h3{font-size:1.1rem;color:var(--white);margin-bottom:.5rem}.cat-card p{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem}.cat-card a{color:var(--accent-light);font-weight:600;font-size:.9rem}.brand-section{padding:2rem;margin:2rem 0}
/* Article layout */
.content-grid{display:grid;grid-template-columns:1fr 300px;gap:2rem}.article-content{min-width:0}.sidebar{position:sticky;top:80px;align-self:start}.widget{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.2rem;margin-bottom:1rem}.widget h4{font-family:var(--font-heading);color:var(--white);margin-bottom:.6rem;font-size:.95rem}.widget ul{list-style:none}.widget li{margin-bottom:.4rem}.widget a{font-size:.88rem}
.article-content h1{font-size:2rem;color:var(--white);margin-bottom:.5rem}.article-content .meta{font-size:.85rem;color:var(--text-muted);margin-bottom:2rem}.article-content h2{font-size:1.4rem;margin:2rem 0 .8rem;color:var(--white);border-bottom:1px solid var(--border-color);padding-bottom:.4rem}.article-content h3{font-size:1.15rem;margin:1.5rem 0 .5rem;color:var(--white)}.article-content p{margin-bottom:1rem;color:var(--text-secondary)}.article-content ul,.article-content ol{margin:0 0 1rem 1.5rem;color:var(--text-secondary)}.article-content li{margin-bottom:.4rem}
/* Product cards */
.product-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem;transition:border-color .2s}.product-card:hover{border-color:var(--accent)}.product-card h3{font-size:1.2rem;color:var(--white);margin-bottom:.4rem}.rating{color:var(--accent-yellow);font-size:.9rem;margin-bottom:.5rem}.specs{font-size:.88rem;color:var(--text-muted);margin-bottom:.8rem;padding:.5rem;background:var(--charcoal);border-radius:var(--radius)}.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.pros h4{color:#22c55e;font-size:.9rem;margin-bottom:.4rem}.cons h4{color:var(--accent-light);font-size:.9rem;margin-bottom:.4rem}.pros ul,.cons ul{list-style:none;font-size:.85rem}.pros li::before{content:'✓ ';color:#22c55e}.cons li::before{content:'✗ ';color:var(--accent-light)}
.btn{display:inline-block;background:var(--accent);color:var(--white);padding:.6rem 1.5rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}.btn:hover{background:var(--accent-dark);color:var(--white);transform:translateY(-1px)}
.badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;padding:.2rem .6rem;border-radius:4px;margin-bottom:.5rem}.badge-top{background:#22c55e;color:#fff}.badge-value{background:#3b82f6;color:#fff}.badge-popular{background:#f97316;color:#fff}
/* FAQ */
.faq{margin:2rem 0}.faq-item{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius);margin-bottom:.8rem;padding:1.2rem}.faq-item h3{font-size:1rem;color:var(--white);margin-bottom:.5rem;text-transform:none;letter-spacing:0;font-family:var(--font-main)}.faq-item p{font-size:.9rem;color:var(--text-secondary);margin:0}
/* Footer */
.site-footer{background:var(--charcoal-light);border-top:3px solid var(--accent);padding:2rem 1.5rem;margin-top:3rem}.footer-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.footer-col h4{font-family:var(--font-heading);color:var(--white);margin-bottom:.8rem;font-size:.95rem}.footer-col p,.footer-col a{font-size:.85rem;color:var(--text-muted)}.footer-col ul{list-style:none}.footer-col li{margin-bottom:.4rem}.affiliate-disclosure{background:var(--charcoal);border:1px solid var(--border-color);border-radius:var(--radius);padding:1rem;margin-top:1.5rem;max-width:var(--max-width);margin-left:auto;margin-right:auto}.affiliate-disclosure p{font-size:.8rem;color:var(--text-muted);text-align:center}.footer-bottom{text-align:center;padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--border-color);max-width:var(--max-width);margin-left:auto;margin-right:auto}.footer-bottom p{font-size:.8rem;color:var(--text-muted)}.network-links{background:#1f0f0f;padding:1.2rem;text-align:center;font-size:.82rem;color:#888;border-top:1px solid #333}.network-links strong{color:#ccc}.network-links a{color:#aaa;margin:0 .5rem}
@media(max-width:768px){.nav-toggle{display:block}.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--charcoal-light);border-bottom:3px solid var(--accent);padding:1rem}.main-nav.open{display:block}.main-nav ul{flex-direction:column;gap:0}.main-nav a{padding:.7rem 1rem;border-radius:0;border-bottom:1px solid var(--border-color)}.hero h1{font-size:1.8rem}.header-inner{position:relative}.category-grid{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr}.sidebar{position:static}.pros-cons{grid-template-columns:1fr}}


/* ═══════════════════════════════════════════════
   MOBILE UX OVERHAUL — Compact Cards, Accordions,
   Sticky Nav, Collapsible Sections, Vehicle Finder
   ═══════════════════════════════════════════════ */

/* ── Accordion Review Cards (mobile compact) ── */
.review-compact-summary {
  display: none;
}
.review-detail-toggle {
  display: none;
}

/* ── Sticky Jump Nav ── */
.sticky-jump-nav {
  display: none;
  position: sticky;
  top: 60px;
  z-index: 90;
  background: inherit;
  border-bottom: 1px solid rgba(128,128,128,0.2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 12px;
  gap: 6px;
  white-space: nowrap;
}
.sticky-jump-nav::-webkit-scrollbar { display: none; }
.sticky-jump-nav .jump-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  border: 1.5px solid rgba(128,128,128,0.3);
}

/* ── Collapsible Sections ── */
.collapsible-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
}
.collapsible-header::after {
  content: '▼';
  font-size: 0.7rem;
  transition: transform 0.2s;
  margin-left: 8px;
  flex-shrink: 0;
}
.collapsible-header.expanded::after {
  transform: rotate(180deg);
}
.collapsible-body {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.collapsible-body.collapsed {
  max-height: 0 !important;
  overflow: hidden;
}

/* ── Vehicle Finder ── */
.vehicle-finder {
  display: none;
  padding: 16px;
  border-radius: 8px;
  margin: 16px auto;
  max-width: 800px;
}
.vehicle-finder h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.vehicle-finder-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.vehicle-finder-form select {
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  border: 1.5px solid rgba(128,128,128,0.3);
  background: inherit;
  color: inherit;
  font-family: inherit;
  appearance: auto;
}
.vehicle-finder-form button {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

/* ── FAQ Accordion ── */
.faq-toggle-body {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-toggle-body.collapsed {
  max-height: 0 !important;
}

@media (max-width: 768px) {
  /* ── Base Typography Tightening ── */
  body { font-size: 15px !important; }
  h1 { font-size: 1.55rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.05rem !important; }
  h4 { font-size: 0.95rem !important; }

  /* ── Section Spacing Reduction ── */
  .section, .container { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .section-header { margin-bottom: 1.25rem !important; }

  /* ── Hero Compact ── */
  .hero { padding: 2rem 1rem 1.5rem !important; }
  .hero h1 { font-size: 1.6rem !important; margin-bottom: 0.5rem !important; }
  .hero p { font-size: 0.92rem !important; margin-bottom: 1rem !important; }
  .page-hero { padding: 1.5rem 1rem 1.25rem !important; }
  .page-hero h1 { font-size: 1.5rem !important; }
  .page-hero p, .page-hero .subtitle { font-size: 0.9rem !important; }

  /* ── Card Compact ── */
  .card-body, .card { padding: 12px !important; }
  .card-image { height: 100px !important; font-size: 2rem !important; }
  .card-text { font-size: 0.85rem !important; margin-bottom: 0.5rem !important; }
  .review-card { padding: 12px !important; padding-top: 20px !important; margin-bottom: 1rem !important; }
  .review-header { gap: 0.75rem !important; margin-bottom: 0.75rem !important; }
  .review-image { display: none !important; }
  .review-body p { font-size: 0.88rem !important; }
  .product-card { padding: 12px !important; margin-bottom: 1rem !important; }

  /* ── Remove Emoji Placeholders ── */
  .card-image:not(:has(img)):not(:has(svg)) {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  /* ── Pros/Cons Compact ── */
  .pros-cons { gap: 0.5rem !important; margin: 0.5rem 0 !important; }
  .pros, .cons { padding: 8px !important; }
  .pros li, .cons li { font-size: 0.85rem !important; }

  /* ── Accordion Review Cards ── */
  .review-compact-summary {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0;
  }
  .review-compact-summary .compact-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
    color: #fff;
  }
  .review-compact-summary .compact-info {
    flex: 1;
    min-width: 0;
  }
  .review-compact-summary .compact-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .review-compact-summary .compact-stars {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
  }
  .review-compact-summary .compact-oneliner {
    font-size: 0.82rem;
    opacity: 0.8;
    line-height: 1.3;
    margin-top: 2px;
  }
  .review-compact-summary .compact-cta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .review-compact-summary .compact-price {
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .review-compact-summary .compact-cta {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .review-detail-toggle {
    display: block !important;
    background: none;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
  }
  .review-detail-toggle::after {
    content: ' ▼';
    font-size: 0.7rem;
  }
  .review-detail-toggle.expanded::after {
    content: ' ▲';
  }
  .review-detail-body {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .review-detail-body.collapsed {
    max-height: 0 !important;
    overflow: hidden;
  }

  /* Hide original rank badge on mobile (we show compact rank) */
  .review-rank { display: none !important; }
  .product-rank { display: none !important; }

  /* ── Sticky Jump Nav ── */
  .sticky-jump-nav {
    display: flex !important;
  }

  /* ── Vehicle Finder ── */
  .vehicle-finder {
    display: block !important;
  }
  .vehicle-finder-form {
    flex-direction: column;
  }
  .vehicle-finder-form select,
  .vehicle-finder-form button {
    width: 100%;
  }

  /* ── CTA Buttons Full Width ── */
  .review-cta .btn,
  .product-cta .btn,
  .btn-amazon,
  .btn-bartact,
  .product-card .btn-amazon,
  .product-card .btn-bartact,
  .cta-row .btn,
  .review-cta a,
  .product-card a[class*="btn"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ── Footer Compact ── */
  .footer, .site-footer { padding: 1.5rem 1rem 1rem !important; }
  .footer p, .footer li, .site-footer p, .site-footer li,
  .footer-col p, .footer-col a { font-size: 0.8rem !important; }
  .footer h4, .footer-col h4 { font-size: 0.9rem !important; margin-bottom: 0.5rem !important; }
  .footer-bottom { padding-top: 0.75rem !important; }
  .footer-grid, .footer-inner { gap: 1rem !important; }

  /* ── Guide/Buying Section Collapsed ── */
  .guide-section { padding: 12px !important; margin-bottom: 1rem !important; }
  .guide-section p, .guide-section li { font-size: 0.88rem !important; }

  /* ── Table Compact ── */
  .comparison-table, .cmp-table { font-size: 0.8rem !important; }
  .comparison-table th, .comparison-table td,
  .cmp-table th, .cmp-table td { padding: 0.5rem 0.6rem !important; }

  /* ── Network Links Compact ── */
  .network-links { font-size: 0.75rem !important; padding: 0.8rem !important; }
  .cross-links-box { padding: 0.8rem 1rem !important; font-size: 0.85rem !important; }

  /* ── Disclosure Compact ── */
  .disclosure, .disclosure-box, .affiliate-notice, .affiliate-disclosure { 
    font-size: 0.8rem !important; 
    padding: 8px 10px !important; 
  }

  /* ── TOC Compact ── */
  .toc { padding: 10px 12px !important; margin-bottom: 1rem !important; }
  .toc li { font-size: 0.85rem !important; }

  /* ── Featured Bar Compact ── */
  .featured-bar { padding: 8px 10px !important; font-size: 0.85rem !important; }

  /* ── Verdict Box Compact ── */
  .verdict-box { padding: 12px !important; }

  /* ── Brand Section Compact ── */
  .brand-section { padding: 12px !important; }
  .brand-card { padding: 10px !important; }
  .brand-card p { font-size: 0.82rem !important; }
}

/* Desktop: show vehicle finder inline */
@media (min-width: 769px) {
  .vehicle-finder {
    display: block !important;
  }
  .vehicle-finder-form {
    flex-wrap: nowrap;
  }
  .sticky-jump-nav {
    display: flex !important;
  }
}