/*
Theme Name: E-Pharmia
Template: twentytwentyfive
Description: Tema hijo de Twenty Twenty-Five para tiendas E-Pharmia — un solo diseño, sirve para cualquier farmacia (configuración en Ajustes → E-Pharmia, no en el código). Sin plugins ni temas de terceros a propósito: ver Puente/pilar_vps_infra.md "Aislamiento Águila".
Version: 1.0.0
Text Domain: e-pharmia
*/

/* ---------- Tira de categorías (vive en el encabezado; ver "Encabezado FIJO" más abajo) ----------
   Estado completo = anillo con el nombre debajo. Estado compacto (al bajar) = chip de una línea: lo decide la clase
   .is-compact del encabezado, no esta tira, así que la misma tira sirve en cualquier lugar donde se ponga.
   Qué va dentro del anillo (lo decide el plugin e-pharmia-core): foto de la categoría, o foto del tema, o —si no hay ninguna—
   el anillo llega vacío y acá se pinta el ícono como MÁSCARA (assets/icons/<slug>.svg): toma el color del texto y
   cambiar un ícono es reemplazar un archivo. */
.epharmia-cats {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	/* 3px arriba y abajo: el contorno de foco (2px) tiene que caber, porque un contenedor con scroll recorta lo que se sale. */
	padding: 3px 16px 8px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.epharmia-cats::-webkit-scrollbar {
	display: none;
}
.epharmia-cat {
	flex: none;
	width: 76px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.epharmia-cat .ring {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	/* Azul cruz SOLO como borde (3,89:1: sirve para un contorno grande, nunca para texto); el ícono va en azul profundo. */
	border: 2px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--action);
}
.epharmia-cat .ring > span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}
/* Con foto: fondo blanco por si la foto trae transparencia (las de producto vienen sobre blanco). */
.epharmia-cat .ring > span:has( > img ) {
	background: #fff;
}
.epharmia-cat .ring img {
	width: 100%;
	height: 100%;
	/* cover: las fotos de categoría son de ambiente, cuadradas, con el motivo al centro; el círculo corta las esquinas. */
	object-fit: cover;
}
.epharmia-cat .ring > span:empty::before {
	content: "";
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask-image: var(--epharmia-icono, url("assets/icons/generico.svg"));
	mask-image: var(--epharmia-icono, url("assets/icons/generico.svg"));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.epharmia-cat[data-cat="dermo"] { --epharmia-icono: url("assets/icons/dermo.svg"); }
.epharmia-cat[data-cat="sol"] { --epharmia-icono: url("assets/icons/sol.svg"); }
.epharmia-cat[data-cat="cabello"] { --epharmia-icono: url("assets/icons/cabello.svg"); }
.epharmia-cat[data-cat="sonrisa"] { --epharmia-icono: url("assets/icons/sonrisa.svg"); }
.epharmia-cat[data-cat="maquillaje"] { --epharmia-icono: url("assets/icons/maquillaje.svg"); }
.epharmia-cat[data-cat="perfumeria"] { --epharmia-icono: url("assets/icons/perfumeria.svg"); }
.epharmia-cat[data-cat="cuerpo-e-higiene"] { --epharmia-icono: url("assets/icons/cuerpo-e-higiene.svg"); }
.epharmia-cat[data-cat="bebes"] { --epharmia-icono: url("assets/icons/bebes.svg"); }
.epharmia-cat .label {
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
}
.epharmia-cat:focus-visible {
	/* Sin separación: el contenedor con scroll recortaría un contorno separado (ver .epharmia-cats). */
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 0;
	border-radius: 10px;
}
/* Categoría que se está mirando: anillo relleno + nombre en negrita (no depende solo del color: la negrita también lo dice). */
.epharmia-cat[aria-current="page"] .ring {
	background: var(--wp--preset--color--action);
	border-color: var(--wp--preset--color--action);
	color: #fff;
}
.epharmia-cat[aria-current="page"] .label {
	font-weight: 700;
}
/* Acceso a "Medicamentos por WhatsApp": verde de WhatsApp con contraste (#14804a = 4,98:1 con blanco). */
.epharmia-cat-rx {
	width: 104px;
}
.epharmia-cat-rx .ring {
	background: #fff;
	border-color: var(--wp--preset--color--wa);
	color: var(--wp--preset--color--wa);
}
.epharmia-wa-glyph {
	display: block;
	width: 26px;
	height: 26px;
}

/* ---------- Tarjetas de producto (grilla) ---------- */
.wc-block-product-template > li,
.wp-block-woocommerce-product-template > li {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	overflow: hidden;
	padding-bottom: 12px;
	transition: border-color .12s ease, transform .12s ease;
	/* Columna: el precio y el botón quedan anclados abajo aunque el nombre ocupe 1 o 2 renglones. */
	display: flex;
	flex-direction: column;
}
.wc-block-product-template > li > .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template > li > .wp-block-woocommerce-product-price {
	margin-top: auto;
}
.wc-block-product-template > li:hover,
.wp-block-woocommerce-product-template > li:hover {
	border-color: var(--wp--preset--color--line-strong);
	transform: translateY(-2px);
}
.wc-block-product-template > li > *:not(.wc-block-components-product-image),
.wp-block-woocommerce-product-template > li > *:not(.wc-block-components-product-image) {
	padding-left: 12px;
	padding-right: 12px;
}
/* !important: WooCommerce escribe en el propio <img> style="object-fit:cover; aspect-ratio:1/1" y eso le ganaba a este CSS: las fotos de envases se
   recortaban (cover) en vez de verse enteras (contain). Medido en la tienda publicada el 29/09. */
.wc-block-components-product-image img {
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	background: #fff;
	padding: 8px;
	box-sizing: border-box;
}
.wc-block-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: left;
}
.wc-block-product-template .wp-block-post-title a,
.wp-block-woocommerce-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.epharmia-brand {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 2px;
}
.epharmia-unit {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 2px;
}
.wc-block-components-product-price,
.wc-block-grid__product-price {
	font-family: var(--wp--preset--font-family--mono);
}
/* Precio viejo tachado ENCIMA del nuevo: en una tarjeta angosta (5 por fila) los dos juntos no caben en un renglón y el "$" quedaba huérfano. */
.wc-block-product-template .wc-block-components-product-price del,
.wp-block-woocommerce-product-template .wc-block-components-product-price del {
	display: block;
}
.wc-block-product-template .wc-block-components-product-price ins,
.wp-block-woocommerce-product-template .wc-block-components-product-price ins {
	white-space: nowrap;
}
/* Tarjetas más compactas (29/09, pedido de Lorenzo: "los productos son muy grandes" frente a embon): precio de 16 px y botón a todo el ancho de la tarjeta
   (blanco táctil grande, y no queda flotando a un costado). El tamaño de cada tarjeta lo fija la cantidad de columnas (ver las filas de abajo). */
.wc-block-product-template .wc-block-components-product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price {
	font-size: 16px;
}
.wc-block-product-template .wp-block-button.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-template .wp-block-button.wc-block-components-product-button .wp-block-button__link {
	/* Mismo selector que WooCommerce (que fija width:auto y display:inline-flex) para poder ganarle: el botón ocupa todo el ancho de la tarjeta y centra su texto. */
	display: flex;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	padding: 10px 12px;
	text-align: center;
}
/* 🔴 Restos de wpautop en Ofertas y Novedades (29/09, medido en la tienda publicada): esas dos filas salen de un shortcode y WordPress les mete <p></p> vacíos
   dentro de la foto, un <br> antes del botón y un <p> alrededor de la marca. Sumaban ~100 px de alto a cada tarjeta (617 px contra 520 px de la grilla de
   "Productos", que no pasa por ahí). Se ocultan acá porque el HTML lo genera WordPress después del plugin. */
.epharmia-carrusel-prod .wc-block-components-product-image p,
.epharmia-carrusel-prod .wp-block-woocommerce-product-template p:empty,
.epharmia-carrusel-prod .wc-block-components-product-button br {
	display: none;
}
.epharmia-carrusel-prod .wp-block-woocommerce-product-template > li > p {
	margin: 0;
}
.wc-block-components-product-price del {
	color: var(--wp--preset--color--ink-soft);
	font-size: .8em;
}
.wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--sale);
}

/* Cartel de oferta "−N%" (29/09, pedido de Lorenzo: "los carteles de ofertas tendrían que resaltar más"; referencias: embon = círculo amarillo, Farmacity = rectángulo
   rojo con letra blanca). Antes: rectángulo blanco con filo fino, casi invisible. Ahora: relleno en el rojo de oferta del tema (#b42318, 6,5:1 con blanco) y
   letra blanca en negrita. Tamaño moderado a propósito: la decisión del 28/09 dice que un cartel MUY grande va anclado a un texto de "recomendación
   profesional" de la farmacéutica, y ese texto todavía no existe (plan_mejoras_diseno_tienda.md §10, fila 7). */
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	padding: 5px 10px;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--sale);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: 0 2px 6px rgba(31, 43, 58, .25);
}

/* ---------- Aviso "OFERTA −X %" sin precio tachado (descuento informado, opción C del mockup aprobado por Lorenzo el 02/10) ----------
   Lo escribe e-pharmia-core (includes/aviso-descuento.php) dentro del bloque de la imagen del producto (tarjetas) y de la galería (ficha): una cinta arriba con "OFERTA · 02/10
   AL 31/10" (comienzo y fin, art. 7) y un círculo con el porcentaje. La palabra OFERTA va SIEMPRE junto al porcentaje: el círculo no existe sin la cinta. Mismo rojo de oferta del tema
   (--sale #b42318, 6,5:1 con blanco). Se ancla a la foto (`.epharmia-aviso-host` = position: relative) y no tapa el enlace (pointer-events: none). Sin animaciones. */
.epharmia-aviso-host {
	position: relative;
}
.epharmia-aviso {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	display: block;
}
.epharmia-aviso-cinta {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	padding: 5px 6px;
	background: var(--wp--preset--color--sale);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
	border-radius: 8px 8px 0 0;
}
.epharmia-aviso-pct {
	position: absolute;
	top: 34px;
	right: 8px;
	display: grid;
	place-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--sale);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	box-shadow: 0 2px 6px rgba(31, 43, 58, .25);
}
.epharmia-aviso-pct small {
	display: block;
	margin-top: 1px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
}
/* Ficha: la galería de WooCommerce ya tiene la lupa de zoom arriba a la derecha (se superponía con el círculo, visto en la tienda real el 03/10): ahí el círculo va a la izquierda. */
.wp-block-woocommerce-product-image-gallery .epharmia-aviso-pct {
	right: auto;
	left: 8px;
}
/* Ficha del producto: la vigencia completa y de qué es el descuento, en tinta (el rojo solo como acento: el texto chico necesita contraste). */
.epharmia-aviso-linea {
	margin: .35rem 0 .75rem;
	color: var(--wp--preset--color--ink);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
}
/* Mini tarjeta del feed del celular con aviso: el cartel dice "OFERTA −35%" en una sola línea. */
.epharmia-feed-mini .cartel {
	white-space: nowrap;
}

/* ---------- Encabezado FIJO (D1) ----------
   Una sola pieza: logo/buscador/cuenta/carrito + tira de categorías. Dos estados que decide
   assets/header.js con un IntersectionObserver: COMPLETO (arriba de todo) y COMPACTO (al bajar, chips en una línea).
   Cómo se evita el salto de contenido al compactarse: el hueco (.epharmia-header-slot) conserva SIEMPRE el alto del estado
   completo, y en compacto el encabezado sale del flujo (position: fixed). El cambio se dispara justo cuando la parte visible
   del encabezado completo ya mide lo mismo que el compacto, así que ni el contenido ni el borde se mueven.
   Sin JavaScript no hay estado compacto: el envoltorio del template part queda pegajoso (respaldo). */
:root {
	--epharmia-top: 0px;
}
/* Barra de administración de WordPress (solo para quien está logueado): el encabezado fijo tiene que quedar debajo de ella. */
body.admin-bar {
	--epharmia-top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar { --epharmia-top: 46px; }
}
@media (max-width: 600px) {
	/* En pantallas muy chicas la barra de admin deja de ser fija y se va con el scroll. */
	body.admin-bar { --epharmia-top: 0px; }
}
.wp-block-template-part:has( > .epharmia-header-slot ) {
	position: sticky;
	top: var(--epharmia-top);
	z-index: 100;
}
.epharmia-js .wp-block-template-part:has( > .epharmia-header-slot ) {
	position: static;
}
.epharmia-header-slot {
	position: relative;
}
.epharmia-js .epharmia-header-slot {
	min-height: var(--epharmia-hdr-h, 0);
}
/* Marca invisible arriba del hueco: el IntersectionObserver mira esta marca para saber cuánto se bajó. */
.epharmia-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.epharmia-header {
	position: relative;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
/* Sin el espacio entre bloques que WordPress mete entre hermanos: cada pieza del encabezado fija su propio alto. */
.epharmia-header-slot > *,
.epharmia-header > * {
	margin-block: 0;
}
.epharmia-js .epharmia-header.is-compact {
	position: fixed;
	top: var(--epharmia-top);
	left: 0;
	right: 0;
	box-shadow: 0 6px 16px rgba(31, 43, 58, .12);
}
/* Medidas del encabezado = las que se escriben acá (con el borde y el relleno adentro), no las del navegador por defecto. */
.epharmia-header,
.epharmia-header *,
.epharmia-header *::before,
.epharmia-header *::after {
	box-sizing: border-box;
}
.epharmia-header :focus-visible {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}

/* Fila de arriba: logo | buscador | cuenta y carrito. En celular el buscador baja a su propia fila. */
.epharmia-hrow {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "logo icons" "search search";
	align-items: center;
	gap: 6px 10px;
	padding: 8px 16px 6px;
	max-width: calc(var(--wp--style--global--wide-size, 1180px) + 64px);
	margin-inline: auto;
}
.epharmia-hrow > .epharmia-logo { grid-area: logo; }
.epharmia-hrow > .epharmia-hicons { grid-area: icons; }
.epharmia-hrow > .wp-block-search { grid-area: search; }
.epharmia-hrow > * { margin-block: 0; }

.epharmia-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}
.epharmia-logo img {
	display: block;
	flex: none;
	width: 38px;
	height: 38px;
	/* El logo que sube la farmacia puede no ser cuadrado: se ve entero, sin deformarse. */
	object-fit: contain;
}
/* Logo horizontal (A3, modo «wide»): ya trae el nombre, sin texto al lado. Va DESPUÉS de la regla de 38×38 (misma especificidad: gana el último). */
.epharmia-logo--wide img {
	width: auto;
	height: auto;
	max-height: 44px;
	max-width: min(220px, 55vw);
}

.epharmia-hicons {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
}
/* Cuenta, carrito y lupa: blancos táctiles de 44 px (40 al compactar). Los dos primeros son bloques de WooCommerce. */
.epharmia-hicons a,
.epharmia-hicons button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.epharmia-hicons .wc-block-mini-cart__button {
	padding: 0 6px;
}
/* La lupa que abre el buscador la crea header.js y solo se ve en celular con el encabezado compacto. */
.epharmia-search-toggle {
	display: none !important;
}

/* Buscador (bloque nativo de WordPress). Texto de 16 px para que iOS no haga zoom al tocarlo. */
.epharmia-header .wp-block-search {
	width: 100%;
	max-width: 520px;
	margin: 0;
	justify-self: center;
}
.epharmia-header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	min-height: 44px;
	padding: 0 2px 0 0;
	border: 1px solid var(--wp--preset--color--control);
	border-radius: 10px;
	background: #fff;
	align-items: center;
}
/* Selectores largos a propósito: WordPress fija el relleno y el borde del campo con una regla de 4 clases; para ganarle sin !important
   hay que igualarla y sumar una. */
.epharmia-header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
	min-height: 40px;
	padding: 0 6px 0 14px;
	border-radius: 0;
	background: transparent;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
}
/* El contorno de foco lo dibuja el contenedor redondeado, no el campo: un rectángulo adentro pisaba el borde y se veía torpe. */
.epharmia-header .wp-block-search__inside-wrapper:has( > .wp-block-search__input:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}
.epharmia-header .wp-block-search__input:focus-visible {
	outline: none;
}
.epharmia-header .wp-block-search .wp-block-search__input::placeholder {
	color: #66707f;
	opacity: 1;
}
.epharmia-header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
	min-width: 44px;
	min-height: 40px;
	margin: 0 0 0 2px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-soft);
}
.epharmia-header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover {
	background: transparent;
	color: var(--wp--preset--color--ink);
}

/* Estado compacto: logo y botones más chicos, categorías en chips de una línea. */
.epharmia-header.is-compact .epharmia-hrow {
	padding-top: 3px;
	padding-bottom: 0;
	row-gap: 2px;
}
.epharmia-header.is-compact .epharmia-logo {
	min-height: 40px;
	/* 18 px: la serif de los títulos no baja de ese tamaño (más chica se lee mal). */
	font-size: 18px;
}
.epharmia-header.is-compact .epharmia-logo img {
	width: 30px;
	height: 30px;
}
.epharmia-header.is-compact .epharmia-logo--wide img {
	width: auto;
	height: auto;
	max-height: 34px;
}
.epharmia-header.is-compact .epharmia-hicons a,
.epharmia-header.is-compact .epharmia-hicons button {
	min-width: 40px;
	min-height: 40px;
}
.epharmia-header.is-compact .epharmia-cats {
	gap: 5px;
	padding: 3px 16px 6px;
}
.epharmia-header.is-compact .epharmia-cat {
	flex-direction: row;
	width: auto;
	height: 34px;
	gap: 5px;
	padding: 0 11px 0 7px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: #fff;
}
.epharmia-header.is-compact .epharmia-cat .ring {
	width: 20px;
	height: 20px;
	border: 0;
	background: transparent;
}
.epharmia-header.is-compact .epharmia-cat .ring > span:empty::before {
	width: 17px;
	height: 17px;
}
.epharmia-header.is-compact .epharmia-wa-glyph {
	width: 18px;
	height: 18px;
}
.epharmia-header.is-compact .epharmia-cat .label {
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}
.epharmia-header.is-compact .epharmia-cat-rx {
	width: auto;
	border-color: var(--wp--preset--color--wa);
}
.epharmia-header.is-compact .epharmia-cat[aria-current="page"] {
	background: var(--wp--preset--color--action);
	border-color: var(--wp--preset--color--action);
	color: #fff;
}
.epharmia-header.is-compact .epharmia-cat[aria-current="page"] .ring {
	background: transparent;
}

/* Celular */
@media (max-width: 759px) {
	.epharmia-hicons .wc-block-mini-cart__amount {
		display: none;
	}
	/* Al bajar, el buscador se esconde y una lupa lo abre (así el encabezado ocupa ~1/5 de la pantalla y no ~1/4). */
	.epharmia-js .epharmia-header.is-compact .epharmia-search-toggle {
		display: inline-flex !important;
	}
	.epharmia-js .epharmia-header.is-compact:not(.search-open) .wp-block-search {
		display: none;
	}
}
/* Escritorio: el buscador va en el medio, entre el logo y los íconos, y no se esconde nunca. */
@media (min-width: 760px) {
	.epharmia-hrow {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "logo search icons";
		gap: 10px 20px;
		/* 14 px abajo: con menos, la tira de categorías se sentía pegada al buscador (Lorenzo, 20/09, mirando la tienda real). */
		padding: 8px 32px 14px;
	}
	.epharmia-header.is-compact .epharmia-hrow {
		padding: 3px 32px 5px;
	}
	.epharmia-cats {
		justify-content: safe center;
		max-width: calc(var(--wp--style--global--wide-size, 1180px) + 64px);
		margin-inline: auto;
		padding-inline: 16px;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.epharmia-header {
		transition: box-shadow .15s ease;
	}
}

/* ---------- Barra de anuncio ---------- */
.epharmia-anuncio {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 16px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

/* ---------- Botón de arrepentimiento (Disposición 954/2025) ----------
   Vive en el encabezado (decisión de Lorenzo 28/09, revierte la del 23/09: una encuesta de Yanina validó
   el riesgo legal de dejarlo solo en el pie, que exige "a simple vista... en el primer acceso").
   El pie sigue linkeando la página de devoluciones aparte. */
.epharmia-arrepentimiento {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 24 px de alto mínimo: es un blanco táctil y tiene que poder tocarse sin errar. */
	min-height: 24px;
	padding: 2px 16px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--ink);
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: underline;
}

/* ---------- Pie legal (identificación del vendedor + links + redes) ---------- */
.epharmia-legal {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.epharmia-legal-vendedor,
.epharmia-legal-director {
	font-size: 12px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}
.epharmia-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 12px;
}
.epharmia-legal-links a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: underline;
}
.epharmia-legal-social {
	color: var(--wp--preset--color--ink-soft);
	display: inline-flex;
}
.epharmia-legal-credito {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 11.5px;
	color: var(--wp--preset--color--ink-soft);
	text-align: center;
}
.epharmia-legal-credito a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* ---------- Hero (se muestra solo si no hay banners vigentes) ---------- */
.epharmia-hero {
	background: linear-gradient(115deg, var(--wp--preset--color--tint), transparent 70%), #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	padding: 28px 26px;
	margin: 24px auto;
	max-width: var(--wp--style--global--wide-size);
}
.epharmia-hero h1 {
	font-size: clamp(24px, 3.4vw, 34px);
	margin: 0;
	max-width: 620px;
}
.epharmia-hero p {
	color: var(--wp--preset--color--ink-soft);
	margin: 10px 0 0;
}

/* ---------- Carrusel de banners ---------- */
.epharmia-banners {
	position: relative;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto 24px;
}
.epharmia-banners .track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 18px;
}
.epharmia-banners .track::-webkit-scrollbar {
	display: none;
}
.epharmia-banners .slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.epharmia-banners img {
	display: block;
	width: 100%;
	height: auto;
}
.epharmia-banners .nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--wp--preset--color--ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(31, 43, 58, .15);
}
.epharmia-banners .prev { left: 12px; }
.epharmia-banners .next { right: 12px; }
.epharmia-banners .dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	padding-top: 6px;
}
/* Cada punto es un botón de 24×24 px (WCAG 2.5.8) que dibuja un punto de 8 px; el inactivo usa el gris de bordes de control (≥3:1, WCAG 1.4.11). */
.epharmia-banners .dots button:not(.playpause) {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.epharmia-banners .dots button:not(.playpause)::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--wp--preset--color--control);
}
.epharmia-banners .dots button[aria-current="true"]::before {
	width: 20px;
	margin-left: -10px;
	border-radius: 4px;
	background: var(--wp--preset--color--action);
}
/* Pausa / reanudar: la crea carrusel.js solo cuando el carrusel avanza solo. */
.epharmia-banners .dots .playpause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 10px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--control);
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.epharmia-banners .dots button:focus-visible,
.epharmia-banners .nav:focus-visible {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}
/* La portada con banner pega con el encabezado: WordPress separa cada bloque de la raíz con el "block gap" (24 px por defecto) y eso dejaba una franja
   blanca arriba del banner. Solo si hay banner (sin banner, el hero conserva su aire). */
.wp-site-blocks > main:has( > .epharmia-banners ) {
	margin-block-start: 0;
}
/* Banner de escritorio de BORDE A BORDE (23/09, pedido de Lorenzo): las imágenes se hacen a 1920×640, pensadas para todo el ancho. Solo desde 701 px;
   en celular sigue dentro del margen, con esquinas redondeadas. `50% - 50vw` saca el bloque del ancho de la columna y lo estira a la ventana.
   Arriba pega con el encabezado (la portada ya no lleva relleno superior). Altura tope de 560 px: en pantallas muy anchas recorta un poco
   arriba y abajo (object-fit: cover) en vez de crecer sin límite — el texto de los banners va al centro. */
@media (min-width: 701px) {
	/* `!important` + selector más específico: el diseño "constrained" de WordPress pone `margin-left/right: auto !important` a todo hijo de la
	   portada, y con eso mis márgenes negativos no se aplicaban (el banner salía corrido a la derecha, versión del PR #550). */
	.wp-block-group > .epharmia-banners {
		max-width: none !important;
		width: 100vw;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	.epharmia-banners .track {
		border-radius: 0;
	}
	.epharmia-banners img {
		max-height: 560px;
		object-fit: cover;
	}
	.epharmia-banners .prev { left: 24px; }
	.epharmia-banners .next { right: 24px; }
	/* 100vw incluye la barra de desplazamiento (en Windows): `clip` recorta ese sobrante sin crear un contenedor con scroll, así el encabezado pegajoso sigue funcionando. */
	body {
		overflow-x: clip;
	}
}
@media (max-width: 700px) {
	.epharmia-banners { margin-top: 12px; }
	/* Las flechas se quedan también en celular (antes se escondían y solo quedaba deslizar): más chicas para no tapar el banner. */
	.epharmia-banners .nav { width: 36px; height: 36px; font-size: 24px; }
	.epharmia-banners .prev { left: 6px; }
	.epharmia-banners .next { right: 6px; }
	.epharmia-banners .track { border-radius: 14px; }
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Red de seguridad contra el desborde horizontal en TODOS los anchos: si algo se sale (una lista con scroll, un texto oculto, una imagen), se recorta en vez de
   ensanchar la página. `clip` (no `hidden`) para no crear un contenedor con scroll: el encabezado pegajoso sigue funcionando. Probado 29/09 contra la tienda
   publicada: sin esto innerWidth pasaba de 390 a 1243 px en un iPhone. */
.wp-site-blocks {
	overflow-x: clip;
}

/* ---------- Aviso de alcance (medicamentos) ---------- */
.epharmia-alcance {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------- Títulos chicos ---------- */
/* La serif de los títulos (IBM Plex Serif) se usa desde 18 px hacia arriba; más chica se lee mal. Los títulos chicos
   (h4-h6 y los rótulos de carrito y pago de WooCommerce) van en la sans del texto, en negrita. */
h4,
h5,
h6,
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

/* ---------- Secciones de la portada: ofertas vigentes, marcas, "Ver todo" (D1, mejora 1) ---------- */
.epharmia-seccion {
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin: 28px auto 8px;
}
.epharmia-seccion > h2 {
	margin: 0 0 14px;
	font-size: 22px;
}
.epharmia-marcas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Marcas en TEXTO (sin logos de terceros): chips de 44 px de alto, con el conteo real. */
.epharmia-marcas-lista a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.epharmia-marcas-lista a:hover {
	border-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--action);
}
.epharmia-marcas-lista a:focus-visible {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}
.epharmia-marcas-lista .n {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-size: 12px;
	color: var(--wp--preset--color--ink-soft);
}
.epharmia-vertodo {
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin: 20px auto 0;
	text-align: center;
}
.epharmia-vertodo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Ofertas y Novedades: fila horizontal que se desliza (scroll-snap) ----------
   La fila es la lista de tarjetas de WooCommerce, forzada a una sola línea. Las tarjetas conservan el estilo de la grilla.
   4 a la vista en escritorio, 3 en tablet, 2 y un asomo de la siguiente en celular (para que se note que hay más). */
.epharmia-cp-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.epharmia-cp-cab > h2 {
	margin: 0;
	font-size: 22px;
}
.epharmia-cp-botones {
	display: flex;
	gap: 8px;
}
.epharmia-cp-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.epharmia-cp-btn[hidden] {
	display: none;
}
.epharmia-cp-btn:hover:not(:disabled) {
	border-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--action);
}
.epharmia-cp-btn:disabled {
	opacity: .4;
	cursor: default;
}
.epharmia-cp-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}
.epharmia-carrusel-prod {
	/* Cuántas tarjetas se ven a la vez (admite fracción: 1,2 = una entera y un asomo de la siguiente). Es el ÚNICO número a tocar para
	   achicar o agrandar las tarjetas. Compu 4 (Lorenzo 29/09: embon y Farmacity muestran 4; con 5 se veía apretado), tablet 3, celular 1,15 (Lorenzo 29/09: en celular todas las farmacias
	   muestran de a un producto en carrusel; el asomo avisa que hay más). */
	--epharmia-cols: 4;
	--epharmia-gap: 16px;
}
.epharmia-carrusel-prod .wp-block-woocommerce-product-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--epharmia-gap);
	/* 🔴 relative: la fila con scroll tiene que ser el bloque contenedor de lo posicionado adentro. Sin esto los textos ocultos para lectores de pantalla
	   (.screen-reader-text, position: absolute; están en el precio de cada oferta) tomaban de referencia el <main>, no se recortaban al deslizar y
	   ensanchaban TODA la página (hasta ~1240 px): en el celular se podía arrastrar la página fuera del diseño (Lorenzo, 29/09, Safari). */
	position: relative;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* 3px arriba/abajo: el contorno de foco y el levantón del :hover no se recortan dentro de un contenedor con scroll. 1px a los costados: sin él el borde
	   derecho de la última tarjeta visible quedaba recortado por el propio contenedor. */
	padding: 3px 1px 6px;
	margin: 0;
	list-style: none;
}
.epharmia-carrusel-prod .wp-block-woocommerce-product-template::-webkit-scrollbar {
	display: none;
}
.epharmia-carrusel-prod .wp-block-woocommerce-product-template > li {
	flex: 0 0 calc( ( 100% - ( var(--epharmia-cols) - 1 ) * var(--epharmia-gap) ) / var(--epharmia-cols) ) !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	scroll-snap-align: start;
}
@media (max-width: 900px) {
	.epharmia-carrusel-prod { --epharmia-cols: 3; }
}
@media (max-width: 600px) {
	.epharmia-carrusel-prod {
		/* UNA tarjeta a la vez con un asomo LEVE de la siguiente (~30 px; Lorenzo 29/09: "debe aparecer solo uno" y después "debería asomarse
		   levemente"; Farmacity deja asomar ~1/3, embon nada: este es el punto medio). Se avanza con ‹ › o deslizando. */
		--epharmia-cols: 1.15;
		--epharmia-gap: 12px;
	}
	/* La portada ganaba 30 px de margen a cada lado en celular (el encabezado usa 16): con 16 la tarjeta única queda ~30 px más ancha y, con el mismo alto,
	   más cuadrada. */
	body.home main.has-global-padding {
		padding-inline: 16px;
	}
	/* Con una sola tarjeta a la vista (ancho completo) la foto cuadrada haría la tarjeta muy alta y estirada (Lorenzo 29/09: "debe conservar un
	   formato más cuadrado"): la foto va en 3:2 (contain: no recorta el envase) y el tachado vuelve a ir al lado del precio, que ahora sí cabe. */
	.epharmia-carrusel-prod .wc-block-components-product-image img,
	.epharmia-grid-movil .wc-block-components-product-image img {
		aspect-ratio: 3 / 2 !important;
	}
	.epharmia-carrusel-prod .wc-block-components-product-price del,
	.epharmia-grid-movil .wc-block-components-product-price del {
		display: inline;
	}
	/* La grilla "Productos" de la portada también va de a uno en celular (mismo carrusel, deslizando; en compu sigue siendo grilla).
	   Sin botones ‹ › porque no está dentro de .epharmia-carrusel-prod (los crea carrusel-productos.js). */
	.epharmia-grid-movil {
		--epharmia-cols: 1.15;
		--epharmia-gap: 12px;
	}
	.epharmia-grid-movil .wp-block-woocommerce-product-template {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: var(--epharmia-gap);
		position: relative; /* mismo motivo que arriba: contiene los .screen-reader-text absolutos */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 3px 0 6px;
		margin: 0;
		list-style: none;
	}
	.epharmia-grid-movil .wp-block-woocommerce-product-template::-webkit-scrollbar {
		display: none;
	}
	.epharmia-grid-movil .wp-block-woocommerce-product-template > li {
		flex: 0 0 calc( ( 100% - ( var(--epharmia-cols) - 1 ) * var(--epharmia-gap) ) / var(--epharmia-cols) ) !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		margin: 0 !important;
		scroll-snap-align: start;
	}
}

/* ---------- Bloques dentro de las filas de la portada (09/10, plan_feed_bloques_portada.md) ----------
   e-pharmia-core/includes/portada-bloques.php. Un <li class="epharmia-fila-bloque"> con UN producto destacado, apaisado: más bajo que una tarjeta de producto, así se reconoce
   al instante. 🔴 Las reglas de ancho de arriba fijan el ancho de TODO `> li` con !important (una tarjeta); el bloque tiene las suyas, más específicas.
   Celular: el ancho de UNA tarjeta (la fila muestra 1,15 y el asomo avisa que hay más). Compu: el de 2 tarjetas.
   «Productos» es la grilla de siempre en la compu: allí el bloque no va (epharmia-fila-solo-movil). Apagado el interruptor no existe ningún <li> de estos. */
.epharmia-carrusel-prod .wp-block-woocommerce-product-template > li.epharmia-fila-bloque,
.epharmia-grid-movil .wp-block-woocommerce-product-template > li.epharmia-fila-bloque {
	flex: 0 0 calc( ( 100% - ( var(--epharmia-cols) - 1 ) * var(--epharmia-gap) ) / var(--epharmia-cols) ) !important;
	align-self: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--tint);
	list-style: none;
}
@media (min-width: 601px) {
	.epharmia-carrusel-prod .wp-block-woocommerce-product-template > li.epharmia-fila-bloque {
		flex-basis: calc( 2 * ( ( 100% - ( var(--epharmia-cols) - 1 ) * var(--epharmia-gap) ) / var(--epharmia-cols) ) + var(--epharmia-gap) ) !important;
	}
	li.epharmia-fila-bloque.epharmia-fila-solo-movil {
		display: none !important;
	}
}
.epharmia-fila-cab h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}
/* Altura reservada: «Mirá también» y «Visto anteriormente» ocupan el mismo lugar, así que el reemplazo no mueve la página. */
.epharmia-fila-cuerpo {
	display: flex;
	min-height: 112px;
}
.epharmia-fila-bloque .epharmia-feed-mini {
	flex: 1 1 auto;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 38% minmax( 0, 1fr );
	grid-auto-rows: min-content;
	align-content: center;
	column-gap: 10px;
	row-gap: 2px;
	width: 100%;
	min-width: 0;
	padding: 8px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.epharmia-fila-bloque .epharmia-feed-mini .foto {
	grid-column: 1;
	grid-row: 1 / span 5;
	align-self: center;
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}
.epharmia-fila-bloque .epharmia-feed-mini .foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}
.epharmia-fila-bloque .epharmia-feed-mini .cartel {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 2px 6px;
	border-radius: 8px;
	background: var(--wp--preset--color--sale);
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.1;
	white-space: nowrap;
}
.epharmia-fila-bloque .epharmia-feed-mini .nom {
	grid-column: 2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}
.epharmia-fila-bloque .epharmia-feed-mini .pre {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	line-height: 1.25;
}
.epharmia-fila-bloque .epharmia-feed-mini .pre .normal {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}
.epharmia-fila-bloque .epharmia-feed-mini .pre del {
	color: var(--wp--preset--color--ink-soft);
	font-size: 11px;
}
.epharmia-fila-bloque .epharmia-feed-mini .pre ins {
	text-decoration: none;
	color: var(--wp--preset--color--sale);
	font-weight: 500;
}
.epharmia-fila-bloque .epharmia-feed-mini .hasta {
	grid-column: 2;
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 1.3;
	color: var(--wp--preset--color--sale);
}
.epharmia-fila-bloque .epharmia-fila-ir {
	grid-column: 2;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--action-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* «Ver las N ofertas» dentro del bloque: envuelto en un <div> (wpautop mete un <p> alrededor de un <a> suelto). Área táctil de 44 px. */
.epharmia-fila-mas-w {
	margin: 0;
}
.epharmia-fila-mas {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -8px -10px;
	color: var(--wp--preset--color--sale);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.epharmia-fila-bloque a:focus-visible {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}

/* ---------- Ofertas por categoría (29/09): enlace del carrusel + barra sobre el listado ----------
   e-pharmia-core/includes/ofertas-filtro.php. "Ver las N ofertas" (portada) abre el catálogo con ?en_oferta=1; ahí la barra muestra las categorías que tienen
   ofertas, con su número real. Todo son enlaces comunes. Rojo de oferta del tema solo como acento (el texto va en tinta: contraste). */
.epharmia-cp-todas {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--sale);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.epharmia-cp-todas-w {
	margin-left: auto;
}
.epharmia-cp-todas:hover {
	text-decoration-thickness: 2px;
}
.epharmia-cp-todas:focus-visible {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}
@media (max-width: 600px) {
	/* En celular el título y los botones ocupan la fila: el enlace baja a su propia línea, a todo el ancho. */
	.epharmia-cp-cab {
		flex-wrap: wrap;
	}
	.epharmia-cp-todas-w {
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
	}
	.epharmia-cp-todas {
		padding: 0;
	}
}
.epharmia-ofertas-barra {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin: 0 auto 16px;
}
.epharmia-oferta-pastilla {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--wp--preset--color--sale);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--sale);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.epharmia-oferta-pastilla:hover {
	background: var(--wp--preset--color--sale);
	color: #fff;
}
.epharmia-oferta-pastilla:focus-visible,
.epharmia-ofertas-lista a:focus-visible,
.epharmia-oferta-quitar:focus-visible {
	outline: 2px solid var(--wp--preset--color--action-deep);
	outline-offset: 2px;
}
.epharmia-ofertas-activa {
	padding: 14px 16px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--sale);
	border-radius: 12px;
	background: #fff;
}
.epharmia-ofertas-t {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 18px;
}
.epharmia-ofertas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.epharmia-ofertas-lista a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.epharmia-ofertas-lista a:hover {
	border-color: var(--wp--preset--color--sale);
}
/* La que se está mirando: relleno + negrita (no depende solo del color). */
.epharmia-ofertas-lista a[aria-current="page"] {
	background: var(--wp--preset--color--sale);
	border-color: var(--wp--preset--color--sale);
	color: #fff;
}
.epharmia-ofertas-lista .n {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-size: 12px;
}
.epharmia-oferta-quitar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 14px;
	text-decoration: underline;
}
@media (max-width: 600px) {
	/* Las categorías se deslizan de costado en una sola fila (como la tira del encabezado) en vez de ocupar media pantalla. */
	.epharmia-ofertas-lista {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		/* 5 px: el contorno de foco (2 px + 2 px de separación) entra entero; con menos, el contenedor con scroll lo recortaba. */
		padding: 5px;
	}
	.epharmia-ofertas-lista::-webkit-scrollbar {
		display: none;
	}
	.epharmia-ofertas-lista a {
		white-space: nowrap;
	}
}

/* ---------- Grillas de WooCommerce: páginas de categoría, buscador, marcas (29/09) ----------
   Vienen con `columns-3` fijo: en compu tarjetas de ~380 px (las "muy grandes" que Lorenzo comparó con embon) y en celular de a dos. Ahora igual que la portada:
   4 por fila en compu, 3 en tablet y UNA por fila en celular (una lista vertical, no un carrusel: la categoría tiene paginado y hasta 16 tarjetas por página).
   Selector de 3 clases para ganarle a `.wc-block-product-template__responsive.columns-3` de WooCommerce (2 clases) sin !important; medido en la tienda real
   que con `body .…` (1 clase) no alcanzaba. La grilla de la portada en celular no cuenta: es un carrusel (.epharmia-grid-movil, con display:flex !important). */
ul.wc-block-product-template__responsive.wc-block-product-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 900px) {
	ul.wc-block-product-template__responsive.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	ul.wc-block-product-template__responsive.wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
	}
	ul.wc-block-product-template__responsive .wc-block-components-product-image img {
		aspect-ratio: 3 / 2 !important;
	}
	body.archive main.has-global-padding {
		padding-inline: 16px;
	}
}

/* ---------- Categorías en grande (pie de la portada) ----------
   Mismas categorías y mismos anillos que la tira del encabezado (.epharmia-cat), pero grandes y en varias líneas, sin scroll. */
.epharmia-categorias-grandes {
	margin-top: 40px;
	padding: 32px 16px 28px;
	border-radius: 20px;
	background: var(--wp--preset--color--tint);
}
.epharmia-categorias-grandes > h2 {
	margin: 0 0 24px;
	text-align: center;
	font-size: 26px;
}
.epharmia-cats-grandes {
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 24px;
	overflow: visible;
	padding: 3px 0;
	max-width: none;
	margin-inline: 0;
}
.epharmia-cats-grandes .epharmia-cat {
	width: 132px;
	gap: 10px;
}
.epharmia-cats-grandes .epharmia-cat .ring {
	width: 120px;
	height: 120px;
	border-width: 3px;
	background: #fff;
}
.epharmia-cats-grandes .epharmia-cat .ring > span:empty::before {
	width: 52px;
	height: 52px;
}
/* WhatsApp en grande: la ilustración de pastillas (assets/categorias/medicamentos-whatsapp.svg) llena el anillo como las fotos de las otras
   categorías; sin ese archivo queda el glifo de línea, más grande que en la tira. */
.epharmia-cats-grandes .epharmia-wa-glyph {
	width: 56px;
	height: 56px;
}
.epharmia-cats-grandes .epharmia-cat .label {
	font-size: 16px;
	text-align: center;
}
@media (max-width: 600px) {
	.epharmia-categorias-grandes {
		padding: 24px 8px 20px;
	}
	.epharmia-cats-grandes {
		gap: 20px 8px;
	}
	.epharmia-cats-grandes .epharmia-cat {
		width: 30%;
	}
	.epharmia-cats-grandes .epharmia-cat .ring {
		width: 88px;
		height: 88px;
	}
}

/* ---------- Sin resultados (D1, mejora 5) ---------- */
.epharmia-sinres {
	max-width: 640px;
	margin: 24px auto;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--tint);
	text-align: center;
}
.epharmia-sinres p {
	margin: 0 0 12px;
}
.epharmia-sinres-t {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.epharmia-sinres-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.epharmia-sinres-cats a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.epharmia-sinres-wa {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	/* Verde de WhatsApp con contraste (#14804a = 4,98:1 con blanco). */
	background: var(--wp--preset--color--wa);
	color: #fff;
}

/* ---------- Promesa de entrega (plugin e-pharmia-core, includes/plazo.php) ----------
   Ficha, carrito y pago. Fondo azul claro con filo azul cruz (el azul cruz solo en bordes, nunca en texto chico);
   el texto va en tinta para que el contraste sea alto. La fecha es lo que el cliente lee primero. */
.epharmia-plazo {
	box-sizing: border-box;
	margin: 16px 0;
	padding: 14px 16px;
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
}
.epharmia-plazo p {
	margin: 0;
}
.epharmia-plazo__titulo {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
}
.epharmia-plazo__detalle {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
}
.epharmia-plazo__nota {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

/* ---------- Feed del celular (F1; e-pharmia-core/includes/feed-movil.php + assets/feed-movil.js) ----------
   Franjas de descubrimiento entre productos ("Ofertas en …", "Mirá también") y el pie del feed (botón "Ver más"). Solo en celular: en compu el <template> no se
   ve y el JS no arma nada. Cada franja es un <li> del listado (a todo el ancho de la pantalla, con fondo propio para que se lea como "otra cosa", no como un producto). */
.epharmia-feed-pie,
.epharmia-feed-centinela {
	display: none;
}
@media (max-width: 600px) {
	html.epharmia-feed-on .wp-block-query-pagination {
		display: none; /* solo cuando el feed arrancó: sin JS queda el paginado de siempre */
	}
	.epharmia-feed-pie {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 16px 0 8px;
	}
	.epharmia-feed-ver-mas {
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		border: 1px solid var(--wp--preset--color--action);
		border-radius: 12px;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--action);
		font-weight: 600;
		font-size: 16px;
		cursor: pointer;
	}
	.epharmia-feed-ver-mas[hidden] {
		display: none;
	}
	.epharmia-feed-ver-mas[aria-disabled="true"] {
		opacity: 0.6;
		cursor: progress;
	}
	.epharmia-feed-estado {
		margin: 0;
		min-height: 1.3em;
		font-size: 14px;
		color: var(--wp--preset--color--ink-soft);
	}
	.epharmia-feed-centinela {
		display: block;
		height: 1px;
	}
	.epharmia-feed-aviso {
		margin: 0 0 8px;
		font-size: 13px;
		line-height: 1.4;
		color: var(--wp--preset--color--ink);
	}
	.epharmia-feed-aviso:empty {
		display: none;
	}

	li.epharmia-feed-bloque {
		grid-column: 1 / -1;
		box-sizing: border-box;
		list-style: none;
		/* a todo el ancho de la pantalla: el listado tiene 16 px de margen a cada lado */
		margin: 4px -16px;
		padding: 16px 16px 14px;
		background: var(--wp--preset--color--tint);
	}
	.epharmia-feed-cab {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 10px;
	}
	.epharmia-feed-cab h2 {
		margin: 0;
		font-family: var(--wp--preset--font-family--display);
		font-weight: 600;
		font-size: 18px;
		line-height: 1.2;
		text-wrap: balance;
		color: var(--wp--preset--color--ink);
	}
	.epharmia-feed-mas {
		flex: none;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: var(--wp--preset--color--sale);
		font-weight: 600;
		font-size: 13px;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.epharmia-feed-rail {
		position: relative; /* contiene los .screen-reader-text absolutos (ensanchaban la página; 29/09) */
		display: flex;
		gap: 10px;
		overflow-x: auto;
		margin-inline: -16px;
		padding: 3px 16px 6px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.epharmia-feed-rail::-webkit-scrollbar {
		display: none;
	}
	.epharmia-feed-mini {
		flex: none;
		box-sizing: border-box;
		width: 138px;
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		gap: 2px;
		overflow: hidden;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 12px;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--ink);
		text-decoration: none;
	}
	.epharmia-feed-mini .foto {
		position: relative;
		display: block;
		aspect-ratio: 1;
		overflow: hidden; /* sin esto una foto alta agranda la tarjeta (el aspect-ratio es solo una preferencia) */
		background: #fff;
	}
	.epharmia-feed-mini .foto img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 6px;
		box-sizing: border-box;
	}
	.epharmia-feed-mini .cartel {
		position: absolute;
		top: 6px;
		right: 6px;
		padding: 3px 7px;
		border-radius: 8px;
		background: var(--wp--preset--color--sale);
		color: #fff;
		font-weight: 700;
		font-size: 12px;
		line-height: 1.1;
	}
	.epharmia-feed-mini .nom {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 2.5em;
		padding: 6px 9px 0;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.25;
	}
	.epharmia-feed-mini .pre {
		display: flex;
		flex-direction: column;
		padding: 2px 9px 10px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 13px;
		line-height: 1.25;
	}
	/* precio de hoy de un producto SIN oferta (franja «Visto anteriormente»): en tinta; el rojo es solo para la oferta */
	.epharmia-feed-mini .pre .normal {
		color: var(--wp--preset--color--ink);
		font-weight: 500;
	}
	.epharmia-feed-mini .pre del {
		color: var(--wp--preset--color--ink-soft);
		font-size: 10.5px;
	}
	.epharmia-feed-mini .pre ins {
		text-decoration: none;
		color: var(--wp--preset--color--sale);
		font-weight: 500;
	}
	.epharmia-feed-mini .hasta {
		padding: 0 9px 10px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 10.5px;
		line-height: 1.3;
		color: var(--wp--preset--color--sale);
	}
	.epharmia-feed-mini .pre:has(+ .hasta) {
		padding-bottom: 2px;
	}
	.epharmia-feed-cat {
		flex: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
		width: 76px;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
	}
	.epharmia-feed-cat .ring {
		display: block;
		width: 64px;
		height: 64px;
		overflow: hidden;
		border: 2px solid var(--wp--preset--color--brand);
		border-radius: 50%;
		background: var(--wp--preset--color--base);
	}
	.epharmia-feed-cat .ring > span {
		display: block;
		width: 100%;
		height: 100%;
	}
	.epharmia-feed-cat .ring img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
@media (prefers-reduced-motion: reduce) {
	.epharmia-feed-rail {
		scroll-behavior: auto;
	}
}