/**
 * Product View Quick Preview — WTDS presentation.
 *
 * Theme owns this modal/interaction paint. Playground only publishes the
 * Product View behavior intent; Core remains presentation-neutral.
 */

.wapu-product-card__media-link{
	display:block;
	width:100%;
	height:100%;
	color:inherit;
	text-decoration:none;
	/* Reset para cuando es <button> */
	background:transparent;
	border:0;
	padding:0;
	margin:0;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}

.wapu-product-card__media-link img,
.wapu-product-card__media-link picture{
	display:block;
	width:100%;
	height:100%;
}

/* Overlay invisible sobre la imagen del producto variable */
.wapu-product-card__media-overlay{
	position:absolute;
	inset:0;
	z-index:2;
	background:transparent;
}

.wapu-archive-qv{
	position:fixed;
	inset:0;
	z-index:1200;
	visibility:hidden;
	opacity:0;
	pointer-events:none;
	transition:opacity var(--wtds-dur) var(--wtds-ease),visibility var(--wtds-dur) var(--wtds-ease);
	/* Centrado real vertical + horizontal */
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1.5rem;
}

.wapu-archive-qv.is-open{
	visibility:visible;
	opacity:1;
	pointer-events:auto;
}

.wapu-archive-qv__overlay{
	position:fixed;
	inset:0;
	border:0;
	padding:0;
	background:var(--wtds-scrim-strong);
	cursor:pointer;
	z-index:0;
}

.wapu-archive-qv__dialog{
	position:relative;
	z-index:1;
	width:min(60rem,calc(100vw - 3rem));
	max-height:min(88vh,50rem);
	margin:0;
	background:var(--wtds-surface);
	border-radius:var(--wtds-r-xl);
	box-shadow:0 1.5rem 5rem var(--wtds-shadow-color-medium);
	overflow:hidden;
}

.wapu-archive-qv__content{
	position:relative;
	min-height:20rem;
	overflow-x:hidden;
}

.wapu-archive-qv__loading,
.wapu-archive-qv__error{
	min-height:20rem;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:var(--wtds-s-1);
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-footnote);
	color:var(--wtds-ink-3);
	padding:var(--wtds-s-4);
	text-align:center;
}

.wapu-archive-qv__loading-dot{
	width:1.125rem;
	height:1.125rem;
	border-radius:50%;
	background:var(--wtds-action);
	animation:wapu-archive-qv-pulse 1s ease-in-out infinite;
}

@keyframes wapu-archive-qv-pulse{
	0%,100%{transform:scale(.82);opacity:.55}
	50%{transform:scale(1);opacity:1}
}

.wapu-archive-qv__close{
	position:absolute;
	top:var(--wtds-s-2);
	right:var(--wtds-s-2);
	z-index:2;
	width:2.5rem;
	height:2.5rem;
	border-radius:var(--wtds-r-pill);
	border:0;
	background:transparent;
	color:var(--wtds-ink);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background-color var(--wtds-dur-fast) var(--wtds-ease),transform var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-archive-qv__close:hover{
	background:var(--wtds-fill-3);
}

.wapu-archive-qv__close:active{
	transform:scale(.96);
}

.wapu-archive-qv__grid{
	display:grid;
	grid-template-columns:minmax(0,1.06fr) minmax(20rem,.94fr);
	align-items:stretch;
}

.wapu-archive-qv__media{
	background:linear-gradient(180deg,var(--wtds-fill-5),var(--wtds-surface));
	min-height:35rem;
	padding:var(--wtds-s-3);
	display:flex;
	align-items:center;
	justify-content:center;
}

.wapu-archive-qv__media img{
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
}

.wapu-archive-qv__body{
	display:flex;
	flex-direction:column;
	padding:var(--wtds-s-5);
	gap:var(--wtds-s-2);
}

.wapu-archive-qv__eyebrow{
	margin:0;
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-1);
	font-weight:var(--wtds-fw-semibold);
	letter-spacing:var(--wtds-ls-wide);
	text-transform:uppercase;
	color:var(--wtds-ink-3);
}

a.wapu-archive-qv__eyebrow{
	align-self:flex-start;
	text-decoration:none;
	transition:color var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-archive-qv__eyebrow--link:hover{
	color:var(--wtds-ink);
	text-decoration:underline;
	text-underline-offset:.22em;
}

.wapu-archive-qv__eyebrow--link:focus-visible{
	outline:none;
	color:var(--wtds-ink);
	text-decoration:underline;
	text-underline-offset:.22em;
}

.wapu-archive-qv__title{
	margin:0;
	font-family:var(--wtds-font-display);
	font-size:clamp(1.375rem,2vw,2rem);
	font-weight:var(--wtds-fw-regular);
	line-height:var(--wtds-lh-tight);
	color:var(--wtds-ink);
	overflow-wrap:break-word;
	min-width:0;
}

.wapu-archive-qv__price{
	font-family:var(--wtds-font-display);
	font-size:clamp(1.125rem,1.6vw,1.5rem);
	font-weight:var(--wtds-fw-medium);
	color:var(--wtds-ink);
}

.wapu-archive-qv__price .amount{
	color:inherit;
}

.wapu-archive-qv__desc{
	margin:0;
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-footnote);
	line-height:var(--wtds-lh-relaxed);
	color:var(--wtds-ink-2);
}

.wapu-archive-qv__options{
	display:flex;
	flex-direction:column;
	gap:var(--wtds-s-1);
	padding-top:var(--wtds-s-1);
}

.wapu-archive-qv__group{
	display:flex;
	flex-direction:column;
	gap:var(--wtds-s-1);
}

.wapu-archive-qv__group + .wapu-archive-qv__group{
	padding-top:var(--wtds-s-1);
}

.wapu-archive-qv__group-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--wtds-s-1);
}

.wapu-archive-qv__options-label{
	margin:0;
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-1);
	font-weight:var(--wtds-fw-semibold);
	letter-spacing:var(--wtds-ls-wide);
	text-transform:uppercase;
	color:var(--wtds-ink);
}

.wapu-archive-qv__group-label{
	margin:0;
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-1);
	font-weight:var(--wtds-fw-semibold);
	letter-spacing:var(--wtds-ls-wide);
	text-transform:uppercase;
	color:var(--wtds-ink);
}

.wapu-archive-qv__options-grid{
	display:flex;
	flex-wrap:wrap;
	gap:var(--wtds-s-1);
	padding:.5rem 0;
}

.wapu-archive-qv__pills{
	display:flex;
	flex-wrap:wrap;
	gap:var(--wtds-s-1);
}

/* Fila slider: [←] [viewport] [→] */
.wapu-archive-qv__slider-row{
	display:flex;
	align-items:center;
	gap:var(--wtds-s-1);
	min-width:0;
	width:100%;
	overflow:hidden;
}

/* Viewport — clip local sin afectar al dialog */
.wapu-archive-qv__slider-viewport{
	overflow:hidden;
	flex:1;
	min-width:0;
	padding:.5rem 0;
	margin:-.5rem 0;
}

/* Flechas a los lados */
.wapu-archive-qv__slider-btn{
	flex-shrink:0;
	width:1.875rem;
	height:1.875rem;
	border-radius:50%;
	border:.5px solid var(--wtds-separator-soft);
	background:var(--wtds-surface);
	color:var(--wtds-ink);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .15s,opacity .15s;
	box-shadow:0 1px .25rem var(--wtds-shadow-color-soft);
}
.wapu-archive-qv__slider-btn:hover{background:var(--wtds-fill-3);}
.wapu-archive-qv__slider-btn:disabled{opacity:.25;cursor:default;box-shadow:none;}

.wapu-archive-qv__option{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.25rem;
	box-sizing:border-box; /* JS asigna width incluyendo este padding */
	border:0;
	background:transparent;
	border-radius:50%;
	cursor:pointer;
	transition:transform var(--wtds-dur-fast) var(--wtds-ease);
}

.wapu-archive-qv__option:hover{
	transform:scale(1.08);
}

.wapu-archive-qv__option.is-disabled{
	opacity:.28;
	cursor:not-allowed;
	transform:none;
}

.wapu-archive-qv__option.is-active .wapu-archive-qv__option-swatch{
	box-shadow:0 0 0 .125rem var(--wtds-surface),0 0 0 .21875rem var(--wtds-ink);
}

.wapu-archive-qv__option-swatch{
	width:3rem;
	height:3rem;
	border-radius:50%;
	display:block;
	background:var(--wtds-fill-3);
	background-size:cover;
	background-position:center;
	box-shadow:inset 0 0 0 1px var(--wtds-shadow-color-soft);
}

.wapu-archive-qv__pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:2.125rem !important;
	padding:0 .875rem !important;
	border:var(--wtds-border-thin) solid var(--wtds-separator) !important;
	border-radius:var(--wtds-r-pill) !important;
	background:var(--wtds-surface) !important;
	color:var(--wtds-ink) !important;
	cursor:pointer;
	box-shadow:none !important;
	width:auto !important;
	min-width:0 !important;
	font-family:var(--wtds-font-text) !important;
	font-size:var(--wtds-fs-footnote) !important;
	font-weight:var(--wtds-fw-medium) !important;
	letter-spacing:0 !important;
	line-height:1 !important;
	text-transform:none !important;
	text-decoration:none !important;
	transition:border-color var(--wtds-dur-fast) var(--wtds-ease),background var(--wtds-dur-fast) var(--wtds-ease),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-archive-qv__pill:hover{
	background:var(--wtds-fill-4) !important;
	border-color:var(--wtds-ink-4) !important;
}

.wapu-archive-qv__pill.is-active{
	border-color:var(--wtds-ink) !important;
	background:var(--wtds-fill-3) !important;
	color:var(--wtds-ink) !important;
	box-shadow:0 0 0 1px var(--wtds-ink) !important;
}

.wapu-archive-qv__pill:focus-visible{
	outline:none;
	box-shadow:var(--wtds-shadow-focus) !important;
}

.wapu-archive-qv__pill.is-disabled{
	opacity:.35;
	cursor:not-allowed;
}

.wapu-archive-qv__pill-text{
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	letter-spacing:inherit;
	text-transform:inherit;
	color:inherit;
	white-space:nowrap;
}

/* Tooltip — manejado por JS (append al body para escapar overflow:hidden) */
#wapu-qv-swatch-tip{
	position:fixed;
	z-index:2147483647;
	background:var(--wtds-ink);
	color:var(--wtds-surface);
	font-family:var(--wtds-font-text);
	font-size:.6875rem;
	font-weight:var(--wtds-fw-medium);
	line-height:1.3;
	padding:.3125rem .5rem;
	border-radius:var(--wtds-r-sm);
	pointer-events:none;
	opacity:0;
	transition:opacity .15s ease;
	max-width:8.75rem;
	text-align:center;
	transform:translateX(-50%);
	white-space:normal;
}

.wapu-archive-qv__actions{
	display:flex;
	flex-direction:column;
	gap:var(--wtds-s-1);
	margin-top:auto;
	padding-top:var(--wtds-s-2);
}

.wapu-archive-qv__primary{
	min-height:2.75rem;
	background:var(--wtds-primary) !important;
	color:var(--wtds-primary-ink) !important;
	border-color:var(--wtds-primary) !important;
	border-radius:var(--wtds-r-pill) !important;
	font-size:var(--wtds-fs-footnote) !important;
	font-weight:var(--wtds-fw-semibold) !important;
	letter-spacing:.04em !important;
}

.wapu-archive-qv__primary:hover{
	opacity:.88;
}

.wapu-archive-qv__more{
	align-self:center;
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-footnote);
	font-weight:var(--wtds-fw-medium);
	color:var(--wtds-ink);
	text-decoration:underline;
	text-underline-offset:.25rem;
}

/* ── Tablet: dialog centrado, columna única ──────────────────────────── */
@media (max-width: 48rem){
	.wapu-product-card__cta[data-cta-type^="select_"]{
		display:inline-flex !important;
	}

	/* Bottom sheet: se ancla al borde inferior */
	.wapu-archive-qv{
		align-items:flex-end;
		padding:0;
	}

	body.wapu-has-mobile-bottom-nav .wapu-archive-qv{
		padding-bottom:calc(var(--wapu-mobile-appbar-height, 0px) - 1.5rem);
	}

	.wapu-archive-qv__dialog{
		width:100%;
		max-height:min(88vh,88svh);
		margin:0;
		border-radius:var(--wtds-r-xl) var(--wtds-r-xl) 0 0;
	}

	body.wapu-has-mobile-bottom-nav .wapu-archive-qv__dialog{
		max-height:min(
			calc(88vh - var(--wapu-mobile-appbar-height, 0px) + 1.5rem),
			calc(88svh - var(--wapu-mobile-appbar-height, 0px) + 1.5rem)
		);
	}

	/* Permitir scroll vertical dentro del diálogo; bloquear horizontal (slider) */
	.wapu-archive-qv__content{
		overflow-y:auto;
		overflow-x:hidden;
		max-height:inherit;
	}

	.wapu-archive-qv__grid{
		grid-template-columns:minmax(0,1fr);
	}

	.wapu-archive-qv__media{
		min-height:13.75rem;
		padding:var(--wtds-s-2);
	}

	.wapu-archive-qv__body{
		padding:var(--wtds-s-3);
		gap:var(--wtds-s-2);
	}

	.wapu-archive-qv__title{
		font-size:clamp(1.25rem,5vw,1.625rem);
	}

	.wapu-archive-qv__price{
		font-size:clamp(1.0625rem,4.5vw,1.375rem);
	}

	.wapu-archive-qv__option-swatch{
		width:2.75rem;
		height:2.75rem;
	}

	/* Acciones pegadas al fondo, respetan safe-area (notch) */
	.wapu-archive-qv__actions{
		position:sticky;
		bottom:0;
		background:var(--wtds-surface);
		padding:var(--wtds-s-2) var(--wtds-s-3) max(var(--wtds-s-2), env(safe-area-inset-bottom));
		margin:0 calc(var(--wtds-s-3) * -1);
		border-top:.5px solid var(--wtds-separator-soft);
	}

	/* Lista grande: altura más compacta en tablet */
	.wapu-archive-qv__options-grid.is-large-catalog{
		max-height:10rem;
	}
}

/* ── Mobile pequeño: imagen oculta, layout ultracompacto ─────────────── */
@media (max-width: 30rem){
	.wapu-archive-qv__dialog{
		max-height:min(92vh,92svh);
	}

	body.wapu-has-mobile-bottom-nav .wapu-archive-qv__dialog{
		max-height:min(
			calc(92vh - var(--wapu-mobile-appbar-height, 0px) + 1.5rem),
			calc(92svh - var(--wapu-mobile-appbar-height, 0px) + 1.5rem)
		);
	}

	/* Ocultar imagen para ganar espacio en la pantalla */
	.wapu-archive-qv__media{
		display:none;
	}

	.wapu-archive-qv__body{
		padding:var(--wtds-s-2);
	}

	.wapu-archive-qv__actions{
		padding-left:var(--wtds-s-2);
		padding-right:var(--wtds-s-2);
		margin-left:calc(var(--wtds-s-2) * -1);
		margin-right:calc(var(--wtds-s-2) * -1);
	}

	.wapu-archive-qv__option-swatch{
		width:2.5rem;
		height:2.5rem;
	}

	/* Lista grande: altura aún más compacta en móvil */
	.wapu-archive-qv__options-grid.is-large-catalog{
		max-height:8.125rem;
	}
}

/* ── Options head: label + count en la misma línea ──────────────────── */
.wapu-archive-qv__options-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:var(--wtds-s-1);
}

.wapu-archive-qv__options-count{
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-caption-2);
	color:var(--wtds-ink-3);
	white-space:nowrap;
	flex-shrink:0;
}

/* ── Option name: oculto en modo swatches, visible en lista ─────────── */
.wapu-archive-qv__option-name{
	display:none;
}

/* ── Large catalog (≥12): lista vertical con scroll ──────────────────── */
.wapu-archive-qv__options-grid.is-large-catalog{
	flex-direction:column;
	flex-wrap:nowrap;
	gap:.125rem;
	padding:0;
	max-height:13.5rem;
	overflow-y:auto;
	scrollbar-width:thin;
	scrollbar-color:var(--wtds-separator) transparent;
}

.wapu-archive-qv__options-grid.is-large-catalog::-webkit-scrollbar{
	width:.25rem;
}

.wapu-archive-qv__options-grid.is-large-catalog::-webkit-scrollbar-thumb{
	background:var(--wtds-separator);
	border-radius:.125rem;
}

.is-large-catalog .wapu-archive-qv__option{
	width:100%;
	border-radius:var(--wtds-r-sm);
	justify-content:flex-start;
	gap:var(--wtds-s-1);
	padding:.375rem .5rem;
	text-align:left;
}

.is-large-catalog .wapu-archive-qv__option:hover{
	background:var(--wtds-fill-3);
	transform:none;
}

.is-large-catalog .wapu-archive-qv__option.is-active{
	background:var(--wtds-fill-2);
}

.is-large-catalog .wapu-archive-qv__option-swatch{
	width:1.75rem;
	height:1.75rem;
	flex-shrink:0;
}

.is-large-catalog .wapu-archive-qv__option-name{
	display:block;
	font-family:var(--wtds-font-text);
	font-size:var(--wtds-fs-footnote);
	font-weight:var(--wtds-fw-medium);
	color:var(--wtds-ink);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}