/* ==========================================================================
   Store Designs — shared base (every preset except Heritage)
   --------------------------------------------------------------------------
   Loaded ONLY while a non-Heritage preset is active (inc/store-designs.php), after the theme's
   base sheets and before the preset's own sheet. Two jobs:

   1. Remap the theme's tokens onto the preset tokens (--yzd-*), so the header, shop grid,
      product page, cart drawer, account pages and every existing component re-tint and re-type
      without a single per-component override. Presets set --yzd-* (in their sheet or through the
      inline palette the dashboard controls); they rarely need to touch --yz-* directly.
   2. Lay out the shared homepage components (template-parts/designs/sections/*): neutral,
      token-driven, logical properties only (RTL-safe). Presets restyle them in their own sheet.

   Scope: html[data-yz-design]:not([data-yz-design="heritage"]) for tokens, and .yz-design-preset
   (a body class printed only under a preset) for components. Nothing here can reach Heritage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Preset tokens (defaults — each preset overrides in its own sheet)
   -------------------------------------------------------------------------- */
/*
 * Zero specificity (:where) on purpose: these are DEFAULTS. A preset sheet's own
 * html[data-yz-design="<id>"] token block (0,1,1) must beat them, and the owner's palette (printed
 * inline after the preset sheet at (0,2,1) by inc/store-designs.php) must beat both. Presets never
 * declare --yzd-primary / --yzd-accent in CSS: their defaults live in the registry `colors`.
 */
:where(html[data-yz-design]:not([data-yz-design="heritage"])) {
	--yzd-bg: #ffffff;
	--yzd-surface: #f5f5f5;
	--yzd-surface-2: #fafafa;
	--yzd-text: #1b1b1b;
	--yzd-text-2: #4a4a4a;
	--yzd-muted: #6f6f6f;
	--yzd-border: #e5e5e5;
	--yzd-primary: #111111;
	--yzd-on-primary: #ffffff;
	--yzd-accent: #c8a96a;
	--yzd-on-accent: #111111;
	--yzd-dark: #111111;
	--yzd-on-dark: #ffffff;
	--yzd-sale: #c0392b;

	--yzd-font-display: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--yzd-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--yzd-display-weight: 500;
	--yzd-display-transform: none;
	--yzd-display-tracking: 0;
	--yzd-h1: clamp(2.2rem, 4.2vw, 3.6rem);
	--yzd-h2: clamp(1.6rem, 2.6vw, 2.25rem);
	--yzd-h3: 1.125rem;
	--yzd-body-size: 1rem;
	--yzd-eyebrow-size: 0.8125rem;
	--yzd-eyebrow-tracking: 0.12em;

	--yzd-container: 1240px;
	--yzd-gutter: clamp(16px, 3vw, 32px);
	--yzd-space: clamp(48px, 7vw, 96px);
	--yzd-gap: clamp(14px, 2vw, 28px);

	--yzd-radius: 0px;
	--yzd-card-radius: 0px;
	--yzd-btn-radius: 0px;
	--yzd-btn-pad-y: 14px;
	--yzd-btn-pad-x: 30px;
	--yzd-btn-weight: 600;
	--yzd-btn-transform: none;
	--yzd-btn-tracking: 0.02em;
	--yzd-card-ratio: 1 / 1;
	--yzd-hero-height: clamp(460px, 72vh, 760px);
	--yzd-hero-scrim: rgba(0, 0, 0, 0.35);
	--yzd-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}

/*
 * Remap the theme's own tokens onto the preset (light-family semantics, like Black). This block
 * KEEPS its (0,2,1) specificity: it has to beat theme-tokens.css's `:root, html[data-yz-theme]`
 * (0,1,1). It only references --yzd-* — so whatever the preset/owner set there flows through.
 */
html[data-yz-design]:not([data-yz-design="heritage"]) {
	--yz-ink: var(--yzd-text);
	--yz-ivory: var(--yzd-bg);
	/* The theme uses --yz-agate as TEXT in many places (filter links, serial lines, prices on
	   hover). A light preset accent (saffron, sand, blush) fails AA as text, so a preset may give a
	   text-safe tone in --yzd-accent-text; the accent itself stays for fills and rules. */
	--yz-agate: var(--yzd-accent-text, var(--yzd-accent));
	--yz-muted: var(--yzd-muted);
	--yz-sand: var(--yzd-accent);
	--yz-hairline: var(--yzd-border);
	--yz-header-bg: var(--yzd-bg);
	--yz-bg: var(--yzd-bg);
	--yz-surface: var(--yzd-bg);
	--yz-surface-2: var(--yzd-surface);
	--yz-surface-inv: var(--yzd-dark);
	--yz-text: var(--yzd-text);
	--yz-text-2: var(--yzd-text-2);
	--yz-text-muted: var(--yzd-muted);
	--yz-on-dark: var(--yzd-on-dark);
	--yz-border: var(--yzd-border);
	--yz-primary: var(--yzd-primary);
	--yz-on-primary: var(--yzd-on-primary);
	--yz-accent: var(--yzd-accent);
	--yz-gold: var(--yzd-accent);
	--yz-focus: var(--yzd-primary);
	/* a11y.css draws every focus ring from these. The theme default (agate) maps to the preset
	   accent, which is often too light to see (saffron on cream ≈ 2:1) — ink text colour is not.
	   A preset may pick another ring colour through --yzd-focus. */
	--yz-focus-ring: var(--yzd-focus, var(--yzd-text));
	--yz-focus-halo: var(--yzd-bg);
	--yz-header-action: var(--yzd-text);
	--yz-header-action-hover: var(--yzd-primary);
	--yz-font-display: var(--yzd-font-display);
	--yz-font-body: var(--yzd-font-body);
	--yz-container: var(--yzd-container);
}

/* Arabic: the preset's families first only if they carry Arabic glyphs — they don't, so Arabic
   text falls through to the theme's Arabic faces (loaded under RTL by fonts-ar.css). */
html[data-yz-design]:not([data-yz-design="heritage"])[dir="rtl"] {
	--yzd-font-display: var(--yz-font-ar-display);
	--yzd-font-body: var(--yz-font-ar-body);
	--yzd-display-tracking: 0;
	--yzd-eyebrow-tracking: 0;
	--yzd-btn-tracking: 0;
	--yzd-display-transform: none;
}

body.yz-design-preset {
	background: var(--yzd-bg);
	color: var(--yzd-text);
	font-family: var(--yzd-font-body);
	font-size: var(--yzd-body-size);
}

body.yz-design-preset h1,
body.yz-design-preset h2,
body.yz-design-preset h3,
body.yz-design-preset .yzd-hero__title,
body.yz-design-preset .product_title {
	font-family: var(--yzd-font-display);
	font-weight: var(--yzd-display-weight);
	letter-spacing: var(--yzd-display-tracking);
	text-transform: var(--yzd-display-transform);
	color: var(--yzd-text);
}

/* --------------------------------------------------------------------------
   2. Primitives: container, eyebrow, buttons, section head
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-home {
	display: block;
	overflow-x: clip;
}

.yz-design-preset .yzd-container {
	width: 100%;
	max-width: var(--yzd-container);
	margin-inline: auto;
	padding-inline: var(--yzd-gutter);
	box-sizing: border-box;
}

.yz-design-preset .yzd-section {
	padding-block: var(--yzd-space);
}

.yz-design-preset .yzd-section + .yzd-section {
	padding-block-start: 0;
}

.yz-design-preset .yzd-eyebrow {
	margin: 0 0 10px;
	font-size: var(--yzd-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--yzd-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--yzd-muted);
}

.yz-design-preset .yzd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: var(--yzd-btn-pad-y) var(--yzd-btn-pad-x);
	border: 1px solid var(--yzd-primary);
	border-radius: var(--yzd-btn-radius);
	background: var(--yzd-primary);
	color: var(--yzd-on-primary);
	font-family: var(--yzd-font-body);
	font-size: 0.9375rem;
	font-weight: var(--yzd-btn-weight);
	letter-spacing: var(--yzd-btn-tracking);
	text-transform: var(--yzd-btn-transform);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.yz-design-preset .yzd-btn:hover {
	background: var(--yzd-text);
	border-color: var(--yzd-text);
	color: var(--yzd-bg);
}

.yz-design-preset .yzd-btn:focus-visible,
.yz-design-preset .yzd-cats__link:focus-visible,
.yz-design-preset .yzd-banner:focus-visible,
.yz-design-preset .yzd-head__link:focus-visible,
.yz-design-preset .yzd-tabs__tab:focus-visible,
.yz-design-preset .yzd-carousel__btn:focus-visible {
	outline: 2px solid var(--yzd-primary);
	outline-offset: 3px;
}

.yz-design-preset .yzd-btn--ghost {
	background: transparent;
	color: var(--yzd-text);
	border-color: currentColor;
}

.yz-design-preset .yzd-btn--small {
	min-height: 38px;
	padding: 9px 18px;
	font-size: 0.8125rem;
}

.yz-design-preset .yzd-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-block-end: clamp(20px, 3vw, 40px);
}

.yz-design-preset .yzd-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.yz-design-preset .yzd-head__title {
	margin: 0;
	font-size: var(--yzd-h2);
	line-height: 1.15;
}

.yz-design-preset .yzd-head__intro {
	margin: 10px 0 0;
	max-width: 60ch;
	color: var(--yzd-muted);
}

.yz-design-preset .yzd-head--center .yzd-head__intro {
	margin-inline: auto;
}

.yz-design-preset .yzd-head__link {
	color: var(--yzd-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-hero {
	padding: 0;
	position: relative;
}

.yz-design-preset .yzd-hero__inner {
	position: relative;
	display: grid;
	min-height: var(--yzd-hero-height);
}

.yz-design-preset .yzd-hero__media {
	position: relative;
	overflow: hidden;
	background: var(--yzd-surface);
}

.yz-design-preset .yzd-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yz-design-preset .yzd-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: clamp(28px, 6vw, 96px) var(--yzd-gutter);
	box-sizing: border-box;
}

.yz-design-preset .yzd-hero__title {
	margin: 0;
	font-size: var(--yzd-h1);
	line-height: 1.05;
	max-width: 16ch;
}

/* Owner-typed headings can hold one long unbroken word (a brand name, a URL) — wrap it rather than
   clipping it off a phone screen. */
.yz-design-preset .yzd-hero__title,
.yz-design-preset .yzd-head__title,
.yz-design-preset .yzd-story__title,
.yz-design-preset .yzd-news__title,
.yz-design-preset .yzd-banner__title {
	overflow-wrap: anywhere;
}

.yz-design-preset .yzd-hero__text {
	margin: 0;
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--yzd-text-2);
}

.yz-design-preset .yzd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 6px;
}

/* split */
.yz-design-preset .yzd-hero--split .yzd-hero__inner {
	grid-template-columns: 1fr 1fr;
}

.yz-design-preset .yzd-hero--split.yzd-hero--image-start .yzd-hero__media {
	order: -1;
}

.yz-design-preset .yzd-hero--split.yzd-hero--image-end .yzd-hero__media {
	order: 2;
}

/* overlay / boxed: copy over the image */
.yz-design-preset .yzd-hero--overlay .yzd-hero__media,
.yz-design-preset .yzd-hero--boxed .yzd-hero__media {
	position: absolute;
	inset: 0;
}

.yz-design-preset .yzd-hero--overlay .yzd-hero__media::after,
.yz-design-preset .yzd-hero--boxed .yzd-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--yzd-hero-scrim);
}

.yz-design-preset .yzd-hero--overlay .yzd-hero__copy,
.yz-design-preset .yzd-hero--boxed .yzd-hero__copy {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--yzd-container);
	margin-inline: auto;
	color: var(--yzd-on-dark);
}

.yz-design-preset .yzd-hero--overlay:not(.yzd-hero--no-image) .yzd-hero__title,
.yz-design-preset .yzd-hero--overlay:not(.yzd-hero--no-image) .yzd-hero__text,
.yz-design-preset .yzd-hero--overlay:not(.yzd-hero--no-image) .yzd-eyebrow,
.yz-design-preset .yzd-hero--boxed:not(.yzd-hero--no-image) .yzd-hero__title,
.yz-design-preset .yzd-hero--boxed:not(.yzd-hero--no-image) .yzd-hero__text,
.yz-design-preset .yzd-hero--boxed:not(.yzd-hero--no-image) .yzd-eyebrow {
	color: var(--yzd-on-dark);
}

.yz-design-preset .yzd-hero--overlay:not(.yzd-hero--no-image) .yzd-btn--ghost,
.yz-design-preset .yzd-hero--boxed:not(.yzd-hero--no-image) .yzd-btn--ghost {
	color: var(--yzd-on-dark);
}

.yz-design-preset .yzd-hero--align-center .yzd-hero__copy {
	align-items: center;
	text-align: center;
}

.yz-design-preset .yzd-hero--align-center .yzd-hero__title,
.yz-design-preset .yzd-hero--align-center .yzd-hero__text {
	margin-inline: auto;
}

.yz-design-preset .yzd-hero--align-end .yzd-hero__copy {
	align-items: flex-end;
	text-align: end;
}

.yz-design-preset .yzd-hero--boxed {
	padding-block: var(--yzd-gutter) 0;
}

.yz-design-preset .yzd-hero--boxed .yzd-hero__inner {
	max-width: var(--yzd-container);
	margin-inline: auto;
	width: calc(100% - 2 * var(--yzd-gutter));
	border-radius: var(--yzd-radius);
	overflow: hidden;
}

/* minimal / stack */
.yz-design-preset .yzd-hero--minimal .yzd-hero__inner {
	min-height: 0;
	max-width: var(--yzd-container);
	margin-inline: auto;
}

.yz-design-preset .yzd-hero--stack .yzd-hero__inner {
	min-height: 0;
}

.yz-design-preset .yzd-hero--stack .yzd-hero__media {
	height: var(--yzd-hero-height);
}

.yz-design-preset .yzd-hero--stack .yzd-hero__copy {
	max-width: var(--yzd-container);
	margin-inline: auto;
	width: 100%;
}

/* no image: a quiet colour field instead of a hole */
.yz-design-preset .yzd-hero--no-image .yzd-hero__inner {
	background: var(--yzd-surface);
	grid-template-columns: 1fr;
	min-height: 0;
}

/* --------------------------------------------------------------------------
   4. Categories
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-cats__list {
	display: grid;
	grid-template-columns: repeat(var(--yzd-cols, 6), minmax(0, 1fr));
	gap: var(--yzd-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yz-design-preset .yzd-cats__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	color: var(--yzd-text);
	text-decoration: none;
}

.yz-design-preset .yzd-cats__media {
	position: relative;
	display: block;
	aspect-ratio: var(--yzd-cat-ratio, 1 / 1);
	overflow: hidden;
	border-radius: var(--yzd-card-radius);
	background: var(--yzd-surface);
}

.yz-design-preset .yzd-cats__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.yz-design-preset .yzd-cats__link:hover .yzd-cats__media img {
	transform: scale(1.04);
}

.yz-design-preset .yzd-cats__label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.yz-design-preset .yzd-cats__name {
	font-weight: 600;
	font-size: 1rem;
}

.yz-design-preset .yzd-cats__count,
.yz-design-preset .yzd-cats__cta {
	font-size: 0.8125rem;
	color: var(--yzd-muted);
}

.yz-design-preset .yzd-cats--circles .yzd-cats__media {
	border-radius: 50%;
}

.yz-design-preset .yzd-cats--circles .yzd-cats__label {
	text-align: center;
	align-items: center;
}

.yz-design-preset .yzd-cats--overlay .yzd-cats__link {
	position: relative;
}

.yz-design-preset .yzd-cats--overlay .yzd-cats__label {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 18px;
	color: var(--yzd-on-dark);
	background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
	border-end-start-radius: var(--yzd-card-radius);
	border-end-end-radius: var(--yzd-card-radius);
}

.yz-design-preset .yzd-cats--overlay .yzd-cats__count,
.yz-design-preset .yzd-cats--overlay .yzd-cats__cta {
	color: inherit;
	opacity: .85;
}

.yz-design-preset .yzd-cats--pills .yzd-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.yz-design-preset .yzd-cats--pills .yzd-cats__link {
	padding: 10px 18px;
	border: 1px solid var(--yzd-border);
	border-radius: 999px;
}

.yz-design-preset .yzd-cats--rail .yzd-cats__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.yz-design-preset .yzd-cats--rail .yzd-cats__item {
	flex: 0 0 clamp(140px, 22vw, 240px);
	scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   5. Product grid / carousel / tabs (the WooCommerce loop inside)
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--yzd-cols, 4), minmax(0, 1fr));
	gap: calc(var(--yzd-gap) * 1.4) var(--yzd-gap);
	margin: 0 !important;
	padding: 0;
}

.yz-design-preset .yzd-products ul.products::before,
.yz-design-preset .yzd-products ul.products::after {
	display: none !important;
}

.yz-design-preset .yzd-products ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.yz-design-preset .yzd-products--carousel ul.products {
	display: flex !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block-end: 4px;
}

.yz-design-preset .yzd-products--carousel ul.products::-webkit-scrollbar {
	display: none;
}

.yz-design-preset .yzd-products--carousel ul.products li.product {
	flex: 0 0 calc((100% - (var(--yzd-cols) - 1) * var(--yzd-gap)) / var(--yzd-cols));
	scroll-snap-align: start;
}

.yz-design-preset .yzd-products__panel {
	position: relative;
}

.yz-design-preset .yzd-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-block-start: 18px;
}

.yz-design-preset .yzd-carousel__btn {
	width: 44px;
	height: 44px;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--yzd-border);
	border-radius: var(--yzd-btn-radius);
	background: var(--yzd-bg);
	color: var(--yzd-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.yz-design-preset .yzd-carousel__btn:hover {
	border-color: var(--yzd-text);
}

.yz-design-preset .yzd-carousel__btn[disabled] {
	opacity: .35;
	cursor: default;
}

[dir="rtl"] .yz-design-preset .yzd-carousel__btn span {
	display: inline-block;
	transform: scaleX(-1);
}

.yz-design-preset .yzd-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-block-end: 24px;
	border-block-end: 1px solid var(--yzd-border);
}

.yz-design-preset .yzd-tabs__tab {
	position: relative;
	min-height: 44px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--yzd-muted);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.yz-design-preset .yzd-tabs__tab[aria-selected="true"] {
	color: var(--yzd-text);
}

.yz-design-preset .yzd-tabs__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	height: 2px;
	background: var(--yzd-primary);
}

/* --------------------------------------------------------------------------
   6. Banners
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-banners__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yzd-gap);
}

.yz-design-preset .yzd-banners--trio .yzd-banners__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yz-design-preset .yzd-banners--wide .yzd-banners__grid,
.yz-design-preset .yzd-banners--n1 .yzd-banners__grid {
	grid-template-columns: 1fr;
}

.yz-design-preset .yzd-banners--mosaic.yzd-banners--n3 .yzd-banners__grid {
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.yz-design-preset .yzd-banners--mosaic.yzd-banners--n3 .yzd-banner:first-child {
	grid-row: span 2;
}

.yz-design-preset .yzd-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(220px, 28vw, 380px);
	overflow: hidden;
	border-radius: var(--yzd-radius);
	background: var(--yzd-surface);
	color: var(--yzd-on-dark);
	text-decoration: none;
	isolation: isolate;
}

.yz-design-preset .yzd-banners--wide .yzd-banner {
	min-height: clamp(240px, 30vw, 420px);
}

.yz-design-preset .yzd-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform .6s ease;
}

.yz-design-preset .yzd-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .05) 60%);
}

.yz-design-preset .yzd-banner:hover .yzd-banner__img {
	transform: scale(1.04);
}

.yz-design-preset .yzd-banner--no-image {
	color: var(--yzd-text);
}

.yz-design-preset .yzd-banner--no-image::after {
	display: none;
}

.yz-design-preset .yzd-banner__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(20px, 3vw, 36px);
}

.yz-design-preset .yzd-banner .yzd-eyebrow {
	color: inherit;
	opacity: .85;
	margin: 0;
}

.yz-design-preset .yzd-banner__title {
	font-family: var(--yzd-font-display);
	font-weight: var(--yzd-display-weight);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.1;
}

.yz-design-preset .yzd-banner__btn {
	background: var(--yzd-bg);
	border-color: var(--yzd-bg);
	color: var(--yzd-text);
}

/* --------------------------------------------------------------------------
   7. Features, story, newsletter
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-features__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--yzd-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yz-design-preset .yzd-features__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.yz-design-preset .yzd-features__icon {
	flex: none;
	color: var(--yzd-primary);
}

.yz-design-preset .yzd-features__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.yz-design-preset .yzd-features__title {
	font-size: 0.9375rem;
}

.yz-design-preset .yzd-features__desc {
	font-size: 0.875rem;
	color: var(--yzd-muted);
}

.yz-design-preset .yzd-features--cards .yzd-features__item {
	padding: 24px;
	background: var(--yzd-surface);
	border-radius: var(--yzd-card-radius);
}

.yz-design-preset .yzd-features--centered .yzd-features__item {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.yz-design-preset .yzd-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(28px, 5vw, 80px);
}

.yz-design-preset .yzd-story--image-start .yzd-story__media {
	order: -1;
}

.yz-design-preset .yzd-story--image-end .yzd-story__media {
	order: 2;
}

.yz-design-preset .yzd-story__media {
	overflow: hidden;
	border-radius: var(--yzd-radius);
	aspect-ratio: 4 / 5;
	background: var(--yzd-surface);
}

.yz-design-preset .yzd-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yz-design-preset .yzd-story--no-image .yzd-story__inner,
.yz-design-preset .yzd-story--centered .yzd-story__inner,
.yz-design-preset .yzd-story--band .yzd-story__inner {
	grid-template-columns: 1fr;
	max-width: 820px;
	text-align: center;
	justify-items: center;
}

.yz-design-preset .yzd-story--band {
	background: var(--yzd-dark);
	color: var(--yzd-on-dark);
	padding-block: var(--yzd-space) !important;
}

.yz-design-preset .yzd-story--band .yzd-story__title,
.yz-design-preset .yzd-story--band .yzd-story__text,
.yz-design-preset .yzd-story--band .yzd-eyebrow {
	color: var(--yzd-on-dark);
}

.yz-design-preset .yzd-story__title {
	margin: 0 0 16px;
	font-size: var(--yzd-h2);
	line-height: 1.15;
}

.yz-design-preset .yzd-story__text {
	margin: 0 0 16px;
	line-height: 1.7;
	color: var(--yzd-text-2);
}

.yz-design-preset .yzd-story .yzd-btn {
	margin-block-start: 8px;
}

.yz-design-preset .yzd-news__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding-block: clamp(32px, 5vw, 64px);
	padding-inline: clamp(24px, 5vw, 64px);
	background: var(--yzd-surface);
	border-radius: var(--yzd-radius);
}

.yz-design-preset .yzd-news__title {
	margin: 0;
	font-size: var(--yzd-h2);
}

.yz-design-preset .yzd-news__text {
	margin: 8px 0 0;
	color: var(--yzd-muted);
}

.yz-design-preset .yzd-news--band .yzd-news__inner {
	background: var(--yzd-dark);
	color: var(--yzd-on-dark);
}

.yz-design-preset .yzd-news--band .yzd-news__title,
.yz-design-preset .yzd-news--band .yzd-news__text {
	color: var(--yzd-on-dark);
}

.yz-design-preset .yzd-news--band .yzd-btn {
	background: var(--yzd-on-dark);
	border-color: var(--yzd-on-dark);
	color: var(--yzd-dark);
}

/* --------------------------------------------------------------------------
   7b. Reviews, posts, image strip
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-reviews__list,
.yz-design-preset .yzd-posts__list {
	display: grid;
	grid-template-columns: repeat(var(--yzd-cols, 3), minmax(0, 1fr));
	gap: var(--yzd-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yz-design-preset .yzd-reviews__list {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.yz-design-preset .yzd-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	padding: 28px;
	background: var(--yzd-surface);
	border-radius: var(--yzd-card-radius);
	box-sizing: border-box;
}

.yz-design-preset .yzd-review__stars {
	color: var(--yzd-accent);
	letter-spacing: 2px;
}

.yz-design-preset .yzd-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--yzd-text);
}

.yz-design-preset .yzd-review__text p {
	margin: 0;
}

.yz-design-preset .yzd-review__by {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-block-start: auto;
	font-size: 0.875rem;
}

.yz-design-preset .yzd-review__name {
	font-weight: 600;
}

.yz-design-preset .yzd-review__product {
	color: var(--yzd-muted);
}

.yz-design-preset .yzd-reviews--quotes .yzd-review {
	background: none;
	text-align: center;
	align-items: center;
}

.yz-design-preset .yzd-reviews--quotes .yzd-review__text {
	font-family: var(--yzd-font-display);
	font-size: 1.25rem;
}

.yz-design-preset .yzd-post {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--yzd-text);
	text-decoration: none;
}

.yz-design-preset .yzd-post__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--yzd-card-radius);
	background: var(--yzd-surface);
}

.yz-design-preset .yzd-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yz-design-preset .yzd-post__meta {
	font-size: 0.8125rem;
	color: var(--yzd-muted);
}

.yz-design-preset .yzd-post__title {
	font-family: var(--yzd-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.yz-design-preset .yzd-strip {
	padding-inline: 0;
}

.yz-design-preset .yzd-strip__list {
	display: grid;
	grid-template-columns: repeat(var(--yzd-cols, 6), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.yz-design-preset .yzd-strip__link {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.yz-design-preset .yzd-strip__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .3s ease;
}

.yz-design-preset .yzd-strip__link:hover img {
	opacity: .8;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.yz-design-preset .yzd-cats__list {
		grid-template-columns: repeat(min(var(--yzd-cols, 6), 4), minmax(0, 1fr));
	}

	.yz-design-preset .yzd-products ul.products {
		grid-template-columns: repeat(min(var(--yzd-cols, 4), 3), minmax(0, 1fr));
	}

	.yz-design-preset .yzd-products--carousel ul.products li.product {
		flex-basis: calc((100% - 2 * var(--yzd-gap)) / 3);
	}
}

@media (max-width: 768px) {
	.yz-design-preset .yzd-hero--split .yzd-hero__inner,
	.yz-design-preset .yzd-story__inner {
		grid-template-columns: 1fr;
	}

	.yz-design-preset .yzd-hero--split .yzd-hero__media {
		order: -1 !important;
		aspect-ratio: 4 / 3;
	}

	.yz-design-preset .yzd-hero--split .yzd-hero__inner {
		min-height: 0;
	}

	.yz-design-preset .yzd-story__media {
		order: -1 !important;
	}

	.yz-design-preset .yzd-cats__list {
		grid-template-columns: repeat(min(var(--yzd-cols, 6), 3), minmax(0, 1fr));
	}

	.yz-design-preset .yzd-cats--circles .yzd-cats__list,
	.yz-design-preset .yzd-cats--overlay .yzd-cats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yz-design-preset .yzd-products ul.products {
		grid-template-columns: repeat(var(--yzd-cols-m, 2), minmax(0, 1fr));
	}

	.yz-design-preset .yzd-products--carousel ul.products li.product {
		flex-basis: 70%;
	}

	.yz-design-preset .yzd-banners__grid,
	.yz-design-preset .yzd-banners--trio .yzd-banners__grid,
	.yz-design-preset .yzd-banners--mosaic.yzd-banners--n3 .yzd-banners__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.yz-design-preset .yzd-banners--mosaic.yzd-banners--n3 .yzd-banner:first-child {
		grid-row: auto;
	}

	.yz-design-preset .yzd-news__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.yz-design-preset .yzd-posts__list {
		grid-template-columns: 1fr;
	}

	.yz-design-preset .yzd-strip__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.yz-design-preset .yzd-cats__media img,
	.yz-design-preset .yzd-banner__img,
	.yz-design-preset .yzd-btn {
		transition: none;
	}

	.yz-design-preset .yzd-products--carousel ul.products {
		scroll-behavior: auto;
	}
}

.yz-design-preset .yzd-features__link {
	align-self: flex-start;
	margin-block-start: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--yzd-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yz-design-preset .yzd-features__link:focus-visible {
	outline: 2px solid var(--yzd-primary);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9. Touch ergonomics (ui-ux-pro-max: touch-target-size, touch-spacing, tap delay)
   -------------------------------------------------------------------------- */
.yz-design-preset .yzd-btn,
.yz-design-preset .yzd-cats__link,
.yz-design-preset .yzd-banner,
.yz-design-preset .yzd-tabs__tab,
.yz-design-preset .yzd-carousel__btn,
.yz-design-preset .yzd-head__link,
.yz-design-preset .yzd-features__link,
.yz-design-preset .yzd-strip__link,
.yz-design-preset .yzd-post {
	touch-action: manipulation;
	cursor: pointer;
}

.yz-design-preset .yzd-cats--pills .yzd-cats__link,
.yz-design-preset .yzd-head__link,
.yz-design-preset .yzd-features__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   10. Shared storefront polish (UI/UX review, ui-ux-pro-max rule ids in brackets)
   -------------------------------------------------------------------------- */

/* [readable-font-size] Astra shrinks the root to 91.2% on tablets/phones (14.6px body). Presets
   keep 16px body text on mobile; Heritage is untouched. */
@media (max-width: 921px) {
	html[data-yz-design]:not([data-yz-design="heritage"]) {
		font-size: 100%;
	}
}

/* [consistency] One scarcity signal per card: "One of One" already says there is a single piece,
   so "Limited — 1 left" beside it is noise that covers the photo on phones. */
.yz-design-preset li.product .yz-badge--rare ~ .yz-badge--limited {
	display: none;
}

/* [line-length / alignment] The stone·metal subject line wrapped on some cards and stepped every
   title and price in the row; keep it to one line, never below 12px. */
html[data-yz-design]:not([data-yz-design="heritage"]) body li.product .yz-subject {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: max(12px, 0.75rem);
}

/* [touch-spacing] The free-shipping / certificate note sat against the Add-to-cart button inside
   the cart form's flex row; give it its own line. */
.yz-design-preset.single-product form.cart .yz-atc-note {
	flex-basis: 100%;
	width: 100%;
	margin-block-start: 14px;
}

/* [line-length] Product descriptions ran ~150 characters per line. */
.yz-design-preset .woocommerce-Tabs-panel p,
.yz-design-preset .woocommerce-Tabs-panel li,
.yz-design-preset .woocommerce-product-details__short-description p {
	max-width: 75ch;
}

/* [horizontal-scroll] The one-line subject clamp is unbreakable text: without min-width:0 it sets
   each grid track's minimum and pushes the shop grid past the viewport (found at 390px). */
.yz-design-preset ul.products li.product,
.yz-design-preset ul.products li.product .astra-shop-summary-wrap {
	min-width: 0;
}

/* [touch-target-size] Shared WooCommerce/theme controls on phones and touch screens. */
@media (pointer: coarse), (max-width: 768px) {
	.yz-design-preset .woocommerce-breadcrumb a,
	.yz-design-preset .woocommerce-pagination .page-numbers,
	.yz-design-preset .tagged_as a,
	.yz-design-preset .posted_in a,
	.yz-design-preset .yz-shop__search-btn,
	.yz-design-preset .woocommerce-product-gallery__trigger,
	.yz-design-preset .yz-wish,
	.yz-design-preset .summary .yz-wish {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}