/* Product cards v5 (round 3, Lane X; D-418). Loaded by inc/enqueue-cards-v5.php only while `eupepsia_cards_v5` is
 * `yes` under design v4; every rule is scoped to `body.eup-ds4.eup-cards5`, the body class the same file adds.
 * Record: CARDS-V5-PORT.md.
 *
 * Owner, 2026-10-23: the product name a little smaller, the brand at least the price's size, and brand, name and
 * price on one line across a row even when names wrap.
 *
 * 1. Type: name clamp(15px .. 18px) (was 15 .. 21), brand = the price's size clamp(15px .. 17px) (was 13), price
 *    unchanged. Colours unchanged (ink on the card grey 14.67:1; white on the 6|4 gradient, see 4).
 * 2. Product grids (`.products` rows inside #main: shop, categories, tags, brands, search, related, up-sells,
 *    cross-sells, Flatsome product rows in page content): every card is a CSS subgrid of the row, with one track
 *    each for photo, brand, name, price, stock line and button. A row's tracks take the tallest card's content, so
 *    brand, name and price start on the same line in every card of the row however many lines a name or a brand
 *    takes. Nothing is cut: no clamp, no ellipsis.
 * 3. Track rows (home product rows and the 6|4 page, `li.eup-ds4-card` in a one-row grid): the text block is a fixed
 *    height (brand one line, name two lines as the design already clamps it, price one line) and sits at the foot
 *    of every card, grey and 6|4 alike, with the same bottom padding.
 * 4. 6|4 cards (inc/enqueue-64-card-v1.php) inside product grids take the grey card's geometry; their photo covers
 *    the whole card, and the navy layer behind the text covers exactly the text tracks plus a 32 px fade above them
 *    (alpha 0.78 to 0.86: white text stays at least 9:1 even over a white pixel).
 * Nothing moves or animates here.
 */

/* ---- 1. Type ---- */

body.eup-ds4.eup-cards5 .eup-card .eup-card__name,
body.eup-ds4.eup-cards5 .eup-ds4-card .eup-ds4-card__name {
	font-size: clamp(15px, 0.1961vw + 14.235px, 18px);
	line-height: 1.3;
}

body.eup-ds4.eup-cards5 .eup-card .eup-card__brand,
body.eup-ds4.eup-cards5 .eup-ds4-card .eup-ds4-card__brand {
	font-size: var(--eup3-fs-card-price, 15px);
	line-height: 1.3;
}

body.eup-ds4.eup-cards5 .eup-card .eup-card__price,
body.eup-ds4.eup-cards5 .eup-ds4-card .eup-ds4-card__price {
	line-height: 1.3;
}

/* X-7 (owner, D-449): the brand bold, the product name regular, on every product card (shop, categories, tags, brands,
   search, related, home rows, the 6|4 cards, the cart's product block). 600 is the heaviest Poppins face the site
   loads (200 to 600). Seasons' pick has its own card (`.eup-h6b-scard`) and is not touched. */
body.eup-ds4.eup-cards5 .eup-card .eup-card__brand,
body.eup-ds4.eup-cards5 .eup-card .eup-card__brand a,
body.eup-ds4.eup-cards5 .eup-ds4-card .eup-ds4-card__brand,
body.eup-ds4.eup-cards5 .eup-ds4-card .eup-ds4-card__brand a,
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .eup-cards5-brand {
	font-weight: 600 !important;
}

body.eup-ds4.eup-cards5 .eup-card .eup-card__name,
body.eup-ds4.eup-cards5 .eup-card .eup-card__name a,
body.eup-ds4.eup-cards5 .eup-ds4-card .eup-ds4-card__name,
body.eup-ds4.eup-cards5 .eup-ds4-card .eup-ds4-card__name a,
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-post-title,
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-post-title a {
	font-weight: 400 !important;
}

/* Rows that are not a grid (a Flatsome slider or inline row): the name keeps two lines' room. */
body.eup-ds4.eup-cards5 .eup-card .eup-card__name {
	min-height: 2.6em;
}

/* Phones: names in a slider row (Balance) mostly take three lines at two cards a row, so three lines' room there. */
@media (max-width: 767px) {
	body.eup-ds4.eup-cards5 .slider .eup-card .eup-card__name {
		min-height: 3.9em;
	}
}

/* ---- 2. Product grids: one subgrid track per line of the card ---- */

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row):has(> .eup-card-col) {
	row-gap: 0 !important;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col {
	display: grid !important;
	grid-row: span 6;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	margin-bottom: var(--eup3-sp-6, 24px) !important;
	row-gap: 0;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card {
	display: grid;
	grid-column: 1;
	grid-row: 1 / -1;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	height: auto;
	row-gap: 2px;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card > * {
	grid-column: 1;
	min-width: 0;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card > .eup-card__media { grid-row: 1; }
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card > .eup-card__brand { align-self: end; grid-row: 2; }
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card > .eup-card__name { align-self: start; grid-row: 3; min-height: 0; }
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card > .eup-card__price { align-self: start; grid-row: 4; }
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card > .eup-card__stock { align-self: start; grid-row: 5; }

/* The button is in normal flow on touch screens (its own track, at the foot); with a mouse it is positioned over
   the text block and must keep the card as its containing block, so it gets no track there. */
@media (hover: none), (pointer: coarse) {
	body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col > .eup-card > .eup-card__actions {
		align-self: end;
		grid-row: 6;
		margin-top: 0;
	}
}

/* ---- 3. Track rows (home, 6|4 page): fixed text block at the foot of every card ---- */

body.eup-ds4.eup-cards5 li.eup-ds4-card .eup-ds4-card__body {
	margin-top: auto;
}

body.eup-ds4.eup-cards5 li.eup-ds4-card .eup-ds4-card__brand,
body.eup-ds4.eup-cards5 li.eup-ds4-card .eup-ds4-card__price {
	min-height: 1.3em;
}

body.eup-ds4.eup-cards5 li.eup-ds4-card .eup-ds4-card__name {
	height: 2.6em;
}

@media (hover: none), (pointer: coarse) {
	body.eup-ds4.eup-cards5 li.eup-ds4-card .eup-ds4-card-cta {
		margin-top: 0;
	}
}

body.eup-ds4.eup-cards5 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-ds4-card__body {
	padding-bottom: var(--eup3-sp-6, 24px) !important;
}

/* The text block is a line taller than in v1 (the name keeps two lines' room), so the brand sits higher on the
   photo's gradient: a light navy layer behind the block (and a 32 px fade above it) keeps white text well above
   4.5:1 on the cover photos. The fit cards already have their own solid layer behind the text. */
body.eup-ds4.eup-cards5 li.eup-ds4-card.eup-64-card:not(.eup-64-card--fit):not(:has(.eup-image-preview__img)) > .eup-ds4-card__body::before {
	background: linear-gradient(to bottom, rgba(20, 17, 45, 0) 0, rgba(20, 17, 45, 0.45) 32px, rgba(20, 17, 45, 0.45) 100%);
	content: "";
	inset: -32px 0 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* ---- 4. 6|4 cards inside product grids: the grey card's geometry, photo over the whole card ---- */

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card {
	grid-template-rows: subgrid;
	padding: var(--eup3-sp-6, 24px) var(--eup3-sp-4, 16px) 0 !important;
	position: relative;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card {
		padding-bottom: var(--eup3-sp-6, 24px) !important;
	}
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__media {
	aspect-ratio: auto !important;
	grid-row: 1 !important;
	min-height: 0;
	position: static !important;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__media::after {
	content: none;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > :is(.eup-card__brand, .eup-card__name, .eup-card__price, .eup-card__stock) {
	padding: 0 !important;
	z-index: 2;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__brand { grid-row: 2 !important; }
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__name { grid-row: 3 !important; }
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__price { grid-row: 4 !important; }
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__stock { grid-row: 5 !important; }

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__actions {
	margin: 0 calc(-1 * var(--eup3-sp-4, 16px)) !important;
	width: auto !important;
	z-index: 2;
}

@media (hover: none), (pointer: coarse) {
	body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__actions {
		grid-row: 6 !important;
		padding-top: var(--eup3-sp-3, 12px) !important;
	}
}

/* cover (square or portrait photo): the photo fills the whole card. */
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(.eup-64-card--fit):not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__media .eup-card__img {
	z-index: 0;
}

/* The navy layer behind the text: the text tracks plus a 32 px fade above them. */
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card::before {
	background: linear-gradient(to bottom, rgba(20, 17, 45, 0) 0, rgba(20, 17, 45, 0.78) 32px, rgba(20, 17, 45, 0.86) 100%);
	content: "";
	grid-column: 1;
	grid-row: 2 / -1;
	margin: -32px calc(-1 * var(--eup3-sp-4, 16px)) calc(-1 * var(--eup3-sp-6, 24px));
	pointer-events: none;
	z-index: 1;
}

@media (hover: none), (pointer: coarse) {
	body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card::before {
		margin-bottom: 0;
	}
}

/* fit (landscape photo, the cheeses): the whole photo in the photo track, the blurred copy behind the whole card. */
body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-card .eup-64-card__fill {
	aspect-ratio: auto;
	grid-row: auto !important;
	height: 100%;
	inset: 0;
	position: absolute !important;
	width: 100%;
}

body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-card .eup-card__img {
	grid-row: 1 !important;
}

/* ---- 5. WooCommerce product blocks (the cart's "You may be interested in…", any Product Collection block) ----
 * Each product is a subgrid of the block's grid: photo, brand (printed by inc/enqueue-cards-v5.php), name, price,
 * button, so the lines meet across a row; name and brand at the card sizes. */

body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection ul.wc-block-product-template {
	row-gap: 0 !important;
}

body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection ul.wc-block-product-template > li.wc-block-product {
	display: grid !important;
	grid-row: span 5;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	margin-bottom: var(--eup3-sp-6, 24px) !important;
	row-gap: 2px;
}

body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > * { grid-column: 1; min-width: 0; }
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .wc-block-components-product-image { grid-row: 1; }
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .eup-cards5-brand { align-self: end; grid-row: 2; }
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .wp-block-post-title { align-self: start; grid-row: 3; }
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .wp-block-woocommerce-product-price { align-self: start; grid-row: 4; }
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .wp-block-button { align-self: end; grid-row: 5; }

body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .eup-cards5-brand {
	color: var(--eup3-ink, #1d1848);
	font-size: var(--eup3-fs-card-price, 15px);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	padding: 0 var(--eup3-sp-4, 16px);
	text-align: center;
}

body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .wp-block-post-title {
	font-size: clamp(15px, 0.1961vw + 14.235px, 18px) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

/* The block's price at the card price size, so the brand above is the same size. */
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .wp-block-woocommerce-product-price,
body.eup-ds4.eup-cards5 .wp-block-woocommerce-product-collection li.wc-block-product > .wp-block-woocommerce-product-price .wc-block-components-product-price {
	font-size: var(--eup3-fs-card-price, 15px) !important;
	line-height: 1.3;
}

/* ---- 6. The card's button and the state after "Add to cart" (X-10, owner 2026-10-23) ----
 * a. With a mouse the button is positioned over the text block (design v4). The subgrid rule above gives every card
 *    child `grid-column: 1`, and for a positioned child that makes the grid column its containing block: the button
 *    started 16 px in and ran to the card's right edge. Back to the whole card (left 0, right 0), as design v4 drew it.
 *    The 6|4 grid card had the same cause plus its touch-screen side margins: 16 px past the right edge.
 * b. After an add, design v4 kept the button shown while WooCommerce's "View cart" link was there, so the button and
 *    the link (81 px together) stayed over the brand and name after the pointer left. The cart drawer (bag v2) opens
 *    after every add with "View cart" and "Go to checkout", and the header count updates, so in a card the link is
 *    not printed on screen, and the button hides again when the pointer leaves. While the button is shown it carries a
 *    check mark ("added"); it still adds one more. Keyboard focus keeps it shown, as before.
 */
@media (hover: hover) and (pointer: fine) {
	body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col:not(.eup-64-card) > .eup-card > .eup-card__actions {
		grid-column: auto;
		grid-row: auto;
	}

	/* The 6|4 card: its touch-screen margins (-16 px each side, section 4) on top of the grid column ran the button
	   16 px past the card's right edge (clipped by the card, but off centre). */
	body.eup-ds4.eup-cards5 #main :is(ul.products, .products.row) > .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__actions {
		grid-column: auto !important;
		grid-row: auto !important;
		margin: 0 !important;
		width: auto !important;
	}

	body.eup-ds4.eup-cards5 .eup-card:has(.eup-card__actions .added_to_cart):not(:hover):not(:has(.eup-card__actions :focus-visible)) > .eup-card__actions {
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
	}
}

body.eup-ds4.eup-cards5 .eup-card .eup-card__actions .added_to_cart {
	display: none !important;
}

body.eup-ds4.eup-cards5 .eup-card .eup-card__actions .button.added::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex: none;
	height: 16px;
	margin-right: var(--eup3-sp-2, 8px);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 16px;
}