/**
 * Wapu Single Swatches — estilos PDP.
 *
 * Token-driven con WTDS; tamaños del swatch usan roles de componente. Las formas (circle/rounded/pill)
 * vienen del Card Studio + Single Studio (Playground).
 */

/* CTA paint is owned by the canonical WTDS button component. */

.wapu-single-swatches {
	margin: 1rem 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .625rem;
	font-family: var(--wtds-font-text);
}

.wapu-single-swatches__current {
	font-size:var(--wtds-fs-footnote);
	color: var(--wtds-ink);
}
.wapu-single-swatches__current strong {
	color: var(--wtds-ink);
	font-weight: var(--wtds-fw-medium);
	margin-left: .25rem;
}

.wapu-single-swatches__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wtds-swatch-gap, .25rem);
}

.wapu-single-swatch {
	border: 0;
	background: transparent;
	padding: .25rem;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	transition: transform .15s;
	font-family: inherit;
}
.wapu-single-swatch:hover { transform: translateY(-.125rem); }

.wapu-single-swatch__media {
	width: var(--wtds-swatch-size, 1.5rem);
	height: var(--wtds-swatch-size, 1.5rem);
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: .125rem solid var(--wtds-surface);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wtds-ink) 12%, transparent);
	transition: box-shadow .15s, transform .15s;
}

.wapu-single-swatch.is-active .wapu-single-swatch__media {
	/* V28 P1: no selected halo/double ring. */
	border-color: var(--wtds-accent);
	box-shadow: none;
	transform: none;
}

.wapu-single-swatch__name {
	font-size:var(--wtds-fs-caption-2);
	color: var(--wtds-ink);
	font-weight:var(--wtds-fw-medium);
	max-width: 5rem;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wapu-single-swatch.is-active .wapu-single-swatch__name {
	color: var(--wtds-ink);
}

/* ─── Formas (circle / rounded / pill) ─── */
.wapu-single-swatches--shape-circle  .wapu-single-swatch__media { border-radius: 50%; }
.wapu-single-swatches--shape-rounded .wapu-single-swatch__media { border-radius: .5rem; }
.wapu-single-swatches--shape-pill    .wapu-single-swatch__media {
	border-radius: 62.4375rem;
	width: calc(var(--wtds-swatch-size, 1.5rem) * 1.5);
}

/* Variación con label visible: necesita más anchura por swatch */
.wapu-single-swatches:has(.wapu-single-swatch__name) .wapu-single-swatch {
	min-width: 3.75rem;
}

/* ════════════════════════════════════════════════════════════════
 * [v4.0.18] B1 Fix — Variant labels truncados.
 *
 * El theme renderiza variants en .wapu-single__variant-name con
 * white-space: nowrap + text-overflow: ellipsis. Los labels largos
 * tipo "fair light with cool undertone" se cortan a "fair light wit".
 *
 * Fix: permitir wrap a 2 líneas dentro de un contenedor más ancho
 * con line-clamp para no romper la grid.
 * ══════════════════════════════════════════════════════════════════ */

.wapu-single .wapu-single__variant-name {
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: break-word;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: clip !important;
	line-height: 1.25 !important;
	font-size:var(--wtds-fs-caption-2) !important;
	max-height: 2.5em;
	padding: 0 .125rem;
}

.wapu-single__variant-items--grid .wapu-single__variant-meta,
.wapu-single__variant-items--grid .wapu-single__variant-name {
	display: none !important;
}

.wapu-single__variant-items--grid .wapu-single__variant-item {
	position: relative;
	overflow: visible;
}

@media (hover:hover) {
	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]::after {
		content: attr(data-label);
		position: absolute;
		left: 50%;
		bottom: calc(100% + .5rem);
		transform: translateX(-50%);
		padding: .375rem .625rem;
		border-radius: var(--wtds-r-sm);
		background: var(--wtds-surface-inverse);
		color: var(--wtds-surface);
		font-family: var(--wtds-font-text);
		font-size:var(--wtds-fs-caption-2);
		font-weight: var(--wtds-fw-medium);
		line-height: 1.2;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--wtds-dur-fast) var(--wtds-ease), transform var(--wtds-dur-fast) var(--wtds-ease), visibility var(--wtds-dur-fast) var(--wtds-ease);
		z-index: 3;
		box-shadow: var(--wtds-shadow-md);
	}

	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: calc(100% + .125rem);
		transform: translateX(-50%);
		border-left: .3125rem solid transparent;
		border-right: .3125rem solid transparent;
		border-top: .375rem solid var(--wtds-outline-strong);
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--wtds-dur-fast) var(--wtds-ease), visibility var(--wtds-dur-fast) var(--wtds-ease);
		z-index: 3;
	}

	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]:hover::after,
	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]:hover::before,
	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]:focus-visible::after,
	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]:focus-visible::before {
		opacity: 1;
		visibility: visible;
	}

	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]:hover::after,
	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]:focus-visible::after {
		transform: translateX(-50%) translateY(-.125rem);
	}
}

/* Grid: ensanchar las celdas para que quepa el nombre completo en 2 líneas */
.wapu-single .wapu-single__variant-items--grid {
	grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)) !important;
	gap: 1rem .625rem !important;
}

/* En mobile dejar 4 columnas iguales pero más anchas */
@media (max-width: 47.9375rem) {
	.wapu-single .wapu-single__variant-items--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ── Container unificado buscador + lista (catálogo grande >12) ──────── */
.wapu-single__variation-picker {
	border: 0.5px solid var(--wtds-separator-soft);
	border-radius: var(--wtds-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.wapu-single__variation-search {
	padding: .4375rem .625rem;
	background: var(--wtds-surface);
}

.wapu-single__variation-search-input {
	width: 100%;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wapu-single__variation-search-input:focus {
	outline: none;
	border-color: transparent !important;
	box-shadow: none !important;
}

.wapu-single__variation-picker #wapu-variant-items {
	padding: .25rem;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Items más compactos dentro del picker */
.wapu-single__variation-picker .wapu-single__variant-item {
	gap: .625rem;
	padding: .4375rem .625rem;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border-bottom: 0.5px solid var(--wtds-separator-soft) !important;
	transition: background var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-single__variation-picker .wapu-single__variant-item:last-child {
	border-bottom: 0 !important;
}

.wapu-single__variation-picker .wapu-single__variant-item:hover {
	background: var(--wtds-fill-3);
	border-color: transparent !important;
}

.wapu-single__variation-picker .wapu-single__variant-item[aria-selected="true"],
.wapu-single__variation-picker .wapu-single__variant-item--selected {
	background: var(--wtds-fill-2);
	box-shadow: none !important;
}

.wapu-single__variation-picker .wapu-single__variant-thumb {
	width: 2rem !important;
	height: 2rem !important;
	min-width: 2rem !important;
	min-height: 2rem !important;
	flex-shrink: 0;
	border: 0.5px solid var(--wtds-separator-soft) !important;
	box-shadow: none !important;
}

.wapu-single__variation-picker .wapu-single__variant-swatch,
.wapu-single__variation-picker .wapu-single__variant-thumb img {
	width: 20px !important;
	height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
}

.wapu-single__variation-picker .wapu-single__variant-name {
	font-size:var(--wtds-fs-caption-1) !important;
}

/* ── Selector compacto del PDP: visual, sin caja vacía gigante ───────── */
.wapu-single__variation-picker--compact {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent;
	overflow: visible !important;
	gap: 0;
}

.wapu-single__variation-picker--compact #wapu-variant-items {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.wapu-single__variation-picker--compact #wapu-variant-items.wapu-single__variant-items--grid {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .75rem !important;
	max-height: none !important;
	overflow: visible !important;
	margin: 0;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item {
	width: 4.875rem;
	min-width: 4.875rem;
	padding: 0 !important;
	gap: .5rem;
	border: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-thumb {
	width: 3.875rem !important;
	height: 3.875rem !important;
	min-width: 3.875rem !important;
	min-height: 3.875rem !important;
	padding: .3125rem;
	border: 1px solid var(--wtds-separator-soft) !important;
	border-radius: 50%;
	background: var(--wtds-surface);
	box-shadow: 0 .625rem 1.5rem var(--wtds-shadow-color-faint) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color var(--wtds-dur-fast) var(--wtds-ease),
		box-shadow var(--wtds-dur-fast) var(--wtds-ease),
		transform var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:hover .wapu-single__variant-thumb {
	border-color: var(--wtds-ink-4) !important;
	transform: translateY(-1px);
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item[aria-selected="true"] .wapu-single__variant-thumb,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item--selected .wapu-single__variant-thumb {
	/* V28 P1: selected uses one visual treatment only.
	   Keyboard focus remains a separate focus-visible state below. */
	border-color: var(--wtds-accent) !important;
	box-shadow: none !important;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-swatch,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-swatch img,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-thumb img {
	width: 100% !important;
	height: 100% !important;
	border-radius: inherit;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-swatch--image {
	background-image: none !important;
	background-color: var(--wtds-surface);
	display: block;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-swatch--image img,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-thumb img {
	object-fit: cover !important;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-swatch--color {
	box-shadow: inset 0 0 0 1px var(--wtds-shadow-color-soft);
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-meta {
	width: 4.875rem;
	padding: 0;
	display: flex !important;
	justify-content: center;
	text-align: center;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-name {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	white-space: normal !important;
	overflow: hidden;
	text-overflow: clip;
	font-family: var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-2) !important;
	font-weight: var(--wtds-fw-medium);
	line-height: 1.2 !important;
	color: var(--wtds-ink-2);
}

.wapu-single__variation-picker--compact #wapu-variant-items.wapu-single__variant-items--list {
	padding: 0 !important;
	border: 0.5px solid var(--wtds-separator-soft) !important;
	border-radius: var(--wtds-r-md) !important;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--wtds-surface);
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--list .wapu-single__variant-item {
	padding: .6875rem .875rem !important;
	border-bottom: 0.5px solid var(--wtds-separator-soft) !important;
	border-radius: 0 !important;
}

.wapu-single__variation-picker--compact .wapu-single__variant-items--list .wapu-single__variant-thumb {
	width: 2.75rem !important;
	height: 2.75rem !important;
	min-width: 2.75rem !important;
	min-height: 2.75rem !important;
	background: var(--wtds-surface);
}

@media (max-width: 47.9375rem) {
	.wapu-single__variation-picker--compact #wapu-variant-items.wapu-single__variant-items--grid {
		display: flex !important;
		gap: .625rem !important;
		padding: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item,
	.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-meta {
		width: 4.25rem;
		min-width: 4.25rem;
	}

	.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-thumb {
		width: 3.375rem !important;
		height: 3.375rem !important;
		min-width: 3.375rem !important;
		min-height: 3.375rem !important;
	}
}

/* ── Two-step picker: tono + tamaño (catálogo con ≥2 atributos) ─────── */

/* Lista de tonos */
.wapu-sv-tones {
	display: flex;
	flex-direction: column;
	max-height: 11.75rem;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--wtds-separator) transparent;
}

.wapu-sv-tones::-webkit-scrollbar { width: .25rem; }
.wapu-sv-tones::-webkit-scrollbar-thumb { background: var(--wtds-separator); border-radius: .125rem; }

.wapu-sv-tone {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .4375rem .625rem;
	border: 0;
	border-bottom: 0.5px solid var(--wtds-separator-soft);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: background var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-sv-tone:last-child {
	border-bottom: 0;
}

.wapu-sv-tone:hover {
	background: var(--wtds-fill-3);
}

.wapu-sv-tone.is-active {
	background: var(--wtds-fill-2);
}

.wapu-sv-tone__swatch {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	border: 0.5px solid var(--wtds-separator-soft);
	display: block;
}

.wapu-sv-tone__label {
	font-family: var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-1);
	font-weight: var(--wtds-fw-medium);
	color: var(--wtds-ink);
}

/* Selector de tamaño */
.wapu-sv-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	padding: .625rem .625rem .375rem;
	border-top: 0.5px solid var(--wtds-separator-soft);
}

.wapu-sv-size {
	padding: .3125rem .875rem;
	border: 0.5px solid var(--wtds-separator);
	border-radius: var(--wtds-r-pill);
	background: transparent;
	font-family: var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-1);
	font-weight: var(--wtds-fw-medium);
	color: var(--wtds-ink);
	cursor: pointer;
	transition: background var(--wtds-dur-fast) var(--wtds-ease),
	            border-color var(--wtds-dur-fast) var(--wtds-ease),
	            color var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-sv-size:hover {
	background: var(--wtds-fill-3);
}

.wapu-sv-size.is-active {
	background: var(--wtds-accent);
	border-color: var(--wtds-accent);
	color: var(--wtds-action-ink, var(--wtds-surface));
}

/* Lista (vista de lista de variantes): el nombre tiene más espacio,
 * permitir wrap también */
.wapu-single__variant-items--list .wapu-single__variant-name {
	white-space: normal !important;
	-webkit-line-clamp: 2;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3 !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Swatches 2.0 — contract-aware visuals + semantic groups.
 * Commerce owns configuration; Theme only renders the public snapshot.
 * ════════════════════════════════════════════════════════════════════ */
.wapu-single__variant-swatch--dual {
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.wapu-single__variant-swatch--button {
	width: 100%;
	height: 100%;
	padding: 0 .375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wtds-fill-4);
	color: var(--wtds-ink);
	font-family: var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-2);
	font-weight: var(--wtds-fw-medium);
	line-height: 1;
	text-align: center;
	overflow: hidden;
}

.wapu-single__variant-swatch--button > span {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wapu-single__variant-items[data-swatch-groups="1"] {
	align-items: flex-start;
}

.wapu-single__variant-items[data-swatch-groups="1"] .wapu-single__variant-group-label {
	flex: 0 0 100%;
	width: 100%;
	margin: .375rem 0 0;
	padding-top: .5rem;
	border-top: var(--wtds-border-hairline) solid var(--wtds-separator-soft);
	font-family: var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-2);
	font-weight: var(--wtds-fw-semibold);
	letter-spacing: var(--wtds-ls-wide);
	text-transform: uppercase;
	color: var(--wtds-ink-3);
}

.wapu-single__variant-items[data-swatch-groups="1"] .wapu-single__variant-group-label:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.wapu-single__variant-item--sold-out .wapu-single__variant-swatch {
	filter: grayscale(1);
	opacity: .42;
}

.wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button {
	width: auto;
	min-width: 4.5rem;
	max-width: 8.25rem;
}
.wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button .wapu-single__variant-thumb {
	width: 100%;
	min-width: 4.5rem;
	aspect-ratio: auto;
	height: 2rem;
	border-radius: var(--wtds-r-pill);
}
.wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button .wapu-single__variant-meta {
	display: none !important;
}
.wapu-single__variant-items--list .wapu-single__variant-item--swatch-button .wapu-single__variant-thumb {
	border-radius: var(--wtds-r-pill);
}

/* ==========================================================================
   Wapuos8 · Variant chooser interaction consistency
   ========================================================================== */
.wapu-single__variation-picker .wapu-single__variant-item {
  min-height: var(--wtds-control-min);
}
.wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button {
  min-height: var(--wtds-control-min);
  align-items: center;
  justify-content: center;
}
.wapu-single__variation-picker .wapu-single__variant-item:focus-visible {
  outline: none !important;
  box-shadow: var(--wtds-shadow-focus) !important;
}


/* ========================================================================== */
/* Single Variations Box — WTDS normalization                                */
/* Progressive layer: canonical WC/Wapu variation buttons stay in the DOM.   */
/* ========================================================================== */

.wapu-sv-figma {
	--wapu-sv-tile-size: 3.5rem;
	--wapu-sv-grid-size: 3rem;
	--wapu-sv-list-media-size: var(--wtds-control-min);
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wtds-s-2);
	padding: var(--wtds-s-2) 0;
	background: transparent;
	font-family: var(--wtds-font-text);
	color: var(--wtds-on-surface);
}

/* The legacy selector remains the canonical interaction target for JS/Woo,
 * but after the enhanced component is mounted it is no longer duplicated. */
.wapu-single__variants--figma > .wapu-single__variants-header,
.wapu-single__variants--figma > .wapu-single__variation-picker {
	display: none !important;
}

.wapu-sv-figma__section {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wtds-s-2);
	min-width: 0;
}

.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__section--primary,
.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__section--primary,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__section--primary {
	gap: var(--wtds-s-3);
}

.wapu-sv-figma__heading {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wtds-s-2);
	font-size:var(--wtds-fs-footnote);
	font-weight: var(--wtds-fw-ui);
	line-height: var(--wtds-lh-snug);
	color: var(--wtds-on-surface);
}

.wapu-sv-figma__heading-title,
.wapu-sv-figma__heading-count {
	min-width: 0;
}

.wapu-sv-figma__heading-count {
	color: var(--wtds-on-surface-muted);
	text-align: right;
	white-space: nowrap;
}

.wapu-sv-figma__tools {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--wtds-s-1);
}

.wapu-sv-figma__search {
	min-height: var(--wtds-control-compact);
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--wtds-s-1);
	padding: 0 var(--wtds-s-2);
	border: var(--wtds-border-thin) solid var(--wtds-outline-soft);
	border-radius: var(--wtds-control-radius);
	background: var(--wtds-surface-container-lowest);
	box-sizing: border-box;
}

.wapu-sv-figma__search-icon {
	width: var(--wtds-icon-sm, 1rem);
	height: var(--wtds-icon-sm, 1rem);
	flex: 0 0 var(--wtds-icon-sm, 1rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wtds-on-surface-muted);
}

.wapu-sv-figma__search-icon svg {
	width: 100%;
	height: 100%;
}

.wapu-sv-figma__search input {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	font: var(--wtds-fw-ui) var(--wtds-fs-caption-1)/var(--wtds-lh-snug) var(--wtds-font-text);
	color: var(--wtds-on-surface);
}

.wapu-sv-figma__search input::placeholder {
	color: var(--wtds-placeholder);
	opacity: 1;
}

.wapu-sv-figma__view-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--wtds-space-xs, .25rem);
}

.wapu-sv-figma__view-button {
	width: var(--wtds-control-compact);
	min-width: var(--wtds-control-compact);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wapu-sv-figma__primary-option:focus-visible,
.wapu-sv-figma__secondary-option:focus-visible,
.wapu-sv-figma__search:focus-within {
	outline: none;
	box-shadow: var(--wtds-shadow-focus);
}

.wapu-sv-figma__primary-options {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wtds-s-2);
	min-width: 0;
}

.wapu-sv-figma__primary-option {
	position: relative;
	margin: 0;
	padding: 0;
	border: var(--wtds-border-thin) solid var(--wtds-outline);
	background: var(--wtds-surface-container-lowest);
	color: var(--wtds-on-surface);
	box-shadow: none;
	font: inherit;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color var(--wtds-dur-fast) var(--wtds-ease), background-color var(--wtds-dur-fast) var(--wtds-ease), opacity var(--wtds-dur-fast) var(--wtds-ease), transform var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-sv-figma__primary-option:hover:not(:disabled) {
	border-color: var(--wtds-state-hover-border);
	background: var(--wtds-state-hover-bg);
}

.wapu-sv-figma__primary-option.is-active,
.wapu-sv-figma__primary-option[aria-selected="true"] {
	/* V28 P1: one selected treatment only; focus remains separate. */
	border-color: var(--wtds-state-selected-border);
	box-shadow: none;
}

.wapu-sv-figma__primary-option:disabled {
	cursor: not-allowed;
	opacity: var(--wtds-state-disabled-opacity, .42);
	filter: grayscale(1);
}

.wapu-sv-figma__option-visual {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: inherit;
	overflow: hidden;
}

.wapu-sv-figma__option-visual.is-text {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wtds-s-1);
	font-size:var(--wtds-fs-caption-2);
	line-height: var(--wtds-lh-snug);
	font-weight: var(--wtds-fw-ui);
	text-align: center;
	background: var(--wtds-surface-container);
}

/* Primary visual attribute — compact, prominent, but aligned to Wapuos8 density. */
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option {
	width: var(--wapu-sv-tile-size);
	height: var(--wapu-sv-tile-size);
	flex: 0 0 var(--wapu-sv-tile-size);
	border-radius: 50%;
	overflow: hidden;
}

.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__option-name,
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__offer-badge,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__option-name,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__offer-badge {
	display: none;
}

/* Large catalogs use the default-control scale to fit more options comfortably. */
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option {
	width: var(--wapu-sv-grid-size);
	height: var(--wapu-sv-grid-size);
	flex: 0 0 var(--wapu-sv-grid-size);
	border-radius: 50%;
	overflow: hidden;
}

/* List / offer-list keep the media compact and the text readable. */
.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__primary-options,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__primary-options {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wtds-s-1);
}

.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__primary-option,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__primary-option {
	width: 100%;
	min-height: calc(var(--wtds-control-large) + var(--wtds-s-2));
	padding: var(--wtds-s-1);
	border-radius: var(--wtds-r-md);
	display: flex;
	align-items: center;
	gap: var(--wtds-s-1);
	text-align: left;
	overflow: hidden;
}

.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__primary-option {
	justify-content: flex-start;
}

.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__option-visual,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__option-visual {
	width: var(--wapu-sv-list-media-size);
	height: var(--wapu-sv-list-media-size);
	flex: 0 0 var(--wapu-sv-list-media-size);
	border-radius: var(--wtds-r-sm);
}

.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__option-name,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__option-name {
	min-width: 0;
	flex: 1 1 auto;
	display: block;
	font-size:var(--wtds-fs-subhead);
	font-weight: var(--wtds-fw-regular);
	line-height: var(--wtds-lh-snug);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--wtds-on-surface);
}

.wapu-sv-figma__offer-badge {
	min-height: 1.5rem;
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0 var(--wtds-s-1);
	border-radius: var(--wtds-r-pill);
	background: var(--wtds-danger);
	color: var(--wtds-danger-ink);
	font-size:var(--wtds-fs-caption-2);
	font-weight: var(--wtds-fw-emphasis);
	line-height: var(--wtds-lh-snug);
	white-space: nowrap;
}

.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__offer-badge {
	display: inline-flex;
}

.wapu-sv-figma__secondary-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wtds-s-1);
}

.wapu-sv-figma__secondary-option {
	min-height: var(--wtds-control-compact);
	padding: 8px;
	border: var(--wtds-border-thin) solid var(--wtds-outline-soft);
	border-radius: 16px;
	background: var(--wtds-surface-container-lowest);
	color: var(--wtds-on-surface);
	box-shadow: none;
	font: var(--wtds-fw-ui) var(--wtds-fs-caption-1)/var(--wtds-lh-snug) var(--wtds-font-text);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--wtds-dur-fast) var(--wtds-ease), background-color var(--wtds-dur-fast) var(--wtds-ease), color var(--wtds-dur-fast) var(--wtds-ease), opacity var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-sv-figma__secondary-option:hover:not(:disabled) {
	border-color: var(--wtds-state-hover-border);
	background: var(--wtds-state-hover-bg);
}

.wapu-sv-figma__secondary-option.is-active,
.wapu-sv-figma__secondary-option[aria-selected="true"] {
	border-color: var(--wtds-state-selected-border);
	background: var(--wtds-state-selected-bg);
	color: var(--wtds-state-selected-text);
}

.wapu-sv-figma__secondary-option:disabled {
	cursor: not-allowed;
	opacity: var(--wtds-state-disabled-opacity, .36);
	text-decoration: line-through;
}

.wapu-sv-figma [hidden] {
	display: none !important;
}

.wapu-sv-figma__primary-option.is-sold-out:not(:disabled) {
	opacity: .62;
}

.wapu-sv-figma__primary-option.is-sold-out:not(:disabled)::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, transparent 48.5%, color-mix(in srgb, var(--wtds-on-surface-muted) 72%, transparent) 49.5%, color-mix(in srgb, var(--wtds-on-surface-muted) 72%, transparent) 50.5%, transparent 51.5%);
	pointer-events: none;
}

@media (max-width: 47.9375rem) {
	.wapu-sv-figma {
		--wapu-sv-tile-size: 3.25rem;
		--wapu-sv-grid-size: 2.75rem;
		gap: var(--wtds-s-2);
	}

	.wapu-sv-figma__tools,
	.wapu-sv-figma__primary-options {
		gap: var(--wtds-s-1);
	}

	.wapu-sv-figma__search {
		padding-inline: var(--wtds-s-1);
	}
}

@media (pointer: coarse) {
	.wapu-sv-figma__secondary-option {
		min-width: var(--wtds-hit-target);
		min-height: var(--wtds-hit-target);
	}
	.wapu-sv-figma__view-button{
		min-width: var(--wtds-hit-target);
	}
}

/* 7.7.45 · Variation combination deep links */
.wapu-sv-figma__combination-option {
	text-decoration: none;
}

.wapu-sv-figma__combination-option[aria-disabled="true"] {
	cursor: pointer;
	opacity: var(--wtds-state-disabled-opacity, .42);
	filter: grayscale(1);
}

.wapu-sv-figma__combination-option[aria-disabled="true"]:hover {
	border-color: var(--wtds-outline);
	background: var(--wtds-surface-container-lowest);
}


/* 7.7.87 · Variation visual proportions.
 * Current variation contracts, availability and combination logic stay intact. This layer only
 * restores the larger, calmer option rhythm from the earlier Theme. */
@media (min-width: 48rem) {
  .wapu-single__variation-picker--compact #wapu-variant-items.wapu-single__variant-items--grid {
    gap: 1rem .75rem !important;
  }

  .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item,
  .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-meta {
    width: 7.5rem;
    min-width: 7.5rem;
  }

  .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-name {
    font-size:var(--wtds-fs-caption-2) !important;
    font-weight: var(--wtds-fw-medium);
    line-height: var(--wtds-lh-snug) !important;
  }

  .wapu-sv-figma {
    --wapu-sv-tile-size: 3.875rem;
    --wapu-sv-grid-size: 3.5rem;
    --wapu-sv-list-media-size: 2.75rem;
    gap: var(--wtds-s-3);
  }

  .wapu-sv-figma__section,
  .wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__section--primary,
  .wapu-sv-figma[data-mode="list"] .wapu-sv-figma__section--primary,
  .wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__section--primary {
    gap: var(--wtds-s-2);
  }

  .wapu-sv-figma__heading {
    font-size:var(--wtds-fs-footnote);
    font-weight: var(--wtds-fw-semibold);
  }

  .wapu-sv-figma__primary-options {
    gap: .75rem;
  }

  .wapu-sv-figma__primary-option:hover:not(:disabled) {
    transform: translateY(-.125rem);
  }

  .wapu-sv-figma[data-mode="list"] .wapu-sv-figma__primary-option,
  .wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__primary-option {
    min-height: 3.5rem;
    padding: .625rem .75rem;
    gap: .75rem;
  }

  .wapu-sv-figma[data-mode="list"] .wapu-sv-figma__option-name,
  .wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__option-name {
    font-size:var(--wtds-fs-subhead);
  }
}

/* 7.7.89 · Variation continuity layer.
 * Presentation only: the canonical variation bus remains the sole source of truth. */
.wapu-single .wapu-single__variant-item,
.wapu-single .wapu-single__variant-thumb {
	transition:
		transform var(--wtds-dur-fast) var(--wtds-ease),
		border-color var(--wtds-dur-fast) var(--wtds-ease),
		background-color var(--wtds-dur-fast) var(--wtds-ease),
		box-shadow var(--wtds-dur-fast) var(--wtds-ease),
		opacity var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-single .wapu-single__variant-item[aria-selected="true"],
.wapu-single .wapu-single__variant-item--selected {
	transform: translateY(-.0625rem);
}

.wapu-single.is-variation-settling .wapu-single__price,
.wapu-single.is-variation-settling .wapu-single__availability,
.wapu-single.is-variation-settling .wapu-single__fulfillment,
.wapu-single.is-variation-settling #wapu-selected-name,
.wapu-single.is-variation-settling #wapu-selected-price,
.wapu-single.is-variation-settling #wapu-selected-thumb,
.wapu-single.is-variation-settling [data-wapu-vg-main],
.wapu-single.is-variation-settling #wapu-main-img {
	animation: wapu-variation-settle .32s var(--wtds-ease) both;
}

@keyframes wapu-variation-settle {
	0% { opacity: .74; transform: translateY(.25rem) scale(.995); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.wapu-single .wapu-single__variant-item,
	.wapu-single .wapu-single__variant-thumb {
		transition: none !important;
	}
	.wapu-single.is-variation-settling .wapu-single__price,
	.wapu-single.is-variation-settling .wapu-single__availability,
	.wapu-single.is-variation-settling .wapu-single__fulfillment,
	.wapu-single.is-variation-settling #wapu-selected-name,
	.wapu-single.is-variation-settling #wapu-selected-price,
	.wapu-single.is-variation-settling #wapu-selected-thumb,
	.wapu-single.is-variation-settling [data-wapu-vg-main],
	.wapu-single.is-variation-settling #wapu-main-img {
		animation: none !important;
	}
}

/* 7.7.114 · Classic visual swatch rings.
 * Restores the visual treatment from the earlier Theme without changing the
 * current variation model, swatch semantics, availability or selection bus.
 * Color/dual/image swatches use a white outer circle, soft outline/shadow and
 * the double-accent selected ring. Text/button swatches keep their current UI. */
.wapu-sv-figma {
	--wapu-sv-tile-size: 3.875rem;
	--wapu-sv-grid-size: 3.875rem;
}

.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)),
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)) {
	padding: .3125rem;
	overflow: visible;
	border: 1px solid var(--wtds-separator-soft);
	background: var(--wtds-surface);
	box-shadow: 0 .625rem 1.5rem var(--wtds-shadow-color-faint);
}

.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)) .wapu-sv-figma__option-visual,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)) .wapu-sv-figma__option-visual {
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--wtds-shadow-color-soft);
	overflow: hidden;
}

.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)):hover:not(:disabled),
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)):hover:not(:disabled) {
	border-color: var(--wtds-ink-4);
	background: var(--wtds-surface);
	transform: translateY(-.0625rem);
}

.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)).is-active,
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text))[aria-selected="true"],
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)).is-active,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text))[aria-selected="true"] {
	border-color: var(--wtds-accent);
	box-shadow: none;
}

@media (max-width: 47.9375rem) {
	.wapu-sv-figma {
		--wapu-sv-tile-size: 3.375rem;
		--wapu-sv-grid-size: 3.375rem;
	}
}

/* 7.7.140 · variation badge indicator + unclipped visual swatches. */
.wapu-sv-figma__primary-options {
	box-sizing: border-box;
	padding: .375rem;
	overflow: visible;
}

.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)).is-active,
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text))[aria-selected="true"],
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)).is-active,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text))[aria-selected="true"] {
	border-color: var(--wtds-accent);
	box-shadow: none !important;
}

.wapu-sv-figma__primary-option:has(.wapu-sv-figma__badge-dot),
.wapu-single__variant-item:has(.wapu-single__variant-badge-dot) {
	overflow: visible !important;
}

.wapu-sv-figma__badge-dot,
.wapu-single__variant-badge-dot {
	position: absolute;
	top: -.125rem;
	right: -.125rem;
	z-index: 5;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--wtds-action);
	box-shadow: 0 0 0 .125rem var(--wtds-surface);
}

.wapu-sv-figma__badge-dot.is-offer {
	background: var(--wtds-danger);
}

.wapu-single__variant-thumb {
	position: relative;
}

.wapu-sv-figma__badge-dot::after,
.wapu-single__variant-badge-dot::after {
	content: attr(data-badge-tooltip);
	position: absolute;
	right: -.25rem;
	bottom: calc(100% + .5rem);
	width: max-content;
	max-width: 13rem;
	padding: .375rem .625rem;
	border-radius: var(--wtds-r-sm);
	background: var(--wtds-surface-inverse);
	color: var(--wtds-surface);
	font-family: var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-2);
	font-weight: var(--wtds-fw-medium);
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: var(--wtds-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(.125rem);
	transition: opacity var(--wtds-dur-fast) var(--wtds-ease), transform var(--wtds-dur-fast) var(--wtds-ease), visibility var(--wtds-dur-fast) var(--wtds-ease);
	pointer-events: none;
}

.wapu-sv-figma__badge-dot::before,
.wapu-single__variant-badge-dot::before {
	content: "";
	position: absolute;
	right: .0625rem;
	bottom: calc(100% + .1875rem);
	border-left: .25rem solid transparent;
	border-right: .25rem solid transparent;
	border-top: .3125rem solid var(--wtds-surface-inverse);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wtds-dur-fast) var(--wtds-ease), visibility var(--wtds-dur-fast) var(--wtds-ease);
	pointer-events: none;
}

@media (hover: hover) {
	.wapu-sv-figma__badge-dot:hover::after,
	.wapu-sv-figma__badge-dot:hover::before,
	.wapu-single__variant-badge-dot:hover::after,
	.wapu-single__variant-badge-dot:hover::before,
	.wapu-sv-figma__primary-option:focus-visible .wapu-sv-figma__badge-dot::after,
	.wapu-sv-figma__primary-option:focus-visible .wapu-sv-figma__badge-dot::before,
	.wapu-single__variant-item:focus-visible .wapu-single__variant-badge-dot::after,
	.wapu-single__variant-item:focus-visible .wapu-single__variant-badge-dot::before {
		opacity: 1;
		visibility: visible;
	}
	.wapu-sv-figma__badge-dot:hover::after,
	.wapu-single__variant-badge-dot:hover::after,
	.wapu-sv-figma__primary-option:focus-visible .wapu-sv-figma__badge-dot::after,
	.wapu-single__variant-item:focus-visible .wapu-single__variant-badge-dot::after {
		transform: translateY(0);
	}
}
.wapu-sv-figma__primary-option:focus-visible .wapu-sv-figma__badge-dot::before,
.wapu-sv-figma__primary-option:focus-visible .wapu-sv-figma__badge-dot::after {
	opacity: 1;
	visibility: visible;
}
.wapu-sv-figma__primary-option:focus-visible .wapu-sv-figma__badge-dot::after {
	transform: translateY(0);
}

@media (max-width: 47.9375rem) {
	.wapu-sv-figma__primary-options {
		padding: .3125rem;
	}
	.wapu-sv-figma__badge-dot,
	.wapu-single__variant-badge-dot {
		top: -.0625rem;
		right: -.0625rem;
	}
}

/* 7.7.144 · V6 stable variation selection: visual state only, zero layout shift. */
.wapu-single .wapu-single-swatch,
.wapu-single .wapu-single-swatch:hover,
.wapu-single .wapu-single-swatch:focus-visible,
.wapu-single .wapu-single-swatch.is-active {
	transform: none !important;
}
.wapu-single .wapu-single-swatch__media,
.wapu-single .wapu-single-swatch.is-active .wapu-single-swatch__media {
	transform: none !important;
	transition: box-shadow var(--wtds-dur-fast) var(--wtds-ease), border-color var(--wtds-dur-fast) var(--wtds-ease), opacity var(--wtds-dur-fast) var(--wtds-ease);
}
.wapu-single .wapu-single__variant-item,
.wapu-single .wapu-single__variant-thumb,
.wapu-single .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-thumb {
	transform: none !important;
	transition: border-color var(--wtds-dur-fast) var(--wtds-ease), background-color var(--wtds-dur-fast) var(--wtds-ease), box-shadow var(--wtds-dur-fast) var(--wtds-ease), opacity var(--wtds-dur-fast) var(--wtds-ease) !important;
}
.wapu-single .wapu-single__variant-item:hover,
.wapu-single .wapu-single__variant-item:focus-visible,
.wapu-single .wapu-single__variant-item[aria-selected="true"],
.wapu-single .wapu-single__variant-item--selected,
.wapu-single .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:hover .wapu-single__variant-thumb {
	transform: none !important;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option,
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option:hover:not(:disabled),
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option:focus-visible,
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option.is-active,
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option[aria-selected="true"] {
	transform: none !important;
}


/* 7.7.148 · V13 variation control dimensions — presentation only, logic/states unchanged. */
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:not(.wapu-single__variant-item--swatch-button){width:auto;min-width:2rem;}
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:not(.wapu-single__variant-item--swatch-button) .wapu-single__variant-thumb{width:2rem!important;height:2rem!important;min-width:2rem!important;min-height:2rem!important;padding:.1875rem;}
.wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button{min-width:auto;max-width:none;min-height:2.5rem;}
.wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button .wapu-single__variant-thumb{width:auto;min-width:0;height:2.5rem;min-height:2.5rem;padding:.5rem 1rem;border-radius:var(--wtds-r-pill);}
.wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button .wapu-single__variant-swatch--button{width:auto;min-width:0;height:100%;padding:0;overflow:visible;}
@media(pointer:coarse){
 .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:not(.wapu-single__variant-item--swatch-button){min-width:2.75rem;min-height:2.75rem;display:flex;align-items:center;justify-content:center;}
 .wapu-single__variation-picker--compact .wapu-single__variant-item--swatch-button{min-height:2.75rem;}
}


/* V28 · tooltip rendering moved to the canonical WTDS body portal.
   Disable the legacy pseudo tooltip to prevent duplicate/clipped labels. */
.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]::before,
.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]::after {
	display: none !important;
}

/* V28 · canonical variation selection + unclipped contextual tooltip. */
.wapu-single__variation-picker,
.wapu-single__variation-picker--compact,
.wapu-sv-figma,
.wapu-sv-figma__primary-options,
.wapu-single__variant-items,
.wapu-single__variant-items--grid {
	overflow: visible !important;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option[aria-selected="true"],
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option.is-active,
.wapu-single .wapu-single__variant-item[aria-selected="true"],
.wapu-single .wapu-single__variant-item--selected {
	outline: 0 !important;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-option:focus-visible,
.wapu-single .wapu-single__variant-item:focus-visible {
	outline: 2px solid var(--wtds-action) !important;
	outline-offset: 3px;
}
.wapu-sv-figma__badge-dot::after,
.wapu-single__variant-badge-dot::after {
	z-index: 50;
}


/* V28 P1 · canonical selected state — Single + Quick View.
   One selected treatment (accent border), no glow/double ring. */
.wapu-single__variation-picker--compact .wapu-single__variant-item[aria-selected="true"] .wapu-single__variant-thumb,
.wapu-single__variation-picker--compact .wapu-single__variant-item--selected .wapu-single__variant-thumb {
	border-color: var(--wtds-accent) !important;
	box-shadow: none !important;
}

.wapu-sv-figma__primary-option.is-active,
.wapu-sv-figma__primary-option[aria-selected="true"] {
	border-color: var(--wtds-state-selected-border) !important;
	box-shadow: none !important;
}

/* Focus is intentionally separate from selected state. */
.wapu-single__variation-picker .wapu-single__variant-item:focus-visible {
	outline: 2px solid var(--wtds-action) !important;
	outline-offset: 3px;
	box-shadow: none !important;
}

/* V37: the shared visual swatch stays square inside the Quick View carousel. */
.wapu-archive-qv__canonical-selector .wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.is-text)),
.wapu-archive-qv__canonical-selector .wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.is-text)),
.wapu-archive-qv__canonical-selector .wapu-sv-figma[data-mode="carousel"] .wapu-sv-figma__primary-option:not(:has(.is-text)) {
	box-sizing: border-box;
	inline-size: var(--wapu-sv-tile-size);
	block-size: var(--wapu-sv-tile-size);
	min-inline-size: var(--wapu-sv-tile-size);
	min-block-size: var(--wapu-sv-tile-size);
	flex: 0 0 var(--wapu-sv-tile-size);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

/* Parent theme: restore the roomy swatches from the supplied pre-Merlot theme.
 * The current selector and variation state remain canonical. The old control
 * had a 4.875rem tile with a 3.875rem visual (4.25/3.375rem on mobile). */
body.wp-theme-wapu-ecommerce-theme :is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma {
	--wapu-sv-tile-size: 4.875rem;
	--wapu-sv-grid-size: 4.875rem;
}
body.wp-theme-wapu-ecommerce-theme :is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.is-text)),
body.wp-theme-wapu-ecommerce-theme :is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.is-text)) {
	padding: .5rem;
}
body.wp-theme-wapu-ecommerce-theme .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:not(.wapu-single__variant-item--swatch-button) {
	width: 4.875rem;
	min-width: 4.875rem;
}
body.wp-theme-wapu-ecommerce-theme .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:not(.wapu-single__variant-item--swatch-button) .wapu-single__variant-thumb {
	width: 3.875rem !important;
	height: 3.875rem !important;
	min-width: 3.875rem !important;
	min-height: 3.875rem !important;
	padding: .3125rem;
}
@media (max-width: 47.9375rem) {
	body.wp-theme-wapu-ecommerce-theme :is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma {
		--wapu-sv-tile-size: 4.25rem;
		--wapu-sv-grid-size: 4.25rem;
	}
	body.wp-theme-wapu-ecommerce-theme .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:not(.wapu-single__variant-item--swatch-button) {
		width: 4.25rem;
		min-width: 4.25rem;
	}
	body.wp-theme-wapu-ecommerce-theme .wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item:not(.wapu-single__variant-item--swatch-button) .wapu-single__variant-thumb {
		width: 3.375rem !important;
		height: 3.375rem !important;
		min-width: 3.375rem !important;
		min-height: 3.375rem !important;
	}
}
.wapu-archive-qv__canonical-selector .wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__option-visual:not(.is-text),
.wapu-archive-qv__canonical-selector .wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__option-visual:not(.is-text),
.wapu-archive-qv__canonical-selector .wapu-sv-figma[data-mode="carousel"] .wapu-sv-figma__option-visual:not(.is-text) {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-size: cover;
}

/* Text choices have no visual swatch: show their full label as the control. */
.wapu-sv-figma__primary-option.is-text-only .wapu-sv-figma__option-visual.is-text {
	display: none;
}
.wapu-sv-figma__primary-option.is-text-only .wapu-sv-figma__option-name {
	font-size:var(--wtds-fs-footnote) !important;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
	text-overflow: clip;
}
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option.is-text-only,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option.is-text-only {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-height: var(--wtds-control-min);
	max-width: 100%;
	flex: 0 1 auto;
	padding: .5rem .25rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}
.wapu-sv-figma__primary-option.is-text-only[aria-selected="true"] .wapu-sv-figma__option-name {
	text-decoration: underline;
	text-underline-offset: .25em;
}
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option.is-text-only .wapu-sv-figma__option-name,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option.is-text-only .wapu-sv-figma__option-name {
	display: block;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
}
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid .wapu-single__variant-item--text-only {
	width: auto;
	min-width: 0;
	max-width: 100%;
	min-height: var(--wtds-control-min);
	padding: .5rem .25rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}
.wapu-single__variation-picker--compact .wapu-single__variant-item--text-only .wapu-single__variant-meta {
	display: block !important;
	width: auto;
	min-width: 0;
	text-align: center;
}
.wapu-single__variation-picker--compact .wapu-single__variant-item--text-only .wapu-single__variant-name {
	display: block !important;
	font-size:var(--wtds-fs-footnote) !important;
	letter-spacing: normal;
	text-transform: none;
	-webkit-line-clamp: unset;
	white-space: normal !important;
	overflow: visible;
	overflow-wrap: anywhere;
}
.wapu-single__variation-picker--compact .wapu-single__variant-item--text-only[aria-selected="true"] .wapu-single__variant-name {
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* A catalog with text-only choices reads as a simple selection list. */
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__primary-options:has(> .is-text-only):not(:has(> :not(.is-text-only))),
.wapu-single__variant-items--grid:has(> .wapu-single__variant-item--text-only):not(:has(> .wapu-single__variant-item:not(.wapu-single__variant-item--text-only))) {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma .wapu-sv-figma__primary-options:has(> .is-text-only):not(:has(> :not(.is-text-only))) > .is-text-only,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid:has(> .wapu-single__variant-item--text-only):not(:has(> .wapu-single__variant-item:not(.wapu-single__variant-item--text-only))) > .wapu-single__variant-item--text-only {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 51px;
	margin: 0;
	padding: 8px 6px !important;
	border: 0 !important;
	border-bottom: 1px solid #e8e8e8 !important;
	border-radius: 0 !important;
	background: transparent;
	text-align: left;
	transform: none;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma .wapu-sv-figma__primary-options:has(> .is-text-only):not(:has(> :not(.is-text-only))) > .is-text-only:last-child,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid:has(> .wapu-single__variant-item--text-only):not(:has(> .wapu-single__variant-item:not(.wapu-single__variant-item--text-only))) > .wapu-single__variant-item--text-only:last-child {
	border-bottom: 0 !important;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma .wapu-sv-figma__primary-options:has(> .is-text-only):not(:has(> :not(.is-text-only))) > .is-text-only:is(:hover:not(:disabled), .is-active, [aria-selected="true"]),
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid:has(> .wapu-single__variant-item--text-only):not(:has(> .wapu-single__variant-item:not(.wapu-single__variant-item--text-only))) > .wapu-single__variant-item--text-only:is(:hover:not(:disabled), .wapu-single__variant-item--selected, [aria-selected="true"]) {
	background: #f5f5f5 !important;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma .wapu-sv-figma__primary-options:has(> .is-text-only):not(:has(> :not(.is-text-only))) .wapu-sv-figma__option-name,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid:has(> .wapu-single__variant-item--text-only):not(:has(> .wapu-single__variant-item:not(.wapu-single__variant-item--text-only))) .wapu-single__variant-meta,
.wapu-single__variation-picker--compact .wapu-single__variant-items--grid:has(> .wapu-single__variant-item--text-only):not(:has(> .wapu-single__variant-item:not(.wapu-single__variant-item--text-only))) .wapu-single__variant-name {
	width: auto;
	min-width: 0;
	text-align: left;
	text-decoration: none;
}

/* Keep an offer/special indicator beside its variation label, inside the choice. */
.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__option-name,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__option-name,
.wapu-sv-figma__primary-option.is-text-only .wapu-sv-figma__option-name {
	order: 1;
	flex: 0 1 auto;
}
.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__badge-dot,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__badge-dot,
.wapu-sv-figma__primary-option.is-text-only .wapu-sv-figma__badge-dot {
	position: relative;
	top: auto;
	right: auto;
	order: 2;
	flex: 0 0 .5rem;
	align-self: center;
	margin-left: .25rem;
}
.wapu-sv-figma[data-mode="list"] .wapu-sv-figma__offer-badge,
.wapu-sv-figma[data-mode="offer-list"] .wapu-sv-figma__offer-badge {
	order: 3;
}
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only) .wapu-sv-figma__badge-dot,
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only) .wapu-sv-figma__badge-dot {
	top: .25rem;
	right: .25rem;
}
.wapu-single__variation-picker .wapu-single__variant-meta {
	display: inline-flex !important;
	align-items: center;
	gap: .25rem;
}
.wapu-single__variation-picker .wapu-single__variant-name {
	min-width: 0;
	flex: 0 1 auto;
}
.wapu-single__variation-picker .wapu-single__variant-badge-dot {
	position: relative;
	top: auto;
	right: auto;
	flex: 0 0 .5rem;
	align-self: center;
}

/* ========================================================================== */
/* 7.7.161 · Canonical Single variations — MERIT-inspired interaction         */
/* Theme-owned presentation only. Woo/Wapu keep owning variation truth.       */
/* ========================================================================== */
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit {
	gap: 12px;
	padding-block: 0;
}

:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit .wapu-sv-figma__section--primary {
	gap: 12px;
}

.wapu-sv-merit__summary {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--wtds-outline-soft);
	border-radius: 0;
	background: transparent;
	color: var(--wtds-on-surface);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	text-align: left;
	cursor: pointer;
}

.wapu-sv-merit__summary:hover {
	background: transparent;
}

.wapu-sv-merit__summary:focus-visible {
	outline: 2px solid var(--wtds-action);
	outline-offset: 3px;
}

.wapu-sv-merit__summary-copy {
	min-width: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
	font-family: var(--wtds-font-text);
	font-size:var(--wtds-fs-footnote);
	line-height: 1.35;
}

.wapu-sv-merit__summary-name {
	font-weight: var(--wtds-fw-semibold);
	color: var(--wtds-on-surface);
}

.wapu-sv-merit__summary-separator,
.wapu-sv-merit__summary-description {
	font-weight: var(--wtds-fw-regular);
	color: var(--wtds-on-surface-muted);
}

.wapu-sv-merit__summary-chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-sv-merit__summary-chevron svg {
	width: 100%;
	height: 100%;
}

.wapu-sv-figma--merit.is-merit-list-open .wapu-sv-merit__summary-chevron {
	transform: rotate(180deg);
}

/* Default view: compact swatches, no card-like borders. */
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit .wapu-sv-figma__primary-options {
	gap: 8px !important;
	align-items: center;
}

:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only),
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only) {
	box-sizing: border-box;
	inline-size: 34px !important;
	block-size: 34px !important;
	min-inline-size: 34px !important;
	min-block-size: 34px !important;
	flex: 0 0 34px !important;
	padding: 3px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	overflow: visible !important;
	box-shadow: none !important;
}

:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only) .wapu-sv-figma__option-visual,
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only) .wapu-sv-figma__option-visual {
	inline-size: 28px !important;
	block-size: 28px !important;
	border-radius: 50% !important;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wtds-on-surface) 12%, transparent);
	background-size: cover;
}

:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only):hover:not(:disabled),
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only):hover:not(:disabled) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wtds-on-surface) 45%, transparent) !important;
}

:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only).is-active,
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only)[aria-selected="true"],
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only).is-active,
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only)[aria-selected="true"] {
	border: 0 !important;
	background: transparent !important;
	box-shadow: 0 0 0 1.5px var(--wtds-on-surface) !important;
}

:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only):focus-visible,
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only):focus-visible {
	outline: 2px solid var(--wtds-action) !important;
	outline-offset: 3px;
	box-shadow: none !important;
}

/* Expanded list view from the selected-summary control. */
.wapu-sv-merit__list {
	width: 100%;
	max-height: min(360px, 52vh);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
}

.wapu-sv-merit__list-row {
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--wtds-outline-soft);
	border-radius: 0;
	background: transparent;
	color: var(--wtds-on-surface);
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	text-align: left;
	cursor: pointer;
}

.wapu-sv-merit__list-row:last-child {
	border-bottom: 0;
}

.wapu-sv-merit__list-row:hover:not(:disabled),
.wapu-sv-merit__list-row.is-active,
.wapu-sv-merit__list-row[aria-selected="true"] {
	background: var(--wtds-state-hover-bg);
}

.wapu-sv-merit__list-row:focus-visible {
	outline: 2px solid var(--wtds-action);
	outline-offset: -2px;
}

.wapu-sv-merit__list-row:disabled {
	cursor: not-allowed;
	opacity: var(--wtds-state-disabled-opacity, .42);
}

.wapu-sv-merit__list-swatch {
	box-sizing: border-box;
	inline-size: 28px !important;
	block-size: 28px !important;
	border-radius: 50% !important;
	background-size: cover;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wtds-on-surface) 12%, transparent);
}

.wapu-sv-merit__list-row.is-text-only {
	grid-template-columns: minmax(0, 1fr);
}

.wapu-sv-merit__list-row.is-text-only .wapu-sv-merit__list-swatch {
	display: none;
}

.wapu-sv-merit__list-info {
	min-width: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 2px;
	font-family: var(--wtds-font-text);
}

.wapu-sv-merit__list-name {
	font-size:var(--wtds-fs-footnote);
	font-weight: var(--wtds-fw-semibold);
	line-height: 1.35;
}

.wapu-sv-merit__list-description {
	min-width: 0;
	font-size:var(--wtds-fs-footnote);
	font-weight: var(--wtds-fw-regular);
	line-height: 1.35;
	color: var(--wtds-on-surface-muted);
}

/* Text-only attributes still inherit the canonical Wapu text-choice pattern. */
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit .wapu-sv-figma__primary-option.is-text-only {
	border: 0 !important;
	background: transparent !important;
}

@media (max-width: 47.9375rem) {
	.wapu-sv-merit__summary {
		min-height: 42px;
		padding-block: 9px;
	}

	:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only),
	:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only) {
		inline-size: 32px !important;
		block-size: 32px !important;
		min-inline-size: 32px !important;
		min-block-size: 32px !important;
		flex-basis: 32px !important;
		padding: 3px !important;
	}

	:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="tiles"] .wapu-sv-figma__primary-option:not(.is-text-only) .wapu-sv-figma__option-visual,
	:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma--merit[data-mode="grid"] .wapu-sv-figma__primary-option:not(.is-text-only) .wapu-sv-figma__option-visual {
		inline-size: 26px !important;
		block-size: 26px !important;
	}
}

/* 7.7.166 · Single variations use the Cart Editor rows; no second visual selector. */
.wapu-single .wapu-single__variants--cart-editor {
	display: grid;
	gap: .5rem;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variants-header.wapu-cart-edit-modal__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: 0;
	font-family: var(--wtds-font-system-owned);
	font-size:var(--wtds-fs-caption-2);
	font-weight: var(--wtds-fw-medium);
	line-height:var(--wtds-lh-base);
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variants-label-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variants-label {
	order: -1;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__section-count {
	font-family: var(--wtds-font-system-owned);
	font-size:var(--wtds-fs-caption-1);
	font-weight: var(--wtds-fw-regular);
	line-height:var(--wtds-lh-base);
	text-transform: uppercase;
	color: var(--wtds-ink-3);
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variation-picker {
	padding: 0;
	border: 0;
	background: transparent;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__option-list.has-internal-scroll {
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	max-height: calc(2.75rem * 4) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	border: var(--wtds-border-thin) solid var(--wtds-surface-container-high) !important;
	border-radius: var(--wtds-r-md) !important;
	background: var(--wtds-surface) !important;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 2.75rem;
	padding: .5rem;
	border: 0;
	border-bottom: var(--wtds-border-thin) solid var(--wtds-surface-container-high) !important;
	border-radius: 0;
	background: var(--wtds-surface);
	gap: 1rem;
	text-align: left;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant:last-child {
	border-bottom: 0 !important;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant:hover:not(:disabled) {
	background: var(--wtds-surface-container-low);
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant:is(.wapu-single__variant-item--selected, [aria-selected="true"]) {
	background: var(--wtds-action-soft) !important;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant-swatch {
	width: 1.75rem !important;
	height: 1.75rem !important;
	min-width: 1.75rem;
	flex: 0 0 1.75rem;
	border: .125rem solid var(--wtds-outline-soft) !important;
	border-radius: var(--wtds-r-xs);
	box-shadow: var(--wtds-quantity-step-shadow) !important;
	overflow: hidden;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant:is(.wapu-single__variant-item--selected, [aria-selected="true"]) .wapu-cart-edit-modal__variant-swatch {
	border-color: var(--wtds-action) !important;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant-name {
	font-family: var(--wtds-font-system-owned);
	font-size:var(--wtds-fs-callout) !important;
	font-weight: var(--wtds-fw-medium);
	line-height:var(--wtds-lh-base);
	color: var(--wtds-ink-2);
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-meta {
	min-width: 0;
	flex: 1 1 auto;
}


.wapu-single .wapu-single__variants--cart-editor #wapu-variant-items.wapu-cart-edit-modal__option-list.has-internal-scroll {
	padding: 0 !important;
	border: var(--wtds-border-thin) solid var(--wtds-surface-container-high) !important;
	border-radius: var(--wtds-r-md) !important;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant .wapu-single__variant-swatch {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	border-radius: inherit;
	box-shadow: none !important;
}


/* 7.7.176 · Single variation rhythm: count + options, 20px visual swatch. */
.wapu-single .wapu-single__variants--cart-editor {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	min-width: 0;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-count--single {
	display: block;
	margin: 0;
	font-family: var(--wtds-font-system-owned);
	font-size:var(--wtds-fs-caption-1);
	font-weight: var(--wtds-fw-regular);
	line-height: 1.35;
	color: var(--wtds-ink-3);
}
.wapu-single .wapu-single__variants--cart-editor .wapu-cart-edit-modal__variant-swatch,
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb {
	box-sizing: border-box;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	flex: 0 0 20px !important;
	border-radius: 50% !important;
	overflow: hidden;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch,
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb img {
	width: 20px !important;
	height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	border-radius: 50% !important;
	object-fit: cover;
}
.wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--neutral {
	display: block;
	background: var(--wtds-fill-3);
	border: 1px solid var(--wtds-separator-soft);
}


/* 7.7.178 · Canonical image swatches always fill their circular frame in every PDP renderer/state. */
.wapu-single .wapu-single__variant-thumb:has(> .wapu-single__variant-swatch--image),
.wapu-single .wapu-cart-edit-modal__variant-swatch:has(> .wapu-single__variant-swatch--image) {
	padding: 0 !important;
	border-radius: 50% !important;
	overflow: hidden !important;
}
.wapu-single .wapu-single__variant-swatch--image,
.wapu-single .wapu-single__variant-swatch--image > img,
.wapu-single .wapu-single__variant-thumb > img,
.wapu-single .wapu-cart-edit-modal__variant-swatch > img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: inherit !important;
	object-fit: cover !important;
	object-position: center !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
:is(.wapu-single, .wapu-archive-qv__canonical-selector) .wapu-sv-figma__option-visual:not(.is-text),
.wapu-archive-qv__canonical-selector .wapu-sv-figma__option-visual:not(.is-text) {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* 7.7.186 · Canonical variation deep links.
 * Complete purchasable combinations are real anchors, while preserving the
 * existing selector appearance. */
a.wapu-single__variant-item {
	color: inherit;
	text-decoration: none;
}

a.wapu-single__variant-item:hover,
a.wapu-single__variant-item:focus,
a.wapu-single__variant-item:visited {
	color: inherit;
	text-decoration: none;
}

/* V56: recover the reference's single circular surface and unclipped badge dot. */
.wapu-single .wapu-sv-tone { position:relative; background:transparent; border:0; }
.wapu-single .wapu-sv-tone__swatch { overflow:hidden; border-radius:50%; padding:0; }
.wapu-single .wapu-sv-tone__swatch img { display:block; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; border-radius:inherit; }
.wapu-single .wapu-sv-tone.is-active .wapu-sv-tone__swatch { outline:1px solid var(--wtds-action); }
.wapu-single .wapu-sv-tone:focus-visible { outline:2px solid var(--wtds-action); outline-offset:3px; }
:is(.wapu-single,.wapu-archive-qv__canonical-selector) .wapu-sv-figma .wapu-sv-figma__primary-option:not(.is-text-only) {
 position:relative; border-radius:50%!important; padding:0!important; overflow:visible!important; background:transparent!important; transform:none!important;
}
:is(.wapu-single,.wapu-archive-qv__canonical-selector) .wapu-sv-figma .wapu-sv-figma__option-visual:not(.is-text) {
 border-radius:50%; overflow:hidden; background-size:cover!important;
}
:is(.wapu-single,.wapu-archive-qv__canonical-selector) .wapu-sv-figma .wapu-sv-figma__primary-option:not(.is-text-only):is(.is-active,[aria-selected="true"]) { border-color:var(--wtds-action)!important; box-shadow:none!important; }
:is(.wapu-single,.wapu-archive-qv__canonical-selector) .wapu-sv-figma__badge-dot { display:block!important; border-radius:50%; }

/* Badge labels use the canonical WTDS body portal, outside clipped containers. */
:is(.wapu-sv-figma__badge-dot,.wapu-single__variant-badge-dot)::before,
:is(.wapu-sv-figma__badge-dot,.wapu-single__variant-badge-dot)::after { display:none!important; }