/**
 * Compact layout for 12" office monitors / viewports 1200–1300px.
 * Scoped ONLY to this range — mobile (<1200) and large desktop (>1300) stay unchanged.
 */
@media (min-width: 1200px) and (max-width: 1300px) {

    /* ---- Page shell: no horizontal bleed ---- */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* ---- Fixed 1280 containers → fluid with side breathing room ---- */
    .w-\[1280px\],
    .md\:w-\[1280px\],
    .xl\:w-\[1280px\] {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .max-w-\[1280px\] {
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
    }

    /* Restore horizontal padding where md/lg strips it at desktop */
    header > section.fixed {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    main.font-\[iranyekan\].md\:p-\[0px\],
    main.max-w-\[1280px\] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* ---- Tighten large gaps that cause squeeze/overlap ---- */
    .gap-\[48px\] {
        gap: 24px !important;
    }

    .gap-\[50px\] {
        gap: 28px !important;
    }

    .gap-\[64px\] {
        gap: 28px !important;
    }

    .gap-\[34px\],
    .md\:gap-\[34px\] {
        gap: 20px !important;
    }

    .gap-\[149px\] {
        gap: 40px !important;
    }

    .md\:gap-12 {
        gap: 1.5rem !important;
    }

    /* ---- Flex/grid children must shrink, not overflow ---- */
    main,
    section,
    article,
    aside,
    .fs-plp-main-col,
    [table-of-price],
    .flex-1 {
        min-width: 0;
    }

    /* ---- PLP price tables ---- */
    .fs-plp-table-scroll,
    [table-of-price] .fs-plp-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .fs-plp-desktop-table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
    }

    .fs-plp-desktop-table th,
    .fs-plp-desktop-table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }

    .fs-plp-col-buy {
        min-width: 96px !important;
    }

    .fs-plp-desktop-table .fs-plp-col-title a,
    .fs-plp-desktop-table .fs-plp-col-title span {
        white-space: nowrap !important;
    }

    /* ---- Rich content / product description tables ---- */
    .fs-content .table-wrap,
    .fs-content .table-responsive,
    .content .table-wrap,
    .content .table-responsive,
    #excerptBox .table-wrap,
    #excerptBox .table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .fs-content table,
    .content table,
    #excerptBox table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
    }

    .fs-content td,
    .fs-content th,
    .content td,
    .content th {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }

    /* ---- PDP: expert sidebar + content row ---- */
    aside[data-expert-card].w-\[320px\],
    .w-\[320px\] {
        width: 260px !important;
        max-width: 30% !important;
        flex-shrink: 0;
    }

    [data-expert-card] {
        min-width: 0;
    }

    /* ---- Home product grid: avoid 6 cramped columns ---- */
    .xl\:grid-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .grid-cols-\[repeat\(auto-fit\,minmax\(220px\,1fr\)\)\] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }

    /* ---- Footer fixed-width rows ---- */
    footer .w-\[1280px\],
    footer .flex.gap-\[48px\].w-\[1280px\] {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        flex-wrap: wrap !important;
    }

    footer nav.flex.gap-\[48px\] {
        gap: 24px !important;
        flex-wrap: wrap !important;
    }

    /* ---- Forms / cards inside fluid containers ---- */
    .rounded-\[12px\],
    .rounded-\[16px\],
    .rounded-\[8px\] {
        max-width: 100%;
    }

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