/* ==========================================================================
   OMNIA CUSTOM SHOP - Estilos principales
   --------------------------------------------------------------------------
   Orden del archivo:
     0. Tokens y reset
     1. Componentes base (botones, iconos)
     2. Barra de avisos
     3. Header
     4. Panel de busqueda
     5. Menu movil
     6. Banda de garantias
     7. Footer
     8. Ajustes de Astra
     9. Responsive
     10. Accesibilidad

   Los colores vienen de Ajustes Omnia > Identidad corporativa y se
   inyectan en :root desde inc/helpers.php como var(--omnia-*).
   ========================================================================== */


/* ==========================================================================
   0. TOKENS Y RESET
   ========================================================================== */

:root {
	/* Fallbacks: si ACF no esta activo, el tema sigue viendose bien.
	   helpers.php sobrescribe estos valores. */
	--omnia-primario: #1B1917;
	--omnia-acento: #C2410C;
	--omnia-oscuro: #1B1917;
	--omnia-texto: #6B675F;
	--omnia-suave: #F6F4EF;
	--omnia-fondo: #FFFFFF;
	--omnia-borde: #E6E2D9;
	/* Sin comillas: 'Poppins' es un nombre de una sola palabra, asi que
	   no las necesita y evitamos problemas de escapado. */
	--omnia-font-titulos: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--omnia-font-textos: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Derivados */
	--omnia-blanco: #FFFFFF;
	--omnia-negro: #1B1917;
	--omnia-gris-texto: #8A867C;
	--omnia-oscuro-suave: rgba(255, 255, 255, .08);

	/* Medidas.
	   Radio 0: las esquinas duras son parte de la direccion visual. */
	--omnia-ancho: 1320px;
	--omnia-gutter: 24px;
	--omnia-radio: 0;
	--omnia-radio-sm: 0;

	/* Alturas del header, se usan para el offset del sticky */
	--omnia-h-aviso: 34px;
	--omnia-h-header: 72px;

	/* Transiciones */
	--omnia-trans: 180ms cubic-bezier(.4, 0, .2, 1);
}

.omnia-header *,
.omnia-footer *,
.omnia-aviso *,
.omnia-movil *,
.omnia-garantias *,
.omnia-search * {
	box-sizing: border-box;
}


/* ==========================================================================
   1. COMPONENTES BASE
   ========================================================================== */

/* --- Botones --- */

/*
 * Botones: rectangulos solidos sin radio, texto en mayusculas.
 * La jerarquia se resuelve por peso de color, no por forma.
 */
.omnia-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border: 2px solid transparent;
	border-radius: 0;
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--omnia-trans),
	            border-color var(--omnia-trans),
	            color var(--omnia-trans);
}

.omnia-btn--sm {
	padding: 12px 20px;
	font-size: 12px;
}

/* Primario: negro solido. Se invierte al pasar el raton. */
.omnia-btn--primario {
	background: var(--omnia-negro);
	border-color: var(--omnia-negro);
	color: var(--omnia-blanco);
}

.omnia-btn--primario:hover,
.omnia-btn--primario:focus-visible {
	background: transparent;
	border-color: var(--omnia-negro);
	color: var(--omnia-negro);
}

/* Acento: para la accion comercial (presupuestos, empresas). */
.omnia-btn--acento {
	background: var(--omnia-acento);
	border-color: var(--omnia-acento);
	color: var(--omnia-blanco);
}

.omnia-btn--acento:hover,
.omnia-btn--acento:focus-visible {
	background: var(--omnia-negro);
	border-color: var(--omnia-negro);
	color: var(--omnia-blanco);
}

/* Linea: secundario sobre fondo claro. */
.omnia-btn--linea {
	background: transparent;
	border-color: var(--omnia-negro);
	color: var(--omnia-negro);
}

.omnia-btn--linea:hover,
.omnia-btn--linea:focus-visible {
	background: var(--omnia-negro);
	border-color: var(--omnia-negro);
	color: var(--omnia-blanco);
}

/* Linea clara: secundario sobre fondo oscuro o imagen. */
.omnia-btn--linea-claro {
	background: transparent;
	border-color: var(--omnia-blanco);
	color: var(--omnia-blanco);
}

.omnia-btn--linea-claro:hover,
.omnia-btn--linea-claro:focus-visible {
	background: var(--omnia-blanco);
	color: var(--omnia-negro);
}

/* --- Iconos --- */

.omnia-icon {
	display: block;
	flex-shrink: 0;
}


/* ==========================================================================
   2. BARRA DE UTILIDADES (superior)
   --------------------------------------------------------------------------
   Franja negra fina con avisos a la izquierda y enlaces de servicio a la
   derecha. Tipografia diminuta en mayusculas: es informacion secundaria
   que debe estar disponible sin competir con la navegacion.
   ========================================================================== */

.omnia-aviso {
	position: relative;
	z-index: 60;
	background: var(--omnia-negro);
	color: var(--omnia-blanco);
	font-family: var(--omnia-font-textos);
}

.omnia-aviso__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--omnia-h-aviso);
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 0 var(--omnia-gutter);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: center;
}

.omnia-aviso__item {
	display: block;
}

/* Cuando rota, los items se apilan y solo se ve el activo */
.omnia-aviso--rotativo .omnia-aviso__inner {
	display: grid;
}

.omnia-aviso--rotativo .omnia-aviso__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 350ms ease, transform 350ms ease, visibility 350ms;
}

.omnia-aviso--rotativo .omnia-aviso__item.is-activo {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.omnia-aviso__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.omnia-aviso__link:hover {
	text-decoration-thickness: 2px;
}


/* ==========================================================================
   3. HEADER
   --------------------------------------------------------------------------
   Direccion: deportivo tecnico. Blanco y negro, esquinas duras, todo en
   mayusculas con peso alto. El unico color es el punto del carrito.
   El acento de marca se reserva para el CTA y el subrayado activo.
   ========================================================================== */

/*
 * Tope de grosor tipografico.
 *
 * El diseno se mueve entre 400 y 600: nada de negritas fuertes. Los
 * navegadores pintan <strong> y <b> a 700 por defecto, asi que se
 * bajan aqui para que no se escapen del rango.
 */
strong,
b {
	font-weight: 600;
}

.omnia-header {
	position: relative;
	z-index: 50;
	background: var(--omnia-blanco);
}

.omnia-header--sticky {
	position: sticky;
	top: 0;
}

/* --- Header transparente sobre el hero (solo home) --- */

.omnia-header--transparente {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.omnia-header--transparente .omnia-logo,
.omnia-header--transparente .omnia-logo__text,
.omnia-header--transparente .omnia-menu > li > a,
.omnia-header--transparente .omnia-accion,
.omnia-header--transparente .omnia-header__burger {
	color: var(--omnia-blanco);
}

/* Al hacer scroll gana una sombra minima, sin linea solida */
.omnia-header.is-scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}

/* El transparente pasa a solido al hacer scroll */
.omnia-header--transparente.is-scrolled {
	position: fixed;
	background: var(--omnia-blanco);
}

.omnia-header--transparente.is-scrolled .omnia-logo,
.omnia-header--transparente.is-scrolled .omnia-logo__text,
.omnia-header--transparente.is-scrolled .omnia-menu > li > a,
.omnia-header--transparente.is-scrolled .omnia-accion,
.omnia-header--transparente.is-scrolled .omnia-header__burger {
	color: var(--omnia-negro);
}

/*
 * Rejilla de 3 columnas: los lados tienen el mismo ancho minimo, asi el
 * logo queda opticamente centrado aunque el menu y las acciones midan
 * distinto. Es lo que hace que un header se lea como "colocado".
 */
.omnia-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 20px;
	min-height: var(--omnia-h-header);
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 0 var(--omnia-gutter);
}

.omnia-header__lado {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.omnia-header__lado--der {
	justify-content: flex-end;
}

/* --- Logo (centro) --- */

.omnia-header__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.omnia-logo {
	display: block;
	color: var(--omnia-negro);
	text-decoration: none;
	line-height: 0;
}

.omnia-logo__img {
	display: block;
	/*
	 * WooCommerce aplica un `max-width` global a `.woocommerce img`, y en
	 * las paginas de tienda el logo lo heredaba y se disparaba de tamano.
	 * Fijar `width` (no solo max-width) resuelve las dos cosas: el logo
	 * mantiene su tamano y la regla de Woo sigue funcionando en el resto
	 * de imagenes.
	 */
	width: 100px;
	max-width: 100px;
	height: auto;
	max-height: 48px;
	object-fit: contain;
}

/* Si el logo es SVG inline, hereda el color del header */
.omnia-logo svg.omnia-logo__img {
	width: 100px;
	height: auto;
	fill: currentColor;
}

.omnia-logo__text {
	font-family: var(--omnia-font-titulos);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--omnia-negro);
}

/* --- Menu principal --- */

.omnia-header__nav {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.omnia-menu {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El primer item se alinea con el borde del contenedor */
.omnia-menu > li:first-child > a {
	padding-left: 0;
}

.omnia-menu > li:first-child > a::after {
	left: 0;
}

.omnia-menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.omnia-menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 18px;
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--omnia-negro);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--omnia-trans);
}

/*
 * Subrayado grueso que crece desde el centro.
 * Es la firma del header: la barra recuerda a las tres bandas y da
 * una respuesta fisica al pasar el raton, sin mover el layout.
 */
.omnia-menu > li > a::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 0;
	height: 3px;
	background: var(--omnia-negro);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}

.omnia-menu > li > a:hover::after,
.omnia-menu > li > a:focus-visible::after {
	transform: scaleX(1);
}

/* Item activo: subrayado permanente en color de acento */
.omnia-menu > li.current-menu-item > a::after,
.omnia-menu > li.current-menu-parent > a::after,
.omnia-menu > li.current-menu-ancestor > a::after {
	background: var(--omnia-acento);
	transform: scaleX(1);
}

/* --- Mega menu --- */

/*
 * El item con la clase "mega" en Apariencia > Menus abre un panel a
 * ancho completo bajo el header, con una columna por categoria.
 *
 * El <li> disparador necesita position:static (no relative) para que el
 * panel se posicione respecto al header y no respecto al item.
 */
.omnia-menu > li.omnia-menu__mega-trigger {
	position: static;
}

/*
 * Flechas de Astra.
 *
 * Astra inyecta su propio icono en cada item con hijos: unas veces como
 * .ast-icon, otras como .dropdown-menu-toggle, y en el header builder
 * como un <svg> suelto dentro del enlace. Los inserta con JavaScript,
 * asi que no aparecen en el HTML que genera el walker.
 *
 * En el mega menu eso deja una flecha delante de cada titulo y de cada
 * enlace, ademas de la nuestra. En el menu movil pasa lo mismo: sale un
 * chevron pegado al texto de cada item con hijos.
 *
 * Se ocultan todas y se deja solo la del disparador de primer nivel en
 * escritorio.
 */
.omnia-menu .ast-icon,
.omnia-menu .dropdown-menu-toggle,
.omnia-menu .ast-header-navigation-arrow,
.omnia-menu > li > a > svg,
.omnia-mega .ast-icon,
.omnia-mega .dropdown-menu-toggle,
.omnia-mega a > svg,
.omnia-mega__titulo > svg,
.omnia-mega__link a > svg,
.omnia-movil__menu .ast-icon,
.omnia-movil__menu .dropdown-menu-toggle,
.omnia-movil__menu .ast-header-navigation-arrow,
.omnia-movil__menu a > svg {
	display: none !important;
}

/* Flecha del disparador (solo la del primer nivel) */
.omnia-menu__chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .5;
	transition: transform 200ms ease, opacity 200ms ease;
}

/* Solo gira la del item que se esta abriendo */
.omnia-menu > li:hover > a .omnia-menu__chevron,
.omnia-menu > li:focus-within > a .omnia-menu__chevron {
	opacity: 1;
	transform: translateY(0) rotate(-135deg);
}

/* --- El panel --- */

.omnia-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--omnia-fondo);
	border-top: 1px solid var(--omnia-borde);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 200ms ease,
	            transform 200ms ease,
	            visibility 200ms;
}

/*
 * Se abre al pasar el raton Y al enfocar con teclado. focus-within es
 * lo que hace que el menu sea navegable con Tab: sin el, el panel se
 * cierra en cuanto el foco entra en un enlace de dentro.
 *
 * .is-abierto la pone el JS: mantiene el panel abierto 180ms tras salir
 * el raton, para que se pueda ir en diagonal hasta el sin que se cierre.
 */
.omnia-menu > li.omnia-menu__mega-trigger:hover > .omnia-mega,
.omnia-menu > li.omnia-menu__mega-trigger:focus-within > .omnia-mega,
.omnia-menu > li.omnia-menu__mega-trigger.is-abierto > .omnia-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.omnia-mega__inner {
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 34px var(--omnia-gutter) 38px;
}

/*
 * Columnas de ancho fijo en lugar de repartir todo el espacio.
 *
 * Con auto-fit y 3 categorias, cada columna se llevaba un tercio del
 * ancho completo y el panel quedaba con mucho aire vacio entre
 * titulos. Asi las columnas van juntas a la izquierda y el hueco
 * sobrante queda a la derecha, listo para una promo si algun dia se
 * quiere anadir.
 */
.omnia-mega__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 230px));
	justify-content: start;
	gap: 30px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-mega__col {
	min-width: 0;
}

/* --- Titulo de columna (nivel 1, clicable) --- */

.omnia-mega__titulo {
	/*
	 * block y no inline-block: el subrayado ocupa toda la columna, no
	 * solo el ancho del texto. Con inline-block, "Sudaderas" tenia una
	 * linea mucho mas corta que "Camisetas y polos" y se veia desigual.
	 */
	display: block;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--omnia-borde);
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--omnia-primario);
	text-decoration: none;
	transition: color 160ms ease, border-color 160ms ease;
}

.omnia-mega__titulo:hover,
.omnia-mega__titulo:focus-visible {
	color: var(--omnia-acento);
	border-bottom-color: var(--omnia-acento);
}

/* --- Lista de enlaces (nivel 2) --- */

.omnia-mega__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-mega__link {
	margin: 0;
}

.omnia-mega__link a {
	display: block;
	padding: 7px 0;
	font-family: var(--omnia-font-textos);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--omnia-texto);
	text-decoration: none;
	transition: color 160ms ease, padding-left 160ms ease;
}

.omnia-mega__link a:hover,
.omnia-mega__link a:focus-visible {
	color: var(--omnia-acento);
	padding-left: 6px;
}

/* Foco visible con teclado */
.omnia-mega a:focus-visible {
	outline: 2px solid var(--omnia-acento);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Submenus normales (items sin la clase mega) --- */

.omnia-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 240px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-top: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 180ms ease,
	            transform 180ms ease,
	            visibility 180ms;
}

.omnia-menu > li:hover > .sub-menu,
.omnia-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.omnia-menu .sub-menu a {
	display: block;
	padding: 9px 22px;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--omnia-primario);
	text-decoration: none;
	transition: background-color 140ms ease, padding-left 140ms ease;
}

.omnia-menu .sub-menu a:hover,
.omnia-menu .sub-menu a:focus-visible {
	background: var(--omnia-suave);
	padding-left: 28px;
	color: var(--omnia-acento);
}

/*
 * Sin animacion si el sistema lo pide. El panel sigue abriendo y
 * cerrando, solo que sin transicion.
 */
@media (prefers-reduced-motion: reduce) {

	.omnia-mega,
	.omnia-menu .sub-menu,
	.omnia-menu__chevron,
	.omnia-mega__link a {
		transition-duration: .01ms !important;
	}
}

/* Aviso de menu sin asignar (solo admins) */
.omnia-menu__aviso {
	display: inline-flex;
	align-items: center;
	margin-left: 14px;
	padding: 5px 10px;
	background: #FEF3C7;
	font-family: var(--omnia-font-textos);
	font-size: 11px;
	font-weight: 500;
	color: #92400E;
}

/* --- Acciones --- */

.omnia-header__acciones {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.omnia-accion {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--omnia-negro);
	cursor: pointer;
	transition: opacity var(--omnia-trans);
}

.omnia-accion:hover,
.omnia-accion:focus-visible {
	opacity: .55;
}

/* --- Carrito: importe + icono --- */

.omnia-accion--carrito {
	width: auto;
	gap: 10px;
	padding: 0 10px 0 12px;
	text-decoration: none;
}

.omnia-accion__total {
	font-family: var(--omnia-font-titulos);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--omnia-negro);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Woo mete un <span class="woocommerce-Price-amount"> dentro */
.omnia-accion__total .woocommerce-Price-amount {
	color: inherit;
}

.omnia-accion__icono {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

/*
 * Contador del carrito: punto de acento con el numero.
 * Es el unico elemento con color del header por defecto, asi que
 * el ojo va directo cuando hay algo dentro.
 */
.omnia-accion__contador {
	position: absolute;
	top: -6px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: var(--omnia-acento);
	border-radius: 999px;
	font-family: var(--omnia-font-textos);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--omnia-blanco);
	font-variant-numeric: tabular-nums;
}

.omnia-accion__contador.is-vacio {
	display: none;
}

/* --- CTA: bloque negro solido, sin radio --- */

.omnia-header__cta {
	align-self: center;
	margin-left: 14px;
	padding: 13px 22px;
	background: var(--omnia-negro);
	border: 0;
	border-radius: 0;
	font-family: var(--omnia-font-titulos);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--omnia-blanco);
	white-space: nowrap;
	transition: background-color var(--omnia-trans), color var(--omnia-trans);
}

.omnia-header__cta:hover,
.omnia-header__cta:focus-visible {
	background: var(--omnia-acento);
	color: var(--omnia-blanco);
}

/* --- Boton de menu movil --- */

.omnia-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--omnia-negro);
	cursor: pointer;
}

.omnia-header__burger-close {
	display: none;
}


/* ==========================================================================
   5. MENU MOVIL
   ========================================================================== */

.omnia-movil {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.omnia-movil[hidden] {
	display: none;
}

.omnia-movil__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 41, .5);
	opacity: 0;
	transition: opacity 250ms ease;
}

.omnia-movil.is-abierto .omnia-movil__overlay {
	opacity: 1;
}

.omnia-movil__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(340px, 88vw);
	background: var(--omnia-blanco);
	transform: translateX(-100%);
	transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.omnia-movil.is-abierto .omnia-movil__panel {
	transform: none;
}

.omnia-movil__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-movil__titulo {
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--omnia-gris-texto);
}

.omnia-movil__cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: -8px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--omnia-negro);
	cursor: pointer;
}

.omnia-movil__nav {
	flex: 1;
	padding: 12px 0;
}

.omnia-movil__menu,
.omnia-movil__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-movil__menu > li > a {
	display: block;
	padding: 16px 20px;
	font-family: var(--omnia-font-titulos);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--omnia-negro);
	text-decoration: none;
	border-bottom: 1px solid var(--omnia-borde);
	transition: background-color 140ms ease;
}

.omnia-movil__menu a:hover,
.omnia-movil__menu a:focus-visible {
	background: var(--omnia-suave);
}

/* Submenus: minusculas y sangrados, para que se lean como secundarios */
.omnia-movil__menu .sub-menu a {
	display: block;
	padding: 12px 20px 12px 36px;
	font-family: var(--omnia-font-textos);
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omnia-texto);
	text-decoration: none;
	border-bottom: 1px solid var(--omnia-borde);
}

/*
 * Tercer nivel en movil: mas sangrado y algo mas pequeno, para que se
 * distinga del segundo. En escritorio estos enlaces son las listas del
 * mega menu; aqui son una lista anidada normal.
 */
.omnia-movil__menu .sub-menu .sub-menu a {
	padding-left: 52px;
	font-size: 13.5px;
	color: var(--omnia-gris-texto);
}

/* CTA dentro del menu movil (en escritorio va en el header) */
.omnia-movil__cta {
	display: block;
	margin: 18px 20px 4px;
	text-align: center;
}

.omnia-movil__contacto {
	padding: 18px 20px 26px;
	border-top: 1px solid var(--omnia-borde);
	background: var(--omnia-suave);
}

.omnia-movil__dato {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-family: var(--omnia-font-textos);
	font-size: 14.5px;
	color: var(--omnia-texto);
	text-decoration: none;
}

.omnia-movil__dato:hover {
	color: var(--omnia-acento);
}

.omnia-movil__dato svg {
	color: var(--omnia-gris-texto);
	flex-shrink: 0;
}

/* Bloquear scroll del body cuando el menu esta abierto */
body.omnia-scroll-bloqueado {
	overflow: hidden;
}


/* ==========================================================================
   5b. CARRITO LATERAL
   --------------------------------------------------------------------------
   Sustituye al "slide in cart" del Header Builder de Astra. Entra desde
   la derecha, ocupa toda la altura y se rellena por AJAX con los
   fragments de WooCommerce.
   ========================================================================== */

.omnia-carrito {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.omnia-carrito[hidden] {
	display: none;
}

.omnia-carrito__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity 250ms ease;
}

.omnia-carrito.is-abierto .omnia-carrito__overlay {
	opacity: 1;
}

.omnia-carrito__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100vw);
	background: var(--omnia-blanco);
	transform: translateX(100%);
	transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
	box-shadow: -8px 0 40px rgba(0, 0, 0, .16);
}

.omnia-carrito.is-abierto .omnia-carrito__panel {
	transform: none;
}

/* --- Cabecera --- */

.omnia-carrito__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	border-bottom: 2px solid var(--omnia-negro);
}

.omnia-carrito__titulo {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--omnia-negro);
}

.omnia-carrito__count:not(:empty) {
	font-size: 13px;
	font-weight: 600;
	color: var(--omnia-gris-texto);
}

.omnia-carrito__cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: -8px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--omnia-negro);
	cursor: pointer;
	transition: opacity var(--omnia-trans);
}

.omnia-carrito__cerrar:hover {
	opacity: .55;
}

/* --- Contenido con scroll --- */

.omnia-carrito__contenido {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.omnia-carrito__lista {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.omnia-carrito__item {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-carrito__item-img img {
	display: block;
	width: 72px;
	height: 88px;
	object-fit: cover;
	background: var(--omnia-suave);
}

.omnia-carrito__item-datos {
	min-width: 0;
}

.omnia-carrito__item-nombre {
	margin: 0 0 5px;
	font-family: var(--omnia-font-titulos);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.omnia-carrito__item-nombre a {
	color: var(--omnia-negro);
	text-decoration: none;
}

.omnia-carrito__item-nombre a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Variaciones y campos personalizados */
.omnia-carrito__item-meta,
.omnia-carrito__item-meta p,
.omnia-carrito__item-meta dl {
	margin: 0 0 6px;
	font-family: var(--omnia-font-textos);
	font-size: 12px;
	line-height: 1.5;
	color: var(--omnia-gris-texto);
}

.omnia-carrito__item-meta dt,
.omnia-carrito__item-meta dd {
	display: inline;
	margin: 0;
}

.omnia-carrito__item-meta dt {
	font-weight: 600;
}

.omnia-carrito__item-meta dd::after {
	content: "";
	display: block;
}

.omnia-carrito__item-pie {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	color: var(--omnia-negro);
}

.omnia-carrito__item-cant {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.omnia-carrito__item-precio {
	font-weight: 500;
}

.omnia-carrito__item-quitar {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--omnia-gris-texto);
	transition: color var(--omnia-trans);
}

.omnia-carrito__item-quitar:hover,
.omnia-carrito__item-quitar:focus-visible {
	color: var(--omnia-acento);
}

/* --- Carrito vacio --- */

.omnia-carrito__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 16px;
	padding: 60px 24px;
	text-align: center;
}

.omnia-carrito__vacio-icono {
	color: var(--omnia-borde);
}

.omnia-carrito__vacio-texto {
	margin: 0;
	font-family: var(--omnia-font-textos);
	font-size: 14.5px;
	color: var(--omnia-gris-texto);
}

/* --- Pie --- */

.omnia-carrito__pie {
	flex-shrink: 0;
	padding: 20px 24px 24px;
	border-top: 2px solid var(--omnia-negro);
	background: var(--omnia-blanco);
}

.omnia-carrito__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
	font-family: var(--omnia-font-titulos);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--omnia-negro);
}

.omnia-carrito__subtotal strong {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.omnia-carrito__nota {
	margin: 0 0 16px;
	font-family: var(--omnia-font-textos);
	font-size: 12px;
	color: var(--omnia-gris-texto);
}

.omnia-carrito__acciones {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.omnia-carrito__btn {
	width: 100%;
}

/* Estado de carga mientras Woo actualiza los fragments */
.omnia-carrito.is-cargando .omnia-carrito__contenido {
	opacity: .45;
	pointer-events: none;
	transition: opacity 150ms ease;
}


/* ==========================================================================
   6. BANDA DE GARANTIAS
   ========================================================================== */

.omnia-garantias {
	background: var(--omnia-suave);
	border-top: 1px solid var(--omnia-borde);
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-garantias__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 34px var(--omnia-gutter);
}

.omnia-garantia {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.omnia-garantia__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: var(--omnia-blanco);
	border: 1px solid var(--omnia-borde);
	border-radius: var(--omnia-radio);
	color: var(--omnia-acento);
}

.omnia-garantia__titulo {
	margin: 0 0 3px;
	font-family: var(--omnia-font-titulos);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--omnia-negro);
	text-transform: uppercase;
}

.omnia-garantia__desc {
	margin: 0;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--omnia-gris-texto);
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.omnia-footer {
	background: var(--omnia-oscuro);
	color: rgba(255, 255, 255, .72);
	font-family: var(--omnia-font-textos);
}

.omnia-footer__cuerpo {
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 62px var(--omnia-gutter) 46px;
}

.omnia-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
	gap: 40px;
}

/* --- Columna de marca --- */

.omnia-footer__logo {
	display: inline-block;
	margin-bottom: 18px;
	color: var(--omnia-blanco);
	text-decoration: none;
}

.omnia-footer__logo-img {
	display: block;
	/* Mismo motivo que en el header: Woo limita .woocommerce img */
	width: 92px;
	max-width: 92px;
	height: auto;
	max-height: 44px;
	object-fit: contain;
}

.omnia-footer__logo svg.omnia-footer__logo-img {
	width: 92px;
	height: auto;
	fill: currentColor;
}

.omnia-footer__logo .omnia-logo__text {
	color: var(--omnia-blanco);
}

.omnia-footer__texto {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .62);
	max-width: 34ch;
}

/* --- Redes --- */

.omnia-footer__redes {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-footer__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--omnia-oscuro-suave);
	border-radius: var(--omnia-radio-sm);
	color: rgba(255, 255, 255, .8);
	transition: background-color var(--omnia-trans), color var(--omnia-trans);
}

.omnia-footer__redes a:hover,
.omnia-footer__redes a:focus-visible {
	background: var(--omnia-acento);
	color: var(--omnia-blanco);
}

/* --- Columnas de enlaces --- */

.omnia-footer__titulo {
	margin: 0 0 16px;
	font-family: var(--omnia-font-titulos);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--omnia-blanco);
}

.omnia-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-footer__menu li {
	margin-bottom: 9px;
}

.omnia-footer__menu a {
	font-size: 14px;
	color: rgba(255, 255, 255, .62);
	text-decoration: none;
	transition: color var(--omnia-trans);
}

.omnia-footer__menu a:hover,
.omnia-footer__menu a:focus-visible {
	color: var(--omnia-blanco);
}

/* --- Contacto --- */

.omnia-footer__contacto {
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-footer__contacto li {
	margin-bottom: 13px;
}

.omnia-footer__contacto a,
.omnia-footer__dato {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
	text-decoration: none;
	transition: color var(--omnia-trans);
}

.omnia-footer__contacto a:hover,
.omnia-footer__contacto a:focus-visible {
	color: var(--omnia-blanco);
}

.omnia-footer__contacto svg,
.omnia-footer__dato svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--omnia-blanco);
}

/* --- Aviso de menu sin asignar --- */

.omnia-footer__aviso {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .38);
}

/* --- Newsletter --- */

.omnia-newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 46px;
	padding-top: 34px;
	border-top: 1px solid var(--omnia-oscuro-suave);
}

.omnia-newsletter__titulo {
	margin: 0 0 5px;
	font-family: var(--omnia-font-titulos);
	font-size: 19px;
	font-weight: 600;
	color: var(--omnia-blanco);
}

.omnia-newsletter__desc {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .62);
}

.omnia-newsletter__form {
	flex: 1;
	min-width: 280px;
	max-width: 460px;
}

.omnia-newsletter__form input[type="email"],
.omnia-newsletter__form input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	background: var(--omnia-oscuro-suave);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--omnia-radio-sm);
	font-family: var(--omnia-font-textos);
	font-size: 14.5px;
	color: var(--omnia-blanco);
}

.omnia-newsletter__form input::placeholder {
	color: rgba(255, 255, 255, .4);
}

.omnia-newsletter__form input:focus {
	outline: none;
	border-color: var(--omnia-acento);
}

/* --- Pie legal --- */

.omnia-footer__pie {
	border-top: 1px solid var(--omnia-oscuro-suave);
}

.omnia-footer__pie-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 22px var(--omnia-gutter);
}

.omnia-footer__copyright {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
}

.omnia-footer__razon {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .35);
}

.omnia-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-footer__legal-menu a {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
	transition: color var(--omnia-trans);
}

.omnia-footer__legal-menu a:hover,
.omnia-footer__legal-menu a:focus-visible {
	color: var(--omnia-blanco);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Metodos de pago --- */

.omnia-footer__pagos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-pago {
	padding: 5px 10px;
	background: var(--omnia-oscuro-suave);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--omnia-radio-sm);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
}

/* --- Creditos --- */

.omnia-footer__creditos {
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 0 var(--omnia-gutter) 22px;
	font-size: 12.5px;
}

.omnia-footer__creditos a {
	color: rgba(255, 255, 255, .38);
	text-decoration: none;
}

.omnia-footer__creditos a:hover {
	color: rgba(255, 255, 255, .7);
}


/* ==========================================================================
   8. AJUSTES DE ASTRA
   ========================================================================== */

/* Astra reserva espacio para su header; lo neutralizamos */
.ast-primary-header-bar,
.site-header .main-header-bar-wrap,
.ast-mobile-header-wrap {
	display: none !important;
}

/* Quitar el padding superior que Astra anade al contenido */
.omnia-header + #content,
.omnia-header + .site-content {
	margin-top: 0;
}

/*
 * Astra maqueta el contenido con .ast-container en display:flex (para su
 * layout de contenido + barra lateral). Nuestros bloques son secciones a
 * ancho completo, y dentro de un flex se colocan en fila en lugar de
 * apilarse. En las paginas con bloques anulamos ese comportamiento.
 *
 * La clase .omnia-page la anade page-flexible.php al <body>.
 */
.omnia-page .ast-container,
.omnia-page .site-content .ast-container,
.omnia-page #primary,
.omnia-page .site-main,
.omnia-page .entry-content {
	display: block;
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Astra limita el ancho del articulo; los bloques van a sangre */
.omnia-page .site-content > .ast-container {
	max-width: none;
	padding-inline: 0;
}

.omnia-page .entry-header,
.omnia-page .ast-single-post-order,
.omnia-page .post-navigation {
	display: none;
}

/* Sin margenes verticales heredados entre secciones */
.omnia-page .site-main > article,
.omnia-page .entry-content > .omnia-seccion {
	margin: 0;
}

/*
 * Poppins en toda la web.
 * Astra y WooCommerce declaran sus propias familias con selectores muy
 * especificos, asi que hay que reafirmarlo en los elementos de texto.
 * Se usan las variables para que un cambio en Identidad corporativa
 * siga propagandose.
 */
body,
button,
input,
select,
optgroup,
textarea,
.ast-container,
.woocommerce,
.woocommerce-page,
.woocommerce div.product,
.woocommerce ul.products li.product,
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout,
.select2-container {
	font-family: var(--omnia-font-textos);
	color: var(--omnia-texto);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-blog-featured-section .entry-title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-Tabs-panel h2,
.woocommerce #reviews h2,
.widget-title,
.wp-block-heading {
	font-family: var(--omnia-font-titulos);
	letter-spacing: -.015em;
}

/* Botones de WooCommerce: mismo sistema que los del tema */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 0;
}




/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* --- Tablet grande: acortar el menu --- */
@media (max-width: 1180px) {

	.omnia-header__logo {
		padding-right: 24px;
	}

	.omnia-menu > li > a {
		padding: 0 12px;
		font-size: 12px;
		letter-spacing: .03em;
	}

	.omnia-menu > li > a::after {
		left: 12px;
		right: 12px;
	}

	.omnia-header__cta {
		margin-left: 8px;
		padding: 12px 16px;
		font-size: 11px;
	}

	.omnia-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 36px 30px;
	}

	.omnia-footer__marca {
		grid-column: 1 / -1;
	}

	.omnia-footer__texto {
		max-width: 52ch;
	}
}

/* --- Tablet / movil: menu off-canvas --- */
@media (max-width: 991px) {

	:root {
		--omnia-h-header: 62px;
	}

	.omnia-header__burger {
		display: flex;
	}

	.omnia-header__nav {
		display: none;
	}

	/*
	 * Logo centrado en la ventana, no en el hueco sobrante.
	 *
	 * Con grid 1fr auto 1fr el centro solo cae en el medio real si los
	 * dos lados miden lo mismo. En movil no ocurre: a la izquierda hay
	 * un boton (~44px) y a la derecha tres iconos (~132px), asi que el
	 * logo se desplazaba hacia el lado mas ligero.
	 *
	 * La solucion es dar el mismo ancho minimo a los dos laterales, el
	 * del lado ancho. Asi el centro queda en el medio real y cada lado
	 * mantiene su alineacion: el izquierdo a la izquierda y el derecho
	 * a la derecha.
	 */
	.omnia-header__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 8px;
	}

	/*
	 * Cada lateral reserva el ancho del lado ancho (tres iconos). Va en
	 * los lados y no en el grid para que, si no cabe, el minmax lo pueda
	 * reducir en lugar de desbordar el header.
	 *
	 * align-items pasa de stretch a center: en movil los iconos quedan
	 * centrados respecto a la altura del header en lugar de estirarse.
	 */
	.omnia-header__lado {
		min-width: 124px;
		align-items: center;
	}

	.omnia-logo__img,
	.omnia-logo svg.omnia-logo__img {
		width: 84px;
		max-width: 84px;
		max-height: 40px;
	}

	/* El importe ocupa demasiado en movil: solo icono y contador */
	.omnia-accion__total {
		display: none;
	}

	.omnia-accion--carrito {
		width: 44px;
		padding: 0;
		gap: 0;
	}

	/* El CTA no cabe: se recupera dentro del menu movil */
	.omnia-header__cta {
		display: none;
	}

	.omnia-accion {
		width: 40px;
		height: 40px;
	}

}

/* --- Movil --- */
@media (max-width: 767px) {

	:root {
		--omnia-gutter: 18px;
	}

	.omnia-aviso__inner {
		padding: 9px var(--omnia-gutter);
		font-size: 10px;
		letter-spacing: .07em;
		line-height: 1.4;
	}

	/* En movil el boton de buscar sobra: el input ya envia con Enter */
	.omnia-garantias__inner {
		grid-template-columns: 1fr 1fr;
		gap: 22px 18px;
		padding: 26px var(--omnia-gutter);
	}

	.omnia-garantia {
		flex-direction: column;
		gap: 10px;
	}

	.omnia-garantia__icono {
		width: 38px;
		height: 38px;
	}

	.omnia-garantia__titulo {
		font-size: 13px;
	}

	.omnia-garantia__desc {
		font-size: 12.5px;
	}

	.omnia-footer__cuerpo {
		padding: 44px var(--omnia-gutter) 34px;
	}

	.omnia-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
	}

	.omnia-newsletter {
		margin-top: 34px;
		padding-top: 28px;
	}

	.omnia-newsletter__form {
		min-width: 100%;
	}

	.omnia-footer__pie-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* Buscador a pantalla completa en movil */
}

/* --- Movil pequeno --- */
@media (max-width: 479px) {

	.omnia-garantias__inner {
		grid-template-columns: 1fr;
	}

	.omnia-footer__inner {
		grid-template-columns: 1fr;
	}

	.omnia-footer__pagos {
		gap: 5px;
	}

	.omnia-pago {
		font-size: 10px;
		padding: 4px 8px;
	}
}


/* ==========================================================================
   10. ACCESIBILIDAD
   ========================================================================== */

/* Foco visible y consistente en todos los elementos interactivos */
/* Texto solo para lectores de pantalla */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Respetar la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {

	.omnia-movil__panel,
	.omnia-movil__overlay,
	.omnia-aviso__item,
	.omnia-menu .sub-menu,
	.omnia-btn,
	.omnia-accion,
	.omnia-faq__mas::before,
	.omnia-faq__mas::after,
	.omnia-producto__foto,
	.omnia-categoria__foto,
	.omnia-galeria__img {
		transition-duration: .01ms !important;
	}

	/* El acordeon abre y cierra sin animacion */
	.omnia-faq__item::details-content {
		transition: none !important;
	}
}
/* ==========================================================================
   11. SISTEMA DE BLOQUES
   --------------------------------------------------------------------------
   Estilos de los layouts de ACF Flexible Content.
   Cada bloque vive en template-parts/blocks/{nombre}.php

   Direccion visual: editorial calido. Fondos crema, negro calido para el
   texto, naranja quemado como unico acento. Esquinas duras, mucho aire.
   ========================================================================== */

/* --- Contenedores y espaciado --- */

.omnia-contenedor {
	width: 100%;
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 0 var(--omnia-gutter);
}

.omnia-contenedor--estrecho {
	max-width: 820px;
}

.omnia-contenedor--completo {
	max-width: none;
	padding: 0;
}

.omnia-seccion {
	position: relative;
}

/* Fondos */
.omnia-seccion--blanco {
	background: var(--omnia-fondo);
}

.omnia-seccion--crema {
	background: var(--omnia-suave);
}

.omnia-seccion--oscuro {
	background: var(--omnia-oscuro);
	color: rgba(255, 255, 255, .72);
}

.omnia-seccion--oscuro .omnia-cabecera__titulo,
.omnia-seccion--oscuro h2,
.omnia-seccion--oscuro h3 {
	color: var(--omnia-blanco);
}

/* Espaciado vertical */
.omnia-seccion--compacto {
	padding: 40px 0;
}

.omnia-seccion--normal {
	padding: 76px 0;
}

.omnia-seccion--amplio {
	padding: 110px 0;
}

/* --- Antetitulo --- */

.omnia-kicker {
	display: block;
	margin-bottom: 12px;
	font-family: var(--omnia-font-titulos);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--omnia-acento);
}

.omnia-kicker--claro {
	color: rgba(255, 255, 255, .85);
}

/* --- Cabecera de seccion --- */

.omnia-cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 40px;
}

.omnia-cabecera--centrada {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.omnia-cabecera__texto {
	max-width: 62ch;
}

.omnia-cabecera__titulo {
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--omnia-primario);
}

.omnia-cabecera__desc {
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--omnia-texto);
}

/*
 * Enlace de cabecera. En la maqueta es texto subrayado, sin flecha:
 * mas discreto y deja el protagonismo al titulo.
 */
.omnia-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding-bottom: 4px;
	border-bottom: 2px solid currentColor;
	font-family: var(--omnia-font-titulos);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--omnia-primario);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--omnia-trans);
}

/* La flecha solo aparece al pasar el raton */
.omnia-enlace-flecha svg {
	width: 0;
	opacity: 0;
	transition: width var(--omnia-trans), opacity var(--omnia-trans);
}

.omnia-enlace-flecha:hover,
.omnia-enlace-flecha:focus-visible {
	color: var(--omnia-acento);
}

.omnia-enlace-flecha:hover svg,
.omnia-enlace-flecha:focus-visible svg {
	width: 16px;
	opacity: 1;
}

.omnia-seccion--oscuro .omnia-enlace-flecha {
	color: var(--omnia-blanco);
}

/* --- Rejilla generica --- */

.omnia-rejilla {
	display: grid;
	gap: 26px;
}

.omnia-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.omnia-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.omnia-rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.omnia-rejilla--5 { grid-template-columns: repeat(5, 1fr); }

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

.omnia-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* Variante clara para fondos oscuros o imagenes */
.omnia-btn--claro {
	background: var(--omnia-blanco);
	border-color: var(--omnia-blanco);
	color: var(--omnia-primario);
}

.omnia-btn--claro:hover,
.omnia-btn--claro:focus-visible {
	background: var(--omnia-acento);
	border-color: var(--omnia-acento);
	color: var(--omnia-blanco);
}

/* --- Aviso para administradores --- */

.omnia-aviso-admin {
	max-width: var(--omnia-ancho);
	margin: 12px auto;
	padding: 14px 18px;
	background: #FEF3C7;
	border-left: 3px solid #D97706;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	color: #92400E;
}


/* ==========================================================================
   11a. BLOQUE: HERO
   ========================================================================== */

.omnia-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--omnia-blanco);
}

.omnia-hero--media    { min-height: 60vh; }
.omnia-hero--grande   { min-height: 78vh; }
.omnia-hero--completa { min-height: 100vh; }

/* Sin imagen: fondo solido para que el texto se lea */
.omnia-hero--sin-imagen {
	background: var(--omnia-primario);
	min-height: 52vh;
}

.omnia-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	padding-bottom: 68px;
}

/* --------------------------------------------------------------------------
   Video de fondo (YouTube)

   El iframe se escala para cubrir el hero sin barras negras: un video
   16:9 nunca coincide con la proporcion del contenedor, asi que se
   agranda desde el centro hasta que el lado corto llena el hueco y el
   sobrante se recorta.

   La capa de oscurecido la pinta el background-image del <section>
   (omnia_fondo_video_capa), que queda sobre el iframe pero bajo el
   texto gracias al z-index del inner.
   -------------------------------------------------------------------------- */

.omnia-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--omnia-primario);
	pointer-events: none;
}

.omnia-hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	/*
	 * 100vw / (9/16) = 56.25vw de alto por cada ancho de ventana. Se pide
	 * el maximo entre cubrir por ancho y cubrir por alto, para que no
	 * queden franjas ni en pantallas anchas ni en altas.
	 */
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.78vh; /* 100vh * 16/9 */
	border: 0;
	pointer-events: none;
}

/* La capa oscura del video va sobre el iframe, no sobre el texto. */
.omnia-hero--video {
	background-size: cover;
}

.omnia-hero--centro {
	align-items: center;
	text-align: center;
}

.omnia-hero--centro .omnia-hero__inner {
	max-width: 780px;
}

.omnia-hero--centro .omnia-botones {
	justify-content: center;
}

.omnia-hero__titulo {
	max-width: 17ch;
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(38px, 6vw, 74px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.035em;
	color: var(--omnia-blanco);
	text-wrap: balance;
}

.omnia-hero--centro .omnia-hero__titulo {
	max-width: none;
	margin-inline: auto;
}

.omnia-hero__texto {
	max-width: 46ch;
	margin: 18px 0 0;
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}

.omnia-hero--centro .omnia-hero__texto {
	margin-inline: auto;
}


/* ==========================================================================
   11b. BLOQUE: BUSCADOR
   --------------------------------------------------------------------------
   El formulario lo pinta el plugin Omnia Search. Aqui solo quedan los
   accesos rapidos, que si son del tema.
   ========================================================================== */

/* Accesos rapidos */
.omnia-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.omnia-chip {
	padding: 8px 16px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 999px;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--omnia-primario);
	text-decoration: none;
	transition: border-color var(--omnia-trans),
	            background-color var(--omnia-trans),
	            color var(--omnia-trans);
}

.omnia-chip:hover,
.omnia-chip:focus-visible {
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	color: var(--omnia-blanco);
}


/* ==========================================================================
   11c. BLOQUE: CATEGORIAS
   ========================================================================== */

.omnia-categoria {
	display: flex;
	flex-direction: column;
	background: var(--omnia-fondo);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--omnia-trans);
}

.omnia-categoria__img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--omnia-suave);
	border-radius: 10px;
}

.omnia-categoria__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
}

a.omnia-categoria:hover .omnia-categoria__foto {
	transform: scale(1.05);
}

.omnia-categoria__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--omnia-borde);
}

.omnia-categoria__datos {
	padding: 20px 0 0;
}

.omnia-categoria__titulo {
	margin: 0 0 6px;
	font-family: var(--omnia-font-titulos);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--omnia-primario);
}

.omnia-categoria__texto {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--omnia-texto);
}

.omnia-categoria__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--omnia-font-titulos);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--omnia-acento);
}

.omnia-categoria__cta svg {
	transition: transform var(--omnia-trans);
}

a.omnia-categoria:hover .omnia-categoria__cta svg {
	transform: translateX(4px);
}


/* ==========================================================================
   11d. BLOQUE: PRODUCTOS
   ========================================================================== */

/*
 * Tarjeta de producto.
 * Esquinas redondeadas solo en la imagen y el boton: es lo que separa
 * esta rejilla del resto del sitio, que va a esquina viva.
 */
.omnia-producto {
	display: flex;
	flex-direction: column;
}

.omnia-producto__img {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	margin-bottom: 16px;
	overflow: hidden;
	background: var(--omnia-suave);
	border-radius: 10px;
}

.omnia-producto__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
}

.omnia-producto:hover .omnia-producto__foto {
	transform: scale(1.04);
}

/* Etiqueta: pastilla naranja dentro de la imagen */
.omnia-producto__etiqueta {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 7px 12px;
	background: var(--omnia-acento);
	border-radius: 5px;
	font-family: var(--omnia-font-titulos);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--omnia-blanco);
}

.omnia-producto__datos {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
}

/* Antetitulo: la categoria, en gris y espaciada */
.omnia-producto__categoria {
	display: block;
	margin-bottom: 6px;
	font-family: var(--omnia-font-textos);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--omnia-gris-texto);
}

/*
 * Nombre en caja normal, no en mayusculas: aqui manda el nombre del
 * producto, y en mayusculas se leeria peor con nombres largos.
 */
.omnia-producto__nombre {
	margin: 0 0 10px;
	font-family: var(--omnia-font-titulos);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-transform: none;
}

.omnia-producto__nombre a {
	color: var(--omnia-primario);
	text-decoration: none;
	transition: color var(--omnia-trans);
}

.omnia-producto__nombre a:hover {
	color: var(--omnia-acento);
}

/*
 * Precio: la cifra en negrita y oscura, el "IVA incl." en gris y mas
 * pequeno. WooCommerce mete el sufijo en .woocommerce-price-suffix.
 */
.omnia-producto__precio {
	margin-bottom: 18px;
	font-family: var(--omnia-font-titulos);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--omnia-primario);
}

.omnia-producto__precio .woocommerce-Price-amount {
	color: inherit;
}

.omnia-producto__precio .woocommerce-price-suffix,
.omnia-producto__precio small {
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--omnia-gris-texto);
}

.omnia-producto__precio del {
	margin-right: 7px;
	font-weight: 400;
	color: var(--omnia-gris-texto);
}

.omnia-producto__precio ins {
	text-decoration: none;
	color: var(--omnia-acento);
}

/* Boton: contorno fino y redondeado, en caja normal */
.omnia-producto__btn {
	margin-top: auto;
	padding: 15px 18px;
	background: transparent;
	border: 1.5px solid var(--omnia-primario);
	border-radius: 8px;
	font-family: var(--omnia-font-titulos);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
	text-transform: none;
	text-align: center;
	color: var(--omnia-primario);
	text-decoration: none;
	transition: background-color var(--omnia-trans), color var(--omnia-trans);
}

.omnia-producto__btn:hover,
.omnia-producto__btn:focus-visible {
	background: var(--omnia-primario);
	color: var(--omnia-blanco);
}


/* ==========================================================================
   11e. BLOQUE: PASOS
   ========================================================================== */

.omnia-paso {
	display: flex;
	flex-direction: column;
}

.omnia-paso__img {
	aspect-ratio: 4 / 3;
	margin-bottom: 20px;
	overflow: hidden;
	background: var(--omnia-suave);
}

.omnia-paso__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.omnia-paso__marca {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.omnia-paso__numero {
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--omnia-acento);
}

.omnia-paso__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--omnia-suave);
	color: var(--omnia-primario);
}

.omnia-seccion--crema .omnia-paso__icono {
	background: var(--omnia-fondo);
}

.omnia-paso__titulo {
	margin: 0 0 8px;
	font-family: var(--omnia-font-titulos);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--omnia-primario);
}

.omnia-paso__texto {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--omnia-texto);
}


/* ==========================================================================
   11f. BLOQUE: BANDA B2B
   ========================================================================== */

.omnia-bloque-b2b {
	background-size: cover;
	background-position: center;
}

.omnia-b2b--imagen {
	color: var(--omnia-blanco);
}

.omnia-b2b__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

.omnia-b2b__texto {
	flex: 1;
	min-width: 300px;
	max-width: 640px;
}

.omnia-b2b__titulo {
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(26px, 3.6vw, 44px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.omnia-b2b--imagen .omnia-b2b__titulo,
.omnia-seccion--oscuro .omnia-b2b__titulo {
	color: var(--omnia-blanco);
}

.omnia-b2b__desc {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	opacity: .88;
}

.omnia-b2b__datos {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}

.omnia-dato {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.omnia-dato__cifra {
	font-family: var(--omnia-font-titulos);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--omnia-acento);
}

.omnia-b2b--imagen .omnia-dato__cifra {
	color: var(--omnia-blanco);
}

.omnia-dato__texto {
	max-width: 18ch;
	font-size: 13px;
	line-height: 1.4;
	opacity: .82;
}


/* ==========================================================================
   11g. BLOQUE: OPINIONES
   ========================================================================== */

.omnia-nota {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 34px;
}

.omnia-nota__cifra {
	font-family: var(--omnia-font-titulos);
	font-size: 46px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--omnia-primario);
}

.omnia-nota__max {
	font-size: 16px;
	color: var(--omnia-texto);
}

.omnia-nota__total {
	font-size: 14px;
	color: var(--omnia-texto);
}

.omnia-estrellas {
	display: inline-flex;
	gap: 2px;
	align-self: center;
}

.omnia-estrella {
	fill: var(--omnia-borde);
}

.omnia-estrella.is-llena {
	fill: var(--omnia-acento);
}

.omnia-opinion {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 28px;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
}

.omnia-seccion--blanco .omnia-opinion {
	background: var(--omnia-suave);
	border-color: transparent;
}

.omnia-opinion__texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--omnia-primario);
}

.omnia-opinion__autor {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13.5px;
}

.omnia-opinion__autor strong {
	font-family: var(--omnia-font-titulos);
	font-weight: 600;
	color: var(--omnia-primario);
}

.omnia-opinion__autor span {
	color: var(--omnia-texto);
}


/* ==========================================================================
   11h. BLOQUE: FAQ
   ========================================================================== */

.omnia-faq {
	border-top: 1px solid var(--omnia-borde);
}

.omnia-faq__item {
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	font-family: var(--omnia-font-titulos);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.015em;
	color: var(--omnia-primario);
	cursor: pointer;
	list-style: none;
	transition: color var(--omnia-trans);
}

/* Quitar el triangulo nativo (WebKit antiguo y estandar) */
.omnia-faq__pregunta::-webkit-details-marker {
	display: none;
}

.omnia-faq__pregunta::marker {
	content: "";
}

.omnia-faq__pregunta:hover {
	color: var(--omnia-acento);
}

/* La pregunta abierta se marca en color de acento */
.omnia-faq__item[open] .omnia-faq__pregunta {
	color: var(--omnia-acento);
}

/* Signo + que gira a - al abrir */
.omnia-faq__mas {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.omnia-faq__mas::before,
.omnia-faq__mas::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}

.omnia-faq__mas::after {
	transform: rotate(90deg);
}

.omnia-faq__item[open] .omnia-faq__mas::after {
	transform: rotate(0deg);
}

.omnia-faq__respuesta {
	padding: 0 0 26px;
	max-width: 68ch;
	font-family: var(--omnia-font-textos);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--omnia-texto);
}

.omnia-faq__respuesta p:first-child {
	margin-top: 0;
}

.omnia-faq__respuesta p:last-child {
	margin-bottom: 0;
}

/*
 * Animacion de apertura.
 * ::details-content es Baseline desde 2025. Donde no se soporte, el
 * acordeon abre y cierra igual, solo que sin transicion.
 */
@supports selector(::details-content) {

	.omnia-faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size 300ms cubic-bezier(.4, 0, .2, 1),
		            content-visibility 300ms allow-discrete,
		            opacity 220ms ease;
	}

	.omnia-faq__item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* interpolate-size permite animar de 0 a auto (Chromium por ahora) */
@supports (interpolate-size: allow-keywords) {

	.omnia-faq {
		interpolate-size: allow-keywords;
	}
}


/* ==========================================================================
   11i. BLOQUE: NEWSLETTER
   ========================================================================== */

.omnia-newsletter-bloque {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 44px;
	flex-wrap: wrap;
}

.omnia-newsletter-bloque__texto {
	flex: 1;
	min-width: 280px;
	max-width: 560px;
}

.omnia-newsletter-bloque__titulo {
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.028em;
	color: var(--omnia-primario);
	text-wrap: balance;
}

.omnia-seccion--oscuro .omnia-newsletter-bloque__titulo {
	color: var(--omnia-blanco);
}

.omnia-newsletter-bloque__desc {
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--omnia-texto);
}

.omnia-seccion--oscuro .omnia-newsletter-bloque__desc {
	color: rgba(255, 255, 255, .72);
}

.omnia-newsletter-bloque__form {
	flex: 1;
	min-width: 300px;
	max-width: 480px;
}

.omnia-newsletter-bloque__form input[type="email"],
.omnia-newsletter-bloque__form input[type="text"] {
	width: 100%;
	padding: 15px 16px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 0;
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	color: var(--omnia-primario);
}

.omnia-newsletter-bloque__form input:focus {
	outline: none;
	border-color: var(--omnia-primario);
}

.omnia-newsletter-bloque__nota {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--omnia-texto);
	opacity: .8;
}


/* ==========================================================================
   11j. BLOQUE: GARANTIAS
   ========================================================================== */

/*
 * Garantias. Cambios respecto a la version anterior:
 *   - Icono sin caja: la caja competia con el texto y ensuciaba la banda.
 *   - Separadores verticales finos en lugar de aire suelto, para que se
 *     lean como cuatro columnas y no como texto disperso.
 *   - Titulo y descripcion con contraste real de peso y color.
 */
.omnia-garantias-bloque {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.omnia-bloque-garantias .omnia-garantia {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 4px 28px;
	border-left: 1px solid var(--omnia-borde);
}

/* La primera no lleva linea: quedaria pegada al borde del contenedor */
.omnia-bloque-garantias .omnia-garantia:first-child {
	padding-left: 0;
	border-left: 0;
}

.omnia-bloque-garantias .omnia-garantia:last-child {
	padding-right: 0;
}

.omnia-bloque-garantias .omnia-garantia__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: auto;
	height: auto;
	margin-top: 1px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--omnia-acento);
}

.omnia-bloque-garantias .omnia-garantia__texto {
	min-width: 0;
}

.omnia-bloque-garantias .omnia-garantia__titulo {
	margin: 0 0 4px;
	font-family: var(--omnia-font-titulos);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--omnia-primario);
	text-wrap: balance;
}

.omnia-bloque-garantias .omnia-garantia__desc {
	margin: 0;
	font-family: var(--omnia-font-textos);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--omnia-gris-texto);
}

/* En fondo oscuro hay que aclarar los tonos */
.omnia-seccion--oscuro .omnia-garantia {
	border-left-color: rgba(255, 255, 255, .14);
}

.omnia-seccion--oscuro .omnia-garantia__titulo {
	color: var(--omnia-blanco);
}

.omnia-seccion--oscuro .omnia-garantia__desc {
	color: rgba(255, 255, 255, .6);
}


/* ==========================================================================
   11k. BLOQUE: TEXTO CON IMAGEN
   ========================================================================== */

.omnia-ti {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 56px;
}

.omnia-ti--derecha .omnia-ti__img {
	order: 2;
}

.omnia-ti__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--omnia-suave);
}

.omnia-ti__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.omnia-ti__titulo {
	margin: 0 0 16px;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.028em;
	color: var(--omnia-primario);
	text-wrap: balance;
}

.omnia-ti__cuerpo {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--omnia-texto);
}

.omnia-ti__cuerpo p:first-child { margin-top: 0; }
.omnia-ti__cuerpo p:last-child  { margin-bottom: 0; }

.omnia-ti__texto .omnia-btn {
	margin-top: 24px;
}


/* ==========================================================================
   11l. CONTENIDO LIBRE (WYSIWYG)
   ========================================================================== */

.omnia-contenido-wp {
	font-size: 16px;
	line-height: 1.72;
	color: var(--omnia-texto);
}

.omnia-contenido-wp h1,
.omnia-contenido-wp h2,
.omnia-contenido-wp h3,
.omnia-contenido-wp h4 {
	margin: 1.6em 0 .5em;
	font-family: var(--omnia-font-titulos);
	font-weight: 600;
	letter-spacing: -.022em;
	color: var(--omnia-primario);
}

.omnia-contenido-wp h2 { font-size: 30px; }
.omnia-contenido-wp h3 { font-size: 22px; }

.omnia-contenido-wp > *:first-child { margin-top: 0; }
.omnia-contenido-wp > *:last-child  { margin-bottom: 0; }

.omnia-contenido-wp a {
	color: var(--omnia-acento);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.omnia-contenido-wp img {
	max-width: 100%;
	height: auto;
}

.omnia-contenido-wp ul,
.omnia-contenido-wp ol {
	padding-left: 1.3em;
}

.omnia-contenido-wp li {
	margin-bottom: .4em;
}

.omnia-contenido-wp blockquote {
	margin: 1.6em 0;
	padding-left: 22px;
	border-left: 3px solid var(--omnia-acento);
	font-size: 18px;
	line-height: 1.6;
	color: var(--omnia-primario);
}


/* ==========================================================================
   11m. RESPONSIVE DE BLOQUES
   ========================================================================== */

@media (max-width: 1100px) {

	.omnia-rejilla--5 { grid-template-columns: repeat(4, 1fr); }
	.omnia-rejilla--4 { grid-template-columns: repeat(3, 1fr); }

	.omnia-ti {
		gap: 40px;
	}
}

@media (max-width: 900px) {

	.omnia-seccion--normal { padding: 56px 0; }
	.omnia-seccion--amplio { padding: 74px 0; }

	/* Garantias: 2x2, con separadores solo entre columnas */
	.omnia-garantias-bloque {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 26px;
	}

	.omnia-bloque-garantias .omnia-garantia {
		padding: 0 20px;
	}

	.omnia-bloque-garantias .omnia-garantia:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.omnia-bloque-garantias .omnia-garantia:nth-child(even) {
		padding-right: 0;
	}

	.omnia-rejilla--5,
	.omnia-rejilla--4,
	.omnia-rejilla--3 { grid-template-columns: repeat(2, 1fr); }

	.omnia-cabecera {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 30px;
	}

	/* Texto e imagen se apilan: la imagen siempre arriba */
	.omnia-ti {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.omnia-ti--derecha .omnia-ti__img {
		order: 0;
	}

	.omnia-b2b__inner {
		gap: 32px;
	}

	.omnia-b2b__datos {
		gap: 28px;
	}
}

@media (max-width: 640px) {

	.omnia-seccion--compacto { padding: 30px 0; }
	.omnia-seccion--normal   { padding: 44px 0; }
	.omnia-seccion--amplio   { padding: 56px 0; }

	/* Garantias: en columna, con lineas horizontales */
	.omnia-garantias-bloque {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.omnia-bloque-garantias .omnia-garantia {
		padding: 16px 0;
		border-left: 0;
		border-top: 1px solid var(--omnia-borde);
	}

	.omnia-bloque-garantias .omnia-garantia:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.omnia-bloque-garantias .omnia-garantia:last-child {
		padding-bottom: 0;
	}

	.omnia-seccion--oscuro .omnia-garantia {
		border-top-color: rgba(255, 255, 255, .14);
	}

	.omnia-rejilla {
		gap: 18px;
	}

	.omnia-rejilla--2,
	.omnia-rejilla--3,
	.omnia-rejilla--4,
	.omnia-rejilla--5 {
		grid-template-columns: 1fr;
	}

	/*
	 * Carrusel horizontal en movil: en lugar de una columna larguisima,
	 * las tarjetas se deslizan. Solo si el bloque lo tiene activado.
	 */
	.omnia-rejilla--carrusel {
		display: flex;
		gap: 14px;
		margin-right: calc(var(--omnia-gutter) * -1);
		padding-right: var(--omnia-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.omnia-rejilla--carrusel::-webkit-scrollbar {
		display: none;
	}

	.omnia-rejilla--carrusel > * {
		flex: 0 0 63%;
		scroll-snap-align: start;
	}

	.omnia-hero--media    { min-height: 52vh; }
	.omnia-hero--grande   { min-height: 62vh; }
	.omnia-hero--completa { min-height: 85vh; }

	.omnia-hero__inner {
		padding-top: 56px;
		padding-bottom: 44px;
	}

	.omnia-hero__titulo {
		max-width: none;
	}

	.omnia-botones .omnia-btn {
		flex: 1;
		min-width: 140px;
	}

	.omnia-nota__cifra {
		font-size: 38px;
	}

	.omnia-newsletter-bloque {
		gap: 24px;
	}
}
/* ==========================================================================
   12. CATALOGO DE WOOCOMMERCE
   --------------------------------------------------------------------------
   Estilos del archivo de producto (tienda, categoria, etiqueta, busqueda)
   para que las tarjetas del catalogo se lean igual que las del bloque de
   productos de la home.
   ========================================================================== */

/* --- Contenedor del archivo --- */

.woocommerce.archive .site-content,
.woocommerce-page.archive .site-content {
	padding-top: 0;
}

/* Cabecera de la categoria */
.woocommerce .woocommerce-products-header {
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 46px var(--omnia-gutter) 0;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce .page-title {
	margin: 0 0 10px;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--omnia-primario);
}

.woocommerce .term-description {
	max-width: 68ch;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--omnia-texto);
}

/* Barra de resultados y orden */
.woocommerce .woocommerce-result-count {
	margin: 0;
	font-size: 13.5px;
	color: var(--omnia-texto);
}

.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
	padding: 10px 14px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 0;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	color: var(--omnia-primario);
}

/* --- Rejilla de productos --- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Woo pone floats y anchos en linea: los anulamos */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

/* --------------------------------------------------------------------------
   TARJETAS DEL CATALOGO = TARJETAS DE LA HOME

   El catalogo pinta la misma tarjeta que los bloques de la home
   (omnia_tarjeta_producto). El <li> que exige WooCommerce solo hace de
   envoltorio: no debe aportar ni estilo ni espaciado propios.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product.omnia-producto-item {
	display: flex;
	padding: 0;
	background: none;
	border: 0;
	list-style: none;
}

.woocommerce ul.products li.product.omnia-producto-item > .omnia-producto {
	width: 100%;
}

/*
 * Las reglas antiguas estilaban un markup que ya no existe
 * (a.woocommerce-LoopProduct-link, h2.woocommerce-loop-product__title).
 * Se neutraliza la imagen directa del <li> para que no compita con
 * .omnia-producto__foto, que ya define proporcion y recorte.
 */
.woocommerce ul.products li.product.omnia-producto-item > img {
	display: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
}

/* --- Tarjeta --- */

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	text-decoration: none;
}

.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin: 0 0 16px;
	background: var(--omnia-suave);
	border-radius: 10px;
	transition: opacity var(--omnia-trans);
}

.woocommerce ul.products li.product:hover img {
	opacity: .88;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin: 0 0 10px;
	font-family: var(--omnia-font-titulos);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--omnia-primario);
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0 0 18px;
	font-family: var(--omnia-font-titulos);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--omnia-primario);
}

.woocommerce ul.products li.product .price .woocommerce-price-suffix {
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--omnia-gris-texto);
}

.woocommerce ul.products li.product .price del {
	margin-right: 6px;
	font-weight: 400;
	opacity: .65;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--omnia-acento);
}

/* Etiqueta de oferta */
.woocommerce span.onsale {
	top: 14px;
	left: 14px;
	right: auto;
	min-height: 0;
	min-width: 0;
	padding: 7px 12px;
	margin: 0;
	background: var(--omnia-acento);
	border-radius: 5px;
	font-family: var(--omnia-font-titulos);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--omnia-blanco);
}

/* Boton de la tarjeta */
.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 18px;
	background: transparent;
	border: 1.5px solid var(--omnia-primario);
	border-radius: 8px;
	font-family: var(--omnia-font-titulos);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
	text-transform: none;
	text-align: center;
	color: var(--omnia-primario);
	transition: background-color var(--omnia-trans), color var(--omnia-trans);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--omnia-primario);
	color: var(--omnia-blanco);
}

/* El precio "desde" del catalogo */
.omnia-precio-desde {
	font-size: .82em;
	font-weight: 500;
	color: var(--omnia-texto);
	text-transform: lowercase;
}

/* --- Paginacion --- */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: 6px;
	display: flex;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: transparent;
	border: 1.5px solid var(--omnia-borde);
	border-radius: 10px;
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	color: var(--omnia-primario);
	transition: border-color var(--omnia-trans),
	            background-color var(--omnia-trans),
	            color var(--omnia-trans);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	color: var(--omnia-blanco);
}

/* --- Barra lateral de filtros --- */

.woocommerce .widget-area .widget,
.woocommerce-page .widget-area .widget {
	margin-bottom: 34px;
}

.woocommerce .widget-area .widget-title,
.woocommerce-page .widget-area .widget-title {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1.5px solid var(--omnia-borde);
	font-family: var(--omnia-font-titulos);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--omnia-primario);
}

.woocommerce .widget-area ul,
.woocommerce-page .widget-area ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .widget-area li,
.woocommerce-page .widget-area li {
	margin-bottom: 8px;
}

.woocommerce .widget-area a,
.woocommerce-page .widget-area a {
	font-size: 14.5px;
	color: var(--omnia-texto);
	text-decoration: none;
	transition: color var(--omnia-trans);
}

.woocommerce .widget-area a:hover,
.woocommerce-page .widget-area a:hover {
	color: var(--omnia-acento);
}

/* --- Mensajes de WooCommerce --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--omnia-acento);
	border-radius: 0;
	background: var(--omnia-suave);
	font-family: var(--omnia-font-textos);
	font-size: 14.5px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--omnia-acento);
}

/* --- Responsive del catalogo --- */

@media (max-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 800px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 18px;
	}

	.woocommerce .woocommerce-products-header {
		padding-top: 30px;
	}
}

@media (max-width: 420px) {
	.woocommerce ul.products {
		gap: 20px 14px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13.5px;
	}
}
/* ==========================================================================
   13. FICHA DE PRODUCTO
   --------------------------------------------------------------------------
   Sigue la maqueta "Ficha Producto.dc.html":
     - Dos columnas iguales (galeria | compra) con 56px de separacion.
     - Galeria con miniaturas en columna a la izquierda, pegada al scroll.
     - Tabla de tallas en rejilla 70px / 1fr / 1fr / 130px.
     - Ficha tecnica en tarjetas blancas con radio 14px.

   Incluye los estilos de la tabla que genera el snippet "Selector de
   tallas v13". Ese snippet trae estilos en linea, asi que hay que usar
   !important para poder sobrescribirlos.
   ========================================================================== */

/* --- Contenedor general --- */

/* Migas de pan */
/*
 * El breadcrumb va dentro de .summary, no a ancho completo, asi que no
 * necesita ni contenedor ni espaciado propio: lo coloca el flex de la
 * columna de compra.
 */
.woocommerce .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--omnia-gris-texto);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--omnia-gris-texto);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--omnia-acento);
}

/* --- Rejilla principal: galeria | compra --- */

/*
 * Estructura real de la ficha (comprobada en el HTML generado):
 *
 *   div.product
 *     ├── .omnia-galeria        <- nuestra plantilla
 *     ├── .summary
 *     ├── .woocommerce-tabs
 *     ├── .omnia-ficha
 *     └── .related
 *
 * Todos son hijos DIRECTOS de div.product.
 *
 * Los !important son necesarios: Astra declara float y width sobre
 * .summary con selectores que incluyen un ID
 * (.woocommerce #content .ast-woocommerce-container div.product ...),
 * y esa especificidad no se puede igualar desde el tema hijo sin
 * escribir selectores igual de fragiles. Con float activo el grid no
 * llega a aplicarse y las columnas se solapan.
 */
.woocommerce div.product,
.woocommerce-page div.product,
.single-product .woocommerce div.product {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 56px;
	align-items: start;
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 20px var(--omnia-gutter) 40px;
	font-family: var(--omnia-font-textos);
}

/* Anular cualquier float heredado en los hijos del grid */
.woocommerce div.product > .omnia-galeria,
.woocommerce div.product > .summary,
.woocommerce div.product > div.summary,
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .omnia-ficha,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	clear: none !important;
}

/*
 * minmax(0, 1fr) y no 1fr: por defecto una columna de grid no baja del
 * tamano de su contenido, y con una imagen de 1200px dentro la columna
 * se desbordaba en lugar de encogerse. Ese era el motivo de que la
 * galeria saliera gigante y empujara la compra hacia abajo.
 */

.woocommerce div.product > .omnia-galeria {
	grid-column: 1 !important;
	grid-row: 1;
	min-width: 0;
	max-width: 100%;

	/*
	 * ESTA celda NO es sticky: es el carril.
	 *
	 * align-self: stretch (el valor por defecto en grid) hace que ocupe
	 * toda la altura de la fila, es decir, lo que mida la columna de
	 * compra. El elemento sticky de dentro se desliza por este carril y
	 * se detiene automaticamente al llegar al final.
	 *
	 * Nota: el grid tiene align-items:start, asi que hay que pedir el
	 * stretch explicitamente para esta celda.
	 */
	align-self: stretch;
	position: relative;
}

/*
 * ESTE es el que se queda pegado.
 *
 * top: 96px deja hueco para el header fijo. No lleva height ni
 * max-height: su altura es la de su contenido, que es justo lo que
 * necesita el sticky para calcular cuando parar.
 */
.omnia-galeria__sticky {
	position: sticky;
	top: 96px;
}

.woocommerce div.product > .summary,
.woocommerce div.product > div.summary {
	grid-column: 2 !important;
	grid-row: 1;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;

	/*
	 * Flex + order para fijar la secuencia de la columna de compra.
	 *
	 * Las prioridades de los hooks deberian bastar, pero Astra y los
	 * plugins insertan elementos con prioridades propias y el resultado
	 * acababa descolocado (los badges salian tras las categorias).
	 * Con order el orden visual queda garantizado pase lo que pase.
	 */
	display: flex;
	flex-direction: column;
}

/*
 * Orden de la columna de compra.
 *
 * El catch-all lleva :not() para bajar su prioridad frente a las reglas
 * concretas, en lugar de repetirlas dos veces.
 */
.woocommerce div.product > .summary > * {
	order: 20;
}

.woocommerce div.product > .summary > .woocommerce-breadcrumb {
	order: 1;
	margin-bottom: 10px;
}
.woocommerce div.product > .summary > .omnia-producto-kicker { order: 2; }
.woocommerce div.product > .summary > h1.product_title { order: 3; }
.woocommerce div.product > .summary > .woocommerce-product-rating { order: 4; }
.woocommerce div.product > .summary > p.price { order: 5; }
.woocommerce div.product > .summary > div.omnia-badges { order: 6; }
.woocommerce div.product > .summary > p.omnia-aviso-plazo { order: 7; }
.woocommerce div.product > .summary > .woocommerce-product-details__short-description { order: 8; }
.woocommerce div.product > .summary > form.cart { order: 9; }
.woocommerce div.product > .summary > button.omnia-personalizar { order: 10; }
.woocommerce div.product > .summary > div.product_meta { order: 11; }
.woocommerce div.product > .summary > fieldset.ast-single-product-payments { order: 12; }

/*
 * Secciones a ancho completo. Se les da fila explicita: si no, el grid
 * podria colocarlas en la fila 1 junto a la galeria.
 */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .omnia-acordeon {
	grid-column: 1 / -1 !important;
	grid-row: 2;
	min-width: 0;
}

.woocommerce div.product > .omnia-ficha {
	grid-column: 1 / -1 !important;
	grid-row: 3;
	min-width: 0;
}

.woocommerce div.product > .related,
.woocommerce div.product > .upsells {
	grid-column: 1 / -1 !important;
	grid-row: auto;
	min-width: 0;
}

/* El contenedor de Astra no debe limitar el ancho aqui */
.single-product .ast-woocommerce-container {
	display: block;
	max-width: none;
	padding: 0;
}

/*
 * "Pago seguro" de Astra: se mantiene (trae los logos reales de las
 * tarjetas) y se le da el estilo del tema.
 */
.ast-single-product-payments {
	margin: 20px 0 0;
	padding: 18px;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 12px;
	text-align: center;
}

.ast-single-product-payments legend {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--omnia-font-titulos);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--omnia-gris-texto);
	text-align: center;
}

.ast-single-product-payments ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ast-single-product-payments li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ast-single-product-payments li::before,
.ast-single-product-payments li::after {
	display: none;
}

.ast-single-product-payments .ahfb-svg-iconset {
	display: block;
	width: 46px;
	height: 30px;
}

.ast-single-product-payments svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}



/* ==========================================================================
   13a. GALERIA
   ========================================================================== */

/*
 * El sticky lo lleva .omnia-galeria__sticky (ver seccion de layout).
 * Aqui solo se maqueta el contenido: miniaturas | imagen.
 *
 * Sin height:100%: la altura debe salir del contenido, porque es lo que
 * usa el sticky para saber cuando detenerse. Si se estirara al alto del
 * carril no habria recorrido y se quedaria fijo tapando la pagina.
 */
.omnia-galeria {
	display: block;
}

.omnia-galeria__sticky {
	display: flex;
	/*
	 * align-items: flex-start y no el stretch por defecto.
	 *
	 * Con stretch, la imagen y la columna de miniaturas se estiran a la
	 * altura del mas alto de los dos. Si hay muchas miniaturas, la caja
	 * de la imagen crece pero la foto no, y queda un hueco blanco debajo.
	 */
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

/* --- Miniaturas en columna --- */

/*
 * La columna no debe pasar de la altura de la imagen. Si hay muchas
 * fotos se desplaza por dentro, en lugar de estirar el bloque y dejar
 * un hueco al lado.
 */
.omnia-galeria__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: none;
	width: 74px;
	max-height: 640px;
	overflow-y: auto;
	scrollbar-width: none;
}

.omnia-galeria__thumbs::-webkit-scrollbar {
	display: none;
}

.omnia-galeria__thumb {
	/*
	 * Tamano fijo: al quitar el aspect-ratio de la imagen principal, el
	 * contenedor ya no tiene altura conocida, asi que las miniaturas no
	 * pueden repartirsela con flex:1. Si hay muchas, la columna crece y
	 * el scroll de la pagina se encarga.
	 */
	flex: 0 0 auto;
	width: 100%;
	height: 90px;
	padding: 0;
	background: var(--omnia-fondo);
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 150ms ease;
}

.omnia-galeria__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

.omnia-galeria__thumb:hover {
	border-color: var(--omnia-borde);
}

.omnia-galeria__thumb.is-activa {
	border-color: var(--omnia-primario);
}

/* --- Imagen principal --- */

/*
 * Proporcion 3:4 y la foto en cover: llena todo el hueco sin deformarse.
 * La altura sale del aspect-ratio, no del alto natural del archivo, asi
 * que todas las fotos ocupan lo mismo aunque vengan en tamanos distintos.
 */
.omnia-galeria__principal {
	position: relative;
	flex: 1;
	min-width: 0;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 14px;
	overflow: hidden;
}

.omnia-galeria__slide {
	display: none;
	margin: 0;
}

/*
 * block + height:100% juntos en la regla activa.
 *
 * Antes el height iba en la regla base y aqui solo el display: como
 * .is-activa es mas especifica, el figure se quedaba con la altura
 * natural de la imagen y sobraba un hueco blanco abajo.
 */
.omnia-galeria__slide.is-activa {
	display: block;
}

.omnia-galeria__zoom {
	display: block;
	width: 100%;
}

.omnia-galeria__img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * El zoom lo activa el JS con .is-zoom en el contenedor, y mueve el
	 * transform-origin siguiendo al cursor.
	 *
	 * Se anima solo el transform (no width ni height) para que lo
	 * resuelva la GPU y no obligue al navegador a recalcular el layout.
	 */
	transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
	transform-origin: 50% 50%;
}

/* --- Zoom al pasar el raton --- */

.omnia-galeria__principal.is-zoom {
	cursor: zoom-in;
}

.omnia-galeria__principal.is-zoom .omnia-galeria__slide.is-activa img {
	transform: scale(2);
	/*
	 * Sin transicion en el origen: cambia en cada fotograma siguiendo al
	 * cursor, y animarlo lo haria ir a rastras.
	 */
	transition: transform 260ms cubic-bezier(.4, 0, .2, 1),
	            transform-origin 0s;
}

/*
 * Sin zoom en pantallas tactiles: no hay hover real y el navegador lo
 * simula al tocar, dejando la imagen ampliada de forma pegajosa.
 * El JS ya comprueba (hover: hover); esto es el respaldo de CSS.
 */
@media (hover: none) {

	.omnia-galeria__principal.is-zoom {
		cursor: default;
	}

	.omnia-galeria__principal.is-zoom .omnia-galeria__slide.is-activa img {
		transform: none;
	}
}

/* Etiqueta sobre la imagen */
.omnia-galeria__etiqueta {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 6px 10px;
	background: var(--omnia-acento);
	border-radius: 4px;
	font-family: var(--omnia-font-titulos);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--omnia-blanco);
}

/* Boton de lupa */
.omnia-galeria__lupa {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 50%;
	color: var(--omnia-primario);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.omnia-galeria__lupa:hover {
	background: var(--omnia-primario);
	color: var(--omnia-blanco);
}

.omnia-galeria__vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--omnia-borde);
}


/* ==========================================================================
   13b. COLUMNA DE COMPRA
   ========================================================================== */

.woocommerce div.product .summary {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

/* Antetitulo: marca y tipo de prenda */
.omnia-producto-kicker {
	display: block;
	margin-bottom: 8px;
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--omnia-gris-texto);
}

.woocommerce div.product .product_title {
	margin: 0 0 10px;
	font-family: var(--omnia-font-titulos);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.03em;
	text-transform: none;
	color: var(--omnia-primario);
}

/* Valoraciones */
.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--omnia-gris-texto);
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
	color: var(--omnia-acento);
	font-size: 14px;
}

/* --- Precio --- */

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 16px;
	font-family: var(--omnia-font-titulos);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--omnia-primario);
}

.woocommerce div.product p.price .woocommerce-price-suffix {
	font-family: var(--omnia-font-textos);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--omnia-gris-texto);
}

.woocommerce div.product p.price del {
	margin-right: 8px;
	font-weight: 400;
	color: var(--omnia-gris-texto);
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--omnia-acento);
}

/* --- Badges de envio --- */

/*
 * En fila, repartiendo el ancho. Si no caben (textos largos o pantalla
 * estrecha) bajan solos gracias al wrap y al min-width del badge.
 */
.omnia-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}

.omnia-badge {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 220px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid;
	border-radius: 10px;
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
}

.omnia-badge svg {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
}

.omnia-badge--verde {
	background: #EDF6E6;
	border-color: #CBE3B5;
	color: #3D6321;
}

.omnia-badge--verde svg {
	color: #5C8C33;
}

.omnia-badge--azul {
	background: #EEF3FA;
	border-color: #C8D8EC;
	color: #324A6B;
}

.omnia-badge--azul svg {
	color: #4A6B99;
}

.omnia-badge--acento {
	background: color-mix(in srgb, var(--omnia-acento) 8%, white);
	border-color: color-mix(in srgb, var(--omnia-acento) 28%, white);
	color: var(--omnia-acento);
}

.omnia-badge--neutro {
	background: var(--omnia-suave);
	border-color: var(--omnia-borde);
	color: var(--omnia-primario);
}

/* --- Aviso de plazo de personalizacion --- */

.omnia-aviso-plazo {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	padding: 11px 14px;
	background: #FBF3E8;
	border: 1px solid #ECD9B8;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	color: #8A6420;
}

.omnia-aviso-plazo svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: #C89A45;
}

.omnia-aviso-plazo strong {
	font-weight: 600;
}

/* --- Guia de variaciones --- */

.omnia-guia-variaciones {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	padding: 11px 14px;
	background: #FBF3E8;
	border: 1px solid #ECD9B8;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 600;
	color: #8A6420;
}

.omnia-guia-variaciones svg {
	flex-shrink: 0;
	color: #C89A45;
}

.omnia-guia-variaciones strong {
	font-weight: 600;
}

/* --- Selector de variaciones --- */

.woocommerce div.product .variations {
	width: 100%;
	margin: 0 0 22px;
	border: 0;
	border-collapse: collapse;
}

/*
 * La tabla de variaciones se desmonta a bloques: cada atributo queda
 * como "etiqueta encima, opciones debajo", que es como lo pide el
 * diseno. Con la tabla original la etiqueta iba en una columna estrecha
 * a la izquierda.
 */
.woocommerce div.product .variations tbody,
.woocommerce div.product .variations tr,
.woocommerce div.product .variations th,
.woocommerce div.product .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

.woocommerce div.product .variations tr {
	margin-bottom: 18px;
}

.woocommerce div.product .variations tr:last-child {
	margin-bottom: 0;
}

/* Etiqueta del atributo: "Color", "Talla"... */
.woocommerce div.product .variations th.label,
.woocommerce div.product .variations .label {
	display: block;
	margin-bottom: 10px;
}

.woocommerce div.product .variations .label label {
	display: block;
	margin: 0;
	font-family: var(--omnia-font-textos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
	color: var(--omnia-primario);
}

/*
 * Swatches del plugin CFVSW (Variation Swatches for WooCommerce).
 * El plugin pinta .cfvsw-swatches-option con estilos en linea
 * (min-width, min-height, border-radius), por eso hace falta
 * !important en esas tres propiedades.
 */
.cfvsw-swatches-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.cfvsw-swatches-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: auto !important;
	min-height: auto !important;
	margin: 0;
	padding: 10px 15px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 8px !important;
	font-family: var(--omnia-font-textos);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--omnia-texto);
	cursor: pointer;
	transition: border-color 160ms ease,
	            background-color 160ms ease,
	            color 160ms ease;
}

.cfvsw-swatches-option:hover {
	border-color: var(--omnia-gris-texto);
	color: var(--omnia-primario);
}

/* Opcion elegida */
.cfvsw-swatches-option.cfvsw-selected-swatch,
.cfvsw-swatches-option.cfvsw-swatch-selected {
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	color: var(--omnia-blanco);
}

/* Sin stock o no disponible con la otra opcion elegida */
.cfvsw-swatches-option.cfvsw-disabled-swatch,
.cfvsw-swatches-option.cfvsw-unavailable {
	opacity: .35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.cfvsw-swatch-inner {
	display: block;
	line-height: 1;
}

/* Las tallas son cortas: se centran en un cuadro mas estrecho */
.cfvsw-swatches-container[swatches-attr="attribute_pa_talla"] .cfvsw-swatches-option {
	min-width: 46px !important;
	padding: 10px 12px;
	font-family: var(--omnia-font-titulos);
	font-weight: 600;
}

.woocommerce div.product .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--omnia-gris-texto);
}

/* --- Cantidad y anadir al carrito --- */

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 16px;
}

/* Los bloques del snippet v13 ocupan toda la fila */
.woocommerce div.product form.cart > .variations,
.woocommerce div.product form.cart > .single_variation_wrap,
.woocommerce div.product form.cart > #roly-wrap,
.woocommerce div.product form.cart > #roly-price-panel,
.woocommerce div.product form.cart > .omnia-guia-variaciones,
.woocommerce div.product form.cart > .omnia-aviso-plazo,
.woocommerce div.product form.cart > .woocommerce-variation {
	flex: 0 0 100%;
	margin-bottom: 0;
}

/*
 * El JS mueve el panel de precios y el aviso de plazo justo debajo del
 * boton del snippet v13, que vive dentro de #roly-wrap. Por eso los
 * selectores apuntan ahi y no a form.cart.
 */
#roly-wrap > #roly-price-panel {
	margin-top: 12px !important;
}

#roly-wrap > .omnia-aviso-plazo,
.woocommerce div.product form.cart > .omnia-aviso-plazo {
	margin-top: 12px;
	margin-bottom: 0;
}

/* Campo de cantidad */
.woocommerce div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product .quantity input.qty {
	width: 72px;
	height: 100%;
	min-height: 54px;
	padding: 0 10px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 10px;
	font-family: var(--omnia-font-titulos);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: var(--omnia-primario);
	transition: border-color 160ms ease;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity input.qty:focus {
	outline: none;
	border-color: var(--omnia-primario);
}

/* Quitar las flechas del input number */
.woocommerce div.product .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * Boton de anadir al carrito.
 * Astra y WooCommerce le ponen su propio fondo y radio, de ahi los
 * selectores encadenados para ganar en especificidad.
 */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button.button.alt {
	flex: 1 1 auto;
	min-height: 54px;
	padding: 16px 28px;
	background: var(--omnia-primario);
	border: 0;
	border-radius: 10px;
	font-family: var(--omnia-font-titulos);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.2;
	text-transform: none;
	color: var(--omnia-blanco);
	cursor: pointer;
	transition: background-color 180ms ease;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button.button.alt:hover {
	background: var(--omnia-acento);
	color: var(--omnia-blanco);
}

/* Deshabilitado: mientras no se elige variacion */
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product .single_add_to_cart_button.disabled {
	background: var(--omnia-borde);
	color: var(--omnia-gris-texto);
	cursor: not-allowed;
	opacity: 1;
}

.woocommerce div.product form.cart .button:disabled:hover,
.woocommerce div.product form.cart .button.disabled:hover {
	background: var(--omnia-borde);
	color: var(--omnia-gris-texto);
}

/* Precio de la variacion elegida */
.woocommerce div.product .woocommerce-variation-price {
	flex: 0 0 100%;
	margin-bottom: 4px;
}

.woocommerce div.product .woocommerce-variation-price .price {
	font-family: var(--omnia-font-titulos);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--omnia-primario);
}

/* Aviso de stock */
.woocommerce div.product .stock {
	flex: 0 0 100%;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #3D6321;
}

.woocommerce div.product .stock.out-of-stock {
	color: #9B2C22;
}

/* --- SKU y categorias --- */

.woocommerce div.product .product_meta {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--omnia-borde);
	font-size: 13px;
	color: var(--omnia-gris-texto);
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.woocommerce div.product .product_meta a {
	font-weight: 600;
	color: var(--omnia-acento);
	text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}



/* ==========================================================================
   13c. TABLA DE TALLAS (snippet v13)
   --------------------------------------------------------------------------
   El snippet imprime estilos en linea en cada celda. Para sobrescribirlos
   hace falta !important: es la unica forma sin editar el snippet.
   ========================================================================== */

/*
 * El envoltorio solo agrupa: sin borde ni fondo. El borde lo lleva la
 * tabla, y el bloque del total va suelto con su propio radio, igual que
 * el boton. Antes el borde rodeaba tabla + total + boton, y se veia
 * como una caja unica.
 */
#roly-wrap {
	margin: 0 0 16px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

/* Cabecera "Selecciona cantidad por talla" */
#roly-wrap > p:first-child {
	margin: 0 !important;
	padding: 12px 18px !important;
	background: var(--omnia-suave) !important;
	border: 1px solid var(--omnia-borde) !important;
	border-bottom: 0 !important;
	border-radius: 12px 12px 0 0 !important;
	font-family: var(--omnia-font-titulos) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: #5A564E !important;
}

/*
 * border-radius no se aplica a una tabla con border-collapse:collapse
 * (asi lo define la especificacion). Para redondear las esquinas de
 * abajo se redondean las celdas de la ultima fila, mas abajo.
 */
#roly-table {
	width: 100% !important;
	border-collapse: collapse !important;
	border: 1px solid var(--omnia-borde) !important;
	border-top: 0 !important;
	border-radius: 0 !important;
	background: var(--omnia-fondo) !important;
}

#roly-table thead tr {
	background: transparent !important;
}

#roly-table thead th {
	padding: 10px 18px !important;
	background: transparent !important;
	border-bottom: 1px solid var(--omnia-borde) !important;
	font-family: var(--omnia-font-titulos) !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color: var(--omnia-gris-texto) !important;
	text-align: left !important;
}

/* La columna de cantidad va a la derecha */
#roly-table thead th:first-child,
#roly-table tbody td:first-child {
	text-align: right !important;
}

#roly-table tbody td {
	padding: 9px 18px !important;
	border-bottom: 1px solid var(--omnia-suave) !important;
	font-family: var(--omnia-font-textos) !important;
	font-size: 13.5px !important;
	color: var(--omnia-primario) !important;
	vertical-align: middle !important;
}

#roly-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

/* Esquinas inferiores: se redondean las celdas, no la tabla */
#roly-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 12px !important;
}

#roly-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 12px !important;
}

#roly-table tbody tr:hover td {
	background: color-mix(in srgb, var(--omnia-suave) 45%, white) !important;
}

/* Talla: la columna que mas se mira */
#roly-table tbody td:nth-child(2) {
	font-family: var(--omnia-font-titulos) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* SKU en gris claro */
#roly-table tbody td:nth-child(3) {
	font-size: 11.5px !important;
	font-weight: 500 !important;
	color: var(--omnia-gris-texto) !important;
	font-family: var(--omnia-font-textos) !important;
}

/* Precio */
#roly-table tbody td:nth-child(4) {
	font-weight: 600 !important;
}

/* Stock en verde */
#roly-table tbody td:nth-child(5) {
	font-size: 10.5px !important;
	font-weight: 600 !important;
	color: #2F8F4E !important;
}

/* Campo de cantidad */
.roly-qty {
	width: 64px !important;
	height: 34px !important;
	text-align: center !important;
	background: var(--omnia-suave) !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-family: var(--omnia-font-textos) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--omnia-primario) !important;
	transition: box-shadow 160ms ease !important;
}

.roly-qty:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px var(--omnia-primario) !important;
}

.roly-qty:disabled {
	opacity: .4 !important;
	cursor: not-allowed !important;
}

/* Pie de la tabla: total */
#roly-wrap > div[style*="justify-content:space-between"] {
	margin-top: 12px !important;
	padding: 16px 18px !important;
	background: var(--omnia-suave) !important;
	border: 0 !important;
	/* Mismo radio que el boton de anadir al carrito */
	border-radius: 10px !important;
	font-family: var(--omnia-font-textos) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #5A564E !important;
}

#roly-units {
	color: var(--omnia-primario) !important;
	font-weight: 600 !important;
}

#roly-total {
	font-family: var(--omnia-font-titulos) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	color: var(--omnia-primario) !important;
}

/* Boton principal */
#roly-add-btn {
	display: block !important;
	width: 100% !important;
	margin: 16px 0 0 !important;
	padding: 17px !important;
	background: var(--omnia-primario) !important;
	color: var(--omnia-blanco) !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-family: var(--omnia-font-titulos) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -.005em !important;
	cursor: pointer !important;
	transition: background-color 180ms ease !important;
}

#roly-add-btn:hover {
	background: var(--omnia-acento) !important;
}

#roly-add-btn:disabled {
	background: var(--omnia-gris-texto) !important;
	cursor: wait !important;
}

#roly-msg {
	margin-top: 12px !important;
	padding: 12px 14px !important;
	border-radius: 8px !important;
	font-family: var(--omnia-font-textos) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}


/* ==========================================================================
   13d. PANEL DE PRECIOS (snippet v3)
   ========================================================================== */

#roly-price-panel {
	margin: 0 0 16px !important;
}

#roly-price-panel > div {
	border: 1px solid var(--omnia-borde) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: var(--omnia-fondo) !important;
}

#roly-price-panel > div > div > div {
	padding: 16px 18px !important;
}

#roly-price-panel > div > div > div:first-child {
	border-right: 1px solid var(--omnia-borde) !important;
}

#roly-price-panel > div > div > div:last-child {
	background: var(--omnia-suave) !important;
}

#roly-price-panel p:first-child {
	font-family: var(--omnia-font-titulos) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--omnia-gris-texto) !important;
}

#roly-pp-base,
#roly-pp-epo {
	font-family: var(--omnia-font-titulos) !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	letter-spacing: -.02em !important;
	color: var(--omnia-primario) !important;
}

#roly-pp-epo {
	color: var(--omnia-acento) !important;
}

#roly-pp-base-ud,
#roly-pp-epo-ud {
	font-family: var(--omnia-font-textos) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--omnia-gris-texto) !important;
}


/* ==========================================================================
   13e. FICHA TECNICA
   ========================================================================== */

.omnia-ficha {
	max-width: var(--omnia-ancho);
	margin: 40px auto 0;
	padding: 0;
}

/* Cabecera centrada con pastilla */
.omnia-ficha__cabecera {
	margin-bottom: 30px;
	text-align: center;
}

.omnia-ficha__pastilla {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 18px;
	border: 1px solid color-mix(in srgb, var(--omnia-acento) 28%, white);
	border-radius: 100px;
	font-family: var(--omnia-font-titulos);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--omnia-acento);
}

.omnia-ficha__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.omnia-ficha__bloque {
	padding: 22px;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 14px;
}

.omnia-ficha__bloque--ancho {
	grid-column: 1 / -1;
}

.omnia-ficha__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: var(--omnia-font-titulos);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--omnia-gris-texto);
}

.omnia-ficha__label svg {
	flex-shrink: 0;
	color: var(--omnia-gris-texto);
}

.omnia-ficha__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Pastillas de la ficha --- */

.omnia-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 100px;
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #3A372F;
}

.omnia-tag__check {
	display: flex;
	color: var(--omnia-acento);
}

.omnia-tag__check svg {
	stroke-width: 3;
}

/* Gramaje: el dato estrella, en negativo */
.omnia-tag--destacado {
	padding: 8px 16px;
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	font-family: var(--omnia-font-titulos);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--omnia-blanco);
}

.omnia-tag--talla {
	min-width: 42px;
	justify-content: center;
	font-family: var(--omnia-font-titulos);
	font-weight: 600;
}

.omnia-tag--verde,
.omnia-tag--acento,
.omnia-tag--neutro {
	background: var(--omnia-fondo);
	border-color: var(--omnia-borde);
	color: #3A372F;
}


/* ==========================================================================
   13f. ACORDEON DE PRODUCTO
   --------------------------------------------------------------------------
   Sustituye a las pestanas horizontales. Ventajas:
     - El ancho no cambia al pasar de una seccion a otra. Con pestanas
       cada panel medía distinto y el bloque "saltaba".
     - Solo una abierta a la vez, sin JavaScript (atributo `name`).
   ========================================================================== */

/*
 * Ancho fijo: es lo que evita el salto entre secciones. Da igual que la
 * descripcion sea larga y la de valoraciones corta, el contenedor mide
 * siempre lo mismo.
 */
.woocommerce div.product .omnia-acordeon,
.woocommerce div.product .woocommerce-tabs,
.omnia-acordeon {
	width: 100% !important;
	max-width: 920px !important;
	margin: 56px auto 0;
	padding: 0 var(--omnia-gutter);
	border-top: 1px solid var(--omnia-borde);
}

.omnia-acordeon__item {
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-acordeon__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 4px;
	font-family: var(--omnia-font-titulos);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.015em;
	color: var(--omnia-primario);
	cursor: pointer;
	list-style: none;
	transition: color var(--omnia-trans);
}

/* Quitar el triangulo nativo */
.omnia-acordeon__titulo::-webkit-details-marker {
	display: none;
}

.omnia-acordeon__titulo::marker {
	content: "";
}

.omnia-acordeon__titulo:hover {
	color: var(--omnia-acento);
}

/* Signo + que gira a - al abrir */
.omnia-acordeon__mas {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--omnia-gris-texto);
	transition: color var(--omnia-trans);
}

.omnia-acordeon__item[open] .omnia-acordeon__mas {
	color: var(--omnia-acento);
}

.omnia-acordeon__mas::before,
.omnia-acordeon__mas::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}

.omnia-acordeon__mas::after {
	transform: rotate(90deg);
}

.omnia-acordeon__item[open] .omnia-acordeon__mas::after {
	transform: rotate(0deg);
}

/* --- Contenido --- */

.omnia-acordeon__panel {
	padding: 0 4px 26px;
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	line-height: 1.7;
	color: var(--omnia-texto);
}

.omnia-acordeon__panel > h2:first-child {
	display: none;
}

.omnia-acordeon__panel p:first-child {
	margin-top: 0;
}

.omnia-acordeon__panel p:last-child {
	margin-bottom: 0;
}

.omnia-acordeon__panel img {
	max-width: 100%;
	height: auto;
}

/* Tabla de "Informacion adicional" */
.omnia-acordeon__panel table.shop_attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.omnia-acordeon__panel table.shop_attributes th,
.omnia-acordeon__panel table.shop_attributes td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--omnia-borde);
	font-size: 14.5px;
	text-align: left;
	vertical-align: top;
}

.omnia-acordeon__panel table.shop_attributes th {
	width: 34%;
	font-family: var(--omnia-font-titulos);
	font-weight: 600;
	color: var(--omnia-primario);
}

.omnia-acordeon__panel table.shop_attributes td p {
	margin: 0;
}

/* Animacion de apertura, igual que en el bloque de FAQ */
@supports selector(::details-content) {

	.omnia-acordeon__item::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size 300ms cubic-bezier(.4, 0, .2, 1),
		            content-visibility 300ms allow-discrete,
		            opacity 220ms ease;
	}

	.omnia-acordeon__item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

@supports (interpolate-size: allow-keywords) {

	.omnia-acordeon {
		interpolate-size: allow-keywords;
	}
}


/* ==========================================================================
   13g. PRODUCTOS RELACIONADOS
   ========================================================================== */

.woocommerce div.product .related,
.woocommerce div.product .upsells {
	max-width: var(--omnia-ancho);
	margin: 64px auto 0;
	padding: 0 var(--omnia-gutter);
}

/*
 * El titulo puede venir como <h2> o como <p> segun la version de
 * WooCommerce y el tema. Se estilan los dos.
 */
.woocommerce div.product .related > h2,
.woocommerce div.product .related > p,
.woocommerce div.product .upsells > h2,
.woocommerce div.product .upsells > p {
	margin: 0 0 30px;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.028em;
	color: var(--omnia-primario);
}

/*
 * Cuatro columnas fijas. Astra pone .columns-4 pero su CSS usa floats
 * con anchos en porcentaje, de ahi el !important.
 */
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 30px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .related ul.products::before,
.woocommerce div.product .related ul.products::after,
.woocommerce div.product .upsells ul.products::before,
.woocommerce div.product .upsells ul.products::after {
	display: none;
}

.woocommerce div.product .related ul.products li.product,
.woocommerce div.product .upsells ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* --- Responsive de relacionados --- */

@media (max-width: 1100px) {

	.woocommerce div.product .related ul.products,
	.woocommerce div.product .upsells ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 800px) {

	.woocommerce div.product .related ul.products,
	.woocommerce div.product .upsells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px 18px;
	}
}

@media (max-width: 600px) {

	.woocommerce div.product .omnia-acordeon,
	.woocommerce div.product .woocommerce-tabs {
		margin-top: 40px;
	}

	.omnia-acordeon__titulo {
		font-size: 16.5px;
		padding: 18px 2px;
		gap: 16px;
	}

	.omnia-acordeon__panel {
		padding-bottom: 22px;
	}

	.woocommerce div.product .related,
	.woocommerce div.product .upsells {
		margin-top: 44px;
	}
}


/* ==========================================================================
   13g. RESPONSIVE DE LA FICHA
   ========================================================================== */

@media (max-width: 1100px) {

	.woocommerce div.product {
		gap: 36px;
	}

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

@media (max-width: 900px) {

	/* Una sola columna: galeria arriba, compra debajo */
	.woocommerce div.product,
	.woocommerce-page div.product,
	.single-product .woocommerce div.product {
		grid-template-columns: 1fr !important;
		gap: 30px;
	}

	/* Las columnas pasan a ocupar el ancho completo, en orden */
	.woocommerce div.product > .omnia-galeria {
		grid-column: 1 / -1 !important;
		grid-row: 1;
	}

	.woocommerce div.product > .summary,
	.woocommerce div.product > div.summary {
		grid-column: 1 / -1 !important;
		grid-row: 2;
	}

	/*
	 * Sin sticky en una sola columna: no hay nada al lado que justifique
	 * que la galeria acompane el scroll.
	 */
	.omnia-galeria__sticky {
		position: static;
	}

	/* El panel de precios se apila */
	#roly-price-panel > div > div {
		grid-template-columns: 1fr !important;
	}

	#roly-price-panel > div > div > div:first-child {
		border-right: 0 !important;
		border-bottom: 1px solid var(--omnia-borde) !important;
	}
}

@media (max-width: 600px) {

	.omnia-ficha__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.omnia-ficha__bloque {
		padding: 18px;
	}

	/* Miniaturas en fila bajo la imagen */
	.omnia-galeria__sticky {
		flex-direction: column-reverse;
		gap: 12px;
	}

	.omnia-galeria__thumbs {
		flex-direction: row;
		width: auto;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.omnia-galeria__thumbs::-webkit-scrollbar {
		display: none;
	}

	/* En fila: mas pequenas y con scroll horizontal si no caben */
	.omnia-galeria__thumb {
		width: 62px;
		height: 76px;
	}

	/* La tabla de tallas necesita scroll */
	#roly-wrap {
		overflow-x: auto !important;
	}

	#roly-table {
		min-width: 420px;
	}

	/* El SKU ocupa mucho y aporta poco en movil */
	#roly-table thead th:nth-child(3),
	#roly-table tbody td:nth-child(3) {
		display: none !important;
	}
}

/* ==========================================================================
   14. BOTON Y MODAL DE PERSONALIZACION
   ========================================================================== */

/* --- Boton --- */

/*
 * Astra aplica text-transform y otros estilos a todos los <button>.
 * Los anulamos aqui: este boton es una tarjeta, no un boton al uso.
 */
.omnia-personalizar {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 0 16px;
	padding: 16px 18px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 12px;
	font-family: var(--omnia-font-textos);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	color: var(--omnia-primario);
	cursor: pointer;
	box-shadow: none;
	transition: border-color 180ms ease, background-color 180ms ease;
}

.omnia-personalizar:hover {
	background: color-mix(in srgb, var(--omnia-acento) 5%, white);
	border-color: color-mix(in srgb, var(--omnia-acento) 45%, white);
	color: var(--omnia-primario);
	box-shadow: none;
}

/*
 * Foco de teclado.
 *
 * Va separado del hover a proposito: el hover solo tinta el fondo, y
 * eso no basta para saber donde esta el foco navegando con Tab. Aqui se
 * anade un anillo con el color de acento.
 *
 * Se usa outline y no box-shadow porque el outline se ve tambien en
 * modo de alto contraste, donde los fondos y las sombras se ignoran.
 */
.omnia-personalizar:focus,
.omnia-personalizar:focus-visible {
	background: #fff;
	border-color: var(--omnia-acento);
	color: var(--omnia-primario);
	outline: 2px solid var(--omnia-acento);
	outline-offset: 3px;
	box-shadow: none;
}

/*
 * Al hacer clic con el raton se mantiene el fondo del hover, que es
 * donde esta el cursor. El anillo solo lo quita :focus a secas, que es
 * el que se activa al pulsar.
 */
.omnia-personalizar:focus:not(:focus-visible) {
	outline: none;
	background: color-mix(in srgb, var(--omnia-acento) 5%, white);
	border-color: color-mix(in srgb, var(--omnia-acento) 45%, white);
}

/* La flecha tambien se desplaza al enfocar, no solo al pasar el raton */
.omnia-personalizar:focus-visible .omnia-personalizar__flecha {
	transform: translateX(4px);
	color: var(--omnia-acento);
}

.omnia-personalizar__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	background: color-mix(in srgb, var(--omnia-acento) 10%, white);
	border-radius: 10px;
	color: var(--omnia-acento);
}

.omnia-personalizar__texto {
	flex: 1;
	min-width: 0;
}

.omnia-personalizar__titulo {
	display: block;
	font-family: var(--omnia-font-titulos);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--omnia-primario);
}

.omnia-personalizar__desc {
	display: block;
	margin-top: 3px;
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--omnia-gris-texto);
}

.omnia-personalizar__flecha {
	display: flex;
	flex-shrink: 0;
	color: var(--omnia-gris-texto);
	transition: transform 180ms ease, color 180ms ease;
}

.omnia-personalizar:hover .omnia-personalizar__flecha {
	transform: translateX(4px);
	color: var(--omnia-acento);
}


/* --- Modal --- */

.omnia-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.omnia-modal[hidden] {
	display: none;
}

.omnia-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(27, 25, 23, .55);
	opacity: 0;
	transition: opacity 250ms ease;
}

.omnia-modal.is-abierto .omnia-modal__overlay {
	opacity: 1;
}

.omnia-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(620px, 100%);
	max-height: min(88vh, 860px);
	background: var(--omnia-fondo);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity 260ms cubic-bezier(.4, 0, .2, 1),
	            transform 260ms cubic-bezier(.4, 0, .2, 1);
	overflow: hidden;
}

.omnia-modal.is-abierto .omnia-modal__panel {
	opacity: 1;
	transform: none;
}

.omnia-modal__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-shrink: 0;
	padding: 26px 26px 20px;
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-modal__titulo {
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--omnia-primario);
	text-wrap: balance;
}

.omnia-modal__intro {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--omnia-gris-texto);
	max-width: 52ch;
}

.omnia-modal__cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin: -6px -6px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--omnia-gris-texto);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.omnia-modal__cerrar:hover {
	background: var(--omnia-suave);
	color: var(--omnia-primario);
}

.omnia-modal__cuerpo {
	flex: 1;
	min-height: 0;
	padding: 22px 26px 26px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Producto que se estaba consultando */
.omnia-modal__referencia {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	padding: 11px 14px;
	background: var(--omnia-suave);
	border-radius: 9px;
	font-size: 13px;
	color: var(--omnia-texto);
}

.omnia-modal__referencia svg {
	flex-shrink: 0;
	color: var(--omnia-acento);
}

.omnia-modal__referencia strong {
	font-weight: 600;
	color: var(--omnia-primario);
}


/* ==========================================================================
   14a. FORMULARIO DEL MODAL (Contact Form 7)
   --------------------------------------------------------------------------
   El formulario usa .form-row como envoltorio de cada campo, con el
   <label> rodeando texto y control.
   ========================================================================== */

.omnia-modal .wpcf7 {
	margin: 0;
}

.omnia-modal .wpcf7-form > p {
	margin: 0;
}

.omnia-modal .form-row {
	margin-bottom: 16px;
}

.omnia-modal .form-row:last-of-type {
	margin-bottom: 0;
}

/* Etiqueta: el texto va antes del control dentro del mismo <label> */
.omnia-modal .form-row > label {
	display: block;
	font-family: var(--omnia-font-textos);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--omnia-primario);
}

/* --- Campos --- */

.omnia-modal input[type="text"],
.omnia-modal input[type="email"],
.omnia-modal input[type="tel"],
.omnia-modal input[type="number"],
.omnia-modal input[type="url"],
.omnia-modal select,
.omnia-modal textarea {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 12px 14px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 9px;
	font-family: var(--omnia-font-textos);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--omnia-primario);
	transition: border-color 160ms ease, box-shadow 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.omnia-modal input:focus,
.omnia-modal select:focus,
.omnia-modal textarea:focus {
	outline: none;
	border-color: var(--omnia-primario);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--omnia-primario) 12%, transparent);
}

.omnia-modal input::placeholder,
.omnia-modal textarea::placeholder {
	color: var(--omnia-gris-texto);
	font-weight: 400;
}

.omnia-modal textarea {
	min-height: 108px;
	resize: vertical;
	line-height: 1.55;
}

/* Flecha del desplegable */
.omnia-modal select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B675F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 17px;
	cursor: pointer;
}

/* --- Casillas de posicion del diseno --- */

.omnia-modal .wpcf7-checkbox,
.omnia-modal .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 9px;
}

.omnia-modal .wpcf7-list-item {
	margin: 0;
}

/*
 * Cada opcion es una pastilla. El input real se oculta pero sigue
 * siendo accesible: se coloca encima con opacidad 0, asi el teclado y
 * los lectores de pantalla lo encuentran.
 */
.omnia-modal .wpcf7-list-item label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	color: var(--omnia-texto);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.omnia-modal .wpcf7-list-item label:hover {
	border-color: var(--omnia-gris-texto);
}

.omnia-modal .wpcf7-list-item input[type="checkbox"],
.omnia-modal .wpcf7-list-item input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/*
 * Marca visual de la pastilla.
 * :has() esta disponible en el 93% de navegadores (Baseline). Para el
 * resto hay un respaldo mas abajo con accent-color, para que el estado
 * marcado se vea igualmente.
 */
.omnia-modal .wpcf7-list-item .wpcf7-list-item-label::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	vertical-align: -3px;
	border: 1.5px solid var(--omnia-borde);
	border-radius: 4px;
	background: var(--omnia-fondo);
	transition: background-color 160ms ease, border-color 160ms ease;
}

/* Pastilla seleccionada */
.omnia-modal .wpcf7-list-item label:has( input:checked ) {
	background: color-mix(in srgb, var(--omnia-acento) 8%, white);
	border-color: var(--omnia-acento);
	color: var(--omnia-acento);
}

.omnia-modal .wpcf7-list-item label:has( input:checked ) .wpcf7-list-item-label::before {
	background: var(--omnia-acento);
	border-color: var(--omnia-acento);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 11px;
	background-position: center;
	background-repeat: no-repeat;
}

/* Foco visible con teclado */
.omnia-modal .wpcf7-list-item label:has( input:focus-visible ) {
	outline: 2px solid var(--omnia-acento);
	outline-offset: 2px;
}

/*
 * Respaldo sin :has(): se muestra la casilla real en lugar de la
 * pastilla decorativa. Menos bonito, pero el usuario ve que ha marcado.
 */
@supports not selector(:has(*)) {

	.omnia-modal .wpcf7-list-item .wpcf7-list-item-label::before {
		display: none;
	}

	.omnia-modal .wpcf7-list-item input[type="checkbox"],
	.omnia-modal .wpcf7-list-item input[type="radio"] {
		position: static;
		width: 16px;
		height: 16px;
		margin: 0;
		opacity: 1;
		accent-color: var(--omnia-acento);
	}
}

/* --- Subida de archivo --- */

.omnia-modal input[type="file"] {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 14px;
	background: var(--omnia-suave);
	border: 1.5px dashed var(--omnia-borde);
	border-radius: 9px;
	font-family: var(--omnia-font-textos);
	font-size: 13px;
	color: var(--omnia-texto);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.omnia-modal input[type="file"]:hover {
	border-color: var(--omnia-acento);
	background: color-mix(in srgb, var(--omnia-acento) 4%, white);
}

.omnia-modal input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	background: var(--omnia-primario);
	border: 0;
	border-radius: 6px;
	font-family: var(--omnia-font-titulos);
	font-size: 12px;
	font-weight: 600;
	color: var(--omnia-blanco);
	cursor: pointer;
	transition: background-color 160ms ease;
}

.omnia-modal input[type="file"]::file-selector-button:hover {
	background: var(--omnia-acento);
}

/* --- Aceptacion de privacidad --- */

.omnia-modal .wpcf7-acceptance {
	display: block;
	margin-top: 4px;
}

.omnia-modal .wpcf7-acceptance .wpcf7-list-item label {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--omnia-texto);
	align-items: flex-start;
}

.omnia-modal .wpcf7-acceptance .wpcf7-list-item label:has( input:checked ) {
	background: transparent;
	color: var(--omnia-texto);
}

.omnia-modal .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
	position: static;
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	flex-shrink: 0;
	opacity: 1;
	accent-color: var(--omnia-acento);
}

/* La aceptacion no lleva la pastilla decorativa */
.omnia-modal .wpcf7-acceptance .wpcf7-list-item-label::before {
	display: none;
}

.omnia-modal .wpcf7-acceptance a {
	color: var(--omnia-acento);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Boton de enviar --- */

.omnia-modal input[type="submit"],
.omnia-modal .wpcf7-submit {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 16px 20px;
	background: var(--omnia-primario);
	border: 0;
	border-radius: 10px;
	font-family: var(--omnia-font-titulos);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--omnia-blanco);
	cursor: pointer;
	transition: background-color 180ms ease;
}

.omnia-modal input[type="submit"]:hover,
.omnia-modal .wpcf7-submit:hover {
	background: var(--omnia-acento);
}

.omnia-modal input[type="submit"]:disabled {
	background: var(--omnia-gris-texto);
	cursor: wait;
}

/* --- Mensajes y validacion --- */

.omnia-modal .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #C0392B;
}

.omnia-modal .wpcf7-not-valid {
	border-color: #C0392B !important;
}

.omnia-modal .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 13px 16px !important;
	border: 1px solid !important;
	border-radius: 9px !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
}

.omnia-modal form.sent .wpcf7-response-output {
	background: #EDF6E6;
	border-color: #CBE3B5 !important;
	color: #3D6321;
}

.omnia-modal form.invalid .wpcf7-response-output,
.omnia-modal form.failed .wpcf7-response-output,
.omnia-modal form.aborted .wpcf7-response-output {
	background: #FBEBEA;
	border-color: #F0C4C0 !important;
	color: #9B2C22;
}

/* Indicador de envio */
.omnia-modal .wpcf7-spinner {
	margin: 10px auto 0;
	display: block;
}


/* ==========================================================================
   14b. RESPONSIVE DEL MODAL
   ========================================================================== */

@media (max-width: 640px) {

	.omnia-modal {
		padding: 0;
		align-items: flex-end;
	}

	/* A pantalla casi completa, entrando desde abajo */
	.omnia-modal__panel {
		width: 100%;
		max-height: 94vh;
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
	}

	.omnia-modal.is-abierto .omnia-modal__panel {
		transform: none;
	}

	.omnia-modal__cabecera {
		padding: 20px 20px 16px;
	}

	.omnia-modal__titulo {
		font-size: 18px;
	}

	.omnia-modal__cuerpo {
		padding: 18px 20px 24px;
	}

	/* Evitar el zoom automatico de iOS al enfocar un campo */
	.omnia-modal input[type="text"],
	.omnia-modal input[type="email"],
	.omnia-modal input[type="tel"],
	.omnia-modal input[type="number"],
	.omnia-modal select,
	.omnia-modal textarea {
		font-size: 16px;
	}

	.omnia-personalizar {
		padding: 14px;
		gap: 12px;
	}

	.omnia-personalizar__icono {
		width: 38px;
		height: 38px;
	}
}

/* Sin animacion si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {

	.omnia-modal__panel,
	.omnia-modal__overlay,
	.omnia-personalizar,
	.omnia-personalizar__flecha {
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   15. BARRA STICKY DE PRODUCTO (Astra)
   --------------------------------------------------------------------------
   Estructura real:
     .ast-sticky-add-to-cart
       └ .ast-container
           └ .ast-sticky-add-to-cart-content
               ├ .ast-sticky-add-to-cart-title-wrap   (img + titulo)
               └ .ast-sticky-add-to-cart-action-wrap  (precio + boton)

   La pinta Astra. Aqui se le da el estilo del tema y se oculta al
   llegar al footer (lo hace el JS anadiendo .omnia-oculta).
   ========================================================================== */

.ast-sticky-add-to-cart {
	background: var(--omnia-fondo);
	border-top: 1px solid var(--omnia-borde);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, .07);
	transition: transform 280ms cubic-bezier(.4, 0, .2, 1),
	            opacity 220ms ease,
	            visibility 280ms;
}

/*
 * Al llegar al footer. Se baja en lugar de solo ocultarla, para que la
 * salida se vea como un movimiento y no como un parpadeo.
 */
.ast-sticky-add-to-cart.omnia-oculta {
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ast-sticky-add-to-cart .ast-container {
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 0 var(--omnia-gutter);
}

.ast-sticky-add-to-cart-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 12px 0;
}

/* --- Miniatura y titulo --- */

.ast-sticky-add-to-cart-title-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

/*
 * La imagen viene con width/height del tamano omnia_card (600x750), y
 * sin object-fit saldria deformada al encajarla en un cuadro pequeno.
 */
.ast-sticky-add-to-cart-title-wrap img {
	width: 46px;
	height: 58px;
	flex: none;
	object-fit: cover;
	border-radius: 8px;
	background: var(--omnia-suave);
}

.ast-sticky-add-to-cart-title {
	font-family: var(--omnia-font-titulos);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--omnia-primario);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Precio y boton --- */

.ast-sticky-add-to-cart-action-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
}

.ast-sticky-add-to-cart-action-price,
.ast-sticky-add-to-cart .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	font-family: var(--omnia-font-titulos);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.3;
	color: var(--omnia-primario);
}

.ast-sticky-add-to-cart .woocommerce-Price-amount {
	color: inherit;
}

/* "IVA incl." en gris y mas pequeno, separado de la cifra */
.ast-sticky-add-to-cart .woocommerce-price-suffix {
	margin-left: 2px;
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--omnia-gris-texto);
}

/* Astra deja un <small> vacio al final */
.ast-sticky-add-to-cart .price small:empty {
	display: none;
}

/* --- Boton --- */

/*
 * !important en el radio: Astra declara sus botones con selectores que
 * incluyen un ID, y esa especificidad no se puede igualar desde el tema
 * hijo sin escribir selectores igual de fragiles.
 */
.single_link_to_cart_button {
	border-radius: 10px !important;
}

.ast-sticky-add-to-cart .button,
.ast-sticky-add-to-cart a.button,
.ast-sticky-add-to-cart a.single_link_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	/*
	 * Fondo, color y borde tambien con !important: son las mismas
	 * propiedades que Astra declara para sus botones, y si el radio
	 * necesitaba forzarse, estas tambien.
	 */
	background: var(--omnia-primario) !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-family: var(--omnia-font-titulos);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: var(--omnia-blanco) !important;
	transition: background-color 180ms ease;
}

/*
 * El hover necesita !important porque la regla base lo lleva: sin el,
 * el fondo normal ganaria y el boton no reaccionaria al raton.
 */
.ast-sticky-add-to-cart .button:hover,
.ast-sticky-add-to-cart a.button:hover,
.ast-sticky-add-to-cart a.single_link_to_cart_button:hover {
	background: var(--omnia-acento) !important;
	color: var(--omnia-blanco) !important;
}

.ast-sticky-add-to-cart a.button:focus-visible {
	outline: 2px solid var(--omnia-acento);
	outline-offset: 3px;
}

/* --- Responsive --- */

@media (max-width: 767px) {

	.ast-sticky-add-to-cart-content {
		gap: 12px;
		padding: 10px 0;
	}

	/* El titulo sobra: la foto ya identifica el producto */
	.ast-sticky-add-to-cart-title {
		display: none;
	}

	.ast-sticky-add-to-cart-title-wrap img {
		width: 40px;
		height: 50px;
	}

	.ast-sticky-add-to-cart-action-wrap {
		flex: 1;
		justify-content: flex-end;
		gap: 12px;
	}

	.ast-sticky-add-to-cart-action-price,
	.ast-sticky-add-to-cart .price {
		font-size: 14px;
	}

	.ast-sticky-add-to-cart .woocommerce-price-suffix {
		display: none;
	}

	.ast-sticky-add-to-cart .button,
	.ast-sticky-add-to-cart a.button {
		padding: 13px 18px;
		font-size: 12.5px;
	}
}

@media (max-width: 420px) {

	/* Solo precio y boton: la miniatura no cabe */
	.ast-sticky-add-to-cart-title-wrap {
		display: none;
	}

	.ast-sticky-add-to-cart-content {
		justify-content: space-between;
	}

	.ast-sticky-add-to-cart .button,
	.ast-sticky-add-to-cart a.button {
		flex: 1;
	}
}

/* Sin animacion si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {

	.ast-sticky-add-to-cart {
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   16. PAGINA DE CATEGORIA
   --------------------------------------------------------------------------
   Cabecera, pastillas de subcategoria, barra de filtros y banner.
   Sigue la maqueta "Categoria.dc.html".
   ========================================================================== */

/* --- Cabecera --- */

.omnia-cat-cabecera {
	padding: 48px 0 36px;
	background: var(--omnia-suave);
	border-bottom: 1px solid var(--omnia-borde);
}

/* Con imagen: texto en blanco sobre la foto */
.omnia-cat-cabecera--imagen {
	min-height: 260px;
	display: flex;
	align-items: flex-end;
	padding: 60px 0 40px;
	background-size: cover;
	background-position: center;
	border-bottom: 0;
	color: var(--omnia-blanco);
}

.omnia-cat-cabecera__inner {
	width: 100%;
}

.omnia-cat-cabecera__titulo {
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(32px, 4.6vw, 56px);
	font-weight: 600;
	line-height: .98;
	letter-spacing: -.035em;
	color: var(--omnia-primario);
	text-wrap: balance;
}

.omnia-cat-cabecera--imagen .omnia-cat-cabecera__titulo {
	color: var(--omnia-blanco);
}

.omnia-cat-cabecera__desc {
	max-width: 62ch;
	margin: 14px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--omnia-texto);
}

.omnia-cat-cabecera--imagen .omnia-cat-cabecera__desc {
	color: rgba(255, 255, 255, .88);
}

.omnia-cat-cabecera__desc p:last-child {
	margin-bottom: 0;
}


/* --- Pastillas de subcategoria --- */

.omnia-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
}

.omnia-subcat {
	padding: 9px 16px;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 100px;
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 600;
	color: #3A372F;
	text-decoration: none;
	transition: border-color 160ms ease,
	            background-color 160ms ease,
	            color 160ms ease;
}

.omnia-subcat:hover,
.omnia-subcat:focus-visible {
	border-color: var(--omnia-primario);
	color: var(--omnia-primario);
}

.omnia-subcat.is-activa {
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	color: var(--omnia-blanco);
}


/* ==========================================================================
   16a. MAQUETACION: FILTROS + REJILLA
   ========================================================================== */

.omnia-catalogo {
	max-width: var(--omnia-ancho);
	margin: 0 auto;
	padding: 28px var(--omnia-gutter) 20px;
}

/*
 * Con filtros: dos columnas. minmax(0,1fr) en la segunda para que la
 * rejilla de productos pueda encoger y no desborde.
 */
.omnia-catalogo--filtros {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.omnia-catalogo__main {
	min-width: 0;
}


/* ==========================================================================
   16b. BARRA DE FILTROS
   ========================================================================== */

.omnia-filtros {
	position: sticky;
	top: 96px;
	align-self: start;
}

.omnia-filtros__cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.omnia-filtros__titulo {
	flex: 1;
	margin: 0;
	font-family: var(--omnia-font-titulos);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--omnia-primario);
}

.omnia-filtros__limpiar {
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--omnia-acento);
	text-decoration: none;
}

.omnia-filtros__limpiar:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* El boton de cerrar solo se usa en movil */
.omnia-filtros__cerrar {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: -8px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--omnia-primario);
	cursor: pointer;
}

/* Capa oscura tras el panel en movil */
.omnia-filtros__overlay {
	display: none;
}


/* --- Grupo de filtro --- */

.omnia-filtro {
	border-top: 1px solid var(--omnia-borde);
}

.omnia-filtro:last-of-type {
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-filtro__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--omnia-primario);
	cursor: pointer;
	list-style: none;
	transition: color 160ms ease;
}

.omnia-filtro__titulo::-webkit-details-marker {
	display: none;
}

.omnia-filtro__titulo::marker {
	content: "";
}

.omnia-filtro__titulo:hover {
	color: var(--omnia-acento);
}

/* Signo + que gira a - al abrir */
.omnia-filtro__mas {
	position: relative;
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	color: var(--omnia-gris-texto);
}

.omnia-filtro__mas::before,
.omnia-filtro__mas::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	margin-top: -.75px;
	background: currentColor;
	transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
}

.omnia-filtro__mas::after {
	transform: rotate(90deg);
}

.omnia-filtro[open] .omnia-filtro__mas::after {
	transform: rotate(0deg);
}

.omnia-filtro__opciones {
	padding-bottom: 14px;
}


/* --- Opciones: lista con casillas --- */

.omnia-filtro__opcion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--omnia-texto);
	text-decoration: none;
	transition: color 160ms ease;
}

.omnia-filtro__opcion:hover {
	color: var(--omnia-primario);
}

.omnia-filtro__casilla {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 4px;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.omnia-filtro__opcion:hover .omnia-filtro__casilla {
	border-color: var(--omnia-gris-texto);
}

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

.omnia-filtro__opcion.is-activo .omnia-filtro__casilla {
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 11px;
	background-position: center;
	background-repeat: no-repeat;
}

.omnia-filtro__label {
	flex: 1;
	min-width: 0;
}

.omnia-filtro__count {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--omnia-gris-texto);
}


/* --- Opciones: pastillas --- */

.omnia-filtro__opciones--pildora {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.omnia-filtro__pildora {
	padding: 8px 14px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 8px;
	font-family: var(--omnia-font-titulos);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--omnia-texto);
	text-decoration: none;
	transition: border-color 160ms ease,
	            background-color 160ms ease,
	            color 160ms ease;
}

.omnia-filtro__pildora:hover {
	border-color: var(--omnia-gris-texto);
	color: var(--omnia-primario);
}

.omnia-filtro__pildora.is-activo {
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	color: var(--omnia-blanco);
}


/* --- Opciones: circulos de color --- */

.omnia-filtro__opciones--color {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.omnia-filtro__color {
	position: relative;
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--omnia-suave);
	box-shadow: 0 0 0 1px var(--omnia-borde);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.omnia-filtro__color:hover {
	transform: scale(1.1);
}

.omnia-filtro__color.is-activo {
	box-shadow: 0 0 0 2px var(--omnia-primario);
}

/* Marca de seleccion sobre el circulo */
.omnia-filtro__color.is-activo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 13px;
	background-position: center;
	background-repeat: no-repeat;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
}


/* ==========================================================================
   16c. BARRA DE RESULTADOS
   ========================================================================== */

.omnia-catalogo-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.omnia-catalogo-barra__izq {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.omnia-catalogo-barra__total {
	font-family: var(--omnia-font-textos);
	font-size: 13px;
	font-weight: 600;
	color: var(--omnia-gris-texto);
}

/* --- Columna derecha: selector de orden --- */

.omnia-catalogo-barra__der {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

/*
 * El form de Woo trae float y margin propios. Aqui se anulan para que
 * viva dentro del flex de la barra.
 */
.woocommerce .omnia-catalogo-barra__der .woocommerce-ordering,
.woocommerce-page .omnia-catalogo-barra__der .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 12px;
	float: none !important;
	margin: 0 !important;
}

/* Etiqueta "Ordenar por" delante del desplegable. */
.omnia-catalogo-barra__der .woocommerce-ordering::before {
	content: "Ordenar por";
	font-family: var(--omnia-font-textos);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--omnia-gris-texto);
}

.woocommerce .omnia-catalogo-barra__der .woocommerce-ordering select.orderby {
	min-width: 190px;
	padding: 11px 38px 11px 16px;
	font-family: var(--omnia-font-textos);
	font-size: 14px;
	font-weight: 500;
	color: var(--omnia-primario);
	background-color: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
	cursor: pointer;
}

.woocommerce .omnia-catalogo-barra__der .woocommerce-ordering select.orderby:focus-visible {
	border-color: var(--omnia-primario);
	outline: none;
}

@media (max-width: 600px) {

	.omnia-catalogo-barra__der {
		width: 100%;
		margin-left: 0;
	}

	.woocommerce .omnia-catalogo-barra__der .woocommerce-ordering,
	.woocommerce-page .omnia-catalogo-barra__der .woocommerce-ordering {
		width: 100%;
	}

	.woocommerce .omnia-catalogo-barra__der .woocommerce-ordering select.orderby {
		flex: 1;
		min-width: 0;
	}
}

/* Boton de abrir filtros: solo en movil */
.omnia-filtros-abrir {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	border-radius: 8px;
	font-family: var(--omnia-font-titulos);
	font-size: 13px;
	font-weight: 600;
	color: var(--omnia-primario);
	cursor: pointer;
}

.omnia-filtros-abrir__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--omnia-acento);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--omnia-blanco);
}

/* --- Chips de filtros activos --- */

.omnia-chips-activos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.omnia-chip-activo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	background: var(--omnia-suave);
	border: 1px solid var(--omnia-borde);
	border-radius: 100px;
	font-family: var(--omnia-font-textos);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--omnia-primario);
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease;
}

.omnia-chip-activo:hover {
	border-color: var(--omnia-acento);
	color: var(--omnia-acento);
}

.omnia-chip-activo span[aria-hidden] {
	font-size: 15px;
	line-height: 1;
	opacity: .6;
}

/*
 * Barra de resultados y orden.
 *
 * WooCommerce saca .woocommerce-ordering a la derecha con float, y
 * Astra lo refuerza. Con float, la rejilla de productos sube y se
 * solapa con el desplegable. Se anula con !important y se coloca todo
 * en una fila flex.
 */
.omnia-catalogo__main .omnia-barra-resultados {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
}

.woocommerce .omnia-catalogo__main .woocommerce-ordering,
.woocommerce-page .omnia-catalogo__main .woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
}

.woocommerce .omnia-catalogo__main .woocommerce-result-count,
.woocommerce-page .omnia-catalogo__main .woocommerce-result-count {
	float: none !important;
	margin: 0 !important;
}

/*
 * La rejilla siempre debajo de la barra: clear corta cualquier float
 * que se escape de Woo o de Astra.
 */
.woocommerce .omnia-catalogo__main ul.products,
.woocommerce-page .omnia-catalogo__main ul.products {
	clear: both;
	margin-top: 0;
}


/* ==========================================================================
   16d. BANNER INFERIOR
   ========================================================================== */

.omnia-cat-banner {
	margin-top: 44px;
	background: var(--omnia-suave);
}

.omnia-cat-banner__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 60px var(--omnia-gutter);
}

.omnia-cat-banner__titulo {
	margin: 0 0 18px;
	font-family: var(--omnia-font-titulos);
	font-size: clamp(24px, 3vw, 28px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--omnia-primario);
	text-wrap: balance;
}

.omnia-cat-banner__texto {
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	line-height: 1.7;
	color: var(--omnia-texto);
}

.omnia-cat-banner__texto p {
	margin: 0 0 14px;
}

.omnia-cat-banner__texto p:last-child {
	margin-bottom: 0;
}

.omnia-cat-banner .omnia-botones {
	margin-top: 24px;
}


/* ==========================================================================
   16e. RESPONSIVE DEL CATALOGO
   ========================================================================== */

@media (max-width: 1100px) {

	.omnia-catalogo--filtros {
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 28px;
	}
}

@media (max-width: 900px) {

	/*
	 * Los filtros pasan a un panel lateral que se abre con un boton.
	 * En una columna estrecha ocuparian toda la pantalla antes de que
	 * se vea un solo producto.
	 */
	.omnia-catalogo--filtros {
		display: block;
	}

	.omnia-filtros-abrir {
		display: inline-flex;
	}

	.omnia-filtros {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 300;
		width: min(320px, 88vw);
		padding: 20px;
		background: var(--omnia-fondo);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-100%);
		transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
	}

	.omnia-filtros.is-abierto {
		transform: none;
	}

	.omnia-filtros__cerrar {
		display: flex;
	}

	.omnia-filtros__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 290;
		background: rgba(27, 25, 23, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 250ms ease, visibility 250ms;
	}

	.omnia-filtros__overlay.is-visible {
		opacity: 1;
		visibility: visible;
	}

	.omnia-cat-cabecera {
		padding: 34px 0 26px;
	}

	.omnia-cat-cabecera--imagen {
		min-height: 200px;
		padding: 44px 0 30px;
	}
}

@media (max-width: 640px) {

	.omnia-catalogo {
		padding-top: 20px;
	}

	.omnia-subcats {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-right: calc(var(--omnia-gutter) * -1);
		padding-right: var(--omnia-gutter);
	}

	.omnia-subcats::-webkit-scrollbar {
		display: none;
	}

	.omnia-subcat {
		flex: none;
	}

	.omnia-catalogo-barra {
		gap: 12px;
	}

	.omnia-cat-banner__inner {
		padding: 40px var(--omnia-gutter);
	}
}

/* Sin animacion si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {

	.omnia-filtros,
	.omnia-filtros__overlay,
	.omnia-filtro__mas::before,
	.omnia-filtro__mas::after {
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   16. CATALOGO: SIN BARRA LATERAL DE ASTRA
   --------------------------------------------------------------------------
   Astra pinta su sidebar con el widget de categorias, y compite con la
   columna de filtros del tema: quedan dos barras laterales.

   El filtro astra_page_layout ya la quita en PHP; esto es la red de
   seguridad por si algun ajuste del Customizer la reactiva.
   ========================================================================== */

.woocommerce-shop #secondary,
.tax-product_cat #secondary,
.woocommerce-shop .widget-area,
.tax-product_cat .widget-area {
	display: none;
}

/* Sin sidebar, el contenido ocupa todo el ancho */
.woocommerce-shop #primary,
.tax-product_cat #primary {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   17. TARJETAS DEL CATALOGO DENTRO DE LA REJILLA CON FILTROS
   --------------------------------------------------------------------------
   Astra envuelve el contenido de cada tarjeta en .astra-shop-summary-wrap
   y a veces oculta titulo o precio segun los ajustes del Customizer
   (WooCommerce > Catalogo de productos > Estructura).

   Aqui se fuerza que se vean, con el estilo del tema.
   ========================================================================== */

.woocommerce .omnia-catalogo__main ul.products li.product .astra-shop-summary-wrap,
.woocommerce .omnia-catalogo__main ul.products li.product .woocommerce-loop-product__title,
.woocommerce .omnia-catalogo__main ul.products li.product .price,
.woocommerce .omnia-catalogo__main ul.products li.product .omnia-producto__categoria {
	display: block !important;
	visibility: visible !important;
}

/* Nombre del producto */
.woocommerce .omnia-catalogo__main ul.products li.product .woocommerce-loop-product__title,
.woocommerce .omnia-catalogo__main ul.products li.product h2.woocommerce-loop-product__title {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-family: var(--omnia-font-titulos);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--omnia-primario);
}

/* Antetitulo de categoria */
.woocommerce .omnia-catalogo__main ul.products li.product .omnia-producto__categoria {
	margin-bottom: 6px;
	font-family: var(--omnia-font-textos);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--omnia-gris-texto);
}

/* Precio */
.woocommerce .omnia-catalogo__main ul.products li.product .price {
	margin: 0 0 18px !important;
	font-family: var(--omnia-font-titulos);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--omnia-primario);
}

.woocommerce .omnia-catalogo__main ul.products li.product .price .woocommerce-price-suffix {
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--omnia-gris-texto);
}

/* --- Paginacion centrada --- */

/*
 * Woo la saca con float y Astra la alinea a la izquierda. Con flex
 * queda centrada bajo la rejilla, ocupando todo el ancho.
 */
.woocommerce .omnia-catalogo__main nav.woocommerce-pagination,
.woocommerce-page .omnia-catalogo__main nav.woocommerce-pagination {
	clear: both;
	float: none !important;
	width: 100%;
	margin: 40px 0 0;
	text-align: center;
}

.woocommerce .omnia-catalogo__main nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 auto;
	padding: 0;
	border: 0;
}

/* Banda de titulo de Astra en el catalogo: el tema ya tiene su cabecera */
.woocommerce-shop .ast-archive-description,
.tax-product_cat .ast-archive-description,
.woocommerce-shop .ast-archive-title,
.tax-product_cat .ast-archive-title,
.woocommerce-shop .page-header,
.tax-product_cat .page-header {
	display: none;
}

/* ==========================================================================
   TOPES FINALES
   --------------------------------------------------------------------------
   Van al final del archivo a proposito: son anulaciones de estilos que
   Astra inyecta en linea y que, por orden de cascada, ganarian.
   ========================================================================== */

/*
 * El header del tema no lleva linea inferior.
 *
 * Astra pinta un border-bottom en .main-header-bar y en
 * .ast-primary-header-bar desde su CSS inline (con media query propia),
 * asi que hace falta !important para retirarlo del todo.
 */
.omnia-header,
.omnia-header--transparente,
.omnia-header--transparente.is-scrolled,
.main-header-bar,
.ast-primary-header-bar,
.ast-header-break-point .main-header-bar,
.ast-header-break-point .ast-primary-header-bar {
	border-bottom: 0 !important;
}

/*
 * Rango tipografico 400-600.
 *
 * Astra define pesos 700 en linea para titulos y botones. Se recortan
 * aqui para que ningun elemento se salga del rango del diseno.
 */
.omnia-header h1,
.omnia-header h2,
.omnia-header h3,
h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.ast-site-header-cart .ast-woo-header-cart-info-wrap,
.widget-title,
.wp-block-heading {
	font-weight: 600;
}

/* ==========================================================================
   BLOQUE DE CONTACTO
   --------------------------------------------------------------------------
   Dos columnas: formulario y datos. Debajo, el mapa a ancho completo.
   ========================================================================== */

.omnia-contacto__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* Con un solo lado, no se deja a media anchura. */
.omnia-contacto__grid--una {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
}

.omnia-contacto__subtitulo {
	margin: 0 0 22px;
	font-family: var(--omnia-font-titulos);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--omnia-primario);
}

/* --- Formulario --- */

.omnia-contacto__form-inner {
	padding: 32px;
	background: var(--omnia-suave);
	border-radius: 10px;
}

/*
 * Contact Form 7 no trae estilos propios: hereda del tema. Aqui se le da
 * el mismo aspecto que al resto de campos del sitio (filtros, buscador).
 *
 * Se estilan los tipos de campo por separado en lugar de usar un selector
 * global, para no pisar los botones ni las casillas.
 */
.omnia-contacto__form-inner input[type="text"],
.omnia-contacto__form-inner input[type="email"],
.omnia-contacto__form-inner input[type="tel"],
.omnia-contacto__form-inner input[type="url"],
.omnia-contacto__form-inner input[type="number"],
.omnia-contacto__form-inner input[type="date"],
.omnia-contacto__form-inner select,
.omnia-contacto__form-inner textarea {
	width: 100%;
	padding: 13px 16px;
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	font-weight: 400;
	color: var(--omnia-primario);
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
	transition: border-color var(--omnia-trans);
}

.omnia-contacto__form-inner textarea {
	min-height: 140px;
	resize: vertical;
}

.omnia-contacto__form-inner input:focus,
.omnia-contacto__form-inner select:focus,
.omnia-contacto__form-inner textarea:focus {
	border-color: var(--omnia-primario);
	outline: none;
}

.omnia-contacto__form-inner input::placeholder,
.omnia-contacto__form-inner textarea::placeholder {
	color: var(--omnia-gris-texto);
	opacity: .75;
}

/* Etiquetas: en CF7 suelen envolver al campo. */
.omnia-contacto__form-inner label {
	display: block;
	margin-bottom: 16px;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--omnia-primario);
}

.omnia-contacto__form-inner label .wpcf7-form-control-wrap {
	display: block;
	margin-top: 7px;
}

/* Boton de envio: mismo aspecto que los botones del tema. */
.omnia-contacto__form-inner input[type="submit"],
.omnia-contacto__form-inner button[type="submit"] {
	width: auto;
	padding: 14px 30px;
	font-family: var(--omnia-font-textos);
	font-size: 14px;
	font-weight: 600;
	color: var(--omnia-blanco);
	background: var(--omnia-primario);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity var(--omnia-trans);
}

.omnia-contacto__form-inner input[type="submit"]:hover,
.omnia-contacto__form-inner button[type="submit"]:hover {
	opacity: .88;
}

/* Casillas de aceptacion: en linea con su texto. */
.omnia-contacto__form-inner .wpcf7-acceptance label,
.omnia-contacto__form-inner .wpcf7-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	font-weight: 400;
}

.omnia-contacto__form-inner .wpcf7-acceptance input[type="checkbox"],
.omnia-contacto__form-inner .wpcf7-checkbox input[type="checkbox"] {
	width: auto;
	margin-top: 2px;
	flex: none;
}

/* Avisos de CF7 (error, enviado): sin el borde grueso por defecto. */
.omnia-contacto__form-inner .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 13px 16px;
	font-size: 14px;
	border-width: 1px;
	border-radius: 10px;
}

.omnia-contacto__form-inner .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 400;
}

/* --- Columna de datos --- */

.omnia-contacto__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.omnia-contacto__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--omnia-borde);
}

.omnia-contacto__item:first-child {
	padding-top: 0;
}

.omnia-contacto__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.omnia-contacto__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	color: var(--omnia-primario);
	background: var(--omnia-suave);
	border-radius: 10px;
}

.omnia-contacto__texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding-top: 2px;
}

.omnia-contacto__label {
	font-family: var(--omnia-font-textos);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--omnia-gris-texto);
}

.omnia-contacto__texto a,
.omnia-contacto__texto span:not(.omnia-contacto__label) {
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--omnia-primario);
	text-decoration: none;
}

.omnia-contacto__texto a:hover,
.omnia-contacto__texto a:focus-visible {
	color: var(--omnia-acento);
	text-decoration: underline;
}

/* --- Mapa --- */

.omnia-contacto__mapa {
	margin-top: 48px;
	overflow: hidden;
	background: var(--omnia-suave);
	border-radius: 10px;
	line-height: 0;
}

.omnia-contacto__mapa iframe {
	display: block;
	width: 100%;
	height: var(--omnia-mapa-alto, 420px);
	border: 0;
}

/* --- Responsive --- */

@media (max-width: 900px) {

	.omnia-contacto__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.omnia-contacto__mapa {
		margin-top: 40px;
	}
}

@media (max-width: 600px) {

	.omnia-contacto__form-inner {
		padding: 22px 18px;
	}

	.omnia-contacto__form-inner input[type="submit"],
	.omnia-contacto__form-inner button[type="submit"] {
		width: 100%;
	}

	.omnia-contacto__mapa iframe {
		height: min(var(--omnia-mapa-alto, 420px), 320px);
	}
}

/* ==========================================================================
   MI CUENTA: SOLICITUD DE CUENTA DE EMPRESA
   --------------------------------------------------------------------------
   El boton reutiliza .omnia-personalizar de la ficha de producto. Aqui
   solo se separa del texto del escritorio, que no lleva margen inferior.
   ========================================================================== */

.omnia-personalizar--cuenta {
	margin-top: 28px;
	margin-bottom: 0;
}

/*
 * Astra estiliza los <button> del area de cuenta con su color de marca.
 * Se recupera el aspecto del boton del tema.
 */
.woocommerce-account .woocommerce-MyAccount-content button.omnia-personalizar--cuenta {
	background: var(--omnia-fondo);
	border: 1.5px solid var(--omnia-borde);
	color: var(--omnia-primario);
}

.woocommerce-account .woocommerce-MyAccount-content button.omnia-personalizar--cuenta:hover,
.woocommerce-account .woocommerce-MyAccount-content button.omnia-personalizar--cuenta:focus-visible {
	background: var(--omnia-suave);
	border-color: var(--omnia-primario);
	color: var(--omnia-primario);
}

/*
 * El formulario dentro del modal: mismos campos que el bloque de
 * contacto, para que los dos formularios del sitio se lean igual.
 */
.omnia-modal__cuerpo input[type="text"],
.omnia-modal__cuerpo input[type="email"],
.omnia-modal__cuerpo input[type="tel"],
.omnia-modal__cuerpo input[type="url"],
.omnia-modal__cuerpo input[type="number"],
.omnia-modal__cuerpo select,
.omnia-modal__cuerpo textarea {
	width: 100%;
	padding: 12px 15px;
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	font-weight: 400;
	color: var(--omnia-primario);
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
	transition: border-color var(--omnia-trans);
}

.omnia-modal__cuerpo textarea {
	min-height: 110px;
	resize: vertical;
}

.omnia-modal__cuerpo input:focus,
.omnia-modal__cuerpo select:focus,
.omnia-modal__cuerpo textarea:focus {
	border-color: var(--omnia-primario);
	outline: none;
}

.omnia-modal__cuerpo label {
	display: block;
	margin-bottom: 14px;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--omnia-primario);
}

.omnia-modal__cuerpo label .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.omnia-modal__cuerpo input[type="submit"],
.omnia-modal__cuerpo button[type="submit"] {
	width: 100%;
	padding: 14px 30px;
	font-family: var(--omnia-font-textos);
	font-size: 14px;
	font-weight: 600;
	color: var(--omnia-blanco);
	background: var(--omnia-primario);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity var(--omnia-trans);
}

.omnia-modal__cuerpo input[type="submit"]:hover,
.omnia-modal__cuerpo button[type="submit"]:hover {
	opacity: .88;
}

.omnia-modal__cuerpo .wpcf7-acceptance label,
.omnia-modal__cuerpo .wpcf7-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	font-weight: 400;
}

.omnia-modal__cuerpo .wpcf7-acceptance input[type="checkbox"],
.omnia-modal__cuerpo .wpcf7-checkbox input[type="checkbox"] {
	width: auto;
	margin-top: 2px;
	flex: none;
}

.omnia-modal__cuerpo .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 15px;
	font-size: 14px;
	border-width: 1px;
	border-radius: 10px;
}

.omnia-modal__cuerpo .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Boton de cuenta de empresa en el footer

   Version compacta del boton del escritorio de Mi cuenta: en el footer
   la tarjeta grande desentonaria. Colores en claro, sobre el fondo
   oscuro del pie.
   -------------------------------------------------------------------------- */

.omnia-footer__empresa {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
	padding: 11px 17px;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	color: var(--omnia-blanco);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.omnia-footer__empresa:hover,
.omnia-footer__empresa:focus-visible {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .55);
	color: var(--omnia-blanco);
}

.omnia-footer__empresa svg {
	flex: none;
}

@media (max-width: 544px) {

	.omnia-footer__empresa {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   MI CUENTA
   --------------------------------------------------------------------------
   Astra no estiliza estas pantallas: quedan con el aspecto por defecto de
   WooCommerce (enlaces azules, tablas con bordes gruesos, botones de otro
   color). Aqui se alinean con el resto del sitio.

   Cubre: escritorio, pedidos, descargas, direcciones, detalles de cuenta,
   login y registro.
   ========================================================================== */

/* --- Contenedor y titulo --- */

.woocommerce-account .entry-header,
.woocommerce-account .entry-title {
	margin-bottom: 34px;
}

.woocommerce-account .entry-title {
	font-family: var(--omnia-font-titulos);
	font-size: clamp(30px, 4vw, 40px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--omnia-primario);
}

/*
 * Dos columnas: navegacion estrecha y contenido flexible.
 * minmax(0,1fr) evita que las tablas de pedidos desborden la columna.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

@media (min-width: 800px) {

	/*
	 * Dos columnas. Se usa flex en el contenedor de Woo en lugar de
	 * grid con :has(), porque el selector depende de que el markup
	 * interno no cambie. Con flex basta con fijar el ancho de la
	 * navegacion y dejar que el contenido ocupe el resto.
	 */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 0 0 260px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.woocommerce-account .entry-content > .woocommerce,
	.woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content {
		min-width: 0;
	}

	/*
	 * Solo cuando hay sesion iniciada: en login y registro no existe la
	 * navegacion lateral y el flex descolocaria las dos cajas.
	 */
	.woocommerce-account.logged-in .entry-content > .woocommerce {
		display: flex;
		gap: 48px;
		align-items: flex-start;
	}
}

/* --- Navegacion lateral --- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--omnia-borde);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 18px;
	font-family: var(--omnia-font-textos);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--omnia-primario);
	text-decoration: none;
	transition: background-color var(--omnia-trans), color var(--omnia-trans);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--omnia-suave);
	color: var(--omnia-primario);
}

/* Pagina actual: barra lateral en color de acento. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background: var(--omnia-suave);
	box-shadow: inset 3px 0 0 var(--omnia-primario);
	font-weight: 600;
}

/* "Salir" se separa del resto: es una accion, no una seccion. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--omnia-gris-texto);
}

/* --- Contenido --- */

.woocommerce-account .woocommerce-MyAccount-content {
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	line-height: 1.65;
	color: var(--omnia-texto);
}

.woocommerce-account .woocommerce-MyAccount-content p {
	margin: 0 0 16px;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.omnia-personalizar) {
	color: var(--omnia-primario);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--omnia-trans);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.omnia-personalizar):hover {
	color: var(--omnia-acento);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: 32px 0 16px;
	font-family: var(--omnia-font-titulos);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--omnia-primario);
}

.woocommerce-account .woocommerce-MyAccount-content h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content h3:first-child {
	margin-top: 0;
}

/* --- Tablas: pedidos, descargas --- */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	padding: 14px 16px;
	font-family: var(--omnia-font-textos);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--omnia-gris-texto);
	background: var(--omnia-suave);
	border: 0;
	border-bottom: 1px solid var(--omnia-borde);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 16px;
	font-size: 14.5px;
	color: var(--omnia-primario);
	background: var(--omnia-fondo);
	border: 0;
	border-bottom: 1px solid var(--omnia-borde);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td {
	border-bottom: 0;
}

/* --- Direcciones --- */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 8px;
}

.woocommerce-account .woocommerce-Address {
	width: auto !important;
	float: none !important;
	padding: 22px;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 16px;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--omnia-texto);
}

/* --- Formularios: login, registro, detalles de cuenta --- */

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--omnia-font-textos);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--omnia-primario);
}

.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	padding: 12px 15px;
	font-family: var(--omnia-font-textos);
	font-size: 15px;
	font-weight: 400;
	color: var(--omnia-primario);
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
	transition: border-color var(--omnia-trans);
}

.woocommerce-account .woocommerce input:focus,
.woocommerce-account .woocommerce select:focus,
.woocommerce-account .woocommerce textarea:focus {
	border-color: var(--omnia-primario);
	outline: none;
}

/* El ojo de "mostrar contrasena" queda dentro del campo. */
.woocommerce-account .woocommerce .password-input {
	display: block;
	width: 100%;
}

.woocommerce-account .woocommerce .show-password-input {
	top: 13px;
	right: 14px;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
}

.woocommerce-account .woocommerce-form__input-checkbox {
	width: auto;
	margin: 0;
	flex: none;
}

.woocommerce-account em,
.woocommerce-account .woocommerce-password-hint {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-style: normal;
	color: var(--omnia-gris-texto);
}

/* --- Botones --- */

.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	font-family: var(--omnia-font-textos);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--omnia-blanco);
	background: var(--omnia-primario);
	border: 1px solid var(--omnia-primario);
	border-radius: 10px;
	transition: opacity var(--omnia-trans);
}

.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce button[type="submit"]:hover {
	background: var(--omnia-primario);
	border-color: var(--omnia-primario);
	color: var(--omnia-blanco);
	opacity: .88;
}

/* Acciones secundarias de las tablas: version en contorno. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button,
.woocommerce-account .woocommerce-Address .edit {
	padding: 8px 16px;
	font-size: 13px;
	color: var(--omnia-primario);
	background: transparent;
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button:hover,
.woocommerce-account .woocommerce-Address .edit:hover {
	background: var(--omnia-suave);
	border-color: var(--omnia-primario);
	color: var(--omnia-primario);
	opacity: 1;
}

/* --- Avisos --- */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	padding: 15px 18px;
	font-size: 14.5px;
	background: var(--omnia-suave);
	border: 1px solid var(--omnia-borde);
	border-top-width: 1px;
	border-radius: 10px;
	color: var(--omnia-primario);
}

.woocommerce-account .woocommerce-error {
	background: rgba(194, 65, 12, .06);
	border-color: rgba(194, 65, 12, .3);
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
	display: none;
}

.woocommerce-account .woocommerce-error li {
	margin: 0;
	list-style: none;
}

/* --- Login y registro --- */

.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce-account .woocommerce > .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
}

/*
 * Clearfix de WooCommerce. En un contenedor grid o flex los ::before y
 * ::after cuentan como items y generan una celda vacia que descoloca las
 * columnas.
 */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce .u-columns::before,
.woocommerce .u-columns::after,
.woocommerce-page .u-columns::before,
.woocommerce-page .u-columns::after {
	display: none;
}

.woocommerce-account .woocommerce > .u-columns > .col-1,
.woocommerce-account .woocommerce > .u-columns > .col-2,
.woocommerce-account .woocommerce > .col2-set > .col-1,
.woocommerce-account .woocommerce > .col2-set > .col-2 {
	width: auto !important;
	float: none !important;
	padding: 30px;
	background: var(--omnia-fondo);
	border: 1px solid var(--omnia-borde);
	border-radius: 10px;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce-account .woocommerce-LostPassword {
	margin-top: 14px;
	font-size: 13.5px;
}

/* --- Responsive --- */

@media (max-width: 799px) {

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 28px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
		display: block;
		overflow-x: auto;
	}
}

@media (max-width: 544px) {

	.woocommerce-account .woocommerce .button,
	.woocommerce-account .woocommerce button.button,
	.woocommerce-account .woocommerce input.button,
	.woocommerce-account .woocommerce button[type="submit"] {
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button,
	.woocommerce-account .woocommerce-Address .edit {
		width: auto;
	}

	.woocommerce-account .woocommerce > .u-columns > .col-1,
	.woocommerce-account .woocommerce > .u-columns > .col-2,
	.woocommerce-account .woocommerce > .col2-set > .col-1,
	.woocommerce-account .woocommerce > .col2-set > .col-2 {
		padding: 22px 18px;
	}
}

/* ==========================================================================
   BUSCADOR (plugin Omnia Search)
   --------------------------------------------------------------------------
   El formulario, el overlay y la lupa los pinta el plugin. El tema solo
   reserva el hueco en la fila de acciones del header y en el bloque de
   la home, para que el shortcode se alinee con el resto.

   ========================================================================== */

/*
 * Hueco en el header.
 *
 * Sin position ni z-index propios: el plugin ya pinta su overlay con
 * position:fixed y z-index 99999, y cualquier capa extra aqui lo
 * atraparia. Por eso no se usa la clase .omnia-accion, aunque si se
 * copian sus 44x44 px para que la lupa ocupe lo mismo que los iconos
 * de cuenta y carrito y los tres queden alineados.
 *
 * El tamano del icono no se toca aqui: lo controla el plugin desde
 * Omnia Search > Apariencia > Tamano de la lupa.
 */
.omnia-header__buscador {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

/*
 * Nota sobre el overlay del plugin.
 *
 * .omnia-header crea contexto de apilamiento (position:relative +
 * z-index:50, y position:sticky al hacer scroll), y el overlay del
 * plugin vive dentro. En teoria quedaria encerrado en esa capa, pero
 * en la practica se ve correctamente: comprobado con el header normal
 * y en modo sticky.
 *
 * Se probo neutralizar el z-index del header con :has() mientras el
 * buscador esta abierto. No hacia falta y se retiro.
 *
 * Lo que si es necesario es box-sizing:border-box en .omnia-search *
 * (reset, al principio del archivo). Sin el, el panel se calcula sin
 * descontar el padding del overlay, se desborda y no llega a verse.
 */

/*
 * Bloque de la home.
 *
 * Aqui conviene el modo "barra siempre visible" del plugin, que no crea
 * overlay: el buscador se ve de entrada, que es el sentido de tenerlo
 * en la portada.
 */
.omnia-buscador-bloque {
	max-width: 680px;
	margin: 0 auto;
}

.omnia-buscador-bloque .omnia-search {
	width: 100%;
}

/* En modo lupa el disparador se centra en lugar de quedar a la izquierda. */
.omnia-buscador-bloque .omnia-search--icon,
.omnia-buscador-bloque .omnia-search--inline {
	display: flex;
	justify-content: center;
}

/* Las pildoras siguen siendo del tema. */
.omnia-bloque-buscador .omnia-chips {
	margin-top: 20px;
}

/* ==========================================================================
   FICHA DE PRODUCTO EN MOVIL
   --------------------------------------------------------------------------
   La ficha se monta como grid de dos columnas con filas asignadas a mano
   (galeria en la 1, pestanas en la 2, ficha tecnica en la 3). En pantallas
   estrechas ese reparto no vale: las dos columnas no caben y las filas
   fijas hacen que el acordeon se pinte sobre el bloque de compra.

   Aqui el grid pasa a una sola columna y las filas vuelven a asignarse
   solas, respetando el orden del documento.
   ========================================================================== */

@media (max-width: 900px) {

	.woocommerce div.product,
	.woocommerce-page div.product,
	.single-product .woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px;
		padding: 14px var(--omnia-gutter) 32px;
	}

	/*
	 * Se anulan columna y fila fijas. Sin esto la galeria seguiria
	 * reclamando la columna 1 y el resumen la 2, que ya no existe.
	 */
	.woocommerce div.product > .omnia-galeria,
	.woocommerce div.product > .woocommerce-product-gallery,
	.woocommerce div.product > .summary,
	.woocommerce div.product > div.summary {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	/*
	 * Las secciones de ancho completo dejan de tener fila asignada: con
	 * grid-row 2 y 3 fijas se superponian al resumen, que ahora ocupa
	 * mas alto al ir a una columna. Es la causa del solapamiento.
	 */
	.woocommerce div.product > .woocommerce-tabs,
	.woocommerce div.product > .omnia-acordeon,
	.woocommerce div.product > .omnia-ficha,
	.woocommerce div.product > .related,
	.woocommerce div.product > .upsells {
		grid-row: auto !important;
	}

	/*
	 * El sticky de la galeria se desactiva: en movil la columna ocupa
	 * todo el ancho y quedaria fija tapando el contenido al hacer scroll.
	 *
	 * Ademas pasa de fila (imagen + columna de thumbs al lado) a columna
	 * (imagen arriba, thumbs debajo en fila horizontal). En fila las
	 * miniaturas de 74px robaban ancho a la imagen y el conjunto se salia
	 * de la pantalla.
	 */
	.omnia-galeria__sticky {
		position: static;
		top: auto;
		flex-direction: column;
		align-items: stretch;
	}

	/* La imagen principal ocupa todo el ancho disponible. */
	.omnia-galeria__principal {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	/*
	 * Miniaturas en fila horizontal bajo la imagen, con scroll lateral.
	 * La columna vertical de escritorio no cabe en movil.
	 */
	.omnia-galeria__thumbs {
		flex-direction: row;
		width: 100%;
		max-width: 100%;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 8px;
		padding-bottom: 4px;
	}

	.omnia-galeria__thumb {
		flex: 0 0 auto;
		width: 62px;
		height: 62px;
	}

	/*
	 * Salvaguarda contra desbordes horizontales en movil.
	 *
	 * Va en :root y no en body para no romper position:sticky, que deja
	 * de funcionar si un ancestro tiene overflow distinto de visible. En
	 * el elemento raiz no afecta a los sticky de dentro.
	 *
	 * Corta cualquier elemento que se salga por los lados (una imagen sin
	 * max-width, una tabla ancha, un embed) y evita el scroll horizontal
	 * de toda la pagina.
	 */
	:root {
		overflow-x: hidden;
	}

	img,
	video,
	iframe,
	table {
		max-width: 100%;
	}
}

@media (max-width: 600px) {

	.woocommerce div.product,
	.woocommerce-page div.product,
	.single-product .woocommerce div.product {
		gap: 22px;
	}

	/*
	 * Precio y titulo bajan de tamano: a 40px el precio ocupaba dos
	 * lineas en pantallas de 360px.
	 */
	.woocommerce div.product .product_title {
		font-size: clamp(24px, 7vw, 30px);
	}

	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 26px;
	}

	/* Las variaciones de color pasan a rejilla flexible. */
	.woocommerce div.product .variations td,
	.woocommerce div.product .variations th {
		display: block;
		width: 100%;
		padding: 0;
	}

	.woocommerce div.product .variations label {
		margin-bottom: 8px;
	}

	/* Cantidad y "Anadir al carrito" en la misma fila. */
	.woocommerce div.product form.cart {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: stretch;
	}

	.woocommerce div.product form.cart .quantity {
		flex: 0 0 auto;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Acordeon: menos aire lateral para ganar ancho de lectura. */
	.omnia-acordeon__titulo,
	.omnia-acordeon__cuerpo {
		padding-left: 0;
		padding-right: 0;
	}
}