/* OLFX MOBILE UX FIX (audit 2026-04-09) */
@media (max-width: 768px) {
    /* === 1. TAP TARGETS — мінімум 44px висота для кнопок === */
    button, .btn, [role="button"], a.button, input[type="submit"], input[type="button"],
    .filter-btn, .volume-btn, .add-to-cart, #button-cart, .menu-link-wrapper a {
        min-height: 44px !important;
        line-height: 1.3 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* === 2. ХЕДЕР — більший шрифт меню та брендинг === */
    header .main-menu .menu-link-wrapper a {
        font-size: 14px !important;
        padding: 14px 16px !important;
        margin-top: 0 !important;
    }
    #mobile-menu nav a { font-size: 16px !important; padding: 14px 0 !important; min-height: 48px !important; }
    #mobile-menu .lang-switcher li, #mobile-menu .lang-switcher a, #mobile-menu .lang-switcher span {
        font-size: 14px !important; padding: 12px 16px !important;
    }
    /* Top bar — менше caps, легше читати */
    .top-bar, [class*="top-bar"], .header-info-bar {
        font-size: 11px !important;
        text-transform: none !important;
        letter-spacing: 0.04em !important;
        padding: 10px 12px !important;
    }

    /* === 3. ГОЛОВНА HERO — більше повітря === */
    section[style*="padding:48px"] {
        padding: 32px 18px !important;
    }
    h1 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.2 !important; }

    /* === 4. КАРТКИ ТОВАРІВ — читабельні назви === */
    .olfx-prod-title, h3.olfx-prod-title, h3[class*="font-mono"] a, .product-name, .name a {
        font-size: 13px !important;
        font-family: "Inter", system-ui, sans-serif !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        line-height: 1.4 !important;
    }
    .olfx-prod-price, .price, span[class*="price"] {
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    /* === 5. БЕЙДЖИКИ Best Seller / New — більші === */
    [class*="absolute top-3"], [class*="bg-black text-white"][class*="font-mono"][class*="px-2"],
    [class*="БЕСТСЕЛЕР"], [class*="New"], .badge {
        font-size: 11px !important;
        padding: 6px 10px !important;
        letter-spacing: 0.1em !important;
    }

    /* === 6. ФІЛЬТРИ КАТЕГОРІЇ — вертикально, не горизонтально === */
    .category-page .filters-sidebar,
    aside[class*="filter"], .filter-sidebar, #filter-aside, .left-sidebar,
    .col-md-3.col-sm-3, .col-lg-3.left-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 24px !important;
        padding: 16px !important;
        background: #fafafa !important;
        border: 1px solid #e5e7eb !important;
        order: -1 !important;
    }
    /* Картки товарів повинні займати повну ширину поряд з фільтром */
    .category-page .products-grid,
    .product-grid, .col-md-9, .col-lg-9, .right-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Сітка карток на мобілці — 2 колонки */
    .product-grid .grid, .product-grid > div[class*="grid"],
    [class*="grid-cols-3"], [class*="grid-cols-4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* === 7. ГОРИЗОНТАЛЬНИЙ СКРОЛЛ — додати індикатор === */
    .snap-x [class*="snap-start"] {
        scroll-snap-align: start;
    }

    /* === 8. ФУТЕР — стек email+button, більший legal === */
    footer form input[type="email"], footer form input[type="text"] {
        width: 100% !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        padding: 14px !important;
        min-height: 48px !important;
    }
    footer form button {
        width: 100% !important;
        font-size: 12px !important;
        padding: 14px !important;
        min-height: 48px !important;
    }
    footer ul li a, footer a {
        font-size: 13px !important;
        padding: 10px 0 !important;
        display: inline-block !important;
        line-height: 1.4 !important;
    }
    /* Юридичний блок — більше */
    footer [class*="border-t"] p, footer .text-xs {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    /* Соц-іконки — +30% */
    footer svg, footer .social-icons svg, footer [class*="text-lg"] svg {
        width: 28px !important;
        height: 28px !important;
    }
    footer .social-icons a, footer [class*="flex gap-4"] a {
        padding: 8px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* === 9. POVITRYA: вертикальні відступи між секціями === */
    section + section, section + a, section + div[class*="bg-"] {
        margin-top: 8px !important;
    }
    main > section, main > a {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* === 10. ВТОРИННІ КНОПКИ "Дивитись усі" — повна ширина === */
    .text-center .border.border-black, [class*="border border-black px-8"] {
        width: 100% !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 16px 24px !important;
        min-height: 48px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* === 11. ПРИБРАТИ горизонтальний скрол body === */
    body { overflow-x: hidden !important; }

    /* === 12. PDP — Volume buttons, ціна === */
    .volume-btn { font-size: 13px !important; padding: 14px 12px !important; min-height: 50px !important; }
    .buy-card .text-5xl { font-size: 38px !important; }
    #button-cart { font-size: 13px !important; padding: 18px !important; min-height: 56px !important; letter-spacing: 0.15em !important; }
}

/* === Tablet 769-1024 === */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-grid .grid, [class*="grid-cols-4"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}