/* ==============================================
   ERIC'S CRISPY CONFECTIONARIES
   Responsive Stylesheet
   ============================================== */

/* ===================================
   TABLET — up to 1024px
=================================== */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero h1 em { display: inline; }
  .hero-desc { margin: 0 auto 36px; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { order: -1; flex-direction: row; gap: 16px; justify-content: center; }
  .hero-product-card { flex: 1; min-width: 0; max-width: 280px; }

  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-img-block { max-width: 500px; margin: 0 auto; }
  .about-badge-card { right: 0; bottom: -16px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .how-grid::before { display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand-col { grid-column: 1 / -1; }
}

/* ===================================
   MOBILE LARGE — up to 768px
=================================== */
@media (max-width: 768px) {
  :root { --px: 20px; }

  /* Navbar */
  .nav-links-wrap { display: none; }
  .nav-right { display: none; }
  .hamburger { display: flex; }
  .navbar .nav-container { padding: 0 var(--px); }

  /* Hero */
  .hero { min-height: auto; padding: 48px var(--px) 52px; }
  .hero-visual { flex-direction: column; align-items: center; }
  .hero-product-card { max-width: 100%; width: 100%; }

  /* Products */
  .products-grid { grid-template-columns: 1fr; }
  .products-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .products-tabs::-webkit-scrollbar { display: none; }
  .ptab-btn { flex-shrink: 0; }

  /* About */
  .about-img-block { max-width: 100%; }
  .about-img-main { aspect-ratio: 3/2; }
  .about-badge-card { position: static; margin-top: 16px; max-width: 100%; }
  .about-features { grid-template-columns: 1fr; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 24px 20px; }

  /* How to Order */
  .how-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .how-num { width: 56px; height: 56px; font-size: 22px; }

  /* Contact */
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 24px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }

  /* Section spacing */
  .section-wrap { padding: 60px var(--px); }
  .section-wrap.tight { padding: 40px var(--px); }
  .how-grid { margin-top: 36px; }
  .services-grid { margin-top: 36px; }
}

/* ===================================
   MOBILE SMALL — up to 480px
=================================== */
@media (max-width: 480px) {
  :root { --px: 16px; }

  /* Hero */
  .hero h1 { font-size: 30px; }
  .hero-badge { font-size: 10px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .btn-gold, .btn-ghost { width: 100%; justify-content: center; }
  .hero-stats { gap: 20px; }
  .hero-stat strong { font-size: 24px; }

  /* How to Order */
  .how-grid { grid-template-columns: 1fr; }
  .how-card { text-align: center; }

  /* Brand strip */
  .brand-strip-inner { gap: 20px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .strip-item { flex-shrink: 0; }

  /* Price table */
  .price-table td { padding: 12px 16px; }

  /* Contact */
  .social-links { flex-wrap: wrap; }
  .contact-form-card { padding: 18px; }

  /* Announcement bar */
  .announcement-bar { font-size: 11px; }

  /* Nav logo */
  .nav-logo img { height: 44px; width: 44px; }
  .nav-logo-text .brand { font-size: 14px; }
}

/* ===================================
   EXTRA SMALL — up to 360px
=================================== */
@media (max-width: 360px) {
  :root { --px: 14px; }
  .section-heading { font-size: 24px; }
  .hero h1 { font-size: 26px; }
  .product-price { font-size: 18px; }
  .wa-float { width: 54px; height: 54px; bottom: 18px; right: 18px; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* ===================================
   DESKTOP WIDE — 1280px+
=================================== */
@media (min-width: 1280px) {
  .hero { min-height: 85vh; }
  .hero-product-card img { width: 96px; height: 96px; }
  .hero-prod-info h3 { font-size: 20px; }
}

/* ===================================
   PRINT
=================================== */
@media print {
  .announcement-bar, .navbar, .mobile-nav, .wa-float, footer { display: none; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}

/* ===================================
   TEAM RESPONSIVE
=================================== */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
  .team-photo-wrap { width: 108px; height: 108px; }
  .team-body { padding: 14px 12px 18px; }
  .team-name { font-size: 15px; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .team-photo-wrap { width: 90px; height: 90px; margin-top: 20px; }
  .team-desc { font-size: 11px; }
}
@media (max-width: 360px) {
  .team-grid { grid-template-columns: 1fr; }
}