/**
 * Wapu Single Swatches — estilos PDP.
 *
 * Token-driven con --ws-* del theme. Las formas (circle/rounded/pill)
 * vienen del Card Studio + Single Studio (Playground).
 */

/* ── CTA buttons: color de marca del tema ────────────────────────────── */
.wapu-single__add-btn,
.wapu-single__inline-cta-btn {
	background-color: var(--ws-primary, var(--wp-primary, var(--ds-action))) !important;
	border-color: var(--ws-primary, var(--wp-primary, var(--ds-action))) !important;
	color: var(--ds-action-ink) !important;
}

.wapu-single__add-btn:hover,
.wapu-single__inline-cta-btn:hover {
	opacity: .88;
}

.wapu-single-swatches {
	margin: 16px 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--ws-font-body, inherit);
}

.wapu-single-swatches__current {
	font-size: 13px;
	color: var(--ws-text-muted, color-mix(in srgb, var(--ws-text, #111) 60%, transparent));
}
.wapu-single-swatches__current strong {
	color: var(--ws-text, #111);
	font-weight: 600;
	margin-left: 4px;
}

.wapu-single-swatches__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-sw-gap, 4px);
}

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

.wapu-single-swatch__media {
	width: var(--ws-sw-inner, 24px);
	height: var(--ws-sw-inner, 24px);
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 2px solid var(--ws-surface, #fff);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws-text, #111) 12%, transparent);
	transition: box-shadow .15s, transform .15s;
}

.wapu-single-swatch.is-active .wapu-single-swatch__media {
	box-shadow: 0 0 0 2px var(--ws-primary, #be185d);
	transform: scale(1.05);
}

.wapu-single-swatch__name {
	font-size: 11px;
	color: var(--ws-text-muted, color-mix(in srgb, var(--ws-text, #111) 65%, transparent));
	font-weight: 500;
	max-width: 80px;
	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(--ws-text, #111);
}

/* ─── 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: 8px; }
.wapu-single-swatches--shape-pill    .wapu-single-swatch__media {
	border-radius: 999px;
	width: calc(var(--ws-sw-inner, 24px) * 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: 60px;
}

/* ════════════════════════════════════════════════════════════════
 * [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: 11px !important;
	max-height: 2.5em;
	padding: 0 2px;
}

.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% + 8px);
		transform: translateX(-50%);
		padding: 6px 10px;
		border-radius: var(--ds-r-sm);
		background: rgba(17, 17, 17, 0.92);
		color: var(--ds-surface);
		font-family: var(--ds-font-text);
		font-size: var(--ds-fs-caption-2);
		font-weight: var(--ds-fw-medium);
		line-height: 1.2;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease), visibility var(--ds-dur-fast) var(--ds-ease);
		z-index: 3;
		box-shadow: var(--ds-shadow-md);
	}

	.wapu-single__variant-items--grid .wapu-single__variant-item[data-label]::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: calc(100% + 2px);
		transform: translateX(-50%);
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid rgba(17, 17, 17, 0.92);
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--ds-dur-fast) var(--ds-ease), visibility var(--ds-dur-fast) var(--ds-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(-2px);
	}
}

/* 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(72px, 1fr)) !important;
	gap: 16px 10px !important;
}

/* En mobile dejar 4 columnas iguales pero más anchas */
@media (max-width: 767px) {
	.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(--ds-separator-soft);
	border-radius: var(--ds-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wapu-single__variation-search {
	padding: 7px 10px;
	background: var(--ds-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: 4px;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Items más compactos dentro del picker */
.wapu-single__variation-picker .wapu-single__variant-item {
	gap: 10px;
	padding: 7px 10px;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border-bottom: 0.5px solid var(--ds-separator-soft) !important;
	transition: background var(--ds-dur-fast) var(--ds-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(--ds-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(--ds-fill-2);
	box-shadow: none !important;
}

.wapu-single__variation-picker .wapu-single__variant-thumb {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	flex-shrink: 0;
	border: 0.5px solid var(--ds-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: 100% !important;
	height: 100% !important;
}

.wapu-single__variation-picker .wapu-single__variant-name {
	font-size: 12px !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: 188px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ds-separator) transparent;
}

.wapu-sv-tones::-webkit-scrollbar { width: 4px; }
.wapu-sv-tones::-webkit-scrollbar-thumb { background: var(--ds-separator); border-radius: 2px; }

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

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

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

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

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

.wapu-sv-tone__label {
	font-family: var(--ds-font-text);
	font-size: 12px;
	font-weight: var(--ds-fw-medium);
	color: var(--ds-ink);
}

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

.wapu-sv-size {
	padding: 5px 14px;
	border: 0.5px solid var(--ds-separator);
	border-radius: var(--ds-r-pill);
	background: transparent;
	font-family: var(--ds-font-text);
	font-size: 12px;
	font-weight: var(--ds-fw-medium);
	color: var(--ds-ink);
	cursor: pointer;
	transition: background var(--ds-dur-fast) var(--ds-ease),
	            border-color var(--ds-dur-fast) var(--ds-ease),
	            color var(--ds-dur-fast) var(--ds-ease);
}

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

.wapu-sv-size.is-active {
	background: var(--ws-primary, var(--wp-primary, var(--ds-action)));
	border-color: var(--ws-primary, var(--wp-primary, var(--ds-action)));
	color: var(--ds-action-ink, var(--ds-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;
}