/*
 * Design system v4: global elements (round 2, D-250 and D-251; DESIGN-V4-PORT.md).
 *
 * Printed only while `body.eup-ds4` is set (inc/enqueue-design-v4.php), after design-v4-tokens.css.
 * Every rule is scoped to body.eup-ds4; existing surface sheets are not edited. Sections: 1 reduced motion,
 * 2 placeholders, 3 content box, 4 type, 5 links and browser surfaces, 6 fields, 7 buttons, 8 price and
 * badges, 9 the shop card; F3 hard cases (D-253): 10 the parent theme, 11 the private token prefixes, 12 the
 * cookie banner, 13 the block cart and checkout. The focus ring is system v3's (3 px --eup3-focus, now
 * indigo). The admin bar is never styled; the reduced-motion rule's universal selector reaches it (harmless).
 */

/* --------------------------------------------------------------------------
 * 1. Reduced motion, every page under v4 (D-251)
 *
 * Restores what system-v2.css section 15 did before system v3 retired it: under the visitor's
 * reduced-motion setting every animation and transition lasts 0.001 ms with no delay (so transitionend and
 * animationend still fire and no script waits forever) and smooth scrolling becomes a jump. This also
 * covers site-legacy.css, the parent theme and plugins, which have no reduced-motion rule of their own.
 * The flag-independent fix for the release is R-61.
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html:has(> body.eup-ds4),
	body.eup-ds4,
	body.eup-ds4 *,
	body.eup-ds4 *::before,
	body.eup-ds4 *::after {
		animation-delay: 0s !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------------------
 * 2. Placeholders (unconfirmed facts) under v4
 *
 * system-v3.css paints `.eup-placeholder` on --eup3-cream; under v4 cream is the warm white #fef9f7,
 * which no longer reads on a white page. The marker takes the inactive-control grey and a coral dotted
 * underline instead, so a pending fact still never reads as a published one (ink on grey-strong 14:1).
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-placeholder {
	background: var(--eup3-grey-strong, var(--eup3-cream, #f3ebd6));
	color: var(--eup3-ink, #3d3935);
	text-decoration-color: var(--eup3-cta, currentColor);
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
 * 3. The content box (D-250)
 *
 * The design's content is 1612 px of 1920 (154 px margins). --eup3-wrap and --eup3-gutter carry it
 * (design-v4-tokens.css); the surfaces built before system v3 declare their own --eup-wrap (1400 or 1440 px)
 * on their root class, so it is pointed at --eup3-wrap on those roots. The header and the footer keep theirs
 * (Lane H's surfaces this round).
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-home,
body.eup-ds4 .eup-shop,
body.eup-ds4 .eup-product-v2,
body.eup-ds4 .eup-product-v3,
body.eup-ds4 .eup-farmpage,
body.eup-ds4 .eup-landing,
body.eup-ds4 .eup-stdpage,
body.eup-ds4 .eup-brandspage,
body.eup-ds4 .eup-legal,
body.eup-ds4 .eup-capture {
	--eup-wrap: var(--eup3-wrap, 1400px);
}

/* --------------------------------------------------------------------------
 * 4. Type (D-250)
 *
 * The scale of section 5a, fluid from 360 to 1920 px with floors (running text never under 16 px, captions
 * never under 13). Running text 1.5, headings 1.2 (A21). Weight 200 never under 24 px (A22): v3's ExtraLight
 * display titles become Regular, as drawn. Element rules use one element of specificity (0,0,1), so the
 * parent theme's element defaults give way and every surface's own class rules still win.
 * ----------------------------------------------------------------------- */

:where(body.eup-ds4) :is(p, li, dd, dt, td, th, blockquote, address, label, figcaption) {
	line-height: var(--eup3-lh-body, 1.5);
}

:where(body.eup-ds4) :is(.entry-content, .page-inner, .term-description, .woocommerce-product-details__short-description) :is(p, li) {
	font-size: var(--eup3-fs-body, 16px);
	font-weight: 300;
	max-width: 72ch;
}

:where(body.eup-ds4) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--eup3-ink, #3d3935);
	letter-spacing: 0;
	line-height: var(--eup3-lh-heading, 1.2);
	text-wrap: balance;
}

:where(body.eup-ds4) h1 {
	font-size: var(--eup3-fs-display, 34px);
	font-weight: 400;
}

:where(body.eup-ds4) h2 {
	font-size: var(--eup3-fs-h2, 27px);
	font-weight: 400;
}

:where(body.eup-ds4) h3 {
	font-size: var(--eup3-fs-h4, 20px);
	font-weight: 500;
}

:where(body.eup-ds4) h4 {
	font-size: var(--eup3-fs-h5, 19px);
	font-weight: 500;
}

:where(body.eup-ds4) :is(h5, h6) {
	font-size: var(--eup3-fs-body, 16px);
	font-weight: 500;
}

/* Display titles: v3 set them ExtraLight in the accent; v4 draws section and page titles 400 in the
   large-text teal (3.02:1, used only at 24 px and up: the display floor is 33.6 px). */
body.eup-ds4 .eup3-display,
body.eup-ds4 .eup-display,
body.eup-ds4 .eup-shop .eup-shop__title {
	color: var(--eup3-accent-large, var(--eup3-accent-text, #00796d));
	font-weight: 400;
	line-height: var(--eup3-lh-heading, 1.12);
}

/* Small uppercase labels: 600 with the design's +0.12 em. */
body.eup-ds4 .eup3-eyebrow {
	letter-spacing: var(--eup3-ls-caps, 0.05em);
}

/* --------------------------------------------------------------------------
 * 5. Links, selection, scrollbars, numerals
 * ----------------------------------------------------------------------- */

body.eup-ds4 :where(.entry-content, .page-inner, .term-description, .eup-shop__desc, .woocommerce-product-details__short-description, .eup-acc__body, .woocommerce-privacy-policy-text, .woocommerce-info, .woocommerce-message) :where(a:not(.button):not([class*="btn"])) {
	text-decoration-color: var(--eup3-accent, currentColor);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease), text-decoration-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 :where(.entry-content, .page-inner, .term-description, .eup-shop__desc, .woocommerce-product-details__short-description, .eup-acc__body) :where(a:not(.button):not([class*="btn"])):hover {
		color: var(--eup3-accent-text, #00796d);
		text-decoration-color: currentColor;
	}
}

html:has(> body.eup-ds4) {
	scrollbar-color: var(--eup3-muted, #a99787) transparent;
}

body.eup-ds4 :where(.price, .amount, .woocommerce-Price-amount, .wc-block-components-formatted-money-amount, .cart_totals, .shop_table) {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
 * 6. Fields
 *
 * The design draws fields with a thin indigo line and radius 10. A field's edge must reach 3:1 against the
 * page (WCAG 1.4.11): the soft indigo (5.6:1 on white) is used; the hairline token (1.36:1) is not enough.
 * Colour, line and radius only: no box size changes, so every template keeps its layout.
 * ----------------------------------------------------------------------- */

body.eup-ds4 :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], select, textarea) {
	border-color: var(--eup3-ink-soft, #6b625b);
	border-radius: var(--eup3-radius-field, 12px);
}

body.eup-ds4 :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], select, textarea):focus {
	border-color: var(--eup3-ink, #3d3935);
}

/* --------------------------------------------------------------------------
 * 7. Buttons (system v3's contract, redrawn)
 *
 * Radius 10 instead of the pill, 48 px, label 400 (the design's buttons are Regular), no chevron (the design
 * has none). Teal buttons hover to indigo with a teal label. Commerce buttons (add to bag, checkout, place
 * order) are coral with an indigo label, as the design's Add to cart and SHOP NOW. The header pill and
 * chips keep --eup3-radius-pill.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup3-btn,
body.eup-ds4 .eup-btn {
	border-radius: var(--eup3-radius, 999px);
	font-weight: 400;
	gap: var(--eup3-sp-3, 12px);
	letter-spacing: 0;
}

body.eup-ds4 .eup3-btn {
	font-weight: 600;
	letter-spacing: var(--eup3-ls-caps, 0.02em);
}

body.eup-ds4 .eup3-btn::after,
body.eup-ds4 .eup-btn:not(.eup-btn--outline):not(.eup-btn--secondary):not(.eup-atc)::after {
	content: none;
}

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

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

body.eup-ds4 :where(.button, button.button, a.button, input.button, .single_add_to_cart_button, .checkout-button, #place_order, .wc-block-components-button:not(.is-link), .wp-block-button__link, .button.primary, .button.alt) {
	border-radius: var(--eup3-radius, 999px);
	font-weight: 400;
	letter-spacing: 0;
}

body.eup-ds4 :where(.single_add_to_cart_button, .checkout-button, #place_order, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button, .eup-atc) {
	background-color: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	border-color: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 :where(.single_add_to_cart_button, .checkout-button, #place_order, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button, .eup-atc):hover {
		background-color: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
		border-color: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
		color: var(--eup3-cta-ink, #ffffff);
	}

	body.eup-ds4 :where(.button.primary, .button.alt, button.alt, .wp-block-button__link):not(.single_add_to_cart_button):not(.checkout-button):not(#place_order):hover {
		background-color: var(--eup3-indigo, var(--eup3-ink-strong, #3d3935));
		border-color: var(--eup3-indigo, var(--eup3-ink-strong, #3d3935));
		color: var(--eup3-accent, #ffffff);
	}
}

body.eup-ds4 .eup-atc.eup-btn {
	border-radius: var(--eup3-radius, 999px);
}

/* Classic checkout and cart commerce buttons (round 3 Lane K, K-1, D-415, 23 Oct 2026). Flatsome paints
   `.button.alt` (0,2,0) with --fs-color-secondary, which system v3 points at --eup3-ink (indigo under v4), while the
   :where() rule above (0,1,1) still wins the label colour (indigo): the Place order label read 1:1. These selectors
   outrank Flatsome without !important. Not behind the checkout v4 flag: it ships with design v4. */
body.eup-ds4 #place_order,
body.eup-ds4 .wc-proceed-to-checkout .checkout-button.button.alt {
	background-color: var(--eup3-cta, #f4795b);
	border-color: var(--eup3-cta, #f4795b);
	color: var(--eup3-cta-ink, #1d1848);
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 #place_order:hover,
	body.eup-ds4 .wc-proceed-to-checkout .checkout-button.button.alt:hover {
		background-color: var(--eup3-cta-hover, #e36a4c);
		border-color: var(--eup3-cta-hover, #e36a4c);
		color: var(--eup3-cta-ink, #1d1848);
	}
}

/* --------------------------------------------------------------------------
 * 8. Price and badges
 * ----------------------------------------------------------------------- */

/* site-legacy.css forces every span.amount to #4D4D4F with !important. */
body.eup-ds4 :where(.price, .woocommerce-Price-amount, .eup-buy__price) span.amount {
	color: var(--eup3-ink, #3d3935) !important;
}

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

/* Sale and status badges: coral with an indigo caps label, radius 10 (the design's FALL badge). */
body.eup-ds4 :where(.onsale, .badge-inner, .wc-block-components-product-badge, .wc-block-components-sale-badge) {
	background: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	border: 0;
	border-radius: var(--eup3-radius, 10px);
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
	font-weight: 500;
	letter-spacing: var(--eup3-ls-caps, 0.05em);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * 9. The shop card (.eup-card: shop, categories, brands, search)
 *
 * The existing markup keeps its layout (brand, name, price, the round add-to-bag disc beside the price; left
 * aligned for scanning a grid beside the filters). v4 redraws it: radius 10 (token), brand 13/400 indigo,
 * name 500 (the design's card name), price 300, and the disc in coral with an indigo glyph, so every add to
 * bag on the site is the same coral.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-card .eup-card__brand {
	color: var(--eup3-ink, #3d3935);
	font-size: var(--eup3-fs-card-brand, 13px);
	font-weight: 400;
	letter-spacing: 0;
}

body.eup-ds4 .eup-card .eup-card__name {
	font-weight: 500;
	line-height: 1.3;
}

body.eup-ds4 .eup-card .eup-card__price,
body.eup-ds4 .eup-card .eup-card__price .amount,
body.eup-ds4 .eup-card .eup-card__price ins,
body.eup-ds4 .eup-card .eup-card__price span.amount {
	font-weight: 300 !important; /* site-legacy.css span.amount !important */
}

body.eup-ds4 .eup-card .eup-card__actions .button,
body.eup-ds4 .eup-card .eup-card__actions a.button,
body.eup-ds4 .eup-card .eup-card__actions .eup-card__action {
	background-color: var(--eup3-cta, var(--eup3-ink-strong, #3d3935));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.9 45.9'%3E%3Cpath fill='%231d1848' d='M17.83,30.54h11.55c.45,0,.83-.37.83-.85s-.38-.87-.83-.87h-11.38c-.52,0-.87-.4-.94-.96l-1.58-10.88c-.13-.89-.43-1.33-1.59-1.33h-3.43c-.45,0-.84.38-.84.85s.4.85.84.85h3.25l1.55,10.72c.23,1.5,1.03,2.46,2.57,2.46ZM15.94,26.97h13.52c1.52,0,2.32-.96,2.55-2.46l.78-5.2c.03-.13.04-.29.04-.38,0-.52-.4-.88-.99-.88H15.15v1.72h15.72l-.65,4.52c-.09.57-.41.97-.96.97h-13.34v1.71Z'/%3E%3C/svg%3E");
	border-radius: var(--eup3-radius, 50%);
	transition: background-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
}

body.eup-ds4 .eup-card .eup-card__actions .button:hover,
body.eup-ds4 .eup-card .eup-card__actions a.button:hover,
body.eup-ds4 .eup-card .eup-card__actions .button:focus-visible {
	background-color: var(--eup3-cta-hover, var(--eup3-accent, #00ccb8));
}

body.eup-ds4 .eup-card .eup-card__actions .button.added {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.9 45.9'%3E%3Cpath d='M15.5 23.5l5 5 10-10.5' fill='none' stroke='%231d1848' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The product page's add to bag and its sticky twin: product-finish-v1.css draws them indigo with a white
   label at (0,4,1); v4 matches that selector with its own class so they are coral like every add to bag.
   The disabled looks (aria-disabled, :disabled, .disabled) are left alone. */
body.eup-ds4.eup-pf1 .eup-product-v3 .eup-buy__form .single_add_to_cart_button:not([aria-disabled="true"]):not(:disabled):not(.disabled),
body.eup-ds4.eup-pf1 .eup-sticky .eup-sticky__add.eup-btn:not([aria-disabled="true"]):not(:disabled):not(.disabled) {
	background: var(--eup3-cta, var(--eup3-ink-strong, #3d3935));
	color: var(--eup3-cta-ink, #ffffff);
}

body.eup-ds4.eup-pf1 .eup-product-v3 .eup-buy__form .single_add_to_cart_button,
body.eup-ds4.eup-pf1 .eup-sticky .eup-sticky__add.eup-btn {
	border-radius: var(--eup3-radius, 999px);
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4.eup-pf1 .eup-product-v3 .eup-buy__form .single_add_to_cart_button:not([aria-disabled="true"]):not(:disabled):not(.disabled):hover,
	body.eup-ds4.eup-pf1 .eup-sticky .eup-sticky__add.eup-btn:not([aria-disabled="true"]):not(:disabled):not(.disabled):hover {
		background: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
		color: var(--eup3-cta-ink, #ffffff);
	}
}

/* 9b. The shop card as the design draws it: brand, name and price centred, and the add control as the
   full-width coral bar showing its own words ("Add to cart", "Choose a size"). It behaves like the homepage
   card (.eup-ds4-card, D-252; tech lead D-305, 2026-10-15): hidden at rest, over the text block on mouse hover
   and when the button itself has keyboard focus; on touch screens (no hover) always shown under the price.
   WooCommerce's link, classes and AJAX are unchanged. */
body.eup-ds4 .eup-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--eup3-sp-6, 24px) var(--eup3-sp-4, 16px) 0;
	position: relative;
	text-align: center;
}

body.eup-ds4 .eup-card > .eup-card__price {
	grid-column: 1 / -1;
	justify-self: center;
}

/* The bar sits at the foot of the card, so bars line up across a row whatever the name's length. */
body.eup-ds4 .eup-card > .eup-card__actions {
	align-items: stretch;
	align-self: stretch; /* system v3 centres the box, which a flex column would shrink to the label */
	margin: auto calc(-1 * var(--eup3-sp-4, 16px)) 0;
	padding-top: var(--eup3-sp-3, 12px);
}

body.eup-ds4 .eup-card .eup-card__actions .button,
body.eup-ds4 .eup-card .eup-card__actions a.button,
body.eup-ds4 .eup-card .eup-card__actions .eup-card__action {
	align-items: center;
	background-color: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	background-image: none;
	border-radius: 0;
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
	display: flex;
	font-size: var(--eup3-fs-card-price, 15px);
	font-weight: 500;
	height: auto;
	justify-content: center;
	line-height: 1.2;
	min-height: var(--eup3-btn-h, 48px);
	overflow: visible;
	padding: var(--eup3-sp-2, 8px) var(--eup3-sp-4, 16px);
	text-indent: 0;
	white-space: normal;
	width: 100%;
}

body.eup-ds4 .eup-card .eup-card__actions .button.added {
	background-image: none;
}

body.eup-ds4 .eup-card .eup-card__actions .added_to_cart {
	padding: var(--eup3-sp-2, 8px) 0;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 .eup-card {
		padding-bottom: var(--eup3-sp-6, 24px);
	}

	body.eup-ds4 .eup-card > .eup-card__brand,
	body.eup-ds4 .eup-card > .eup-card__name,
	body.eup-ds4 .eup-card > .eup-card__price,
	body.eup-ds4 .eup-card > .eup-card__stock {
		transition: opacity var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
	}

	body.eup-ds4 .eup-card > .eup-card__actions {
		bottom: var(--eup3-sp-6, 24px);
		left: 0;
		margin: 0;
		opacity: 0;
		padding: 0;
		position: absolute;
		right: 0;
		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);
		z-index: 1;
	}

	body.eup-ds4 .eup-card:hover > .eup-card__actions,
	body.eup-ds4 .eup-card:has(.eup-card__actions :focus-visible) > .eup-card__actions,
	body.eup-ds4 .eup-card:has(.eup-card__actions .added_to_cart) > .eup-card__actions {
		opacity: 1;
		transform: none;
	}

	body.eup-ds4 .eup-card:hover > :is(.eup-card__brand, .eup-card__name, .eup-card__price, .eup-card__stock),
	body.eup-ds4 .eup-card:has(.eup-card__actions :focus-visible) > :is(.eup-card__brand, .eup-card__name, .eup-card__price, .eup-card__stock) {
		opacity: 0;
	}

	body.eup-ds4 .eup-card .eup-card__actions .added_to_cart {
		background: var(--eup3-grey, var(--eup3-surface, #f0f0ee));
		display: block;
	}
}

/* 9c. Product grids fill their content box (tech lead, 2026-10-15). Beside the filter rail (shop, categories,
   tags, brands, search; shop-v2.css sets 4 columns from 1024): 5 columns from 1600 px. Flatsome product rows
   anywhere else in the page content: 2 columns on phones, 3 from 768, 4 from 1100, 5 from 1440. Gutters on the
   v4 scale. */
body.eup-ds4 .eup-shop .eup-shop__main :is(ul.products, .products.row) {
	column-gap: var(--eup3-sp-6, 24px);
	max-width: none;
	row-gap: var(--eup3-sp-6, 24px);
	width: 100%;
}

@media (min-width: 1600px) {
	body.eup-ds4 .eup-shop .eup-shop__main :is(ul.products, .products.row) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *) {
	display: grid;
	gap: var(--eup3-sp-6, 24px) var(--eup3-sp-4, 16px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *) > * {
	flex-basis: auto;
	margin: 0;
	max-width: none;
	padding: 0;
	width: auto;
}

@media (min-width: 768px) {
	body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *) {
		column-gap: var(--eup3-sp-6, 24px);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Short rows (Lane J finish review, 2026-10-15): a row with fewer cards than columns (the product page's related
   and upsell rows hold 2 or 4) takes as many columns as it has cards. Three or more fill the width; one or two
   are centred at the width of a card in a row of three (half the row on phones), so the cards do not grow past
   the design's size. */
body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *):has(> :nth-child(1):last-child) {
	grid-template-columns: repeat(1, minmax(0, calc((100% - var(--eup3-sp-4, 16px)) / 2)));
	justify-content: center;
}

@media (min-width: 768px) {
	body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *):has(> :nth-child(1):last-child) {
		grid-template-columns: repeat(1, minmax(0, calc((100% - 2 * var(--eup3-sp-6, 24px)) / 3)));
	}

	body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *):has(> :nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * var(--eup3-sp-6, 24px)) / 3)));
		justify-content: center;
	}
}

@media (min-width: 1100px) {
	body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *):has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	body.eup-ds4 #main :is(ul.products, .products.row):not(.eup-shop__main *):has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
 * F3: the hard cases (D-253). Still only under body.eup-ds4, still no existing file edited.
 * ======================================================================== */

/* --------------------------------------------------------------------------
 * 10. The parent theme (Flatsome)
 *
 * Flatsome prints `:root { --fs-color-primary … --fs-color-base: #4a4a4a; --fs-color-success: #627D47 … }`
 * inline after every child sheet, so its names are set on body (system v3 already re-points primary,
 * secondary and the link colours there; they follow the v4 tokens). v4 adds the base text and success
 * colours, and the 1320 px Flatsome container (`.container`, `.row`, also printed inline) on pages built
 * from Flatsome rows (cart, checkout, account, wishlist, 404): inside #main only (the header and footer are
 * untouched), the container takes the v4 gutter as its padding and the v4 width as its content, so the
 * content is 1312 px at 1440 and the drawn 1612 at 1920, like every other v4 page.
 * ----------------------------------------------------------------------- */

body.eup-ds4 {
	--fs-color-base: var(--eup3-ink, #4a4a4a);
	--fs-color-success: var(--eup3-deep, #627d47);
}

body.eup-ds4 #main :is(.container, .container-width) {
	max-width: calc(var(--eup3-wrap, 1290px) + 2 * var(--eup3-gutter, 15px));
	padding-left: var(--eup3-gutter, 15px);
	padding-right: var(--eup3-gutter, 15px);
}

/* Rows outside a container carry Flatsome's 15 px column padding on each side. Product grids are excluded:
   they fill their own content box (section 9c). */
body.eup-ds4 #main .row:not(.container .row):not(.row .row):not(.products) {
	max-width: min(calc(var(--eup3-wrap, 1290px) + 30px), calc(100% - 2 * var(--eup3-gutter, 0px) + 30px));
}

/* --------------------------------------------------------------------------
 * 11. The private token prefixes (D-253; inv-system.md section 1a)
 *
 * --h3-*, --n5-*, --r5-* already read --eup3-* names; --std-* reads the --eup-* names system v3 re-maps.
 * The literal ones are re-pointed on their own roots:
 *   --s5-*   the home Standard band (home-sections-v2.css): the deep green band, white title and rules.
 *   --bm2-*  Body Map v2's dark ground and glass: from green-grey to the design's near-black.
 *   --b1-*   the Brands index: hairline, field outline (non-text 3:1) and the dimmed letter.
 *   --std-*  the Standard page's deep band follows the design's deep green, not the indigo --eup-deep.
 * --n6-hairline (#8f9595, a neutral grey ring at 3.1:1) is kept: it reads with either palette.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .eup-home3 .eup5-standard {
	--s5-band: var(--eup3-deep, #00796d);
	--s5-deep: color-mix(in srgb, var(--eup3-deep, #005f55) 70%, var(--eup3-night, #000000));
	--s5-cream: var(--eup3-mint, #f3ebd6);
	--s5-title: var(--eup3-deep-ink, #f6efdc);
	--s5-rule: color-mix(in srgb, var(--eup3-deep-ink, #ffffff) 30%, transparent);
}

body.eup-ds4 .eup-bm2 {
	--bm2-ground: var(--eup3-night, #27302d);
	--bm2-glass: color-mix(in srgb, var(--eup3-night, #283431) 80%, transparent);
	--bm2-glass-top: color-mix(in srgb, var(--eup3-night, #323e3b) 86%, transparent);
}

body.eup-ds4 .eup-b1 {
	--b1-line: var(--eup3-line, #d9d4cc);
	--b1-field: var(--eup3-ink-soft, #948a80);
	--b1-off: var(--eup3-muted, #b5b0a9);
}

body.eup-ds4 .eup-stdpage {
	--std-deep: var(--eup3-deep, #123f3a);
	--std-deepest: color-mix(in srgb, var(--eup3-deep, #0c2b27) 70%, var(--eup3-night, #000000));
}

/* --------------------------------------------------------------------------
 * 12. The cookie banner (Complianz, theme consent.css), staging under v4 only
 *
 * Decline and Accept become the same button, side by side, Decline first, at every width (today Decline
 * is a text link on desktop and a button on phones). Manage and "Do Not Sell or Share" sit beneath as text
 * links. Presentation only: every control is still Complianz's own element with its own handler; no
 * plugin setting changes. The live banner is not touched (it never carries body.eup-ds4).
 * ----------------------------------------------------------------------- */

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner {
	border-radius: var(--eup3-radius, 12px);
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	column-gap: 10px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:not(.eup-consent__dnsmpi),
body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
	align-items: center;
	background-color: var(--eup3-ink-strong, #3d3935);
	border: 1px solid var(--eup3-ink-strong, #3d3935);
	border-radius: var(--eup3-radius, 999px);
	color: #ffffff;
	display: inline-flex;
	flex: 1 1 calc(50% - 5px);
	font-size: 14px;
	font-weight: 500;
	justify-content: center;
	min-height: 44px;
	padding: 10px 12px;
	text-decoration: none;
	width: auto;
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:not(.eup-consent__dnsmpi) {
	order: 1;
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
	order: 2;
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	border-radius: var(--eup3-radius, 999px);
	flex: 1 1 100%;
	order: 3;
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:not(.eup-consent__dnsmpi):hover,
	body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
		background-color: var(--eup3-deep, #3d3935);
		border-color: var(--eup3-deep, #3d3935);
		color: #ffffff;
	}
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi {
	background: none;
	border: 0;
	color: var(--eup3-ink, #3d3935);
	flex: 0 1 auto;
	font-size: 13px;
	font-weight: 400;
	min-height: 44px;
	padding: 0 6px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	width: auto;
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
	order: 4;
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi {
	color: var(--eup3-ink-soft, #6b625b);
	order: 5;
}

/* --------------------------------------------------------------------------
 * 13. WooCommerce block cart and checkout
 *
 * The block styles print before the child sheets and the markup is re-rendered by React, so only CSS
 * reaches it. Buttons radius 10 (the coral ones are section 7), fields with the visible soft-indigo edge,
 * labels soft indigo, totals in indigo, notices on mint, the product buttons in the cart's suggestions
 * coral like every add to bag.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .wc-block-components-button:not(.is-link) {
	border-radius: var(--eup3-radius, 999px);
}

body.eup-ds4 :is(.wc-block-components-product-button__button, .wc-block-components-product-button .wp-block-button__link, .wc-block-grid__product-add-to-cart .wp-block-button__link) {
	background-color: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	border-color: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	border-radius: var(--eup3-radius, 999px);
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
}

@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 :is(.wc-block-components-product-button__button, .wc-block-components-product-button .wp-block-button__link, .wc-block-grid__product-add-to-cart .wp-block-button__link):hover {
		background-color: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
		border-color: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
		color: var(--eup3-cta-ink, #ffffff);
	}
}

body.eup-ds4 :is(.wc-block-components-text-input, .wc-block-components-combobox .components-combobox-control, .wc-blocks-components-select, .wc-block-components-textarea) :is(input, select, textarea),
body.eup-ds4 .wc-block-components-textarea {
	border-color: var(--eup3-ink-soft, #6b625b);
	border-radius: var(--eup3-radius-field, 12px);
	color: var(--eup3-ink, #3d3935);
}

body.eup-ds4 :is(.wc-block-components-text-input, .wc-block-components-combobox .components-combobox-control, .wc-blocks-components-select) :is(input, select):focus {
	border-color: var(--eup3-ink, #3d3935);
	box-shadow: 0 0 0 1px var(--eup3-ink, #3d3935);
}

body.eup-ds4 :is(.wc-block-components-text-input, .wc-block-components-combobox .components-combobox-control, .wc-blocks-components-select) label {
	color: var(--eup3-ink-soft, #6b625b);
}

body.eup-ds4 :is(.wc-block-components-checkbox__input, .wc-block-components-radio-control__input) {
	border-color: var(--eup3-ink-soft, #6b625b);
}

body.eup-ds4 :is(.wc-block-components-checkbox__input:checked, .wc-block-components-radio-control__input:checked) {
	border-color: var(--eup3-ink, #3d3935);
}

body.eup-ds4 .wc-block-components-radio-control__input:checked::before {
	background: var(--eup3-ink, #3d3935);
}

body.eup-ds4 :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-components-order-summary-item__total-price, .wc-block-components-product-price) {
	color: var(--eup3-ink, #3d3935);
}

body.eup-ds4 .wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) {
	font-weight: 500;
}

body.eup-ds4 :is(.wc-block-components-notice-banner.is-info, .wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-default) {
	background-color: var(--eup3-mint, #f3ebd6);
	border-color: var(--eup3-deep, #3d3935);
	border-radius: var(--eup3-radius, 4px);
	color: var(--eup3-ink, #3d3935);
}

body.eup-ds4 .wc-block-components-notice-banner.is-error {
	border-radius: var(--eup3-radius, 4px);
}

body.eup-ds4 .wc-block-components-notice-banner > svg {
	background-color: var(--eup3-deep, #3d3935);
	fill: #ffffff;
}

body.eup-ds4 .wc-block-components-notice-banner.is-error > svg {
	background-color: #cc1818;
}

/* Block checkout controls (finish review, F3). The old site sheet (site-legacy.css) forces these with
   !important: the payment option loses its left padding so the radio sits on its label, its label turns grey
   (#7E7E7E, 3.9:1), the checkboxes collapse to a dash, and field text is 14 px (phones zoom under 16). Under v4
   only, with the same weight. */
body.eup-ds4 .wc-block-components-checkout-place-order-button {
	height: auto !important;
	min-height: var(--eup3-btn-h, 48px) !important;
}

body.eup-ds4 .wc-block-checkout__payment-method .wc-block-components-radio-control__option,
body.eup-ds4 .wc-block-checkout__shipping-option .wc-block-components-radio-control__option {
	color: var(--eup3-ink, #3d3935) !important;
	padding-left: 2.75em !important;
}

body.eup-ds4 .wc-block-checkout__form .wc-block-components-checkbox__input {
	background: #ffffff;
	border: 1px solid var(--eup3-ink-soft, #6b625b);
	border-radius: 4px;
	height: 20px !important;
	min-height: 20px !important;
	min-width: 20px !important;
	width: 20px !important;
}

body.eup-ds4 .wc-block-components-text-input input,
body.eup-ds4 .wc-block-components-combobox .components-combobox-control input,
body.eup-ds4 .wc-blocks-components-select select {
	border-radius: var(--eup3-radius-field, 12px) !important;
	font-size: 16px !important;
}

/* --------------------------------------------------------------------------
 * 14. Lightbox markup outside its pages (planner, 2026-10-15)
 *
 * A PhotoSwipe root (`.pswp`; the reviews plugin prints `.cr-pswp.pswp` on every page) is in the HTML of pages
 * whose PhotoSwipe stylesheet is not loaded, so it renders in the flow under the footer (109 px of blank page
 * on the homepage, cart and Brands). Under v4 a lightbox root takes no space until PhotoSwipe opens it
 * (`pswp--open`), which is what PhotoSwipe's own sheet does where it loads. Pre-existing on today's pages; the
 * flag-independent fix is in the backlog.
 * ----------------------------------------------------------------------- */

body.eup-ds4 .pswp:not(.pswp--open) {
	display: none;
}