@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --color-accent: #e5090f;
  --color-accent-2: #77e33f;
  --color-accent-3: #50b8e0;
  --color-accent-warm: #ec8116;
  --color-accent-soft: #f2e3e3;
  --color-accent-2-soft: #e8f0e4;
  --color-accent-3-soft: #e4edf0;
  --color-accent-warm-soft: #f1eae3;

  --color-bg: #faf8f6;
  --color-bg-2: #f1ece7;
  --color-bg-white: #ffffff;
  --color-bg-rgb: 250, 248, 246;
  --color-bg-white-rgb: 255, 255, 255;
  --color-surface: rgba(20,16,14,0.02);
  --color-surface-hover: rgba(20,16,14,0.05);

  --color-text: #17110f;
  --color-text-secondary: #5a524d;
  --color-text-muted: #a29a93;

  --color-border: #e4ddd6;
  --color-border-light: #efeae4;

  --color-star: #ec8116;
  --color-badge: #e5090f;
  --color-success: #3f9e1f;
  --color-info: #50b8e0;

  --color-footer-bg: #17110f;
  --color-footer-text: #f4efe9;
  --color-footer-muted: #9a9089;
  --color-footer-link: #cfc6bd;
  --color-footer-border: rgba(255,255,255,0.1);
  --color-footer-social-bg: rgba(255,255,255,0.07);
  --color-footer-social-border: rgba(255,255,255,0.12);

  --font-heading: 'Spectral', 'Georgia', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Flat: no shadows, only color blocks */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
}

/* ── Flat design: strip residual shadows, lean on borders & color ────────── */
.product-card,
.category-card,
.guide-card,
.testimonial-card,
.top-pick-item,
.brand-card,
.banner-link,
.price-history-section,
.user-reviews-section,
.pros-cons-widget,
.delivery-widget,
.social-proof-popup,
.faq-item {
  box-shadow: none !important;
}

/* ── Bold typographic hierarchy ──────────────────────────────────────────── */
.hero-title,
.section-title,
.product-title,
.page-title {
  font-weight: 800;
  letter-spacing: -1.2px;
}
.hero-title { line-height: 1.05; }
.section-title { text-transform: none; }

.hero-badge {
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  letter-spacing: 2px;
}

/* ── Hero: centered stack + tactile editorial decoration ─────────────────── */
.hero {
  text-align: center;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}
.hero-content { text-align: center; }
.hero-actions { justify-content: center; }
.hero-subtitle {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
/* Decorative full-bleed color-block wash behind centered stack */
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  width: 120%;
  height: 100%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(229,9,15,0.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg-2) 0%, transparent 100%);
  pointer-events: none;
}

/* ── Underline-on-hover links ────────────────────────────────────────────── */
.nav-link,
.footer-col a,
.breadcrumb a,
.mobile-nav-link {
  position: relative;
  border-radius: 0;
}
.nav-link { border-radius: 0; }
.nav-link:hover,
.footer-col a:hover,
.breadcrumb a:hover,
.card-title a:hover,
.mobile-nav-link:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.nav-link.active {
  background: transparent;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* ── Flat buttons: solid color blocks, no shadow ─────────────────────────── */
.btn-primary,
.btn-cta,
.cookie-banner button {
  background: var(--color-accent);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover,
.btn-cta:hover {
  transform: none;
  box-shadow: none;
  filter: none;
  background: #b91c1c;
}
.btn-outline {
  border: 2px solid var(--color-text);
  color: var(--color-text);
  background: transparent;
}
.btn-outline:hover {
  background: var(--color-text);
  color: var(--color-bg-white);
  border-color: var(--color-text);
}

/* ── Product cards: flat, border-only, color-block hover ─────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.product-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-accent);
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-body .btn-cta { margin-top: auto; }
.card-brand { color: var(--color-accent); }
.card-badge { border-radius: var(--radius-sm); }

/* ── Category cards: flat with accent-2 color block on hover ─────────────── */
.category-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.category-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-accent-2);
  background: var(--color-accent-2-soft);
}

/* ── Section color anchors keep the multi-accent variety ─────────────────── */
.faq-item[open] { border-color: var(--color-accent-2); }
.faq-item[open] .faq-question::after { color: var(--color-accent-2); }
.testimonials-section { background: var(--color-accent-3-soft); }
.testimonial-avatar { background: var(--color-accent-3-soft); color: var(--color-accent-3); }
.guide-number { background: var(--color-accent-warm); }
.top-pick-rank { color: var(--color-accent-warm); }
.newsletter-form button { background: var(--color-accent-2); }
.newsletter-form button:hover { background: #5cbf2c; transform: none; }

/* ── Stats bar: flat two-tone accent block ───────────────────────────────── */
.stats-section {
  background: var(--color-accent);
}

/* ── New widgets: flat editorial treatment ───────────────────────────────── */
.price-history-section,
.user-reviews-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.price-history-section { border-top: 3px solid var(--color-accent-3); }
.user-reviews-section { border-top: 3px solid var(--color-accent); }
.chart-bar {
  background: linear-gradient(180deg, var(--color-accent-3-soft) 0%, var(--color-accent-3) 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.chart-bar-current {
  background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-accent) 100%);
  box-shadow: none;
}
.chart-note { background: var(--color-accent-3-soft); color: var(--color-accent-3); }
.review-avatar { background: var(--color-accent); }
.review-bar-fill { background: var(--color-accent-warm); }

.pros-cons-widget {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-2);
  border-radius: var(--radius-md);
}
.delivery-widget {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-warm);
  border-radius: var(--radius-md);
}
.delivery-item svg { color: var(--color-accent-warm); }
.social-proof-popup {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: none;
}

/* ── Footer social hover: accent color block ─────────────────────────────── */
.social-links a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}