/**
 * eup-system-v3 — site-wide visual system from the "Homepage Boutique" design (2026-09-29).
 *
 * Handle:  eup-system-v3 (inc/enqueue-system-v3.php), every front-end page while
 *          `eupepsia_system_v3` is `yes`. Printed after every eup-* surface stylesheet.
 * Design:  Homepage.svg (1920 x 6635, Illustrator export) in the tech lead's "Homepage Boutique"
 *          folder. Measured values quoted below are SVG units, 1 unit = 1 CSS px at 1920 wide.
 * Record:  SYSTEM-V3-PORT.md.
 *
 * Sections
 *   1. Poppins, self-hosted (assets/fonts/poppins/README.md)
 *   2. The v3 token contract (--eup3-*), on :root and body.eup-system-v3
 *   3. The older --eup-* names re-mapped onto v3 inside every surface root
 *   4. Page and type
 *   5. Links, selection, focus
 *   6. Buttons (primary = accent pill with a chevron, as the design's SHOP NOW)
 *   7. Form fields
 *   8. Placeholders (pending facts)
 *   9. Product cards (surface card, brand over name, price, dark round cart button)
 *  10. Category, product, cart and checkout accents (fonts and colours only)
 *
 * With system v3 on, system-v2.css is not printed (see the PHP file), so nothing here has to
 * out-rank `body.eup-system-a`.
 *
 * ACCESSIBILITY NOTE, kept here so it travels with the token: the accent #00ccb8 on white and
 * white on #00ccb8 measure 2.03:1, below WCAG AA even for large text (3:1). Built as drawn,
 * because the tech lead is presenting this look. Every use goes through --eup3-accent (and
 * --eup3-accent-ink for text on it), so one line changes it: #008578 gives 4.54:1 with white
 * (AA for all text); or keep the teal and set --eup3-accent-ink to #262322 (7.67:1).
 */

/* --------------------------------------------------------------------------
 * 1. Poppins — release v24 (4.004), latin + latin-ext, weights 200-600, OFL 1.1
 * ----------------------------------------------------------------------- */

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 200;
	src: url("../fonts/poppins/poppins-200-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 200;
	src: url("../fonts/poppins/poppins-200-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/poppins/poppins-300-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/poppins/poppins-300-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/poppins/poppins-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/poppins/poppins-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	src: url("../fonts/poppins/poppins-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	src: url("../fonts/poppins/poppins-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	src: url("../fonts/poppins/poppins-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	src: url("../fonts/poppins/poppins-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
 * 2. The v3 token contract
 *
 * Names are the contract (brief-port-v3); values measured from Homepage.svg. Two values differ
 * from the brief's first draft, on the SVG's evidence:
 *   --eup3-ink-strong  #3d3935 (was #262322): the card cart discs and the newsletter submit are
 *                      filled #3d3935 (class st56). #262322 is only the logo wordmark.
 *   --eup3-radius-card 22px (was 16px): the product cards are rx 22.3 at 1920.
 * Added, not in the draft: --eup3-ink-soft (readable secondary text, 5.96:1 on white, used where
 * the older surfaces put important secondary text; the drawn muted #a99787 is 2.81:1),
 * --eup3-font, the type scale helpers and the wrap.
 * ----------------------------------------------------------------------- */

:root,
body.eup-system-v3 {
	--eup3-accent: #00ccb8;
	--eup3-accent-ink: #ffffff;
	--eup3-ink: #3d3935;
	--eup3-ink-strong: #3d3935;
	--eup3-ink-soft: #6b625b;
	--eup3-muted: #a99787;
	--eup3-ground: #ffffff;
	--eup3-surface: #f0f0ee;
	--eup3-pill: #e5e7e2;
	--eup3-cream: #f3ebd6;
	--eup3-sage: #d1dfd9;
	--eup3-line: #e4ded9;
	--eup3-radius-card: 22px;
	--eup3-radius-panel: 24px;
	--eup3-radius-pill: 999px;
	--eup3-radius-field: 12px;

	--eup3-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--eup3-focus: #3d3935;

	/*
	 * 2b. Responsive system (2026-09-30, "responsive-v3"; spec: research workspace
	 * research/design/2026-09-30/pebble-motion-type/spec.md, Pebble (Wellina) as the reference).
	 *
	 * Breakpoints (media queries cannot read custom properties, so they are written as numbers;
	 * mobile first, min-width only; max-width 767.98px only for phone-only overrides):
	 *   base 390 (phone) | 768 (tablet: desktop section layouts) | 1024 (desktop header navigation)
	 *   | 1280 (headings reach full size) | 1440 | 1920 (the artboard; content capped at 1520).
	 *
	 * Container: content = min(100% - 2 * gutter, 1520px), centred. The gutter grows smoothly
	 * (16 px at 390, 24 at 768, 33 at 1024, 41 at 1280, 47 at 1440, 50 from 1530) and never steps,
	 * so the content is never narrower at a larger screen (Pebble's 1536 jump is not copied). The
	 * cap is reached at 1620; at 1920 the gutter is 200, as drawn.
	 */
	--eup3-wrap: 1520px;
	--eup3-gutter: clamp(16px, 3.4vw - 2px, 50px);

	/* Type. Headings: the design's size at >= 1280, 0.7 x that at <= 768, linear between
	   (Pebble's heading rule, min = max(19.2px, 0.7 x max)). UI and body text are fixed (Pebble). */
	--eup3-fs-hero: clamp(33.6px, 2.812vw + 12px, 48px);            /* design 47.9 */
	--eup3-fs-display: clamp(34.3px, 2.871vw + 12.25px, 49px);      /* design 49: section display, newsletter */
	--eup3-fs-h2: clamp(27.23px, 2.279vw + 9.73px, 38.9px);          /* design 38.9 */
	--eup3-fs-quote: clamp(22.4px, 1.875vw + 8px, 32px);             /* design 32 */
	--eup3-fs-name: clamp(21px, 1.758vw + 7.5px, 30px);              /* design 30 */
	--eup3-fs-h4: clamp(19.39px, 1.623vw + 6.93px, 27.7px);          /* design 27.7: tile, timeline titles */
	--eup3-fs-h5: clamp(19.2px, 0.547vw + 15px, 22px);               /* design 22: care titles */
	--eup3-fs-eyebrow: clamp(16px, 1.328vw + 5.8px, 22.8px);         /* design 22.8 SemiBold caps; tab labels too */
	--eup3-fs-nav: clamp(16px, 0.759vw + 8.23px, 22.8px);            /* design 22.8; ramps 1024 -> 1920 */
	--eup3-fs-body: 16px;                                            /* design 16 Light */
	--eup3-fs-footer: clamp(16px, 0.586vw + 11.5px, 19px);           /* design 19; never under 16 in fields */
	--eup3-fs-label: 14px;                                           /* tile labels, "Week" chips */
	--eup3-fs-legal: 14px;                                           /* design 16; Pebble 13.5 */
	--eup3-fs-card-name: 15px;                                       /* design 11.8 (designer to confirm) */
	--eup3-fs-card-price: 15px;
	--eup3-fs-card-brand: 13px;

	/* Spacing. Sections ramp 768 -> 1920 from 48 px to the drawn 130 px (Pebble's 48 -> 100 ramp,
	   extended because the 1920 drawing spaces sections 94-155 px); callers scale it by the drawn
	   ratio (e.g. 100/130). Gaps: 12 px up to 768, the drawn 36 px at 1920. */
	--eup3-space-section: clamp(48px, 7.118vw - 6.67px, 130px);
	--eup3-space-block: clamp(24px, 2.6vw - 8px, 42px);
	--eup3-space-gap: clamp(12px, 2.083vw - 4px, 36px);

	/* Motion (Pebble's families, slowed a touch for the brand's calm). */
	--eup3-dur-fast: 0.25s;
	--eup3-dur-med: 0.35s;
	--eup3-dur-slow: 0.5s;
	--eup3-dur-reveal: 1s;
	--eup3-ease-smooth: cubic-bezier(0.3, 1, 0.3, 1);   /* hovers, underlines */
	--eup3-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);  /* scroll reveal, image zoom */
	--eup3-ease-panel: cubic-bezier(0.7, 0, 0.2, 1);    /* drawers, panels */

	/* Buttons: Pebble keeps button text fixed; the design's 27.5 px SHOP NOW becomes 17 px in a
	   50 px pill (designer to confirm). 16 px on phones. */
	--eup3-btn-h: 50px;
	--eup3-btn-fs: 16px;
	--eup3-btn-pad: clamp(22px, 1.9vw, 36px);
}

@media (min-width: 768px) {
	:root,
	body.eup-system-v3 {
		--eup3-btn-fs: 17px;
	}
}

/* --------------------------------------------------------------------------
 * 3. The older --eup-* names, re-mapped onto v3
 *
 * Every surface built before today declares its own tokens on its root class (a class outranks
 * :root). The same names are re-declared here on body.eup-system-v3 and on each root class, so
 * each surface paints in v3 without a line of its own stylesheet changing. Deep green (system
 * A's --eup-deep) becomes the v3 dark (#3d3935): the product label band and the Standard band go
 * charcoal, not teal, because white on teal is 2:1. The legacy teal wrappers in site-legacy.css
 * (`var(--eup-legacy-accent, #00ccb8)`) read the v3 accent again.
 * ----------------------------------------------------------------------- */

body.eup-system-v3,
body.eup-system-v3 .eup-home,
body.eup-system-v3 .eup-hd,
body.eup-system-v3 .eup-product-v2,
body.eup-system-v3 .eup-product-v3,
body.eup-system-v3 .eup-card,
body.eup-system-v3 .eup-shop,
body.eup-system-v3 .eup-farmpage,
body.eup-system-v3 .eup-landing,
body.eup-system-v3 .eup-stdpage,
body.eup-system-v3 .eup-brandspage,
body.eup-system-v3 .eup-legal,
body.eup-system-v3 .eup-capture,
body.eup-system-v3 .eup-drawer,
body.eup-system-v3 .eup-sticky,
body.eup-system-v3 .eup-atc,
body.eup-system-v3 .custom-popup,
body.eup-system-v3 .eup-ft,
body.eup-system-v3 .eup-ft3,
body.eup-system-v3 #cmplz-cookiebanner-container .cmplz-cookiebanner,
body.eup-system-v3 #cmplz-manage-consent {
	--eup-ground: var(--eup3-ground);
	--eup-paper: var(--eup3-ground);
	--eup-tint: var(--eup3-surface);
	--eup-surface: #ffffff;
	--eup-surface-alt: var(--eup3-ground);
	--eup-panel: var(--eup3-surface);
	--eup-hairline: var(--eup3-line);
	--eup-line: var(--eup3-line);
	--eup-line-soft: var(--eup3-line);
	--eup-rule: var(--eup3-line);
	--eup-ink: var(--eup3-ink);
	--eup-muted: var(--eup3-ink-soft);
	--eup-shop-muted: var(--eup3-ink-soft);
	--eup-deep: var(--eup3-ink-strong);
	--eup-deepest: #262322;
	--eup-sage: var(--eup3-sage);
	--eup-brand: var(--eup3-focus);
	--eup-brand-text: var(--eup3-ink);
	--eup-dash: var(--eup3-muted);
	--eup-font-display: var(--eup3-font);
	--eup-font-body: var(--eup3-font);
	--eup-legacy-accent: var(--eup3-accent);

	/* Parent theme, block presets and plugins. */
	--fs-color-primary: var(--eup3-accent);
	--fs-color-secondary: var(--eup3-ink);
	--primary-color: var(--eup3-accent);
	--fs-experimental-link-color: var(--eup3-ink);
	--fs-experimental-link-color-hover: var(--eup3-ink);
	--custom-primary-color: var(--eup3-accent);
	--hover-color: var(--eup3-ink);
	--eup-popup-accent: var(--eup3-accent);
	--cmplz_hyperlink_color: var(--eup3-ink);
	--cmplz_slider_active_color: var(--eup3-accent);
}

/* Teal TEXT token (flag eupepsia_teal_text_v1, tech lead 2026-10-05; inc/enqueue-teal-text.php adds
 * the body class). Every rule that paints text in the accent reads
 *     color: var(--eup3-accent-text, <its old accent>)
 * (system-v3, home-v3, header-v3/v4, audit-fixes, site-legacy, account, product). The token exists
 * only under the class, so with the flag off each rule falls back to today's colour. #00796d on
 * white is 5.3:1. The bright accent #00ccb8 stays for buttons, fills, icons, rules and focus. */
body.eup-teal-text-v1 {
	--eup3-accent-text: #00796d;
	/* On bright-teal fills (footer ground, buttons, chips, badges): ink text and icons, 5.63:1
	   (tech lead 2026-10-05, resolves D-115). The fill stays #00ccb8. The logo artwork is a teal SVG
	   drawn through a filter: brightness(0) invert(23%) renders it #3b3b3b, close to the ink. */
	--eup3-accent-ink: #3d3935;
	--eup3-accent-ink-filter: brightness(0) invert(23%);
}

/* Complianz stores its button colours as its own variables (deep green since system A). */
body.eup-system-v3 #cmplz-cookiebanner-container .cmplz-cookiebanner,
body.eup-system-v3 #cmplz-manage-consent {
	--cmplz_button_accept_background_color: var(--eup3-ink-strong);
	--cmplz_button_accept_border_color: var(--eup3-ink-strong);
	--cmplz_button_accept_text_color: #ffffff;
}

/* --------------------------------------------------------------------------
 * 4. Page and type
 *
 * Headings Poppins 300/400 in ink; display headings in the accent at weight 200 (the design's
 * "Discover Wellness Products", "Thoughtfully Curated": Poppins ExtraLight 49 px at 1920). Body
 * Poppins 300. Labels and navigation 500 uppercase, tracked.
 * ----------------------------------------------------------------------- */

html:has(body.eup-system-v3) {
	background: var(--eup3-ground);
}

body.eup-system-v3,
body.eup-system-v3 #wrapper,
body.eup-system-v3 #main,
body.eup-system-v3 .page-wrapper {
	background: var(--eup3-ground);
}

body.eup-system-v3 {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

body.eup-system-v3 :where(h1, h2, h3, h4, h5, h6, .heading-font) {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	letter-spacing: 0;
}

body.eup-system-v3 :where(h1, h2) {
	font-weight: 300;
}

body.eup-system-v3 :where(h3, h4, h5, h6) {
	font-weight: 400;
}

body.eup-system-v3 :where(p, li, td, th, dd, dt, label, blockquote, address) {
	font-family: var(--eup3-font);
}

body.eup-system-v3 :where(strong, b) {
	font-weight: 500;
}

/* The older surfaces set their display titles in Newsreader by class; v3 is Poppins only. */
body.eup-system-v3 :where(.eup-display, .eup-display--2, .eup-display--3, .eup-home h1, .eup-home h2, .eup-product-v3 h1, .eup-shop__title, .eup-stdpage h1, .eup-farmpage h1, .eup-landing h1, .eup-brandspage h1, .eup-legal h1, .eup-capture__title) {
	font-family: var(--eup3-font);
	font-style: normal;
}

/* Display type: the accent, ExtraLight. */
body.eup-system-v3 .eup3-display,
body.eup-system-v3 .eup-display {
	color: var(--eup3-accent-text, var(--eup3-accent));
	font-weight: 200;
	letter-spacing: 0;
	line-height: 1.12;
}

/* Small uppercase label (EUPEPSIA COLLECTIONS: Poppins SemiBold 22.8 at 1920). */
body.eup-system-v3 .eup3-eyebrow {
	color: var(--eup3-ink);
	font-size: var(--eup3-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * 5. Links, selection, focus
 * ----------------------------------------------------------------------- */

body.eup-system-v3 :where(a) {
	color: var(--eup3-ink);
}

body.eup-system-v3 :where(a:hover) {
	color: var(--eup3-ink);
	text-decoration-color: var(--eup3-accent);
}

/* Links inside running text read as links: underlined, ink, a teal line on hover. */
body.eup-system-v3 :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: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.eup-system-v3 ::selection {
	background: var(--eup3-accent);
	color: var(--eup3-ink);
}

body.eup-system-v3 :where(input, textarea) {
	caret-color: var(--eup3-ink);
}

/* One focus treatment: 3 px ink ring at 2 px offset (11.4:1 on white; teal would be 2:1). */
body.eup-system-v3 :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--eup3-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 6. Buttons
 *
 * Primary: the accent pill with a white chevron, as SHOP NOW (Poppins 500, uppercase). The class
 * `.eup3-btn` is the v3 contract; `.eup-btn` (system A's contract, used by every surface built
 * since 2026-09-24) is restyled to match. WooCommerce's own buttons take the colour and the pill,
 * not the chevron: their boxes belong to the product, cart and checkout templates.
 * ----------------------------------------------------------------------- */

body.eup-system-v3 .eup3-btn,
body.eup-system-v3 .eup-btn {
	align-items: center;
	background: var(--eup3-accent);
	border: 0;
	border-radius: var(--eup3-radius-pill);
	box-shadow: none;
	color: var(--eup3-accent-ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--eup3-font);
	font-size: var(--eup3-btn-fs);
	font-weight: 500;
	gap: clamp(18px, 1.8vw, 34px);
	justify-content: center;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin: 0;
	min-height: var(--eup3-btn-h);
	padding: 0 var(--eup3-btn-pad);
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.3s var(--eup3-ease-smooth), border-color 0.3s var(--eup3-ease-smooth), color 0.3s var(--eup3-ease-smooth);
}

/* Uppercase only where the design draws it: the SHOP NOW pill (.eup3-btn). Every other button
   (the product page's add to bag, the bag drawer, cart, checkout, account) reads as written,
   because the microcopy pass (eupepsia_microcopy_v2) writes them in sentence case. */
body.eup-system-v3 .eup3-btn {
	text-transform: uppercase;
}

body.eup-system-v3 .eup3-btn::after,
body.eup-system-v3 .eup-btn:not(.eup-btn--outline):not(.eup-btn--secondary):not(.eup-atc)::after {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	height: 0.5em;
	margin-right: 0.15em;
	transform: rotate(45deg);
	transition: transform var(--eup3-dur-med) var(--eup3-ease-smooth);
	width: 0.5em;
}

/* The chevron nudges forward on hover (mouse only; Pebble gates every hover effect this way). */
@media (hover: hover) and (pointer: fine) {
	body.eup-system-v3 .eup3-btn:hover::after,
	body.eup-system-v3 .eup-btn:not(.eup-btn--outline):not(.eup-btn--secondary):not(.eup-atc):hover::after {
		transform: translate(3px, -3px) rotate(45deg);
	}
}

body.eup-system-v3 .eup3-btn:hover,
body.eup-system-v3 .eup-btn:hover {
	background: var(--eup3-ink-strong);
	color: #ffffff;
}

body.eup-system-v3 .eup3-btn--outline,
body.eup-system-v3 .eup-btn--outline,
body.eup-system-v3 .eup-btn--secondary {
	background: transparent;
	border: 1px solid var(--eup3-ink);
	color: var(--eup3-ink);
}

body.eup-system-v3 .eup3-btn--outline:hover,
body.eup-system-v3 .eup-btn--outline:hover,
body.eup-system-v3 .eup-btn--secondary:hover {
	background: var(--eup3-ink-strong);
	border-color: var(--eup3-ink-strong);
	color: #ffffff;
}

/* A dark round icon button (card cart, newsletter submit): 42 px at 1920 in the cards. */
body.eup-system-v3 .eup3-icon-btn {
	align-items: center;
	background: var(--eup3-ink-strong);
	border: 0;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	height: 42px;
	justify-content: center;
	padding: 0;
	width: 42px;
}

body.eup-system-v3 :where(.eup3-btn, .eup-btn):disabled,
body.eup-system-v3 :where(.eup3-btn, .eup-btn)[aria-disabled="true"] {
	background: var(--eup3-pill);
	color: var(--eup3-ink-soft);
	cursor: not-allowed;
}

/* WooCommerce and Flatsome buttons: colour, type and the pill. */
body.eup-system-v3 :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-pill);
	font-family: var(--eup3-font);
	font-weight: 500;
	letter-spacing: 0.02em;
}

body.eup-system-v3 :where(.button.primary, .button.alt, button.alt, .single_add_to_cart_button, .checkout-button, #place_order, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button, .wp-block-button__link) {
	background-color: var(--eup3-accent);
	border-color: var(--eup3-accent);
	color: var(--eup3-accent-ink);
}

body.eup-system-v3 :where(.button.primary, .button.alt, button.alt, .single_add_to_cart_button, .checkout-button, #place_order, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button):hover {
	background-color: var(--eup3-ink-strong);
	border-color: var(--eup3-ink-strong);
	color: #ffffff;
}

/* The product page's add-to-bag button (product v3 interactions): same fill. */
body.eup-system-v3 .eup-atc.eup-btn {
	border-radius: var(--eup3-radius-pill);
}

/* Sentence case as written (orchestrator, 2026-09-29, with the microcopy pass): the parent theme
   and older sheets capitalise or upper-case buttons, the bag drawer, the checkout steps, the cart
   table heads and the account headings ("Your Bag", "Sign In", "VIEW BAG"). !important answers
   Flatsome's `.uppercase` utility class. Uppercase stays on the main nav labels (header-v3.css),
   the section eyebrows (.eup3-eyebrow) and the SHOP NOW pill (.eup3-btn). */
body.eup-system-v3 .eup-btn,
body.eup-system-v3 .eup-atc,
body.eup-system-v3 .eup-atc *,
body.eup-system-v3 .eup-drawer,
body.eup-system-v3 .eup-drawer *,
body.eup-system-v3 .eup-sticky,
body.eup-system-v3 .eup-sticky *,
body.eup-system-v3 .checkout-breadcrumbs,
body.eup-system-v3 .checkout-breadcrumbs *,
body.eup-system-v3.woocommerce-cart #main *,
body.eup-system-v3.woocommerce-checkout #main *,
body.eup-system-v3.woocommerce-account #main *,
body.eup-system-v3 :is(.button, button.button, a.button, input.button, .wc-block-components-button):not(.eup3-btn) {
	letter-spacing: 0;
	text-transform: none !important; /* Flatsome .uppercase and button rules */
}

/* --------------------------------------------------------------------------
 * 7. Form fields
 *
 * Colour, font, radius and the focus ring only: no box sizes change, so every template keeps its
 * measured layout. The newsletter's pill field is footer-v3.css's.
 * ----------------------------------------------------------------------- */

body.eup-system-v3 :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-line);
	border-radius: var(--eup3-radius-field);
	box-shadow: none;
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-weight: 300;
}

body.eup-system-v3 :where(input, select, textarea)::placeholder {
	color: var(--eup3-ink-soft);
	opacity: 1;
}

body.eup-system-v3 :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], select, textarea):focus {
	border-color: var(--eup3-ink);
	box-shadow: none;
}

body.eup-system-v3 :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--eup3-ink-strong);
}

/* --------------------------------------------------------------------------
 * 8. Placeholders (unconfirmed facts)
 *
 * `<span class="eup-placeholder" data-claim="...">[TEXT]</span>`: bracketed text on the cream
 * tint with a dotted underline, so a pending fact never reads as a published one.
 * ----------------------------------------------------------------------- */

body.eup-system-v3 .eup-placeholder {
	background: var(--eup3-cream);
	border-radius: 4px;
	color: var(--eup3-ink);
	padding: 0 0.3em;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * 9. Product cards (category pages, shop, anywhere .eup-card renders)
 *
 * As drawn in the product row (hp1): a #f0f0ee card, radius 22, the pack shot centred, then the
 * brand (small, muted), the name (Light), the price, and a dark 42 px round cart button to the
 * right of the name. WooCommerce's own add-to-cart link keeps its classes, AJAX behaviour and
 * accessible name ("Add to cart: <product>"); only its box becomes the disc with a cart glyph.
 * ----------------------------------------------------------------------- */

body.eup-system-v3 .eup-card {
	align-content: start;
	background: var(--eup3-surface);
	border: 0;
	border-radius: var(--eup3-radius-card);
	column-gap: 12px;
	display: grid;
	/* Dense flow: every row spans both columns except the price, so the cart disc (column 2, auto
	   row) drops into the one free cell, beside the price. The name gets the full card width and
	   nothing can run under the disc (2026-09-30 follow-up). */
	grid-auto-flow: row dense;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: clamp(14px, 1.9vw, 36px);
	row-gap: 2px;
}

body.eup-system-v3 .eup-card > * {
	grid-column: 1 / -1;
}

body.eup-system-v3 .eup-card > .eup-card__price {
	align-self: center;
	grid-column: 1;
}

body.eup-system-v3 .eup-card .eup-card__media {
	margin-bottom: clamp(12px, 1.2vw, 24px);
}

body.eup-system-v3 .eup-card .eup-card__media img,
body.eup-system-v3 .eup-card .eup-card__media--empty {
	aspect-ratio: 1 / 1;
	background: transparent;
	border-radius: 12px;
	height: auto;
	min-height: 0;
	mix-blend-mode: multiply;
	object-fit: contain;
}

body.eup-system-v3 .eup-card .eup-card__brand {
	color: var(--eup3-ink-soft);
	font-size: var(--eup3-fs-card-brand);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: none;
}

body.eup-system-v3 .eup-card .eup-card__name {
	font-size: var(--eup3-fs-card-name);
	font-weight: 400;
	line-height: 1.45;
	/* Wrap at word boundaries only (never "Ashwaga/ndha"); three lines at most, then an ellipsis. */
	-webkit-box-orient: vertical;
	display: -webkit-box;
	hyphens: manual;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	overflow-wrap: normal;
	word-break: normal;
}

body.eup-system-v3 .eup-card .eup-card__name a {
	color: var(--eup3-ink);
}

body.eup-system-v3 .eup-card .eup-card__price,
body.eup-system-v3 .eup-card .eup-card__price .amount,
body.eup-system-v3 .eup-card .eup-card__price ins {
	color: var(--eup3-ink);
	font-size: var(--eup3-fs-card-price);
	font-weight: 400;
}

/* site-legacy.css forces every span.amount to #4D4D4F 300 with !important. */
body.eup-system-v3 .eup-card .eup-card__price span.amount {
	color: var(--eup3-ink) !important;
	font-weight: 400 !important;
}

body.eup-system-v3 .eup-card .eup-card__price del,
body.eup-system-v3 .eup-card .eup-card__price del span.amount {
	color: var(--eup3-ink-soft) !important;
}

body.eup-system-v3 .eup-card .eup-card__stock {
	color: var(--eup3-ink-soft);
	font-size: 12px;
}

body.eup-system-v3 .eup-card > .eup-card__actions {
	align-items: center;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
	grid-column: 2;
	grid-row: auto;
	margin: 0;
	padding: 0;
}

body.eup-system-v3 .eup-card .eup-card__actions .button,
body.eup-system-v3 .eup-card .eup-card__actions a.button,
body.eup-system-v3 .eup-card .eup-card__actions .eup-card__action {
	/* The designer's card add-to-bag glyph (Artboard 6, 2026-09-30), white, on the ink disc. */
	background: var(--eup3-ink-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.9 45.9'%3E%3Cpath fill='%23ffffff' 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") center / 100% 100% no-repeat;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: transparent;
	font-size: 0;
	height: 42px;
	line-height: 0;
	margin: 0;
	min-height: 42px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 42px;
}

body.eup-system-v3 .eup-card .eup-card__actions .button:hover,
body.eup-system-v3 .eup-card .eup-card__actions a.button:hover,
body.eup-system-v3 .eup-card .eup-card__actions .button:focus-visible {
	background-color: var(--eup3-accent);
}

body.eup-system-v3 .eup-card .eup-card__actions .button.loading {
	opacity: 0.6;
}

/* 2026-10-01 (audit B2): after an add the disc shows the drawn tick (icon-v3 'card-done') instead of
   the bag; it stays a working add-to-bag control, and WooCommerce's "View cart" link sits under it. */
body.eup-system-v3 .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='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	display: block;
}

/* WooCommerce adds "View cart" after a successful add. Small, under the disc. */
body.eup-system-v3 .eup-card .eup-card__actions .added_to_cart {
	color: var(--eup3-ink);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: underline;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 10. Category, shop, product, cart and checkout: fonts and colours, no layout rewrites
 * ----------------------------------------------------------------------- */

/* Category and shop heads: the title as display type in the accent. */
body.eup-system-v3 .eup-shop,
body.eup-system-v3 .eup-shop__head,
body.eup-system-v3 .eup-shop__intro {
	background: var(--eup3-ground);
}

body.eup-system-v3 .eup-shop .eup-shop__title {
	color: var(--eup3-accent-text, var(--eup3-accent));
	font-weight: 200;
}

body.eup-system-v3 .eup-shop .eup-shop__opt.is-on,
body.eup-system-v3 .eup-shop .eup-shop__opt[aria-current] {
	color: var(--eup3-ink);
	font-weight: 500;
}

body.eup-system-v3 .eup-shop .eup-shop__rail,
body.eup-system-v3 .eup-shop .eup-shop__box {
	background: var(--eup3-ground);
}

/* Category grid beside the 280 px filter rail (shop-v2.css puts 4 columns from 850 px): cards were
   136 px wide at 1024, too narrow for 15 px names such as "Hypoallergenic" on whole words. With v3:
   2 columns at 850-1023, 3 at 1024-1279 (Pebble: 3 beside the filters), 4 from 1280. */
@media (min-width: 850px) and (max-width: 1023.98px) {
	body.eup-system-v3 .eup-shop .eup-shop__main ul.products,
	body.eup-system-v3 .eup-shop .eup-shop__main .products.row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
	body.eup-system-v3 .eup-shop .eup-shop__main ul.products,
	body.eup-system-v3 .eup-shop .eup-shop__main .products.row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Product page: title Poppins Light in ink, price ink, the brand line muted. */
body.eup-system-v3 .eup-product-v3 .eup-buy__title,
body.eup-system-v3 .product-title,
body.eup-system-v3 .product_title {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-weight: 300;
}

body.eup-system-v3 .eup-product-v3 .eup-buy__brand {
	color: var(--eup3-ink-soft);
}

body.eup-system-v3 .eup-product-v3 .eup-buy__price,
body.eup-system-v3 .eup-product-v3 .eup-buy__price .amount,
body.eup-system-v3 .product-summary .price .amount {
	color: var(--eup3-ink) !important; /* site-legacy.css span.amount !important */
}

/* The accordion's open marker and the size chips pick up the accent as a line, not as text. */
body.eup-system-v3 .eup-product-v3 .eup-acc__trigger[aria-expanded="true"] .eup-acc__icon {
	color: var(--eup3-accent);
}

/* Breadcrumbs everywhere: muted, readable. */
body.eup-system-v3 :where(.woocommerce-breadcrumb, .eup-crumbs, .eup-shop__crumbs, .breadcrumbs) {
	color: var(--eup3-ink-soft);
	font-family: var(--eup3-font);
}

/* WooCommerce notices: cream, ink, no teal bar. */
body.eup-system-v3 :where(.woocommerce-message, .woocommerce-info, .message-container) {
	background: var(--eup3-cream);
	border-color: var(--eup3-cream);
	color: var(--eup3-ink);
}

/* Cart and checkout: the page title and totals in Poppins, ink. */
body.eup-system-v3.woocommerce-cart :where(h1, h2, h3, .cart_totals h2, .wc-block-components-title),
body.eup-system-v3.woocommerce-checkout :where(h1, h2, h3, .wc-block-components-title) {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
}

@media (prefers-reduced-motion: reduce) {
	body.eup-system-v3 .eup3-btn,
	body.eup-system-v3 .eup-btn,
	body.eup-system-v3 .eup3-btn::after,
	body.eup-system-v3 .eup-btn::after {
		transition: none;
	}

	body.eup-system-v3 .eup3-btn:hover::after,
	body.eup-system-v3 .eup-btn:hover::after {
		transform: rotate(45deg);
	}
}