/* ==========================================================================
   Responsive overrides — keep small here, most rules already inline above.
   Breakpoints: 480 / 768 / 1024 / 1280
   ========================================================================== */

@media (max-width: 1023.98px) {
  .hero { min-height: 0; padding-block: var(--space-12); }
  .hero-form { padding: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767.98px) {
  .section { padding-block: var(--space-12); }
  h1, .h1 { font-size: var(--fs-32); }
  h2, .h2 { font-size: var(--fs-28); }
  .hero__title { font-size: var(--fs-40); }
  .hero__stats { gap: var(--space-6); flex-wrap: wrap; }
  .hero__stats .stat__value { font-size: var(--fs-32); }
  .header-cta { display: none; }
  .cta-strip { padding: var(--space-8); }
  .reviews-tabs { width: 100%; justify-content: center; }
  .review-screenshot img { height: 280px; }
}

@media (max-width: 479.98px) {
  .container { padding-inline: 16px; }
  .btn--lg { width: 100%; }
  .fab-socials { right: var(--space-3); bottom: var(--space-4); }
  .fab-btn { width: 48px; height: 48px; }
}

/* prefers-reduced-motion overrides anywhere transform/opacity is used */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .product-card:hover, .cat-card:hover { transform: none; }
}

/* hide scroll-based decorations on print */
@media print {
  .site-header, .site-footer, .fab-socials, .cookie, .popup { display: none !important; }
  .section, main { padding: 0 !important; }
  body { background: white; color: black; }
}