/*
 * PulseFit — la tienda.
 *
 * Solo se carga donde hay tienda (ver inc/assets.php). Sigue el motivo de la
 * etiqueta textil definido en base.css: esquina cortada, datos en monoespaciada
 * tabular y el acento reservado para lo que se puede pulsar.
 */

/* --------------------------------------------------------------- utilidad -- */

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

.envoltura {
	max-width: 1340px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30, 1.5rem);
}

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 1.05rem 2rem;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton--solido { background: var(--tinta); color: var(--nieve); }
.boton--solido:hover { background: var(--pulso); color: var(--pulso-texto); }

.boton--acento { background: var(--pulso); color: var(--pulso-texto); }
.boton--acento:hover { background: var(--nieve); color: var(--tinta); }

.boton--linea { background: transparent; color: currentColor; border-color: currentColor; }
.boton--linea:hover { background: var(--pulso); color: var(--pulso-texto); border-color: var(--pulso); }

/* ------------------------------------------------------------------ hero -- */

.hero {
	position: relative;
	/* La cabecera está en el flujo, encima del hero: sin restarla, la primera
	   pantalla mide una cabecera de más y el visor queda fuera de cuadro. */
	min-height: calc(100svh - var(--alto-cabecera));
	display: grid;
	align-items: end;
	background: var(--tinta);
	color: var(--nieve);
	overflow: hidden;
	isolation: isolate;
}

/* El resplandor que sale del horizonte, detrás de la malla. */
.hero::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 12%;
	width: min(1100px, 130vw);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center bottom, rgba(198, 255, 61, .16), transparent 62%);
	pointer-events: none;
}

/* ---- el fondo de acción -------------------------------------------------- */
/*
 * Tres tomas que se relevan con un fundido y un zoom lento. Cada una vive 18 s:
 * entra, se queda visible un tercio del ciclo y se va mientras entra la
 * siguiente, con los desfases repartidos para que siempre haya exactamente una
 * dominando.
 *
 * Al 30 % de opacidad y en gris: la idea es que se intuya el movimiento por el
 * rabillo del ojo, no que compita con el titular que va encima.
 */

.hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.hero__toma {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	animation: hero-releva 18s ease-in-out infinite;
	will-change: opacity, transform;
}

.hero__toma--1 { animation-delay: 0s; }
.hero__toma--2 { animation-delay: 6s; }
.hero__toma--3 { animation-delay: 12s; }

@keyframes hero-releva {
	0%             { opacity: 0;   transform: scale(1.04); }
	7%             { opacity: .30; }
	28%            { opacity: .30; }
	38%            { opacity: 0; }
	/* El zoom sigue hasta el final del ciclo aunque la foto ya no se vea: así al
	   volver a entrar arranca otra vez desde su escala inicial, sin tirón. */
	100%           { opacity: 0;   transform: scale(1.14); }
}

/* El velo. Denso a la izquierda, donde va el texto; se abre hacia la derecha,
   que es donde interesa que se vea el fondo y la vitrina. */
.hero__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(10, 10, 10, .93) 0%, rgba(10, 10, 10, .78) 42%, rgba(10, 10, 10, .42) 100%),
		linear-gradient(to top, rgba(10, 10, 10, .85), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
	/* Sin movimiento se queda una sola toma, fija. */
	.hero__toma { animation: none; opacity: 0; transform: none; }
	.hero__toma--1 { opacity: .3; }
}

/* ---- la malla en fuga ---------------------------------------------------- */
/*
 * El suelo de una pista visto en perspectiva. Son dos degradados repetidos e
 * inclinados: ni imagen que descargar, ni lienzo que pintar, ni una sola petición
 * extra. Se desplaza hacia el espectador en bucle.
 */

.hero__malla {
	position: absolute;
	left: -60%;
	right: -60%;
	bottom: -12%;
	height: 78%;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(90deg, rgba(198, 255, 61, .38) 0 1.5px, transparent 1.5px 66px),
		repeating-linear-gradient(0deg, rgba(198, 255, 61, .26) 0 1.5px, transparent 1.5px 66px);
	transform: perspective(460px) rotateX(66deg);
	transform-origin: 50% 100%;
	/* Se desvanece hacia el horizonte: sin esto, la malla choca con el titular. */
	-webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 82%);
	mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 82%);
	animation: hero-avanza 3.2s linear infinite;
}

@keyframes hero-avanza {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 0 66px, 0 66px; }
}

/* ---- el barrido de encendido -------------------------------------------- */
/*
 * Cruza UNA vez al cargar, como un marcador que arranca. Repetirlo lo convertiría
 * en un letrero de neón y en una animación que nadie puede ignorar.
 */

.hero__barrido {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 42%, rgba(198, 255, 61, .13) 50%, transparent 58%);
	transform: translateX(-110%);
	animation: hero-barre 1.5s cubic-bezier(.3, .1, .2, 1) .25s 1 both;
}

@keyframes hero-barre {
	to { transform: translateX(110%); }
}

/* ---- la vitrina en movimiento -------------------------------------------- */
/*
 * Dos columnas de prendas subiendo y bajando a distinta velocidad. Ocupan el lado
 * derecho, que antes era fondo vacío, y lo que se mueve son productos de verdad:
 * cada pieza enlaza a su ficha.
 *
 * El truco del bucle sin costura: el PHP escribe la lista dos veces seguidas y la
 * animación desplaza exactamente la mitad de la cinta. Al terminar, el primer
 * juego está donde empezó el segundo y el salto no se ve.
 */

.vitrina {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(46%, 640px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	padding: 14px;
	overflow: hidden;
	/* Se difumina por los cuatro lados para que las prendas parezcan emerger del
	   negro en vez de estar metidas en una caja. */
	-webkit-mask-image:
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to left, #000 45%, transparent 92%);
	mask-image:
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to left, #000 45%, transparent 92%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.vitrina__columna { overflow: hidden; }

.vitrina__cinta {
	display: grid;
	gap: 14px;
	will-change: transform;
}

.vitrina__columna--sube .vitrina__cinta { animation: vitrina-sube 46s linear infinite; }
.vitrina__columna--baja .vitrina__cinta { animation: vitrina-baja 58s linear infinite; }

/* Velocidades distintas y sentidos opuestos: a la misma velocidad las dos
   columnas se leen como una sola imagen deslizándose. */
@keyframes vitrina-sube {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

@keyframes vitrina-baja {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

.vitrina:hover .vitrina__cinta { animation-play-state: paused; }

.vitrina__pieza {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--carbon);
	text-decoration: none;
}

.vitrina__pieza img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.35) contrast(1.05);
	transition: filter var(--transicion), transform 600ms cubic-bezier(.2, .7, .3, 1);
}

.vitrina__pieza:hover img,
.vitrina__pieza:focus-visible img {
	filter: none;
	transform: scale(1.04);
}

/* El nombre solo aparece al acercarse: en movimiento no se podría leer y sería
   ruido sobre las fotos. */
.vitrina__nombre {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .6rem .7rem;
	background: linear-gradient(to top, rgba(10, 10, 10, .92), transparent);
	color: var(--nieve);
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--transicion), transform var(--transicion);
}

.vitrina__pieza:hover .vitrina__nombre,
.vitrina__pieza:focus-visible .vitrina__nombre {
	opacity: 1;
	transform: none;
}

/* Sin la pantalla completa no hay sitio: por debajo de 1000 px el titular ocupa
   todo el ancho y la vitrina estorbaría más de lo que aporta. */
@media (max-width: 999px) {
	.vitrina { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vitrina__cinta { animation: none !important; }
}

/* ---- contenido ----------------------------------------------------------- */

.hero__contenido {
	position: relative;
	z-index: 1;
	max-width: 1340px;
	width: 100%;
	/* Sin esto, el hijo de un grid nunca baja de su ancho mínimo de contenido: el
	   titular en expandida es más ancho que un teléfono de 360 px y estiraba el
	   bloque entero fuera de la pantalla. */
	min-width: 0;
	margin-inline: auto;
	padding: clamp(6rem, 18vw, 9rem) var(--wp--preset--spacing--30, 1.5rem) clamp(4.5rem, 10vw, 6rem);
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	color: rgba(255, 255, 255, .62);
}

/* El punto que late. Es el pulso de la marca, literalmente, y el único elemento
   que se mueve en bucle en toda la página. */
.hero__punto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pulso);
	box-shadow: 0 0 0 0 rgba(198, 255, 61, .6);
	animation: hero-pulso 2s ease-out infinite;
}

@keyframes hero-pulso {
	0%   { box-shadow: 0 0 0 0 rgba(198, 255, 61, .55); }
	70%  { box-shadow: 0 0 0 9px rgba(198, 255, 61, 0); }
	100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); }
}

.hero__titular {
	margin: 0;
	/* El 11.5vw está calculado sobre la palabra más larga del titular en
	   expandida: por encima de eso, «ENTRENA.» ya no cabe en un teléfono de
	   360 px de ancho. */
	font-size: clamp(2.5rem, 11.5vw, 7.5rem);
	font-stretch: 118%;
	font-weight: 800;
	line-height: .86;
	letter-spacing: -.035em;
	text-transform: uppercase;
	max-width: 100%;
	overflow-wrap: break-word;
}

.hero__linea {
	display: block;
	/* Cada línea entra por debajo de la anterior, con un desfase. La máscara del
	   contenedor es lo que hace que parezca que salen de una ranura. */
	animation: hero-sube 900ms cubic-bezier(.2, .8, .25, 1) both;
}

.hero__linea--solida { color: var(--nieve); animation-delay: .1s; }

/* La línea calada: el contorno sin relleno. Es lo que da el aire de rotulación
   deportiva sin recurrir a un degradado. */
.hero__linea--calada {
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .85);
	animation-delay: .22s;
}

.hero__linea--acento { color: var(--pulso); animation-delay: .34s; }

@keyframes hero-sube {
	from { opacity: 0; transform: translateY(.42em); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 719px) {
	/* A tamaño pequeño un contorno de 2px se come la contraforma de las letras. */
	.hero__linea--calada { -webkit-text-stroke-width: 1.2px; }
}

.hero__entrada {
	margin: 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--realce, 1.25rem);
	color: rgba(255, 255, 255, .78);
}

.hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: .5rem;
}

/*
 * Con la vitrina ocupando la derecha, el texto se queda en su mitad. No se
 * estrecha el contenedor —perdería el centrado de la página— sino lo que va
 * dentro, que es lo que no debe cruzar por debajo de las fotos.
 */
@media (min-width: 1000px) {
	.hero__contenido > * { max-width: min(560px, 47vw); }

	/*
	 * El titular no se parte nunca: «ENTRENA.» cortado en «ENTREN / A.» era peor
	 * que cualquier tamaño. Se fija el cuerpo al ancho que deja la vitrina —unos
	 * 6.4vw— y se le quita el límite de ancho que heredaba de la regla de arriba.
	 */
	.hero__titular {
		max-width: none;
		white-space: nowrap;
		font-size: clamp(3rem, 6.4vw, 6.5rem);
	}

}

/* ---- el visor de telemetría --------------------------------------------- */

.hero__visor {
	position: absolute;
	right: var(--wp--preset--spacing--30, 1.5rem);
	top: calc(var(--alto-cabecera) + 2rem);
	z-index: 1;
	width: min(260px, 44vw);
	background: rgba(23, 24, 27, .72);
	backdrop-filter: blur(10px);
	border-color: rgba(198, 255, 61, .28);
	animation: hero-sube 900ms cubic-bezier(.2, .8, .25, 1) .5s both;
}

.hero__visor-titulo { margin: 0 0 .9rem; color: rgba(255, 255, 255, .5); }

.lecturas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.lectura {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0 .5rem;
}

.lectura__rotulo {
	grid-row: 1;
	font-family: "IBM Plex Mono", monospace;
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .45);
}

.lectura__valor {
	grid-row: 1;
	font-family: "IBM Plex Mono", monospace;
	font-size: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--pulso);
	line-height: 1;
}

.lectura__unidad {
	grid-column: 2;
	grid-row: 2;
	font-family: "IBM Plex Mono", monospace;
	font-size: .5625rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .35);
}

/* La traza del perfil de la sesión: se dibuja sola al entrar, de izquierda a
   derecha, como si el reloj la estuviera trazando. */
.traza {
	width: 100%;
	height: 46px;
	margin-top: 1rem;
	color: var(--pulso);
	opacity: .85;
}

.traza__linea {
	stroke-dasharray: 340;
	stroke-dashoffset: 340;
	animation: traza-dibuja 1.8s cubic-bezier(.4, 0, .2, 1) .9s both;
}

@keyframes traza-dibuja {
	to { stroke-dashoffset: 0; }
}

@media (max-width: 899px) {
	/*
	 * En pantallas estrechas el visor taparía el titular: baja al flujo y se
	 * reordena en tres columnas. Apilado ocupaba 120 px de alto y empujaba el
	 * hero fuera de la ventana en los teléfonos cortos.
	 */
	.hero__visor {
		position: static;
		width: auto;
		margin: .5rem var(--wp--preset--spacing--30, 1.5rem) 0;
		padding: .85rem 1rem;
		/* Sin esto el visor se estira para llenar su fila del grid y mide 220 px
		   en vez de los 96 que ocupa su contenido. */
		align-self: start;
	}

	.hero__visor-titulo { margin-bottom: .6rem; }

	.lecturas {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 .75rem;
	}

	.lectura {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.lectura__rotulo,
	.lectura__valor,
	.lectura__unidad {
		grid-column: 1;
		grid-row: auto;
	}

	.lectura__valor { font-size: 1.125rem; margin-block: .15rem; }

	/* La traza necesita ancho para leerse; a esta escala es una línea temblorosa
	   sin información. */
	.traza { display: none; }

	.hero { align-items: stretch; }

	.hero__contenido {
		padding-top: clamp(3.5rem, 13vw, 5.5rem);
		padding-bottom: clamp(1.25rem, 5vw, 2rem);
		gap: 1.1rem;
	}

	/* Los dos botones en una sola fila. Apilados se comían 68 px y empujaban el
	   visor fuera de la primera pantalla. */
	.hero__acciones {
		margin-top: .25rem;
		width: 100%;
		flex-wrap: nowrap;
		gap: .5rem;
	}

	.hero__acciones .boton {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: .6rem;
		font-size: .75rem;
		letter-spacing: .06em;
	}
}

/*
 * Teléfonos cortos (640–700 px de alto). Ahí no caben a la vez el titular, el
 * texto, los botones y el visor: algo sobra. Sobra el visor, que es el adorno
 * informativo; el titular y el botón de comprar se quedan enteros.
 */
@media (max-width: 899px) and (max-height: 700px) {
	.hero { min-height: calc(100svh - var(--alto-cabecera)); }
	.hero__visor { display: none; }
	.hero__contenido { padding-top: 2.25rem; padding-bottom: 1rem; gap: .8rem; }
	.hero__entrada { font-size: .9375rem; }

	/* El titular también cede: en una pantalla de 640 px de alto, tres líneas al
	   tamaño normal se comen la mitad de lo disponible. */
	.hero__titular { font-size: clamp(2rem, 9.5vw, 3rem); }
}

/* ---- el pie del hero ----------------------------------------------------- */

.hero__bajar {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255, 255, 255, .55);
	text-decoration: none;
	z-index: 1;
}

.hero__bajar:hover { color: var(--pulso); }

.hero__flecha {
	width: 1px;
	height: 22px;
	background: currentColor;
	animation: hero-cae 1.8s ease-in-out infinite;
	transform-origin: top;
}

@keyframes hero-cae {
	0%, 100% { transform: scaleY(.4); opacity: .4; }
	50%      { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 899px) {
	.hero__bajar { display: none; }
}

/* ------------------------------------------------------------ categorías -- */

.categorias {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	background: var(--linea);
}

@media (min-width: 720px) {
	.categorias { grid-template-columns: repeat(5, 1fr); }
	/* La primera categoría manda: ocupa dos huecos y abre la fila. */
	.categorias__pieza:first-child { grid-column: span 2; }
}

/* min-width:0 por el mismo motivo que en el hero: el nombre en expandida define
   un ancho mínimo que estira la cuadrícula más allá de la pantalla. */
.categorias__pieza { background: var(--nieve); min-width: 0; }

.categorias__enlace {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .15rem;
	min-height: clamp(180px, 34vw, 320px);
	padding: 1.25rem;
	color: var(--nieve);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	background: var(--carbon);
}

.categorias__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.4);
	transition: transform 600ms cubic-bezier(.2, .7, .3, 1), filter var(--transicion);
}

.categorias__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 35%, rgba(10, 10, 10, .85) 100%);
}

.categorias__enlace:hover .categorias__foto,
.categorias__enlace:focus-visible .categorias__foto {
	transform: scale(1.05);
	filter: grayscale(0);
}

.categorias__nombre {
	font-size: clamp(1.05rem, 4.6vw, 2rem);
	line-height: 1;
	overflow-wrap: break-word;
	hyphens: auto;
}

.categorias__cuenta {
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .62);
}

/* ------------------------------------------------------------- colección -- */

.coleccion {
	max-width: 1340px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30, 1.5rem);
}

.coleccion__encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.75rem;
}

.coleccion__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--titulo, clamp(1.75rem, 5vw, 2.5rem));
}

.coleccion__pie {
	margin: .5rem 0 0;
	color: var(--grafito);
	font-size: .9375rem;
}

.carrusel__mandos { display: flex; gap: .4rem; flex-shrink: 0; }

.carrusel__boton {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--linea);
	color: var(--tinta);
	cursor: pointer;
	transition: background var(--transicion), border-color var(--transicion), opacity var(--transicion);
}

.carrusel__boton svg { width: 19px; height: 19px; }
.carrusel__boton:hover:not(:disabled) { background: var(--tinta); color: var(--nieve); border-color: var(--tinta); }
.carrusel__boton:disabled { opacity: .3; cursor: default; }

/* En móvil los mandos sobran: se desliza con el dedo. */
@media (max-width: 719px) {
	.carrusel__mandos { display: none; }
}

/* ------------------------------------------------------- lista y tarjetas -- */

.productos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem .75rem;
}

@media (min-width: 720px) {
	.productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.5rem; }
}

@media (min-width: 1100px) {
	.productos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* El carrusel: la misma lista, en una sola fila que se desliza. */
.productos--pista {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--wp--preset--spacing--30, 1.5rem);
	padding-bottom: .5rem;
	scrollbar-width: none;
}

.productos--pista::-webkit-scrollbar { display: none; }

.productos--pista > li {
	flex: 0 0 clamp(210px, 44vw, 290px);
	scroll-snap-align: start;
}

/* WooCommerce añade sus propias clases a cada <li> del bucle. */
.productos > li,
.productos .product {
	position: relative;
	margin: 0;
	list-style: none;
}

.tarjeta__lienzo {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--humo);
	margin-bottom: .9rem;
}

/* El selector va cargado a propósito: WooCommerce impone
   `ul.products li.product img { height: auto }` con esa misma especificidad, y
   con `height:auto` la foto no llena el marco 3:4 y deja una franja vacía. */
.tarjeta__lienzo .tarjeta__foto,
.woocommerce ul.products li.product .tarjeta__lienzo img.tarjeta__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms cubic-bezier(.2, .7, .3, 1), opacity 350ms ease;
}

/* La segunda foto de la galería, revelada al pasar por encima. */
.tarjeta__foto--reverso {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.product:hover .tarjeta__foto--reverso,
.product:focus-within .tarjeta__foto--reverso { opacity: 1; }

.product:hover .tarjeta__foto,
.product:focus-within .tarjeta__foto { transform: scale(1.04); }

/* En pantallas táctiles no hay «encima»: la segunda foto nunca se vería, así que
   se deja quieta la primera y no se promete una interacción que no existe. */
@media (hover: none) {
	.tarjeta__foto--reverso { display: none; }
	.product:hover .tarjeta__foto { transform: none; }
}

.tarjeta__distintivo {
	position: absolute;
	top: .6rem;
	left: .6rem;
	z-index: 2;
	font-family: "IBM Plex Mono", monospace;
	font-size: .625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: .3rem .5rem;
	background: var(--tinta);
	color: var(--nieve);
}

.tarjeta__distintivo.es-rebaja { background: var(--pulso); color: var(--pulso-texto); }
.tarjeta__distintivo.es-agotado { background: var(--grafito); color: var(--nieve); }

.tarjeta__categoria { display: block; margin-bottom: .3rem; }

/* El nombre del producto que pinta WooCommerce. */
.woocommerce-loop-product__title {
	font-family: Archivo, sans-serif;
	font-size: .9375rem !important;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
	margin: 0 0 .35rem !important;
	padding: 0 !important;
}

.productos .price {
	display: block;
	font-family: "IBM Plex Mono", monospace;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	color: var(--tinta);
	margin-bottom: .55rem;
}

.productos .price del { color: var(--grafito); margin-right: .4rem; }
.productos .price ins { text-decoration: none; font-weight: 600; }

/* Las tallas en la tarjeta: la respuesta a «¿hay de la mía?» sin entrar. */
.tarjeta__tallas {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: 0 0 .65rem;
	padding: 0;
}

.talla {
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	min-width: 26px;
	padding: .2rem .35rem;
	text-align: center;
	border: 1px solid var(--linea);
	color: var(--tinta);
}

.talla--sin {
	color: var(--grafito);
	border-color: transparent;
	background: var(--humo);
	text-decoration: line-through;
}

/* El botón rápido de añadir. En escritorio aparece sobre la foto al acercarse;
   en táctil vive siempre debajo, porque ahí no hay hover que lo revele. */
.productos .button,
.productos .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: "IBM Plex Mono", monospace;
	/* En un teléfono estos botones aparecen doce veces seguidas: cada milímetro
	   que ocupan de más es scroll que separa una prenda de la siguiente. */
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	padding: .65rem .75rem;
	background: var(--tinta);
	color: var(--nieve);
	border: 0;
	border-radius: 0;
	text-decoration: none;
	transition: background var(--transicion), color var(--transicion);
}

.productos .button:hover { background: var(--pulso); color: var(--pulso-texto); }

@media (hover: hover) and (min-width: 720px) {
	.productos .button {
		position: absolute;
		left: 0;
		right: 0;
		/* Justo encima del borde inferior de la foto. */
		top: calc(100% / 4 * 3 - 44px);
		width: auto;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity var(--transicion), transform var(--transicion), background var(--transicion);
	}

	.product:hover .button,
	.product:focus-within .button {
		opacity: 1;
		transform: none;
	}
}

/* El aviso de «añadido» que WooCommerce inserta junto al botón. */
.productos .added_to_cart {
	background: var(--pulso);
	color: var(--pulso-texto);
	margin-top: .4rem;
}

/* -------------------------------------------------------------- filtros --- */

.filtros {
	border-block: 1px solid var(--linea);
	padding-block: 1rem;
	margin-bottom: 2rem;
}

.filtros__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.25rem 2rem;
}

.filtros__grupo {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.filtros__grupo legend { padding: 0; margin-bottom: .5rem; }

.filtros__opciones {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
}

.filtros__opcion {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .4rem .65rem;
	border: 1px solid var(--linea);
	cursor: pointer;
	transition: border-color var(--transicion), background var(--transicion);
}

.filtros__opcion:hover { border-color: var(--tinta); }

/* La casilla real se queda: es la que da el estado y el foco del teclado. Solo se
   esconde a la vista, nunca con display:none. */
.filtros__opcion input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.filtros__opcion:has(input:checked) {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--nieve);
}

.filtros__opcion:has(input:focus-visible) {
	outline: 3px solid var(--pulso);
	outline-offset: 2px;
}

/* La muestra de color, del tamaño justo para distinguirse sin gritar. */
.filtros__opcion--color::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--muestra, #ccc);
	box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .18);
	flex-shrink: 0;
}

.filtros__precio {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.filtros__precio input {
	width: 88px;
	font-family: "IBM Plex Mono", monospace;
	font-size: .75rem;
	padding: .45rem .55rem;
	border: 1px solid var(--linea);
	background: var(--nieve);
}

.filtros__aplicar {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: var(--tinta);
	color: var(--nieve);
	border: 0;
	cursor: pointer;
}

.filtros__aplicar svg { width: 16px; height: 16px; }
.filtros__aplicar:hover { background: var(--pulso); color: var(--pulso-texto); }

.filtros__orden { margin-left: auto; }
.filtros__orden span { display: block; margin-bottom: .5rem; }

.filtros__orden select {
	font-family: "IBM Plex Mono", monospace;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .45rem .65rem;
	border: 1px solid var(--linea);
	background: var(--nieve);
	cursor: pointer;
}

/* ----------------------------------------------------- página de producto -- */

.migas {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding-block: 1.25rem;
}

.migas a { color: var(--grafito); text-decoration: none; }
.migas a:hover { color: var(--tinta); }
.migas__sep { color: var(--linea); }

.single-product div.product {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	/*
	 * El bloque de la variación aparece al elegir talla y color, siempre por
	 * debajo de lo que se está mirando. Sin esto, el navegador reajustaría el
	 * scroll para «compensarlo» y la ficha daría un tirón.
	 */
	overflow-anchor: none;
}

@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
	}

	/*
	 * La ficha NO va en sticky.
	 *
	 * Con la ficha técnica, la guía de tallas y los swatches, la columna mide más
	 * de 1000 px: más que la ventana. Un elemento sticky más alto que el viewport
	 * se queda clavado en cuanto empiezas a bajar y luego se suelta de golpe al
	 * acabar su contenedor, y eso se ve exactamente como que «la información se
	 * mueve sola». Quieta es más predecible y no se pierde nada.
	 */
}

.single-product .product_title {
	font-size: var(--wp--preset--font-size--titulo, clamp(1.75rem, 5vw, 2.5rem));
	font-stretch: 118%;
	line-height: .96;
	margin: 0 0 .75rem;
}

.single-product .summary .price {
	font-family: "IBM Plex Mono", monospace;
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	margin-bottom: 1.25rem;
}

.single-product .summary .price del { color: var(--grafito); font-size: 1rem; }
.single-product .summary .price ins { text-decoration: none; font-weight: 600; }

/* --------------------------------------------------------------- swatches -- */

.swatches { margin-bottom: 1rem; }

/*
 * El desplegable original sigue en el DOM porque es quien manda; solo se esconde
 * de la vista. Quitarlo obligaría a reimplementar la lógica de variaciones.
 *
 * El selector lleva el prefijo largo de WooCommerce a propósito: su regla
 * `form.cart .variations select { width: 100% }` gana por especificidad y estiraba
 * este select invisible hasta 938 px, sacando la página del ancho de la ventana.
 * Es el recorte de «visualmente oculto» completo, no un simple opacity.
 */
.swatches__origen,
.woocommerce div.product form.cart .variations .swatches__origen {
	position: absolute;
	width: 1px;
	height: 1px;
	min-width: 0;
	max-width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

.swatches__lista {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
}

.swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 44px;
	padding: .5rem .75rem;
	background: var(--nieve);
	border: 1px solid var(--linea);
	font-family: "IBM Plex Mono", monospace;
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}

.swatch:hover:not(:disabled) { border-color: var(--tinta); }

.swatch.esta-elegido {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--nieve);
}

/* Combinación imposible con lo ya elegido: se ve apagada y tachada, y el botón
   queda deshabilitado de verdad, no solo en apariencia. */
.swatch.esta-inerte {
	opacity: .35;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* El swatch de color es la muestra; el nombre queda para lectores de pantalla. */
.swatch--color {
	min-width: 44px;
	padding: 0;
	background: var(--muestra, #ccc);
	box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .16);
}

.swatch--color .swatch__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.swatch--color.esta-elegido { background: var(--muestra, #ccc); }

/* El anillo de elegido va por fuera de la muestra: sobre un color claro un borde
   interior se pierde. */
.swatch--color.esta-elegido::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 2px solid var(--tinta);
}

.swatch__marca { display: none; }

/* ------------------------------------------------- formulario de compra --- */
/*
 * WooCommerce maqueta las variaciones como una tabla de dos columnas: etiqueta a
 * la izquierda, opciones a la derecha. En un teléfono eso deja los swatches en
 * una franja de media pantalla. Aquí se desarma en bloques apilados.
 */

.woocommerce div.product form.cart .variations {
	display: block;
	width: 100%;
	border: 0;
	margin: 0 0 1.25rem;
}

.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product form.cart .variations tr + tr { margin-top: 1.1rem; }

.woocommerce div.product form.cart .variations th.label label {
	display: block;
	margin-bottom: .55rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--grafito);
}

/* «Limpiar»: quitar la variación elegida. Discreto, pero alcanzable. */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: .6rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--grafito);
	text-decoration: underline;
}

.woocommerce div.product form.cart .reset_variations:hover { color: var(--tinta); }

/* Cantidad y botón, en una sola fila que llena el ancho disponible. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: stretch;
}

.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	flex: 1 0 100%;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	gap: .5rem;
	align-items: stretch;
}

.woocommerce div.product form.cart .quantity { flex: 0 0 auto; }

.woocommerce div.product form.cart .quantity input[type="number"] {
	height: 100%;
	width: 72px;
	text-align: center;
	font-family: "IBM Plex Mono", monospace;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 52px;
}

/* El precio de la variación elegida, cuando WooCommerce lo revela. */
.woocommerce div.product .woocommerce-variation-price { margin-bottom: .75rem; }

/* ------------------------------------------------------------ pestañas ---- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	padding: 0;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--linea);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .75rem 1rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--grafito);
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--tinta);
	border-bottom-color: var(--pulso);
}

.woocommerce div.product .woocommerce-tabs .panel > h2 { display: none; }

/* Los relacionados y la sección de pestañas ocupan el ancho entero, debajo de
   las dos columnas de la ficha. */
.single-product div.product .woocommerce-tabs,
.single-product div.product .related {
	grid-column: 1 / -1;
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

.single-product .related > h2 {
	font-size: var(--wp--preset--font-size--titulo, clamp(1.75rem, 5vw, 2.5rem));
	font-stretch: 118%;
	margin-bottom: 1.5rem;
}

/* ---------------------------------------------------- ficha y guía tallas -- */

.ficha { margin: 1.5rem 0; }
.ficha__titulo { margin: 0 0 .7rem; }

.guia-tallas {
	border-top: 1px solid var(--linea);
	border-bottom: 1px solid var(--linea);
	padding-block: .9rem;
	margin-bottom: 1.5rem;
}

.guia-tallas summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
}

.guia-tallas summary::-webkit-details-marker { display: none; }

.guia-tallas summary::after {
	content: "+";
	font-family: "IBM Plex Mono", monospace;
	font-size: 1.1rem;
	color: var(--grafito);
	margin-left: auto;
}

.guia-tallas[open] summary::after { content: "−"; }

.guia-tallas__pista {
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	color: var(--grafito);
}

.guia-tallas__tabla {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}

.guia-tallas__tabla th,
.guia-tallas__tabla td {
	padding: .5rem .4rem;
	text-align: right;
	border-bottom: 1px solid var(--linea);
}

.guia-tallas__tabla thead th {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .625rem;
	color: var(--grafito);
}

.guia-tallas__tabla tbody th { text-align: left; }

.guia-tallas__nota {
	margin: .9rem 0 0;
	font-size: .8125rem;
	color: var(--grafito);
}

/* --------------------------------------------------------- beneficios ----- */

.beneficios {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--linea);
	border-block: 1px solid var(--linea);
}

@media (min-width: 720px) {
	.beneficios { grid-template-columns: repeat(3, 1fr); }
}

.beneficios__pieza {
	background: var(--nieve);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	display: grid;
	gap: .4rem;
}

.beneficios__titulo {
	font-family: Archivo, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: -.01em;
}

.beneficios__texto {
	margin: 0;
	font-size: .875rem;
	color: var(--grafito);
}

/* ------------------------------------------------------------- banner ----- */

.banner {
	background: var(--pulso);
	color: var(--pulso-texto);
	padding: clamp(2.5rem, 7vw, 4.5rem) var(--wp--preset--spacing--30, 1.5rem);
	text-align: center;
	display: grid;
	gap: 1.25rem;
	justify-items: center;
}

.banner__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--cartel, clamp(2.5rem, 8vw, 4rem));
	font-stretch: 118%;
	line-height: .9;
	text-wrap: balance;
}

.banner__texto {
	margin: 0;
	max-width: 46ch;
	font-size: 1.0625rem;
}

/* ------------------------------------------- carrito, caja y mi cuenta ---- */
/*
 * Aquí se conserva la estructura de WooCommerce y solo se le pone la ropa del
 * tema: son tres pantallas con mucha lógica y reescribirlas entero sería cambiar
 * mucho código por muy poco a cambio.
 */

.woocommerce table.shop_table,
.woocommerce-cart table.cart {
	border: 1px solid var(--linea);
	border-radius: 0;
	font-size: .9375rem;
}

.woocommerce table.shop_table th {
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--grafito);
}

.woocommerce .quantity input[type="number"],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--linea);
	border-radius: 0;
	padding: .75rem .85rem;
	font-size: .9375rem;
	background: var(--nieve);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--tinta);
	color: var(--nieve);
	border-radius: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .09em;
	padding: 1rem 1.75rem;
	transition: background var(--transicion), color var(--transicion);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--pulso);
	color: var(--pulso-texto);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--pulso);
	background: var(--humo);
	border-radius: 0;
	font-size: .9375rem;
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--tinta); }

/* El aviso de que esta tienda no cobra de verdad. Va donde se decide pagar. */
.aviso-demo {
	margin: 0 0 1.5rem;
	font-size: .875rem;
	line-height: 1.5;
}

.aviso-demo strong { display: block; margin-bottom: .2rem; }


/* ---- el visor, ya con la vitrina al lado -------------------------------- */
/*
 * Va al final del archivo A PROPÓSITO. La regla base de .hero__visor se declara
 * más arriba con la misma especificidad, así que un media query colocado antes
 * quedaba pisado y el panel se estiraba de arriba abajo de la pantalla.
 *
 * Baja a la esquina y se apoya SOBRE la vitrina: ese solape es lo que da
 * profundidad, en vez de tres bloques puestos uno al lado del otro.
 */
@media (min-width: 1000px) {
	.hero__visor {
		top: auto;
		bottom: clamp(2rem, 5vw, 3.5rem);
		right: clamp(1.5rem, 4vw, 3rem);
		height: auto;
	}
}

/* Red de seguridad: si algún plugin vuelve a inyectar el panel lateral del mini
   carrito de WooCommerce, que no estire la página a lo ancho. La tienda usa su
   propio carrito. */
.wc-block-mini-cart__drawer,
.wp-block-woocommerce-mini-cart-contents {
	display: none !important;
}

/* ------------------------------------------------- galería del producto --- */
/*
 * WooCommerce fija el ancho de la galería con un estilo en línea que pone su
 * JavaScript, y la foto se quedaba a media columna con un hueco blanco al lado.
 * El !important es para ganarle a ese estilo en línea: no hay otra forma.
 */
.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin-bottom: 0;
}

.single-product .woocommerce-product-gallery__wrapper { margin: 0; }

.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Las miniaturas, en fila y del tamaño justo para reconocerse. */
.single-product .flex-control-thumbs {
	display: flex;
	gap: .5rem;
	margin: .6rem 0 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs li {
	width: 76px;
	margin: 0;
	list-style: none;
}

.single-product .flex-control-thumbs img {
	width: 100%;
	height: auto;
	opacity: .55;
	cursor: pointer;
	transition: opacity var(--transicion);
}

.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }