/* ========================================
   MOBILE RESPONSIVE FIXES
   Load this AFTER main.css to override
   ======================================== */

/* CRITICAL: Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Mobile: 0-767px */
@media (max-width: 767px) {

    /* Product Detail Page - Force single column */
    .product-page {
        display: block !important;
        width: 100% !important;
    }

    .product-gallery,
    .product-info {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 !important;
    }

    /* Gallery - Horizontal thumbnails */
    .gallery-container {
        flex-direction: column-reverse !important;
    }

    .product-gallery-thumbs-vertical {
        flex-direction: row !important;
        overflow-x: auto !important;
    }

    .product-thumbnail-button {
        min-width: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }

    /* Product grids - 2 columns */
    .product-grid,
    .four-col-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Hide desktop navigation */
    .main-nav {
        display: none !important;
    }

    .auth-buttons {
        display: none !important;
    }

    /* Footer - Stack columns */
    .footer-links-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-trust-badges {
        flex-direction: column !important;
    }

    /* Section spacing */
    .section,
    .page-section {
        padding: 1.5rem 0 !important;
    }
}

/* Tablet: 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {

    .product-grid,
    .four-col-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
    .product-page {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }

    .product-grid,
    .four-col-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}