/*
Theme Name: Farmacia Somiedo
Theme URI: https://farmaciasomiedo.es
Author: Farmacia Somiedo
Description: Block theme para Farmacia Somiedo, gobernado por spec. Todo el diseño vive en theme.json, generado desde specs/contracts/design-tokens.json. Cero page builder, cero panel de opciones, cero estado de diseño en la base de datos.
Version: 0.1.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: farmaciasomiedo
Tags: full-site-editing, block-patterns, style-variations, accessibility-ready, translation-ready
*/

/*
 * Regla del proyecto: este fichero se queda casi vacío a propósito.
 *
 * Todo lo que sea color, tipografía, espaciado, radio o sombra pertenece a
 * specs/contracts/design-tokens.json. Si te encuentras escribiendo CSS aquí
 * para cambiar un valor de diseño, el sistema de tokens tiene un agujero:
 * arréglalo en la spec, no aquí.
 *
 * Lo único legítimo en este fichero: comportamiento que theme.json no expresa
 * (skip links, focus visible, print, prefers-reduced-motion).
 */

.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	clip: auto;
	clip-path: none;
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	height: auto;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	position: fixed;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
	outline-offset: 2px;
}

/* Focus visible uniforme para navegación por teclado (WCAG AA). Solo :focus-visible
   para no molestar en click con ratón. Outline con offset e inversión de color
   en fondos oscuros vía inner shadow como refuerzo cromático. */
:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(textarea:focus-visible),
:where(select:focus-visible),
:where(details > summary:focus-visible),
:where(.wp-block-button__link:focus-visible),
:where(.farmaciasomiedo-header-icon:focus-visible),
:where(.farmaciasomiedo-mega-menu__link:focus-visible),
:where(.farmaciasomiedo-mega-menu__summary:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Cards clicables enteras (accent-top, base con enlace): el focus va al link
   del título pero el ring debe rodear la card entera. Lo hacemos con
   :has(:focus-visible) que soportan Chrome/Safari/Firefox recientes. */
.wp-block-group.is-style-farmaciasomiedo-card:has(a:focus-visible),
.wp-block-group.is-style-farmaciasomiedo-card-accent-top:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}
.wp-block-group.is-style-farmaciasomiedo-card:has(a:focus-visible) h3 a,
.wp-block-group.is-style-farmaciasomiedo-card:has(a:focus-visible) p a,
.wp-block-group.is-style-farmaciasomiedo-card-accent-top:has(a:focus-visible) h3 a {
	outline: none;
}

/* Sobre fondos verdes (topbar, botones primarios), el ring primary
   desaparece. Usamos contrast como fallback en esos contextos. */
:where(.has-primary-background-color a:focus-visible),
:where(.has-primary-background-color button:focus-visible) {
	outline-color: var(--wp--preset--color--base);
}

/* Hovers finos para elementos clicables. Todos respetan prefers-reduced-motion
   más abajo. Filosofía: la web tiene que sentirse viva sin ser molesta. */

/* 1) Zoom sutil de la imagen/placeholder al pasar por la card de categoría. */
.is-style-farmaciasomiedo-card-accent-top .farmaciasomiedo-cat-media { overflow: hidden; }
.is-style-farmaciasomiedo-card-accent-top .farmaciasomiedo-cat-media img {
	transition: transform 0.4s ease;
}
.is-style-farmaciasomiedo-card-accent-top:hover .farmaciasomiedo-cat-media img {
	transform: scale(1.06);
}
.farmaciasomiedo-cat-media--placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	transform: scale(1);
	transition: transform 0.4s ease;
	z-index: -1;
}
.is-style-farmaciasomiedo-card-accent-top:hover .farmaciasomiedo-cat-media--placeholder {
	filter: brightness(0.97);
}

/* 2) Underline animado desde el centro en el título de cards clicables.
   Aplica a los h3 dentro de card-accent-top y en las cards de marca base. */
.is-style-farmaciasomiedo-card-accent-top h3 a,
.is-style-farmaciasomiedo-card p a {
	position: relative;
	display: inline-block;
}
.is-style-farmaciasomiedo-card-accent-top h3 a::after,
.is-style-farmaciasomiedo-card p a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transition: left 0.22s ease, right 0.22s ease;
}
.is-style-farmaciasomiedo-card-accent-top:hover h3 a::after,
.is-style-farmaciasomiedo-card:hover p a::after {
	left: 0;
	right: 0;
}
/* Anula el underline por defecto del hover del enlace (viene de theme.json
   elements.link:hover) para que se lea el underline animado en su lugar. */
.is-style-farmaciasomiedo-card-accent-top h3 a:hover,
.is-style-farmaciasomiedo-card-accent-top h3 a:focus-visible,
.is-style-farmaciasomiedo-card p a:hover,
.is-style-farmaciasomiedo-card p a:focus-visible {
	text-decoration: none;
}

/* 3) Marcas: brightness al hover para dar señal sin desplazar layout.
   La card ya sube 2px por el hover base; aquí solo tocamos la imagen. */
.is-style-farmaciasomiedo-card .wp-block-image img {
	transition: filter 0.22s ease;
}
.is-style-farmaciasomiedo-card:hover .wp-block-image img {
	filter: brightness(1.05) saturate(1.1);
}

/* USPs: icono monoline verde primary en círculo suave arriba de cada card. */
.farmaciasomiedo-usp-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: color-mix(in oklab, var(--wp--preset--color--primary) 12%, transparent);
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.farmaciasomiedo-usp:hover .farmaciasomiedo-usp-icon-wrap {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: rotate(-4deg) scale(1.05);
}
.farmaciasomiedo-usp-icon { display: block; }

/* Media de las cards de categoría (imagen o placeholder decorativo).
   Fuerza aspect-ratio 1:1 para que todas las cards del grid midan igual,
   independientemente de si el término tiene thumbnail asignado. Los tonos
   del placeholder rotan por índice usando data-hue, con colores suaves
   derivados de la paleta del theme. */
.farmaciasomiedo-cat-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--sm, 4px);
	overflow: hidden;
	margin: 0;
}
.farmaciasomiedo-cat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.farmaciasomiedo-cat-media--placeholder {
	position: relative;
	background: linear-gradient(135deg, color-mix(in oklab, var(--wp--preset--color--muted) 60%, transparent), var(--wp--preset--color--muted));
}
.farmaciasomiedo-cat-media--placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(255,255,255,0.35) 100%);
	pointer-events: none;
}
.farmaciasomiedo-cat-media--placeholder[data-hue="a"] { background: color-mix(in oklab, var(--wp--preset--color--primary) 15%, var(--wp--preset--color--base)); }
.farmaciasomiedo-cat-media--placeholder[data-hue="b"] { background: color-mix(in oklab, var(--wp--preset--color--accent)  12%, var(--wp--preset--color--base)); }
.farmaciasomiedo-cat-media--placeholder[data-hue="c"] { background: color-mix(in oklab, var(--wp--preset--color--trust)   14%, var(--wp--preset--color--base)); }
.farmaciasomiedo-cat-media--placeholder[data-hue="d"] { background: color-mix(in oklab, var(--wp--preset--color--aviso)   14%, var(--wp--preset--color--base)); }
.farmaciasomiedo-cat-media--placeholder[data-hue="e"] { background: color-mix(in oklab, var(--wp--preset--color--subtle)  18%, var(--wp--preset--color--base)); }
.farmaciasomiedo-cat-media--placeholder[data-hue="f"] { background: color-mix(in oklab, var(--wp--preset--color--fresh)   18%, var(--wp--preset--color--base)); }
.farmaciasomiedo-cat-media--placeholder[data-hue="g"] { background: color-mix(in oklab, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--muted)); }
.farmaciasomiedo-cat-media--placeholder[data-hue="h"] { background: color-mix(in oklab, var(--wp--preset--color--accent)  8%,  var(--wp--preset--color--muted)); }

/* Footer: fondo muted diferenciado del resto por border-top verde 4px,
   y cada columna en caja blanca soft-shadow para efecto de tarjetas.
   Sobreescribimos el auto-fill por defecto de WP a auto-fit para que
   las 5 cajas se estiren hasta el borde en lugar de dejar hueco derecho. */
.farmaciasomiedo-footer .farmaciasomiedo-footer-cols {
	gap: var(--wp--preset--spacing--40, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.farmaciasomiedo-footer-col {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	padding: var(--wp--preset--spacing--30, 1.5rem);
	box-shadow: var(--wp--preset--shadow--soft);
}
.farmaciasomiedo-footer-col-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.75rem;
}
.farmaciasomiedo-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.farmaciasomiedo-footer-list a {
	color: var(--wp--preset--color--contrast);
}
.farmaciasomiedo-footer-distafarma {
	display: inline-flex;
	margin: 0 0 0.75rem;
	text-decoration: none;
}
.farmaciasomiedo-footer-pagos {
	gap: 0.9rem;
	align-items: center;
}
.farmaciasomiedo-footer-paylogo {
	display: inline-block;
	height: 22px;
	width: auto;
	vertical-align: middle;
	opacity: 0.9;
}
.farmaciasomiedo-footer-paylogo--mastercard {
	height: 28px;
}
.farmaciasomiedo-footer-distafarma img {
	display: block;
	height: auto;
	max-width: 150px;
}

/* Iconos del header (cuenta, carrito). Simples <a> con SVG inline en un
   wp:html para no depender de que el bloque woocommerce/mini-cart esté
   activo en la versión concreta de WC. Enlazan a las páginas de Woo que
   se crean al activar (con locale es_ES son /mi-cuenta y /carrito). */
.farmaciasomiedo-header-icons {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
}
.farmaciasomiedo-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	transition: background 0.15s ease, color 0.15s ease;
}
.farmaciasomiedo-header-icon:hover,
.farmaciasomiedo-header-icon:focus-visible {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Header brand: logo pegado a la izquierda, no se comprime. */
.farmaciasomiedo-header-brand {
	flex-shrink: 0;
}
.farmaciasomiedo-header-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.farmaciasomiedo-header-logo img {
	display: block;
	height: 72px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

/* Contenedor central del buscador: crece para llenar el espacio disponible,
   con un tope para que no se estire de más en pantallas anchas. */
.farmaciasomiedo-header-searchwrap {
	flex: 1 1 auto;
	max-width: 560px;
	margin: 0 var(--wp--preset--spacing--30);
}
.farmaciasomiedo-header-searchwrap .wp-block-search {
	width: 100%;
}
.farmaciasomiedo-header-searchwrap .wp-block-search__inside-wrapper {
	width: 100%;
}

/* Buscador del header: tamaño legible acorde con el nuevo layout de 3 columnas. */
.farmaciasomiedo-header-search .wp-block-search__input {
	font-size: var(--wp--preset--font-size--md);
	padding: 0.6rem 0.9rem;
}
.farmaciasomiedo-header-search .wp-block-search__button {
	padding: 0.6rem 0.8rem;
}

/* Header sticky con sombra que aparece al scroll.
   WP inyecta <header class="wp-block-template-part"> alrededor del contenido
   de parts/header.html — el sticky va ahí, no en un wrapper interno (sería
   igual de alto que su parent y sticky no tendría rango para deslizar).
   Sin JS: usa animation-timeline: scroll() donde esté soportado
   (Chrome/Edge 115+); fallback con sombra suave estática.
   Solo desktop: en mobile la mega-nav expande demasiado alto y sería
   contraproducente pegarla; el modo drawer lo resuelve por otro lado. */
@media (min-width: 783px) {
	header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 30;
		background: var(--wp--preset--color--base);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	}

	@supports (animation-timeline: scroll()) {
		header.wp-block-template-part {
			animation: farmasomiedo-header-shadow linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 120px;
		}
		@keyframes farmasomiedo-header-shadow {
			to { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
		}
	}
}

/* Mobile (<= 640px): ajustes del header, topbar y densidades. Sin resize
   del viewport real no podemos ver esto en el playground actual pero las
   reglas son mecánicas: */
@media (max-width: 640px) {
	/* Topbar: 3 sellos en columna con gap menor, tipografía un pelín menor. */
	.wp-block-template-part div[style*="primary-background"] .wp-block-group {
		flex-direction: column;
		gap: 0.2rem;
	}
	.wp-block-template-part div[style*="primary-background"] p {
		font-size: 0.72rem;
	}

	/* Header: layout 3 columnas se pliega en móvil (logo | acciones arriba, search debajo).
	   Logo se reduce para no comer ancho. El teléfono se oculta (queda WhatsApp para clic). */
	header.wp-block-group .alignwide {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}
	.farmaciasomiedo-header-logo img {
		height: 52px;
		max-width: 200px;
	}
	.farmaciasomiedo-header-searchwrap {
		order: 99;
		flex-basis: 100%;
		max-width: none;
		margin: 0;
	}
	.farmaciasomiedo-header-actions {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}
	.farmaciasomiedo-header-actions > p:nth-of-type(2) { display: none; }

	/* USPs: iconos algo menores y menos padding vertical del grupo. */
	.farmaciasomiedo-usp-icon-wrap { width: 2.5rem; height: 2.5rem; }
	.farmaciasomiedo-usp-icon-wrap svg { width: 22px; height: 22px; }

	/* Grids de 4 columnas → 2 columnas en móvil. Los patterns fuerzan
	   columnCount:4 vía WP core (grid-template-columns: repeat(4, minmax(0,1fr))),
	   así que aquí redefinimos la template en el wrapper con clase propia.
	   Con 4 cols a 375px cada card queda ~72px y desborda "Cosmética y belleza"
	   o "Envío 24-72 h". */
	.farmaciasomiedo-cat-grid.is-layout-grid,
	.farmaciasomiedo-usp-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Seguro anti-desbordamiento del texto largo dentro de las cards
	   (marcas, títulos de categoría con dos palabras largas). */
	.farmaciasomiedo-cat-grid h3,
	.farmaciasomiedo-cat-grid p,
	.farmaciasomiedo-usp-grid h3,
	.farmaciasomiedo-usp-grid p {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* Trust bar del footer: la banda con logo Ministerio + texto suele
	   romper en móvil; permitimos wrap y centramos. */
	.farmaciasomiedo-trust-bar {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}
}

/* Cards de consejos: meta de lectura en gris pequeño al lado del CTA.
   Sin cambiar la tipografía, solo separación visual del enlace principal. */
.farmaciasomiedo-consejo-meta {
	color: var(--wp--preset--color--subtle);
	margin-left: 0.5rem;
	font-size: 0.85em;
}

/* Muy pequeño (<= 380px, iPhone SE / mini): USPs a 1 columna para que
   la tarjeta respire, el texto no se corte y el icono siga alineado. */
@media (max-width: 380px) {
	.farmaciasomiedo-usp-grid.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

/* Página legal: lectura larga, columna estrecha, tipografía cómoda, anclas ARIA-friendly. */
.farmaciasomiedo-legal .wp-block-post-title {
	margin-block: 0.25rem 2.5rem;
}
.farmaciasomiedo-legal .wp-block-post-content {
	font-size: 1rem;
	line-height: 1.7;
}
.farmaciasomiedo-legal .wp-block-post-content h2 {
	margin-block: 2.75rem 0.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lg);
	scroll-margin-top: 6rem;
}
.farmaciasomiedo-legal .wp-block-post-content h2:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}
.farmaciasomiedo-legal .wp-block-post-content h3 {
	margin-block: 1.75rem 0.5rem;
	font-size: var(--wp--preset--font-size--md);
	scroll-margin-top: 6rem;
}
.farmaciasomiedo-legal .wp-block-post-content p,
.farmaciasomiedo-legal .wp-block-post-content li {
	max-width: 68ch;
}
.farmaciasomiedo-legal .wp-block-post-content ul,
.farmaciasomiedo-legal .wp-block-post-content ol {
	padding-left: 1.5rem;
	margin-block: 1rem;
}
.farmaciasomiedo-legal .wp-block-post-content li {
	margin-block: 0.35rem;
}
.farmaciasomiedo-legal .wp-block-post-content a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.farmaciasomiedo-legal .wp-block-post-content dl {
	margin-block: 1rem;
}
.farmaciasomiedo-legal .wp-block-post-content dt {
	font-weight: 650;
	margin-top: 0.75rem;
}
.farmaciasomiedo-legal .wp-block-post-content dd {
	margin: 0 0 0 1.25rem;
	color: var(--wp--preset--color--subtle);
}
/* Índice/TOC opcional (una lista al inicio con anchors). */
.farmaciasomiedo-legal-toc {
	background: var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.25rem 1.75rem;
	margin-block: 1.5rem 2.5rem;
}
.farmaciasomiedo-legal-toc ol {
	margin: 0;
	padding-left: 1.25rem;
	columns: 2;
	column-gap: 2rem;
}
.farmaciasomiedo-legal-toc li {
	break-inside: avoid;
	margin-block: 0.15rem;
}
@media (max-width: 640px) {
	.farmaciasomiedo-legal-toc ol { columns: 1; }
}
/* Última actualización — pequeña, discreta, arriba. */
.farmaciasomiedo-legal-updated {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0 2rem;
}
/* Impresión: ocultar cabecera/footer/TOC decorativos para copia oficial en papel. */
@media print {
	body > header,
	body > footer,
	.farmaciasomiedo-legal-toc {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Página de contacto — cards con icono, mapa placeholder, horario y aviso.
   ------------------------------------------------------------------------- */
.farmaciasomiedo-contact-card {
	position: relative;
	padding-top: 3.5rem;
}
.farmaciasomiedo-contact-card__icon {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.farmaciasomiedo-contact-card:hover .farmaciasomiedo-contact-card__icon {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: rotate(-6deg) scale(1.05);
}
.farmaciasomiedo-contact-card--primary {
	background: color-mix(in oklab, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--base));
	border-color: color-mix(in oklab, var(--wp--preset--color--primary) 25%, transparent);
}
.farmaciasomiedo-contact-card--primary .farmaciasomiedo-contact-card__icon {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.farmaciasomiedo-hours-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1.5rem;
	row-gap: 0.4rem;
	margin: 1rem 0 0.5rem 0;
}
.farmaciasomiedo-hours-list dt {
	font-weight: 650;
}
.farmaciasomiedo-hours-list dd {
	margin: 0;
	color: var(--wp--preset--color--subtle);
}

.farmaciasomiedo-contact-map__figure {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.farmaciasomiedo-contact-map__figure:hover,
.farmaciasomiedo-contact-map__figure:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.farmaciasomiedo-contact-map__figure svg {
	display: block;
	width: 100%;
	height: auto;
}
.farmaciasomiedo-contact-map__cta {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	padding: 0.4rem 0.85rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* -------------------------------------------------------------------------
   Aviso sanitario superior — franja fina obligatoria para farmacia online
   autorizada (RD 870/2013). Alto discreto, texto pequeño, no compite con
   la marca ni con la banda USP; presencia constante en todo el sitio.
   ------------------------------------------------------------------------- */
.farmaciasomiedo-sanitary-notice {
	padding-block: 0.4rem;
	padding-inline: var(--wp--preset--spacing--30);
	font-size: 0.82rem;
	line-height: 1.3;
	border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 10%, transparent);
}
.farmaciasomiedo-sanitary-notice__inner {
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
}
.farmaciasomiedo-sanitary-notice__logo {
	flex: 0 0 auto;
	width: 32px;
	height: 24px;
	display: block;
}
.farmaciasomiedo-sanitary-notice__text {
	flex: 1 1 auto;
	color: var(--wp--preset--color--contrast);
}
.farmaciasomiedo-sanitary-notice__sep {
	margin-inline: 0.4rem;
	color: var(--wp--preset--color--subtle);
}
.farmaciasomiedo-sanitary-notice__code {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	letter-spacing: 0.02em;
}
.farmaciasomiedo-sanitary-notice__link {
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.farmaciasomiedo-sanitary-notice__link:hover,
.farmaciasomiedo-sanitary-notice__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
@media (max-width: 640px) {
	.farmaciasomiedo-sanitary-notice { padding-inline: 0.75rem; }
	.farmaciasomiedo-sanitary-notice__sep:nth-of-type(1) { display: none; }
	.farmaciasomiedo-sanitary-notice__text { font-size: 0.78rem; }
	.farmaciasomiedo-sanitary-notice__link { width: 100%; text-align: left; }
}

/* -------------------------------------------------------------------------
   Aviso de cookies — banner inferior + panel modal de configuración.
   Diseño consciente: los 3 botones tienen el mismo peso visual (art. 4.11
   RGPD, Directrices 3/2022 EDPB) para no forzar la aceptación como opción
   por defecto. El panel es un diálogo modal accesible con foco atrapado.
   ------------------------------------------------------------------------- */
.farmaciasomiedo-cookies {
	position: fixed;
	inset: auto 1rem 1rem 1rem;
	z-index: 9990;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 1.25rem 1.5rem;
	max-width: 68rem;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--sm);
}
.farmaciasomiedo-cookies[hidden] { display: none; }

.farmaciasomiedo-cookies__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}
.farmaciasomiedo-cookies__text {
	flex: 1 1 22rem;
	min-width: 0;
}
.farmaciasomiedo-cookies__title {
	margin: 0 0 0.35rem 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
}
.farmaciasomiedo-cookies__body {
	margin: 0 0 0.5rem 0;
	line-height: 1.5;
}
.farmaciasomiedo-cookies__link {
	margin: 0;
}
.farmaciasomiedo-cookies__link a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.farmaciasomiedo-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex: 0 0 auto;
}
.farmaciasomiedo-cookies__btn {
	appearance: none;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.55rem 1rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.farmaciasomiedo-cookies__btn:hover,
.farmaciasomiedo-cookies__btn:focus-visible {
	background: var(--wp--preset--color--muted);
}
.farmaciasomiedo-cookies__btn--primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}
.farmaciasomiedo-cookies__btn--primary:hover,
.farmaciasomiedo-cookies__btn--primary:focus-visible {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (max-width: 640px) {
	.farmaciasomiedo-cookies {
		inset: auto 0.5rem 0.5rem 0.5rem;
		padding: 1rem;
	}
	.farmaciasomiedo-cookies__actions { width: 100%; }
	.farmaciasomiedo-cookies__actions .farmaciasomiedo-cookies__btn { flex: 1 1 auto; }
}

/* Panel modal de configuración granular. */
.farmaciasomiedo-cookies-panel {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.farmaciasomiedo-cookies-panel[hidden] { display: none; }
.farmaciasomiedo-cookies-panel__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
}
.farmaciasomiedo-cookies-panel__dialog {
	position: relative;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.75rem 1.5rem;
	max-width: 40rem;
	width: 100%;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.farmaciasomiedo-cookies-panel__title {
	margin: 0 0 0.5rem 0;
	font-size: var(--wp--preset--font-size--lg);
}
.farmaciasomiedo-cookies-panel__intro {
	margin: 0 0 1.25rem 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--subtle);
}
.farmaciasomiedo-cookies-panel__categories {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-block: 1rem 1.5rem;
}
.farmaciasomiedo-cookies-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
}

/* Fila de categoría con toggle visual (checkbox nativo oculto pero accesible). */
.farmaciasomiedo-cookies-cat {
	display: flex;
	gap: 0.9rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
}
.farmaciasomiedo-cookies-cat.is-locked {
	cursor: default;
	background: var(--wp--preset--color--muted);
}
.farmaciasomiedo-cookies-cat__toggle {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 2.2rem;
	height: 1.3rem;
}
.farmaciasomiedo-cookies-cat__toggle input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	margin: 0;
}
.farmaciasomiedo-cookies-cat__switch {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	transition: background-color 0.15s ease;
}
.farmaciasomiedo-cookies-cat__switch::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.1rem;
	transform: translateY(-50%);
	width: 0.95rem;
	height: 0.95rem;
	background: var(--wp--preset--color--base);
	border-radius: 50%;
	transition: left 0.15s ease;
}
.farmaciasomiedo-cookies-cat__toggle input:checked ~ .farmaciasomiedo-cookies-cat__switch {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.farmaciasomiedo-cookies-cat__toggle input:checked ~ .farmaciasomiedo-cookies-cat__switch::after {
	left: calc(100% - 1.05rem);
}
.farmaciasomiedo-cookies-cat__toggle input:focus-visible ~ .farmaciasomiedo-cookies-cat__switch {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.farmaciasomiedo-cookies-cat__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.farmaciasomiedo-cookies-cat__title {
	font-weight: 650;
}
.farmaciasomiedo-cookies-cat__body {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

/* Bloquear scroll del fondo cuando el panel modal está abierto. */
html.farmaciasomiedo-cookies-panel-open,
html.farmaciasomiedo-cookies-panel-open body {
	overflow: hidden;
}

/* Enlace de reapertura en el footer — texto pelado, no botón. */
.farmaciasomiedo-cookies-reopen {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------
   Fichas de producto (WooCommerce shortcode [products])

   El shortcode nativo emite <ul class="products columns-N"> con estilos
   legacy basados en floats y anchos en %. Con el theme de bloques queda
   desalineado: los botones "Añadir al carrito" caen a alturas distintas
   según lo largo del título, y en pantallas anchas la lista se colapsa.

   Se sustituye el float por CSS Grid con columnas iguales, y cada tarjeta
   se convierte en flex-column para poder anclar precio + botón al pie.
   Con esto: todas las cards tienen la MISMA altura, y todos los botones
   quedan alineados horizontalmente en la fila inferior.
   ------------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--fs-products-cols, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Trust-bar: el logo común europeo obligatorio (RD 870/2013) enlaza al
   registro Distafarma. Se aísla del subrayado por defecto de los enlaces
   y se limita el ancho para que no se hinche en pantallas anchas. */
.farmaciasomiedo-trust-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.farmaciasomiedo-trust-logo img {
	display: block;
	max-width: 120px;
	height: auto;
	transition: opacity 0.15s ease;
}
.farmaciasomiedo-trust-logo:hover img,
.farmaciasomiedo-trust-logo:focus-visible img {
	opacity: 0.85;
}

/* WooCommerce añade pseudo-elementos ::before/::after como clearfix del
   layout float legacy. Con display grid se convierten en celdas invisibles
   que empujan las cards, dejando huecos en la primera y última columna.
   Neutralizarlos es seguro porque el grid no necesita clearfix. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
	content: none;
}
.woocommerce ul.products.columns-2 { --fs-products-cols: 2; }
.woocommerce ul.products.columns-3 { --fs-products-cols: 3; }
.woocommerce ul.products.columns-4 { --fs-products-cols: 4; }
.woocommerce ul.products.columns-5 { --fs-products-cols: 5; }
.woocommerce ul.products.columns-6 { --fs-products-cols: 6; }

.woocommerce ul.products li.product,
body .woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	padding: var(--wp--preset--spacing--20, 1rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--sm, 6px);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* La imagen del producto siempre arriba, con altura consistente. */
.woocommerce ul.products li.product > a img,
.woocommerce ul.products li.product > .wc-block-grid__product-image img {
	width: 100%;
	height: 180px;
	object-fit: contain;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--sm, 6px);
}

/* Título: fijo a 2 líneas con ellipsis para que todas las cards tengan altura equivalente. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

/* Precio destacado, sin margen extra. */
.woocommerce ul.products li.product .price {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.75rem;
}
.woocommerce ul.products li.product .price del {
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 55%, transparent);
	font-weight: 500;
	margin-right: 0.35em;
}

/* Botón "Añadir al carrito" empujado al final de la card con margin-top:auto.
   Con el flex-column del li, esto alinea TODOS los botones en la misma línea
   horizontal, sin importar la longitud del título. */
.woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin-top: auto;
	width: 100%;
	padding: 0.55rem 0.75rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--sm, 6px);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.15s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
	background: color-mix(in oklab, var(--wp--preset--color--primary) 88%, black);
	color: var(--wp--preset--color--base);
}

/* Badge de "Oferta" superpuesto arriba a la derecha. */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	z-index: 2;
}
.woocommerce ul.products li.product { position: relative; }

@media (max-width: 900px) {
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 { --fs-products-cols: 2; }
}
@media (max-width: 480px) {
	.woocommerce ul.products { --fs-products-cols: 1; }
}