/* 6|4 card v2: the designers' photos (round 3, Lane X, X-5; owner 23 Oct 2026). Loaded by inc/enqueue-64-card-v2.php * only while `eupepsia_64_card_v2` is `yes` and the v1 card is on; every rule is scoped to `body.eup-64v2`. * Record: SIXFOUR-CARD-V2-PORT.md. * * 1. The photo sits in a that takes no box of its own, so every v1 and cards v5 rule for the card image * still applies to the . * 2. The photo is anchored to its foot: each designer photo has table or plank below the product, so a crop takes sky * or wall first, and the product sits as high above the text as the photo allows. * 3. On the 6|4 page only, the cards are longer (owner: "the product box a little bit larger or longer"): the photo * area is 3:5 at every width and each photo is sized and placed per product (X-6, owner-approved 26 Oct 2026, * D-454), and on phones a card takes a larger share of the row (1.3 cards in view instead of 1.6; tablets 2.5 * instead of 3). * X-6 also removes the fade (section 1b): no navy layer over the four photos on any surface. * Nothing moves or animates here. */ /* ---- 1. The picture ---- */ body.eup-64v2 picture.eup-64-photo { display: contents; } /* ---- 1b. No fade over the designer photos, on every 6|4 surface (X-6, D-454) ---- The design v4 media layer (::after) and the cards v5 navy layer behind the text (::before on the ds4 body and on the grid card) are switched off for the four photo cards; the photos already darken to their own foot, and the text sits on that. Cards without a designer photo keep both layers. */ body.eup-ds4.eup-64v2 li.eup-ds4-card.eup-64-card.eup-64-card--photo .eup-ds4-card__media::after, body.eup-ds4.eup-64v2 .eup-card-col.eup-64-card.eup-64-card--photo .eup-card__media::after, body.eup-ds4.eup-cards5.eup-64v2 li.eup-ds4-card.eup-64-card.eup-64-card--photo:not(:has(.eup-image-preview__img)) > .eup-ds4-card__body::before, body.eup-ds4.eup-cards5.eup-64v2 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card.eup-64-card--photo:not(:has(.eup-image-preview__img)) > .eup-card::before { content: none !important; } /* ---- 2. Anchored to the foot ---- */ body.eup-ds4.eup-64v2 li.eup-ds4-card.eup-64-card.eup-64-card--photo .eup-ds4-card__img, body.eup-ds4.eup-64v2 .eup-card-col.eup-64-card.eup-64-card--photo .eup-card__img { object-position: 50% 100% !important; } /* Product grids with cards v5: the photo track keeps the grey card's square, so a row of only 6|4 cards (the brand page, a related row) is as tall as any other row, and in a mixed row nothing changes. The photo still covers the whole card. */ body.eup-ds4.eup-cards5.eup-64v2 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card.eup-64-card--photo > .eup-card > .eup-card__media { aspect-ratio: 1 / 1 !important; } /* In the grid card the text starts at about 61 % of the card's height on narrow cards; the olive bottle and the feta wedge end at 65.5 % and 64 % of their photos. Those two photos are drawn a little larger, still anchored to the foot, so the crop takes more grove or slate above and the product clears the brand line. Measured: nothing of either product is cut at 390 to 1920 px. */ body.eup-ds4.eup-cards5.eup-64v2 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card.eup-64-photo--olive-oil > .eup-card > .eup-card__media .eup-card__img, body.eup-ds4.eup-cards5.eup-64v2 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card.eup-64-photo--feta > .eup-card > .eup-card__media .eup-card__img { bottom: 0 !important; top: auto !important; } body.eup-ds4.eup-cards5.eup-64v2 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card.eup-64-photo--olive-oil > .eup-card > .eup-card__media .eup-card__img { height: 120% !important; } body.eup-ds4.eup-cards5.eup-64v2 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card.eup-64-photo--feta > .eup-card > .eup-card__media .eup-card__img { height: 112% !important; object-position: 47.5% 100% !important; } /* ---- 3. The 6|4 page: longer cards, each photo framed per product (X-6, D-454) ---- */ /* Photo area 3:5 at every width (was: at least 400 px tall). */ body.eup-ds4.eup-64v2.eup-64-page li.eup-ds4-card.eup-64-card.eup-64-card--photo { --eup-64-ar: 3 / 5; } body.eup-ds4.eup-64v2.eup-64-page li.eup-ds4-card.eup-64-card.eup-64-card--photo > .eup-ds4-card__media { aspect-ratio: 3 / 5 !important; min-height: 0 !important; min-width: 0; /* A grid item with an aspect ratio would otherwise take its width from a minimum height. */ width: 100% !important; } /* Each photo sized against the card and placed per product (percentages of the photo area: left of its width, top and height of its height). Olive oil (1 L) and milk (500 ml) stand on the same line, the olive bottle 1.26x as tall. */ body.eup-ds4.eup-64v2.eup-64-page li.eup-ds4-card.eup-64-card.eup-64-card--photo .eup-ds4-card__img { bottom: auto !important; max-height: none !important; max-width: none !important; object-fit: fill !important; position: absolute !important; right: auto !important; width: auto !important; } /* feta: wheel and wedge 88 % of the card's width, centred at 42 % of its height */ body.eup-ds4.eup-64v2.eup-64-page li.eup-ds4-card.eup-64-card.eup-64-card--photo.eup-64-photo--feta .eup-ds4-card__img { height: 115% !important; left: -12.4% !important; top: -14.9% !important; } /* gouda: wheel and wedge 88 % of the width, centred at 33 %, so the dark wood (not the linen) is under the text */ body.eup-ds4.eup-64v2.eup-64-page li.eup-ds4-card.eup-64-card.eup-64-card--photo.eup-64-photo--gouda .eup-ds4-card__img { height: 120% !important; left: -27.6% !important; top: -13.2% !important; } /* olive oil 1 L: bottle 53 % of the height, standing at 61 % */ body.eup-ds4.eup-64v2.eup-64-page li.eup-ds4-card.eup-64-card.eup-64-card--photo.eup-64-photo--olive-oil .eup-ds4-card__img { height: 149% !important; left: -43.75% !important; top: -36.6% !important; } /* whole milk 500 ml: bottle 42 % of the height (53 / 1.26), standing at 61 % */ body.eup-ds4.eup-64v2.eup-64-page li.eup-ds4-card.eup-64-card.eup-64-card--photo.eup-64-photo--whole-milk .eup-ds4-card__img { height: 105% !important; left: -11.9% !important; top: -4.1% !important; } @media (max-width: 767px) { body.eup-64v2.eup-64-page .eup-64-track { --s64-per: 1.3; } } /* Tablets: 2.5 cards in view instead of 3, so the wide cheese photos keep their whole width in the longer card. */ @media (min-width: 768px) and (max-width: 1023px) { body.eup-64v2.eup-64-page .eup-64-track { --s64-per: 2.5; } }