/* damavand-sf-tokens */
/*
 * Damavand Storefront — design tokens + the two layout utilities the catalog templates use.
 * RC2 (Task 60): copied verbatim from damavand-child/assets/css/rtl-foundation.css (sections 1, 4
 * and the breakpoint token overrides of 5) so the Selector/catalog templates render identically
 * when NO child theme is active (Mode B: Blocksy only). In Mode A the child loads the same tokens
 * first; the duplicate declarations are identical, so nothing changes there.
 */

:root {
	/* --- Spacing scale (4px base unit) ------------------------------- */
	--dv-space-1: 0.25rem;  /* 4px  */
	--dv-space-2: 0.5rem;   /* 8px  */
	--dv-space-3: 0.75rem;  /* 12px */
	--dv-space-4: 1rem;     /* 16px */
	--dv-space-5: 1.5rem;   /* 24px */
	--dv-space-6: 2rem;     /* 32px */
	--dv-space-7: 3rem;     /* 48px */
	--dv-space-8: 4rem;     /* 64px */
	--dv-space-9: 6rem;     /* 96px */

	/* --- Type scale (mobile-first; base font-size = 16px/1rem) -------
	   Scale ratio ~1.2 (minor third), rounded to clean rem values.
	   Headings get a second, larger set of values from the md
	   breakpoint up — see section 3. */
	--dv-font-size-xs:   0.75rem;   /* 12px — captions, badges     */
	--dv-font-size-sm:   0.875rem;  /* 14px — secondary text       */
	--dv-font-size-base: 1rem;      /* 16px — body                 */
	--dv-font-size-md:   1.125rem;  /* 18px — lead paragraph       */
	--dv-font-size-lg:   1.375rem;  /* 22px — h4                   */
	--dv-font-size-xl:   1.75rem;   /* 28px — h3                   */
	--dv-font-size-2xl:  2.125rem;  /* 34px — h2                   */
	--dv-font-size-3xl:  2.625rem;  /* 42px — h1                   */

	--dv-line-height-tight: 1.25;
	--dv-line-height-base:  1.7;   /* Persian text reads better with a
	                                   slightly looser line-height than
	                                   Latin body copy. */
	--dv-line-height-heading: 1.35;

	/* --- Font stack ----------------------------------------------------
	   Vazirmatn is a Persian-optimized, open-source (SIL OFL) variable
	   font. Its files are NOT bundled in this repo/sandbox (see the
	   @font-face block below and the doc for why + what to do). Tahoma
	   is used as the Windows-native RTL-safe fallback; the rest are
	   generic system-font fallbacks so text always renders legibly even
	   with zero custom fonts loaded. */
	--dv-font-family-base: "Vazirmatn", Tahoma, "Segoe UI", "Iranian Sans",
		system-ui, -apple-system, sans-serif;
	--dv-font-family-heading: var(--dv-font-family-base);

	/* --- Brand color system ----------------------------------------------
	   Founder decision, 2026-09-23, CORRECTED same day (see
	   docs/05-rtl-responsive-foundation.md §Brand colors for the full
	   correction note): the brand palette has an explicit priority order —
	     1. Primary   — Black/Graphite   — the DOMINANT color, the base of the
	                     whole UI and Damavand Steel's main visual identity.
	     2. Secondary — Steel/Silver     — industrial/steel feel, neutral surfaces.
	     3. Accent    — Warm Gold/Bronze — premium emphasis and small details
	                     ONLY, never the default/dominant color.
	     4. Supporting Accent — Red      — limited and targeted: specific CTAs,
	                     statuses, or emphasis only.
	     5. Orange — DO NOT USE, excluded from the palette entirely.
	   The Founder specified these as named categories, not exact hex values,
	   so the hex values below are this implementation's initial pick *within*
	   each approved category — not a separately-confirmed exact brand hex.
	   If the Founder later supplies exact hex codes, only this token block
	   needs to change; every rule in this file consumes a token, never a
	   literal color. These same hex values are mirrored into Elementor's
	   Global Colors by damavand-elementor-components.php (function
	   damavand_ec_brand_colors()) so the Design System and the Elementor
	   editor never drift apart — keep both in sync if either changes.
	   This is a DIFFERENT system from product colors (e.g. Silver, PVD Gold)
	   — see the "Product color reference" block further below; the two are
	   kept deliberately separate per the Founder's explicit instruction
	   (product color values are NOT brand-color statements). */
	--dv-color-primary: #1c1e20;        /* 1. Black/Graphite — DOMINANT, main visual identity */
	--dv-color-primary-alt: #33373b;    /* 1. Black/Graphite — secondary dark surface (footer, etc.) */
	--dv-color-secondary: #7d8790;      /* 2. Steel/Silver — industrial neutral, mid tone */
	--dv-color-secondary-light: #dde1e5;/* 2. Steel/Silver — light tint (borders, subtle bg) */
	--dv-color-accent: #a9802f;         /* 3. Warm Gold/Bronze — premium emphasis/detail ONLY */
	--dv-color-accent-deep: #7c5430;    /* 3. Warm Gold/Bronze — deeper variant (hover/active) */
	--dv-color-accent-supporting: #a3231c; /* 4. Red — LIMITED/targeted only; 5. never Orange */

	--dv-color-text: var(--dv-color-primary);
	--dv-color-text-muted: var(--dv-color-secondary);
	--dv-color-bg: #ffffff;
	--dv-color-bg-subtle: #f6f5f3;
	--dv-color-border: var(--dv-color-secondary-light);
	/* Links/interactive elements default to the DOMINANT primary color, per
	   the correction — gold is reserved for a premium hover/detail touch,
	   never the default interactive color. */
	--dv-color-link: var(--dv-color-primary);
	--dv-color-link-hover: var(--dv-color-accent);

	/* --- Product color reference (NOT part of the brand palette) -----------
	   Founder-confirmed real product colors — kept in a separate namespace on
	   purpose, for future use in product swatches/attribute displays (the
	   "color" field already present on some real catalog items — see
	   damavand-product-data). Never mixed with the --dv-color-* brand tokens
	   above; the Founder was explicit that these do not represent the brand
	   palette. */
	--dv-product-color-silver: #c7cbce;
	--dv-product-color-pvd-gold: #a9802f;

	/* --- Radii / misc ---------------------------------------------------- */
	--dv-radius-sm: 4px;
	--dv-radius-md: 8px;
	--dv-radius-lg: 16px;

	/* --- Layout ----------------------------------------------------------
	   Container max-widths per breakpoint; grown progressively so the
	   mobile-first base has no max-width constraint at all. */
	--dv-container-max: 100%;
	--dv-container-padding-inline: var(--dv-space-4);
}

.dv-container {
	width: 100%;
	max-width: var(--dv-container-max);
	margin-inline: auto;
	padding-inline: var(--dv-container-padding-inline);
}

/* Utility spacing helpers using logical properties (inline = start/end,
   which is right/left flipped automatically per direction). Kept small
   and generic on purpose — this is a foundation layer, not a full
   utility framework. */
.dv-stack > * + * {
	margin-block-start: var(--dv-space-4);
}

.dv-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- sm: ~480px — large phones ------------------------------------------ */
@media (min-width: 30em) { /* 480px */
	:root {
		--dv-container-padding-inline: var(--dv-space-5);
	}
}

/* --- md: ~768px — tablet -------------------------------------------------- */
@media (min-width: 48em) { /* 768px */
	:root {
		--dv-container-max: 720px;
		--dv-container-padding-inline: var(--dv-space-6);

		/* Slightly larger heading scale once there's room to breathe. */
		--dv-font-size-lg:  1.5rem;    /* 24px */
		--dv-font-size-xl:  2rem;      /* 32px */
		--dv-font-size-2xl: 2.5rem;    /* 40px */
		--dv-font-size-3xl: 3rem;      /* 48px */
	}
}

/* --- lg: ~1024px — small desktop ------------------------------------------ */
@media (min-width: 64em) { /* 1024px */
	:root {
		--dv-container-max: 960px;
	}
}

/* --- xl: ~1280px — wide desktop -------------------------------------------- */
@media (min-width: 80em) { /* 1280px */
	:root {
		--dv-container-max: 1200px;
	}
}

/* damavand-sf-woocommerce */
/**
 * Damavand Child — WooCommerce template styles
 * =============================================
 *
 * Covers the product grid/card (archive-product.php + content-product.php),
 * the single product layout (content-single-product.php +
 * single-product/*.php) and the shared "no image yet" / "no price yet" /
 * availability-badge / inquiry-CTA visual language between them.
 *
 * Consumes ONLY the design tokens and breakpoints already defined in
 * ../rtl-foundation.css (--dv-color-*, --dv-space-*, --dv-font-*,
 * --dv-radius-*, --dv-container-*) — no new tokens or colors are
 * introduced here, and no left/right physical properties are used
 * (logical properties throughout, matching the foundation file's RTL
 * approach). Mobile-first: base rules are the phone layout, each
 * breakpoint below only adds — never overrides back down.
 *
 * Breakpoints mirror rtl-foundation.css exactly: 30em / 48em / 64em / 80em.
 */

/* ==========================================================================
   1. Product grid (archive-product.php)
   ========================================================================== */

.dv-shop__header {
	margin-block-end: var(--dv-space-6);
}

.dv-shop__title {
	margin-block-end: var(--dv-space-2);
}

/* Base = 1 column (narrow phones). */
.dv-product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dv-space-5);
	list-style: none;
	margin: 0 0 var(--dv-space-6);
	padding: 0;
}

/* ~480px — large phones / small tablets: 2 columns. */
@media (min-width: 30em) {
	.dv-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ~768px — tablet: 3 columns. */
@media (min-width: 48em) {
	.dv-product-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--dv-space-6);
	}
}

/* ~1280px — wide desktop: 4 columns. */
@media (min-width: 80em) {
	.dv-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   2. Product card (content-product.php)
   ========================================================================== */

.dv-card {
	display: flex;
	flex-direction: column;
	background-color: var(--dv-color-bg);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-md);
	overflow: hidden;
	transition: border-color 0.15s ease-in-out;
}

.dv-card:hover {
	border-color: var(--dv-color-secondary);
}

.dv-card__media-link {
	position: relative;
	display: block;
	text-decoration: none;
}

.dv-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--dv-color-bg-subtle);
	overflow: hidden;
}

.dv-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dv-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-2);
	padding: var(--dv-space-4);
	flex-grow: 1;
}

.dv-card__title {
	font-size: var(--dv-font-size-md);
	margin: 0;
}

.dv-card__title a {
	color: var(--dv-color-text);
	text-decoration: none;
}

.dv-card__title a:hover,
.dv-card__title a:focus {
	color: var(--dv-color-accent);
}

.dv-card__price {
	margin-block-start: auto;
	padding-block-start: var(--dv-space-2);
	font-weight: 700;
}

.dv-card__cta {
	margin-block-start: var(--dv-space-2);
}

/* ==========================================================================
   3. "No image yet" fallback — shared by the card and the single product
   image, deliberately plain/geometric so it never reads as a real photo.
   ========================================================================== */

.dv-media-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--dv-color-bg-subtle);
	border: 1px dashed var(--dv-color-border);
}

.dv-media-fallback__glyph {
	font-size: var(--dv-font-size-2xl);
	color: var(--dv-color-secondary);
	font-weight: 700;
}

.dv-media-fallback--large {
	aspect-ratio: 1 / 1;
	border-radius: var(--dv-radius-md);
}

/* ==========================================================================
   4. Availability badge + honest "price on inquiry" label — shared by the
   card and the single product's per-item rows.
   ========================================================================== */

.dv-badge {
	position: absolute;
	inset-block-start: var(--dv-space-2);
	inset-inline-end: var(--dv-space-2);
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: var(--dv-radius-sm);
	font-size: var(--dv-font-size-xs);
	font-weight: 700;
	color: #fff;
	background-color: var(--dv-color-secondary);
}

/* Inline variant used on the single-product item rows, where the badge sits
   next to the item name rather than floating over an image. */
.dv-variant__head .dv-badge {
	position: static;
	inset: auto;
}

.dv-badge--available {
	background-color: #3a7d44; /* a real, distinct "in stock" green — not one of the 4 locked brand colors, used ONLY for this one semantic state, never decoratively. */
}

.dv-badge--fast_supply {
	background-color: var(--dv-color-accent);
	color: var(--dv-color-primary);
}

.dv-badge--inquiry_required {
	background-color: var(--dv-color-secondary);
}

.dv-badge--temp_unavailable {
	background-color: var(--dv-color-accent-supporting);
}

.dv-price-inquiry {
	display: inline-block;
	font-size: var(--dv-font-size-sm);
	color: var(--dv-color-text-muted);
	font-weight: 400;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.dv-btn {
	display: inline-block;
	padding: var(--dv-space-2) var(--dv-space-4);
	border-radius: var(--dv-radius-sm);
	font-size: var(--dv-font-size-sm);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--dv-color-primary);
	cursor: pointer;
}

.dv-btn--outline {
	background-color: transparent;
	color: var(--dv-color-primary);
}

.dv-btn--outline:hover,
.dv-btn--outline:focus {
	background-color: var(--dv-color-primary);
	color: #fff;
}

.dv-btn--primary,
.dv-variant__form .single_add_to_cart_button {
	background-color: var(--dv-color-primary);
	color: #fff;
	border-color: var(--dv-color-primary);
}

.dv-btn--primary:hover,
.dv-btn--primary:focus,
.dv-variant__form .single_add_to_cart_button:hover,
.dv-variant__form .single_add_to_cart_button:focus {
	background-color: var(--dv-color-accent-deep);
	border-color: var(--dv-color-accent-deep);
}

/* The inquiry form's own submit button (damavand-hybrid-commerce shortcode
   markup) — same visual language as the rest of this file's CTAs, applied
   from here since that plugin's own output is intentionally unstyled. */
.damavand-inquiry-form button[type="submit"] {
	display: inline-block;
	padding: var(--dv-space-2) var(--dv-space-4);
	border-radius: var(--dv-radius-sm);
	font-size: var(--dv-font-size-sm);
	font-weight: 700;
	background-color: var(--dv-color-accent);
	color: var(--dv-color-primary);
	border: 1px solid var(--dv-color-accent);
	cursor: pointer;
}

.damavand-inquiry-form button[type="submit"]:hover,
.damavand-inquiry-form button[type="submit"]:focus {
	background-color: var(--dv-color-accent-deep);
	border-color: var(--dv-color-accent-deep);
	color: #fff;
}

.damavand-inquiry-form {
	margin-block-start: var(--dv-space-3);
	padding: var(--dv-space-4);
	background-color: var(--dv-color-bg-subtle);
	border-radius: var(--dv-radius-md);
}

.damavand-inquiry-form p {
	margin-block-end: var(--dv-space-3);
}

.damavand-inquiry-form input,
.damavand-inquiry-form textarea {
	width: 100%;
	padding: var(--dv-space-2);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
}

.damavand-inquiry-form .damavand-success {
	color: #3a7d44;
	font-weight: 700;
}

.damavand-inquiry-form .damavand-error {
	color: var(--dv-color-accent-supporting);
	font-weight: 700;
}

/* ==========================================================================
   6. Single product layout (content-single-product.php)
   ========================================================================== */

.dv-product {
	display: grid;
	/* minmax(0, 1fr), never bare 1fr: the single column's automatic min
	   width is otherwise the max-content size of its children — and
	   .dv-product-media below is an aspect-ratio box with no explicit
	   width, so its intrinsic contribution can force this track (and
	   therefore .dv-product-media itself, and .dv-product__summary next
	   to it, which is where #dv-selector lives) wider than the real
	   viewport on narrow phones. Found and fixed in Phase E's mobile
	   Browser QA: at 375px this silently rendered the whole product
	   column — media, summary AND the Cascading Selector — at 418px,
	   causing real horizontal scroll (see
	   docs/DS-MASTER-CATALOG-09-phase-e-final-audit-report.md, "Browser
	   QA" / mobile overflow). minmax(0, 1fr) keeps the track's floor at
	   0 so it only ever grows to fill real available space, never past
	   it. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--dv-space-6);
	margin-block-end: var(--dv-space-7);
}

@media (min-width: 48em) {
	.dv-product {
		grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
		align-items: start;
	}
}

.dv-product-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--dv-color-bg-subtle);
	border-radius: var(--dv-radius-md);
	overflow: hidden;
}

.dv-product-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dv-product__title {
	margin-block-end: var(--dv-space-4);
}

/* WooCommerce's own generic attribute-overview table. */
.woocommerce-product-attributes {
	width: 100%;
	margin-block-end: var(--dv-space-5);
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: var(--dv-space-2) var(--dv-space-3);
	border-block-end: 1px solid var(--dv-color-border);
	text-align: start;
	font-size: var(--dv-font-size-sm);
}

.woocommerce-product-attributes th {
	color: var(--dv-color-text-muted);
	font-weight: 500;
	width: 40%;
}

.dv-product__variants-heading {
	margin-block: var(--dv-space-5) var(--dv-space-3);
	font-size: var(--dv-font-size-md);
}

/* ==========================================================================
   7. Per-variant rows (single-product/dv-item-row.php)
   ========================================================================== */

.dv-variant-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-4);
}

.dv-variant {
	padding: var(--dv-space-4);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-md);
}

.dv-variant__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dv-space-2);
	margin-block-end: var(--dv-space-2);
}

.dv-variant__name {
	font-weight: 700;
}

.dv-variant__attrs {
	margin: 0 0 var(--dv-space-2);
	color: var(--dv-color-text-muted);
	font-size: var(--dv-font-size-sm);
}

.dv-variant__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-space-4);
	margin: 0 0 var(--dv-space-2);
	font-size: var(--dv-font-size-sm);
}

.dv-variant__price {
	margin-block-end: var(--dv-space-2);
	font-weight: 700;
}

.dv-variant__reference {
	margin-block-start: var(--dv-space-1);
	font-size: var(--dv-font-size-xs);
	font-weight: 400;
	color: var(--dv-color-text-muted);
	font-style: italic;
}

.dv-variant__reason {
	margin: 0 0 var(--dv-space-2);
	font-size: var(--dv-font-size-sm);
	color: var(--dv-color-accent-supporting);
}

.dv-variant__cta {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-2);
}

.dv-variant__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-2);
}

.dv-variant__qty {
	width: 4.5rem;
	padding: var(--dv-space-2);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
}

/* ==========================================================================
   8. Misc
   ========================================================================== */

.dv-notice {
	color: var(--dv-color-text-muted);
}

/* ==========================================================================
   9. Variant filter (prototype — single product page, JS-driven, client-side)
   ========================================================================== */

.dv-variant-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-3);
	margin: var(--dv-space-3) 0 var(--dv-space-4);
	padding: var(--dv-space-3);
	background: var(--dv-color-surface-muted, #f7f7f7);
	border-radius: var(--dv-radius-sm);
}

.dv-variant-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-2);
}

.dv-variant-filter__label {
	font-weight: 600;
}

.dv-variant-filter__btn {
	padding: var(--dv-space-1) var(--dv-space-2);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
	background: #fff;
	cursor: pointer;
	font: inherit;
}

.dv-variant-filter__btn.is-active {
	background: var(--dv-color-primary, #1f4e78);
	color: #fff;
	border-color: var(--dv-color-primary, #1f4e78);
}

.dv-variant-filter__reset {
	margin-inline-start: auto;
}

.dv-variant-filter__count {
	color: var(--dv-color-text-muted);
	font-size: 0.9em;
}

/* ==========================================================================
   10. Cascading Variation Selector (Phase C, 9-10 مهر ۱۴۰۵) — the FINAL
   display/selection UI for every Variable Product, replacing section 9's
   prototype filter bar above (left in place, unused, per this project's
   "never delete without review" convention — see
   docs/DS-MASTER-CATALOG-07-phase-c-ui-report.md). Mobile-first throughout:
   base rules are the phone layout; each breakpoint below only adds.
   ========================================================================== */

.dv-selector {
	margin: var(--dv-space-4) 0 var(--dv-space-6);
}

.dv-selector__body.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.dv-selector__summary {
	margin-block-end: var(--dv-space-3);
}

.dv-selector__summary--ambiguous,
.dv-selector__summary--invalid {
	padding: var(--dv-space-3);
	border-radius: var(--dv-radius-sm);
	background: var(--dv-color-bg-subtle);
	border-inline-start: 3px solid var(--dv-color-accent-supporting);
}

.dv-selector__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-2);
	margin-block-end: var(--dv-space-2);
}

.dv-selector__chip {
	display: inline-block;
	padding: var(--dv-space-1) var(--dv-space-3);
	border-radius: 999px;
	background: var(--dv-color-secondary-light);
	color: var(--dv-color-text);
	font-size: var(--dv-font-size-sm);
}

.dv-selector__change,
.dv-selector__reset {
	font-size: var(--dv-font-size-sm);
}

.dv-selector__count {
	color: var(--dv-color-text-muted);
	font-size: var(--dv-font-size-sm);
}

.dv-selector__fieldset {
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-md);
	padding: var(--dv-space-4);
	margin: 0 0 var(--dv-space-4);
}

.dv-selector__fieldset legend {
	padding: 0 var(--dv-space-2);
	font-weight: 600;
}

/* Base = 1 column (narrow phones) — every option gets its own full-width,
   easily tappable row (minimum 44px touch target per common a11y guidance). */
.dv-selector__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dv-space-2);
	margin-block-start: var(--dv-space-2);
}

/* ~480px — large phones/small tablets: options can sit two to a row. */
@media (min-width: 30em) {
	.dv-selector__options {
		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	}
}

.dv-selector__option {
	min-height: 44px;
	padding: var(--dv-space-2) var(--dv-space-3);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
	background: #fff;
	color: var(--dv-color-text);
	font: inherit;
	cursor: pointer;
	text-align: center;
}

.dv-selector__option:hover,
.dv-selector__option:focus-visible {
	border-color: var(--dv-color-accent);
	color: var(--dv-color-accent-deep);
}

.dv-selector__option:focus-visible {
	outline: 2px solid var(--dv-color-accent);
	outline-offset: 2px;
}

.dv-selector__ambiguous-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dv-space-2);
}

.dv-selector__option--ambiguous {
	width: 100%;
	text-align: start;
}

.dv-variant-list--resolved {
	margin: 0;
}