/* * QATARSHOES THEME — HOMEPAGE FEATURED EDIT SECTION ("The Edit") * * Editorial block below New Arrivals: * Heading — the title, and the button through to the collection. * Desktop — featured image on the left carrying the eyebrow and * description, 2x2 product grid on the right. * Mobile — image, then the same 2x2 grid, then the button full width. * * 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 Square corners on the product tiles and their loading skeletons, so they read as one ruled grid rather than as separate rounded cards. The photograph keeps its own corner radius. ============================================ */ .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; } /* ============================================ HEADING ROW ============================================ */ /* Only the gap to the block below. The row, the title and the button carry the shared homepage-section classes, so their type, placement and mobile behaviour come from homepage-sections.css — anything restated here would override the very rules it was copying. 37px lands the title the same distance above its content as Best Sellers' sits above its grid; mobile overrides this to 0 and lets the shared heading margin do the whole job. */ .page-homepage .featured-edit-heading-row { margin-bottom: 37px; } /* ============================================ 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; } /* Above .featured-edit-link so the button is clickable, but transparent to the pointer everywhere else — the whole-image click-through keeps working through the copy, exactly as it did before the button existed. */ .page-homepage .featured-edit-copy { position: absolute; z-index: 4; bottom: 32px; inset-inline-start: 32px; inset-inline-end: 32px; text-align: start; color: #ffffff; pointer-events: none; } .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-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 are ruled off from each other rather than spaced apart, so the inset has to come from the card: without it a title sits against the dividing line. Same 15px the carousels above and below use. */ .page-homepage .featured-edit-section .product-card-wrapper > a.jsx-2594485245 { padding: 15px; 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; } /* 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; } /* Level with the card's own inset, so a badge lines up with the title under it rather than with the tile edge. */ .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: 15px; left: 15px; } 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: 15px; } /* 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; 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. */ /* No vertical padding: separation from the sections above and below is the container's gap now (homepage-sections.css, "Section Rhythm"), so that every pair is the same distance apart whatever order they are arranged in. Doing it here too gave this section a different gap above than below. */ padding-left: 56px; padding-right: 46px; /* 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); } /* The carousels' heading rows are inset 15px from their own container, so their title sits that far right of the grid beneath it. This section's row is a direct child, so the title landed flush with the photograph and read as though it were a step left of every other heading on the page. The same 15px puts it back in line. */ .page-homepage .featured-edit-heading-row { padding-inline-start: 15px; } /* 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)); /* Extra feature width, on top of what the ratio alone gives it. --fe-column-gap is the distance the cards keep from the image; the image takes everything the row has spare over and above it. On a wide screen that surplus is the white band the block used to park between the two columns. Neither side could absorb it: the cards because wider cards are taller ones, the image because it was cut to the photograph's own shape and so could not widen without growing taller too. With the height stated outright below, the image can take it, so it does, and the band closes to this figure. It costs nothing in layout — the width the image gains is the width the gap loses, so the row totals exactly what it did and the products column still finishes on the section's right padding, level with the View More button. Card widths, the gap between the cards and every height in the block are untouched. Two things follow from it, both wanted: - Below roughly 1500px the row has no real surplus, so the image gains only a little and the columns keep the distance they were designed with. The nudge below is what holds that distance steady. - The wider the screen, the more the image takes, and the more of the photograph's sides object-fit: cover trims. That is the whole trade of a fixed height. Raise --fe-column-gap to give the image less and crop less with it; --fe-image-crop-guard puts a hard ceiling on it. */ --fe-column-gap: 24px; --fe-image-crop-guard: 0.4; --fe-boost: min( max(0px, calc(var(--featured-edit-gap) - var(--fe-column-gap))), calc((var(--featured-edit-cards) + 40px) * var(--fe-ratio) * var(--fe-image-crop-guard)) ); /* The optical nudge on the cards, given back as the image takes width. The nudge is a transform, so it never took part in layout: the real distance between the columns has always been the gap less this figure. Widening the image without allowing for that drove it negative and the cards came to sit over the photograph. Easing the pull by whatever the image took holds it exactly where it was, which is what keeps the narrow widths looking as they were designed to. */ --fe-nudge: 50px; --fe-nudge-rtl: 20px; grid-template-columns: calc((var(--featured-edit-cards) + 40px) * var(--fe-ratio) + var(--fe-boost)) minmax(0, calc(var(--featured-edit-cards) - 96px + var(--featured-edit-gap))); gap: calc(var(--featured-edit-gap) - var(--fe-boost)); /* start, not stretch: stretching would resize the feature to the row and override the height it is given below */ 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. */ /* Height is stated rather than taken from the ratio, which is what lets the width move on its own. Cut to --fe-ratio the box was the photograph's shape, so height was width / ratio and the two could not be separated: a wider image was a taller one and the section grew with it. --featured-edit-cards + 40px is precisely the height that expression used to produce — the image width (cards + 40) * ratio divided by the ratio again — so the row, the section and the products column beside it all keep the heights they had. Only the width above changed. The cost is the crop: the box is now --fe-boost wider than the photograph's own proportions, and object-fit: cover trims that off the left and right edges. It is the same trade the mobile rules make. Set --fe-image-crop-guard to 0 to have the photograph shown whole again. */ .page-homepage .featured-edit-feature { aspect-ratio: auto; height: calc(var(--featured-edit-cards) + 40px); } /* 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; } /* Ruled, not spaced: 1px dividers over a beige ground, the same treatment the mobile grid and the product carousels either side of this section use. The cards therefore fill the whole column — they absorb the wide gap that used to separate them — which is why the width below divides the track rather than --featured-edit-cards, and why the optical nudge that assumed that gap is gone. Nothing is left to pull the cards over the photograph, so the column simply ends on the section's right padding, level with the button above it. The column is cut to the photograph's own height and the two rows split what is left, so the grid finishes level with the bottom of the image rather than running past it. Tiles cannot stay square once the cards are this wide — two square rows would overshoot the picture by half its height again — so each tile takes whatever the caption below it leaves. object-fit: contain (see the note on the base rule) means the product is still shown whole whatever shape that works out to. */ .page-homepage .featured-edit-products { height: calc(var(--featured-edit-cards) + 40px); } .page-homepage .featured-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, calc( (var(--featured-edit-cards) - 96px + var(--featured-edit-gap) - 3px) / 2 ))); grid-template-rows: repeat(2, minmax(0, 1fr)); box-sizing: border-box; flex: 1 1 auto; min-height: 0; gap: 1px; padding: 1px; background: #E0DCD3; outline: 1px #E0DCD3 solid; outline-offset: -1px; border-radius: 12px; overflow: hidden; } .page-homepage .featured-edit-grid > * { min-width: 0; min-height: 0; background: #ffffff; } /* The card fills its cell; the tile takes the height the caption leaves. border-box because the card is padded: counted outside the height, those 30px push the price down through the rule below it. */ .page-homepage .featured-edit-section .product-card-wrapper > a.jsx-2594485245 { box-sizing: border-box; height: 100%; } .page-homepage .featured-edit-section .image-container { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; } /* 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-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) { /* The same 15px gutter the product carousels use (homepage-sections.css — "Section Spacing"). It has to match: the View More button is a block-level flex container with no width of its own, so it fills whatever this padding leaves. A 16px gutter here made this section's button 2px narrower than the one above it and set 1px to the right of it — visible as soon as the two stack. */ .page-homepage .featured-edit-section { padding-left: 15px; padding-right: 15px; } /* Stacked, and sized by its contents. The block used to be cut to the height of the frame so the carousel landed on the fold; with the products in a grid there is no carousel to land, and a section that ends where its content ends behaves like every other one on the page. width: 100% because the section is a centring flex column on mobile (see the note on the section tag): without it the image and the grid would shrink to their content the way the button deliberately does. */ .page-homepage .featured-edit-wrapper { display: flex; flex-direction: column; gap: 0; width: 100%; } /* The heading, the photograph and the first row of cards have to land inside the frame on any handset — that is the shape of the section, and a tall portrait photograph is the only thing that can push the cards out of it. So the photograph keeps its own proportions until they would cost more height than is left, and is cropped from there (object-fit: cover on the base rule). What has to be left is spelled out rather than guessed at, so a change to any one part can be followed here: - the 52px sticky header (components/header/_base.css) - this section's heading row and its margin - one row of cards: the tile is square, so half the content width, plus the card's own padding and its caption - the grid's top margin, and a little air under the row lvh is the viewport with the address bar hidden — the state the reader is in by the time they have scrolled this far — with vh first as the fallback. Both are fixed numbers, so nothing resizes as the bar comes and goes. */ .page-homepage .featured-edit-feature { --fe-sticky-header: 52px; --fe-heading-row: 40px; --fe-card-chrome: 92px; /* 30px card padding + two title lines + price */ --fe-card-row: calc((100vw - 32px) / 2 + var(--fe-card-chrome)); --fe-breathing: 28px; /* the grid's 16px top margin, plus air */ /* Explicit, not inherited from the stretch: the box carries both an aspect-ratio and a max-height, and once the max-height bites the two disagree about the width. WebKit resolves that by keeping the ratio and narrowing the box, so on iOS the photograph came out inset from the right while the grid and the button below it still ran the full gutter-to-gutter width. Pinning the width makes it definite, the ratio only ever resolves the height, and object-fit: cover on the image takes the crop instead. */ width: 100%; aspect-ratio: var(--featured-edit-ratio, 1.0667); max-height: calc(100vh - var(--fe-sticky-header) - var(--fe-heading-row) - var(--fe-card-row) - var(--fe-breathing)); max-height: calc(100lvh - var(--fe-sticky-header) - var(--fe-heading-row) - var(--fe-card-row) - var(--fe-breathing)); border-radius: 12px; } /* The shared heading already carries the 32px the carousels put between their title and their grid. The row's own 20px was stacking on top of it, for 52px — so the row gives its margin up here and the shared one is the whole gap, which is what makes this title sit the same distance above its content as Best Sellers does. */ .page-homepage .featured-edit-heading-row { margin-bottom: 0; } .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-description { margin-top: 0; max-width: none; font-size: 13px; line-height: 1.45; } .page-homepage .featured-edit-products-label { margin: 20px 0 12px; font-size: 10px; } /* Two across, two down — the same grid as the desktop, and the same shape as the product carousels either side of this section. */ .page-homepage .featured-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); box-sizing: border-box; gap: 1px; margin-top: 16px; padding: 1px; background: #E0DCD3; outline: 1px #E0DCD3 solid; outline-offset: -1px; border-radius: 12px; overflow: hidden; } .page-homepage .featured-edit-grid > * { min-width: 0; background: #ffffff; } .page-homepage .featured-edit-section .text-wrapper { padding-top: 8px; } }