/* ===== RESPONSIVE DESIGN ===== */

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

    .benefits-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-image-container {
        height: 124px;
    }
}

@media (min-width: 768px) {
    body {
        font-size: 13px;
    }

    .container {
        padding: 0 20px;
    }

    .header-content {
        height: 54px;
    }

    .search-section {
        top: 54px;
    }

    .categories-section {
        top: 108px;
    }

    .hero-banner {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        min-height: 132px;
        align-items: center;
    }

    .hero-content {
        padding: 20px 20px;
    }

    .hero-metrics {
        padding: 18px 20px 18px 0;
    }

    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 11px;
    }

    .product-image-container {
        height: 128px;
    }

    .filters-panel,
    .favorites-panel {
        max-width: 350px;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
        align-items: start;
    }
}

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

    .products-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .product-image-container {
        height: 132px;
    }
}

@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .logo-text h1 {
        font-size: 12px;
    }

    .logo-text span {
        font-size: 8px;
    }

    .header-actions {
        gap: 6px;
    }

    .header-btn {
        width: 32px;
        height: 32px;
    }

    .search-section {
        top: 52px;
    }

    .categories-section {
        top: 106px;
    }

    .hero-title {
        font-size: 19px;
    }

    .hero-subtitle {
        font-size: 9px;
    }

    .hero-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-metric {
        padding: 8px 6px;
    }

    .hero-metric strong {
        font-size: 11px;
    }

    .benefit-card {
        padding: 8px;
        gap: 8px;
    }

    .benefit-icon {
        width: 28px;
        height: 28px;
    }

    .products-grid {
        gap: 8px;
    }

    .product-image-container {
        height: 104px;
        padding: 12px;
    }

    .product-info {
        padding: 9px;
    }

    .product-name {
        font-size: 11px;
        min-height: 31px;
    }

    .current-price {
        font-size: 13px;
    }

    .modal-product-image {
        height: 200px;
    }
}

@media (max-width: 390px) {
    .container {
        padding: 0 8px;
    }

    .products-grid {
        gap: 7px;
    }

    .product-image-container {
        height: 96px;
    }

    .product-brand,
    .product-meta-row,
    .savings {
        font-size: 8px;
    }

    .discount-badge {
        font-size: 9px;
        padding: 3px 6px;
    }
}

@media (any-hover: none) {
    .product-card:hover,
    .benefit-card:hover {
        transform: none;
    }

    .header-btn,
    .category-chip,
    .discount-filter,
    .load-more-btn,
    .retry-btn {
        min-height: 38px;
    }
}

@media print {
    .header,
    .search-section,
    .hero-section,
    .benefits-section,
    .categories-section,
    .filters-panel,
    .favorites-panel,
    .product-modal,
    .footer-advanced {
        display: none !important;
    }

    body {
        background: #fff;
        color: #111;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .product-card {
        break-inside: avoid;
        color: #111;
        background: #fff;
    }
}