/* ==========================================================================
   Motif — modern flat storefront with purposeful 2D motion (original design)
   --------------------------------------------------------------------------
   Loaded only while Motif renders (after designs/base.css). EVERY selector is scoped under
   html[data-yz-design="motif"]; components add `.yz-design-preset` (the body class printed only
   under a preset) so each rule out-ranks the base rule it restyles without !important.
   !important appears only where the theme's own sheets already use it (header, buttons, drawer,
   footer). Logical properties throughout; the few physical things (clip-path insets, translateX)
   mirror through --yzm-dir or an explicit [dir="rtl"] rule.

   ONE PLANE. No box-shadow for elevation, no gradient shading, no perspective. Depth is said with
   a flat ink block offset behind a tile (a "sticker"), drawn by a pseudo-element and moved with
   `translate` — never a blurred shadow.

   MOTION RULES. Only transform (translate / scale / rotate), opacity and clip-path are animated.
   Colour "swaps" are flat wipes (a clipped or translated layer), not colour transitions. Nothing
   is hidden unless designs-motif.js has taken responsibility for showing it (html.yzm-io +
   [data-yzm]); with no script, under prefers-reduced-motion, or on a motion-off store
   (body.yzm-still), every element is simply in its final place.

   Palette (WCAG 2.x contrast, computed):
     ink #16110E on ground #F6F1E7 16.7:1 · on paper #FFFDF8 18.4:1 · on amber #E9B949 10.3:1
     text-2 #3D332C on ground 10.9:1 · muted #62564C on ground 6.3:1, on paper 7.0:1, on bone 5.4:1
     paper on agate red #B23A22 5.9:1 · red as text on ground 5.3:1, on paper 5.9:1
     paper on teal #1F5A57 7.8:1 · amber-text #7A5200 on ground 6.2:1
     field outline #7A6D61 on ground 4.5:1, on paper 4.9:1, on bone 3.8:1 (WCAG 1.4.11 ≥ 3:1)
   Rationale, section list and the motion table: docs/store-designs/DESIGN-motif.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   base.css keeps its defaults inside :where() (specificity 0), so a plain preset scope wins.
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] {
	--yzm-ground: #F6F1E7;
	--yzm-paper: #FFFDF8;
	--yzm-ink: #16110E;
	--yzm-teal: #1F5A57;
	--yzm-bone: #EADFCB;
	--yzm-line-soft: #D8CCB6;
	--yzm-field: #7A6D61;
	--yzm-sale: #A32418;
	/* Flat tints behind product photos (decorative; no text sits on them). */
	--yzm-tint-1: #F6E0A6;
	--yzm-tint-2: #C5DAD3;
	--yzm-tint-3: #F1C9BC;
	--yzm-tint-4: #EADFCB;
	--yzm-tint-5: #D9DBB4;
	/* Hover / pressed shades DERIVED from the owner-editable pair (never a hard-coded red). */
	--yzm-primary-deep: color-mix(in srgb, var(--yzd-primary) 78%, #000);
	--yzm-accent-deep: color-mix(in srgb, var(--yzd-accent) 80%, #000);

	--yzm-stroke: 2px;
	--yzm-r: 20px;
	--yzm-r-lg: 32px;
	/* Travel scales from the store's own motion-intensity setting (motion.css --mo-intensity:
	   0 = off, 1 = normal, 2 = emphatic; also 0 under prefers-reduced-motion), so "motion off"
	   flattens every sticker lift and reveal distance without a single extra rule. */
	--yzm-lift: calc(4px * var(--mo-intensity, 1));
	--yzm-rise: calc(28px * var(--mo-intensity, 1));
	--yzm-dir: 1; /* -1 under RTL: mirrors every horizontal offset */
	--yzm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--yzm-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--yzm-fast: 220ms;
	--yzm-med: 420ms;
	--yzm-slow: 760ms;
	--yzm-sticky-top: 96px;
	--yzm-font-accent: 'Motif Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	/* A flat arrow, drawn once as an inline SVG (ink stroke); mirrored with scale under RTL. */
	--yzm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316110E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

	--yzd-bg: var(--yzm-ground);
	--yzd-surface: var(--yzm-bone);
	--yzd-surface-2: var(--yzm-paper);
	--yzd-text: var(--yzm-ink);
	--yzd-text-2: #3D332C;
	--yzd-muted: #62564C;
	--yzd-border: var(--yzm-line-soft);
	--yzd-on-primary: #FFFDF8;
	--yzd-on-accent: #16110E;
	--yzd-accent-text: #7A5200;
	--yzd-dark: var(--yzm-ink);
	--yzd-on-dark: #FFFDF8;
	--yzd-sale: var(--yzm-sale);
	--yzd-focus: var(--yzm-ink);

	--yzd-font-display: 'Motif Sans', 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--yzd-font-body: 'Motif Sans', 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--yzd-display-weight: 800;
	--yzd-display-tracking: -0.03em;
	--yzd-h1: clamp(3.5rem, 10.4vw, 10rem);
	--yzd-h2: clamp(2.25rem, 5.2vw, 4.5rem);
	--yzd-h3: 1.25rem;
	--yzd-body-size: 1.0625rem;
	--yzd-eyebrow-size: 0.8125rem;
	--yzd-eyebrow-tracking: 0.14em;

	--yzd-container: 1320px;
	--yzd-gutter: clamp(16px, 3vw, 32px);
	--yzd-space: clamp(56px, 8vw, 120px);
	--yzd-gap: clamp(12px, 1.6vw, 24px);

	--yzd-radius: var(--yzm-r-lg);
	--yzd-card-radius: var(--yzm-r);
	--yzd-btn-radius: 999px;
	--yzd-btn-pad-y: 15px;
	--yzd-btn-pad-x: 28px;
	--yzd-btn-weight: 600;
	--yzd-btn-transform: none;
	--yzd-btn-tracking: 0;
	--yzd-card-ratio: 1 / 1;
	--yzd-hero-scrim: transparent;
	--yzd-shadow: none;

	/* Theme tokens base.css does not remap. */
	--yz-silver: var(--yzd-muted);
	--yz-radius: 14px;
	--yz-focus-ring: #16110E;
	--yz-focus-halo: #FFFDF8;

	/* --yzd-primary / --yzd-accent are NOT declared here: they come from the registry colors
	   (agate red #B23A22 / amber #E9B949), printed inline after this sheet, so the owner's colour
	   pickers in /dashboard keep working. */
}

html[data-yz-design="motif"][dir="rtl"] {
	--yzm-dir: -1;
}

/* base.css remaps the theme tokens at (0,2,1); overriding one of them needs the same weight. */
html[data-yz-design="motif"]:not([data-yz-design="heritage"]) {
	/* The theme's accent-as-TEXT token (filter links, serial lines, account links). Amber as text on
	   the ground is 1.7:1, so it is the agate red here (5.3:1 on ground, 5.9:1 on paper). */
	--yz-agate: var(--yzd-primary);
	--yz-header-bg: var(--yzm-paper);
	--yz-header-action: var(--yzm-ink);
	--yz-header-action-hover: var(--yzd-primary);
	--yz-header-badge-fg: #FFFDF8;
}

/* --------------------------------------------------------------------------
   1. Page, type and primitives
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] body.yz-design-preset {
	background: var(--yzm-ground);
	line-height: 1.6;
}

html[data-yz-design="motif"] body.yz-design-preset h1,
html[data-yz-design="motif"] body.yz-design-preset h2,
html[data-yz-design="motif"] body.yz-design-preset h3,
html[data-yz-design="motif"] body.yz-design-preset h4 {
	font-family: var(--yzd-font-display);
	color: var(--yzd-text);
}

html[data-yz-design="motif"] ::selection {
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
}

/* Eyebrow: tracked capitals after a small flat square. */
html[data-yz-design="motif"] .yz-design-preset .yzd-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--yzd-font-body);
	font-size: max(12px, var(--yzd-eyebrow-size));
	font-weight: 600;
	line-height: 1.2;
	color: var(--yzd-text);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-eyebrow::before {
	content: "";
	flex: none;
	inline-size: 12px;
	block-size: 12px;
	background: var(--yzd-primary);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head {
	margin-block-end: clamp(24px, 3.4vw, 48px);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head--center .yzd-eyebrow {
	justify-content: center;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head__title {
	font-size: var(--yzd-h2);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--yzd-display-tracking);
	text-wrap: balance;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head__intro {
	color: var(--yzd-text-2);
	font-size: 1.0625rem;
}

/* "View all" link: label + an arrow coin; the underline grows from the start edge (scaleX), the
   arrow slides (translate). Nothing here animates a colour or a size. */
html[data-yz-design="motif"] .yz-design-preset .yzd-head__link {
	position: relative;
	gap: 12px;
	min-height: 44px;
	padding-inline-end: 54px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--yzd-text);
	text-decoration: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head__link::before {
	content: "";
	position: absolute;
	inset-inline: 0 54px;
	inset-block-end: 8px;
	block-size: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--yzm-med) var(--yzm-ease);
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-head__link::before {
	transform-origin: 100% 50%;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head__link::after,
html[data-yz-design="motif"] .yz-design-preset .yzd-cats__cta::after,
html[data-yz-design="motif"] .yz-design-preset .yzd-banner__btn::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	inline-size: 44px;
	block-size: 44px;
	margin-block-start: -22px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	background: var(--yzd-accent) var(--yzm-arrow) center / 20px 20px no-repeat;
	box-sizing: border-box;
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-head__link::after,
html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-cats__cta::after,
html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-banner__btn::after {
	scale: -1 1;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head__link:hover::before,
html[data-yz-design="motif"] .yz-design-preset .yzd-head__link:focus-visible::before {
	transform: scaleX(1);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-head__link:hover::after,
html[data-yz-design="motif"] .yz-design-preset .yzd-head__link:focus-visible::after {
	translate: calc(4px * var(--yzm-dir)) 0;
}

/* Buttons: a pill "sticker". The face (fill + ink outline) is ::after and the flat ink block is
   ::before, both behind the label; on hover the button slides up-and-start by --yzm-lift while the
   block stays where it was, so an L of ink appears. Transform only. */
html[data-yz-design="motif"] .yz-design-preset .yzd-btn {
	--yzm-btn-bg: var(--yzd-primary);
	--yzm-btn-fg: var(--yzd-on-primary);
	position: relative;
	isolation: isolate;
	min-height: 52px;
	border: 0;
	border-radius: var(--yzd-btn-radius);
	background: transparent;
	color: var(--yzm-btn-fg);
	font-family: var(--yzd-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn::before,
html[data-yz-design="motif"] .yz-design-preset .yzd-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-sizing: border-box;
	pointer-events: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn::before {
	z-index: -2;
	background: var(--yzm-ink);
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn::after {
	z-index: -1;
	background: var(--yzm-btn-bg);
	border: var(--yzm-stroke) solid var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn:hover,
html[data-yz-design="motif"] .yz-design-preset .yzd-btn:focus-visible {
	background: transparent;
	color: var(--yzm-btn-fg);
	translate: calc(var(--yzm-lift) * -1 * var(--yzm-dir)) calc(var(--yzm-lift) * -1);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn:hover::before,
html[data-yz-design="motif"] .yz-design-preset .yzd-btn:focus-visible::before {
	translate: calc(var(--yzm-lift) * 2 * var(--yzm-dir)) calc(var(--yzm-lift) * 2);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn:active {
	translate: 0 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn:active::before {
	translate: 0 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn--ghost {
	--yzm-btn-bg: var(--yzm-paper);
	--yzm-btn-fg: var(--yzm-ink);
	border: 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-btn--small {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 0.9375rem;
}

/* Focus: the theme's single ring system (a11y.css) is token-driven — ink ring, paper halo (set in
   §0). On the dark / saturated fields the pair swaps so the ring stays ≥ 3:1. */
html[data-yz-design="motif"] .yz-design-preset .yzd-btn:focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yzd-cats__link:focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yzd-banner:focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yzd-head__link:focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yzd-tabs__tab:focus-visible {
	outline-color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .yz-announce :focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--2 :focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--3 :focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yzd-news :focus-visible,
html[data-yz-design="motif"] .yz-design-preset #colophon :focus-visible,
html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar :focus-visible {
	outline-color: #FFFDF8 !important;
	box-shadow: 0 0 0 5px #16110E;
}

/* --------------------------------------------------------------------------
   2. Announcement bar (shared content) — a flat ink strip
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yz-announce.is-style-ink {
	--yz-announce-bg: var(--yzm-ink);
	--yz-announce-fg: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yz-announce {
	font-family: var(--yzd-font-body);
}

html[data-yz-design="motif"] .yz-design-preset .yz-announce__track,
html[data-yz-design="motif"] .yz-design-preset .yz-announce__track * {
	font-size: max(13px, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* The bar is one fixed line: on the narrowest phones the message tightens rather than wrapping
   under the bar's edge (found at 360px). */
@media (max-width: 480px) {
	html[data-yz-design="motif"] .yz-design-preset .yz-announce__track,
	html[data-yz-design="motif"] .yz-design-preset .yz-announce__track * {
		font-size: max(12px, 0.75rem);
		letter-spacing: 0;
	}
}

/* --------------------------------------------------------------------------
   3. Header — one floating capsule, inset from the viewport edges
   The masthead itself is transparent and click-through; the primary bar inside it is the pill.
   It sticks 10px below the top edge (the theme's sticky + smart-hide behaviour is kept).
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] body.yz-design-preset #masthead,
html[data-yz-design="motif"] body.yz-design-preset.yz-comma-header #masthead,
html[data-yz-design="motif"] body.yz-design-preset.yz-comma-header .yz-header {
	background-color: transparent !important;
	border: 0;
	box-shadow: none;
	inset-block-start: 10px;
	/* The capsule floats: a strip of ground above AND below it, so a page that opens with a
	   full-bleed image band (About, Collections) does not butt against the pill. */
	margin-block: 12px;
	padding-inline: var(--yzd-gutter);
	pointer-events: none;
}

/* A signed-in owner previews under the 32px toolbar. */
@media (min-width: 783px) {
	html[data-yz-design="motif"] body.yz-design-preset.admin-bar #masthead {
		inset-block-start: 42px;
	}
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header.is-scrolled {
	box-shadow: none;
}

/* Smart-hide must clear the 10px offset as well as the bar. */
html[data-yz-design="motif"] body.yz-design-preset .yz-header.is-hidden {
	transform: translateY(calc(-100% - 28px));
}

html[data-yz-design="motif"] body.yz-design-preset #masthead .ast-main-header-wrap {
	max-width: var(--yzd-container);
	margin-inline: auto;
}

html[data-yz-design="motif"] body.yz-design-preset #masthead .ast-primary-header-bar,
html[data-yz-design="motif"] body.yz-design-preset #masthead .ast-mobile-header-wrap .main-header-bar {
	background: var(--yzm-paper) !important;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 999px;
	box-shadow: none;
	box-sizing: border-box;
	pointer-events: auto;
}

html[data-yz-design="motif"] body.yz-design-preset #masthead .site-primary-header-wrap,
html[data-yz-design="motif"] body.yz-design-preset #masthead .ast-primary-header-bar .ast-builder-grid-row {
	background: transparent;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .site-primary-header-wrap {
	max-width: none;
	padding-inline: 22px 7px;
}

/* The capsule keeps one height: no compress-on-scroll, so nothing below it shifts. */
html[data-yz-design="motif"] body.yz-design-preset:not(.yz-header-custom-h),
html[data-yz-design="motif"] body.yz-design-preset:not(.yz-header-custom-h) .yz-header.is-scrolled {
	--yz-header-h: 58px;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header.is-scrolled .custom-logo-link img,
html[data-yz-design="motif"] body.yz-design-preset .yz-header.is-scrolled .site-logo-img img,
html[data-yz-design="motif"] body.yz-design-preset .yz-header.is-scrolled .site-branding img {
	transform: none;
}

/* Three tracks: logo · menu · icons. */
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 16px;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .site-header-primary-section-left {
	justify-content: flex-start;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .site-header-primary-section-center {
	justify-content: center;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .site-header-primary-section-right {
	justify-content: flex-end;
	gap: 4px;
}

/* The Black⇄Burgundy switcher is a Heritage feature (DECISIONS D-3.6). */
html[data-yz-design="motif"] .yz-design-preset .yz-theme-slot,
html[data-yz-design="motif"] .yz-design-preset .yz-theme-switcher {
	display: none !important;
}

/* Navigation: sentence case, Jost 600. Hover = a flat amber pill popping in behind the label
   (the theme's underline pseudo, re-cut as a pill and animated with scale/opacity). */
html[data-yz-design="motif"] body.yz-design-preset .yz-header .main-header-menu > .menu-item > .menu-link,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .main-header-menu > .menu-item > a {
	z-index: 0;
	padding-inline: 16px;
	font-family: var(--yzd-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--yzm-ink) !important;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item > a::after {
	inset-inline: 2px;
	inset-block: 9px;
	bottom: 9px;
	z-index: -1;
	width: auto;
	height: auto;
	border-radius: 999px;
	background: var(--yzd-accent);
	opacity: 0;
	transform: scale(0.72);
	transform-origin: 50% 50%;
	transition: transform var(--yzm-fast) var(--yzm-ease), opacity var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item > a:hover::after,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item > a:focus-visible::after,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item:focus-within > a::after,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item.current-menu-item > a::after,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item.current-menu-ancestor > a::after {
	opacity: 1;
	transform: scale(1);
}

/* The label on the amber pill takes the accent's own text colour (ink by default). */
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item > a:hover,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item > a:focus-visible,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item:focus-within > a,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item.current-menu-item > a,
html[data-yz-design="motif"] body.yz-design-preset #ast-desktop-header .main-header-menu > .menu-item.current-menu-ancestor > a {
	color: var(--yzd-on-accent) !important;
}

/* Drop-downs and the mega panel: flat paper sheets with an ink outline, hanging under the pill. */
@media (min-width: 922px) {
	html[data-yz-design="motif"] body.yz-design-preset .yz-header .sub-menu {
		inset-block-start: calc(100% + 10px);
		padding: 10px;
		background: var(--yzm-paper);
		border: var(--yzm-stroke) solid var(--yzm-ink);
		border-radius: 22px;
		box-shadow: none;
	}

	/* A hover bridge across the 10px gap, so the pointer can reach the panel. */
	html[data-yz-design="motif"] body.yz-design-preset .yz-header .main-header-menu > .menu-item > .sub-menu::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 100%;
		block-size: 14px;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .sub-menu .menu-item > a {
		padding: 10px 14px;
		border-radius: 12px;
		font-family: var(--yzd-font-body);
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: 0;
		color: var(--yzm-ink) !important;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .sub-menu .menu-item > a:hover,
	html[data-yz-design="motif"] body.yz-design-preset .yz-header .sub-menu .menu-item > a:focus-visible {
		background: var(--yzd-accent);
		color: var(--yzd-on-accent) !important;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu {
		gap: 8px 28px;
		padding: 22px;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu > .menu-item > a {
		padding: 6px 10px 10px;
		margin-block-end: 6px;
		border-radius: 0;
		border-block-end: var(--yzm-stroke) solid var(--yzm-ink);
		font-family: var(--yzd-font-display);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu > .menu-item > a:hover,
	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu > .menu-item > a:focus-visible {
		background: transparent;
		color: var(--yzd-primary) !important;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu .sub-menu {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu .sub-menu .menu-item > a {
		padding: 8px 10px;
		color: var(--yzd-text-2) !important;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu .sub-menu .menu-item > a:hover,
	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega > .sub-menu .sub-menu .menu-item > a:focus-visible {
		background: var(--yzd-accent);
		color: var(--yzd-on-accent) !important;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega--simple > .sub-menu {
		padding: 10px;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega--simple > .sub-menu > .menu-item > a {
		padding: 10px 14px;
		margin: 0;
		border: 0;
		border-radius: 12px;
		font-family: var(--yzd-font-body);
		font-size: 0.9375rem;
		font-weight: 500;
	}

	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega--simple > .sub-menu > .menu-item > a:hover,
	html[data-yz-design="motif"] body.yz-design-preset .yz-header .yz-mega--simple > .sub-menu > .menu-item > a:focus-visible {
		background: var(--yzd-accent);
		color: var(--yzd-on-accent) !important;
	}
}

/* Icon cluster: 44px round targets; the bag is the capsule's ink end-cap. */
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-search,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-account {
	min-width: 44px;
	justify-content: center;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-search .astra-search-icon {
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	opacity: 1;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-search .astra-search-icon svg {
	width: 20px;
	height: 20px;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-account-link {
	min-inline-size: 44px;
	min-block-size: 44px;
	justify-content: center;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-account-type-avatar .avatar {
	box-shadow: 0 0 0 2px var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-account-wrap:hover .avatar {
	box-shadow: 0 0 0 2px var(--yzd-primary);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-woo-header-cart-info-wrap {
	display: none;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-woo-cart .ast-site-header-cart-li > a,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-woo-cart .cart-container {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-addon-cart-wrap {
	padding: 0;
	border: 0;
	background: transparent;
	color: #FFFDF8 !important;
	line-height: 1;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-addon-cart-wrap .astra-icon,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-addon-cart-wrap,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-addon-cart-wrap .astra-icon {
	color: #FFFDF8 !important;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-addon-cart-wrap i.astra-icon::after,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-cart-menu-wrap .count,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-addon-cart-wrap i.astra-icon::after,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-cart-menu-wrap .count {
	background-color: var(--yzd-accent);
	border-color: var(--yzm-ink);
	color: var(--yzd-on-accent);
	font-weight: 700;
}

/* Slide-out search: a flat outlined field, anchored logically so RTL opens into the page. */
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-search-menu-icon .search-form {
	inset-inline-start: auto;
	inset-inline-end: -4px;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-search .ast-search-menu-icon.ast-dropdown-active .search-form {
	padding: 6px 8px 6px 16px;
	padding-inline: 16px 8px;
	background: var(--yzm-paper);
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 999px;
	box-shadow: none;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-search .search-field,
html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-search .search-field::placeholder {
	font-family: var(--yzd-font-body);
	font-size: max(15px, 0.9375rem);
	letter-spacing: 0;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-header-search .search-field::placeholder {
	color: var(--yzd-muted);
	opacity: 1;
}

html[data-yz-design="motif"] .yz-design-preset .ast-live-search-results {
	background: var(--yzm-paper);
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 18px;
	box-shadow: none;
	overflow: hidden;
}

html[data-yz-design="motif"] .yz-design-preset .ast-live-search-results .ast-search-item:hover,
html[data-yz-design="motif"] .yz-design-preset .ast-live-search-results .ast-search-item:focus-within {
	background-color: var(--yzm-tint-1);
}

html[data-yz-design="motif"] .yz-design-preset .ast-live-search-results .ast-search--posttype-heading {
	font-size: max(12px, 0.75rem);
	opacity: 1;
	color: var(--yzd-muted);
}

/* Mobile capsule: logo (start) · bag + menu trigger (end). */
html[data-yz-design="motif"] body.yz-design-preset #ast-mobile-header .ast-primary-header-bar {
	padding-inline: 16px 6px;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-mobile-header .site-header-primary-section-left {
	justify-content: flex-start;
}

html[data-yz-design="motif"] body.yz-design-preset #ast-mobile-header .site-header-primary-section-right {
	justify-content: flex-end;
	gap: 6px;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-button-wrap .menu-toggle.main-header-menu-toggle {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: var(--yzm-stroke) solid var(--yzm-ink) !important;
	border-radius: 50%;
	background: var(--yzd-accent) !important;
	color: var(--yzd-on-accent) !important;
	box-shadow: none;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-header .ast-button-wrap .menu-toggle.main-header-menu-toggle svg {
	fill: currentColor;
}

/* Off-canvas menu: ground sheet, big sentence-case links, ink rules. */
html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-drawer .ast-mobile-popup-inner {
	border-inline-start: var(--yzm-stroke) solid var(--yzm-ink);
	box-shadow: none;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-drawer .main-header-menu .menu-link {
	font-family: var(--yzd-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	padding-block: 18px;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-drawer .sub-menu .menu-link {
	font-family: var(--yzd-font-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	padding-block: 14px;
	background-color: var(--yzm-bone) !important;
	box-shadow: inset calc(4px * var(--yzm-dir)) 0 0 0 var(--yzd-primary);
	color: var(--yzm-ink) !important;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-drawer .menu-item {
	border-block-end: var(--yzm-stroke) solid var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-drawer .menu-item.current-menu-item > .menu-link,
html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-drawer .menu-item.current-menu-ancestor > .menu-link {
	background-color: var(--yzd-accent) !important;
	box-shadow: none;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-drawer .menu-item.ast-submenu-expanded > .menu-link {
	color: var(--yzd-primary) !important;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-content .yz-account-id__sub {
	font-size: max(12px, 0.75rem);
}

/* The search field inside the off-canvas menu: an outlined pill, like every other field. */
html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-content .ast-search-menu-icon .search-form {
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-field);
	border-radius: 999px;
	background: var(--yzm-paper);
	box-shadow: none;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-content .ast-search-menu-icon .search-form:focus-within {
	border-color: var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-content .ast-search-menu-icon .search-field {
	min-height: 44px;
	padding-inline: 18px 8px;
	border: 0;
	background: transparent;
	color: var(--yzm-ink);
	font-family: var(--yzd-font-body);
	font-size: 1rem;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-content .ast-search-menu-icon .search-field::placeholder {
	color: var(--yzd-muted);
	opacity: 1;
}

html[data-yz-design="motif"] body.yz-design-preset .ast-mobile-popup-content .ast-search-menu-icon .search-submit {
	min-width: 44px;
	min-height: 44px;
	color: var(--yzm-ink);
}

/* --------------------------------------------------------------------------
   4. Hero — the typographic poster (template-parts/designs/motif/hero.php)
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzm-hero {
	padding-block: clamp(12px, 2.6vw, 36px) clamp(32px, 5vw, 72px);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: center;
	gap: clamp(24px, 5vw, 88px);
	min-height: clamp(440px, 62vh, 640px);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__copy {
	padding: 0;
	gap: clamp(16px, 2vw, 26px);
	min-width: 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__eyebrow {
	margin: 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__title {
	max-width: none;
	margin: 0;
	font-size: var(--yzd-h1);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	/* The heading carries dir="auto" (its words are inline-blocks); it still lines up with the
	   page's start edge, whatever its own direction. */
	text-align: match-parent;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero--long .yzm-hero__title {
	font-size: clamp(2.75rem, 6.6vw, 6.25rem);
	line-height: 0.94;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero--xlong .yzm-hero__title {
	font-size: clamp(2.25rem, 4.6vw, 4.25rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-w {
	display: inline-block;
}

/* The one word on a colour chip: the italic serif against the heavy sans. */
html[data-yz-design="motif"] .yz-design-preset .yzm-w--chip {
	margin-inline-start: 0.04em;
	padding: 0.02em 0.2em 0.1em;
	border-radius: 0.16em;
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
	font-family: var(--yzm-font-accent);
	font-style: italic;
	font-weight: 600;
	font-size: 1.08em;
	line-height: 0.86;
	letter-spacing: -0.02em;
	rotate: calc(-3deg * var(--yzm-dir));
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzm-w--chip {
	font-family: var(--yzd-font-display);
	font-style: normal;
	font-size: 1em;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Arabic carries marks above and below the line (tashkeel) and must never be tracked. At the Latin
   0.9 leading the damma of the first word sat on top of the eyebrow; seen under a real Arabic
   locale, not the client-side dir flip. Placed after the --long/--xlong rules so it wins at equal
   weight. */
html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzm-hero__title {
	line-height: 1.35;
	letter-spacing: 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__text {
	max-width: 40ch;
	margin: 0;
	font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
	line-height: 1.5;
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__actions {
	gap: 14px;
	margin-block-start: 4px;
}

/* The art: an arch-masked image among flat shapes. */
html[data-yz-design="motif"] .yz-design-preset .yzm-hero__art {
	position: relative;
	justify-self: center;
	inline-size: min(100%, 470px);
	aspect-ratio: 5 / 6;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__arch {
	position: absolute;
	inset-block: 7% 0;
	inset-inline: 11%;
	z-index: 1;
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-start-start-radius: 999px;
	border-start-end-radius: 999px;
	background: var(--yzd-primary);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__arch .yzd-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-hero__blank {
	position: absolute;
	inset-inline: 22%;
	inset-block-start: 24%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-shape {
	position: absolute;
	display: block;
	pointer-events: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-shape--sun {
	inset-block-start: 0;
	inset-inline-start: -5%;
	z-index: 0;
	inline-size: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--yzd-accent);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-shape--quarter {
	inset-block-end: 0;
	inset-inline-end: -7%;
	z-index: 2;
	inline-size: 36%;
	aspect-ratio: 1;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-start-start-radius: 100%;
	background: var(--yzm-teal);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-shape--ring {
	inset-block-start: 20%;
	inset-inline-end: -6%;
	z-index: 0;
	inline-size: 30%;
	aspect-ratio: 1;
	border: clamp(10px, 1.5vw, 20px) solid var(--yzm-ink);
	border-radius: 50%;
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-shape--spark {
	inset-block-start: -3%;
	inset-inline-end: 14%;
	z-index: 3;
	inline-size: 17%;
	aspect-ratio: 1;
	color: var(--yzd-primary);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-shape--spark svg {
	display: block;
	width: 100%;
	height: 100%;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-shape--dots {
	inset-block-end: 5%;
	inset-inline-start: -8%;
	z-index: 2;
	inline-size: 17%;
	aspect-ratio: 1;
	/* Nine flat dots (hard-stop radial pattern, no shading). */
	background-image: radial-gradient(circle, var(--yzm-ink) 0 34%, transparent 36%);
	background-size: 33.34% 33.34%;
}

/* Entrance (CSS only, above the fold — no observer). The image is never hidden: only its scale
   settles, so the LCP paint is not delayed. Runs once; held still under reduced motion and on a
   motion-off store (§19), where every piece is simply in place. */
@media (prefers-reduced-motion: no-preference) {
	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-w {
		animation: yzm-word-in var(--yzm-slow) var(--yzm-ease) both;
		animation-delay: calc(80ms + var(--yzm-i, 0) * 85ms);
	}

	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-hero__eyebrow,
	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-hero__text,
	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-hero__actions {
		animation: yzm-rise-in var(--yzm-slow) var(--yzm-ease) both;
	}

	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-hero__text {
		animation-delay: 420ms;
	}

	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-hero__actions {
		animation-delay: 520ms;
	}

	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-hero__arch .yzd-hero__img {
		animation: yzm-settle 1200ms var(--yzm-ease) both;
	}

	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape {
		animation: yzm-pop-in 700ms var(--yzm-ease) both;
	}

	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape--sun { animation-delay: 120ms; }
	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape--ring { animation-delay: 260ms; }
	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape--quarter { animation-delay: 360ms; }
	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape--dots { animation-delay: 460ms; }
	html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape--spark { animation-delay: 560ms; }
}

@keyframes yzm-word-in {
	from {
		clip-path: inset(0 0 100% 0);
		translate: 0 0.42em;
	}

	to {
		clip-path: inset(-0.4em -0.3em -0.4em -0.3em);
		translate: 0 0;
	}
}

@keyframes yzm-rise-in {
	from {
		opacity: 0;
		translate: 0 22px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes yzm-settle {
	from { scale: 1.12; }
	to { scale: 1; }
}

@keyframes yzm-pop-in {
	from {
		opacity: 0;
		scale: 0.4;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

/* Scroll-linked spin: the spark and the ring counter-rotate as the page moves (compositor-only
   `rotate`, no script). An ENHANCEMENT: without scroll-timeline support the shapes stand still. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape--spark {
			animation: yzm-pop-in 700ms var(--yzm-ease) 560ms both, yzm-spin linear both;
			animation-timeline: auto, scroll(root block);
			animation-range: normal, 0px 1400px;
		}

		html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-shape--dots {
			animation: yzm-pop-in 700ms var(--yzm-ease) 460ms both, yzm-spin-back linear both;
			animation-timeline: auto, scroll(root block);
			animation-range: normal, 0px 1400px;
		}

		html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-stack__card--1 .yzm-stack__shape--a,
		html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzd-news__inner::before {
			animation: yzm-spin linear both;
			animation-timeline: view(block);
			animation-range: entry 0% exit 100%;
		}

		/* The lens and the bag are whole pictures: they swing a little, in opposite directions. */
		html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-stack__card--2 .yzm-stack__art {
			animation: yzm-swing linear both;
			animation-timeline: view(block);
			animation-range: entry 0% exit 100%;
		}

		html[data-yz-design="motif"] body.yz-design-preset:not(.yzm-still) .yzm-stack__card--3 .yzm-stack__art {
			animation: yzm-swing linear both reverse;
			animation-timeline: view(block);
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes yzm-spin {
	from { rotate: 0deg; }
	to { rotate: 200deg; }
}

@keyframes yzm-spin-back {
	from { rotate: 0deg; }
	to { rotate: -140deg; }
}

@keyframes yzm-swing {
	from { rotate: -12deg; }
	to { rotate: 12deg; }
}

/* --------------------------------------------------------------------------
   5. Marquee band (template-parts/designs/motif/marquee.php) — decorative, aria-hidden
   Two identical groups; the track moves by exactly one group, forever. The band clips itself.
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzm-marquee,
html[data-yz-design="motif"] .yz-design-preset .yzd-section + .yzm-marquee {
	padding-block: 0;
	overflow: hidden;
	overflow: clip;
	border-block: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-marquee + .yzd-section {
	padding-block-start: var(--yzd-space);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-marquee__track {
	display: flex;
	inline-size: max-content;
	animation: yzm-marquee calc(var(--yzm-n, 8) * 4.2s) linear infinite;
	will-change: transform;
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzm-marquee__track {
	animation-name: yzm-marquee-rtl;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-marquee:hover .yzm-marquee__track,
html[data-yz-design="motif"] .yz-design-preset .yzm-marquee:focus-within .yzm-marquee__track,
html[data-yz-design="motif"] .yz-design-preset .yzm-marquee.is-paused .yzm-marquee__track {
	animation-play-state: paused;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-marquee__item {
	display: flex;
	flex: none;
	align-items: center;
	gap: clamp(18px, 2.4vw, 36px);
	padding-block: clamp(14px, 1.8vw, 24px);
	padding-inline-end: clamp(18px, 2.4vw, 36px);
	font-family: var(--yzd-font-display);
	font-size: clamp(1.375rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The small shape between words: circle · diamond · arch, in turn. */
html[data-yz-design="motif"] .yz-design-preset .yzm-marquee__item::after {
	content: "";
	flex: none;
	inline-size: 0.5em;
	block-size: 0.5em;
	border-radius: 50%;
	background: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-marquee__item:nth-child(3n+2)::after {
	border-radius: 0;
	background: var(--yzd-primary);
	rotate: 45deg;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-marquee__item:nth-child(3n)::after {
	border-radius: 999px 999px 0 0;
	background: var(--yzm-teal);
}

@keyframes yzm-marquee {
	to { transform: translateX(-50%); }
}

@keyframes yzm-marquee-rtl {
	to { transform: translateX(50%); }
}

/* --------------------------------------------------------------------------
   6. Category bento — flat colour tiles in mixed spans (category-grid · overlay)
   Each tile: name top-start, count + arrow coin bottom-start, the category photo clipped into a
   shape at the bottom-end. Hover = a flat ink disc wiping in from the arrow corner (clip-path).
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(220px, 21vw, 290px);
	grid-auto-flow: dense;
	gap: var(--yzd-gap);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item {
	--yzm-tile: var(--yzd-primary);
	--yzm-tile-fg: var(--yzd-on-primary);
	min-width: 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+1) {
	grid-column: span 2;
	grid-row: span 2;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+2) {
	--yzm-tile: var(--yzd-accent);
	--yzm-tile-fg: var(--yzd-on-accent);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+3) {
	--yzm-tile: var(--yzm-teal);
	--yzm-tile-fg: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+4) {
	--yzm-tile: var(--yzm-bone);
	--yzm-tile-fg: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n) {
	--yzm-tile: var(--yzm-ink);
	--yzm-tile-fg: #FFFDF8;
}

/* Quantity queries: 2, 3 or 4 tiles still fill the grid with no hole. */
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:first-child:nth-last-child(2),
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:first-child:nth-last-child(2) ~ .yzd-cats__item {
	grid-column: span 2;
	grid-row: span 1;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:first-child:nth-last-child(3) ~ .yzd-cats__item,
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:first-child:nth-last-child(4) ~ .yzd-cats__item:nth-child(2) {
	grid-column: span 2;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: clamp(16px, 1.8vw, 26px);
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r-lg);
	background: var(--yzm-tile);
	color: var(--yzm-tile-fg);
	box-sizing: border-box;
}

/* The wipe layer. */
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--yzm-paper);
	clip-path: circle(0% at 0% 100%);
	transition: clip-path 520ms var(--yzm-ease-io);
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link::before {
	clip-path: circle(0% at 100% 100%);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__label {
	position: static;
	display: contents;
	padding: 0;
	background: none;
	color: inherit;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__name {
	order: 1;
	max-width: 100%;
	font-family: var(--yzd-font-display);
	font-size: clamp(1.25rem, 1.9vw, 1.75rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+1) .yzd-cats__name {
	max-width: 12ch;
	font-size: clamp(2rem, 4.4vw, 4rem);
	line-height: 0.94;
	letter-spacing: -0.03em;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__count {
	order: 2;
	margin-block-start: -4px;
	font-size: max(13px, 0.8125rem);
	font-weight: 500;
	color: inherit;
	opacity: 1;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__cta {
	order: 3;
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	margin-block-start: auto;
	padding-inline-start: 56px;
	font-size: max(14px, 0.875rem);
	font-weight: 600;
	color: inherit;
	opacity: 1;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__cta::after {
	inset-inline: 0 auto;
	background-color: var(--yzm-paper);
}

/* Small tiles: the arrow coin alone (the whole tile is the link and its name is the accessible
   text; the "Shop now" label stays in the markup, just not drawn beside the photo). */
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:not(:nth-child(5n+1)) .yzd-cats__cta {
	inline-size: 44px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 200%;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:not(:nth-child(5n+1)) .yzd-cats__name {
	max-width: 100%;
}

/* On the ink tile the photo's outline is paper (ink on ink would vanish). */
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n) .yzd-cats__media {
	border-color: var(--yzm-paper);
}

/* The photo, clipped: an arch on the large tile, a circle on the small ones. */
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__media {
	position: absolute;
	inset-block-end: clamp(14px, 1.6vw, 22px);
	inset-inline-end: clamp(14px, 1.6vw, 22px);
	z-index: 0;
	inline-size: 42%;
	aspect-ratio: 1;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	background: var(--yzm-paper);
	transition: scale var(--yzm-med) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+1) .yzd-cats__media {
	inset-block-end: 0;
	inset-inline-end: clamp(18px, 3vw, 44px);
	inline-size: 44%;
	aspect-ratio: 4 / 5;
	border-block-end: 0;
	border-radius: 999px 999px 0 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+4) .yzd-cats__media {
	border-radius: 50% 0 50% 0;
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+4) .yzd-cats__media {
	border-radius: 0 50% 0 50%;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__media.is-empty {
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__media img,
html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:hover .yzd-cats__media img {
	transform: none;
	transition: none;
}

@media (hover: hover) {
	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:hover::before {
		clip-path: circle(150% at 0% 100%);
	}

	html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:hover::before {
		clip-path: circle(150% at 100% 100%);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:hover {
		color: var(--yzm-ink);
		transition: color 0s 160ms;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:hover .yzd-cats__media {
		scale: 1.05;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:hover .yzd-cats__cta::after {
		background-color: var(--yzd-accent);
		translate: calc(4px * var(--yzm-dir)) 0;
	}

	/* The small tiles' coin sits in a 44px box: it changes colour but does not travel. */
	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:not(:nth-child(5n+1)) .yzd-cats__link:hover .yzd-cats__cta::after {
		translate: none;
	}
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:focus-visible::before {
	clip-path: circle(150% at 0% 100%);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link:focus-visible {
	color: var(--yzm-ink);
}

/* --------------------------------------------------------------------------
   7. Product tile (every loop: homepage, /store/, categories, related, upsells)
   A flat outlined tile. li::after is the face (paper + ink outline), li::before the flat ink
   "sticker" block behind it; on hover the tile slides up-and-start and the block stays, so an
   L of ink shows. The photo stands in an ARCH on a colour field that rotates through five tints.
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card {
	--yzm-tint: var(--yzm-tint-1);
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 10px 10px 14px;
	border: 0;
	border-radius: var(--yzm-r);
	background: transparent;
	box-shadow: none;
	text-align: start;
	box-sizing: border-box;
	transition:
		translate var(--yzm-fast) var(--yzm-ease),
		opacity var(--yzm-slow) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:nth-child(5n+2) { --yzm-tint: var(--yzm-tint-2); }
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:nth-child(5n+3) { --yzm-tint: var(--yzm-tint-3); }
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:nth-child(5n+4) { --yzm-tint: var(--yzm-tint-4); }
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:nth-child(5n) { --yzm-tint: var(--yzm-tint-5); }

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card::before,
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	border-radius: inherit;
	box-sizing: border-box;
	pointer-events: none;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card::before {
	z-index: -2;
	background: var(--yzm-ink);
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card::after {
	z-index: -1;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-paper);
}

/* The reveal rise is the theme's (.yz-reveal → .is-inview, motion.css); in view, the tile rests. */
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:hover,
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:focus-within {
	box-shadow: none;
}

@media (hover: hover) {
	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card.is-inview:hover,
	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:not(.yz-reveal):hover {
		translate: calc(var(--yzm-lift) * -1 * var(--yzm-dir)) calc(var(--yzm-lift) * -1);
	}

	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:hover::before {
		translate: calc(var(--yzm-lift) * 2 * var(--yzm-dir)) calc(var(--yzm-lift) * 2);
	}
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card.is-inview:focus-within,
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:not(.yz-reveal):focus-within {
	translate: calc(var(--yzm-lift) * -1 * var(--yzm-dir)) calc(var(--yzm-lift) * -1);
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:focus-within::before {
	translate: calc(var(--yzm-lift) * 2 * var(--yzm-dir)) calc(var(--yzm-lift) * 2);
}

/* Unwrap Astra's thumbnail wrapper: image link, summary and button become one column on the tile
   (no markup change). */
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .astra-shop-thumbnail-wrap {
	display: contents;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .woocommerce-LoopProduct-link {
	order: 1;
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background: var(--yzm-tint);
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .woocommerce-LoopProduct-link img,
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .yz-card__img--alt {
	position: absolute;
	inset-block: 9% 0;
	inset-inline: 14%;
	width: 72%;
	height: 91%;
	aspect-ratio: auto;
	object-fit: cover;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-block-end: 0;
	border-radius: 999px 999px 0 0;
	background: var(--yzm-paper);
	box-sizing: border-box;
	transform: none;
	transform-origin: 50% 100%;
	transition: transform var(--yzm-slow) var(--yzm-ease), opacity var(--yzm-med) var(--yzm-ease);
}

@media (hover: hover) {
	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:hover .woocommerce-LoopProduct-link img {
		transform: scale(1.04);
	}
}

html[data-yz-design="motif"] .yz-design-preset .yz-card--rare .woocommerce-LoopProduct-link::after {
	display: none;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .astra-shop-summary-wrap {
	order: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: 14px 6px 0;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .yz-subject {
	order: 0;
	max-width: 100%;
	margin: 0 0 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--yzd-font-body);
	font-size: max(12px, 0.75rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: var(--yzd-muted);
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .ast-loop-product__link {
	order: 1;
	display: block;
	padding-block: 3px;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .woocommerce-loop-product__title {
	font-family: var(--yzd-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--yzm-ink);
	transition: none;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:hover .woocommerce-loop-product__title,
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card:focus-within .woocommerce-loop-product__title {
	color: var(--yzm-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .ast-woo-product-category {
	order: 2;
	display: block;
	margin-block-start: 4px;
	font-size: max(13px, 0.8125rem);
	color: var(--yzd-muted);
	opacity: 1;
}

/* Price: a flat amber pill chip, sitting on the tile's bottom line beside the round button. */
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .price {
	order: 3;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-self: flex-start;
	gap: 0 8px;
	max-width: calc(100% - 54px);
	margin: auto 0 0;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
	font-family: var(--yzd-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .astra-shop-summary-wrap > :nth-last-child(2) {
	margin-block-end: 14px;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .price del {
	order: 2;
	margin: 0;
	font-size: max(13px, 0.8125rem);
	font-weight: 500;
	color: inherit;
	opacity: 0.72;
}

html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .price ins {
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

/* Badge: ONE per card, a flat sticker tilted across the corner of the colour field. */
html[data-yz-design="motif"] .yz-design-preset .yz-badges:not(.yz-badges--single) {
	inset-block-start: 12px;
	inset-inline-start: 10px;
	max-width: calc(100% - 64px);
	rotate: calc(-5deg * var(--yzm-dir));
	transform-origin: 0 0;
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yz-badges:not(.yz-badges--single) {
	transform-origin: 100% 0;
}

html[data-yz-design="motif"] .yz-design-preset .yz-badges:not(.yz-badges--single) .yz-badge ~ .yz-badge {
	display: none;
}

html[data-yz-design="motif"] .yz-design-preset .yz-badge {
	max-width: 100%;
	padding: 6px 10px;
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 8px;
	background: var(--yzm-paper);
	color: var(--yzm-ink);
	font-family: var(--yzd-font-body);
	font-size: max(12px, 0.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset .yz-badge--rare,
html[data-yz-design="motif"] .yz-design-preset .yz-badge--sale {
	background: var(--yz-badge-rare-bg, var(--yzd-primary));
	color: var(--yz-badge-rare-fg, var(--yzd-on-primary));
}

html[data-yz-design="motif"] .yz-design-preset .yz-badge--sale {
	background: var(--yz-badge-sale-bg, var(--yzd-primary));
	color: var(--yz-badge-sale-fg, var(--yzd-on-primary));
}

html[data-yz-design="motif"] .yz-design-preset .yz-badge--sold {
	background: var(--yz-badge-sold-bg, var(--yzm-ink));
	color: var(--yz-badge-sold-fg, #FFFDF8);
}

/* Wishlist heart: a paper coin with an ink outline. */
html[data-yz-design="motif"] .yz-design-preset .yz-wish--overlay {
	inset-block-start: 6px;
	inset-inline-end: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	background: var(--yzm-paper);
	color: var(--yzm-ink);
	box-shadow: none;
}

/* Add to cart: a round ink button on the tile's bottom-end corner. Its label is ALWAYS in the
   box (and in the accessibility tree); at rest a clip-path shows only the 44px coin, and on
   hover / keyboard focus the clip opens along the label — clip-path only, no width animation.
   On touch screens the coin is simply there, 44px, always tappable. */
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) {
	order: 4;
	position: absolute;
	inset-block: auto 12px;
	inset-inline: auto 12px;
	z-index: 5;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	width: auto;
	max-width: calc(100% - 24px);
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0 !important;
	border-radius: 22px !important;
	background: var(--yzm-ink) !important;
	color: #FFFDF8 !important;
	text-shadow: none;
	box-sizing: border-box;
	opacity: 1;
	visibility: visible;
	transform: none;
	clip-path: inset(0 0 0 calc(100% - 44px) round 22px);
	transition: clip-path var(--yzm-med) var(--yzm-ease);
}

html[data-yz-design="motif"][dir="rtl"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) {
	clip-path: inset(0 calc(100% - 44px) 0 0 round 22px);
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card):hover,
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card):focus {
	border: 0 !important;
	background-color: var(--yzm-ink) !important;
	color: #FFFDF8 !important;
	text-shadow: none;
}

@media (hover: hover) {
	html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card):hover {
		clip-path: inset(0 0 0 0 round 22px);
	}
}

/* Keyboard focus opens the label too; the clip is pushed OUT so the focus ring is not cut off. */
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card):focus-visible {
	clip-path: inset(-10px -10px -10px -10px round 32px);
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card)::before {
	display: none;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) .ast-card-action-tooltip {
	position: static;
	flex: 0 1 auto;
	min-width: 0;
	padding-inline: 18px 2px;
	overflow: hidden;
	color: inherit;
	font-family: var(--yzd-font-body);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

/* The coin: the bag glyph is replaced by a flat "+" that turns a quarter on hover. */
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) .ahfb-svg-iconset {
	order: 2;
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: inherit;
	transform: none;
	transition: rotate var(--yzm-med) var(--yzm-ease);
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) .ahfb-svg-iconset .ast-icon {
	display: none;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) .ahfb-svg-iconset::before,
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) .ahfb-svg-iconset::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 16px;
	block-size: 2.5px;
	margin: 0;
	margin-block-start: -1.25px;
	margin-inline-start: -8px;
	border-radius: 2px;
	background: currentColor;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) .ahfb-svg-iconset::after {
	rotate: 90deg;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card):hover .ahfb-svg-iconset,
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card):focus-visible .ahfb-svg-iconset {
	color: inherit;
	transform: none;
	rotate: 90deg;
}

/* Already in the bag: a teal coin with a tick. */
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-in-cart:not(.ast-onsale-card),
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-in-cart:not(.ast-onsale-card):hover,
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-in-cart:not(.ast-onsale-card):focus {
	background: var(--yzm-teal) !important;
	background-color: var(--yzm-teal) !important;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-in-cart:not(.ast-onsale-card) .ahfb-svg-iconset::before {
	display: none;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-in-cart:not(.ast-onsale-card) .ahfb-svg-iconset::after {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 8px;
	block-size: 15px;
	margin: 0;
	margin-block-start: -10px;
	margin-inline-start: -4px;
	border: solid currentColor;
	border-width: 0 2.5px 2.5px 0;
	border-radius: 0;
	background: transparent;
	rotate: 45deg;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-in-cart:not(.ast-onsale-card):hover .ahfb-svg-iconset,
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-in-cart:not(.ast-onsale-card):focus-visible .ahfb-svg-iconset {
	rotate: none;
}

/* While the add is pending the theme hides the button's contents and lays "Adding…" over it:
   the pill opens so that label can be read. */
html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button.yz-adding:not(.ast-onsale-card) {
	clip-path: inset(0 0 0 0 round 22px);
	opacity: 1;
}

html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button .yz-adding__label {
	font-size: max(12px, 0.75rem);
	letter-spacing: 0.04em;
	color: #FFFDF8;
}

/* WooCommerce's "View cart" link (added after the button once an item is in) takes its own line
   under the price instead of landing above the photo. */
html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card a.added_to_cart {
	order: 5;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 4px 6px 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yzm-ink);
	font-size: max(14px, 0.875rem);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   8. Tabs — a pill group with ONE ink pill that slides between tabs
   Without the script the selected tab is simply ink (below); designs-motif.js adds .yzm-tabs-live
   and feeds the four insets of the sliding layer (a clip-path on ::before).
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzd-tabs {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 100%;
	margin-block-end: clamp(20px, 2.6vw, 32px);
	padding: 4px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 30px;
	background: var(--yzm-paper);
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-tabs__tab {
	min-height: 44px;
	padding: 8px 20px;
	border-radius: 999px;
	background: transparent;
	color: var(--yzm-ink);
	font-family: var(--yzd-font-body);
	font-size: max(15px, 0.9375rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	transition: color 0s 120ms;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-tabs__tab[aria-selected="true"]::after {
	display: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-tabs__tab[aria-selected="true"] {
	background: var(--yzm-ink);
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-tabs__tab:not([aria-selected="true"]):hover {
	background: var(--yzm-tint-1);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-tabs.yzm-tabs-live .yzd-tabs__tab[aria-selected="true"] {
	background: transparent;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-tabs.yzm-tabs-live::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--yzm-ink);
	clip-path: inset(var(--yzm-tab-t, 4px) var(--yzm-tab-r, 50%) var(--yzm-tab-b, 4px) var(--yzm-tab-l, 4px) round 999px);
	transition: clip-path var(--yzm-med) var(--yzm-ease);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Stacked cards (template-parts/designs/motif/stack.php)
   Each sheet sticks a little lower than the one before, so the next slides up over it and the
   tops stay visible like index tabs. position: sticky only — no script, no scroll-jacking.
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__list {
	display: grid;
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card {
	--yzm-sheet: var(--yzd-accent);
	--yzm-sheet-fg: var(--yzd-on-accent);
	position: sticky;
	inset-block-start: calc(var(--yzm-sticky-top) + var(--yzm-n, 0) * 20px);
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	align-items: center;
	gap: clamp(16px, 4vw, 64px);
	min-height: clamp(300px, 44vh, 400px);
	margin: 0;
	padding: clamp(24px, 4vw, 56px);
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r-lg);
	background: var(--yzm-sheet);
	color: var(--yzm-sheet-fg);
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--2 {
	--yzm-sheet: var(--yzm-teal);
	--yzm-sheet-fg: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--3 {
	--yzm-sheet: var(--yzd-primary);
	--yzm-sheet-fg: var(--yzd-on-primary);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__num {
	font-family: var(--yzd-font-display);
	font-size: clamp(3.5rem, 9vw, 7.5rem);
	font-weight: 800;
	line-height: 0.82;
	letter-spacing: -0.04em;
}

html[data-yz-design="motif"] body.yz-design-preset .yzm-stack__title {
	margin: 6px 0 0;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--yzd-display-tracking);
	color: inherit;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__text {
	max-width: 36ch;
	margin: 0;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.5;
	color: inherit;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__btn {
	--yzm-btn-bg: var(--yzm-paper);
	--yzm-btn-fg: var(--yzm-ink);
	margin-block-start: 10px;
}

/* Flat compositions: three shapes per sheet, a different arrangement on each. */
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__art {
	position: relative;
	justify-self: end;
	inline-size: min(100%, 280px);
	aspect-ratio: 1;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__shape {
	position: absolute;
	display: block;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	box-sizing: border-box;
}

/* 01 — browse: three things on a shelf. */
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--1 .yzm-stack__shape--a {
	inset-block-start: 4%;
	inset-inline-start: 4%;
	inline-size: 44%;
	block-size: 44%;
	border-radius: 14px;
	background: var(--yzd-primary);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--1 .yzm-stack__shape--b {
	inset-block-start: 4%;
	inset-inline-end: 4%;
	inline-size: 44%;
	block-size: 44%;
	border-radius: 50%;
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--1 .yzm-stack__shape--c {
	inset-block-end: 0;
	inset-inline: 4%;
	block-size: 44%;
	border-radius: 999px 999px 0 0;
	background: var(--yzm-teal);
}

/* 02 — look closer: a lens. */
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--2 .yzm-stack__shape--a {
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 72%;
	block-size: 72%;
	border-width: clamp(14px, 2vw, 24px);
	border-color: var(--yzm-paper);
	border-radius: 50%;
	background: transparent;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--2 .yzm-stack__shape--b {
	inset-block-start: 57%;
	inset-inline-start: 53%;
	inline-size: 16%;
	block-size: 42%;
	border-radius: 999px;
	background: var(--yzd-accent);
	rotate: calc(-45deg * var(--yzm-dir));
	transform-origin: 50% 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--2 .yzm-stack__shape--c {
	inset-block-start: 22%;
	inset-inline-start: 22%;
	inline-size: 28%;
	block-size: 28%;
	border-radius: 50%;
	background: var(--yzd-primary);
}

/* 03 — add to your bag: a bag with a handle. */
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--3 .yzm-stack__shape--a {
	inset-block-start: 4%;
	inset-inline: 26%;
	block-size: 46%;
	border-width: clamp(8px, 1.1vw, 12px);
	border-color: var(--yzm-paper);
	border-radius: 999px 999px 0 0;
	border-block-end: 0;
	background: transparent;
}

html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--3 .yzm-stack__shape--b {
	inset-block-end: 2%;
	inset-inline: 8%;
	block-size: 64%;
	border-radius: 10px 10px 26px 26px;
	background: var(--yzd-accent);
}

/* A count coin on the bag's shoulder. */
html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card--3 .yzm-stack__shape--c {
	inset-block-start: 24%;
	inset-inline-end: 0;
	inline-size: 26%;
	block-size: 26%;
	border-radius: 50%;
	background: var(--yzm-paper);
}

/* --------------------------------------------------------------------------
   10. Category colour blocks (banners · trio) — flat fields with a clipped photo
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzd-banners__grid {
	gap: var(--yzd-gap);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner {
	--yzm-tile: var(--yzm-teal);
	--yzm-tile-fg: #FFFDF8;
	min-height: clamp(320px, 30vw, 420px);
	overflow: visible;
	border-radius: var(--yzm-r-lg);
	background: transparent;
	color: var(--yzm-tile-fg);
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner:nth-child(3n+2) {
	--yzm-tile: var(--yzd-accent);
	--yzm-tile-fg: var(--yzd-on-accent);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner:nth-child(3n) {
	--yzm-tile: var(--yzd-primary);
	--yzm-tile-fg: var(--yzd-on-primary);
}

/* Sticker pair again: ::before = ink block, ::after = the colour face (base.css's scrim, re-cut). */
html[data-yz-design="motif"] .yz-design-preset .yzd-banner::before,
html[data-yz-design="motif"] .yz-design-preset .yzd-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	border-radius: inherit;
	box-sizing: border-box;
	pointer-events: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner::before {
	z-index: -4;
	background: var(--yzm-ink);
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner::after {
	z-index: -3;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-tile);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner__img,
html[data-yz-design="motif"] .yz-design-preset .yzd-banner:hover .yzd-banner__img {
	inset: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px) auto auto;
	inset-block: clamp(16px, 2vw, 24px) auto;
	inset-inline: auto clamp(16px, 2vw, 24px);
	z-index: -2;
	width: 56%;
	height: auto;
	aspect-ratio: 1;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	box-sizing: border-box;
	transform: none;
	transition: scale var(--yzm-med) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner:nth-child(3n+2) .yzd-banner__img {
	width: 45%;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 0 0;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner:nth-child(3n) .yzd-banner__img {
	border-radius: 50% 0 50% 0;
}

html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yzd-banner:nth-child(3n) .yzd-banner__img {
	border-radius: 0 50% 0 50%;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner--no-image {
	color: var(--yzm-tile-fg);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner--no-image::after {
	display: block;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner__copy {
	gap: 14px;
	width: 100%;
	padding: clamp(18px, 2.2vw, 30px);
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner .yzd-eyebrow {
	color: inherit;
	opacity: 1;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner .yzd-eyebrow::before {
	background: currentColor;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner__title {
	max-width: 100%;
	font-size: clamp(1.625rem, 2.6vw, 2.5rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--yzd-display-tracking);
}

/* The button inside a banner is a label + arrow coin (the banner itself is the link). */
html[data-yz-design="motif"] .yz-design-preset .yzd-banner .yzd-banner__btn {
	--yzm-btn-fg: inherit;
	position: relative;
	isolation: auto;
	min-height: 44px;
	padding: 0;
	padding-inline-start: 56px;
	background: transparent;
	color: inherit;
	translate: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner .yzd-banner__btn::before {
	display: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner .yzd-banner__btn::after {
	inset: 50% auto auto 0;
	inset-block: 50% auto;
	inset-inline: 0 auto;
	z-index: 0;
	border-radius: 50%;
	background: var(--yzm-paper) var(--yzm-arrow) center / 20px 20px no-repeat;
}

@media (hover: hover) {
	html[data-yz-design="motif"] .yz-design-preset .yzd-banner:hover {
		translate: calc(var(--yzm-lift) * -1 * var(--yzm-dir)) calc(var(--yzm-lift) * -1);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-banner:hover::before {
		translate: calc(var(--yzm-lift) * 2 * var(--yzm-dir)) calc(var(--yzm-lift) * 2);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-banner:hover .yzd-banner__img {
		scale: 1.05;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-banner:hover .yzd-banner__btn::after {
		translate: calc(4px * var(--yzm-dir)) 0;
	}
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner:focus-visible {
	translate: calc(var(--yzm-lift) * -1 * var(--yzm-dir)) calc(var(--yzm-lift) * -1);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-banner:focus-visible::before {
	translate: calc(var(--yzm-lift) * 2 * var(--yzm-dir)) calc(var(--yzm-lift) * 2);
}

/* --------------------------------------------------------------------------
   11. Service tiles (features · cards) — flat icon tiles
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzd-features__list {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--yzd-gap);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item {
	--yzm-chip: var(--yzd-accent);
	--yzm-chip-fg: var(--yzd-on-accent);
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: clamp(20px, 2.2vw, 30px);
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r-lg);
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item:nth-child(4n+2) {
	--yzm-chip: var(--yzm-teal);
	--yzm-chip-fg: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item:nth-child(4n+3) {
	--yzm-chip: var(--yzd-primary);
	--yzm-chip-fg: var(--yzd-on-primary);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item:nth-child(4n) {
	--yzm-chip: var(--yzm-ink);
	--yzm-chip-fg: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features__icon {
	box-sizing: content-box;
	padding: 16px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	background: var(--yzm-chip);
	color: var(--yzm-chip-fg);
	stroke-width: 1.8;
	transition: rotate var(--yzm-med) var(--yzm-ease), scale var(--yzm-med) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item:nth-child(4n+2) .yzd-features__icon {
	border-radius: 999px 999px 10px 10px;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item:nth-child(4n+3) .yzd-features__icon {
	border-radius: 16px;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item:nth-child(4n) .yzd-features__icon {
	border-radius: 50% 0 50% 50%;
}

@media (hover: hover) {
	html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item:hover .yzd-features__icon {
		rotate: calc(-8deg * var(--yzm-dir));
		scale: 1.06;
	}
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features__title {
	font-family: var(--yzd-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features__desc {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-features__link {
	font-size: max(14px, 0.875rem);
	color: var(--yzm-ink);
}

/* --------------------------------------------------------------------------
   12. Reviews + newsletter block
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .yzd-review {
	padding: clamp(22px, 2.4vw, 32px);
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r-lg);
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-reviews__item:nth-child(3n+2) .yzd-review {
	background: var(--yzm-tint-1);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-reviews__item:nth-child(3n) .yzd-review {
	background: var(--yzm-tint-2);
}

/* Stars in ink: red reads on paper but drops to 4:1 on the tinted cards. */
html[data-yz-design="motif"] .yz-design-preset .yzd-review__stars {
	color: var(--yzm-ink);
	font-size: 1.125rem;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-review__text,
html[data-yz-design="motif"] .yz-design-preset .yzd-review__text p {
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.5;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-review__name {
	font-weight: 700;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-review__product {
	color: var(--yzd-text-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Newsletter: a full-bleed teal block. The footer's rounded sheet rises over its lower edge. */
html[data-yz-design="motif"] .yz-design-preset .yzd-news,
html[data-yz-design="motif"] .yz-design-preset .yzd-section + .yzd-news {
	padding-block: clamp(48px, 7vw, 104px);
	overflow: hidden;
	overflow: clip;
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-teal);
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news--band .yzd-news__inner {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2.4vw, 32px);
	padding-block: 0;
	padding-inline: var(--yzd-gutter);
	border-radius: 0;
	background: transparent;
	color: inherit;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news__copy {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news .yzd-eyebrow {
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news .yzd-eyebrow::before {
	background: var(--yzd-accent);
}

html[data-yz-design="motif"] body.yz-design-preset .yzd-news__title {
	font-size: clamp(2.5rem, 7vw, 6rem);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: var(--yzd-display-tracking);
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news__text {
	margin-block-start: 16px;
	font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news--band .yzd-btn {
	--yzm-btn-bg: var(--yzd-accent);
	--yzm-btn-fg: var(--yzd-on-accent);
	z-index: 1;
	border: 0;
	background: transparent;
	color: var(--yzd-on-accent);
}

/* Two flat shapes at the end of the band (desktop only, purely decorative). */
html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::before,
html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::after {
	content: "";
	position: absolute;
	z-index: 0;
	box-sizing: border-box;
	pointer-events: none;
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::before {
	inset-block-start: -6%;
	inset-inline-end: calc(var(--yzd-gutter) + clamp(150px, 19vw, 270px));
	inline-size: clamp(90px, 11vw, 160px);
	aspect-ratio: 1;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 28%;
	background: var(--yzd-primary);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::after {
	inset-block-end: -8%;
	inset-inline-end: var(--yzd-gutter);
	inline-size: clamp(130px, 17vw, 240px);
	aspect-ratio: 1;
	border: clamp(14px, 2vw, 28px) solid var(--yzd-accent);
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   13. Scroll reveals (driven by designs-motif.js)
   The script tags a below-the-fold target with [data-yzm="rise|clip|pop"] and a stagger index and
   only THEN adds html.yzm-io — so nothing on screen ever blinks and nothing is hidden unless the
   observer exists to show it. It removes the attribute once an element has arrived, so no
   clip-path is left behind to cut a focus ring.

   "clip" wipes the tile INSIDE the observed list item, never the observed element itself: a fully
   clipped target counts as "not intersecting" for IntersectionObserver, and would never be shown.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html.yzm-io[data-yz-design="motif"] body:not(.yzm-still) [data-yzm] {
		transition:
			opacity var(--yzm-slow) var(--yzm-ease),
			translate var(--yzm-slow) var(--yzm-ease),
			scale var(--yzm-slow) var(--yzm-ease),
			clip-path var(--yzm-slow) var(--yzm-ease-io);
		transition-delay: calc(var(--yzm-i, 0) * 90ms);
	}

	html.yzm-io[data-yz-design="motif"] body:not(.yzm-still) [data-yzm="rise"]:not(.yzm-in) {
		opacity: 0;
		translate: 0 var(--yzm-rise);
	}

	html.yzm-io[data-yz-design="motif"] body:not(.yzm-still) [data-yzm="clip"] > * {
		clip-path: inset(-16px -16px -16px -16px round 32px);
		transition:
			translate var(--yzm-slow) var(--yzm-ease),
			clip-path var(--yzm-slow) var(--yzm-ease-io);
		transition-delay: calc(var(--yzm-i, 0) * 90ms);
	}

	html.yzm-io[data-yz-design="motif"] body:not(.yzm-still) [data-yzm="clip"]:not(.yzm-in) > * {
		clip-path: inset(100% 0 0 0 round 32px);
		translate: 0 var(--yzm-rise);
	}

	html.yzm-io[data-yz-design="motif"] body:not(.yzm-still) [data-yzm="pop"]:not(.yzm-in) {
		opacity: 0;
		scale: 0.82;
	}
}

@media print {
	html[data-yz-design="motif"] [data-yzm],
	html[data-yz-design="motif"] [data-yzm] > * {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		clip-path: none !important;
	}
}

/* --------------------------------------------------------------------------
   14. /store/ archive + category pages
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header {
	position: relative;
	margin-block-end: clamp(18px, 2.4vw, 32px);
	padding: clamp(24px, 4vw, 56px);
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r-lg);
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
}

/* A quarter-circle and a ring in the banner's end corner. */
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header::before,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header::before {
	inset-block-end: 0;
	inset-inline-end: 0;
	inline-size: clamp(90px, 14vw, 190px);
	aspect-ratio: 1;
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
	border-inline-start: var(--yzm-stroke) solid var(--yzm-ink);
	border-start-start-radius: 100%;
	background: var(--yzd-primary);
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header::after {
	inset-block-start: 14%;
	inset-inline-end: clamp(100px, 16vw, 220px);
	inline-size: clamp(36px, 5vw, 72px);
	aspect-ratio: 1;
	border: clamp(8px, 1vw, 14px) solid var(--yzm-ink);
	border-radius: 50%;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header > * {
	position: relative;
	z-index: 1;
	max-width: min(100%, 720px);
}

html[data-yz-design="motif"] body.yz-design-preset .woocommerce-products-header__title.page-title {
	margin: 0;
	font-family: var(--yzd-font-display);
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: var(--yzd-display-tracking);
	color: var(--yzd-on-accent);
	text-align: start;
}

/* Everything written on the amber banner is ink (muted grey on amber is only 3.9:1). */
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header .term-description,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header .page-description,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header .yz-shop-intro,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header p,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header a {
	margin-block-start: 12px;
	color: var(--yzd-on-accent);
	font-size: max(16px, 1rem);
	text-align: start;
}

html[data-yz-design="motif"] .yz-design-preset .yz-shop__sidebar,
html[data-yz-design="motif"] .yz-design-preset .yz-shop-filters {
	padding: 16px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r);
	background: var(--yzm-paper);
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset .yz-shop input[type="search"],
html[data-yz-design="motif"] .yz-design-preset .yz-shop select,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-ordering select {
	min-height: 44px;
	border: var(--yzm-stroke) solid var(--yzm-field);
	border-radius: 999px;
	background-color: var(--yzm-paper);
	color: var(--yzm-ink);
	font-family: var(--yzd-font-body);
}

html[data-yz-design="motif"] .yz-design-preset .yz-shop input[type="checkbox"],
html[data-yz-design="motif"] .yz-design-preset .yz-shop input[type="number"],
html[data-yz-design="motif"] .yz-design-preset .yz-shop input[type="text"] {
	border-color: var(--yzm-field);
}

html[data-yz-design="motif"] .yz-design-preset .yz-shop button {
	border-radius: 999px;
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce ul.products,
html[data-yz-design="motif"] .yz-design-preset .woocommerce ul.products {
	gap: clamp(14px, 1.8vw, 24px);
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	background: var(--yzm-paper);
	color: var(--yzm-ink);
	font-weight: 600;
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-pagination .page-numbers li .page-numbers.current,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-pagination .page-numbers li a.page-numbers:hover {
	background: var(--yzm-ink);
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-pagination ul.page-numbers,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-pagination ul.page-numbers li {
	border: 0;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-breadcrumb,
html[data-yz-design="motif"] .yz-design-preset .yz-filter-option__n,
html[data-yz-design="motif"] .yz-design-preset .yz-shop__filter-toggle-label,
html[data-yz-design="motif"] .yz-design-preset .yz-pay__name,
html[data-yz-design="motif"] .yz-design-preset .yz-wish-single__label,
html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar__link {
	font-size: max(12px, 0.75rem);
}

/* --------------------------------------------------------------------------
   15. Product page
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] body.yz-design-preset.single-product .product_title {
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--yzd-display-tracking);
}

html[data-yz-design="motif"] .yz-design-preset.single-product .summary .price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 8px 18px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 999px;
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
	font-family: var(--yzd-font-body);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

html[data-yz-design="motif"] .yz-design-preset.single-product .summary .price del {
	font-size: 1rem;
	font-weight: 500;
	color: inherit;
	opacity: 0.72;
}

html[data-yz-design="motif"] .yz-design-preset.single-product .summary .price ins {
	color: inherit;
	text-decoration: none;
}

html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-product-gallery .flex-viewport,
html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child {
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r-lg);
	background: var(--yzm-tint-4);
}

/* Gallery arrows: 44px flat coins. */
html[data-yz-design="motif"] body.yz-design-preset.single-product .woocommerce-product-gallery .flex-direction-nav a {
	inline-size: 44px;
	block-size: 44px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	background: var(--yzm-paper);
	color: var(--yzm-ink);
	box-shadow: none;
	box-sizing: border-box;
}

/* Thumbnails: full strength (WooCommerce fades the inactive ones to 50%); the active one is told
   apart by its ink outline instead. */
html[data-yz-design="motif"] body.yz-design-preset.single-product div.product div.images .flex-control-thumbs li img {
	border: var(--yzm-stroke) solid transparent;
	border-radius: 14px;
	opacity: 1;
	box-sizing: border-box;
}

html[data-yz-design="motif"] body.yz-design-preset.single-product div.product div.images .flex-control-thumbs li img.flex-active,
html[data-yz-design="motif"] body.yz-design-preset.single-product div.product div.images .flex-control-thumbs li img:hover {
	border-color: var(--yzm-ink);
	opacity: 1;
}

/* The theme's accordion (product tabs with JS on): ink rules, sentence-case Jost heads. */
html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__head {
	padding-block: 20px;
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
	font-family: var(--yzd-font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__title {
	letter-spacing: inherit;
	text-transform: none;
}

html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__icon {
	box-sizing: content-box;
	padding: 9px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 50%;
	background: var(--yzd-accent);
}

html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__icon::before,
html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__icon::after {
	background: var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__icon::before {
	inset: 14px 9px;
}

html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__icon::after {
	inset: 9px 14px;
}

html[data-yz-design="motif"] body.yz-design-preset.single-product .yz-acc__panel:last-of-type {
	border-block-end: var(--yzm-stroke) solid var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset.single-product .summary .yz-eyebrow,
html[data-yz-design="motif"] .yz-design-preset.single-product .summary .yz-subject {
	font-size: max(12px, 0.75rem);
	color: var(--yzd-muted);
}

html[data-yz-design="motif"] .yz-design-preset.single-product .quantity .qty,
html[data-yz-design="motif"] .yz-design-preset.single-product .variations select {
	min-height: 48px;
	border: var(--yzm-stroke) solid var(--yzm-field);
	border-radius: 999px;
	background-color: var(--yzm-paper);
	color: var(--yzm-ink);
}

/* Only when the theme's accordion is NOT active (it adds .yz-accordion and hides ul.tabs). */
html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs:not(.yz-accordion) > ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	border: 0;
}

html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 999px;
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	font-family: var(--yzd-font-body);
	font-size: max(15px, 0.9375rem);
	font-weight: 600;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs ul.tabs li.active {
	background: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs ul.tabs li.active a {
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs ul.tabs li::before,
html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs ul.tabs li::after,
html[data-yz-design="motif"] .yz-design-preset.single-product .woocommerce-tabs ul.tabs::before {
	display: none;
}

/* Sticky mobile add-to-cart bar (theme): a flat ink sheet with an amber pill. */
html[data-yz-design="motif"] .yz-design-preset .yz-sticky-atc {
	border: 0;
	border-start-start-radius: var(--yzm-r);
	border-start-end-radius: var(--yzm-r);
	background: var(--yzm-ink);
	color: #FFFDF8;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

html[data-yz-design="motif"] .yz-design-preset .yz-sticky-atc__name {
	font-size: max(14px, 0.875rem);
	font-weight: 600;
}

html[data-yz-design="motif"] .yz-design-preset .yz-sticky-atc__price {
	font-size: max(14px, 0.875rem);
	font-weight: 700;
	color: var(--yzd-accent);
}

html[data-yz-design="motif"] .yz-design-preset .yz-sticky-atc__btn {
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
	font-family: var(--yzd-font-body);
	font-size: max(14px, 0.875rem);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

html[data-yz-design="motif"] body.yz-design-preset.single-product .related > h2,
html[data-yz-design="motif"] body.yz-design-preset.single-product .upsells > h2 {
	font-size: var(--yzd-h2);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--yzd-display-tracking);
	text-align: start;
}

/* --------------------------------------------------------------------------
   16. WooCommerce buttons, notices and forms (cart, checkout links, account)
   Flat pills with an ink outline. Hover is a flat colour change (no transition) and a 2px slide.
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] body.yz-design-preset .single_add_to_cart_button,
html[data-yz-design="motif"] body.yz-design-preset .woocommerce a.button.alt,
html[data-yz-design="motif"] body.yz-design-preset .woocommerce button.button.alt,
html[data-yz-design="motif"] body.yz-design-preset a.checkout-button,
html[data-yz-design="motif"] body.yz-design-preset .moderncart-slide-out-footer a.checkout-button {
	min-height: 52px;
	border: var(--yzm-stroke) solid var(--yzm-ink) !important;
	border-radius: 999px !important;
	background-color: var(--yzd-primary) !important;
	color: var(--yzd-on-primary) !important;
	font-family: var(--yzd-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] body.yz-design-preset .single_add_to_cart_button:hover,
html[data-yz-design="motif"] body.yz-design-preset .woocommerce a.button.alt:hover,
html[data-yz-design="motif"] body.yz-design-preset .woocommerce button.button.alt:hover,
html[data-yz-design="motif"] body.yz-design-preset a.checkout-button:hover,
html[data-yz-design="motif"] body.yz-design-preset .moderncart-slide-out-footer a.checkout-button:hover {
	border-color: var(--yzm-ink) !important;
	background-color: var(--yzm-ink) !important;
	color: #FFFDF8 !important;
	translate: 0 -2px;
}

/* The theme fades this button to 85% whenever its one-of-one marker is present (in the bag or
   not), which thins the label's contrast on red. Motif keeps it at full strength and says
   "already in the bag" with a flat teal instead. */
html[data-yz-design="motif"] body.yz-design-preset .single_add_to_cart_button[data-yz-in-cart],
html[data-yz-design="motif"] body.yz-design-preset form.cart:has([data-yz-in-cart]) .single_add_to_cart_button {
	opacity: 1;
}

html[data-yz-design="motif"] body.yz-design-preset form.cart:has([data-yz-in-cart="1"]) .single_add_to_cart_button,
html[data-yz-design="motif"] body.yz-design-preset .single_add_to_cart_button.yz-in-cart {
	background-color: var(--yzm-teal) !important;
}

html[data-yz-design="motif"] body.yz-design-preset a.button:not(.alt):not(.checkout-button),
html[data-yz-design="motif"] body.yz-design-preset button.button:not(.alt),
html[data-yz-design="motif"] body.yz-design-preset input.button:not(.alt) {
	min-height: 48px;
	border: var(--yzm-stroke) solid var(--yzm-ink) !important;
	border-radius: 999px !important;
	background-color: var(--yzm-paper) !important;
	color: var(--yzm-ink) !important;
	font-family: var(--yzd-font-body);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] body.yz-design-preset a.button:not(.alt):not(.checkout-button):hover,
html[data-yz-design="motif"] body.yz-design-preset button.button:not(.alt):hover,
html[data-yz-design="motif"] body.yz-design-preset input.button:not(.alt):hover {
	border-color: var(--yzm-ink) !important;
	background-color: var(--yzd-accent) !important;
	color: var(--yzd-on-accent) !important;
	translate: 0 -2px;
}

html[data-yz-design="motif"] body.yz-design-preset button.button:disabled,
html[data-yz-design="motif"] body.yz-design-preset button.button[disabled] {
	opacity: 0.55;
	translate: none;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-info,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-message,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-error,
html[data-yz-design="motif"] .yz-design-preset .cart-empty {
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r);
	background: var(--yzm-tint-1);
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-message {
	background: var(--yzm-tint-2);
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-error {
	background: var(--yzm-tint-3);
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-info::before,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-message::before,
html[data-yz-design="motif"] .yz-design-preset .woocommerce-error::before {
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce-info a:not(.button),
html[data-yz-design="motif"] .yz-design-preset .woocommerce-message a:not(.button),
html[data-yz-design="motif"] .yz-design-preset .woocommerce-error a:not(.button) {
	color: var(--yzm-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Text fields everywhere a shopper types: an outline ≥ 3:1 on its ground, ink on focus. */
html[data-yz-design="motif"] .yz-design-preset .woocommerce form .form-row input.input-text,
html[data-yz-design="motif"] .yz-design-preset .woocommerce form .form-row textarea,
html[data-yz-design="motif"] .yz-design-preset .woocommerce form .form-row select,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .coupon .input-text,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart #coupon_code,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .quantity .qty {
	min-height: 48px;
	border: var(--yzm-stroke) solid var(--yzm-field);
	border-radius: 14px;
	background-color: var(--yzm-paper);
	color: var(--yzm-ink);
	font-family: var(--yzd-font-body);
	box-shadow: none;
}

html[data-yz-design="motif"] .yz-design-preset .woocommerce form .form-row input.input-text:focus,
html[data-yz-design="motif"] .yz-design-preset .woocommerce form .form-row textarea:focus,
html[data-yz-design="motif"] .yz-design-preset .woocommerce form .form-row select:focus,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart #coupon_code:focus {
	border-color: var(--yzm-ink);
}

/* Page titles: Astra (and the cart page's Elementor heading) paint them a global grey. */
html[data-yz-design="motif"] body.yz-design-preset .entry-header .entry-title,
html[data-yz-design="motif"] body.yz-design-preset .ast-archive-title,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-cart h1,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-cart .elementor-widget-heading .elementor-heading-title,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-checkout h1,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account h1 {
	font-family: var(--yzd-font-display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--yzd-display-tracking);
	color: var(--yzm-ink);
}

/* Cart page: the table and the totals are paper tiles. */
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart table.shop_table {
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-collapse: separate;
	border-radius: var(--yzm-r);
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart table.shop_table th {
	font-family: var(--yzd-font-body);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart table.shop_table .product-name a {
	font-family: var(--yzd-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .product-price .amount,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .product-subtotal .amount,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .order-total .amount {
	font-weight: 700;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .cart_totals {
	padding: clamp(16px, 2vw, 24px);
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r);
	background: var(--yzm-tint-1);
	box-sizing: border-box;
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	background: transparent;
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-cart .cart_totals > h2 {
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .cart_totals table.shop_table th,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart .cart_totals table.shop_table td {
	border-color: var(--yzm-ink);
	background: transparent;
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart table.shop_table .product-thumbnail img {
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 10px;
}

html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart table.shop_table td,
html[data-yz-design="motif"] .yz-design-preset.woocommerce-cart table.shop_table th {
	border-color: var(--yzm-line-soft);
}

/* Store-credit box (yazan-social-rewards) titles itself in the accent — amber as text is 1.7:1. */
html[data-yz-design="motif"] .yz-design-preset .yzrw-credit__title {
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .yzrw-credit {
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 14px;
	background: var(--yzm-paper);
}

/* Power Coupons' "View available coupons" button joins the secondary pills. */
html[data-yz-design="motif"] body.yz-design-preset .power-coupons-view-coupons-btn {
	min-height: 48px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: 999px;
	background: var(--yzm-paper);
	color: var(--yzm-ink);
	font-family: var(--yzd-font-body);
	font-size: max(15px, 0.9375rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}

html[data-yz-design="motif"] body.yz-design-preset .power-coupons-view-coupons-btn:hover {
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
}

/* My account: the theme's ink navigation rail, rounded, with flat amber for the current page
   (a11y.css already swaps the focus ring to the light halo on this dark panel); the dashboard's
   quick links are outlined paper tiles. */
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation {
	overflow: hidden;
	border-radius: var(--yzm-r);
	background: var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation ul,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation li {
	border: 0;
	background: transparent;
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 2px;
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation li a {
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 12px;
	font-family: var(--yzd-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	color: #FFFDF8;
	box-sizing: border-box;
	transition: none;
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation li a svg {
	opacity: 1;
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout,
html[data-yz-design="motif"] body.yz-design-preset .yz-account-nav__extra {
	border-block-start: var(--yzm-stroke) solid rgba(255, 253, 248, 0.28);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-account-nav__extra a {
	color: var(--yzd-accent) !important;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-account-nav__extra a:hover {
	color: var(--yzm-ink) !important;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-account-id__since {
	font-size: max(12px, 0.75rem);
	color: #FFFDF8;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-greeting,
html[data-yz-design="motif"] body.yz-design-preset .yz-account-title {
	font-family: var(--yzd-font-display);
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--yzd-display-tracking);
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-greeting a {
	font-size: max(14px, 0.875rem);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--yzd-primary);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-lede {
	font-size: 1.0625rem;
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-card {
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-radius: var(--yzm-r);
	background: var(--yzm-paper);
	box-shadow: none;
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-card:hover,
html[data-yz-design="motif"] body.yz-design-preset .yz-dash-card:focus-visible {
	border-color: var(--yzm-ink);
	background: var(--yzm-tint-1);
	box-shadow: none;
	transform: none;
	translate: 0 -3px;
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-card__icon {
	color: var(--yzd-primary);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-card__title {
	font-family: var(--yzd-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] body.yz-design-preset .yz-dash-card__desc {
	font-size: max(15px, 0.9375rem);
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	overflow: hidden;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	border-collapse: separate;
	border-radius: var(--yzm-r);
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-content h2,
html[data-yz-design="motif"] body.yz-design-preset.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--yzd-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   17. Cart drawer (modern-cart) — a flat sheet: amber header, outlined paper item cards,
   ink rules, a red checkout pill
   The theme's own drawer sheet (cart-drawer.css) leads every rule with the plugin's two ids, so
   these do too; the plugin's colour variables live on :root and a scoped html rule out-ranks them.
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] {
	--moderncart-primary-color: #B23A22;
	--moderncart-heading-color: #16110E;
	--moderncart-body-color: #16110E;
	--moderncart-background-color: #F6F1E7;
	--moderncart-header-background-color: #E9B949;
	--moderncart-header-font-color: #16110E;
	--moderncart-highlight-color: #B23A22;
	--moderncart-quantity-background-color: #FFFDF8;
	--moderncart-button-font-color: #FFFDF8;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal {
	--yzc-radius-card: 16px;
	--yzc-radius-pill: 999px;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out {
	border-inline-start: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-ground);
	box-shadow: none;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-panel,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-cart,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer {
	background: var(--yzm-ground);
	font-family: var(--yzd-font-body);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header {
	border-block-end: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzd-accent);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-title {
	font-family: var(--yzd-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--yzd-on-accent);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-quantity {
	font-size: max(12px, 0.75rem);
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-heading {
	background: transparent;
}

/* !important: the plugin sizes and strips this button with !important of its own. */
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close {
	width: 44px !important;
	max-width: none !important;
	height: 44px !important;
	max-height: none !important;
	border: var(--yzm-stroke) solid var(--yzm-ink) !important;
	border-radius: 50% !important;
	background: var(--yzm-paper) !important;
	color: var(--yzm-ink) !important;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close:hover {
	background: var(--yzm-ink) !important;
	color: #FFFDF8 !important;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close:hover svg {
	stroke: #FFFDF8;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item {
	border: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-paper);
	box-shadow: none;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image {
	border-radius: 10px;
	background: var(--yzm-tint-4);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-name,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-name a,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a {
	font-family: var(--yzd-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .yz-cart-item-meta {
	font-size: max(12px, 0.75rem);
	letter-spacing: 0.06em;
	color: var(--yzd-muted);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions--pricing,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-price {
	font-size: max(15px, 0.9375rem);
	font-weight: 700;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove {
	min-height: 32px;
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove:hover {
	color: var(--yzd-primary);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity {
	border: var(--yzm-stroke) solid var(--yzm-field);
	border-radius: 999px;
	background: var(--yzm-paper);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer {
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
}

/* The theme fades the list into the footer with a gradient; here the ink rule is the edge. */
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer::before {
	display: none;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out #moderncart-coupon-form-container {
	border-block-end: var(--yzm-stroke) solid var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper .moderncart-notification,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code {
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper .moderncart-progress-bar {
	height: 10px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-paper) !important;
	box-sizing: border-box;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-free-shipping-progress-bar {
	background: var(--yzd-primary);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper--success .moderncart-free-shipping-progress-bar {
	background: var(--yzm-teal);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input[type="text"] {
	height: 44px;
	padding-inline: 16px;
	border: var(--yzm-stroke) solid var(--yzm-field);
	background: var(--yzm-paper);
	font-family: var(--yzd-font-body);
	font-size: max(15px, 0.9375rem);
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input[type="text"]:focus {
	border-color: var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-form-button {
	height: 44px;
	border: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-ink);
	color: #FFFDF8;
	font-family: var(--yzd-font-body);
	font-size: max(14px, 0.875rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: none;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-form-button:hover {
	background: var(--yzd-accent);
	color: var(--yzd-on-accent);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items-item {
	font-size: max(15px, 0.9375rem);
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items__total {
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
	color: var(--yzm-ink);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items__total .moderncart-cart-line-items-label {
	font-size: max(14px, 0.875rem);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items__total .moderncart-cart-line-items-value {
	font-size: 1.375rem;
	font-weight: 800;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out a.checkout-button {
	min-height: 52px;
	border: var(--yzm-stroke) solid var(--yzm-ink) !important;
	border-radius: 999px !important;
	background: var(--yzd-primary) !important;
	color: var(--yzd-on-primary) !important;
	font-family: var(--yzd-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out a.checkout-button:hover {
	background: var(--yzm-ink) !important;
	color: #FFFDF8 !important;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer .yz-pay__label {
	font-size: max(12px, 0.75rem);
	letter-spacing: 0.04em;
	color: var(--yzd-text-2);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-empty-cart a,
html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-cart-empty a:not(.checkout-button) {
	color: var(--yzd-primary);
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-add-to-cart {
	border: var(--yzm-stroke) solid var(--yzm-ink) !important;
	border-radius: 999px !important;
	color: var(--yzm-ink) !important;
}

html[data-yz-design="motif"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-add-to-cart:hover {
	background: var(--yzm-ink) !important;
	color: #FFFDF8 !important;
}

html[data-yz-design="motif"] body.yz-design-preset #moderncart-floating-cart button {
	border: var(--yzm-stroke) solid var(--yzm-ink);
	background-color: var(--yzm-ink) !important;
	color: #FFFDF8 !important;
	box-shadow: none;
}

html[data-yz-design="motif"] body.yz-design-preset #moderncart-floating-cart .moderncart-floating-cart-count {
	background-color: var(--yzd-accent) !important;
	color: var(--yzd-on-accent) !important;
}

/* Chat launcher (shared): flat coin, no glow. */
html[data-yz-design="motif"] .yz-design-preset .yz-chat__launcher {
	border: var(--yzm-stroke) solid var(--yzm-ink);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   18. Footer (HFE #1165 — content owned by /dashboard/footer; presentation only)
   A flat agate-red sheet whose rounded top corners rise over the last section; an oversized
   wordmark line (the store name, printed as a scoped custom property by motif.php), the editor's
   columns beneath, an ink rule above the bottom bar.
   -------------------------------------------------------------------------- */
html[data-yz-design="motif"] .yz-design-preset #colophon {
	position: relative;
	z-index: 2;
	margin-block-start: calc(var(--yzm-r-lg) * -1 - 8px);
	padding-block-start: clamp(20px, 3vw, 40px);
	overflow: hidden;
	overflow: clip;
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
	border-start-start-radius: calc(var(--yzm-r-lg) + 8px);
	border-start-end-radius: calc(var(--yzm-r-lg) + 8px);
	background: var(--yzd-primary);
	color: var(--yzd-on-primary);
}

/* Room for the overlap: the page's last block pads its lower edge by the sheet's rise. */
html[data-yz-design="motif"] .yz-design-preset .yzd-home > .yzd-section:last-child {
	padding-block-end: calc(var(--yzd-space) + var(--yzm-r-lg) + 8px);
}

html[data-yz-design="motif"] .yz-design-preset .yzd-home > .yzd-news:last-child {
	padding-block-end: calc(clamp(48px, 7vw, 104px) + var(--yzm-r-lg) + 8px);
}

html[data-yz-design="motif"] body.yz-design-preset:not(.home) #content {
	padding-block-end: calc(var(--yzm-r-lg) + 8px + clamp(24px, 4vw, 56px));
}

html[data-yz-design="motif"] .yz-design-preset #colophon::before {
	content: var(--yzm-wordmark, none);
	display: block;
	padding-inline: var(--yzd-gutter);
	overflow: hidden;
	font-family: var(--yzd-font-display);
	font-size: min(21rem, calc((100vw - 2 * var(--yzd-gutter)) * 1.3 / var(--yzm-wordmark-len, 6)));
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.03em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--yzd-accent);
	pointer-events: none;
}

html[data-yz-design="motif"] .yz-design-preset #colophon .elementor-section,
html[data-yz-design="motif"] .yz-design-preset #colophon .elementor-section > .elementor-background-overlay,
html[data-yz-design="motif"] .yz-design-preset #colophon .e-con {
	background-color: transparent !important;
	background-image: none !important;
}

html[data-yz-design="motif"] .yz-design-preset #colophon .elementor-section + .elementor-section {
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
}

html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-widget-heading .elementor-heading-title {
	color: var(--yzd-on-primary) !important;
	font-family: var(--yzd-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
}

html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-icon-list-text,
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-widget-text-editor,
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-widget-text-editor p,
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer a,
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer a .elementor-icon-list-text {
	color: var(--yzd-on-primary) !important;
	font-family: var(--yzd-font-body);
	font-size: max(16px, 1rem);
}

html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-icon-list-item > a {
	display: inline-flex;
	min-height: 32px;
}

/* Link hover: the label slides toward the end edge and gains a flat underline — no colour fade. */
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-icon-list-item a .elementor-icon-list-text {
	transition: translate var(--yzm-fast) var(--yzm-ease);
}

html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-icon-list-item a:hover .elementor-icon-list-text,
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-icon-list-item a:focus-visible .elementor-icon-list-text {
	color: var(--yzd-on-primary) !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	translate: calc(6px * var(--yzm-dir)) 0;
}

html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer a:hover,
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer a:focus-visible {
	color: var(--yzd-on-primary) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-widget-copyright,
html[data-yz-design="motif"] .yz-design-preset .footer-width-fixer .elementor-widget-copyright * {
	color: var(--yzd-on-primary) !important;
	font-size: max(14px, 0.875rem);
}

html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar {
	position: relative;
	z-index: 2;
	border-block-start: var(--yzm-stroke) solid var(--yzm-ink);
	background: var(--yzm-ink);
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar a,
html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar__link {
	color: #FFFDF8;
}

html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar a:hover {
	color: var(--yzd-accent);
}

/* The legal links are 20px tall as shipped: a 44px row each, so they can be tapped. */
html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar {
	padding-block: 6px;
}

html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar a,
html[data-yz-design="motif"] .yz-design-preset .yz-legal-bar__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(200px, 30vw, 260px);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+1) {
		grid-row: span 1;
	}

	/* The lead tile is one row tall here: its arch is sized by the tile's height, so the curve is
	   never cut off by the tile's top edge. */
	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+1) .yzd-cats__media {
		inline-size: auto;
		block-size: 86%;
	}
}

@media (max-width: 921px) {
	html[data-yz-design="motif"] {
		--yzm-sticky-top: 88px;
	}

	html[data-yz-design="motif"] body.yz-design-preset #masthead,
	html[data-yz-design="motif"] body.yz-design-preset.yz-comma-header #masthead,
	html[data-yz-design="motif"] body.yz-design-preset.yz-comma-header .yz-header {
		inset-block-start: 8px;
		margin-block: 10px;
	}
}

@media (max-width: 768px) {
	html[data-yz-design="motif"] {
		--yzd-h1: clamp(3.25rem, 16.5vw, 5.25rem);
		--yzd-h2: clamp(2.125rem, 10vw, 3rem);
		--yzm-r-lg: 24px;
		--yzm-r: 16px;
	}

	/* Poster: the copy first, the arch beneath it. */
	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		min-height: 0;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzm-hero--long .yzm-hero__title {
		font-size: clamp(2.5rem, 11.5vw, 3.75rem);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzm-hero--xlong .yzm-hero__title {
		font-size: clamp(2rem, 8.4vw, 2.75rem);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__art {
		inline-size: min(84%, 360px);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__actions .yzd-btn {
		flex: 1 1 auto;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-head__link {
		font-size: max(15px, 0.9375rem);
	}

	/* Archive banner: the copy keeps the full width; one small quarter-circle sits below it. */
	html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header {
		padding: 22px 20px 64px;
	}

	html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header::before {
		inline-size: 76px;
	}

	html[data-yz-design="motif"] .yz-design-preset .woocommerce-products-header::after {
		inset-block: auto 16px;
		inset-inline-end: 92px;
		inline-size: 30px;
		border-width: 7px;
	}

	/* Bento on a phone: the lead tile full width, the rest two-up. */
	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(190px, auto);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__link {
		padding: 14px;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:nth-child(5n+1) .yzd-cats__name {
		font-size: clamp(1.875rem, 9vw, 2.5rem);
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:not(:nth-child(5n+1)) .yzd-cats__name {
		font-size: 1.125rem;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__item:not(:nth-child(5n+1)) .yzd-cats__media {
		inline-size: 38%;
		inset-block-end: 12px;
		inset-inline-end: 12px;
	}

	/* Tiles two-up. */
	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card {
		padding: 8px 8px 12px;
	}

	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .astra-shop-summary-wrap {
		padding: 10px 4px 0;
	}

	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .woocommerce-loop-product__title {
		font-size: 1rem;
	}

	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .price {
		padding: 6px 11px;
		font-size: max(14px, 0.875rem);
	}

	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card .yz-subject {
		letter-spacing: 0.04em;
	}

	html[data-yz-design="motif"] body.yz-design-preset ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) {
		inset-block-end: 10px;
		inset-inline-end: 10px;
	}

	/* Two-up tiles are too narrow for a sticker beside the heart: it moves to the lower start
	   corner of the colour field, where it has the tile's full width. */
	html[data-yz-design="motif"] .yz-design-preset .yz-badges:not(.yz-badges--single) {
		inset-block: auto 10px;
		inset-inline-start: 8px;
		max-width: calc(100% - 16px);
		transform-origin: 0 100%;
	}

	html[data-yz-design="motif"][dir="rtl"] .yz-design-preset .yz-badges:not(.yz-badges--single) {
		transform-origin: 100% 100%;
	}

	html[data-yz-design="motif"] .yz-design-preset .yz-badge {
		padding: 5px 8px;
		letter-spacing: 0.02em;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-tabs__tab {
		padding: 8px 14px;
	}

	/* Stacked cards on a phone: copy over a smaller composition, still sticky. */
	html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card {
		grid-template-columns: minmax(0, 1fr) 96px;
		align-items: start;
		gap: 12px;
		min-height: 260px;
		padding: 22px 20px;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzm-stack__art {
		inline-size: 96px;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-banner {
		min-height: 300px;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-banner__img,
	html[data-yz-design="motif"] .yz-design-preset .yzd-banner:hover .yzd-banner__img {
		width: 44%;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-features__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-features--cards .yzd-features__item {
		padding: 16px;
		gap: 14px;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-features__icon {
		padding: 12px;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-features__title {
		font-size: 1.0625rem;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::before,
	html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::after {
		display: none;
	}

	/* Running text at 16px on phones. */
	html[data-yz-design="motif"] .yz-design-preset .yzd-features__desc,
	html[data-yz-design="motif"] .yz-design-preset .yzd-news__text,
	html[data-yz-design="motif"] .yz-design-preset .yzm-stack__text,
	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__text,
	html[data-yz-design="motif"] .yz-design-preset .woocommerce-product-details__short-description {
		font-size: max(16px, 1rem);
	}
}

/* --------------------------------------------------------------------------
   20. Reduced motion + motion-off store: everything in place, nothing travelling
   a11y.css already zeroes every duration; this removes the TRAVEL (resting offsets, the endless
   marquee, the sticky stack) so nothing slides, spins or wipes at all.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html[data-yz-design="motif"] .yz-design-preset .yzm-marquee__track {
		animation: none;
		transform: none;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzm-w,
	html[data-yz-design="motif"] .yz-design-preset .yzm-shape,
	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__eyebrow,
	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__text,
	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__actions,
	html[data-yz-design="motif"] .yz-design-preset .yzm-hero__arch .yzd-hero__img,
	html[data-yz-design="motif"] .yz-design-preset .yzm-stack__shape,
	html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::before,
	html[data-yz-design="motif"] .yz-design-preset .yzd-news__inner::after {
		animation: none;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzm-stack__card {
		position: relative;
		inset-block-start: auto;
	}

	html[data-yz-design="motif"] .yz-design-preset .yzd-btn,
	html[data-yz-design="motif"] .yz-design-preset .yzd-btn::before,
	html[data-yz-design="motif"] .yz-design-preset .yzd-banner,
	html[data-yz-design="motif"] .yz-design-preset .yzd-banner::before,
	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card,
	html[data-yz-design="motif"] .yz-design-preset ul.products li.product.yz-card::before,
	html[data-yz-design="motif"] .yz-design-preset .yzd-cats--overlay .yzd-cats__media,
	html[data-yz-design="motif"] .yz-design-preset .yzd-banner__img,
	html[data-yz-design="motif"] .yz-design-preset .yzd-features__icon {
		transition: none;
	}
}

html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzm-marquee__track {
	animation: none;
	transform: none;
}

html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzm-stack__card {
	position: relative;
	inset-block-start: auto;
}

/* …and on a motion-off store the tab pill, the wipes and the label unroll simply switch. */
html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzd-tabs.yzm-tabs-live::before,
html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzd-cats--overlay .yzd-cats__link::before,
html[data-yz-design="motif"] body.yz-design-preset.yzm-still ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card),
html[data-yz-design="motif"] body.yz-design-preset.yzm-still ul.products li.product.yz-card .ast-on-card-button:not(.ast-onsale-card) .ahfb-svg-iconset,
html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzd-head__link::before,
html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzd-features__icon,
html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzd-cats--overlay .yzd-cats__media,
html[data-yz-design="motif"] body.yz-design-preset.yzm-still .yzd-banner__img {
	transition: none;
}