/**
 * Svenson · Productos relacionados
 *
 * La tipografía se hereda del theme a propósito: aquí no se declara ninguna
 * familia. Los colores son los de la paleta de 2026.
 */

.svpr {
	--svpr-rojo: #B01B35;
	--svpr-hover: #3f3f3f;
	--svpr-oscuro: #212121;
	--svpr-claro: #F2F2F2;
	--svpr-gris-texto: #6E6E6E;
	--svpr-gris-tachado: #8A8A8A;

	/*
	 * Sin separación propia: los contenedores de la página ya traen la suya y
	 * sumar otra solo aleja el módulo del texto con el que va. El carril llega
	 * así hasta el borde, que es lo que hace que la tarjeta siguiente asome.
	 * Queda como variable por si alguna plantilla suelta la necesitara.
	 */
	--svpr-margen: 0px;
	--svpr-tarjeta: 231px;
	--svpr-hueco: 27px;

	margin: 34px 0 38px;
	clear: both;
}

.svpr *,
.svpr *::before,
.svpr *::after {
	box-sizing: border-box;
}

.svpr__titulo {
	margin: 0 0 30px;
	padding: 0 var(--svpr-margen);
	font-size: 26px;
	line-height: 1.26;
	font-weight: 400;
	color: var(--svpr-oscuro);
	text-align: center;
	text-wrap: balance;
}

/* ---------- Un solo producto ---------- */

.svpr__uno {
	padding: 0 var(--svpr-margen);
}

.svpr__uno .svpr-card {
	width: 100%;
	max-width: 307px;
	margin: 0 auto;
}

/* ---------- Varios: carril ----------
   Centrado mientras las tarjetas caben; en cuanto dejan de caber se desliza.
   Sin puntos de corte: el propio contenido decide. */

.svpr__carril {
	display: flex;
	gap: var(--svpr-hueco);
	padding: 0 var(--svpr-margen);

	/*
	 * Nada de `justify-content: center`: cuando el contenido desborda, el
	 * navegador deja la primera tarjeta fuera del área que se puede desplazar
	 * y el carril se queda clavado. Con un ancho que se ajusta al contenido y
	 * márgenes automáticos se consigue lo mismo sin romper el desplazamiento:
	 * si las tarjetas caben, el bloque se centra; si no caben, el ancho se topa
	 * en el 100% y se desliza desde el principio.
	 */
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;

	overflow-x: auto;
	/*
	 * `proximity` y no `mandatory`: con el ajuste obligatorio, cuando el último
	 * tramo que queda por recorrer es menor que una tarjeta, el navegador puede
	 * rechazar esa posición y devolver el carril al principio. `proximity` alinea
	 * igual al soltar el dedo, pero nunca impide llegar al final.
	 */
	scroll-padding-left: var(--svpr-margen);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.svpr__carril::-webkit-scrollbar {
	display: none;
}

.svpr__carril .svpr-card {
	flex: 0 0 var(--svpr-tarjeta);
	scroll-snap-align: start;
    height: auto !important;
}

.svpr--desliza .svpr__carril {
	cursor: grab;
}

.svpr--arrastrando .svpr__carril {
	cursor: grabbing;
	user-select: none;
}

.svpr__carril:focus-visible {
	outline: 2px solid var(--svpr-rojo);
	outline-offset: 4px;
}

/* ---------- Tarjeta ---------- */

/*
 * Ni los enlaces ni las fotos se arrastran. El navegador los hace arrastrables
 * por su cuenta, y como el nombre extiende su zona pulsable a toda la tarjeta,
 * al presionar para deslizar el carril lo que se agarraba era el enlace.
 */
.svpr-card a,
.svpr-card img {
	-webkit-user-drag: none;
	user-drag: none;
}

.svpr-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	position: relative;
}

.svpr-card__foto {
	display: block;
	line-height: 0;
	background: var(--svpr-claro);
}

.svpr-card__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	max-width: 100%;
	border: 0;
	border-radius: 0;
    pointer-events: none;
}

.svpr-card__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 19px;
	flex: 1 1 auto;
}

/*
 * Un único enlace por tarjeta. El nombre estira su zona pulsable por encima de
 * toda la tarjeta, así la foto sigue llevando a la ficha sin necesidad de un
 * segundo enlace al mismo sitio: duplicarlo obligaba a esconderlo de los
 * lectores de pantalla, y esconder algo que puede recibir el foco es
 * precisamente lo que no se debe hacer.
 */
.svpr-card__nombre::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* El botón de comprar queda por encima de esa zona: es otro destino. */
.svpr-card__accion {
	position: relative;
	z-index: 1;
}

/*
 * El botón se va al fondo de la tarjeta. Así todos quedan a la misma altura
 * aunque un nombre ocupe dos líneas o a un producto le falte el precio por
 * unidad, que es lo que pasa con los packs.
 */
.svpr-card__accion {
	margin-top: auto;
	padding-top: 16px;
}

.svpr-card__foto {
	cursor: pointer;
}

.svpr-card__nombre,
.svpr .svpr-card__nombre:visited {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--svpr-rojo);
	text-decoration: none;
}

.svpr-card__nombre:hover,
.svpr-card__nombre:focus-visible {
	color: var(--svpr-rojo);
	text-decoration: underline;
}

/*
 * El formato del producto. Va por encima de la zona pulsable del nombre, que
 * cubre toda la tarjeta: si no, el desplegable no se podría ni abrir.
 */
/*
 * Va dentro del bloque del botón, no suelto más arriba: ese bloque es el que se
 * ancla al fondo de la tarjeta, así el selector viaja pegado al botón en vez de
 * quedarse junto al precio con un hueco en medio. Los botones siguen alineados
 * entre tarjetas, tengan selector o no, porque lo que se alinea es el fondo.
 */
.svpr-card__formato {
	position: relative;
	z-index: 1;
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--svpr-gris-texto);
}

.svpr-card__selector {
	max-width: 100%;
	margin: 0;
	padding: 5px 9px;
	border: 1px solid #D8D8D8;
	border-radius: 4px;
	background: #FFFFFF;
	color: var(--svpr-oscuro);
	font-size: 13px;
	font-family: inherit;
	line-height: 1.35;
	cursor: pointer;
}

.svpr-card__selector:focus-visible {
	outline: 2px solid var(--svpr-rojo);
	outline-offset: 1px;
}

.svpr-card__precios {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 3px 0 0;
	font-variant-numeric: tabular-nums;
}

.svpr-card__antes {
	font-size: 14px;
	color: var(--svpr-gris-tachado);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.svpr-card__precio {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--svpr-oscuro);
}

.svpr-card__unidad {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--svpr-gris-texto);
	font-variant-numeric: tabular-nums;
}

.svpr-card__comprar,
.svpr .svpr-card__comprar:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 147px;
	height: 41px;
	background: var(--svpr-rojo);
	color: #FFFFFF;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s;
}

/* Mismo comportamiento que el botón de comprar de la tienda. */
.svpr .svpr-card__comprar:hover,
.svpr .svpr-card__comprar:focus,
.svpr .svpr-card__comprar:focus-visible,
.svpr .svpr-card__comprar:active {
	background-color: var(--svpr-hover);
	color: #FFFFFF;
	text-decoration: none;
}

.svpr-card__icono {
	width: 22px;
	height: 21px;
	flex: none;
}

/* ---------- Dots ----------
   Ocultos mientras no haya nada que deslizar: si las tarjetas caben, no hay
   navegación que ofrecer. Los enseña el script. */

.svpr__dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 2px;
	margin: 40px var(--svpr-margen) 0;
	padding: 0;
}

.svpr--desliza .svpr__dots {
	display: flex;
}

.svpr__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.svpr__dot::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #D8D8D8;
	transition: background-color .3s, transform .2s ease;
}

.svpr__dot:hover::before {
	background: #B9B9B9;
}

.svpr__dot[aria-current="true"]::before {
	background: var(--svpr-rojo);
	transform: scale(1.25);
}

.svpr__dot:focus-visible {
	outline: 2px solid var(--svpr-rojo);
	outline-offset: 0;
	border-radius: 50%;
}

/* ---------- Texto solo para lectores de pantalla ---------- */

.svpr .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* ---------- Anchos mayores ---------- */

@media (min-width: 768px) {

	.svpr__titulo {
		font-size: 32px;
		margin-bottom: 45px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.svpr *,
	.svpr__carril {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}