/*
 * QATARSHOES THEME — HOMEPAGE FEATURED EDIT SECTION ("The Edit")
 *
 * Editorial block below New Arrivals:
 *   Desktop — featured image carrying the eyebrow / title / description as an
 *             overlay on the left, 2×2 product grid on the right.
 *   Mobile  — image card on top, products in a snap-scrolling carousel
 *             with progress dots.
 *
 * Loaded after homepage-sections.css, so equal-specificity selectors here win
 * by cascade order (same strategy as homepage-sections.css — see its header).
 *
 * Logical properties (inset-inline-*, margin-inline-*) keep the layout correct
 * in Arabic/RTL without a mirrored stylesheet.
 */

/* ============================================
   SECTION SHELL
   ============================================ */

.page-homepage .featured-edit-section {
    background: #ffffff;
    box-sizing: border-box;
}

/* Empty fields are marked with [hidden] by PHP and by the JS re-render.
   The UA's [hidden] rule loses to the class rules below, so restate it. */
.page-homepage .featured-edit-section [hidden] {
    display: none !important;
}

.page-homepage .featured-edit-wrapper {
    display: grid;
    gap: 32px;
}

/* ============================================
   FEATURED IMAGE + COPY OVERLAY
   ============================================ */

.page-homepage .featured-edit-feature {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f2f0ec;
    min-width: 0;
}

.page-homepage .featured-edit-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom-up scrim so the copy stays legible on any photograph */
.page-homepage .featured-edit-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.34) 34%,
        rgba(0, 0, 0, 0.00) 66%
    );
    pointer-events: none;
}

.page-homepage .featured-edit-copy {
    position: absolute;
    z-index: 2;
    bottom: 32px;
    inset-inline-start: 32px;
    inset-inline-end: 32px;
    text-align: start;
    color: #ffffff;
}

.page-homepage .featured-edit-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.page-homepage .featured-edit-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    color: #ffffff;
}

.page-homepage .featured-edit-description {
    margin: 12px 0 0;
    max-width: 340px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* Optional click-through covering the whole image */
.page-homepage .featured-edit-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
}

.page-homepage .featured-edit-link[hidden] {
    display: none;
}

/* ============================================
   PRODUCTS
   ============================================ */

.page-homepage .featured-edit-products {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page-homepage .featured-edit-products-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 14px;
}

.page-homepage .featured-edit-products-label[hidden] {
    display: none;
}

.page-homepage .featured-edit-grid {
    min-width: 0;
}

/* Cards: flush white tiles — no card padding, the grid gap does the spacing */
.page-homepage .featured-edit-section .product-card-wrapper > a.jsx-2594485245 {
    padding: 0;
    background: transparent;
    line-height: normal;
}

/* Square. Now that products are fitted rather than cropped, the tile's shape
   is a layout choice rather than a cropping one — and square costs a quarter
   less height per unit width than 4:5 did, which is what pays for the larger
   cards. It also happens to match three of the four current products exactly
   (the 768x768 shots); the portrait one fits inside it with a little space at
   the sides. See the object-fit note below. */
.page-homepage .featured-edit-section .image-container {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    background: #f7f7f7;
    border-radius: 8px;
}

/* contain, because the catalogue is not one shape: it mixes 768x768 squares
   (Rimowa Cabin, Picotin Lock, Oran Sandal) with 4:5 portraits (Farandole
   Necklace at 1500x1851, the Rolex and Cartier shots at 1536x1894). No single
   tile ratio can match all of them, so cover would always be cropping
   something — a square in a 4:5 tile loses a fifth of its width.
   Contain fits each product to the tile whatever its shape and lets the tile
   show through around it, which is the only way every piece stays whole. */
.page-homepage .featured-edit-section .image-container img.jsx-2129118153 {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}

.page-homepage .featured-edit-section .text-wrapper {
    padding-top: 12px;
}

.page-homepage .featured-edit-section .text-wrapper .vertical-spacer {
    display: none;
}

.page-homepage .featured-edit-section .text-wrapper .model {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.025rem;
    color: #1a1a1a;
}

.page-homepage .featured-edit-section .price-container {
    margin-top: 4px;
}

/* Badges sit against the image edge now that cards have no padding */
.page-homepage .featured-edit-section .product-card-wrapper > .new-badge,
.page-homepage .featured-edit-section .product-card-wrapper > .best-seller-badge,
.page-homepage .featured-edit-section .product-card-wrapper > .sold-out-badge,
.page-homepage .featured-edit-section .product-card-wrapper > .low-stock-badge {
    top: 10px;
    left: 10px;
}

html[dir="rtl"] .page-homepage .featured-edit-section .product-card-wrapper > .new-badge,
html[dir="rtl"] .page-homepage .featured-edit-section .product-card-wrapper > .best-seller-badge,
html[dir="rtl"] .page-homepage .featured-edit-section .product-card-wrapper > .sold-out-badge,
html[dir="rtl"] .page-homepage .featured-edit-section .product-card-wrapper > .low-stock-badge {
    left: auto;
    right: 10px;
}

/* No wishlist heart in this section — the four products are an editorial
   selection, not a browsing grid, so the card stays a clean image and caption.
   Rendered by productsInjector like every other card, hidden here. */
.page-homepage .featured-edit-section .product-card-wrapper > .wishlist-heart {
    display: none;
}

/* Loading skeletons — same shimmer as the other homepage grids */
.page-homepage .featured-edit-skeleton .featured-edit-skeleton-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #f5f5f5;
}

.page-homepage .featured-edit-skeleton .featured-edit-skeleton-line {
    height: 12px;
    margin-top: 12px;
    border-radius: 2px;
    background: #f5f5f5;
}

.page-homepage .featured-edit-skeleton .featured-edit-skeleton-line--short {
    width: 45%;
    margin-top: 8px;
}

/* Every chosen product failed to resolve — show the feature on its own
   instead of leaving an empty column (class set by homepage-featured-edit.js) */
.page-homepage .featured-edit-section--no-products .featured-edit-products {
    display: none;
}

.page-homepage .featured-edit-section--no-products .featured-edit-wrapper {
    grid-template-columns: minmax(0, 1fr);
}

/* ============================================
   DESKTOP (min-width: 1024px)
   ============================================ */

@media (min-width: 1024px) {

    .page-homepage .featured-edit-section {
        /* Sized by its own content — no viewport height. Separation from the
           sections above and below comes from the vertical padding.
           Horizontal padding lines the image up with the "Best Sellers"
           heading text rather than with its container: that container is
           padded 40px, then the heading row adds a 1px border and 15px of its
           own — 56px in total. */
        /* Left 56px lines the image up with the "Best Sellers" heading text
           (40 container + 1 border + 15 row padding); right 46px lines the
           cards up with that section's View More button, which sits on the
           same row's 5px padding inside the same 1px border. */
        /* Vertical padding is the only height left to give back without
           touching a width: the image's height is now its width divided by the
           photograph's own ratio, and both of those are fixed. The 40px
           spacers either side of the section still separate it from its
           neighbours. */
        padding: 24px 46px 24px 56px;

        /* The ratio the layout is built on. --featured-edit-ratio is the
           photograph's own proportions, read off the file by
           homepage-featured-edit.js (and pre-set inline by PHP on first paint);
           the fallback matches the current uploads. It is clamped so a stray
           landscape or a very tall portrait can't unbalance the block — within
           these bounds the photo is shown whole, outside them object-fit: cover
           crops the excess. Everything below sizes off this, not the raw value. */
        --fe-ratio: clamp(0.6, var(--featured-edit-ratio, 1.0667), 1.6);
    }

    /* Both columns are capped rather than one absorbing the leftover width, so
       the image stays a considered size instead of stretching to whatever the
       screen leaves it. justify-content: start packs the pair against the
       section's gutter, keeping the image's 56px offset from the page edge
       identical at every width and letting the cards sit closer in beside it —
       the surplus collects on the right rather than inside the block.
       Both shrink together on a narrow desktop, so nothing overflows. */
    /* The products column is two square cards tall, which works out to its own
       width times 1.25, plus 16px. The 1.25 is the card tiles being 4:5
       portrait — a card is a quarter taller than it is wide — and the 16px is
       the two captions and the row gap, less the column gap already counted
       inside the width. Inverting that, a column of (90dvh - 96px) / 1.25
       gives a section 90dvh tall once its 2x40px padding is added, which is
       what keeps the whole block inside the frame.
       This is the expression that sets the card and image widths, so if the
       tile ratio or the gaps change, the 1.25 and the 16 have to change with
       them or the section will drift out of frame again.
       The allowance is what trades image width against section height: both
       edges are pinned, so the only way to narrow the image is to let the
       cards have that width, and wider square cards are taller ones.
       Keep this figure in step with the card gaps below: widening the column
       gap shortens the cards, and the constant has to follow or the section
       creeps past the frame.
       Cards get smaller on a short screen but stay square, so nothing crops.

       The products column is sized and sits last, so it ends on the section's
       right padding — level with the View More button above. The image takes
       the surplus as the screen widens, which is why it is the flexible track
       rather than a second fixed one. */
    .page-homepage .featured-edit-wrapper {
        /* Everything hangs off the width of the products column.

           Neither column can be stretched to meet the other — the image keeps
           the photograph's proportions or cover crops it, the tiles keep 4:5
           or the products crop — so the two are tied together arithmetically
           instead. A products column of width P stands P + 40 tall (square
           tiles, two captions and the row gap, less the column gap already
           inside P), and the image is that height times its own ratio wide.

           P is the smaller of two limits:

           - the width fit, which fills the row exactly, and
           - the height fit, which is all the frame has left under the header.

           Below ~1578px the width fit is the smaller, so the block fills the
           row as before. Above it, the image would otherwise keep widening —
           and a wider image is a taller one — so the height fit takes over,
           the block stops growing, and the surplus collects to its right. */
        --featured-edit-cards: min(calc((100vw - 173px) / (1 + var(--fe-ratio))), calc(100vh - 183px));
        --featured-edit-cards: min(calc((100vw - 173px) / (1 + var(--fe-ratio))), calc(100dvh - 183px));
        /* The spare width above the crossover can only sit in the two gaps —
           the cards cannot take it, since wider cards are taller ones, and
           neither can the image. Rather than load it all into one, split it
           evenly: whatever is left of the row once the image and the two
           cards have theirs, halved. Both gaps are then the same, and the
           cards still finish on the section's right padding, level with the
           View More button above. */
        --featured-edit-gap: max(24px, calc((
            100vw - 6px
            - (var(--featured-edit-cards) + 40px) * var(--fe-ratio)
            - var(--featured-edit-cards)
        ) / 2));
        grid-template-columns:
            calc((var(--featured-edit-cards) + 40px) * var(--fe-ratio))
            minmax(0, calc(var(--featured-edit-cards) - 96px + var(--featured-edit-gap)));
        gap: var(--featured-edit-gap);
        /* start, not stretch: stretching would resize the feature to the row
           and override the aspect-ratio that keeps the photograph whole */
        align-items: start;
    }

    /* Cut to the photograph's own proportions, which is the only way cover
       shows it whole — a box of any other shape has to crop to fill, and since
       the box used to take its height from the cards, that crop changed with
       every window size. The ratio comes from the file itself, set on the
       section by homepage-featured-edit.js, so it follows whatever is uploaded
       rather than assuming a shape. The fallback matches the current uploads
       (1920x1800) and only applies before the script runs.
       This column now sets the row height; the products column follows it. */
    .page-homepage .featured-edit-feature {
        aspect-ratio: var(--fe-ratio);
        height: auto;
    }

    /* The label is mobile-only — on desktop the products sit beside the copy
       and read as part of the same block, so it is noise */
    .page-homepage .featured-edit-products-label {
        display: none;
    }

    /* Tiles keep their fixed 4:5 shape from the base rules — that is what lets
       the products fill them without cropping. Sizing them from leftover height
       instead would put the crop straight back.

       The cards are held at the widest the frame allows — wider ones would be
       taller ones, which is what the column sizing above exists to prevent —
       and they take the same gap as the wrapper does, so the space either
       side of the pair reads evenly. The column is sized to exactly the two
       of them plus that gap, so it ends on the section's right padding, level
       with the View More button. */
    .page-homepage .featured-edit-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, calc((var(--featured-edit-cards) - 96px) / 2)));
        gap: 24px var(--featured-edit-gap);
        /* Optical nudge towards the image. A transform is used rather than a
           margin or a gap change because it does not take part in layout —
           card widths, both gaps, the column and the section height all keep
           the values they are given above. Mirrored in RTL, where "left"
           means the other way. */
        transform: translateX(-50px);
    }

    html[dir="rtl"] .page-homepage .featured-edit-grid {
        transform: translateX(20px);
    }


    /* Carousel dots are mobile-only */
    .page-homepage .featured-edit-dots {
        display: none;
    }

    /* Alone, the feature keeps the photograph's proportions too — it is full
       width here, so a fixed banner ratio would crop what the column above
       deliberately does not. */
    .page-homepage .featured-edit-section--no-products .featured-edit-feature {
        height: auto;
        aspect-ratio: var(--fe-ratio);
    }
}

/* Comfortable reading measure on very wide screens */
@media (min-width: 1600px) {
    .page-homepage .featured-edit-title {
        font-size: 42px;
    }
    .page-homepage .featured-edit-description {
        max-width: 420px;
    }
}

/* Past 1979px the homepage containers drop their 40px padding and run edge to
   edge, leaving the heading row on its own 1px border plus 15px / 5px padding.
   Follow them, or the image and cards would sit 40px out of line up here. */
@media (min-width: 1980px) {
    .page-homepage .featured-edit-section {
        padding: 24px 6px 24px 16px;
    }

    /* The gutters shrink from 102px to 22px up here, so the width fit gains
       that much room, and the leftover the gaps share grows by the same 80px.
       The height fit is unchanged. */
    .page-homepage .featured-edit-wrapper {
        --featured-edit-cards: min(calc((100vw - 93px) / (1 + var(--fe-ratio))), calc(100vh - 183px));
        --featured-edit-cards: min(calc((100vw - 93px) / (1 + var(--fe-ratio))), calc(100dvh - 183px));
        --featured-edit-gap: max(24px, calc((
            100vw + 74px
            - (var(--featured-edit-cards) + 40px) * var(--fe-ratio)
            - var(--featured-edit-cards)
        ) / 2));
    }
}

/* ============================================
   MOBILE (max-width: 1023px)
   ============================================ */
@media (max-width: 1023px) {

    .page-homepage .featured-edit-section {
        padding: 0 16px;
    }

    /* A column the height of the frame, with the carousel taking exactly what
       it needs and the image taking the rest. Sizing the image by subtracting
       a guessed figure for the carousel was always going to clip it whenever
       the guess ran short — a two-line product title, a taller header, a
       different font all move it. This way the slider measures itself and the
       image gives way, so it is always whole. */
    .page-homepage .featured-edit-wrapper {
        display: flex;
        flex-direction: column;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        height: calc(100vh - 80px);
        height: calc(100dvh - 80px);
        min-height: 480px;
    }

    /* Takes the leftover. Growing past the photograph's own proportions means
       cover has something to trim again — it takes the sides, the box being
       taller than the picture is. That is the trade for filling the frame on a
       phone; the desktop feature is still cut to its own ratio and shows the
       photograph whole. */
    .page-homepage .featured-edit-feature {
        aspect-ratio: auto;
        flex: 1 1 auto;
        height: auto;
        min-height: 200px;
    }

    /* Never squeezed: the slider keeps its full height whatever is left */
    .page-homepage .featured-edit-products {
        flex: 0 0 auto;
    }

    .page-homepage .featured-edit-copy {
        bottom: 20px;
        inset-inline-start: 20px;
        inset-inline-end: 20px;
    }

    .page-homepage .featured-edit-eyebrow {
        margin-bottom: 8px;
        font-size: 10px;
    }

    .page-homepage .featured-edit-title {
        font-size: 26px;
    }

    .page-homepage .featured-edit-description {
        margin-top: 8px;
        max-width: none;
        font-size: 13px;
        line-height: 1.45;
    }

    .page-homepage .featured-edit-products-label {
        margin: 20px 0 12px;
        font-size: 10px;
    }

    /* Snap carousel, held inside the 16px gutters so the cards line up with
       the image above them rather than bleeding past it */
    .page-homepage .featured-edit-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .page-homepage .featured-edit-grid::-webkit-scrollbar {
        display: none;
    }

    /* Exactly two per frame: the pair plus the gap between them is the full
       track width, so four products page as two clean frames */
    .page-homepage .featured-edit-grid > * {
        flex: 0 0 calc((100% - 12px) / 2);
        scroll-snap-align: start;
        min-width: 0;
    }

    .page-homepage .featured-edit-section .text-wrapper {
        padding-top: 8px;
    }

    /* Progress dots */
    .page-homepage .featured-edit-dots {
        display: flex;
        gap: 6px;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .page-homepage .featured-edit-dots[hidden] {
        display: none;
    }

    .page-homepage .featured-edit-dot {
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #e0dcd3;
        transition: background-color 0.2s ease;
    }

    .page-homepage .featured-edit-dot.is-active {
        background: #2d1f1f;
    }
}