/*
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;
}

/* ==========================================================================
   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;
	}

	.erm-filtros {
		grid-column: 1;
		grid-row: 1 / span 99;
		position: sticky;
		top: 24px;
	}
}

.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);
}

.erm-filtro__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 19rem;
	overflow-y: auto;
}

.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-filtro__lista {
		max-height: 14rem;
	}
}

/* ==========================================================================
   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 ---------------------------------------------
   Dos líneas exactas. Mediana real del catálogo 44 caracteres, p90 63; con
   ~317px de card las dos líneas cubren el p90. `min-height` reserva el hueco
   para que un título corto no descuadre la fila. */
.erm-card__titulo {
	margin: 0 0 14px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	min-height: calc(2 * 1.3em);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-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. */

.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;
}