/*
 * Design system v4: shared components and motion classes (round 2, D-251 and D-252; DESIGN-V4-PORT.md).
 *
 * Printed only under `body.eup-ds4`, after design-v4-system.css. Lane F owns these classes; the homepage
 * (Lane G) and the header and footer (Lane H) use them in their own markup. Class names are fixed by the
 * plan; element names (__x) belong to their block. Every value reads a token with today's value as the
 * fallback. Motion uses transform and opacity only; hover effects are mouse-only; the reduced-motion rule
 * in design-v4-system.css stops all of it.
 *
 * F1 = first cut: token-driven, correct sizes and states, not yet polished (F2 polishes).
 */

/* --------------------------------------------------------------------------
 * 1. Buttons: .eup-ds4-btn  --cta --primary --outline --ghost --on-dark --lg
 *
 * 48 px tall, radius 10, label 22/400 at 1920 (16 px floor). Coral and teal fills carry an indigo label
 * (6.06:1 and 8.17:1; white would be 2.72:1 and 2.01:1, Q17). Press: 98 % for an instant.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-btn {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--eup3-radius, 10px);
	box-shadow: none;
	color: var(--eup3-ink, #3d3935);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--eup3-font, "Poppins", system-ui, sans-serif);
	font-size: var(--eup3-btn-fs, 16px);
	font-weight: 400;
	gap: var(--eup3-sp-3, 12px);
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.1;
	margin: 0;
	min-height: var(--eup3-btn-h, 50px);
	padding: 0 var(--eup3-btn-pad, 24px);
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition:
		background-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		border-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		transform var(--eup3-dur-instant, 90ms) var(--eup3-ease-smooth, ease);
}

body.eup-ds4 .eup-ds4-btn:active,
body.eup-ds4 .eup-ds4-press:active {
	transform: scale(0.98);
}

body.eup-ds4 .eup-ds4-btn--cta {
	background: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
}

body.eup-ds4 .eup-ds4-btn--primary {
	background: var(--eup3-accent, #00ccb8);
	color: var(--eup3-accent-ink, #3d3935);
}

body.eup-ds4 .eup-ds4-btn--outline {
	border-color: currentColor;
	color: inherit;
}

body.eup-ds4 .eup-ds4-btn--ghost {
	color: var(--eup3-ink, #3d3935);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* On photographs and dark fills: white label and line (the 6|4 banner's outline button). */
body.eup-ds4 .eup-ds4-btn--on-dark {
	border-color: #ffffff;
	color: #ffffff;
}

/* The hero button: 68 px tall, 28/600 caps +0.12 em at 1920 (241 x 68 drawn). */
body.eup-ds4 .eup-ds4-btn--lg {
	font-size: calc(var(--eup3-btn-fs, 16px) * 1.25);
	font-weight: 600;
	letter-spacing: var(--eup3-ls-caps, 0.12em);
	min-height: calc(var(--eup3-btn-h, 50px) * 1.4167);
	padding: 0 calc(var(--eup3-btn-pad, 24px) * 1.2);
	text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-btn--cta:hover {
		background: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
		color: var(--eup3-cta-ink, #ffffff);
	}

	/* Teal turns indigo with a teal label (8.17:1): the brand pair, not a darker teal. */
	body.eup-ds4 .eup-ds4-btn--primary:hover {
		background: var(--eup3-indigo, var(--eup3-ink-strong, #3d3935));
		color: var(--eup3-accent, #ffffff);
	}

	body.eup-ds4 .eup-ds4-btn--outline:hover {
		background: var(--eup3-ink, #3d3935);
		border-color: var(--eup3-ink, #3d3935);
		color: var(--eup3-ground, #ffffff);
	}

	body.eup-ds4 .eup-ds4-btn--ghost:hover {
		text-decoration-thickness: 2px;
	}

	body.eup-ds4 .eup-ds4-btn--on-dark:hover {
		background: #ffffff;
		border-color: #ffffff;
		color: var(--eup3-indigo, var(--eup3-ink, #3d3935));
	}
}

body.eup-ds4 .eup-ds4-btn:focus-visible {
	outline: 3px solid var(--eup3-focus, #3d3935);
	outline-offset: 2px;
}

body.eup-ds4 .eup-ds4-btn--on-dark:focus-visible {
	outline-color: #ffffff;
}

body.eup-ds4 .eup-ds4-btn:disabled,
body.eup-ds4 .eup-ds4-btn[aria-disabled="true"] {
	background: var(--eup3-grey-strong, var(--eup3-pill, #e5e7e2));
	border-color: transparent;
	color: var(--eup3-ink-soft, #6b625b);
	cursor: not-allowed;
	transform: none;
}

body.eup-ds4 .eup-ds4-btn svg {
	flex: 0 0 auto;
	height: 1em;
	width: 1em;
}

/* --------------------------------------------------------------------------
 * 1b. A call to action over a photo, on phones (D-614, round 4 lane PH; owner 31 Oct: "keep it the same button
 * colors and size as the ones in the mobile folder ... those are the aporved button size and colors")
 * --------------------------------------------------------------------------
 * The approved button, measured in Mobile Mockup.pdf (1290 x 2796 = 430 px at 3x; the same on all six pages):
 * box 431.94 x 121.88, corner 17.95, white fill, "SHOP NOW" Poppins SemiBold 49.43 in ink, tracking 5.93 (0.12em),
 * 59.25 from either edge to the letters, caps centred top to bottom. In CSS px: 143.98 x 40.63, radius 5.98,
 * 16.48 px / 600, 0.12em, 19.75 px either side. CSS adds the letter space after the last letter too, so an equal
 * text-indent balances it and the padding is 19.75 px less one letter space.
 * One rule for every such button: the Balance page hero (.eup-bal-btn), the 6|4 page hero (.eup-64-btn) and the
 * olive page hero (.eup-olive-hero__btn). Each was its own ink, coral or white pill, 48 to 50 px tall with 24 px
 * sides. The homepage hero is built separately (lane HP6). Below 768 px only; :is() lifts all three to 0,4,2 so the
 * pages' own rules and palette v7's re-statements (0,2,2 to 0,3,2) give way without !important. */
@media (max-width: 767.98px) {
	html body.eup-ds4 :is(.eup-bal-hero .eup-bal-btn, .eup-64-hero .eup-64-btn, .eup-olive .eup-olive-hero .eup-olive-hero__btn) {
		align-items: center;
		background: #ffffff;
		border: 0;
		border-radius: 5.98px;
		box-sizing: border-box;
		color: #231f20;
		display: inline-flex;
		font-family: var(--eup3-font, "Poppins", system-ui, sans-serif);
		font-size: 16.48px;
		font-weight: 600;
		justify-content: center;
		letter-spacing: 0.12em;
		line-height: 1;
		/* 40.63 px from the one-line label; a longer label or a wider fallback font grows the box instead of
		   overflowing it (review, 31 Oct). */
		min-height: 40.63px;
		min-width: 143.98px;
		padding: 0 calc(19.75px - 0.12em);
		position: relative;
		text-indent: 0.12em;
		text-transform: uppercase;
	}

	/* The approved box stays 40.63 px; its tap area reaches 44.63 px (2 px above and below, invisible). */
	html body.eup-ds4 :is(.eup-bal-hero .eup-bal-btn, .eup-64-hero .eup-64-btn, .eup-olive .eup-olive-hero .eup-olive-hero__btn)::after {
		content: "";
		inset: -2px 0;
		position: absolute;
	}

	/* Keyboard focus over a photo: an ink ring on a white halo, seen on bright and dark pixels alike (the pages'
	   own white-only 3 px ring could vanish over a bright sky). */
	html body.eup-ds4 :is(.eup-bal-hero .eup-bal-btn, .eup-64-hero .eup-64-btn, .eup-olive .eup-olive-hero .eup-olive-hero__btn):focus-visible {
		box-shadow: 0 0 0 4px #ffffff;
		outline: 2px solid #231f20;
		outline-offset: 2px;
	}
}

@media (max-width: 767.98px) and (hover: hover) and (pointer: fine) {
	html body.eup-ds4 :is(.eup-bal-hero .eup-bal-btn, .eup-64-hero .eup-64-btn, .eup-olive .eup-olive-hero .eup-olive-hero__btn):hover {
		background: #f1efe6;
		color: #231f20;
	}
}

/* --------------------------------------------------------------------------
 * 2. Tabs: .eup-ds4-tabs (the tablist) and .eup-ds4-tab (role="tab")
 *
 * Pills of radius 10: inactive grey-strong with an indigo label, active teal with an indigo label.
 * The state follows aria-selected, so the markup and the script cannot disagree. Cross-fade 0.25 s.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--eup3-sp-2, 8px);
	margin: 0;
	max-width: 100%;
	overflow-x: auto;
	padding: 2px; /* room for the focus ring inside the scroller */
	scrollbar-width: none;
}

body.eup-ds4 .eup-ds4-tabs::-webkit-scrollbar {
	display: none;
}

body.eup-ds4 .eup-ds4-tab {
	align-items: center;
	background: var(--eup3-grey-strong, var(--eup3-pill, #e5e7e2));
	border: 0;
	border-radius: var(--eup3-radius, 10px);
	color: var(--eup3-ink, #3d3935);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--eup3-font, "Poppins", system-ui, sans-serif);
	font-size: var(--eup3-btn-fs, 16px);
	font-weight: 400;
	justify-content: center;
	line-height: 1.1;
	margin: 0;
	min-height: var(--eup3-btn-h, 50px);
	padding: 0 var(--eup3-btn-pad, 24px);
	text-transform: none;
	transition:
		background-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		box-shadow var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
	white-space: nowrap;
}

body.eup-ds4 .eup-ds4-tab[aria-selected="true"] {
	background: var(--eup3-accent, #00ccb8);
	color: var(--eup3-accent-ink, #3d3935);
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-tab:not([aria-selected="true"]):hover {
		box-shadow: inset 0 0 0 1px var(--eup3-accent-text, #00796d);
	}
}

body.eup-ds4 .eup-ds4-tab:focus-visible {
	outline: 3px solid var(--eup3-focus, #3d3935);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 3. Carousel arrows: .eup-ds4-arrow
 *
 * 40 px square, radius 10. Ready: teal with a night chevron. At the end of the row (disabled or
 * aria-disabled): grey-strong, the chevron at 32 % (the design's seasonal "previous"). The chevron is an
 * inline SVG the caller puts inside (currentColor, 1.5 stroke); the button carries its own name.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-arrow {
	align-items: center;
	background: var(--eup3-accent, #00ccb8);
	border: 0;
	border-radius: var(--eup3-radius, 10px);
	color: var(--eup3-night, var(--eup3-ink, #3d3935));
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	margin: 0;
	padding: 0;
	transition:
		background-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		transform var(--eup3-dur-instant, 90ms) var(--eup3-ease-smooth, ease);
	width: 40px;
}

body.eup-ds4 .eup-ds4-arrow svg {
	height: 16px;
	width: 16px;
}

body.eup-ds4 .eup-ds4-arrow:active {
	transform: scale(0.96);
}

body.eup-ds4 .eup-ds4-arrow:disabled,
body.eup-ds4 .eup-ds4-arrow[aria-disabled="true"] {
	background: var(--eup3-grey-strong, var(--eup3-pill, #e5e7e2));
	color: color-mix(in srgb, var(--eup3-night, #3d3935) 32%, transparent);
	cursor: default;
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-arrow:not(:disabled):not([aria-disabled="true"]):hover {
		background: var(--eup3-indigo, var(--eup3-ink-strong, #3d3935));
		color: var(--eup3-accent, #ffffff);
	}
}

body.eup-ds4 .eup-ds4-arrow:focus-visible {
	outline: 3px solid var(--eup3-focus, #3d3935);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 4. Badge: .eup-ds4-badge (the season label)
 *
 * Coral with an indigo caps label 500 +0.12 em (6.06:1), radius 10; an optional inline SVG icon first.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-badge {
	align-items: center;
	background: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	border-radius: var(--eup3-radius, 10px);
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
	display: inline-flex;
	font-family: var(--eup3-font, "Poppins", system-ui, sans-serif);
	font-size: var(--eup3-fs-caps, 16px);
	font-weight: 500;
	gap: var(--eup3-sp-2, 8px);
	letter-spacing: var(--eup3-ls-caps, 0.05em);
	line-height: 1;
	min-height: var(--eup3-btn-h, 50px);
	padding: 0 var(--eup3-sp-4, 16px);
	text-transform: uppercase;
	white-space: nowrap;
}

body.eup-ds4 .eup-ds4-badge svg {
	height: 1.1em;
	width: 1.1em;
}

/* --------------------------------------------------------------------------
 * 5. Section heading row: .eup-ds4-head
 *    __eyebrow (optional)  __title  __line (optional)  __link (optional, "View all", at the end)
 *
 * Title 48/400/1.2 at 1920 in the large-text teal (3.02:1, used only at 24 px and up; the floor is
 * 33.6 px). Eyebrow 27/300 title case in the text teal (4.5:1 at every size). The line is a lead
 * 21/400/1.5 in indigo. The link sits at the end of the row, underlined.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-head {
	align-items: end;
	column-gap: var(--eup3-sp-6, 24px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0 0 var(--eup3-space-block, 32px);
	row-gap: var(--eup3-sp-2, 8px);
}

body.eup-ds4 .eup-ds4-head > :not(.eup-ds4-head__link) {
	grid-column: 1;
}

body.eup-ds4 .eup-ds4-head__eyebrow {
	color: var(--eup3-accent-text, #00796d);
	font-size: var(--eup3-fs-h4, 22px);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--eup3-lh-heading, 1.2);
	margin: 0;
	text-transform: none;
}

body.eup-ds4 .eup-ds4-head__title {
	color: var(--eup3-accent-large, var(--eup3-accent-text, #00796d));
	font-family: var(--eup3-font, "Poppins", system-ui, sans-serif);
	font-size: var(--eup3-fs-display, 34px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--eup3-lh-heading, 1.2);
	margin: 0;
	text-wrap: balance;
}

body.eup-ds4 .eup-ds4-head__line {
	color: var(--eup3-ink, #3d3935);
	font-size: var(--eup3-fs-lead, 16px);
	font-weight: 400;
	line-height: var(--eup3-lh-body, 1.5);
	margin: 0;
	max-width: 62ch;
}

body.eup-ds4 .eup-ds4-head__link {
	align-self: end;
	color: var(--eup3-ink, #3d3935);
	font-size: var(--eup3-fs-small, 16px);
	font-weight: 400;
	grid-column: 2;
	grid-row: 1 / -1;
	justify-self: end;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-head__link:hover {
		color: var(--eup3-accent-text, #00796d);
	}
}

@media (max-width: 767.98px) {
	body.eup-ds4 .eup-ds4-head {
		grid-template-columns: minmax(0, 1fr);
	}

	body.eup-ds4 .eup-ds4-head__link {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}
}

/* --------------------------------------------------------------------------
 * 6. Product card: .eup-ds4-card (__media __body __brand __name __price) and .eup-ds4-card-cta
 *
 * Grey card, radius 10, the cut-out pack shot centred, brand, name and price centred below (374 x 493
 * at 1920). The coral "Add to cart" bar runs the full card width over the text block, as drawn: on pointer
 * hover the text fades out under it; for the keyboard it shows when the bar itself has focus (so it never
 * covers a focused name link); on touch screens it is always shown, below the text. The bar
 * keeps WooCommerce's AJAX link classes in the caller's markup; only its box is styled here. It is never
 * visibility:hidden, so it stays in the tab order.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-card {
	background: var(--eup3-grey, var(--eup3-surface, #f0f0ee));
	border-radius: var(--eup3-radius, 10px);
	color: var(--eup3-ink, #3d3935);
	display: flex;
	flex-direction: column;
	isolation: isolate;
	overflow: hidden;
	position: relative;
	text-align: center;
}

body.eup-ds4 .eup-ds4-card__media {
	align-items: center;
	aspect-ratio: 374 / 380;
	display: flex;
	justify-content: center;
	padding: var(--eup3-sp-6, 24px) var(--eup3-sp-6, 24px) 0;
}

body.eup-ds4 .eup-ds4-card__media img {
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: contain;
	width: 100%;
}

body.eup-ds4 .eup-ds4-card__body {
	display: grid;
	gap: 2px;
	padding: var(--eup3-sp-3, 12px) var(--eup3-sp-4, 16px) var(--eup3-sp-6, 24px);
	transition: opacity var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
}

body.eup-ds4 .eup-ds4-card__brand {
	color: var(--eup3-ink, #3d3935);
	font-size: var(--eup3-fs-micro, 13px);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
}

body.eup-ds4 .eup-ds4-card__name {
	color: var(--eup3-ink, #3d3935);
	font-size: var(--eup3-fs-card-name, 15px);
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: normal;
	text-wrap: balance;
	/* Two lines at most, so the bar always covers the whole text block. */
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

body.eup-ds4 .eup-ds4-card__name a {
	color: inherit;
	text-decoration: none;
}

/* The whole card is the link target for a pointer; keyboard users get the name link and the bar. */
body.eup-ds4 .eup-ds4-card__name a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 0;
}

body.eup-ds4 .eup-ds4-card__price,
body.eup-ds4 .eup-ds4-card__price .amount,
body.eup-ds4 .eup-ds4-card__price span.amount {
	color: var(--eup3-ink, #3d3935) !important; /* site-legacy.css span.amount !important */
	font-size: var(--eup3-fs-card-price, 15px);
	font-weight: 300 !important;
	margin: 0;
}

body.eup-ds4 .eup-ds4-card__price del,
body.eup-ds4 .eup-ds4-card__price del span.amount {
	color: var(--eup3-ink-soft, #6b625b) !important;
}

body.eup-ds4 .eup-ds4-card-cta {
	align-items: center;
	background: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	border: 0;
	border-radius: 0;
	bottom: var(--eup3-sp-10, 40px);
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
	display: flex;
	font-family: var(--eup3-font, "Poppins", system-ui, sans-serif);
	font-size: var(--eup3-fs-card-name, 15px);
	font-weight: 500;
	justify-content: center;
	left: 0;
	letter-spacing: 0;
	line-height: 1.1;
	margin: 0;
	min-height: var(--eup3-btn-h, 50px);
	opacity: 0;
	padding: 0 var(--eup3-sp-4, 16px);
	position: absolute;
	right: 0;
	text-decoration: none;
	text-transform: none;
	transform: translateY(8px);
	transition:
		opacity var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		transform var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease),
		background-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
	z-index: 1;
}

body.eup-ds4 .eup-ds4-card .eup-ds4-card-cta:focus-visible,
body.eup-ds4 .eup-ds4-imgcard:focus-within .eup-ds4-card-cta {
	opacity: 1;
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-card:has(.eup-ds4-card-cta:focus-visible) .eup-ds4-card__body {
		opacity: 0;
	}
}

body.eup-ds4 .eup-ds4-card-cta:focus-visible {
	outline: 3px solid var(--eup3-focus, #3d3935);
	outline-offset: -3px;
}

body.eup-ds4 .eup-ds4-card-cta.loading {
	opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-card:hover .eup-ds4-card-cta,
	body.eup-ds4 .eup-ds4-imgcard:hover .eup-ds4-card-cta {
		opacity: 1;
		transform: none;
	}

	body.eup-ds4 .eup-ds4-card:hover .eup-ds4-card__body {
		opacity: 0;
	}

	body.eup-ds4 .eup-ds4-card-cta:hover {
		background: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
	}
}

/* Touch screens: no hover to reveal it, so the bar is always there, under the text. */
@media (hover: none), (pointer: coarse) {
	body.eup-ds4 .eup-ds4-card .eup-ds4-card-cta {
		bottom: auto;
		margin-top: auto;
		opacity: 1;
		position: relative;
		transform: none;
	}

	body.eup-ds4 .eup-ds4-imgcard .eup-ds4-card-cta {
		opacity: 1;
		transform: none;
	}

	body.eup-ds4 .eup-ds4-card .eup-ds4-card__body {
		opacity: 1;
	}
}

/* WooCommerce's "View cart" link after an add: small, under the bar's place, readable. */
body.eup-ds4 .eup-ds4-card .added_to_cart {
	color: var(--eup3-ink, #3d3935);
	font-size: var(--eup3-fs-micro, 13px);
	padding: 0 0 var(--eup3-sp-3, 12px);
	position: relative;
	text-decoration: underline;
	z-index: 1;
}

/* --------------------------------------------------------------------------
 * 7. Photo card with a label: .eup-ds4-imgcard (__media __label)
 *
 * Photograph, radius 10, a dark scrim from the top behind the white brand lockup (__label: an <img> or inline
 * SVG of the brand's mark, as the design draws it; uppercase text only as the fallback), and an
 * optional coral bar (.eup-ds4-card-cta, a link) near the bottom, revealed like the product card's.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-imgcard {
	aspect-ratio: 519 / 685;
	border-radius: var(--eup3-radius, 10px);
	color: #ffffff;
	display: block;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

body.eup-ds4 .eup-ds4-imgcard__media,
body.eup-ds4 .eup-ds4-imgcard__media img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

body.eup-ds4 .eup-ds4-imgcard::before {
	background: linear-gradient(180deg, color-mix(in srgb, var(--eup3-night, #0d1922) 55%, transparent) 0%, transparent 45%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

body.eup-ds4 .eup-ds4-imgcard__label {
	color: #ffffff;
	font-size: var(--eup3-fs-caps, 16px);
	font-weight: 400;
	left: 0;
	letter-spacing: var(--eup3-ls-caps, 0.05em);
	margin: 0;
	padding: var(--eup3-sp-8, 32px) var(--eup3-sp-6, 24px) 0;
	position: absolute;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	z-index: 2;
}

/* Photo cards: the label slot also takes a brand lockup image (the design draws the Balance, 6|4 and Timeless
   marks); uppercase text is the fallback when no lockup exists. */
body.eup-ds4 .eup-ds4-imgcard__label img,
body.eup-ds4 .eup-ds4-imgcard__label svg {
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: 96px;
	max-width: 70%;
}

body.eup-ds4 .eup-ds4-imgcard .eup-ds4-card-cta {
	bottom: var(--eup3-sp-6, 24px);
	font-size: var(--eup3-fs-card-name, 15px);
	z-index: 3;
}

/* --------------------------------------------------------------------------
 * 8. Tile: .eup-ds4-tile (__icon __label), the Shop by Need square
 *
 * Mint square, radius 10, an indigo line icon centred, the label in caps below it. The design draws the label
 * in teal; teal text on mint is 4.26:1 even in the darker text teal, so the label takes the deep green of the
 * same palette (6.3:1).
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-ds4-tile {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--eup3-mint, var(--eup3-sage, #d1dfd9));
	border-radius: var(--eup3-radius, 10px);
	color: var(--eup3-indigo, var(--eup3-ink, #3d3935));
	display: flex;
	flex-direction: column;
	gap: var(--eup3-sp-4, 16px);
	justify-content: center;
	padding: var(--eup3-sp-4, 16px);
	text-align: center;
	text-decoration: none;
	transition: box-shadow var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
}

body.eup-ds4 .eup-ds4-tile__icon {
	color: var(--eup3-indigo, var(--eup3-ink, #3d3935));
	height: auto;
	max-height: 36%;
	width: 36%;
}

body.eup-ds4 .eup-ds4-tile__label {
	color: var(--eup3-deep, var(--eup3-accent-text, #00796d));
	font-size: var(--eup3-fs-h5, 16px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
	margin: 0;
	text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-tile:hover {
		box-shadow: inset 0 0 0 1px var(--eup3-accent-text, #00796d);
	}
}

body.eup-ds4 .eup-ds4-tile:focus-visible {
	outline: 3px solid var(--eup3-focus, #3d3935);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 9. Motion classes (D-251)
 *
 * .eup-ds4-reveal  fade and rise 24 px, once, as the block scrolls in (assets/js/design-v4.js). The
 *                  hidden state exists only while the script has armed the element (`is-armed`), so a
 *                  page without the script, or a block already on screen, is simply visible.
 *                  Children of [data-eup-ds4-stagger] follow 70 ms apart (first five).
 * .eup-ds4-lift    cards rise 3 px under a mouse.
 * .eup-ds4-zoom    the image inside grows 3 % under a mouse (the box clips it).
 * .eup-ds4-press   98 % for an instant while pressed (buttons have it built in).
 * Reduced motion: none of the hidden states apply and every transition is 0.001 ms (design-v4-system.css).
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	body.eup-ds4 .eup-ds4-reveal.is-armed {
		opacity: 0;
		transform: translateY(24px);
	}

	body.eup-ds4 .eup-ds4-reveal.is-armed.is-in {
		opacity: 1;
		transform: none;
		transition:
			opacity var(--eup3-dur-reveal, 1s) var(--eup3-ease-reveal, ease-out) var(--eup-ds4-delay, 0s),
			transform var(--eup3-dur-reveal, 1s) var(--eup3-ease-reveal, ease-out) var(--eup-ds4-delay, 0s);
	}
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-ds4-lift {
		transition: transform var(--eup3-dur-med, 0.35s) var(--eup3-ease-smooth, ease);
	}

	body.eup-ds4 .eup-ds4-lift:hover {
		transform: translateY(-3px);
	}

	body.eup-ds4 .eup-ds4-zoom img {
		transition: transform var(--eup3-dur-reveal, 1s) var(--eup3-ease-reveal, ease-out);
	}

	body.eup-ds4 .eup-ds4-zoom:hover img {
		transform: scale(1.03);
	}
}

body.eup-ds4 .eup-ds4-zoom {
	overflow: hidden;
}

body.eup-ds4 .eup-ds4-press {
	transition: transform var(--eup3-dur-instant, 90ms) var(--eup3-ease-smooth, ease);
}