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

@media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .catalog-layout { grid-template-columns: 200px 1fr; }
}

@media (max-width: 768px) {
    /* --- Header --- */
    .nav { display: none; }
    .burger { display: flex; }
    .header-inner { height: 56px; padding: 0 14px; }
    .header-actions { gap: 8px; }
    .cart-btn { padding: 8px 14px; font-size: 0.8rem; gap: 6px; }
    .cart-btn span[data-i18n] { display: none; }
    .cart-btn svg { width: 20px; height: 20px; }
    .lang-btn { padding: 4px 10px; font-size: 0.7rem; }
    .theme-toggle { padding: 6px; }
    .logo { font-size: 1.2rem; gap: 6px; }
    .logo-icon { width: 22px; height: 16px; }

    /* --- Hero --- */
    .hero { padding: 40px 0 32px; }
    .hero h1 { font-size: 1.75rem; line-height: 1.25; }
    .hero p { font-size: 0.9rem; }
    .hero-badge { font-size: 0.78rem; }
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .hero-buttons .btn { justify-content: center; }

    /* --- Products Grid --- */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* --- Categories --- */
    .categories-grid { grid-template-columns: 1fr; }
    .category-card { padding: 24px 16px; }

    /* --- Catalog sidebar → horizontal chips --- */
    .catalog-layout { grid-template-columns: 1fr; gap: 16px; }
    .sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        align-items: flex-start;
    }
    .filter-group {
        width: 100%;
        margin-bottom: 4px;
    }
    .filter-group h3 {
        font-size: 0.68rem;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--text-muted);
    }
    .filter-option {
        padding: 6px 14px;
        font-size: 0.78rem;
        background: var(--surface);
        border-radius: var(--radius-pill);
        display: inline-flex;
        align-items: center;
        margin: 0 4px 6px 0;
        white-space: nowrap;
    }
    .filter-option.active {
        background: var(--primary);
        color: white;
    }
    .filter-option svg { width: 14px; height: 14px; }

    /* --- Sort bar --- */
    .sort-bar { flex-direction: column; gap: 10px; align-items: flex-start; }

    /* --- Features --- */
    .features-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* --- Product detail --- */
    .product-detail { grid-template-columns: 1fr; gap: 20px; padding: 20px 0 40px; }
    .product-detail-image { min-height: 280px; }

    /* --- Cart --- */
    .cart-page { padding: 0; }
    .cart-page h1 { font-size: 1.5rem; margin-bottom: 16px; }
    .cart-item {
        grid-template-columns: 60px 1fr auto;
        gap: 12px;
        padding: 14px;
        align-items: center;
    }
    .cart-item-image { width: 60px; height: 60px; }
    .cart-item-name { font-size: 0.85rem; }
    .cart-item-price { font-size: 0.9rem; }
    .qty-selector { transform: scale(0.9); }

    /* --- Checkout --- */
    .checkout-layout { grid-template-columns: 1fr; padding: 20px 0 40px; }
    .checkout-sidebar { position: static; }
    .payment-methods { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }

    /* --- Footer --- */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-brand { grid-column: 1 / -1; }

    /* --- Sections --- */
    .section { padding: 40px 0; }
    .section-header h2 { font-size: 1.4rem; }
    .section-header p { font-size: 0.85rem; }

    /* --- Age verify --- */
    .age-box { padding: 28px 20px; }
    .age-buttons { flex-direction: column; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .header-inner { padding: 0 12px; height: 52px; }
    .logo { font-size: 1.1rem; letter-spacing: 0.5px; }
    .logo-icon { width: 20px; height: 14px; }
    .lang-btn { padding: 3px 8px; font-size: 0.65rem; }
    .cart-btn { padding: 7px 12px; }

    .hero h1 { font-size: 1.4rem; }
    .hero p { font-size: 0.85rem; }
    .hero-badge { font-size: 0.72rem; padding: 6px 12px; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card { border-radius: var(--radius-sm); }
    .product-info { padding: 10px; }
    .product-name { font-size: 0.8rem; min-height: auto; }
    .product-name a { font-size: 0.8rem; }
    .price-current { font-size: 0.95rem; }
    .price-old { font-size: 0.72rem; }
    .product-category-tag { font-size: 0.62rem; padding: 2px 8px; }
    .btn-cart { padding: 8px 10px; font-size: 0.75rem; }
    .sale-badge { font-size: 0.62rem; padding: 3px 8px; top: 8px; left: 8px; }

    .features-grid { grid-template-columns: 1fr; }

    .filter-option { padding: 5px 10px; font-size: 0.72rem; }
    .filter-option svg { width: 12px; height: 12px; }

    .cart-item {
        grid-template-columns: 50px 1fr;
        gap: 10px;
    }
    .cart-item-image { width: 50px; height: 50px; }
    .cart-item-name { font-size: 0.8rem; }
    .cart-item-price { font-size: 0.85rem; }
    .cart-item-remove { position: absolute; top: 8px; right: 8px; }
    .cart-item { position: relative; }
    .qty-selector { transform: scale(0.85); }
    .qty-btn { width: 28px; height: 28px; font-size: 0.85rem; }

    .cart-summary { padding: 16px; }
    .cart-summary-total { font-size: 1rem; }

    .payment-methods { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 16px; }

    .page-404 h1 { font-size: 3.5rem; }

    /* Mobile nav overlay */
    .mobile-nav { padding: 60px 20px 20px; }
    .mobile-nav a { font-size: 1rem; padding: 12px 0; }
}

/* Small phones */
@media (max-width: 360px) {
    .header-inner { padding: 0 10px; }
    .logo { font-size: 1rem; }
    .logo-icon { width: 18px; height: 13px; }
    .lang-switch { display: none; }
    .hero h1 { font-size: 1.25rem; }
    .products-grid { gap: 6px; }
    .product-info { padding: 8px; }
    .product-name { font-size: 0.75rem; }
    .btn-cart { padding: 7px 8px; font-size: 0.7rem; }
}