/* ============================================
   RAW COCO BURST - 100% MOBILE RESPONSIVE FIXES
   ============================================ */

/* ===== 1. GLOBAL LAYOUT & OVERFLOW FIX ===== */
html, body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* NOTE: overflow-x:hidden on BOTH html and body breaks position:sticky
   (sidebar / table of contents). Body only = fallback, clip = modern fix. */
body {
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html, body {
        overflow-x: clip;
    }
}

*, *::before, *::after {
    box-sizing: inherit;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

@media (min-width: 1200px) {
    .container {
        padding: 0 40px;
    }
}

@media (max-width: 992px) {
    /* 1. Header ko mobile par hamesha visible aur top par rakhein */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        padding: 10px 0 !important;
        z-index: 1250 !important;
    }

    .site-header .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
        gap: 10px !important;
    }

    .logo img {
        height: 36px !important;
        max-height: 36px !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .header-quote-btn {
        display: none !important;
    }

    .mobile-toggle {
        display: block !important;
        background: none;
        border: none;
        font-size: 22px;
        cursor: pointer;
        padding: 4px;
        color: #1B2A1F !important;
    }

    /* 2. Mobile Drawer Menu (Side Slide Panel) */
    .main-navigation {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 300px !important;
        height: 100vh !important;
        background: #ffffff !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: right 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        z-index: 1300 !important;
        overflow-y: auto !important;
    }

    .main-navigation.active {
        right: 0 !important;
    }

    /* 3. Mobile Nav Header Inside Drawer (Logo + Close Button) */
    .mobile-nav-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 18px 20px !important;
        border-bottom: 1px solid #edf2ed !important;
        width: 100% !important;
        background: #ffffff !important;
        box-sizing: border-box;
    }

    .mobile-menu-logo {
        height: 34px !important;
        width: auto !important;
        display: block !important;
    }

    .mobile-close {
        background: #f1f5f1 !important;
        border: none !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        font-size: 16px !important;
        color: #1B2A1F !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-navigation > ul {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 10px 0 !important;
    }

    .main-navigation > ul > li {
        width: 100% !important;
        border-bottom: 1px solid #f4f7f4 !important;
    }

    .main-navigation > ul > li > a {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        color: #1B2A1F !important;
        justify-content: space-between !important;
        box-sizing: border-box;
    }

    .sub-menu-dropdown {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        padding: 0 20px 14px !important;
        display: none;
        background: #f9fbf9 !important;
    }

    .has-dropdown.open-mobile-sub .sub-menu-dropdown {
        display: block !important;
    }

    /* 4. Search Box Alignment on Mobile */
    .search-dropdown-box {
        position: absolute !important;
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }
}

/* ===== 3. SECTION SPACING & TYPOGRAPHY ===== */
@media (max-width: 991px) {
    section {
        padding: 60px 0 !important;
    }

    .about-grid,
    .product-detail-grid,
    .contact-grid,
    .quote-grid,
    .stock-grid,
    .story-layout-grid,
    .calc-container-box,
    .rfq-main-wrapper,
    .distributor-hero-grid,
    .territory-checker-box,
    .form-wrapper-box,
    .error-content-grid,
    .privacy-layout-grid,
    .terms-layout-grid,
    .quote-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .products-grid,
    .blog-grid,
    .packaging-cards-grid,
    .formats-matrix-grid,
    .flavours-grid-layout,
    .mixology-grid,
    .ws-tiers-grid,
    .dist-benefits-grid,
    .roadmap-grid,
    .sitemap-columns-grid,
    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px !important;
    }

    h1 { font-size: 32px !important; }
    h2 { font-size: 26px !important; }

    .products-grid,
    .blog-grid,
    .packaging-cards-grid,
    .formats-matrix-grid,
    .flavours-grid-layout,
    .mixology-grid,
    .ws-tiers-grid,
    .dist-benefits-grid,
    .roadmap-grid,
    .sitemap-columns-grid,
    .related-articles-grid,
    .usps-grid,
    .routes-pill-grid,
    .error-products-grid,
    .buyer-types-grid,
    .confirmed-formats-grid,
    .process-steps-grid,
    .documents-matrix-grid,
    .channels-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .hero-section-3d {
        min-height: auto !important;
        padding: 120px 0 50px !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 30px;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-can-img {
        max-height: 320px !important;
    }

    .about-content .stats {
        justify-content: space-around;
        gap: 15px;
    }

    .floating-badge {
        display: none !important;
    }

    .footer-widgets .container {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .footer-bottom-flex {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-bottom-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 26px !important; }
    h2 { font-size: 22px !important; }

    .btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    .hero-quick-stats,
    .ws-hero-stats,
    .dist-quick-stats,
    .quote-trust-strip {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
        text-align: center;
    }

    .q-stat-divider,
    .ws-stat-div,
    .dq-sep,
    .qt-sep {
        display: none !important;
    }
}