/* ============================================================
   ICE CREAM MELTZ — RESPONSIVE STYLESHEET
   responsive.css | Mobile-First Media Queries
   ============================================================ */

/* -------- XL: 1400px -------- */
@media (max-width: 1400px) {
  :root { --section-py: 90px; }

  .hero-title { font-size: clamp(3rem, 6vw, 5rem); }
  .hero-visual-inner { width: 380px; }
  .icecream-wrapper { width: 340px; height: 430px; }
}

/* -------- LG: 1200px -------- */
@media (max-width: 1200px) {
  :root { --section-py: 80px; }

  .hero-title { font-size: clamp(2.8rem, 5.5vw, 4.5rem); }

  .hero-card-top { right: -10px; }
  .hero-card-bottom { left: -10px; }

  .quality-badge-card { right: 0; }
  .quality-stats-card { left: 0; }

  .builder-preview { width: 100%; max-width: 380px; }

  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
  }

  .insta-wide { grid-column: span 2; }
}

/* -------- MD: 992px -------- */
@media (max-width: 992px) {
  :root {
    --section-py: 70px;
    --section-py-sm: 50px;
  }

  /* Navbar */
  #navMenu {
    background: rgba(14, 5, 24, 0.97);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-top: 12px;
    border: 1px solid rgba(255,79,154,0.15);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  }

  #mainNavbar .nav-link { padding: 10px 14px !important; }

  .nav-actions {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
  }

  .btn-nav-cta { width: 100%; text-align: center; justify-content: center; }

  /* Hero */
  .hero-content { padding-top: 80px; text-align: center; }
  .hero-title { font-size: clamp(2.5rem, 6vw, 4rem); }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-badge { margin-left: auto; margin-right: auto; display: table; }

  .hero-visual {
    padding-top: 40px;
    padding-bottom: 60px;
    justify-content: center;
  }

  .hero-visual-inner { width: 340px; }
  .icecream-wrapper { width: 300px; height: 380px; }

  .hero-card-top { top: 20px; right: 0; }
  .hero-card-bottom { bottom: 80px; left: 0; }

  /* Float items */
  .float-cherry, .float-cookie, .float-choco { display: none; }

  /* Builder section */
  .builder-steps { margin-bottom: 48px; }

  /* Collections */
  .collection-large { height: 420px; }
  .collection-sm { height: 200px; }

  /* Quality */
  .quality-visual { margin-bottom: 40px; }
  .quality-img { max-width: 380px; height: 440px; }
  .quality-badge-card { top: 20px; right: 10px; }
  .quality-stats-card { bottom: 20px; left: 10px; }

  /* Instagram */
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .insta-tall { grid-row: span 2; }
  .insta-wide { grid-column: span 2; }

  /* Footer */
  .footer-top { padding: 60px 0 40px; }
}

/* -------- SM: 768px -------- */
@media (max-width: 768px) {
  :root {
    --section-py: 60px;
    --section-py-sm: 44px;
  }

  /* General */
  .section-title { font-size: 1.9rem; }
  .section-header { margin-bottom: 40px; }

  /* Hero */
  .hero-title { font-size: 2.8rem; }

  .hero-stats { gap: 20px; }
  .stat-number { font-size: 1.7rem; }

  .scroll-indicator { display: none; }

  /* Marquee */
  .marquee-content span { font-size: 0.8rem; }

  /* Flavour */
  .flavour-img-wrap { height: 210px; }

  /* Builder */
  .builder-steps { gap: 12px; }
  .builder-step { padding: 12px 16px; }

  /* Builder visual */
  .builder-img { height: 400px; }
  .builder-price-tag { right: 10px; bottom: 20px; }

  .floating-topping { display: none; }

  /* Collections */
  .collection-large { height: 360px; }

  /* Quality */
  .quality-img { max-width: 100%; height: 380px; }
  .quality-badge-card { right: 10px; }
  .quality-stats-card { left: 10px; }

  /* Why */
  .why-card { padding: 28px 22px; }
  .why-icon { font-size: 2.5rem; }

  /* Testimonials */
  .testimonial-card { padding: 28px 24px; }

  /* Instagram */
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
    gap: 10px;
  }

  .insta-tall { grid-row: span 2; }
  .insta-wide { grid-column: span 2; }

  /* Franchise */
  .fcta-stats { gap: 28px; }
  .fcta-stat-num { font-size: 2rem; }
  .fcta-title { font-size: 2rem; }

  /* Footer */
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }

  /* Cart sidebar */
  .cart-sidebar { width: 100%; right: -100%; }

  /* Page hero */
  .page-hero { padding: 130px 0 60px; }
  .page-hero h1 { font-size: 2.5rem; }

  /* Back to top */
  .back-to-top { bottom: 20px; right: 20px; }
  .toast-notification { right: 16px; bottom: 70px; }
}

/* -------- XS: 576px -------- */
@media (max-width: 576px) {
  :root {
    --section-py: 50px;
    --section-py-sm: 36px;
  }

  /* Navbar */
  .logo-tag { font-size: 1.2rem; }
  .logo-name { display: none; }

  /* Hero */
  .hero-title { font-size: 2.3rem; }
  .hero-subtitle { font-size: 0.95rem; }

  .hero-cta { flex-direction: column; align-items: center; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }

  .hero-stats { gap: 16px; }
  .stat-divider { height: 30px; }

  .hero-visual-inner { width: 280px; }
  .icecream-wrapper { width: 260px; height: 320px; }
  .hero-card { min-width: 160px; }
  .hero-card-top { right: -10px; top: 10px; padding: 10px 14px; }
  .hero-card-bottom { left: -10px; bottom: 50px; padding: 10px 14px; }

  /* Section tag */
  .section-tag { font-size: 0.75rem; padding: 5px 14px; }

  /* Section titles */
  .section-title { font-size: 1.75rem; }
  .section-subtitle { font-size: 0.9rem; }

  /* Flavour cards */
  .flavour-img-wrap { height: 190px; }

  /* Collections */
  .collection-large { height: 300px; }
  .collection-sm { height: 180px; }
  .collection-overlay h3 { font-size: 1.1rem; }

  /* Quality */
  .quality-badge-card { display: none; }

  /* Builder */
  .builder-steps { display: none; }

  /* Instagram */
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 8px;
  }

  .insta-tall { grid-row: span 2; }
  .insta-wide { grid-column: 1 / -1; }

  /* Franchise CTA */
  .fcta-stats { flex-direction: column; gap: 16px; }

  /* Footer */
  .social-btn { width: 38px; height: 38px; }
  .footer-float-1, .footer-float-2, .footer-float-3 { display: none; }

  /* Buttons */
  .btn-outline-brand { width: 100%; justify-content: center; }

  /* Page hero */
  .page-hero h1 { font-size: 2rem; }
}

/* -------- XXS: 480px -------- */
@media (max-width: 480px) {
  :root { --section-py: 44px; }

  .hero-title { font-size: 2rem; }

  .marquee-belt { padding: 10px 0; }

  .stat-number { font-size: 1.5rem; }
  .stat-plus { font-size: 1.1rem; }

  .btn-hero-primary, .btn-hero-secondary {
    font-size: 0.9rem;
    padding: 12px 24px;
  }

  .why-card { padding: 24px 18px; }

  .testimonial-card { padding: 24px 20px; }
  .t-text { font-size: 0.88rem; }

  .fcta-title { font-size: 1.8rem; }

  /* Form */
  .newsletter-input { font-size: 0.82rem; }
}

/* -------- PRINT -------- */
@media print {
  #preloader, #particleCanvas, .mouse-glow,
  .cart-sidebar, .cart-overlay, .back-to-top,
  .toast-notification, .float-item,
  .hero-blob, .hero-glow { display: none !important; }

  .hero-section { min-height: auto; padding: 80px 0 40px; }
  .hero-content { padding-top: 0; }
  .hero-visual { display: none; }

  body { background: #fff; color: #000; }
  .hero-title, .section-title { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .text-gradient { -webkit-text-fill-color: var(--pink) !important; }
}

/* -------- HIGH DPI / RETINA -------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-icon { box-shadow: 0 4px 15px rgba(255,79,154,0.5); }
}

/* -------- TOUCH DEVICES -------- */
@media (hover: none) {
  .flavour-overlay { display: none; }
  .collection-overlay { opacity: 1; }
  .insta-overlay { display: none; }
  .hover-lift:hover { transform: none; box-shadow: none; }
  .mouse-glow { display: none; }
}

/* -------- LANDSCAPE MOBILE -------- */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section { min-height: auto; }
  .hero-content { padding-top: 100px; padding-bottom: 40px; }
  .hero-visual { padding-top: 20px; padding-bottom: 40px; }
  .icecream-wrapper { height: 280px; }
}

/* -------- DARK MODE PREFERENCE -------- */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #120820;
    --cream-mid: #1A0B2E;
    --cream-dark: #231040;
    --vanilla: #1A0B2E;
    --white: #1E0D35;
  }
}