/* ============================================================
   Reset Beverages — Shared Responsive Overrides
   Loaded after each page's inline <style>. Targets common
   classes (nav, cart, footer, forms) plus product page
   patterns (.cc-*, .ms-*, .gs-*, .bb-*).
   ============================================================ */

/* Universal: prevent horizontal overflow */
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* ------------------------------------------------------------
   Index page — additional fixes layered on top of inline rules
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .hero { padding: 28px 16px 50px !important; }
  .hero-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .hero-stats { grid-template-columns: 1fr 1fr 1fr !important; }
  .range-line { grid-template-columns: 1fr !important; gap: 32px !important; }
  .range-line.reverse { direction: ltr !important; }
  .range-num { width: 56px !important; height: 56px !important; font-size: 20px !important; top: -14px !important; right: -14px !important; }
  .partner-grid { grid-template-columns: 1fr !important; }
  .field-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .field-row .field { margin-bottom: 14px; }
  .contact-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .ing-grid { grid-template-columns: 1fr 1fr !important; }
  .family-grid { grid-template-columns: 1fr !important; }
  .cities-grid { grid-template-columns: 1fr 1fr !important; }
  .weddings-grid { grid-template-columns: 1fr !important; }
  .mini-grid { grid-template-columns: 1fr !important; }
  .meetbb-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .meetbb { padding: 60px 18px !important; }
  .bb-hero-peek, .bb-speech { display: none !important; }
}

@media (max-width: 600px) {
  /* All section padding consistent */
  .hero, .marquee, .manifesto, .range, .ing-section,
  .family-section, .partner, .faq-section, .contact,
  .mini-section, .weddings-section, .cities-section,
  .newsletter-section, .meetbb {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Range card at small phones */
  .range-num { width: 48px !important; height: 48px !important; font-size: 18px !important; }

  /* Partner specs */
  .partner-specs li { grid-template-columns: 1fr !important; gap: 4px; }
  .partner-col { padding: 32px 22px !important; }

  /* Hero CTA buttons stack better */
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta-row .btn { width: 100%; text-align: center; }

  /* Cart item layout */
  .cart-item { grid-template-columns: 56px 1fr auto !important; gap: 10px; padding: 14px 16px !important; }
  .cart-item-img { width: 56px !important; height: 56px !important; font-size: 26px !important; }
  .cart-qty button { width: 26px; height: 26px; font-size: 14px; }
  .cart-qty .num { min-width: 18px; }

  /* Newsletter form */
  .newsletter-form { flex-direction: column !important; gap: 8px !important; }
  .newsletter-form input { width: 100%; }
  .newsletter-form button { width: 100%; padding: 12px !important; }

  /* Contact info card layout */
  .contact-info-card .row { grid-template-columns: 1fr !important; gap: 4px; }

  /* Marquee: smaller text + slower scroll for legibility */
  .marquee { padding: 14px 0 !important; }
  .marquee-text { font-size: 22px !important; }

  /* Ticker tighter */
  .ticker { font-size: 9px !important; padding: 5px 0 !important; }
  .ticker-track { gap: 30px !important; }

  /* Section headings — tighter top-spacing */
  .sec-h2 { margin-bottom: 14px !important; }
}

@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px; }
  .hero-stat { padding: 10px 6px !important; }
  .hero-stat strong { font-size: 18px !important; }
  .hero-stat span { font-size: 8px !important; }
  .nav-cta { display: none !important; }
  .ing-grid { grid-template-columns: 1fr !important; }
  .cities-grid { grid-template-columns: 1fr !important; }
  .range-num { width: 40px !important; height: 40px !important; font-size: 14px !important; top: -10px !important; right: -10px !important; }
  .meetbb-facts { gap: 6px !important; }
  .meetbb-fact { padding: 8px 6px !important; }
}

@media (max-width: 380px) {
  .hero h1.hero-headline { font-size: 26px !important; }
  .hero-tag { font-size: 9px !important; padding: 6px 12px; }
  .hero-sub { font-size: 14px !important; }
  .meetbb-facts { grid-template-columns: 1fr !important; gap: 8px !important; }
  .meetbb-fact { padding: 12px !important; }
  .range-content h3 { font-size: 28px !important; }
  .partner-col h3 { font-size: 22px !important; }
}

/* ------------------------------------------------------------
   Tablets & large phones (≤ 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .cc-hero, .ms-hero, .gs-hero { padding: 30px 18px 50px !important; }
  .cc-hero-inner, .ms-hero-inner, .gs-hero-inner { grid-template-columns: 1fr !important; gap: 36px; }
  .cc-hero-photo-wrap, .ms-hero-photo-wrap, .gs-hero-photo-wrap { min-height: 380px !important; }
  .cc-hero-circle, .ms-hero-circle, .gs-hero-circle { width: 320px !important; height: 320px !important; }
  .cc-hero-photo, .ms-hero-photo, .gs-hero-photo { max-height: 380px !important; }
  .cc-hero-stats, .ms-hero-stats, .gs-hero-stats { grid-template-columns: 1fr 1fr !important; }

  .cc-why-inner, .ms-why-inner, .gs-why-inner { grid-template-columns: 1fr !important; gap: 36px; }
  .cc-flavor-grid, .ms-flavor-grid, .gs-flavor-grid { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .cc-source-grid, .ms-source-grid, .gs-source-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .cc-method-vs, .ms-method-vs, .gs-method-vs { grid-template-columns: 1fr !important; gap: 16px; }
  .cc-when-grid, .ms-when-grid, .gs-when-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .cc-spec-row, .ms-spec-row, .gs-spec-row { grid-template-columns: 1fr !important; gap: 4px; padding: 16px 20px !important; }

  .bb-cameo { padding: 60px 20px !important; }
  .bb-cameo-inner { grid-template-columns: 1fr !important; gap: 28px; }
  .bb-cameo-art-bg { width: 260px !important; height: 260px !important; }
  .bb-cameo-art img { width: 100% !important; max-width: 280px; }
}

/* ------------------------------------------------------------
   Small phones (≤ 600px)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* Section padding — universal */
  .cc-hero, .cc-why, .cc-flavors, .cc-source, .cc-method, .cc-when, .cc-specs, .cc-cta,
  .ms-hero, .ms-why, .ms-flavors, .ms-source, .ms-method, .ms-when, .ms-specs, .ms-cta,
  .gs-hero, .gs-why, .gs-flavors, .gs-source, .gs-method, .gs-when, .gs-specs, .gs-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .cc-hero, .ms-hero, .gs-hero { padding-top: 30px !important; padding-bottom: 40px !important; }

  /* Headings */
  .cc-hero h1, .ms-hero h1, .gs-hero h1 { font-size: 36px !important; line-height: 1; }
  .cc-why h2, .ms-why h2, .gs-why h2,
  .cc-flavors h2, .ms-flavors h2, .gs-flavors h2,
  .cc-source h2, .ms-source h2, .gs-source h2,
  .cc-method h2, .ms-method h2, .gs-method h2,
  .cc-when h2, .ms-when h2, .gs-when h2,
  .cc-specs h2, .ms-specs h2, .gs-specs h2,
  .cc-cta h2, .ms-cta h2, .gs-cta h2,
  .bb-cameo h2 { font-size: 30px !important; line-height: 1.05; }

  /* Hero photo wrapper */
  .cc-hero-photo-wrap, .ms-hero-photo-wrap, .gs-hero-photo-wrap { min-height: 300px !important; }
  .cc-hero-circle, .ms-hero-circle, .gs-hero-circle { width: 240px !important; height: 240px !important; }
  .cc-hero-photo, .ms-hero-photo, .gs-hero-photo { max-height: 300px !important; }
  .cc-hero-stats, .ms-hero-stats, .gs-hero-stats { grid-template-columns: 1fr 1fr !important; }
  .cc-hero-sticker, .ms-hero-sticker, .gs-hero-sticker { font-size: 8px !important; padding: 6px 8px !important; }
  .cc-hero-cta-row, .ms-hero-cta-row, .gs-hero-cta-row { gap: 10px; }
  .cc-hero-cta-row .btn, .ms-hero-cta-row .btn, .gs-hero-cta-row .btn { padding: 12px 16px; font-size: 10px; }

  /* Flavor / source / when card grids → single column */
  .cc-flavor-grid, .ms-flavor-grid, .gs-flavor-grid,
  .cc-source-grid, .ms-source-grid, .gs-source-grid,
  .cc-when-grid, .ms-when-grid, .gs-when-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .cc-flavor-card, .ms-flavor-card, .gs-flavor-card,
  .cc-source-card, .ms-source-card, .gs-source-card,
  .cc-when-card, .ms-when-card, .gs-when-card { padding: 24px 20px !important; }

  /* Method comparison */
  .cc-method-card, .ms-method-card, .gs-method-card { padding: 24px 20px !important; }

  /* Specs table */
  .cc-specs-table, .ms-specs-table, .gs-specs-table { box-shadow: 5px 5px 0 var(--ink) !important; }
  .cc-spec-label, .ms-spec-label, .gs-spec-label { font-size: 9px !important; }
  .cc-spec-value, .ms-spec-value, .gs-spec-value { font-size: 15px !important; }

  /* Tasting bars */
  .cc-tasting-row, .ms-tasting-row, .gs-tasting-row { grid-template-columns: 80px 1fr !important; }
  .cc-tasting-label, .ms-tasting-label, .gs-tasting-label { font-size: 8px !important; }
  .cc-tasting-dot, .ms-tasting-dot, .gs-tasting-dot { width: 7px !important; height: 7px !important; }

  /* CTA buttons */
  .cc-cta-buttons, .ms-cta-buttons, .gs-cta-buttons { gap: 10px; flex-direction: column; }
  .cc-cta-buttons .btn, .ms-cta-buttons .btn, .gs-cta-buttons .btn { width: 100%; }

  /* Quote blocks */
  .cc-quote, .ms-quote, .gs-quote { font-size: 16px !important; padding: 14px 16px !important; }

  /* Banta Boy cameo on product pages */
  .bb-cameo { padding: 50px 16px !important; }
  .bb-cameo-inner { gap: 24px; }
  .bb-cameo-art-bg { width: 220px !important; height: 220px !important; }
  .bb-cameo-art img { max-width: 240px; }
  .bb-cameo h2 { font-size: 30px !important; }
  .bb-cameo p { font-size: 15px !important; }
  .bb-cameo-quote { font-size: 18px !important; padding: 6px 0 6px 12px !important; }
  .bb-cameo-tag { font-size: 10px !important; }

  /* Cart drawer (shared with index) */
  .cart-fab { width: 56px !important; height: 56px !important; bottom: 16px !important; right: 16px !important; font-size: 20px; }
  .cart-fab .cart-count { width: 24px; height: 24px; font-size: 10px; top: -6px; right: -6px; }
  .cart-header h2 { font-size: 22px; }
  .cart-foot-note { font-size: 10px; }
  .cart-checkout-btn { padding: 12px !important; font-size: 14px !important; }

  /* Navigation */
  nav.main-nav { padding: 12px 16px !important; }
  .nav-cta { padding: 8px 12px !important; font-size: 9px !important; }

  /* Ticker */
  .ticker { font-size: 10px; padding: 6px 0; }

  /* Footer */
  .foot-logo-text { font-size: 70px !important; letter-spacing: -2px !important; }
  .foot-tag { font-size: 14px !important; }
  .foot-links { font-size: 13px !important; gap: 12px !important; }
  .foot-bottom { font-size: 10px !important; padding: 0 8px !important; }
}

/* ------------------------------------------------------------
   Very small phones (≤ 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .cc-hero h1, .ms-hero h1, .gs-hero h1 { font-size: 32px !important; }
  .cc-hero-stats, .ms-hero-stats, .gs-hero-stats { grid-template-columns: 1fr 1fr; }
  .cc-source-grid, .ms-source-grid, .gs-source-grid,
  .cc-when-grid, .ms-when-grid, .gs-when-grid { grid-template-columns: 1fr !important; }
  .bb-cameo-art-bg { width: 200px !important; height: 200px !important; }
  .bb-cameo-art img { max-width: 220px; }
}

/* ------------------------------------------------------------
   Tiny phones (≤ 380px)
   ------------------------------------------------------------ */
@media (max-width: 380px) {
  .cc-hero h1, .ms-hero h1, .gs-hero h1 { font-size: 28px !important; }
  .cc-why h2, .ms-why h2, .gs-why h2,
  .cc-flavors h2, .ms-flavors h2, .gs-flavors h2,
  .cc-source h2, .ms-source h2, .gs-source h2,
  .cc-method h2, .ms-method h2, .gs-method h2,
  .cc-when h2, .ms-when h2, .gs-when h2,
  .cc-specs h2, .ms-specs h2, .gs-specs h2,
  .cc-cta h2, .ms-cta h2, .gs-cta h2,
  .bb-cameo h2 { font-size: 26px !important; }
  .nav-logo-text { font-size: 18px !important; }
  .nav-cta { font-size: 8px !important; padding: 7px 10px !important; }
  .cc-hero-circle, .ms-hero-circle, .gs-hero-circle { width: 200px !important; height: 200px !important; }
  .cc-hero-photo, .ms-hero-photo, .gs-hero-photo { max-height: 240px !important; }
  .cc-hero-photo-wrap, .ms-hero-photo-wrap, .gs-hero-photo-wrap { min-height: 260px !important; }
  .foot-logo-text { font-size: 56px !important; }
  .bb-cameo h2 { font-size: 24px !important; }
}