/*
 * Responsive desktop fixes — keeps a 4-col product grid on every desktop size
 * by capping the .container width sitewide and adjusting the filter sidebar.
 *
 * Strategy (eobuwie-style)
 *  - .container caps at 1400px from 1280px viewport upward.
 *  - 4 columns on every desktop breakpoint; sidebar 250px at XL+.
 *  - LG band drawer; XL+ persistent sidebar with 24px gap.
 *  - Menu carets removed, font 16px at XL+ / 14px at LG, white-space nowrap.
 *  - Top dark bar grid → auto/1fr/auto so phone+email don't wrap.
 *  - Archive container vertical padding halved (py-20 → 40px).
 *
 *  @since 2026-05-18
 */

/* ============================================================
 *  0) Sitewide container cap (header + content align)
 * ============================================================ */
@media (min-width: 1280px) {
    .container {
        max-width: 1400px;
    }
}

/* ============================================================
 *  1) Top dark bar — phone+email shouldn't wrap
 * ============================================================ */
@media (min-width: 768px) {
    header .bg-black > .container > .grid.grid-cols-3.gap-12 {
        grid-template-columns: auto 1fr auto !important;
        gap: 1.5rem !important;
    }
    header .bg-black > .container > .grid.grid-cols-3.gap-12 > div:first-child > ul {
        gap: 1rem;
        white-space: nowrap;
    }
}

/* ============================================================
 *  2) Product archive — halve the giant py-20 padding
 * ============================================================ */
@media (min-width: 768px) {
    body.archive   .container.py-4.md\:py-20,
    body.tax-product_cat   .container.py-4.md\:py-20,
    body.woocommerce-page  .container.py-4.md\:py-20,
    body.post-type-archive-product .container.py-4.md\:py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ============================================================
 *  3) Product archive — sidebar/grid behavior
 * ============================================================ */

/* --- LG band: drawer mode (no persistent sidebar) --- */
@media (min-width: 1024px) and (max-width: 1279px) {
    body.archive .sticky.top-0.md\:hidden.bg-white.container,
    body.post-type-archive-product .sticky.top-0.md\:hidden.bg-white.container,
    body.tax-product_cat .sticky.top-0.md\:hidden.bg-white.container,
    body.woocommerce-page .sticky.top-0.md\:hidden.bg-white.container {
        display: block !important;
    }

    .flineo-filters {
        display: none !important;
        width: 100% !important;
    }
    body.ms-filters-open .flineo-filters {
        display: block !important;
    }

    body.ms-filters-open .flineo-filters > .flex > div:first-child {
        width: 25% !important;
    }
    body.ms-filters-open .flineo-filters > .flex > div:last-child {
        width: 75% !important;
    }
    body.ms-filters-open .flineo-filters .relative.bg-white.border-neutral-100.md\:hidden {
        display: block !important;
    }

    .container > .flex.md\:flex-row.gap-20 > .md\:w-3\/4 {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .container > .flex.md\:flex-row.gap-20 {
        gap: 0 !important;
    }
}

/* --- XL band and up: narrow fixed sidebar + tight gap --- */
@media (min-width: 1280px) {
    .container > .flex.md\:flex-row.gap-20 {
        gap: 1.5rem !important;
    }
    .container > .flex.md\:flex-row.gap-20 > .flineo-filters {
        width: 250px !important;
        flex: 0 0 250px !important;
    }
    .container > .flex.md\:flex-row.gap-20 > .md\:w-3\/4 {
        width: auto !important;
        flex: 1 1 auto !important;
    }
}

/* ============================================================
 *  4) Desktop main menu
 * ============================================================ */

#menu-main-deskop > .menu-item-has-children > a::after {
    display: none !important;
}

@media (min-width: 1024px) {
    #menu-main-deskop { white-space: nowrap; }
    #menu-main-deskop > li > a { padding: 22px 14px; }
    #menu-main-deskop a { font-size: 16px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    #menu-main-deskop > li > a { padding: 20px 10px; }
    #menu-main-deskop a { font-size: 14px; }
}