/*!
 * Wapu Smart Variations — wapu-swatch.css v3.0.0
 *
 * Componente .wapu-swatch del ecosistema WapuCommerce.
 * Auto-suficiente: funciona sin theme. Si el theme provee tokens del DS,
 * los consume automáticamente para mantener coherencia sistema-wide.
 *
 * Contrato BEM público:
 *   .wapu-swatch           — wrapper del componente
 *   .wapu-swatch__media    — contenedor del color/imagen (hijo único obligatorio)
 *   .wapu-swatch__badge    — badge esquinero opcional
 *
 * Modifiers:
 *   .wapu-swatch--xs/sm/md/lg/xl/2xl    — tamaños (8px grid)
 *   .wapu-swatch--shape-circle/squircle — forma
 *   .wapu-swatch--interactive           — cursor pointer + hover
 *   .is-active                          — seleccionado (ring negro)
 *   .is-soldout                         — agotado (slash diagonal)
 *
 * Grupo:
 *   .wapu-swatch-group             — fila de swatches con gap
 *   .wapu-swatch-group--scrollable — fila horizontal sin wrap
 *   .wapu-swatch-more              — pill "+N" de overflow
 *
 * Tokens del DS consumidos (con fallback si el theme no los define):
 *   --ds-ink, --ds-surface, --ds-fill-3
 *   --ds-danger, --ds-warning, --ds-success, --ds-action
 *   --ds-r-pill, --ds-font-text, --ds-font-display
 *   --ds-dur-fast, --ds-ease
 *
 * Tokens propios del swatch (sobrescribibles por theme o shortcode):
 *   --wapu-swatch-size, --wapu-swatch-radius, --wapu-swatch-ring
 */

/* ═══════════════════════════════════════════════════════════════════════
 * COMPONENTE BASE
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-swatch {
	/* Tokens propios — sobrescribibles */
	--sw-size:       var(--wapu-swatch-size, 32px);
	--sw-radius:     var(--wapu-swatch-radius, 50%);
	--sw-ring:       var(--wapu-swatch-ring, #000);
	--sw-ring-w:     2px;
	--sw-ring-off:   2px;

	/* Tokens del DS con fallback */
	--sw-dur:        var(--ds-dur-fast, 150ms);
	--sw-ease:       var(--ds-ease, cubic-bezier(.25, .46, .45, .94));
	--sw-bg-empty:   var(--ds-fill-3, rgba(118, 118, 128, .12));

	position: relative;
	display: inline-block;
	width: var(--sw-size);
	height: var(--sw-size);
	border-radius: var(--sw-radius);
	flex-shrink: 0;
	vertical-align: middle;
	box-sizing: border-box;
	background: var(--sw-bg-empty);
	transition:
		transform var(--sw-dur) var(--sw-ease),
		outline-color var(--sw-dur) var(--sw-ease);
}

/* Sub-elemento obligatorio: .wapu-swatch__media */
.wapu-swatch__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
 * SIZES — múltiplos de 8 del grid WapuCommerce
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-swatch--xs  { --sw-size: 16px; }
.wapu-swatch--sm  { --sw-size: 24px; }
.wapu-swatch--md  { --sw-size: 40px; }
.wapu-swatch--lg  { --sw-size: 48px; }
.wapu-swatch--xl  { --sw-size: 64px; }
.wapu-swatch--2xl { --sw-size: 80px; }


/* ═══════════════════════════════════════════════════════════════════════
 * SHAPES — circle (default) y squircle
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-swatch--shape-circle    { --sw-radius: 50%; }
.wapu-swatch--shape-squircle  { --sw-radius: 22%; }


/* ═══════════════════════════════════════════════════════════════════════
 * ESTADOS
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-swatch.is-active {
	outline: var(--sw-ring-w) solid var(--sw-ring);
	outline-offset: var(--sw-ring-off);
}

.wapu-swatch--interactive {
	cursor: pointer;
}
.wapu-swatch--interactive:hover:not(.is-active):not(.is-soldout) {
	transform: scale(1.12);
}
.wapu-swatch--interactive:focus-visible {
	outline: var(--sw-ring-w) solid var(--sw-ring);
	outline-offset: var(--sw-ring-off);
}

.wapu-swatch.is-soldout {
	cursor: not-allowed;
}
.wapu-swatch.is-soldout .wapu-swatch__media {
	filter: grayscale(1);
	opacity: 0.5;
}
.wapu-swatch.is-soldout::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		45deg,
		transparent 47%,
		rgba(0, 0, 0, 0.55) 47%,
		rgba(0, 0, 0, 0.55) 53%,
		transparent 53%
	);
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
 * BADGE ESQUINERO — sale, stock, new, primary
 * Más sutil en v3: 14px, sin halo, font 9px
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-swatch__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: var(--ds-r-pill, 999px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ds-font-text, -apple-system, system-ui, sans-serif);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	z-index: 1;
	pointer-events: none;
	background: var(--ds-ink, #000);
	color: var(--ds-surface, #fff);
}
.wapu-swatch__badge--sale    { background: var(--ds-danger, #ff3b30);  color: #fff; }
.wapu-swatch__badge--stock   { background: var(--ds-warning, #ff9500); color: #fff; }
.wapu-swatch__badge--new     { background: var(--ds-success, #34c759); color: #fff; }
.wapu-swatch__badge--primary { background: var(--ds-action, #007aff);  color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════
 * GRUPO DE SWATCHES — .wapu-swatch-group
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-swatch-group {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.wapu-swatch-group--scrollable {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.wapu-swatch-group--scrollable::-webkit-scrollbar {
	display: none;
}


/* ═══════════════════════════════════════════════════════════════════════
 * OVERFLOW "+N" — .wapu-swatch-more
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-swatch-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	background: var(--ds-ink, #000);
	color: var(--ds-surface, #fff);
	border-radius: var(--ds-r-pill, 999px);
	font-family: var(--ds-font-display, -apple-system, system-ui, sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	flex-shrink: 0;
	transition: transform var(--ds-dur-fast, 150ms) var(--ds-ease, ease);
}
.wapu-swatch-more:hover {
	transform: scale(1.12);
}


/* ═══════════════════════════════════════════════════════════════════════
 * CONTENEDOR SELECTOR — .wapu-sel (mínimo layout, el DS del theme pule)
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-sel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wapu-sel__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wapu-sel__heading {
	margin: 0;
	font-family: var(--ds-font-display, -apple-system, system-ui, sans-serif);
}


/* ═══════════════════════════════════════════════════════════════════════
 * LIST VIEW — .wapu-sel__row (fila)
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-sel__list {
	display: flex;
	flex-direction: column;
	border-radius: var(--ds-r-lg, 1.25rem);
	overflow: hidden;
}
.wapu-sel__row {
	all: unset;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	cursor: pointer;
	font-family: var(--ds-font-text, -apple-system, system-ui, sans-serif);
	transition: background var(--ds-dur-fast, 150ms) var(--ds-ease, ease);
}
.wapu-sel__row + .wapu-sel__row {
	border-top: 1px solid var(--ds-separator-soft, rgba(60, 60, 67, .18));
}
.wapu-sel__row:hover {
	background: var(--ds-fill-4, rgba(116, 116, 128, .08));
}
.wapu-sel__row.is-active {
	background: var(--ds-fill-3, rgba(118, 118, 128, .12));
}
.wapu-sel__row[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}
.wapu-sel__row-info {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.wapu-sel__row-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-ink, #000);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════
 * GRID VIEW — .wapu-sel__cell
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-sel__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 12px;
}
.wapu-sel__cell {
	all: unset;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px;
	background: var(--ds-surface, #fff);
	border: 1px solid var(--ds-separator-soft, rgba(60, 60, 67, .18));
	border-radius: var(--ds-r-md, 0.875rem);
	cursor: pointer;
	font-family: var(--ds-font-text, -apple-system, system-ui, sans-serif);
	transition:
		background var(--ds-dur-fast, 150ms) var(--ds-ease, ease),
		border-color var(--ds-dur-fast, 150ms) var(--ds-ease, ease);
}
.wapu-sel__cell:hover {
	background: var(--ds-fill-4, rgba(116, 116, 128, .08));
}
.wapu-sel__cell.is-active {
	border-color: var(--ds-ink, #000);
	background: var(--ds-fill-3, rgba(118, 118, 128, .12));
}
.wapu-sel__cell[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}
.wapu-sel__cell-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--ds-ink, #000);
	text-align: center;
	line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════════
 * SHADES CAROUSEL — .wapu-shades (single-product)
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-shades {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wapu-shades__title {
	margin: 0;
	font-family: var(--ds-font-display, -apple-system, system-ui, sans-serif);
}
.wapu-shades__carousel-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wapu-shades__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	flex: 1;
	scrollbar-width: none;
}
.wapu-shades__track::-webkit-scrollbar {
	display: none;
}
.wapu-shades__item {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 120px;
	cursor: pointer;
}
.wapu-shades__img-wrap {
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: var(--ds-r-md, 0.875rem);
}
.wapu-shades__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wapu-shades__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wapu-shades__arrow {
	all: unset;
	padding: 8px;
	cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════
 * ARCHIVE SWATCHES — contenedor .wapu-sw (las cards de shop/categoría)
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-sw {
	position: relative;
}
.wapu-sw__link {
	display: block;
}
.wapu-sw__wrap {
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
}
.wapu-sw__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wapu-sw__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
}


/* ═══════════════════════════════════════════════════════════════════════
 * GALLERY — .wapu-gal
 * ═══════════════════════════════════════════════════════════════════════ */

.wapu-gal {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wapu-gal__main {
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: var(--ds-r-md, 0.875rem);
}
.wapu-gal__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wapu-gal__carousel {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wapu-gal__thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	flex: 1;
	scrollbar-width: none;
}
.wapu-gal__thumbs::-webkit-scrollbar {
	display: none;
}
.wapu-gal__thumb {
	all: unset;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--ds-r-md, 0.875rem);
	overflow: hidden;
	cursor: pointer;
}
.wapu-gal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wapu-gal__arrow {
	all: unset;
	padding: 8px;
	cursor: pointer;
}