/* ==========================================================================
   Responsive Styles — Tablet & Mobile
   Breakpoints: 1024 / 768 / 560 / 420
   ========================================================================== */

/* ---------- Large tablet / small desktop ---------- */
@media (max-width: 1100px) {
    :root { --max-width: 960px; }

    .nav-list > li > a {
        padding: 8px 10px;
        font-size: 12px;
    }
    .lang-switch-wrap { margin-left: 6px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
    .header-inner { padding: 12px 20px; }
    .logo img { height: 46px; }

    /* Mobile nav */
    .nav-toggle { display: block; }
    .main-nav {
        position: fixed;
        top: 72px;
        right: 0;
        width: 320px;
        max-width: 85vw;
        height: calc(100vh - 72px);
        background: var(--cream);
        box-shadow: -10px 0 40px rgba(0,0,0,.1);
        padding: 30px 24px;
        transform: translateX(110%);
        transition: transform var(--med) var(--ease);
        overflow-y: auto;
    }
    .main-nav.open { transform: translateX(0); }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav-list > li {
        border-bottom: 1px solid rgba(35,31,28,.08);
    }
    .nav-list > li > a {
        display: block;
        padding: 16px 4px;
        font-size: 14px;
    }
    .nav-list > li > a::after { display: none; }

    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        padding: 0 0 10px 16px;
        border-radius: 0;
        background: transparent;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--med) var(--ease);
    }
    .has-submenu.open > .submenu { max-height: 400px; }
    .submenu li a {
        padding: 8px 0;
        font-size: 12px;
    }
    .caret {
        float: right;
        transition: transform var(--fast) var(--ease);
    }
    .has-submenu.open .caret { transform: rotate(180deg); }

    .lang-switch-wrap { margin: 16px 0 0; }
    .lang-switch { display: inline-flex; }

    /* Hero */
    .hero {
        padding: 120px 0 60px;
        min-height: auto;
    }
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    .hero-logo-mark { margin: 8px auto 0; }
    .hero-image { max-width: 560px; margin: 0 auto; }
    .hero-scroll-hint { display: none; }

    /* Ingredients / Benefits / Flavors */
    .ingredients-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .benefits-grid .benefits-image { order: -1; }

    .benefit-list { grid-template-columns: 1fr 1fr; }

    .flavor-block,
    .flavor-block.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .flavor-block.reverse .flavor-media { order: 0; }

    /* Kids */
    .kids-media-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .kids-media-grid .kids-image { grid-column: 1 / -1; order: -1; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .container { padding: 0 18px; }

    .site-header { border-bottom: 1px solid rgba(35,31,28,.06); }
    .logo img { height: 40px; }

    /* Hero */
    .hero { padding: 100px 0 50px; }
    .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
    .hero-subtitle { font-size: 1rem; }
    .hero-logo-mark { max-width: 140px; }

    /* Intro */
    .intro-block { padding: 60px 0 30px; }
    .intro-block::before { left: calc(50% - 70px); }
    .intro-block::after  { left: calc(50% + 10px); width: 50px; }

    .ingredients-section,
    .benefits-section,
    .flavors-section,
    .kids-section {
        padding: 70px 0;
    }

    .flavors-heading { margin-bottom: 50px; }
    .flavor-block { margin-bottom: 70px; }

    .benefit-list { grid-template-columns: 1fr; }

    /* Kids */
    .kids-cta { padding: 28px 22px; }
    .kids-buttons { flex-direction: column; align-items: stretch; }
    .kids-buttons .btn { width: 100%; text-align: center; }

    /* Newsletter */
    .newsletter-section { padding: 60px 0; }
    .captcha-row { flex-direction: column; }
    .captcha-row input,
    .captcha-row .btn { width: 100%; max-width: none; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .footer-brand img { margin: 0 auto 16px; }

    /* Floating buttons */
    .wa-float {
        width: 50px; height: 50px;
        bottom: 20px; right: 20px;
    }
    .wa-float svg { width: 24px; height: 24px; }
    .back-to-top {
        width: 38px; height: 38px;
        bottom: 80px; right: 24px;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 420px) {
    .hero-title { font-size: 2.1rem; }
    .big-heading { font-size: 1.9rem; }
    .section-heading { font-size: 1.5rem; }
    .kids-cta-title { font-size: 1.3rem; }
    .flavor-title { font-size: 1.5rem; }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: auto; padding-top: 90px; }
    .main-nav {
        top: 64px;
        height: calc(100vh - 64px);
    }
}