/*
 * MR-LUX wide-desktop utilization layer.
 *
 * Scope:
 * - Desktop only. Mobile and compact desktop keep their approved layouts.
 * - Visual/card surfaces expand; long-form text remains readability-limited.
 * - Viewport height still caps tall product cards so width gains never create
 *   vertical clipping on short desktop screens.
 */

/*
 * Home desktop canvas
 * -------------------
 * The original 1180px frame was still winning between 901px and 1399px.
 * On Surface-class widths this left usable space at both physical edges and
 * forced every grid/card inside the frame to calculate from a smaller width.
 *
 * Keep a small, fluid safety gutter, but let the real frame and its visual
 * sections consume the rest of the desktop viewport. Mobile remains entirely
 * outside this layer.
 */
@media (min-width: 901px) {
    :root {
        --mr-home-fluid-edge: clamp(14px, 1.5vw, 32px);
    }

    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    > .mr-home-clean-main {
        padding-right: var(--mr-home-fluid-edge) !important;
        padding-left: var(--mr-home-fluid-edge) !important;
    }

    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame {
        width: 100% !important;
        max-width: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html body.mr-home-has-desktop-sidebar
    .mr-card-transfer-stage {
        width: calc(100vw - (var(--mr-home-fluid-edge) * 2)) !important;
        max-width: none !important;
    }
}

/*
 * Compact desktop / Surface landscape. These sections were explicitly reset
 * to 100% of the old 1180px frame by a late inline rule. The more specific
 * selectors below make 100% mean the new fluid frame instead.
 */
@media (min-width: 901px) and (max-width: 1399px) {
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-top-duo,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-shape-slider,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-orbit-showroom,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-image-panels-title,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-image-panels,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-twelve-card-strip,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-card-transfer-scene--destination,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .quick-proforma-section {
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
    }
}

/*
 * From 1400px upward the visual sections are intentionally full-bleed.
 * Their older margin used --mr-home-desktop-fullbleed-offset, which was
 * calculated from the removed 1180px frame and shifted the expanded sections
 * to the right. Recenter them against the physical viewport.
 */
@media (min-width: 1400px) {
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-top-duo,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-shape-slider,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-orbit-showroom,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-image-panels-title,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-image-panels,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-home-twelve-card-strip,
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .quick-proforma-section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
    }
}

/* The animated-card destination was the last visible 1180px island at
 * ordinary 1400–1649px desktop widths. Give it the same physical gutter as
 * the source stage without changing its document-flow height. */
@media (min-width: 1400px) and (max-width: 1649px) {
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-clean-main
    > .mr-home-clean-frame
    > .mr-card-transfer-scene--destination {
        width: calc(100vw - (var(--mr-home-fluid-edge) * 2)) !important;
        max-width: none !important;
        margin-right: calc(50% - 50vw + var(--mr-home-fluid-edge)) !important;
        margin-left: calc(50% - 50vw + var(--mr-home-fluid-edge)) !important;
    }
}

@media (min-width: 1650px) {
    :root {
        --mr-wide-page-gutter: var(--mr-home-fluid-edge);
        --mr-wide-content-max: 2200px;
    }

    /* Home: allow all eight animated cards to grow with wide screens. */
    body.mr-home-has-desktop-sidebar .mr-card-transfer-scene {
        /*
         * Keep these as resolved px values. moving-cards.js intentionally
         * parses the custom properties as numbers when rebuilding its layout.
         */
        --mr-card-width: 200px !important;
        --mr-card-height: 250px !important;
    }

    body.mr-home-has-desktop-sidebar .mr-card-transfer-stage {
        width: min(
            calc(100vw - (var(--mr-wide-page-gutter) * 2)),
            var(--mr-wide-content-max)
        ) !important;
        max-width: none !important;
    }

    /*
     * The destination used to inherit the 1180px clean-frame cap. Break it
     * out symmetrically while keeping its document-flow height intact.
     */
    body.mr-home-has-desktop-sidebar
    .mr-home-clean-frame
    > .mr-card-transfer-scene--destination {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
    }

    /* Home Orbit + adjacent carousel share the available wide canvas. */
    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    .mr-home-orbit-showroom
    .mr-home-orbit {
        width: clamp(760px, 44vw, 1040px) !important;
        max-width: clamp(760px, 44vw, 1040px) !important;
    }

    html body.mr-home-has-desktop-sidebar
    .mr-home-desktop-content-shell
    > .mr-umbrel-carousel-wrap {
        width: min(
            1120px,
            calc(100% - var(--mr-umbrel-orbit-left, 840px) - var(--mr-wide-page-gutter))
        ) !important;
        max-width: none !important;
    }

    /*
     * Four product lines: the old 570px hard cap wasted width above 1650px.
     * The height term prevents a wide-but-short desktop from clipping cards.
     */
    body.product-list-body .mr-family-luxhero {
        --luxhero-card-w: clamp(570px, min(33vw, 70vh), 900px);
    }

    body.product-list-body
    .mr-family-luxhero:has(.luxhero__track > .luxhero__slide:first-child:last-child) {
        --luxhero-card-w: clamp(570px, min(42vw, 70vh), 960px);
    }

    /* Product controls and pagination follow the widened visual rows. */
    body.product-list-body .products-page .mr-products-control-deck,
    body.product-list-body .products-page .mr-catalog-toolbar,
    body.product-list-body .products-page .products-pagination.products-pagination-top,
    body.product-list-body .products-page .product-family-head,
    body.product-list-body .products-page .mr-family-refine-line,
    html body.product-list-body.rtl .products-page .mr-products-control-deck,
    html body.product-list-body.rtl .products-page .mr-catalog-toolbar,
    html body.product-list-body.rtl .products-page .products-pagination.products-pagination-top,
    html body.product-list-body.rtl .products-page .product-family-head,
    html body.product-list-body.rtl .products-page .mr-family-refine-line {
        width: min(
            1800px,
            calc(100% - (var(--mr-wide-page-gutter) * 2))
        ) !important;
        max-width: none !important;
    }

    /*
     * All Products: the old 1560px shell stayed capped while the grid switched
     * to six columns. Each 239px track then inherited a 271px minimum width
     * from the card's aspect-ratio + min-height pair and overlapped its
     * neighbours. Widen the actual shell and let the card height resolve from
     * its grid width so six columns remain clean at every wide breakpoint.
     */
    body.mr-page-all-products .mr-all-products-shell {
        width: min(
            var(--mr-wide-content-max),
            calc(100vw - (var(--mr-wide-page-gutter) * 2))
        ) !important;
        max-width: none !important;
    }

    body.mr-page-all-products .mr-all-products-grid {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    body.mr-page-all-products .mr-all-product-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    /* Category and Family decks: expand the card stage, not text paragraphs. */
    body.mr-category-side-label-body main.mr-cat-deck-page.mr-cat-deck-page--cards-only,
    body.mr-family-side-label-body main.mr-cat-deck-page.mr-cat-deck-page--cards-only {
        width: min(
            var(--mr-wide-content-max),
            calc(100% - (var(--mr-wide-page-gutter) * 2))
        ) !important;
        max-width: none !important;
    }
}

@media (min-width: 1920px) {
    body.mr-home-has-desktop-sidebar .mr-card-transfer-scene {
        --mr-card-width: 220px !important;
        --mr-card-height: 275px !important;
    }
}

@media (min-width: 2200px) {
    :root {
        --mr-wide-content-max: 2480px;
    }

    body.mr-home-has-desktop-sidebar .mr-card-transfer-scene {
        --mr-card-width: 248px !important;
        --mr-card-height: 310px !important;
    }

    body.product-list-body .products-page .mr-products-control-deck,
    body.product-list-body .products-page .mr-catalog-toolbar,
    body.product-list-body .products-page .products-pagination.products-pagination-top,
    body.product-list-body .products-page .product-family-head,
    body.product-list-body .products-page .mr-family-refine-line,
    html body.product-list-body.rtl .products-page .mr-products-control-deck,
    html body.product-list-body.rtl .products-page .mr-catalog-toolbar,
    html body.product-list-body.rtl .products-page .products-pagination.products-pagination-top,
    html body.product-list-body.rtl .products-page .product-family-head,
    html body.product-list-body.rtl .products-page .mr-family-refine-line {
        width: min(
            2320px,
            calc(100% - (var(--mr-wide-page-gutter) * 2))
        ) !important;
    }

    body.mr-page-all-products .mr-all-products-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }

    body.mr-family-side-label-body
    .mr-family-index-page
    .mr-family-deck-card {
        grid-column: span 2 !important;
    }
}