/*
Theme Name: ERM Solutions — Kadence Child
Theme URI: https://dev.ermsolutions.do/
Description: Tema hijo de Kadence para la tienda de airguns de ERM Solutions. Capa de presentación únicamente: estilos y, si hiciera falta, sobrescrituras mínimas de template-parts. La lógica de negocio vive en un plugin propio.
Author: ERM Solutions
Author URI: https://ermsolutions.do/
Template: kadence
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Fundamentos
   Breakpoints alineados con Kadence (767 / 1024) para no crear dos sistemas
   en conflicto. Sin fuentes web: pila del sistema.
   ========================================================================== */

:root {
	--erm-tinta: #16181d;
	--erm-tinta-suave: #4a5160;
	/* #68707f y no un gris más claro: 4.98:1 sobre blanco y 4.61:1 sobre
	   --erm-fondo-alt. Se usa en conteos y SKU, que son texto pequeño y
	   necesitan AA (4.5:1), no el umbral de texto grande. */
	--erm-tenue: #68707f;
	--erm-linea: #e2e5ea;
	--erm-fondo: #ffffff;
	--erm-fondo-alt: #f5f6f8;
	--erm-accion: #0b5fa5;
	--erm-accion-oscura: #08497e;
	--erm-radio: 6px;
	--erm-ancho: 1290px;
	--erm-gap: 24px;
	/* Verde de disponibilidad: 5,3:1 sobre blanco (AA para texto pequeño). */
	--erm-exito: #2b7130;
	/* Verde de acción: 5,4:1 con texto blanco encima. */
	--erm-compra: #416a1e;
	--erm-compra-oscura: #35581a;
	/* Ámbar de estrellas: decorativo (aria-hidden), acompañado de texto. */
	--erm-estrella: #d98324;
}

.erm-portada {
	color: var(--erm-tinta);
	font-synthesis-weight: none;
}

.erm-contenedor {
	max-width: var(--erm-ancho);
	margin-inline: auto;
	padding-inline: 20px;
}

.erm-seccion {
	padding-block: 56px;
}

.erm-seccion + .erm-seccion {
	border-top: 1px solid var(--erm-linea);
}

.erm-seccion__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--erm-gap);
	margin-bottom: 28px;
}

.erm-seccion__titulo {
	margin: 0;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.erm-seccion__enlace {
	flex: none;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--erm-accion);
	text-decoration: none;
}

.erm-seccion__enlace:hover,
.erm-seccion__enlace:focus-visible {
	text-decoration: underline;
}

/* Botones ----------------------------------------------------------------- */

.erm-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--erm-radio);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.erm-boton--principal {
	background: var(--erm-accion);
	color: #fff;
}

.erm-boton--principal:hover,
.erm-boton--principal:focus-visible {
	background: var(--erm-accion-oscura);
	color: #fff;
}

.erm-boton--secundario {
	border-color: var(--erm-linea);
	background: #fff;
	color: var(--erm-tinta);
}

.erm-boton--secundario:hover,
.erm-boton--secundario:focus-visible {
	border-color: var(--erm-tinta-suave);
	color: var(--erm-tinta);
}

/* Variante sobre fotografía. Fondo translúcido y no transparente: sobre el
   matorral claro del hero un botón de solo borde blanco se pierde. */
.erm-boton--claro {
	border-color: rgb(255 255 255 / 0.55);
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	backdrop-filter: blur(6px);
}

.erm-boton--claro:hover,
.erm-boton--claro:focus-visible {
	border-color: #fff;
	background: rgb(255 255 255 / 0.22);
	color: #fff;
}

/* ==========================================================================
   Hero
   Fotográfico y a sangre, como la referencia del negocio. Sin carrusel: no hay
   campañas que rotar y un carrusel esconde contenido detrás de una interacción
   que casi nadie hace.
   ========================================================================== */

.erm-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(440px, 44vw, 600px);
	overflow: hidden;
	background: #0d1016;
	isolation: isolate;
}

.erm-hero__fondo,
.erm-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Velo de lectura. Sin él el titular blanco cae sobre matorral iluminado y
   baja de 3:1 en buena parte de su superficie. El degradado es diagonal para
   oscurecer la esquina del texto sin apagar el rifle, que es el sujeto. */
.erm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(96deg, rgb(8 10 14 / 0.90) 0%, rgb(8 10 14 / 0.74) 34%, rgb(8 10 14 / 0.20) 66%, rgb(8 10 14 / 0.42) 100%),
		linear-gradient(180deg, rgb(8 10 14 / 0.42) 0%, rgb(8 10 14 / 0) 34%);
}

.erm-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	padding-block: clamp(40px, 5vw, 68px);
	color: #fff;
}

.erm-hero__texto-col {
	max-width: 620px;
}

.erm-hero__ojo {
	margin: 0 0 14px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.78);
}

.erm-hero__titulo {
	margin: 0 0 16px;
	font-size: clamp(1.95rem, 1.2rem + 2.9vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

.erm-hero__texto {
	margin: 0 0 28px;
	max-width: 48ch;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.86);
}

.erm-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Raíl de marcas ------------------------------------------------------------
   La referencia apila aquí cinco campañas. ERM no tiene campañas, así que
   apila los cinco fabricantes con más catálogo, que es el atajo que sí existe.
   Ancho fijo: con `1fr` los nombres cortos («Skout») dejarían la caja a media
   altura y la columna se vería descuadrada. */
.erm-hero__rail {
	flex: none;
	width: 250px;
}

.erm-hero__rail-titulo {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.7);
}

.erm-hero__rail-lista {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-hero__rail-item {
	display: flex;
	align-items: center;
	padding: 11px 14px;
	border: 1px solid rgb(255 255 255 / 0.20);
	border-radius: var(--erm-radio);
	background: rgb(12 15 20 / 0.55);
	backdrop-filter: blur(8px);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.erm-hero__rail-item:hover,
.erm-hero__rail-item:focus-visible {
	border-color: rgb(255 255 255 / 0.55);
	background: rgb(12 15 20 / 0.78);
	color: #fff;
}


/* ==========================================================================
   Mosaico de familias
   Fichas fotográficas en una fila de seis, el patrón de la referencia. La
   etiqueta va en HTML sobre la foto y no incrustada en el JPEG: así es texto
   real para el lector de pantalla y el buscador, y se traduce sin volver a
   exportar quince imágenes.
   ========================================================================== */

.erm-mosaico {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-tarjeta-cat {
	position: relative;
	display: block;
	/* Vertical y no apaisada. La referencia usa fichas casi cuadradas porque su
	   fila cabe en un contenedor estrecho; aquí, a 1290 px y seis por fila, un
	   6/5 deja la foto en una franja de 168 px donde el rifle no se distingue.
	   El 4/5 devuelve altura al sujeto y le da sitio a la etiqueta de dos
	   líneas de «HIGH POWER AIR RIFLES» sin que pise la imagen. */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--erm-radio);
	background: #0d1016;
	text-decoration: none;
	color: #fff;
	isolation: isolate;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.erm-tarjeta-cat:hover,
.erm-tarjeta-cat:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgb(13 16 22 / 0.28);
}

.erm-tarjeta-cat__media {
	position: absolute;
	inset: 0;
	display: block;
}

/* `cover` y no `contain`: aquí la miniatura es una fotografía de campo, no un
   recorte de producto sobre blanco. El recorte lo absorbe la foto, que ya se
   generó a 4:3 centrada en el sujeto. */
.erm-tarjeta-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El zoom arranca ligeramente ampliado para que al volver del hover no
	   asome el borde del contenedor. */
	transform: scale(1.02);
	transition: transform 0.35s ease;
}

.erm-tarjeta-cat:hover .erm-tarjeta-cat__img,
.erm-tarjeta-cat:focus-visible .erm-tarjeta-cat__img {
	transform: scale(1.08);
}

/* Velo bajo la etiqueta. Cubre el 62 % inferior y no toda la ficha: por encima
   la foto se ve limpia, y debajo el blanco se lee sobre cualquier toma. */
.erm-tarjeta-cat__media::after {
	content: "";
	position: absolute;
	inset: 55% 0 0;
	background: linear-gradient(180deg, rgb(9 11 15 / 0) 0%, rgb(9 11 15 / 0.62) 52%, rgb(9 11 15 / 0.90) 100%);
}

.erm-tarjeta-cat__cuerpo {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 14px 14px 15px;
}

.erm-tarjeta-cat__nombre {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	/* La sombra sostiene el contraste en las tomas más claras, donde el velo
	   por sí solo se queda justo. */
	text-shadow: 0 1px 3px rgb(9 11 15 / 0.6);
}


/* ==========================================================================
   Fichas de especialidad
   ========================================================================== */

.erm-fichas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-ficha {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid var(--erm-linea);
	border-radius: 999px;
	background: #fff;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--erm-tinta);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.erm-ficha:hover,
.erm-ficha:focus-visible {
	border-color: var(--erm-accion);
	background: var(--erm-fondo-alt);
}

.erm-ficha__conteo {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--erm-fondo-alt);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--erm-tinta-suave);
	text-align: center;
}

/* ==========================================================================
   Marcas
   Sin logos: el catálogo no tiene activos de marca cargados y no se inventan.
   ========================================================================== */

.erm-marcas__lista {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-marca {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
	text-decoration: none;
	color: var(--erm-tinta);
	transition: border-color 0.15s ease;
}

.erm-marca:hover,
.erm-marca:focus-visible {
	border-color: var(--erm-accion);
}

.erm-marca__nombre {
	font-weight: 600;
	font-size: 0.9375rem;
}


/* ==========================================================================
   Cumplimiento
   ========================================================================== */

.erm-cumplimiento__caja {
	padding: 24px 28px;
	border: 1px solid var(--erm-linea);
	border-left: 4px solid var(--erm-tinta-suave);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-cumplimiento__titulo {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
}

.erm-cumplimiento__texto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
	max-width: 70ch;
}

/* ==========================================================================
   Catálogo: estado sin precio
   Aplica en portada, tienda y archivos de categoría.
   ========================================================================== */

.erm-precio-consultar {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--erm-tinta);
}

.erm-precio-consultar__sku {
	display: block;
	margin-top: 2px;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--erm-tenue);
}

/* «Agotado» y «sin precio» son ausencias, no errores: gris, nunca rojo. */
.woocommerce ul.products li.product .erm-boton-consultar {
	background: transparent;
	border: 1px solid var(--erm-linea);
	color: var(--erm-tinta);
}

.woocommerce ul.products li.product .erm-boton-consultar:hover,
.woocommerce ul.products li.product .erm-boton-consultar:focus-visible {
	border-color: var(--erm-accion);
	background: transparent;
	color: var(--erm-accion);
}

/* ==========================================================================
   Navegación principal
   Conteo junto a cada categoría: es la señal que más orienta al navegar.
   Las familias sin catálogo se marcan «Próximamente» en vez de fingir stock.
   ========================================================================== */

.erm-nav__conteo {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--erm-fondo-alt);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
	vertical-align: middle;
}

.erm-nav__conteo--vacio {
	margin-left: 5px;
	padding: 0 5px;
	background: transparent;
	border: 1px solid var(--erm-linea);
	font-size: 0.625rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

/* El menú compite con el título del sitio, que hoy es una frase larga de SEO
   («ERM Solutions | Airguns, Airsoft, PCP y Accesorios en RD») en lugar de un
   nombre de marca. Mientras eso no se acorte, se acota aquí para que las 7
   entradas del menú quepan en una sola línea.
   Arreglo de fondo pendiente de decisión: título = «ERM Solutions». */
.header-navigation .header-menu-container > ul > li > a {
	padding-left: 0.6em;
	padding-right: 0.6em;
	white-space: nowrap;
}

.site-branding .site-title,
.site-branding .site-title a {
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);
	line-height: 1.25;
}

.site-branding {
	max-width: 22rem;
}

@media (max-width: 1024px) {
	.site-branding {
		max-width: 16rem;
	}
}

/* El submenú de Kadence es una lista estrecha; se le da aire para que los
   nombres largos de subcategoría no se partan en tres líneas. */
.primary-menu-container ul.sub-menu,
.header-navigation ul.sub-menu {
	min-width: 17rem;
}

.header-navigation ul.sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* Los rótulos de navegación van en mayúsculas. Se hace por CSS y no renombrando
   los términos padre, para que «Rifles» o «Óptica» sigan leyéndose así en migas,
   fichas y páginas de categoría, donde la mayúscula sostenida estorba.
   El conteo queda fuera: es una etiqueta auxiliar («Pronto», «12») que viaja
   dentro del enlace y heredaría el transform. */
.header-navigation .header-menu-container a,
.mobile-navigation .mobile-menu-container a {
	text-transform: uppercase;
}

.header-navigation .header-menu-container .erm-nav__conteo,
.mobile-navigation .mobile-menu-container .erm-nav__conteo {
	text-transform: none;
}

/* ==========================================================================
   Ficha de producto
   Jerarquía: marca → título → precio → especificaciones → compra.
   El calibre y la munición suben al bloque de compra porque en esta categoría
   son la primera pregunta técnica del comprador: deciden si el producto le
   sirve antes que cualquier otra consideración.
   ========================================================================== */

.erm-ficha__marca {
	margin: 0 0 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.erm-ficha__marca a {
	color: var(--erm-tenue);
	text-decoration: none;
}

.erm-ficha__marca a:hover,
.erm-ficha__marca a:focus-visible {
	color: var(--erm-accion);
}

/* Tabla de especificaciones ------------------------------------------------ */

.erm-specs {
	margin: 24px 0;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	overflow: hidden;
}

.erm-specs__titulo {
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--erm-linea);
	background: var(--erm-fondo-alt);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--erm-tinta-suave);
}

.erm-specs__lista {
	margin: 0;
	padding: 0;
}

.erm-specs__fila {
	display: grid;
	grid-template-columns: minmax(9rem, 34%) 1fr;
	gap: 16px;
	padding: 11px 16px;
}

.erm-specs__fila + .erm-specs__fila {
	border-top: 1px solid var(--erm-linea);
}

.erm-specs__etiqueta {
	margin: 0;
	font-size: 0.875rem;
	color: var(--erm-tenue);
}

.erm-specs__valor {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--erm-tinta);
}

/* Aviso de cumplimiento ---------------------------------------------------- */

.erm-ficha__aviso {
	margin: 20px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--erm-tinta-suave);
	background: var(--erm-fondo-alt);
	border-radius: 0 var(--erm-radio) var(--erm-radio) 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--erm-tinta-suave);
}

/* El precio a consultar pesa como pesaría un precio real. */
.single-product .erm-precio-consultar {
	font-size: 1.375rem;
	font-weight: 700;
}

.single-product .erm-precio-consultar__sku {
	font-size: 0.875rem;
}

/* Video de marca incrustado en algunas descripciones: se acota para que no
   desborde el contenedor. Moverlo a la página de marca es decisión D-9. */
.woocommerce div.product .woocommerce-Tabs-panel video {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Página de categoría
   ========================================================================== */

.erm-archivo-cab {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--erm-linea);
}

.erm-archivo-cab__padre {
	margin: 0 0 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.erm-archivo-cab__padre a {
	color: var(--erm-tenue);
	text-decoration: none;
}

.erm-archivo-cab__padre a:hover,
.erm-archivo-cab__padre a:focus-visible {
	color: var(--erm-accion);
}

.erm-archivo-cab__titulo {
	margin: 0 0 4px;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.erm-archivo-cab__conteo {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--erm-tenue);
}

.erm-archivo-cab__texto {
	margin-top: 12px;
	max-width: 70ch;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--erm-tinta-suave);
}

.erm-archivo-cab__hijas {
	margin-top: 18px;
}

/* ==========================================================================
   Panel de filtros
   Columna izquierda fija en escritorio, plegable en móvil. Los filtros son
   enlaces, no JavaScript: funcionan con teclado, se comparten por URL y el
   botón atrás hace lo esperado.
   ========================================================================== */

.erm-con-filtros .woocommerce-products-header,
.erm-con-filtros .erm-archivo-cab {
	grid-column: 1 / -1;
}

@media (min-width: 1025px) {
	.erm-con-filtros .site-main .content-container,
	.erm-con-filtros .woocommerce-notices-wrapper + .erm-filtros {
		/* contenedor real más abajo */
	}

	.erm-con-filtros .site-main {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	.erm-con-filtros .site-main > *:not(.erm-filtros) {
		grid-column: 2;
	}

	/* El panel es sticky y con seis grupos mide más que la ventana. Sin acotar
	   su altura, todo lo que sobresale por abajo —el cañón y el precio— quedaba
	   inalcanzable: al bajar, el panel bajaba contigo, y solo aparecía al llegar
	   al final de los resultados. Se le da su propio alto y su propio scroll. */
	.erm-filtros {
		grid-column: 1;
		grid-row: 1 / span 99;
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 6px;
		scrollbar-width: thin;
	}
}

.erm-filtros {
	margin-bottom: 28px;
	font-size: 0.9375rem;
}

.erm-filtros__cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--erm-linea);
}

.erm-filtros__titulo {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--erm-tinta-suave);
}

.erm-filtros__limpiar {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--erm-accion);
	text-decoration: none;
}

.erm-filtros__limpiar:hover,
.erm-filtros__limpiar:focus-visible {
	text-decoration: underline;
}

.erm-filtro + .erm-filtro {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--erm-linea);
}

.erm-filtro__titulo {
	margin: 0 0 10px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--erm-tinta);
}

/* --------------------------------------------------------------------------
   Acordeón de facetas — solo por debajo de 1025px

   El `<summary>` sustituye al `<h3>` como cabecera. En escritorio tiene que
   verse y comportarse EXACTAMENTE como antes: sin marcador, sin cursor de mano
   y sin responder al clic. Solo en móvil se convierte en un mando.

   El contenido se emite abierto desde el servidor; quien no reciba el script
   ve el panel entero, que es lo de hoy.
   -------------------------------------------------------------------------- */

.erm-filtro__resumen {
	display: block;
	list-style: none;
	cursor: default;
	/* En escritorio no es un mando: el clic lo atraviesa. */
	pointer-events: none;
}

/* Safari pinta su propio marcador y no atiende a `list-style`. */
.erm-filtro__resumen::-webkit-details-marker {
	display: none;
}

@media (max-width: 1024px) {

	.erm-filtro__resumen {
		position: relative;
		display: flex;
		align-items: center;
		/* 44px es el mínimo cómodo para un dedo. La cabecera entera es el
		   área de toque, no solo las letras. */
		min-height: 44px;
		padding: 8px 30px 8px 0;
		cursor: pointer;
		pointer-events: auto;
	}

	.erm-filtro__resumen .erm-filtro__titulo {
		margin: 0;
	}

	/* Chevron dibujado con dos bordes: no carga un SVG por cada faceta. */
	.erm-filtro__resumen::after {
		content: "";
		position: absolute;
		inset-inline-end: 8px;
		top: 50%;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 2px solid var(--erm-tinta-suave);
		border-bottom: 2px solid var(--erm-tinta-suave);
		transform: rotate(45deg);
		transition: transform 0.18s ease;
	}

	[open] > .erm-filtro__resumen::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}

	/* Plegadas, las cabeceras son una lista, no bloques sueltos: el separador
	   ya las distingue y el margen de faceta abierta solo añade aire muerto.
	   Con cinco facetas, cada 10px de más son medio dedo de desplazamiento. */
	.erm-filtro + .erm-filtro {
		margin-top: 0;
		padding-top: 0;
	}

	/* Abierta sí necesita respirar: separa la cabecera de sus opciones. */
	.erm-filtro__plegable[open] > .erm-filtro__cuerpo {
		padding-bottom: 14px;
	}
}

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

	.erm-filtro__resumen::after {
		transition: none;
	}
}

.erm-filtro__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Plegado: lo pone el script. Sin JavaScript la lista se ve entera. */
.erm-filtro.is-plegado .erm-filtro__item.is-extra {
	display: none;
}

.erm-filtro__mas {
	margin-top: 8px;
	padding: 4px 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--erm-accion);
	cursor: pointer;
}

.erm-filtro__mas:hover,
.erm-filtro__mas:focus-visible {
	background: none;
	color: var(--erm-accion-oscura);
	text-decoration: underline;
}

.erm-filtro__opcion {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 6px 6px 0;
	border-radius: 4px;
	text-decoration: none;
	color: var(--erm-tinta-suave);
	line-height: 1.35;
}

.erm-filtro__opcion:hover,
.erm-filtro__opcion:focus-visible {
	color: var(--erm-tinta);
}

/* Casilla dibujada en CSS: no hace falta un input porque el filtro es un enlace,
   pero la señal visual de «seleccionable» sí es necesaria. */
.erm-filtro__marca {
	flex: none;
	width: 16px;
	height: 16px;
	border: 1px solid var(--erm-linea);
	border-radius: 3px;
	background: #fff;
	position: relative;
}

.erm-filtro__opcion.is-activo .erm-filtro__marca {
	background: var(--erm-accion);
	border-color: var(--erm-accion);
}

.erm-filtro__opcion.is-activo .erm-filtro__marca::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.erm-filtro__opcion.is-activo {
	color: var(--erm-tinta);
	font-weight: 600;
}

.erm-filtro__nombre {
	flex: 1 1 auto;
}

.erm-filtro__conteo {
	flex: none;
	font-size: 0.8125rem;
	color: var(--erm-tenue);
	font-variant-numeric: tabular-nums;
}

/* Precio ------------------------------------------------------------------- */

.erm-filtro__precio {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.erm-filtro__precio input[type='number'] {
	width: 6.2rem;
	min-height: 40px;
	padding: 4px 8px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	font-size: 0.875rem;
}

.erm-filtro__guion {
	color: var(--erm-tenue);
}

.erm-filtro__aplicar {
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--erm-accion);
	border-radius: var(--erm-radio);
	background: var(--erm-accion);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.erm-filtro__aplicar:hover,
.erm-filtro__aplicar:focus-visible {
	background: var(--erm-accion-oscura);
	border-color: var(--erm-accion-oscura);
}

.erm-filtro__nota {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--erm-tenue);
}

/* Estado vacío ------------------------------------------------------------- */

.erm-vacio {
	padding: 40px 24px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
	text-align: center;
}

.erm-vacio__titulo {
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 700;
}

.erm-vacio__texto {
	margin: 0 auto 20px;
	max-width: 52ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
}

/* Móvil: el panel se pliega para no empujar la rejilla fuera de pantalla. */
@media (max-width: 1024px) {
	.erm-filtros {
		border: 1px solid var(--erm-linea);
		border-radius: var(--erm-radio);
		padding: 16px;
	}

	.erm-filtros {
		max-height: none;
		overflow: visible;
	}
}

/* ==========================================================================
   Accesibilidad
   Kadence añade `hide-focus-outline` al <body>, que oculta el foco de teclado.
   Se restituye un indicador visible.
   ========================================================================== */

.erm-portada a:focus-visible,
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible {
	outline: 2px solid var(--erm-accion);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.erm-marcas__lista {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.erm-seccion {
		padding-block: 40px;
	}

	.erm-mosaico {
		grid-template-columns: 1fr;
	}

	.erm-marcas__lista {
		grid-template-columns: repeat(2, 1fr);
	}

	.erm-hero__acciones .erm-boton {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erm-tarjeta-cat,
	.erm-boton,
	.erm-ficha,
	.erm-marca {
		transition: none;
	}

	.erm-tarjeta-cat:hover {
		transform: none;
	}
}


/* ==========================================================================
   Card de producto — rejilla del catálogo
   Anatomía, de arriba abajo:

     título · imagen · marca y calibre · valoración · resumen ·
     disponibilidad · precio · añadir al carrito

   Todo centrado. Las alturas del título y del resumen se reservan para que
   las cards de una fila coincidan sin JavaScript ni alturas en píxeles.

   NOTA: valoración y disponibilidad son datos de DEMOSTRACIÓN mientras
   ERM_DEMO_DATOS esté en true (ver inc/catalogo.php).
   ========================================================================== */

.woocommerce ul.products li.product.loop-entry {
	display: flex;
	flex-direction: column;
	padding: 18px 16px 16px;
	background: var(--erm-fondo);
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce ul.products li.product.loop-entry:hover,
.woocommerce ul.products li.product.loop-entry:focus-within {
	border-color: var(--erm-accion);
	box-shadow: 0 2px 14px rgb(11 95 165 / 0.10);
}

/* Título — encima de la imagen ---------------------------------------------
   TRES líneas, no dos.
   Con dos caben unos 46 caracteres, y ese recorte hacía que modelos distintos
   se vieran idénticos en la rejilla: «…Avenge-x X1-BS Botella…» ocultaba la
   palabra «Alum», que es justo lo que los diferencia. Los títulos parecidos del
   catálogo se separan entre el carácter 42 y el 46, así que hacen falta unos 52
   visibles; tres líneas dan ~69 y cubren el p95 (66 caracteres).

   El coste es aire de más bajo los títulos cortos —la mediana son 43
   caracteres y caben en dos líneas—, pero dos productos que parecen el mismo
   son un problema peor que un hueco.

   `min-height` reserva las tres para que las imágenes de una fila queden a la
   misma altura. */
.erm-card__titulo {
	margin: 0 0 14px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	min-height: calc(3 * 1.3em);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.erm-card__titulo a {
	color: var(--erm-tinta);
	text-decoration: none;
}

.erm-card__titulo a:hover,
.erm-card__titulo a:focus-visible {
	color: var(--erm-accion);
	text-decoration: underline;
}

/* Imagen -------------------------------------------------------------------
   `contain` y no `cover`: un rifle es muy apaisado y recortarlo eliminaría el
   cañón o la culata, que es justo lo que el cliente mira. */
.woocommerce ul.products li.product.loop-entry .woocommerce-loop-image-link {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 14px;
}

.woocommerce ul.products li.product.loop-entry .woocommerce-loop-image-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
	transition: transform 0.25s ease;
}

.woocommerce ul.products li.product.loop-entry:hover .woocommerce-loop-image-link img {
	transform: scale(1.04);
}

/* Cuerpo -------------------------------------------------------------------
   `flex: 1` aquí y `margin-top: auto` en la acción alinean todos los botones
   de la fila aunque los textos ocupen distinto número de líneas. */
.woocommerce ul.products li.product.loop-entry .product-details {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	text-align: center;
}

/* Marca y calibre ---------------------------------------------------------- */
.erm-card__meta {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--erm-tenue);
	line-height: 1.3;
}

.erm-card__sep {
	margin: 0 6px;
	opacity: 0.6;
}

/* Valoración --------------------------------------------------------------- */
.erm-card__valoracion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	line-height: 1;
}

.erm-card__estrellas {
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	color: var(--erm-estrella);
}

.erm-card__resenas {
	font-size: 0.8125rem;
	color: var(--erm-tenue);
}

/* Resumen ------------------------------------------------------------------
   Tres líneas reservadas: es el bloque que más varía y el que más descuadraba
   la rejilla cuando no tenía altura fija. */
.erm-card__resumen {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--erm-tinta-suave);
	min-height: calc(3 * 1.5em);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Disponibilidad ----------------------------------------------------------- */
.erm-card__stock {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--erm-exito);
}

/* Dos líneas: unidades y plazo son hechos distintos. `block` en vez de un <br>
   para que el salto sea estructural y no dependa del ancho del texto. */
.erm-card__unidades,
.erm-card__entrega {
	display: block;
}

.erm-card__unidades {
	font-weight: 600;
}

/* Precio -------------------------------------------------------------------
   El elemento de mayor peso tipográfico de la card después del título. */
.woocommerce ul.products li.product.loop-entry .price {
	margin: 4px 0 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--erm-tinta);
	line-height: 1.2;
}

.woocommerce ul.products li.product.loop-entry .price .erm-precio-consultar {
	font-size: 1rem;
}

/* Acción -------------------------------------------------------------------
   Un solo botón, sin selector de cantidad: la cantidad se elige en la ficha.
   `margin-top: auto` lo empuja al fondo y alinea la fila. */
.woocommerce ul.products li.product.loop-entry .product-action-wrap {
	margin-top: auto;
	padding-top: 14px;
}

.woocommerce ul.products li.product.loop-entry .product-action-wrap .button,
.woocommerce ul.products li.product.loop-entry .erm-card__boton {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: var(--erm-compra);
	border: 0;
	border-radius: var(--erm-radio);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce ul.products li.product.loop-entry .product-action-wrap .button:hover,
.woocommerce ul.products li.product.loop-entry .product-action-wrap .button:focus-visible,
.woocommerce ul.products li.product.loop-entry .erm-card__boton:hover,
.woocommerce ul.products li.product.loop-entry .erm-card__boton:focus-visible {
	background: var(--erm-compra-oscura);
	color: #fff;
}

/* El foco debe verse: el tema global oculta el outline. */
.woocommerce ul.products li.product.loop-entry .erm-card__boton:focus-visible,
.erm-card__titulo a:focus-visible {
	outline: 2px solid var(--erm-accion);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product.loop-entry,
	.woocommerce ul.products li.product.loop-entry .woocommerce-loop-image-link img {
		transition: none;
	}

	.woocommerce ul.products li.product.loop-entry:hover .woocommerce-loop-image-link img {
		transform: none;
	}
}

/* Móvil --------------------------------------------------------------------
   Kadence sirve 2 columnas en móvil (grid-sm-col-2); no se sobrescribe para no
   crear dos sistemas de rejilla. Solo se compacta la tipografía y se libera la
   altura reservada del resumen, que a 2 columnas roba demasiado espacio. */
@media (max-width: 767px) {
	.woocommerce ul.products li.product.loop-entry {
		padding: 14px 12px 12px;
	}

	.erm-card__titulo {
		font-size: 0.9375rem;
	}

	.erm-card__resumen {
		font-size: 0.8125rem;
		-webkit-line-clamp: 2;
		min-height: 0;
	}

	.woocommerce ul.products li.product.loop-entry .price {
		font-size: 1.125rem;
	}

	.woocommerce ul.products li.product.loop-entry .erm-card__boton {
		padding: 10px 12px;
		font-size: 0.875rem;
	}
}


/* ==========================================================================
   Cabecera de sección centrada
   Variante para las secciones que en la referencia llevan el título centrado
   con una regla a los lados. Aquí la regla se sustituye por aire: con seis
   fichas fotográficas debajo, una línea más sería ruido.
   ========================================================================== */

.erm-seccion__cabecera--centrada {
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.erm-seccion__sub {
	margin: 0;
	max-width: 60ch;
	font-size: 0.9375rem;
	color: var(--erm-tenue);
}

/* ==========================================================================
   Banda de especialidad
   El equivalente de las cuatro columnas de la referencia. Allí prometen
   entrega, atención, descuentos y contenido; aquí se afirma solo lo que se
   puede comprobar: tamaño del catálogo, cómo se redacta una ficha, dónde está
   la tienda y a quién se vende. Ver D-7 en docs/decisiones-storefront.md.
   ========================================================================== */

.erm-especialidad {
	background: var(--erm-fondo-alt);
}

.erm-valores {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--erm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-valor {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.erm-valor__icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--erm-linea);
	color: var(--erm-accion);
}

.erm-valor__icono svg {
	width: 21px;
	height: 21px;
}

.erm-valor__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.erm-valor__titulo {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.erm-valor__texto {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

/* ==========================================================================
   Carrusel de producto
   Pista con desplazamiento nativo. Se eligió `overflow-x` + `scroll-snap` en
   vez de una librería porque funciona sin JavaScript, respeta el gesto del
   sistema y no añade 40 KB para mover una fila.
   ========================================================================== */

.erm-carrusel__controles {
	flex: none;
	display: flex;
	align-items: center;
	gap: 14px;
}

.erm-carrusel__flechas {
	display: flex;
	gap: 6px;
}

.erm-carrusel__flecha {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--erm-linea);
	border-radius: 50%;
	background: #fff;
	color: var(--erm-tinta);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.erm-carrusel__flecha svg {
	width: 18px;
	height: 18px;
}

.erm-carrusel__flecha:hover:not(:disabled),
.erm-carrusel__flecha:focus-visible:not(:disabled) {
	border-color: var(--erm-accion);
	color: var(--erm-accion);
	background: var(--erm-fondo-alt);
}

/* Deshabilitada y no oculta: si el botón desapareciera al llegar a un extremo,
   el foco del teclado se perdería a mitad de recorrido. */
.erm-carrusel__flecha:disabled {
	opacity: 0.35;
	cursor: default;
}

.erm-carrusel__pista {
	/* El desbordamiento vertical visible deja respirar la sombra del hover de
	   la card; `auto` en el eje X es lo que crea la pista. */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 2px;
	/* Sitio para la sombra del hover, que si no se recorta contra el borde. */
	padding-block: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--erm-linea) transparent;
}

.erm-carrusel__pista::-webkit-scrollbar {
	height: 8px;
}

.erm-carrusel__pista::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--erm-linea);
}

.erm-carrusel__pista::-webkit-scrollbar-thumb:hover {
	background: #cfd4dc;
}

/* Se gana en cascada por especificidad, no con !important: `.erm-carrusel__pista`
   antepuesto ya supera a `.woocommerce ul.products.columns-4` de Kadence. */
.erm-carrusel__pista .woocommerce ul.products {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--erm-gap);
	grid-template-columns: none;
	margin: 0;
	padding: 0;
}

.erm-carrusel__pista .woocommerce ul.products li.product {
	flex: 0 0 clamp(230px, 23%, 296px);
	width: auto;
	max-width: none;
	margin: 0;
	scroll-snap-align: start;
}

/* ==========================================================================
   Banda de ubicación
   Ocupa el hueco de la banda de contacto de la referencia, que allí lleva
   teléfono y horario. Aquí solo la dirección: es el único canal confirmado
   (D-4 sigue abierta) y media dirección es peor que ninguna.
   ========================================================================== */

.erm-banda {
	position: relative;
	overflow: hidden;
	background: #0d1016;
	isolation: isolate;
}

.erm-banda__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.erm-banda::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(8 10 14 / 0.92) 0%, rgb(8 10 14 / 0.78) 55%, rgb(8 10 14 / 0.58) 100%);
}

.erm-banda__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-block: clamp(36px, 4vw, 56px);
	color: #fff;
}

.erm-banda__ojo {
	margin: 0 0 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.7);
}

.erm-banda__titulo {
	margin: 0;
	font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.erm-banda .erm-boton {
	flex: none;
}

/* ==========================================================================
   Bloque de marca
   El «quiénes somos» de la referencia: fotografía grande y panel de texto.
   Sin fechas de fundación ni cifras de equipo: no están confirmadas.
   ========================================================================== */

.erm-marca-bloque__rejilla {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.erm-marca-bloque__titulo {
	margin: 0 0 16px;
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.erm-marca-bloque__texto {
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

.erm-marca-bloque__panel .erm-boton {
	margin-top: 10px;
}

.erm-marca-bloque__media {
	overflow: hidden;
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-marca-bloque__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	margin: 0;
}

/* ==========================================================================
   Responsive de las secciones nuevas
   Breakpoints alineados con Kadence (767 / 1024), sin crear un tercer sistema.
   ========================================================================== */

@media (max-width: 1024px) {
	/* Seis fichas a 1024 px dejan cada foto en 150 px: la etiqueta ocupa más
	   que la imagen. Tres por fila devuelven la fotografía a un tamaño en el
	   que se distingue el arma. */
	.erm-mosaico {
		grid-template-columns: repeat(3, 1fr);
	}

	.erm-valores {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px var(--erm-gap);
	}

	.erm-hero__rail {
		display: none;
	}

	.erm-marca-bloque__rejilla {
		grid-template-columns: 1fr;
	}

	.erm-marca-bloque__media {
		order: -1;
	}
}

@media (max-width: 767px) {
	.erm-hero {
		align-items: flex-end;
		min-height: 480px;
	}

	.erm-hero__inner {
		display: block;
	}

	.erm-mosaico {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.erm-valores {
		grid-template-columns: 1fr;
	}

	.erm-banda__inner {
		display: block;
	}

	.erm-banda .erm-boton {
		margin-top: 20px;
	}

	/* En un teléfono la card a 23 % se queda en 80 px. Ancho fijo cercano al
	   del viewport para que se lea una card por pantalla, con la siguiente
	   asomando: es lo que indica que la fila se desplaza. */
	.erm-carrusel__pista .woocommerce ul.products li.product {
		flex: 0 0 78vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erm-tarjeta-cat,
	.erm-tarjeta-cat__img,
	.erm-carrusel__flecha {
		transition: none;
	}

	.erm-tarjeta-cat:hover .erm-tarjeta-cat__img,
	.erm-tarjeta-cat:focus-visible .erm-tarjeta-cat__img {
		transform: scale(1.02);
	}
}


/* ==========================================================================
   Cabecera: buscador y banda de navegación
   La fila principal pasa a logo · buscador · carrito, y la navegación baja a
   una banda oscura propia. Reparto y colores en inc/cabecera.php.
   ========================================================================== */

/* Kadence reparte la fila principal con `grid-template-columns: 1fr auto 1fr`
   (assets/css/*.css). Ese `auto` central dimensiona el buscador por su
   contenido, y un campo de texto vacío mide lo que mida su atributo `size`:
   el marcador de posición salía cortado en «¿Qué buscas? Por ejem…».
   Se cambia a laterales por contenido y centro elástico. */
#main-header .site-main-header-inner-wrap.site-header-row-center-column {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.erm-buscador {
	width: 100%;
	min-width: 0;
	/* Tope para que en pantallas anchas el campo no se estire hasta pegarse al
	   logo y al carrito. La referencia lo mantiene en una caja centrada. */
	max-width: 620px;
	margin-inline: auto;
	padding-inline: 28px;
}

.erm-buscador__form {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.erm-buscador__form:focus-within {
	border-color: var(--erm-accion);
	box-shadow: 0 0 0 3px rgb(11 95 165 / 0.14);
}

.erm-buscador__lupa {
	display: grid;
	place-items: center;
	padding-inline: 12px 0;
	color: var(--erm-tenue);
	pointer-events: none;
}

.erm-buscador__lupa svg {
	width: 18px;
	height: 18px;
}

.erm-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
	color: var(--erm-tinta);
	/* El aro de foco lo pinta el formulario entero; en el campo se duplicaría. */
	outline: none;
	box-shadow: none;
}

.erm-buscador__campo::placeholder {
	color: var(--erm-tenue);
	/* El marcador de posición se recorta en pantallas medias en vez de empujar
	   el botón fuera de la caja. */
	text-overflow: ellipsis;
}

/* Se anula el aspecto nativo de `type="search"` en WebKit: la X de borrado se
   pinta sobre el borde del botón. */
.erm-buscador__campo::-webkit-search-decoration,
.erm-buscador__campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.erm-buscador__boton {
	flex: none;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: var(--erm-tinta);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.erm-buscador__boton:hover,
.erm-buscador__boton:focus-visible {
	background: var(--erm-accion);
	color: #fff;
}

/* Banda de navegación ------------------------------------------------------
   Kadence pinta el fondo de la fila; aquí solo se ajusta el ritmo horizontal
   para que el primer enlace quede a plomo con el logo de la fila de arriba. */
#main-header .site-bottom-header-wrap .header-navigation .header-menu-container > ul > li > a {
	padding-inline: 0.85em;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

#main-header .site-bottom-header-wrap .header-navigation .header-menu-container > ul > li:first-child > a {
	padding-inline-start: 0;
}

/* El conteo junto a cada categoría se pintó para fondo claro (inc/catalogo.php).
   Sobre la banda oscura hay que devolverle contraste. */
#main-header .site-bottom-header-wrap .erm-nav__conteo {
	border-color: rgb(255 255 255 / 0.28);
	background: rgb(255 255 255 / 0.10);
	color: rgb(255 255 255 / 0.86);
}

#main-header .site-bottom-header-wrap .erm-nav__conteo--vacio {
	border-color: rgb(255 255 255 / 0.22);
	background: transparent;
	color: rgb(255 255 255 / 0.62);
}

@media (max-width: 1024px) {
	.erm-buscador {
		max-width: none;
		padding-inline: 16px;
	}

	/* «BUSCAR» en texto ocupa un tercio del campo cuando el ancho aprieta. La
	   lupa a la izquierda ya explica el formulario, así que el botón se queda
	   sin etiqueta visible pero conserva la accesible. */
	.erm-buscador__boton {
		padding-inline: 14px;
		font-size: 0.75rem;
	}
}


/* ==========================================================================
   Pie de página
   Se inyecta dentro de #colophon desde inc/pie.php, por delante de las filas de
   widgets de Kadence. La barra de copyright del padre se conserva debajo.
   ========================================================================== */

.erm-pie {
	padding-block: 52px 44px;
	border-top: 1px solid var(--erm-linea);
	background: var(--erm-fondo-alt);
	color: var(--erm-tinta);
}

.erm-pie__rejilla {
	display: grid;
	/* La columna de marca pesa el doble: lleva párrafo y dirección, mientras
	   que las otras tres son listas de una línea por entrada. */
	grid-template-columns: 1.8fr 1.15fr 1fr 1.4fr;
	gap: var(--erm-gap);
	align-items: start;
}

.erm-pie__marca {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.erm-pie__titulo {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-pie__texto {
	margin: 0 0 12px;
	max-width: 42ch;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

.erm-pie__etiqueta {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

/* Catálogo agrupado: la familia hace de encabezado y sus hijas cuelgan debajo.
   El sangrado es lo único que marca la jerarquía; una lista anidada con viñetas
   añadiría un elemento gráfico más a una columna que se quiso callar. */
.erm-pie__grupo + .erm-pie__grupo {
	margin-top: 16px;
}

.erm-pie__familia {
	display: block;
	margin-bottom: 7px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--erm-tinta);
	text-decoration: none;
}

.erm-pie__familia:hover,
.erm-pie__familia:focus-visible {
	color: var(--erm-accion);
	text-decoration: underline;
}

.erm-pie__grupo .erm-pie__lista {
	padding-left: 12px;
	border-left: 1px solid var(--erm-linea);
}

/* La columna del catálogo pasa a ser la más alta de las cuatro; se le da algo
   más de ancho para que ningún nombre de subcategoría parta en dos líneas. */
.erm-pie__col--catalogo {
	min-width: 0;
}

.erm-pie__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-pie__lista a {
	display: block;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--erm-tinta-suave);
	text-decoration: none;
}

.erm-pie__lista a:hover,
.erm-pie__lista a:focus-visible {
	color: var(--erm-accion);
	text-decoration: underline;
}


.erm-pie__aviso {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--erm-linea);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--erm-tenue);
	text-wrap: pretty;
}

@media (max-width: 1024px) {
	.erm-pie__rejilla {
		grid-template-columns: 1fr 1fr;
		gap: 32px var(--erm-gap);
	}

	.erm-pie__col--marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.erm-pie {
		padding-block: 40px 32px;
	}

	.erm-pie__rejilla {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}


/* ==========================================================================
   Marcas de tarjeta
   Activos del expediente de Azul, normalizados a una altura óptica común por
   scripts/azul/normalizar-logos.py. No se recolorean ni se recortan: las guías
   de marca de Visa y Mastercard lo prohíben.
   ========================================================================== */

.erm-marcas-pago {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Se acota por altura y no por anchura: cada logotipo tiene una proporción
   distinta, y es la altura la que hace que la fila lea pareja. */
.erm-marcas-pago img {
	display: block;
	width: auto;
	height: 26px;
	margin: 0;
}

.erm-marcas-pago--checkout img {
	height: 30px;
}

/* ==========================================================================
   Checkout
   Dos columnas: datos a la izquierda, resumen y pago a la derecha. El resumen
   se queda pegado al hacer scroll porque es donde vive el importe, y perder de
   vista lo que vas a pagar mientras rellenas trece campos es de las cosas que
   más carritos abandona.
   ========================================================================== */

/* Sin acotar a `.woocommerce-checkout` / `.woocommerce-cart`: la barra también
   se pinta en la pantalla de salto a Azul, que es una página normal y no lleva
   esas clases en el body. Acotada, allí el <ol> se quedaba en bloque y los
   cuatro pasos salían apilados a todo lo ancho. */
.erm-pasos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.erm-pasos__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px 9px 10px;
	border: 1px solid var(--erm-linea);
	border-radius: 999px;
	background: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--erm-tenue);
}

.erm-pasos__num {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--erm-fondo-alt);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--erm-tenue);
}

.erm-pasos__item--hecho {
	border-color: var(--erm-linea);
	color: var(--erm-tinta-suave);
}

.erm-pasos__item--hecho .erm-pasos__num {
	background: var(--erm-exito);
	color: #fff;
}

.erm-pasos__item--actual {
	border-color: var(--erm-accion);
	background: var(--erm-accion);
	color: #fff;
}

.erm-pasos__item--actual .erm-pasos__num {
	background: rgb(255 255 255 / 0.22);
	color: #fff;
}

/* Campos ------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 18px;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--erm-tinta);
}

.woocommerce-checkout .form-row .required {
	color: #b3261e;
	text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
	font-size: 0.9375rem;
	color: var(--erm-tinta);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
	border-color: var(--erm-accion);
	box-shadow: 0 0 0 3px rgb(11 95 165 / 0.14);
	outline: none;
}

/* Resumen del pedido ------------------------------------------------------- */

.woocommerce-checkout #order_review {
	position: sticky;
	top: 24px;
	padding: 22px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.woocommerce-checkout #order_review table.shop_table {
	margin: 0;
	border: 0;
	background: transparent;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 12px 0;
	border-color: var(--erm-linea);
}

.woocommerce-checkout #order_review .order-total .woocommerce-Price-amount {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Declaración de moneda: es una fila de la tabla de totales, así que hereda su
   rejilla; se le quita el peso de celda de cabecera para que lea como nota. */
.erm-pago-moneda th {
	padding: 12px 0 0 !important;
	border: 0 !important;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--erm-tinta-suave);
	text-align: left;
}

/* Identidad del comercio, junto al monto final ----------------------------- */

.erm-pago-comercio {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--erm-linea);
}

.erm-pago-comercio__titulo {
	margin: 0 0 8px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-pago-comercio__nombre {
	margin: 0 0 10px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--erm-tinta);
}

.erm-pago-comercio__rnc {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--erm-tenue);
}

.erm-pago-comercio__dato {
	margin: 0 0 10px;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

.erm-pago-comercio__etiqueta {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-pago-comercio__dato a {
	color: var(--erm-accion);
	text-decoration: none;
}

.erm-pago-comercio__dato a:hover,
.erm-pago-comercio__dato a:focus-visible {
	text-decoration: underline;
}

/* Confianza, sobre el botón de pago ---------------------------------------- */

.erm-pago-confianza {
	margin: 22px 0 18px;
	padding: 18px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
}

.erm-pago-confianza__rotulo {
	margin: 0 0 10px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-pago-confianza__seguridad {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--erm-linea);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

.erm-pago-confianza__candado {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgb(43 113 48 / 0.10);
	color: var(--erm-exito);
}

.erm-pago-confianza__candado svg {
	width: 16px;
	height: 16px;
}

.erm-pago-confianza__legales {
	margin: 14px 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--erm-tenue);
}

.erm-pago-confianza__legales a {
	color: var(--erm-accion);
	text-decoration: underline;
}

/* Aviso de edad ------------------------------------------------------------ */

.erm-pago-edad {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid rgb(217 131 36 / 0.35);
	border-left: 3px solid var(--erm-estrella);
	border-radius: var(--erm-radio);
	background: rgb(217 131 36 / 0.07);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--erm-tinta);
	text-wrap: pretty;
}

/* Botón de pago ------------------------------------------------------------ */

.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 54px;
	border: 0;
	border-radius: var(--erm-radio);
	background: var(--erm-compra);
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	transition: background-color 0.15s ease;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus-visible {
	background: var(--erm-compra-oscura);
}

/* ==========================================================================
   Pie: banda legal
   Políticas y marcas de tarjeta. Azul pide que las políticas estén al pie y
   visibles antes de comprar.
   ========================================================================== */

.erm-pie__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--erm-linea);
}

.erm-pie__politicas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.erm-pie__politicas a {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--erm-tinta-suave);
	text-decoration: none;
}

.erm-pie__politicas a:hover,
.erm-pie__politicas a:focus-visible {
	color: var(--erm-accion);
	text-decoration: underline;
}

.erm-pie__pagos {
	display: flex;
	align-items: center;
	gap: 14px;
}

.erm-pie__pagos-rotulo {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-pie__contacto a {
	color: var(--erm-accion);
	text-decoration: none;
}

.erm-pie__contacto a:hover,
.erm-pie__contacto a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.woocommerce-checkout #order_review {
		position: static;
		padding: 18px;
	}

	.erm-pasos__item {
		flex: 1 1 auto;
		justify-content: center;
		padding-inline: 10px;
		font-size: 0.8125rem;
	}

	.erm-pie__legal {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ==========================================================================
   Páginas legales
   Índice a la izquierda, texto a la derecha. Casi nadie lee una política
   entera: se entra buscando un apartado, así que hay que poder saltar a él.
   ========================================================================== */

.erm-legal {
	padding-block: 48px 72px;
}

.erm-legal__cabecera {
	max-width: 62ch;
	margin-bottom: 40px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--erm-linea);
}

.erm-legal__ojo {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-legal__titulo {
	margin: 0 0 12px;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.erm-legal__fecha {
	margin: 0;
	font-size: 0.875rem;
	color: var(--erm-tenue);
}

.erm-legal__cuerpo {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

/* Índice ------------------------------------------------------------------- */

.erm-legal__indice {
	position: sticky;
	top: 24px;
	padding: 20px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-legal__indice-titulo {
	margin: 0 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

/* Sin numeración propia: los `h2` de estas políticas ya vienen numerados en su
   texto («1. Devoluciones»), y añadir un contador daba «1  1. Devoluciones».
   La lista es ordenada en el marcado, que es lo correcto semánticamente; el
   número visible lo aporta el propio título. */
.erm-legal__indice ol {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-legal__indice a {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--erm-tinta-suave);
	text-decoration: none;
}

.erm-legal__indice a:hover,
.erm-legal__indice a:focus-visible {
	color: var(--erm-accion);
	text-decoration: underline;
}

/* Texto -------------------------------------------------------------------- */

.erm-legal__texto {
	max-width: 68ch;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--erm-tinta-suave);
}

.erm-legal__texto h2 {
	margin: 40px 0 14px;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--erm-tinta);
	/* Compensa la cabecera pegajosa al saltar desde el índice. */
	scroll-margin-top: 24px;
}

.erm-legal__texto h2:first-child {
	margin-top: 0;
}

.erm-legal__texto h3 {
	margin: 26px 0 10px;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--erm-tinta);
}

.erm-legal__texto p {
	margin: 0 0 14px;
	text-wrap: pretty;
}

.erm-legal__texto ul,
.erm-legal__texto ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.erm-legal__texto li {
	margin-bottom: 7px;
}

.erm-legal__texto strong {
	color: var(--erm-tinta);
}

.erm-legal__texto a {
	color: var(--erm-accion);
}

.erm-legal__entrada {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--erm-tinta);
}

/* Bloques destacados ------------------------------------------------------- */

.erm-legal__destacado {
	margin: 0 0 22px;
	padding: 18px 20px;
	border: 1px solid var(--erm-linea);
	border-left: 3px solid var(--erm-accion);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-legal__destacado > p:last-child {
	margin-bottom: 0;
}

/* Para lo que el cliente tiene que leer sí o sí antes de pagar: la política de
   venta final. Ámbar y no rojo, que aquí no hay ningún error que corregir. */
.erm-legal__destacado--aviso {
	border-color: rgb(217 131 36 / 0.4);
	border-left-color: var(--erm-estrella);
	background: rgb(217 131 36 / 0.07);
}

/* Ficha de datos del comercio ---------------------------------------------- */

.erm-datos-comercio {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	gap: 8px 20px;
	margin: 0 0 22px;
	padding: 18px 20px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
	font-size: 0.9375rem;
}

.erm-datos-comercio dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--erm-tenue);
	/* Alinea la etiqueta con la primera línea de su valor, que es más grande. */
	padding-top: 0.2em;
}

.erm-datos-comercio dd {
	margin: 0;
	color: var(--erm-tinta);
}

.erm-datos-comercio a {
	color: var(--erm-accion);
}

/* Otras políticas ---------------------------------------------------------- */

.erm-legal__otras {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--erm-linea);
}

.erm-legal__otras-titulo {
	margin: 0 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-legal__otras ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-legal__otras a {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--erm-accion);
}

@media (max-width: 1024px) {
	.erm-legal__cuerpo {
		grid-template-columns: 1fr;
	}

	.erm-legal__indice {
		position: static;
	}
}

@media (max-width: 767px) {
	.erm-datos-comercio {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.erm-datos-comercio dd {
		margin-bottom: 12px;
	}
}


/* ==========================================================================
   Pantalla de salto a Azul
   Dura un segundo: el formulario se envía solo. Todo lo que hay aquí está para
   que ese segundo no parezca un error — que se vea a dónde se va, cuánto se
   paga y quién cobra.
   ========================================================================== */

.erm-salto {
	max-width: 620px;
	margin: 0 auto;
	padding-block: 8px 48px;
}

/* Los cuatro pasos a tamaño de checkout miden ~600 px y se partían en cuatro
   filas dentro de esta caja. Aquí van compactos: la barra es orientación, no
   contenido, y en esta pantalla dura un segundo. */
.erm-salto .erm-pasos {
	justify-content: center;
	gap: 6px;
	margin-bottom: 30px;
}

.erm-salto .erm-pasos__item {
	gap: 7px;
	padding: 7px 13px 7px 8px;
	font-size: 0.8125rem;
}

.erm-salto .erm-pasos__num {
	width: 19px;
	height: 19px;
	font-size: 0.6875rem;
}

.erm-salto__caja {
	padding: 36px 32px 28px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
	box-shadow: 0 2px 20px rgb(13 16 22 / 0.06);
	text-align: center;
}

.erm-salto__cabecera {
	margin-bottom: 26px;
}

.erm-salto__titulo {
	margin: 0 0 10px;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.erm-salto__texto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

/* Girador ------------------------------------------------------------------
   Solo mientras el envío está en marcha. Si el salto falla y se devuelve el
   control al usuario, desaparece: un girador eterno dice «roto». */
.erm-salto__girador {
	display: none;
	width: 34px;
	height: 34px;
	margin: 0 auto 18px;
	border: 3px solid var(--erm-linea);
	border-top-color: var(--erm-accion);
	border-radius: 50%;
	animation: erm-girar 0.8s linear infinite;
}

.erm-salto--enviando .erm-salto__girador {
	display: block;
}

@keyframes erm-girar {
	to { transform: rotate( 360deg ); }
}

@media (prefers-reduced-motion: reduce) {
	.erm-salto__girador {
		animation-duration: 2.4s;
	}
}

/* Resumen ------------------------------------------------------------------ */

.erm-salto__resumen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 40px;
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-salto__resumen div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.erm-salto__resumen dt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-salto__resumen dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--erm-tinta);
}

.erm-salto__importe {
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
}

/* Formulario del plugin ----------------------------------------------------
   El shortcode emite un <h4> con el mensaje de la pasarela y un <button class="btn">.
   Se les da forma aquí sin tocar el plugin. */

.erm-salto__form h4 {
	margin: 0 0 18px;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--erm-tenue);
	text-wrap: pretty;
}

/* Mientras el envío automático está en marcha, el mensaje de la pasarela y el
   botón sobran: el usuario no tiene nada que hacer. */
.erm-salto--enviando .erm-salto__form {
	display: none;
}

.erm-salto__form .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--erm-radio);
	background: var(--erm-compra);
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.erm-salto__form .btn:hover,
.erm-salto__form .btn:focus-visible {
	background: var(--erm-compra-oscura);
}

/* Si el salto automático no salió, se cambia el discurso: ya no estamos
   llevando a nadie, hay que pulsar. */
.erm-salto--manual .erm-salto__titulo,
.erm-salto--elegir .erm-salto__titulo {
	font-size: 1.3rem;
}

.erm-salto--manual .erm-salto__texto::after {
	content: " " attr( data-manual );
}

/* Confianza ---------------------------------------------------------------- */

.erm-salto__confianza {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--erm-linea);
}

.erm-salto__confianza .erm-marcas-pago {
	justify-content: center;
	margin-bottom: 12px;
}

.erm-salto__nota {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--erm-tenue);
	text-wrap: pretty;
}

.erm-salto__comercio {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--erm-linea);
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--erm-tenue);
	text-wrap: pretty;
}

.erm-salto__comercio strong {
	color: var(--erm-tinta-suave);
}


/* ==========================================================================
   Resultado del pago: aprobado, declinado, cancelado
   El shortcode de la pasarela devuelve cadena vacía cuando no hay parámetros
   válidos de Azul, así que estas pantallas tienen que sostenerse solas.
   ========================================================================== */

.erm-resultado {
	max-width: 620px;
	margin: 0 auto;
	padding-block: 8px 48px;
}

.erm-resultado .erm-pasos {
	justify-content: center;
	gap: 6px;
	margin-bottom: 30px;
}

.erm-resultado .erm-pasos__item {
	gap: 7px;
	padding: 7px 13px 7px 8px;
	font-size: 0.8125rem;
}

.erm-resultado .erm-pasos__num {
	width: 19px;
	height: 19px;
	font-size: 0.6875rem;
}

.erm-resultado__caja {
	padding: 40px 32px 32px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
	box-shadow: 0 2px 20px rgb(13 16 22 / 0.06);
	text-align: center;
}

/* Icono de estado ---------------------------------------------------------
   La forma ya distingue los tres casos, así que el estado no depende solo del
   color. */
.erm-resultado__icono {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 20px;
	border-radius: 50%;
}

.erm-resultado__icono svg {
	width: 30px;
	height: 30px;
}

.erm-resultado--exito .erm-resultado__icono {
	background: rgb(43 113 48 / 0.12);
	color: var(--erm-exito);
}

.erm-resultado--error .erm-resultado__icono {
	background: rgb(179 38 30 / 0.10);
	color: #b3261e;
}

.erm-resultado--aviso .erm-resultado__icono {
	background: rgb(217 131 36 / 0.13);
	color: #a35f14;
}

.erm-resultado__ojo {
	margin: 0 0 8px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-resultado__titulo {
	margin: 0 0 12px;
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.erm-resultado__texto {
	margin: 0 auto 26px;
	max-width: 46ch;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

/* Detalle de Azul ---------------------------------------------------------
   El shortcode emite `<ul id="AZUL_PaymentPage">` con un <li> por dato y un
   <span> de etiqueta. Se convierte en ficha de dos columnas sin tocar el
   plugin. */

/* --------------------------------------------------------------------------
   Recibo de confirmación

   El carrito enseña qué se está comprando: foto, nombre, variante e importe.
   La confirmación enseñaba once filas de volcado de la pasarela. Este bloque
   le da al recibo la misma lectura que el carrito, que es lo que el cliente
   espera ver en el momento en que acaba de pagar.
   -------------------------------------------------------------------------- */

/* La zona de la foto va en blanco, no en gris.
 *
 * Las imágenes de producto son JPEG con el fondo blanco quemado: sobre un
 * bloque gris cada miniatura se recortaba como una baldosa blanca, y lo que se
 * veía era el recuadro, no el rifle. En blanco la foto se funde con la tarjeta
 * y solo se ve el producto.
 *
 * Y de paso resuelve media cosa más: si el blanco sobrante ya no se ve, la
 * miniatura puede ser bastante mayor sin que nada parezca vacío. El producto
 * ocupa el 26% del alto de su lienzo cuadrado, así que agrandar la caja es la
 * única forma de agrandarlo sin recortar. */
.erm-recibo {
	margin: 0 0 20px;
	padding: 0;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo);
	text-align: left;
	/* Para que el bloque de totales respete las esquinas redondeadas. */
	overflow: hidden;
}

/* El bloque de entrega no tiene zonas: recupera su propio margen interior. */
.erm-recibo--entrega {
	padding: 18px 22px 20px;
}

.erm-recibo__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	padding: 18px 22px 14px;
	border-bottom: 1px solid var(--erm-linea);
}

.erm-recibo--entrega .erm-recibo__cab {
	padding: 0;
	border-bottom: 0;
}

.erm-recibo__titulo {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--erm-tinta);
}

.erm-recibo__fecha {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--erm-tinta-suave);
}

/* ------------------------------------------------------------- artículos */

.erm-recibo__articulos {
	margin: 0;
	padding: 4px 22px 10px;
	list-style: none;
}

.erm-recibo__articulo {
	display: grid;
	/* La foto fija, los datos elásticos y el importe pegado a la derecha: es
	   la misma rejilla del carrito, para que se lean igual. */
	grid-template-columns: 104px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	/* La imagen ya aporta su propio aire —es un lienzo cuadrado con el
	   producto en la banda central—, así que la fila no necesita más. */
	padding: 6px 0;
}

.erm-recibo__articulo + .erm-recibo__articulo {
	border-top: 1px solid var(--erm-linea);
}

/* Sin fondo ni borde: la foto ya trae el suyo, blanco, y sobre una tarjeta
   blanca deja de leerse como un recuadro. Se recorta a 100 px de alto porque
   el producto vive en la banda central del lienzo; lo que se pierde arriba y
   abajo es blanco, y nunca producto. */
.erm-recibo__miniatura img {
	display: block;
	width: 104px;
	height: 100px;
	border-radius: 0;
	object-fit: contain;
	background: none;
}

.erm-recibo__datos {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.erm-recibo__nombre {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--erm-tinta);
}

.erm-recibo__variante,
.erm-recibo__cantidad {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--erm-tinta-suave);
}

/* WooCommerce pinta la variante como <dl>; aquí va en una línea. */
.erm-recibo__variante p,
.erm-recibo__variante dl,
.erm-recibo__variante dt,
.erm-recibo__variante dd {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
}

.erm-recibo__variante dd::after {
	content: " ";
}

.erm-recibo__importe {
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--erm-tinta);
}

/* --------------------------------------------------------------- totales */

/* El gris se muda aquí. Separa lo que compraste de lo que pagaste, que es la
   división real del recibo, y deja limpia la zona de las fotos. */
.erm-recibo__totales {
	margin: 0;
	padding: 14px 22px 18px;
	border-top: 1px solid var(--erm-linea);
	background: var(--erm-fondo-alt);
}

.erm-recibo__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
	font-size: 0.875rem;
	color: var(--erm-tinta-suave);
}

.erm-recibo__fila dt,
.erm-recibo__fila dd {
	margin: 0;
}

.erm-recibo__fila dd {
	text-align: right;
}

.erm-recibo__fila--total {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--erm-linea);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--erm-tinta);
}

/* El cargo real va en pesos aunque la tienda muestre dólares. Destacarlo evita
   la llamada de «me cobraron otra cifra» al ver el estado de cuenta. */
.erm-recibo__fila--cargo {
	align-items: flex-start;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px dashed var(--erm-linea);
	color: var(--erm-tinta);
}

.erm-recibo__fila--total dd,
.erm-recibo__fila--cargo dd {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.erm-recibo__tasa {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--erm-tinta-suave);
}

/* --------------------------------------------------------------- entrega */

.erm-recibo--entrega .erm-recibo__titulo {
	margin-bottom: 8px;
}

.erm-recibo__direccion {
	margin: 0 0 8px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--erm-tinta);
}

.erm-recibo__nota {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--erm-tinta-suave);
}

/* ----------------------------------------------------------- transacción */

/* Un resguardo, no el contenido de la página: pequeño y al final. */
.erm-recibo__transaccion {
	margin: 0 0 22px;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
}

@media (max-width: 600px) {

	.erm-recibo--entrega {
		padding: 16px;
	}

	.erm-recibo__cab,
	.erm-recibo__totales {
		padding-left: 16px;
		padding-right: 16px;
	}

	.erm-recibo__articulos {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* A 390px, una miniatura de 76px dejaba 190px para el nombre y lo partía
	   en cuatro líneas. El nombre del producto importa más que veinte píxeles
	   de foto: se recorta la foto y se le devuelve el ancho al texto. */
	.erm-recibo__articulo {
		grid-template-columns: 60px minmax(0, 1fr);
		column-gap: 12px;
		padding: 10px 0;
	}

	.erm-recibo__miniatura img {
		width: 60px;
		height: 58px;
	}

	/* El importe pasa bajo los datos: a 360px, tres columnas dejan el nombre
	   partido en palabras sueltas. */
	.erm-recibo__importe {
		grid-column: 2;
		margin-top: 2px;
	}
}

.erm-resultado__detalle {
	margin: 0 0 26px;
	padding: 18px 20px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
	text-align: left;
}

.erm-resultado__detalle-titulo {
	margin: 0 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--erm-tenue);
}

.erm-resultado__detalle #AZUL_PaymentPage {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-resultado__detalle #AZUL_PaymentPage li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--erm-tinta);
}

.erm-resultado__detalle #AZUL_PaymentPage li + li {
	padding-top: 8px;
	border-top: 1px solid var(--erm-linea);
}

.erm-resultado__detalle #AZUL_PaymentPage span {
	font-size: 0.8125rem;
	color: var(--erm-tenue);
}

/* Párrafo vacío que deja el editor de bloques alrededor del shortcode. */
.erm-resultado__detalle p:empty {
	display: none;
}

.erm-resultado__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.erm-resultado__ayuda {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--erm-linea);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--erm-tenue);
	text-wrap: pretty;
}

.erm-resultado__ayuda a {
	color: var(--erm-accion);
	text-decoration: none;
}

.erm-resultado__ayuda a:hover,
.erm-resultado__ayuda a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Checkout bloqueado por artículos no disponibles
   Marcado propio en woocommerce/checkout/cart-errors.php.
   ========================================================================== */

.erm-bloqueo {
	max-width: 620px;
	margin: 0 auto;
	padding: 32px;
	border: 1px solid rgb(217 131 36 / 0.4);
	border-left: 3px solid var(--erm-estrella);
	border-radius: var(--erm-radio);
	background: rgb(217 131 36 / 0.06);
}

.erm-bloqueo__titulo {
	margin: 0 0 10px;
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.erm-bloqueo__texto {
	margin: 0 0 20px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
	text-wrap: pretty;
}

.erm-bloqueo__lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.erm-bloqueo__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 18px;
	padding: 14px 16px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
}

.erm-bloqueo__datos {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.erm-bloqueo__nombre {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--erm-tinta);
}

.erm-bloqueo__motivo {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #a35f14;
}

.erm-bloqueo__quitar {
	flex: none;
	padding: 9px 16px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	color: #b3261e;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.erm-bloqueo__quitar:hover,
.erm-bloqueo__quitar:focus-visible {
	border-color: #b3261e;
	background: rgb(179 38 30 / 0.06);
	color: #b3261e;
}

.erm-bloqueo__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* ==========================================================================
   Carrito de bloques: hacer visible el botón de eliminar
   El bloque lo pinta como una papelera sin texto, con el nombre accesible solo
   en `aria-label`. Quien mira la pantalla no encuentra cómo quitar un artículo,
   y es justo lo que hay que hacer cuando uno se queda sin existencias.
   ========================================================================== */

.wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--erm-tenue);
	text-decoration: none;
}

/* La etiqueta se añade por CSS y no por JavaScript: el carrito es un bloque de
   React y cualquier nodo inyectado desaparecería en el siguiente repintado.
   El botón ya tiene `aria-label`, que prevalece sobre el contenido, así que
   esto no duplica el anuncio del lector de pantalla. */
.wc-block-cart-item__remove-link::after {
	content: "Eliminar";
}

.wc-block-cart-item__remove-link svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus-visible {
	color: #b3261e;
	text-decoration: underline;
}

/* Disponibilidad en la card ------------------------------------------------
   El texto sale de WC_Product::get_availability(), la misma fuente que la
   ficha. Aquí solo se le da peso visual según el estado. */

.erm-card__stock--pocas .erm-card__unidades {
	color: #a35f14;
	font-weight: 700;
}

.erm-card__stock--agotado .erm-card__unidades {
	color: var(--erm-tenue);
	font-weight: 600;
}

/* Botón de un producto agotado. Se mantiene enlazable —la ficha sigue siendo
   útil: especificaciones, calibre, fabricante— pero se le quita el aspecto de
   llamada a la acción para que no compita con los productos que sí se pueden
   comprar. */
/* Se replica el selector completo de la regla verde —incluido
   `.product-action-wrap`— porque el botón de agotado vive dentro de ese
   contenedor y lleva también la clase `.button`. Con una clase menos perdía la
   cascada y salía verde, con el mismo peso visual que un producto que sí se
   puede comprar. */
.woocommerce ul.products li.product.loop-entry .product-action-wrap .erm-card__boton--agotado {
	background: transparent;
	border: 1px solid var(--erm-linea);
	color: var(--erm-tenue);
}

.woocommerce ul.products li.product.loop-entry .product-action-wrap .erm-card__boton--agotado:hover,
.woocommerce ul.products li.product.loop-entry .product-action-wrap .erm-card__boton--agotado:focus-visible {
	border-color: var(--erm-tinta-suave);
	background: var(--erm-fondo-alt);
	color: var(--erm-tinta-suave);
}

/* Conversión a pesos bajo el total. Azul exige especificar la conversión a RD$
   cuando los precios se muestran en dólares. */
.erm-pago-moneda__conversion {
	display: block;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--erm-linea);
	color: var(--erm-tinta);
}

/* Estado «añadido» de la card ----------------------------------------------
   Tras el AJAX, WooCommerce añade `.added_to_cart` («Ver carrito») junto al
   botón. Sin estilo se apilaba pegado y parecía parte del propio botón. */
.woocommerce ul.products li.product.loop-entry .added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--erm-accion);
	text-align: center;
	text-decoration: underline;
}

.woocommerce ul.products li.product.loop-entry .added_to_cart:hover,
.woocommerce ul.products li.product.loop-entry .added_to_cart:focus-visible {
	color: var(--erm-accion-oscura);
}

/* El botón ya pulsado deja de ser la llamada principal: la acción siguiente es
   ir al carrito, no volver a añadir. */
.woocommerce ul.products li.product.loop-entry .add_to_cart_button.added {
	background: var(--erm-compra-oscura);
}


/* ==========================================================================
   Swatches de variación (inc/variaciones.php)
   El calibre y el color se eligen viéndolos, no abriendo un desplegable.
   Ocultos por defecto a propósito: los revela assets/js/variaciones.js, así
   que sin JavaScript queda el `<select>` de siempre y nada se rompe.
   ========================================================================== */
.erm-swatches__lista {
	display: none;
}

.erm-swatches--activo select {
	/* Fuera de la vista pero presente: WooCommerce y ficha.js siguen leyéndolo. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.erm-swatches--activo .erm-swatches__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erm-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 3.5rem;
	min-height: 2.75rem;
	padding: 8px 12px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo);
	color: var(--erm-tinta);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Kadence pinta `button:hover, button:focus, button:active` con fondo sólido,
   texto invertido y sombra (assets/css/global.min.css). Sin anular esos tres
   estados el swatch se rellena al enfocarlo y se vacía al salir el foco: el
   aspecto dependería de dónde está el cursor y no de lo que hay elegido. */
.erm-swatch:hover,
.erm-swatch:focus,
.erm-swatch:active {
	background: var(--erm-fondo);
	color: var(--erm-tinta);
	box-shadow: none;
}

.erm-swatch:hover {
	border-color: var(--erm-tenue);
}

/* El elegido se marca con borde y anillo, no solo con color: el color por sí
   solo no es un indicador accesible (WCAG 1.4.1). Se repiten los estados
   porque, si no, pasar el ratón por encima del elegido lo despintaría. */
.erm-swatch.is-elegido,
.erm-swatch.is-elegido:hover,
.erm-swatch.is-elegido:focus,
.erm-swatch.is-elegido:active {
	border-color: var(--erm-accion);
	box-shadow: inset 0 0 0 1px var(--erm-accion);
}

.erm-swatch:focus-visible {
	outline: 2px solid var(--erm-accion);
	outline-offset: 2px;
}

/* Combinación inexistente o sin stock. Se deja visible y no se quita: ver que
   «madera» existe pero no con este calibre es información útil. */
.erm-swatch.is-agotado,
.erm-swatch.is-agotado:hover,
.erm-swatch.is-agotado:focus {
	border-color: var(--erm-linea);
	border-style: dashed;
	color: var(--erm-tenue);
	cursor: not-allowed;
	opacity: 0.55;
}

.erm-swatch.is-agotado .erm-swatch__img {
	filter: grayscale(1);
}

.erm-swatches__lista--imagen .erm-swatch {
	padding: 6px 6px 8px;
}

.erm-swatch__img {
	display: block;
	width: 68px;
	height: 68px;
	object-fit: contain;
	border-radius: 3px;
	background: var(--erm-fondo-alt);
}

.erm-swatch--imagen .erm-swatch__etiqueta {
	font-size: 0.875rem;
	font-weight: 500;
}

/* La etiqueta del atributo y sus opciones se leen como un bloque, no como una
   fila de tabla: con swatches el valor ya no cabe a la derecha del rótulo. */
.variations_form .variations th.label,
.variations_form .variations td.value {
	display: block;
	width: auto;
	padding-inline: 0;
	text-align: start;
}

.variations_form .variations th.label label {
	margin-bottom: 6px;
	font-weight: 700;
}

@media (max-width: 480px) {
	.erm-swatch__img {
		width: 56px;
		height: 56px;
	}
}


/* ==========================================================================
   Filtros de rango (cañón y precio)
   Dos `input[type=range]` nativos superpuestos sobre una pista. Nativos y no
   una librería: llegan accesibles con teclado y lector de pantalla, y pesan 0.
   La pista solo aparece cuando el script los ha montado; sin JavaScript
   quedan los dos campos numéricos, que envían el formulario igual.
   ========================================================================== */

.erm-rango__pista {
	display: none;
}

.erm-rango--activo .erm-rango__pista {
	position: relative;
	display: block;
	height: 3px;
	margin: 18px 8px 20px;
	border-radius: 3px;
	background: var(--erm-linea);
}

.erm-rango__relleno {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 3px;
	background: var(--erm-accion);
}

/* El `input` ocupa toda la pista pero es transparente a los clics: solo el
   pulgar responde. Así los dos mandos conviven sin taparse el uno al otro. */
/* Se cualifica con el elemento y el contenedor porque Kadence estiliza
   `input[type=range]` —borde, fondo, padding, sombra— con especificidad (0,1,1),
   que gana a una clase suelta. Sin esto el mando se ve como una caja de texto. */
.erm-rango__pista input.erm-rango__mando {
	position: absolute;
	inset-inline: -8px;
	top: 50%;
	width: calc(100% + 16px);
	max-width: none;
	height: 20px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.erm-rango__pista input.erm-rango__mando:focus {
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: 0;
}

/* Chrome sigue pintando su pista nativa aunque el input sea transparente, y
   se dibuja encima de la nuestra. Hay que vaciarla explícitamente. */
.erm-rango__pista input.erm-rango__mando::-webkit-slider-runnable-track {
	height: 20px;
	background: transparent;
	border: 0;
}

.erm-rango__pista input.erm-rango__mando::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--erm-accion);
	border-radius: 50%;
	background: var(--erm-fondo);
	box-shadow: 0 1px 3px rgb(22 24 29 / 0.22);
	cursor: grab;
	pointer-events: auto;
	margin-top: 1px;
}

.erm-rango__pista input.erm-rango__mando::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--erm-accion);
	border-radius: 50%;
	background: var(--erm-fondo);
	box-shadow: 0 1px 3px rgb(22 24 29 / 0.22);
	cursor: grab;
	pointer-events: auto;
}

.erm-rango__pista input.erm-rango__mando::-moz-range-track {
	background: transparent;
	border: 0;
}

.erm-rango__pista input.erm-rango__mando:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--erm-accion);
	outline-offset: 2px;
}

.erm-rango__pista input.erm-rango__mando:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--erm-accion);
	outline-offset: 2px;
}

.erm-rango__campos {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 6px;
}

.erm-rango__campo {
	width: 100%;
	min-width: 0;
	padding: 7px 8px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo);
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--erm-tinta);
}

.erm-rango__campo:focus-visible {
	outline: 2px solid var(--erm-accion);
	outline-offset: 1px;
	border-color: var(--erm-accion);
}

.erm-rango__guion {
	color: var(--erm-tenue);
}

.erm-rango__aplicar {
	grid-column: 1 / -1;
	margin-top: 8px;
	padding: 8px 12px;
	border: 1px solid var(--erm-accion);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--erm-accion);
	cursor: pointer;
}

.erm-rango__aplicar:hover,
.erm-rango__aplicar:focus-visible {
	background: var(--erm-accion);
	color: #fff;
	box-shadow: none;
}

/* Los extremos de la escala. Sin ellos el mando no dice de qué a qué se mueve. */
.erm-rango__escala {
	display: flex;
	justify-content: space-between;
	margin: 10px 0 0;
	font-size: 0.75rem;
	color: var(--erm-tenue);
}

.erm-filtro__nota {
	margin: 10px 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--erm-tenue);
}

/* --------------------------------------------------------------------------
   Producto sin artículo en ADM Cloud

   No se puede facturar, así que no se puede comprar. La ficha se queda sin
   botón, y este bloque explica por qué y ofrece una salida — sin él, el
   cliente no sabe si el fallo es suyo o de la tienda.
   -------------------------------------------------------------------------- */

.erm-sin-adm {
	margin: 18px 0 24px;
	padding: 16px 18px;
	border: 1px solid var(--erm-linea);
	border-left: 3px solid var(--erm-tenue);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-sin-adm__titulo {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--erm-tinta);
}

.erm-sin-adm p {
	margin: 0 0 6px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--erm-tinta-suave);
}

.erm-sin-adm__contacto {
	margin: 0;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Comprobante fiscal en el checkout

   Es opcional y la mayoría no lo necesita, así que empieza plegado tras una
   casilla. Al abrirse se separa visualmente del resto del formulario: son los
   datos de otra identidad —la empresa a la que se factura— y mezclarlos con
   los del comprador invita a rellenarlos mal.
   -------------------------------------------------------------------------- */

.erm-ncf {
	margin: 18px 0 4px;
	padding: 14px 16px;
	border: 1px solid var(--erm-linea);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-ncf__interruptor {
	margin: 0 !important;
	padding: 0 !important;
}

.erm-ncf__interruptor label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.erm-ncf__ayuda {
	display: block;
	margin-top: 4px;
	padding-left: 25px;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--erm-tinta-suave);
}

.erm-ncf__campos {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--erm-linea);
}

.erm-ncf__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding-top: 4px;
}

.erm-ncf__opcion {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

/* La casilla de reutilizar va pegada a su campo, no suelta: así se lee como
   una propiedad de ese campo y no como una pregunta aparte. */
.erm-ncf__reusar {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 5px 0 0;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--erm-tinta-suave);
	cursor: pointer;
}

/* Un campo reutilizado se ve tomado de otro sitio, no editable y no roto. */
.erm-ncf__campo--reusado {
	background: var(--erm-fondo-alt) !important;
	color: var(--erm-tinta-suave) !important;
}

.erm-ncf textarea {
	min-height: 0;
	resize: vertical;
}

/* La casilla de confirmación solo aparece tras un rechazo del padrón, así que
   tiene que verse como una excepción y no como un campo más. */
.erm-ncf__confirmar {
	margin: 10px 0 14px !important;
	padding: 10px 12px;
	border-left: 3px solid var(--erm-accion);
	background: var(--erm-fondo);
	border-radius: 4px;
}

.erm-ncf__confirmar label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.erm-ncf__confirmar .erm-ncf__ayuda {
	padding-left: 24px;
}

/* Resultado de la consulta al padrón, bajo el campo del RNC. */
.erm-ncf__dgii {
	display: block;
	margin-top: 5px;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--erm-tinta-suave);
}

.erm-ncf__dgii--ok {
	color: var(--erm-exito);
	font-weight: 600;
}

.erm-ncf__dgii--aviso {
	color: #9a6700;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Aviso de venta sujeta a validación

   Tiene que leerse antes de teclear la dirección, no después de pagar. Pero sin
   alarmar: el 97% del catálogo pasa por aquí, así que esto le sale a casi todo
   el mundo y la mayoría va a comprar igual. De ahí el tono informativo —azul de
   acción, no rojo de error— y el párrafo de garantía al final.
   -------------------------------------------------------------------------- */

.erm-validacion {
	margin: 0 0 26px;
	padding: 18px 20px;
	border: 1px solid var(--erm-linea);
	border-left: 3px solid var(--erm-accion);
	border-radius: var(--erm-radio);
	background: var(--erm-fondo-alt);
}

.erm-validacion__titulo {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--erm-tinta);
}

.erm-validacion p {
	margin: 0 0 10px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--erm-tinta-suave);
}

.erm-validacion__articulos {
	margin: 0 0 12px;
	padding-left: 20px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--erm-tinta);
}

.erm-validacion__articulos li {
	margin-bottom: 2px;
}

/* El reembolso es lo que convierte el aviso en algo tranquilizador en vez de
   en una advertencia. Se destaca. */
.erm-validacion__garantia {
	padding-top: 10px;
	border-top: 1px solid var(--erm-linea);
	color: var(--erm-tinta) !important;
	font-weight: 600;
}

.erm-validacion__contacto {
	margin: 0 !important;
	font-size: 0.8125rem !important;
}

/* La línea corta de arriba. Una frase: avisa de que existe, sin el detalle. */
.erm-validacion-breve {
	margin: 0 0 20px;
	padding: 11px 14px;
	border-left: 3px solid var(--erm-accion);
	border-radius: 4px;
	background: var(--erm-fondo-alt);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--erm-tinta-suave);
}

/* Dentro de la columna del pedido el bloque completo va más contenido: ahí el
   ancho es la mitad y compite con el botón de pagar. */
.woocommerce-checkout-review-order .erm-validacion {
	margin: 0 0 18px;
	padding: 14px 16px;
}

.woocommerce-checkout-review-order .erm-validacion__titulo {
	font-size: 0.9375rem;
}

.woocommerce-checkout-review-order .erm-validacion p,
.woocommerce-checkout-review-order .erm-validacion__articulos {
	font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   WhatsApp

   Dos botones con dos pesos distintos a propósito. El flotante es una ayuda
   permanente y se ve; el de la ficha va contorneado y debajo del de comprar,
   porque consultar es más fácil que comprar y, a igual peso visual, gana el
   más fácil. Ahí se ofrece como salida para quien dudaba, no como alternativa
   para quien ya decidió.
   -------------------------------------------------------------------------- */

:root {
	--erm-wa: #25d366;
	--erm-wa-oscuro: #128c7e;
}

.erm-wa__icono {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------- flotante */

.erm-wa-flotante {
	position: fixed;
	/* `env()` respeta la barra de gestos del iPhone; el segundo valor es para
	   los navegadores que no la conocen. */
	inset-block-end: calc(18px + env(safe-area-inset-bottom, 0px));
	inset-inline-end: 18px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--erm-wa);
	color: #fff;
	box-shadow: 0 4px 14px rgb(13 16 22 / 0.22);
	transition: transform 0.18s ease, background 0.18s ease;
}

.erm-wa-flotante:hover,
.erm-wa-flotante:focus-visible {
	background: var(--erm-wa-oscuro);
	color: #fff;
	transform: scale(1.06);
}

.erm-wa-flotante .erm-wa__icono {
	width: 28px;
	height: 28px;
}

@media (max-width: 600px) {

	.erm-wa-flotante {
		width: 48px;
		height: 48px;
	}

	.erm-wa-flotante .erm-wa__icono {
		width: 25px;
		height: 25px;
	}
}

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

	.erm-wa-flotante {
		transition: none;
	}

	.erm-wa-flotante:hover,
	.erm-wa-flotante:focus-visible {
		transform: none;
	}
}