/* ==========================================================================
   Catálogo, colección y ficha de producto
   Réplica de "Catálogo - Cueros Wears.dc.html". Los filtros, la rejilla y la
   ordenación los pinta WooCommerce; aquí sólo se les da la forma del export.
   Se carga aparte de style.css: sólo hace falta en las pantallas de tienda.
   ========================================================================== */

.wears-shop {
	background: var( --wp--preset--color--base );
}

/* --------------------------------------------------------------------------
   Cabecera violeta
   -------------------------------------------------------------------------- */

.wears-hero-cat {
	padding: clamp( 32px, 4vw, 60px ) clamp( 20px, 3vw, 40px ) clamp( 26px, 3.2vw, 42px );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-hero-cat__inner {
	max-width: var( --wears-bar-max );
	margin-inline: auto;
}

.wears-hero-cat__crumb {
	margin: 0 0 16px;
	color: var( --wears-on-dark-70 );
	font-size: 11px;
}

.wears-hero-cat__crumb a {
	color: inherit;
	text-decoration: none;
}

.wears-hero-cat__crumb a:hover {
	color: var( --wp--preset--color--accent );
}

.wears-hero-cat__eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 16px;
	color: var( --wp--preset--color--accent );
	font-size: 11px;
	font-weight: 500;
	gap: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wears-hero-cat__rule {
	width: clamp( 28px, 4vw, 52px );
	background: currentColor;
}

.wears-hero-cat__title {
	max-width: 20ch;
	margin: 0 0 16px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 30px, 5.2vw, 60px );
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

.wears-hero-cat__lead {
	max-width: 54ch;
	margin: 0 0 clamp( 24px, 3vw, 36px );
	color: var( --wears-on-dark-70 );
	font-size: clamp( 14px, 1.45vw, 18px );
	line-height: 1.65;
}

.wears-hero-cat__label {
	display: flex;
	align-items: center;
	margin: 0 0 14px;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	font-weight: 500;
	gap: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wears-hero-cat__line {
	flex: 1;
	height: 1px;
	background: rgba( 237, 230, 216, 0.2 );
}

.wears-hero-cat__shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.wears-hero-cat__shortcuts a {
	padding: 10px 16px;
	border: 1px solid var( --wears-on-dark-30 );
	border-radius: var( --wears-radius );
	color: var( --wp--preset--color--base );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-hero-cat__shortcuts a:hover {
	border-color: var( --wp--preset--color--accent );
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
}

/* El chip de la colección en la que estás va relleno de dorado con letra
   violeta, igual que el «Todo» cuando se ve el catálogo entero. */
.wears-hero-cat__shortcuts a.is-activa {
	border-color: var( --wp--preset--color--accent );
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
}

/* --------------------------------------------------------------------------
   Cabecera de colección — foto a sangre con degradado violeta

   El export usa un paneo lento e infinito sobre la foto (26 s, ida y vuelta).
   Es el único movimiento continuo del sitio y se apaga con prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.wears-hero-col {
	position: relative;
	display: flex;
	/* El export: `max(400px, 46vh)` en móvil y `max(460px, 62vh)` en escritorio.
	   Iba con `vw` en vez de `vh`, y en un portátil apaisado se quedaba corta. */
	min-height: max( 400px, 46vh );
	align-items: flex-end;
	overflow: hidden;
	background: var( --wp--preset--color--primary-hover );
}

/* La foto va como <img> y no como fondo CSS: así el navegador puede elegir
   ancho por srcset. Un fondo sólo admite un fichero, y esta franja mide de
   390px a 1920px de ancho según el aparato. */
.wears-hero-col__foto {
	position: absolute;
	inset: 0;
	animation: wears-paneo 26s ease-in-out infinite alternate;
}

.wears-hero-col__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

@media ( min-width: 900px ) {
	.wears-hero-col {
		min-height: max( 460px, 62vh );
	}
}

@keyframes wears-paneo {
	from {
		transform: scale( 1.03 );
	}

	to {
		transform: scale( 1.14 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wears-hero-col__foto {
		animation: none;
	}
}

/* Reforzado en la pasada de accesibilidad (06/08): las migas daban 3,57:1
   medidos sobre la foto y AA pide 4,5. Dos capas: el degradado diagonal del
   export (con el tramo medio de 0.08 a 0.32) más una banda vertical sobre la
   columna izquierda, que es donde vive todo el texto — la foto queda íntegra
   a la derecha, que es donde está el producto. */
.wears-hero-col__velo {
	position: absolute;
	background:
		linear-gradient(
			90deg,
			rgba( 28, 0, 87, 0.5 ) 0%,
			rgba( 28, 0, 87, 0 ) 62%
		),
		linear-gradient(
			170deg,
			/* DWCW-187 (07/08): tinte superior en beige a prueba del cliente. */
			rgba( 237, 230, 216, 0.55 ) 0%,
			rgba( 28, 0, 87, 0.32 ) 45%,
			rgba( 28, 0, 87, 0.9 ) 100%
		);
	inset: 0;
}

/* Sin foto no hace falta oscurecer nada: el violeta ya es el fondo. */
.wears-hero-col--liso .wears-hero-col__velo {
	background: none;
}

.wears-hero-col__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: 92px clamp( 20px, 3vw, 40px ) clamp( 40px, 5vw, 64px );
}

.wears-hero-col__crumb {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 16px;
	color: rgba( 237, 230, 216, 0.92 );
	font-size: 11px;
	gap: 6px;
	text-shadow: 0 1px 10px rgba( 26, 22, 19, 0.55 );
}

.wears-hero-col__crumb a {
	color: inherit;
	text-decoration: none;
}

.wears-hero-col__crumb a:hover {
	color: var( --wp--preset--color--accent );
}

/* El texto del eyebrow pasó a marfil en la pasada de accesibilidad: el
   dorado sobre foto daba ~3:1 y no hay velo razonable que lo salve. El
   gesto dorado lo conserva el filete (.wears-hero-col__rule). */
.wears-hero-col__eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 16px;
	color: var( --wp--preset--color--base );
	font-size: 11px;
	font-weight: 500;
	gap: 14px;
	letter-spacing: 0.22em;
	text-shadow: 0 1px 10px rgba( 26, 22, 19, 0.55 );
	text-transform: uppercase;
}

.wears-hero-col__eyebrow .wears-hero-col__rule {
	background: var( --wp--preset--color--accent );
}

.wears-hero-col__rule {
	width: clamp( 28px, 4vw, 56px );
	background: currentColor;
}

.wears-hero-col__title {
	margin: 0 0 16px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 34px, 6vw, 72px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wears-hero-col__lead {
	max-width: 52ch;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: clamp( 14px, 1.4vw, 17px );
	line-height: 1.6;
	text-shadow: 0 1px 10px rgba( 26, 22, 19, 0.55 );
}

/* --------------------------------------------------------------------------
   Barra de utilidades pegajosa
   -------------------------------------------------------------------------- */

.wears-utilbar {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid rgba( 26, 22, 19, 0.12 );
	background: rgba( 237, 230, 216, 0.96 );
	backdrop-filter: blur( 8px );
}

.wears-utilbar__inner {
	display: flex;
	max-width: var( --wears-bar-max );
	flex-wrap: wrap;
	align-items: center;
	margin-inline: auto;
	padding: 13px clamp( 20px, 3vw, 40px );
	gap: 12px;
}

.wears-utilbar__search {
	position: relative;
	min-width: 170px;
	flex: 1;
}

.wears-utilbar__search input {
	width: 100%;
	padding: 11px 38px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	background: #fff;
	color: var( --wp--preset--color--contrast );
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-utilbar__search input:focus {
	border-color: var( --wp--preset--color--accent );
}

.wears-utilbar__search svg {
	position: absolute;
	top: 50%;
	left: 12px;
	color: var( --wp--preset--color--contrast );
	opacity: 0.45;
	transform: translateY( -50% );
}

.wears-utilbar select {
	padding: 11px 12px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	border-radius: var( --wears-radius );
	background: #fff;
	color: var( --wp--preset--color--contrast );
	font-family: inherit;
	font-size: 12px;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Cuerpo: barra lateral de filtros + resultados
   -------------------------------------------------------------------------- */

.wears-shop__body {
	display: flex;
	max-width: var( --wears-bar-max );
	align-items: flex-start;
	margin-inline: auto;
	padding: clamp( 28px, 3.5vw, 52px ) clamp( 20px, 3vw, 40px ) clamp( 56px, 7vw, 96px );
	gap: clamp( 28px, 3.6vw, 56px );
}

.wears-shop__body > * {
	margin-block: 0;
}

/* Barra de filtros en violeta de marca con letras blancas (DWCW-173).
   El export la tenía en marfil; el cliente pidió el fondo de marca aquí y
   sólo aquí — el checkout se queda en claro para no saturar al pagar. */
.wears-filters {
	position: sticky;
	top: 130px;
	display: flex;
	width: 236px;
	flex-direction: column;
	flex-shrink: 0;
	padding: 26px 22px;
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	gap: 30px;
}

.wears-filters__group > * {
	margin-block: 0;
}

.wears-filters__title {
	margin: 0 0 14px;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Casillas: cuadrado de 14px con marco fino. */
.wears-filters .wc-block-product-filter-checkbox-list__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: 11px;
	list-style: none;
}

.wears-filters .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	color: var( --wp--preset--color--base );
	gap: 10px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.35;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-filters .wc-block-product-filter-checkbox-list__label:hover {
	color: var( --wp--preset--color--accent );
}

.wears-filters .wc-block-product-filter-checkbox-list__input-wrapper,
.wears-filters .wc-block-product-filter-checkbox-list__input {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border-radius: 0;
}

/* Sobre violeta, la casilla del sistema desaparece: marco dorado y marca
   dorada, dibujados a mano. */
.wears-filters .wc-block-product-filter-checkbox-list__input {
	border: 1px solid var( --wears-on-dark-45 );
	appearance: none;
	background: transparent;
	transition: border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-filters .wc-block-product-filter-checkbox-list__input:checked {
	border-color: var( --wp--preset--color--accent );
	background: var( --wp--preset--color--accent );
}

.wears-filters .wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

/* La marca de verificación que WooCommerce pinta encima va en violeta para
   que se lea sobre el dorado. */
.wears-filters .wc-block-product-filter-checkbox-list__mark {
	color: var( --wp--preset--color--primary );
	stroke: var( --wp--preset--color--primary );
}

.wears-filters .wc-block-product-filter-checkbox-list__count {
	margin-left: auto;
	color: var( --wears-on-dark-70 );
	font-size: 11px;
}

/* WooCommerce enmarca sus listas de filtro. El export no tiene ninguna caja:
   la barra lateral es texto sobre el fondo, sin contenedor. */
.wears-filters fieldset,
.wears-filters .wc-block-product-filter-checkbox-list,
.wears-filters .wc-block-product-filter-chips {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.wears-filters__group--color .wc-block-product-filter-chips__items,
.wears-filters__group--genero .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Muestras de color: círculo de 26px con el tono real de la pieza. El hex sale
   del meta del término y se inyecta como --wears-swatch desde PHP, para que
   sólo haya un sitio donde vive cada color. */
.wears-filters__group--color .wc-block-product-filter-chips__item {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var( --wears-on-dark-30 );
	border-radius: 50%;
	background: var( --wears-swatch, var( --wp--preset--color--rule ) );
	cursor: pointer;
	transition:
		box-shadow var( --wears-duration-micro ) var( --wears-easing ),
		transform var( --wears-duration-micro ) var( --wears-easing );
}

.wears-filters__group--color .wc-block-product-filter-chips__item:hover {
	transform: scale( 1.12 );
}

.wears-filters__group--color .wc-block-product-filter-chips__item[ aria-checked='true' ] {
	box-shadow: 0 0 0 2px var( --wp--preset--color--primary ), 0 0 0 3px var( --wp--preset--color--accent );
}

/* El nombre del color vive en el aria-label; en pantalla sólo va el círculo. */
.wears-filters__group--color .wc-block-product-filter-chips__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.wears-filters__group--genero .wc-block-product-filter-chips__item {
	padding: 6px 13px;
	border: 1px solid var( --wears-on-dark-30 );
	border-radius: 14px;
	background: transparent;
	color: var( --wp--preset--color--base );
	font-size: 11px;
}

.wears-filters__group--genero .wc-block-product-filter-chips__item[ aria-checked='true' ] {
	border-color: var( --wp--preset--color--accent );
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
}

/* Género todavía no tiene términos: mientras esté vacío, el grupo no se ve. */
.wears-filters__group--genero:not( :has( .wc-block-product-filter-chips__item ) ) {
	display: none;
}

/* Lo mismo con precio: sin precios cargados WooCommerce no pinta el rango, y
   un rótulo suelto sobre nada queda peor que no estar. */
.wears-filters__group:has( > .wp-block-woocommerce-product-filter-price:empty ) {
	display: none;
}

.wears-filters .wc-block-product-filter-clear-button,
.wears-filters__group--activos a {
	border-bottom: 1px solid var( --wears-bar-line );
	color: var( --wp--preset--color--accent );
	font-size: 10px;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

/* El rango de precio: la barra del deslizador tiene que verse sobre violeta. */
.wears-filters .wc-block-product-filter-price input[ type='range' ] {
	accent-color: var( --wp--preset--color--accent );
}

.wears-filters .wc-block-product-filter-price__text,
.wears-filters .wc-block-product-filter-price-content-price-range {
	color: var( --wears-on-dark-70 );
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   Resultados
   -------------------------------------------------------------------------- */

.wears-results {
	min-width: 0;
	flex: 1;
}

/* --------------------------------------------------------------------------
   Espera del filtrado sin recarga
   La clase la pone tienda.js al tocar un filtro y la quita cuando el router
   reemplaza la rejilla. Señal doble: resultados atenuados y un filete dorado
   recorriendo el borde superior — el mismo vocabulario que el resto del sitio.
   -------------------------------------------------------------------------- */

.wears-shop__body.is-cargando {
	cursor: progress;
}

.wears-shop__body.is-cargando .wears-results {
	position: relative;
	overflow: hidden;
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var( --wears-duration-micro ) var( --wears-easing );
}

.wears-shop__body.is-cargando .wears-results::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 34%;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var( --wp--preset--color--accent ) 30% 70%,
		transparent
	);
	animation: wears-filete-espera 1.1s var( --wears-easing ) infinite;
}

@keyframes wears-filete-espera {
	from {
		transform: translateX( -100% );
	}

	to {
		transform: translateX( 294% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wears-shop__body.is-cargando .wears-results {
		transition: none;
	}

	/* Sin movimiento: el filete se queda quieto, la atenuación ya avisa. */
	.wears-shop__body.is-cargando .wears-results::before {
		animation: none;
		width: 100%;
	}
}

.wears-results > * {
	margin-block: 0;
}

.wears-results .wc-block-product-results-count {
	margin-bottom: 20px;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wears-grid .wp-block-post-template,
.wears-grid .wc-block-product-template {
	display: grid;
	margin: 0;
	padding: 0;
	gap: clamp( 18px, 2.2vw, 30px );
	grid-template-columns: repeat( 2, 1fr );
	list-style: none;
}

@media ( min-width: 700px ) {
	.wears-grid .wp-block-post-template,
	.wears-grid .wc-block-product-template {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.wears-grid .wc-block-product,
.wears-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.wears-grid .wc-block-product > *,
.wears-grid .wp-block-post > * {
	margin-block: 0;
}

/* Foto 4:5. La imagen respira dentro del marco; la tarjeta no se mueve. */
.wears-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var( --wears-radius-media );
	aspect-ratio: 4 / 5;
	background: var( --wp--preset--color--primary );
}

/* WooCommerce envuelve la foto en un <a>; sin alto no llena el marco. */
.wears-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}

.wears-card__media img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform var( --wears-duration-image ) var( --wears-easing );
}

.wears-card__media:hover img {
	transform: scale( 1.07 );
}

/* Agotado: banda inferior sobre la foto, no un texto suelto. */
.wears-grid .outofstock .wears-card__media::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 8px;
	background: rgba( 28, 0, 87, 0.88 );
	color: var( --wp--preset--color--base );
	content: 'Agotado';
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

.wears-card__coleccion {
	margin: 14px 0 5px;
	color: rgba( 26, 22, 19, 0.4 );
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wears-card__coleccion a {
	color: inherit;
	text-decoration: none;
}

.wears-card__nombre {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.wears-card__nombre a {
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
}

.wears-card__nombre a:hover {
	color: var( --wp--preset--color--support );
}

.wears-card__sku {
	margin: 0 0 8px;
	color: rgba( 26, 22, 19, 0.4 );
	font-size: 11px;
	letter-spacing: 0.06em;
}

.wears-card__precio {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
}

/* Sin precio confirmado no se pinta un número: se marca el hueco. El filtro
   `wears_precio_sin_ceros` garantiza que nunca salga "$0". */
.wears-precio-pendiente {
	color: rgba( 26, 22, 19, 0.35 );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Sobre violeta, el gris no se lee. */
.wears-barra-compra .wears-precio-pendiente,
.wears-cross .wears-precio-pendiente {
	color: var( --wears-on-dark-70 );
}

.wears-card__boton {
	margin-top: auto;
}

/* WooCommerce pinta su botón con
   `.wp-block-button.wc-block-components-product-button .wp-block-button__link`,
   que son **tres** clases. Para ganarle sin `!important` hay que nombrar
   también `.wp-block-button` en el contenedor: así son tres clases y un
   elemento, y manda la nuestra por venir después. */
.wp-block-button.wears-card__boton a.wp-block-button__link,
.wp-block-button.wears-card__boton button.wp-block-button__link,
.wears-card__boton a,
.wears-card__boton button {
	display: block;
	width: 100%;
	/* WooCommerce trae `height: 100%` para este botón. Aquí estira el botón
	   contra el alto del wrapper —que a su vez depende del botón— y tras el
	   añadido AJAX lo dejaba a ~94px. El alto lo dicta el contenido. */
	height: auto;
	padding: 12px;
	border: 1.5px solid var( --wp--preset--color--primary );
	border-radius: var( --wears-radius );
	background: transparent;
	color: var( --wp--preset--color--primary );
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

.wp-block-button.wears-card__boton a.wp-block-button__link:hover,
.wp-block-button.wears-card__boton button.wp-block-button__link:hover,
.wears-card__boton a:hover,
.wears-card__boton button:hover {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* El bloque de WooCommerce se centra a sí mismo; la tarjeta lo quiere a ancho
   completo, pegado al fondo. */
.wears-card__boton.wp-block-button {
	display: block;
	width: 100%;
	margin-top: auto;
}

/* Al añadir por AJAX, WooCommerce cuelga un enlace "Ver carrito" detrás del
   botón. Aquí ese enlace hereda el estilo de botón de arriba y se pinta como
   un segundo botón que desborda la tarjeta y se monta sobre la fila siguiente.
   Sobra: el aviso de "ya está dentro" lo dan el texto del propio botón
   ("1 en el carrito") y el contador de la cabecera. */
.wears-card__boton .added_to_cart {
	display: none;
}

/* --------------------------------------------------------------------------
   Paginación y estado vacío
   -------------------------------------------------------------------------- */

.wears-paginacion {
	margin-top: clamp( 36px, 4.5vw, 60px );
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Los números medían 8×14px: imposibles de acertar con el pulgar. La WCAG 2.2
   pide 24px mínimo; aquí van a 40 para que se puedan pulsar de verdad. */
.wears-paginacion a,
.wears-paginacion span {
	display: inline-flex;
	min-width: 40px;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.wears-paginacion .current {
	border-bottom: 1px solid var( --wp--preset--color--accent );
	font-weight: 600;
}

.wears-vacio {
	padding: clamp( 48px, 7vw, 96px ) 24px;
	border: 1px solid rgba( 26, 22, 19, 0.14 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
	text-align: center;
}

.wears-vacio .wears-anchor__mark {
	margin: 0 auto 22px;
}

.wears-vacio__titulo {
	margin: 0 0 10px;
	font-size: clamp( 19px, 2.4vw, 25px );
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-vacio__texto {
	max-width: 42ch;
	margin: 0 auto 26px;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 14px;
	line-height: 1.75;
}

.wears-vacio__boton {
	display: inline-block;
	padding: 14px 30px;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.wears-vacio__boton:hover {
	background: var( --wp--preset--color--primary-hover );
	color: var( --wp--preset--color--base );
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media ( max-width: 899px ) {
	.wears-shop__body {
		flex-direction: column;
	}

	.wears-filters {
		position: static;
		width: 100%;
	}
}

/* ==========================================================================
   Ficha de producto
   Réplica de "Ficha de producto - Náuticos Vela Urban Azul.dc.html".
   ========================================================================== */

.wears-ficha {
	padding-bottom: var( --wears-seccion );
	background: var( --wp--preset--color--base );
}

.wears-ficha__migas {
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: 20px clamp( 20px, 3vw, 40px ) 0;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 11px;
}

.wears-ficha__migas a {
	color: inherit;
	text-decoration: none;
}

.wears-ficha__migas a:hover {
	color: var( --wp--preset--color--support );
}

/* --------------------------------------------------------------------------
   Galería + información
   -------------------------------------------------------------------------- */

.wears-ficha__cabeza {
	display: grid;
	max-width: var( --wears-bar-max );
	align-items: flex-start;
	margin-inline: auto;
	padding: 20px clamp( 20px, 3vw, 40px ) 0;
	gap: clamp( 28px, 4vw, 64px );
	grid-template-columns: 1fr;
}

@media ( min-width: 900px ) {
	.wears-ficha__cabeza {
		grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr );
	}

	/* La columna de compra acompaña al scroll de la galería, como el export. */
	.wears-ficha__info {
		position: sticky;
		top: 100px;
	}
}

.wears-ficha__galeria > *,
.wears-ficha__info > * {
	margin-block: 0;
}

/* Sin esto, el ancho mínimo intrínseco de la fila de miniaturas (5 × 64px)
   estira la columna de la galería más allá del viewport en móvil. */
.wears-ficha__cabeza > * {
	min-width: 0;
}

/* Galería propia (06/08): visor con las fotos apiladas, carrusel de
   miniaturas debajo y lightbox en <dialog>. Sin zoom al hover y sin lupa.
   El marcado de WooCommerce se conserva; assets/js/producto.js añade las
   clases y construye miniaturas y lightbox. */
.wears-ficha__galeria .woocommerce-product-gallery {
	width: 100%;
}

.wears-galeria__visor {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var( --wears-radius-media );
	background: var( --wp--preset--color--rule );
	cursor: zoom-in;
}

.wears-galeria__visor:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
}

/* WooCommerce reparte las fotos 2..n al 25% con `.woocommerce div.product
   div.images ...:nth-child(n+2)`, que suma (0,5,2). El `:nth-child(n)` de
   aquí no filtra nada y el ancestro `.wears-ficha__galeria` tampoco: sólo
   suben la especificidad a (0,6,0) para ganarles sin !important. */
.wears-ficha__galeria .woocommerce-product-gallery.wears-galeria .wears-galeria__visor .woocommerce-product-gallery__image:nth-child(n) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var( --wears-easing );
}

.wears-ficha__galeria .woocommerce-product-gallery.wears-galeria .wears-galeria__visor .woocommerce-product-gallery__image.is-activa:nth-child(n) {
	opacity: 1;
}

.woocommerce-product-gallery.wears-galeria .wears-galeria__visor .woocommerce-product-gallery__image a {
	display: block;
	height: 100%;
}

.woocommerce-product-gallery.wears-galeria .wears-galeria__visor .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	border-radius: var( --wears-radius-media );
	object-fit: cover;
}

/* Miniaturas: fila desplazable, con desvanecido en los bordes para que se
   note que hay más. */
.wears-galeria__miniaturas {
	display: flex;
	margin-top: 12px;
	padding: 2px;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 14px, #000 calc( 100% - 14px ), transparent );
	mask-image: linear-gradient( 90deg, transparent 0, #000 14px, #000 calc( 100% - 14px ), transparent );
}

.wears-galeria__miniaturas::-webkit-scrollbar {
	display: none;
}

.wears-galeria__mini {
	flex: 0 0 64px;
	overflow: hidden;
	padding: 0;
	aspect-ratio: 4 / 5;
	border: 1px solid rgba( 26, 22, 19, 0.18 );
	border-radius: var( --wears-radius );
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition:
		opacity var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-galeria__mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wears-galeria__mini:hover {
	opacity: 1;
}

.wears-galeria__mini.is-activa {
	border-color: var( --wp--preset--color--accent );
	opacity: 1;
}

.wears-galeria__mini:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

/* Mientras el lightbox está abierto el documento no se desplaza. */
.wears-sin-scroll {
	overflow: hidden;
}

/* El lightbox: carrusel a pantalla completa sobre violeta profundo. */
.wears-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: none;
	margin: 0;
	background: transparent;
	color: var( --wp--preset--color--base );
}

.wears-lightbox::backdrop {
	background: rgba( 22, 4, 62, 0.93 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.wears-lightbox[ open ] {
		animation: wears-lightbox-aparecer 0.3s var( --wears-easing );
	}

	@keyframes wears-lightbox-aparecer {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}

.wears-lightbox__pista {
	display: flex;
	width: 100vw;
	height: 100dvh;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wears-lightbox__pista::-webkit-scrollbar {
	display: none;
}

/* Flex y alto explícito, no grid: en una rejilla la fila implícita es `auto`
   y el `max-height: 100%` de la foto no resuelve contra ella — la foto salía
   a tamaño natural desbordando la pantalla. Contra un contenedor flex de
   alto definido sí resuelve. */
.wears-lightbox__slide {
	display: flex;
	height: 100dvh;
	flex: 0 0 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: clamp( 20px, 5vw, 64px );
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.wears-lightbox__slide img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var( --wears-radius );
	object-fit: contain;
}

.wears-lightbox__cerrar,
.wears-lightbox__flecha {
	position: fixed;
	z-index: 2;
	display: grid;
	width: 44px;
	height: 44px;
	border: 1px solid rgba( 237, 230, 216, 0.35 );
	border-radius: 50%;
	background: rgba( 22, 4, 62, 0.55 );
	color: var( --wp--preset--color--base );
	cursor: pointer;
	place-items: center;
	transition:
		border-color var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-lightbox__cerrar:hover,
.wears-lightbox__flecha:hover {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

.wears-lightbox__cerrar:focus-visible,
.wears-lightbox__flecha:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

.wears-lightbox__cerrar {
	top: 18px;
	right: 18px;
}

.wears-lightbox__flecha--antes {
	top: 50%;
	left: 14px;
	transform: translateY( -50% );
}

.wears-lightbox__flecha--despues {
	top: 50%;
	right: 14px;
	transform: translateY( -50% );
}

.wears-lightbox__contador {
	position: fixed;
	bottom: 16px;
	left: 50%;
	margin: 0;
	color: rgba( 237, 230, 216, 0.7 );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	transform: translateX( -50% );
}

.wears-ficha__eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 14px;
	color: var( --wp--preset--color--support );
	font-size: 11px;
	font-weight: 500;
	gap: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wears-ficha__eyebrow::before {
	display: block;
	width: 32px;
	height: 1px;
	flex-shrink: 0;
	background: var( --wp--preset--color--accent );
	content: "";
}

.wears-ficha__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.wears-ficha__titulo {
	margin: 0 0 8px;
	font-size: clamp( 27px, 3.6vw, 44px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.wears-ficha__meta {
	align-items: center;
	margin-bottom: 22px;
	gap: 14px;
}

.wears-ficha__meta .wears-card__sku {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Sin ninguna reseña, WooCommerce deja el bloque de estrellas vacío. Un
   listón de estrellas apagadas promete algo que no hay. */
.wears-ficha__meta .wp-block-woocommerce-product-rating:empty {
	display: none;
}

.wears-ficha__precio {
	margin: 0 0 26px;
	font-size: clamp( 26px, 3vw, 36px );
	font-weight: 600;
	letter-spacing: -0.02em;
}

.wears-ficha__precio del {
	margin-left: 12px;
	color: rgba( 26, 22, 19, 0.4 );
	font-size: 16px;
	font-weight: 400;
}

.wears-ficha__resumen {
	max-width: 52ch;
	margin: 0 0 30px;
	color: rgba( 26, 22, 19, 0.72 );
	font-size: 15px;
	line-height: 1.7;
}

/* Muestra de color: círculo de 34px con el tono real y su nombre. */
.wears-ficha__info .wears-color {
	display: flex;
	align-items: center;
	margin: 0 0 26px;
	gap: 12px;
	font-size: 13px;
}

.wears-ficha__info .wears-swatch {
	display: block;
	width: 34px;
	height: 34px;
	border: 1px solid rgba( 26, 22, 19, 0.18 );
	border-radius: 50%;
}

.wears-ficha__promesas {
	display: flex;
	justify-content: center;
	margin: 12px 0 0;
	color: rgba( 26, 22, 19, 0.5 );
	font-size: 11px;
	gap: 8px;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Formulario de compra
   -------------------------------------------------------------------------- */

.wears-ficha__compra form.cart {
	margin: 0;
}

/* Cantidad con − y + (06/08): el input de WooCommerce en el centro y los dos
   pulsadores que le añade el JS de la ficha a los lados. */
form.cart .wears-cantidad {
	display: inline-flex;
	overflow: hidden;
	height: 56px;
	flex: 0 0 auto;
	align-items: stretch;
	border: 1px solid rgba( 26, 22, 19, 0.25 );
	border-radius: var( --wears-radius );
}

.wears-cantidad__boton {
	width: 44px;
	padding: 0;
	border: none;
	background: none;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
	font-family: inherit;
	font-size: 17px;
	line-height: 1;
	transition:
		background var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-cantidad__boton:hover {
	background: var( --wp--preset--color--rule );
	color: var( --wp--preset--color--primary );
}

.wears-cantidad__boton:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: -2px;
}

form.cart .wears-cantidad input.qty {
	width: 44px;
	padding: 0;
	border: none;
	background: transparent;
	appearance: textfield;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

form.cart .wears-cantidad input.qty::-webkit-outer-spin-button,
form.cart .wears-cantidad input.qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

form.cart .wears-cantidad input.qty:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: -2px;
}

.wears-ficha__compra button[ type="submit" ],
.wears-ficha__compra .single_add_to_cart_button {
	width: 100%;
	padding: 18px 24px;
	border: none;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-ficha__compra button[ type="submit" ]:hover,
.wears-ficha__compra .single_add_to_cart_button:hover {
	background: var( --wp--preset--color--primary-hover );
}

.wears-ficha__compra .single_add_to_cart_button.disabled,
.wears-ficha__compra .single_add_to_cart_button:disabled {
	background: rgba( 46, 0, 139, 0.4 );
	cursor: not-allowed;
}

/* Selector de talla. */
.wears-ficha__compra .variations {
	width: 100%;
	margin-bottom: 22px;
	border-collapse: collapse;
}

.wears-ficha__compra .variations th {
	padding: 0 0 12px;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-align: left;
	text-transform: uppercase;
}

.wears-ficha__compra .variations select {
	width: 100%;
	padding: 13px 12px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	font-family: inherit;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Distintivo de garantía — no negociable del brief
   -------------------------------------------------------------------------- */

.wears-garantia {
	display: flex;
	align-items: center;
	margin: 0 0 16px;
	padding: 15px 18px;
	border-left: 2px solid var( --wp--preset--color--accent );
	border-radius: 0 var( --wears-radius-card ) var( --wears-radius-card ) 0;
	background: var( --wp--preset--color--rule );
	gap: 13px;
}

.wears-garantia svg {
	flex-shrink: 0;
}

.wears-garantia__texto {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Guía de tallas
   -------------------------------------------------------------------------- */

.wears-guia {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 12px;
}

.wears-guia__abrir {
	padding: 0;
	border: none;
	border-bottom: 1px solid var( --wp--preset--color--accent );
	background: none;
	color: var( --wp--preset--color--contrast );
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-guia__abrir:hover {
	color: var( --wp--preset--color--support );
}

.wears-guia__panel {
	width: min( 460px, 100% );
	max-height: 86vh;
	padding: 32px;
	border: none;
	border-radius: var( --wears-radius-card );
	margin-inline: auto;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

.wears-guia__panel::backdrop {
	backdrop-filter: blur( 3px );
	background: rgba( 28, 0, 87, 0.6 );
}

.wears-guia__cerrar-form {
	margin: 0;
}

.wears-guia__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 6px;
	border: none;
	background: none;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
}

.wears-guia__titulo {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-guia__lead {
	margin: 0 0 20px;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
}

/* El croquis: dibujo de línea, mismo trato que el ancla. */
.wears-guia__croquis {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 0 auto 20px;
}

.wears-guia__pasos {
	margin: 0 0 22px;
	padding-left: 1.2em;
	color: rgba( 26, 22, 19, 0.75 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-guia__tabla {
	width: 100%;
	margin-bottom: 22px;
	border-collapse: collapse;
	font-size: 13px;
}

.wears-guia__tabla thead tr {
	border-bottom: 1px solid var( --wp--preset--color--primary );
}

.wears-guia__tabla th {
	padding: 9px 4px;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.wears-guia__tabla td {
	padding: 9px 4px;
	border-bottom: 1px solid rgba( 26, 22, 19, 0.1 );
}

.wears-guia__nota {
	margin: 0;
	padding: 16px 18px;
	border-left: 2px solid var( --wp--preset--color--accent );
	background: var( --wp--preset--color--rule );
	color: rgba( 26, 22, 19, 0.75 );
	font-size: 13px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Detalles de la ficha — historia, cuidados y especificaciones (06/08)

   Eran un acordeón; el cliente los pidió a la vista. La historia va como
   columna editorial y al lado los dos apartados de consulta, separados del
   bloque de compra por un filete.
   -------------------------------------------------------------------------- */

.wears-detalle {
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: clamp( 48px, 6vw, 88px ) clamp( 20px, 3vw, 40px ) 0;
}

.wears-detalle__inner {
	display: grid;
	padding-top: clamp( 32px, 4vw, 48px );
	border-top: 1px solid var( --wp--preset--color--rule );
	gap: clamp( 28px, 4vw, 64px );
	grid-template-columns: 1fr;
}

@media ( min-width: 900px ) {
	.wears-detalle__inner {
		grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr );
	}
}

.wears-detalle .wears-eyebrow {
	margin-bottom: 16px;
}

.wears-detalle__prosa {
	max-width: 58ch;
	color: rgba( 26, 22, 19, 0.72 );
	font-size: 15px;
	line-height: 1.8;
}

.wears-detalle__prosa > :first-child {
	margin-top: 0;
}

.wears-detalle__prosa > :last-child {
	margin-bottom: 0;
}

.wears-detalle__lado {
	display: grid;
	align-content: start;
	gap: clamp( 20px, 2.6vw, 28px );
}

/* Las historias del cliente son largas: las dos cajas acompañan el scroll
   para que la columna derecha no quede vacía. */
@media ( min-width: 900px ) {
	.wears-detalle__lado {
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

/* Los dos apartados de consulta van en caja quieta, el trato de vitrina que
   ya usan los términos de aliados. */
.wears-detalle__cuidados,
.wears-detalle__specs {
	padding: clamp( 22px, 2.8vw, 30px );
	border: 1px solid rgba( 26, 22, 19, 0.14 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
}

.wears-detalle__cuidados .wears-detalle__prosa {
	font-size: 14px;
}

.wears-detalle .wears-especificaciones {
	display: block;
	margin: 0;
}

.wears-detalle .wears-especificaciones__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 10px 0;
	border-top: 1px solid rgba( 26, 22, 19, 0.12 );
	gap: 18px;
}

.wears-detalle .wears-especificaciones__fila:first-child {
	border-top: none;
	padding-top: 0;
}

.wears-detalle .wears-especificaciones dt {
	flex: 0 0 auto;
	border: none;
	padding: 0;
	color: rgba( 26, 22, 19, 0.5 );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-detalle .wears-especificaciones dd {
	margin: 0;
	border: none;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Reseñas — tarjetas y formulario (06/08)
   -------------------------------------------------------------------------- */

.wears-resenas {
	max-width: 860px;
	margin-inline: auto;
	padding: clamp( 48px, 6vw, 80px ) clamp( 20px, 3vw, 40px ) 0;
}

/* La sección ya tiene su título propio; el del bloque de WooCommerce sobra. */
.wears-resenas .wp-block-woocommerce-product-reviews-title {
	display: none;
}

.wears-resenas .wp-block-comment-template {
	display: grid;
	margin: 0 0 clamp( 24px, 3vw, 36px );
	padding: 0;
	gap: 16px;
	grid-template-columns: 1fr;
	list-style: none;
}

@media ( min-width: 700px ) {
	.wears-resenas .wp-block-comment-template {
		grid-template-columns: 1fr 1fr;
	}
}

.wears-resenas .wp-block-comment-template > li {
	margin: 0;
}

.wears-resena {
	height: 100%;
	padding: 22px;
	border: 1px solid rgba( 26, 22, 19, 0.14 );
	border-radius: var( --wears-radius-card );
}

.wears-resena .wp-block-woocommerce-product-review-rating {
	margin: 0 0 12px;
	color: var( --wp--preset--color--accent );
	text-align: left;
}

.wears-resena .wp-block-woocommerce-product-review-rating > div {
	margin-inline: 0;
}

.wears-resena__fecha a {
	color: inherit;
	text-decoration: none;
}

.wears-resena .wp-block-comment-content {
	margin: 0;
	color: rgba( 26, 22, 19, 0.72 );
	font-size: 14px;
	line-height: 1.7;
}

.wears-resena__firma {
	display: flex;
	align-items: center;
	margin-top: 16px;
	gap: 12px;
}

.wears-resena__iniciales {
	display: grid;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 12px;
	font-weight: 600;
	place-items: center;
}

.wears-resena__datos {
	display: flex;
	flex-direction: column;
}

.wears-resena__autor {
	font-size: 13px;
	font-weight: 600;
}

.wears-resena__fecha {
	margin-top: 2px;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 11px;
}

/* El formulario: una caja quieta sobre marfil oscurecido, con los campos del
   resto del sitio. WooCommerce lo resetea con `.woocommerce #review_form
   #respond` —dos ids, (2,1,0)—; se le gana con los mismos ids y una clase
   más, nunca con !important. */
.wears-resenas .comment-respond,
.wears-resenas .wp-block-woocommerce-product-reviews #review_form #respond {
	padding: clamp( 22px, 3vw, 32px );
	border: 1px solid rgba( 26, 22, 19, 0.14 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
}

.wears-resenas .comment-reply-title {
	display: block;
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-resenas .comment-reply-title small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
}

.wears-resenas .comment-form .comment-notes {
	margin: 0 0 16px;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
}

.wears-resenas .comment-form label {
	display: block;
	margin: 0 0 8px;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-resenas .comment-form-rating {
	margin: 0 0 18px;
}

.wears-resenas .stars-wrapper {
	margin: 0;
}

.wears-resenas .stars {
	display: inline-flex;
	gap: 4px;
}

.wears-resenas .stars button {
	padding: 2px;
	border: none;
	background: none;
	color: var( --wp--preset--color--accent );
	cursor: pointer;
	line-height: 0;
}

.wears-resenas .stars button svg {
	width: 26px;
	height: 26px;
}

.wears-resenas .stars button:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

.wears-resenas .comment-form-comment {
	margin: 0 0 4px;
}

.wears-resenas .comment-form textarea,
.wears-resenas .comment-form input[ type="text" ],
.wears-resenas .comment-form input[ type="email" ] {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
}

.wears-resenas .comment-form textarea {
	min-height: 120px;
	resize: vertical;
}

.wears-resenas .comment-form textarea:focus-visible,
.wears-resenas .comment-form input[ type="text" ]:focus-visible,
.wears-resenas .comment-form input[ type="email" ]:focus-visible {
	border-color: var( --wp--preset--color--accent );
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
}

.wears-resenas .comment-form .form-submit {
	margin: 18px 0 0;
}

.wears-resenas .form-submit input[ type="submit" ] {
	padding: 15px 30px;
	border: none;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-resenas .form-submit input[ type="submit" ]:hover {
	background: var( --wp--preset--color--primary-hover );
}

/* --------------------------------------------------------------------------
   Cross-sell — "Combina con esta pieza"
   -------------------------------------------------------------------------- */

.wears-cross {
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 40px ) 0;
}

.wears-crosssell__panel {
	display: grid;
	overflow: hidden;
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--primary );
	grid-template-columns: 1fr;
}

@media ( min-width: 900px ) {
	.wears-crosssell__panel {
		grid-template-columns: 1fr 1fr;
	}
}

.wears-crosssell__foto {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 0;
}

@media ( min-width: 900px ) {
	.wears-crosssell__foto {
		aspect-ratio: 1;
	}
}

.wears-crosssell__foto img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

.wears-crosssell__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp( 24px, 3.5vw, 48px );
}

.wears-crosssell__texto > * {
	margin-block: 0;
}

.wears-crosssell__coleccion {
	margin-bottom: 10px;
	color: var( --wp--preset--color--accent );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-crosssell__nombre {
	margin-bottom: 12px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 20px, 2.4vw, 28px );
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-crosssell__nombre a {
	color: inherit;
	text-decoration: none;
}

.wears-crosssell__nombre a:hover {
	color: var( --wp--preset--color--accent );
}

.wears-crosssell__resumen {
	max-width: 40ch;
	margin-bottom: 16px;
	color: var( --wears-on-dark-70 );
	font-size: 14px;
	line-height: 1.65;
}

.wears-crosssell__precio {
	margin-bottom: 22px;
	color: var( --wp--preset--color--base );
	font-size: 19px;
	font-weight: 600;
}

.wears-crosssell__boton {
	align-self: flex-start;
	padding: 14px 28px;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.wears-crosssell__boton:hover {
	background: #c9a469;
	color: var( --wp--preset--color--primary );
}

.wears-cross__rotulo {
	margin: clamp( 40px, 5vw, 64px ) 0 22px;
}

.wears-grid--cuatro .wc-block-product-template {
	grid-template-columns: repeat( 2, 1fr );
}

@media ( min-width: 900px ) {
	.wears-grid--cuatro .wc-block-product-template {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* --------------------------------------------------------------------------
   Barra de compra del móvil
   -------------------------------------------------------------------------- */

.wears-barra-compra {
	position: fixed;
	z-index: 80;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	padding: 12px 18px;
	border-top: 1px solid var( --wears-bar-line );
	background: var( --wears-bar-bg );
	backdrop-filter: blur( 10px );
	gap: 14px;
}

@media ( min-width: 900px ) {
	.wears-barra-compra {
		display: none;
	}
}

/* La barra tapa el pie: se le hace sitio. */
@media ( max-width: 899px ) {
	.wears-ficha {
		padding-bottom: 104px;
	}
}

.wears-barra-compra__datos {
	min-width: 0;
	flex: 1;
}

.wears-barra-compra__sku {
	margin: 0;
	color: var( --wears-on-dark-60 );
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wears-barra-compra__precio {
	margin: 0;
	color: var( --wp--preset--color--base );
	font-size: 17px;
	font-weight: 600;
}

.wears-barra-compra__boton {
	padding: 14px 22px;
	border: 1px solid var( --wp--preset--color--accent );
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.wears-barra-compra__boton:disabled {
	background: rgba( 46, 0, 139, 0.4 );
	cursor: not-allowed;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Deslizador de precio
   -------------------------------------------------------------------------- */

/* Aparece a partir del 04/08, cuando llegaron los precios. Hasta entonces el
   bloque salía vacío y el grupo se ocultaba, así que este control nunca se
   había visto: de fábrica son dos campos blancos con borde negro sobre el
   panel violeta, y el riel se salía de la columna. */

/* El orden del marcado es mínimo · riel · máximo. En rejilla el riel ocupa la
   primera fila entera y los dos importes se reparten la segunda, que es como
   lo pinta el export: un control, dos cifras debajo. */
.wears-filters .wc-block-product-filter-price-slider__content {
	display: grid;
	align-items: center;
	gap: 16px 10px;
	grid-template-columns: 1fr 1fr;
}

.wears-filters .wc-block-product-filter-price-slider__range {
	grid-row: 1;
	grid-column: 1 / -1;
}

.wears-filters .wc-block-product-filter-price-slider__left {
	grid-row: 2;
	grid-column: 1;
}

.wears-filters .wc-block-product-filter-price-slider__right {
	grid-row: 2;
	grid-column: 2;
}

.wears-filters .wc-block-product-filter-price-slider__range {
	position: relative;
	width: 100%;
	height: 3px;
	background: var( --wears-on-dark-14 );
}

/* El tramo elegido, en dorado: el único color con licencia para señalar. */
.wears-filters .wc-block-product-filter-price-slider__range .range-bar {
	background: var( --wp--preset--color--accent );
}

/* Los dos <input type="range"> van superpuestos y transparentes: lo que se ve
   es el riel de arriba y los dos tiradores. */
.wears-filters .wc-block-product-filter-price-slider__range input[type="range"] {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	background: none;
	pointer-events: none;
	transform: translateY( -50% );
	-webkit-appearance: none;
	appearance: none;
}

.wears-filters .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	width: 15px;
	height: 15px;
	border: 2px solid var( --wp--preset--color--accent );
	border-radius: 50%;
	background: var( --wp--preset--color--base );
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.wears-filters .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border: 2px solid var( --wp--preset--color--accent );
	border-radius: 50%;
	background: var( --wp--preset--color--base );
	cursor: grab;
	pointer-events: auto;
}

/* Los dos importes, uno a cada extremo y bajo el riel. */
.wears-filters .wc-block-product-filter-price-slider__left,
.wears-filters .wc-block-product-filter-price-slider__right {
	flex: 0 0 auto;
}

.wears-filters .wc-block-product-filter-price-slider__left input,
.wears-filters .wc-block-product-filter-price-slider__right input {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid var( --wears-on-dark-14 );
	border-radius: var( --wears-radius );
	background: transparent;
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.wears-filters .wc-block-product-filter-price-slider__left input:focus-visible,
.wears-filters .wc-block-product-filter-price-slider__right input:focus-visible {
	border-color: var( --wp--preset--color--accent );
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Talla en fichas — el selector del export

   WooCommerce trae un <select>; el diseño lo quiere en botones de 48px. El
   <select> real sigue en el DOM, oculto pero accesible: es el que manda sobre
   el formulario y el que lee el JS de variaciones de WooCommerce.
   -------------------------------------------------------------------------- */

.wears-tallas {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.wears-talla {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba( 26, 22, 19, 0.25 );
	border-radius: var( --wears-radius );
	background: transparent;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	transition:
		border-color var( --wears-duration-micro ) var( --wears-easing ),
		background var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-talla:hover:not( :disabled ) {
	border-color: var( --wp--preset--color--primary );
}

.wears-talla.is-elegida {
	border-color: var( --wp--preset--color--primary );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* Agotada: tachada y apagada, no escondida. El comprador tiene que ver que
   ese número existe y que no queda. */
.wears-talla.is-agotada {
	border-color: rgba( 26, 22, 19, 0.12 );
	color: rgba( 26, 22, 19, 0.32 );
	cursor: not-allowed;
	opacity: 0.55;
	text-decoration: line-through;
}

/* El <select> original: fuera de la vista pero utilizable con teclado y
   lector de pantalla, y sobre todo vivo para WooCommerce. */
/* El selector con el que WooCommerce lo pinta —`.woocommerce div.product
   form.cart .variations select`— le mete `width: 100%`, y con un selector
   suelto ganaba: el <select> escondido medía 375px y sacaba barra horizontal
   en móvil. Aquí se iguala su especificidad. */
.wears-ficha__info form.cart .variations select.wears-select-oculto,
.wears-select-oculto {
	position: absolute;
	width: 1px;
	max-width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* La fila de compra: cantidad a la izquierda y el botón ocupando el resto.
   (El export no traía caja de cantidad; el 06/08 el cliente la pidió a la
   vista, como stepper.) */
.wears-ficha__info form.cart .woocommerce-variation-add-to-cart,
.wears-ficha__info form.cart .variations_button {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.wears-ficha__info form.cart .single_add_to_cart_button {
	min-width: 0;
	flex: 1 1 200px;
	width: auto;
}

/* En un producto simple —sin tallas— la cantidad y el botón cuelgan
   directamente del formulario: misma fila. */
.wears-ficha__info form.cart:not( .variations_form ) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

/* La fila de la variación se apila: el rótulo arriba y las fichas debajo, que
   es como lo pinta el export. WooCommerce lo trae como tabla. */
.wears-ficha__info table.variations,
.wears-ficha__info table.variations tbody,
.wears-ficha__info table.variations tr,
.wears-ficha__info table.variations th,
.wears-ficha__info table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	text-align: left;
}

.wears-ficha__info table.variations th.label {
	margin-bottom: 12px;
}

.wears-ficha__info table.variations th.label label {
	margin: 0;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-ficha__info .woocommerce-variation-price {
	margin-bottom: 18px;
}

/* El rótulo de la talla y la guía comparten línea, como el export. */
.wears-ficha__info table.variations th.label.wears-variacion__rotulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.wears-ficha__info table.variations th.label .wears-guia {
	margin: 0;
}

/* La garantía va debajo del botón de compra (06/08), pegada a él. */
.wears-ficha__info .wears-garantia {
	margin: 18px 0 0;
}

/* El botón que abre los filtros en móvil venía a 21px de alto. Es el control
   principal de la pantalla: se le da cuerpo de botón.
   DWCW-187 (07/08): «Filtrar productos» no se veía — el rótulo y el borde van
   ahora en el primario. */
.wears-shop .wc-block-product-filters__open-overlay {
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--rule );
	color: var( --wp--preset--color--primary );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}