/* ============================================
   RESPONSIVE DESIGN - MOBILE BREAKPOINTS
   ============================================ */

/* Tablet Landscape & Below (1024px) */
@media (max-width: 1024px) {
    .container {
        max-width: 960px;
    }

    /* Reduce hero font sizes */
    .hero h1 {
        font-size: 2.5rem !important;
    }
}

/* Tablet Portrait (768px) */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    /* Stack new grid utilities */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Stack hero grid specifically */
    .hero .container.grid-2,
    .hero>.container {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    /* Order changes for Hero: Visual first, Content second */
    .hero .hero-visual {
        order: -1;
        margin-bottom: 32px;
    }

    /* Hero content */
    .hero h1 {
        font-size: 2.2rem !important;
    }

    .hero p {
        font-size: 1rem !important;
    }

    /* 2-column product grid default (if grid-3 is not 1fr yet, but let's force 1fr for small tablets/large phones or keep 2 cols for tablet) */
    /* Let's keep grid-3 as 1fr for safe tablet portrait or maybe 2 cols */

    /* Override for specific sections if needed */
    .bestsellers .grid-3,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* Stack USPs to 2 columns */
    .usp-section .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* Product detail page - stack layout */
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    /* Hide desktop nav, show mobile menu */
    .desktop-nav,
    .header-actions {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: block !important;
    }

    /* Adjust section padding */
    section {
        padding: 60px 0 !important;
    }

    /* Timeline adjustments */
    .timeline-item {
        padding-left: 40px !important;
    }

    /* Slideshow responsive fix */
    .slideshow-container {
        height: auto !important;
        aspect-ratio: 1/1 !important;
    }
}

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

    /* Typography */
    h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.2rem !important;
    }

    .hero h1 {
        font-size: 1.8rem !important;
    }

    .section-title {
        font-size: 1.8rem !important;
    }

    /* Single column everywhere */
    .grid-2,
    .grid-3,
    .bestsellers .grid-3,
    .products-grid,
    .usp-section .grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* Buttons full width on mobile */
    .btn-ios {
        width: 100%;
        justify-content: center;
    }

    /* Header actions stack */
    .header-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .header-actions a {
        width: 100%;
        text-align: center;
    }

    /* Product cards */
    .product-card {
        margin-bottom: 16px;
    }

    /* Glass panels - reduce padding */
    .glass-panel {
        padding: 16px !important;
    }

    /* Reduce section spacing */
    section {
        padding: 40px 0 !important;
    }

    /* Footer - stack columns */
    footer .container>div {
        grid-template-columns: 1fr !important;
    }

    /* B2B Grid Override */
    .product-overview-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact page padding */
    .contact-section {
        padding: 60px 0 40px !important;
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-dark);
    cursor: pointer;
    padding: 8px;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--surface-border);
    padding: 20px;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.mobile-nav.active {
    display: block;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    margin-bottom: 16px;
}

.mobile-nav a {
    display: block;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text-dark);
    border-radius: 12px;
    transition: background 0.3s ease;
}

.mobile-nav a:hover,
.mobile-nav a.active {
    background: rgba(74, 222, 128, 0.1);
    color: var(--primary-green);
}

/* ============================================
   TOUCH TARGETS (Minimum 44x44px)
   ============================================ */

@media (max-width: 768px) {
    .btn-ios {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 24px;
    }

    nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Gallery thumbnails */
    .gallery-thumb {
        min-height: 60px;
        min-width: 60px;
    }
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

img {
    max-width: 100%;
    height: auto;
}

/* Product images maintain aspect ratio */
.product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ============================================
   RESPONSIVE TABLES
   ============================================ */

@media (max-width: 768px) {
    .nutrition-table {
        font-size: 0.85rem;
    }

    .nutrition-table th,
    .nutrition-table td {
        padding: 6px 8px !important;
    }

    /* Batch reports table */
    .batch-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

    .glass-nav,
    .header-actions,
    .mobile-menu-toggle,
    footer {
        display: none;
    }

    .glass-panel {
        border: 1px solid #ddd;
        box-shadow: none;
    }
}