/*
Theme Name: Organic
Theme URI: https://organic.jhonnyduque.com
Author: Jhonny Duque
Author URI: https://jhonnyduque.com
Description: Tema de bloques de demostración. Maqueta de e-commerce mayorista (B2B) de frutas, verduras, granos y conservas, construida sin page builders ni frameworks de terceros: WordPress y WooCommerce nativos. Los datos de la tienda son ficticios.
Version: 2.4.16
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: organic
Tags: full-site-editing, block-templates, e-commerce, wide-blocks, block-patterns
*/

/*
 * En un tema de bloques la mayor parte del estilo vive en theme.json.
 * Este archivo queda para lo que theme.json todavía no cubre: estados
 * de interacción, utilidades y componentes de WooCommerce.
 *
 * Regla del proyecto: ningún color, tamaño o espaciado literal aquí.
 * Todo sale de los tokens que theme.json expone como var(--wp--preset--*).
 */

/* ------------------------------------------------------------------
   1. BASE
   ------------------------------------------------------------------ */

/* Red de seguridad: nada puede abrir desplazamiento horizontal en móvil.
   "clip" (no "hidden") para no romper la cabecera fija (position: sticky). */
html,
body {
	overflow-x: clip;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* La sombra del foco la gobierna theme.json, pero el navegador necesita
   que el contorno no se recorte en elementos con overflow. */
:where(a, button, input, select, textarea):focus-visible {
	outline-offset: 2px;
}

/* Solo se oculta el foco para quien navega con ratón. */
:where(a, button):focus:not(:focus-visible) {
	outline: none;
}

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

/* ------------------------------------------------------------------
   2. ACCESIBILIDAD
   ------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--wp--preset--spacing--4);
	left: var(--wp--preset--spacing--4);
	z-index: 100000;
	width: auto;
	height: auto;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	clip-path: none;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--forest-dark);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--md);
	text-decoration: none;
}

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

/* ------------------------------------------------------------------
   3. TRANSICIONES DE BOTONES Y ENLACES
   theme.json define los colores de :hover, pero no la transición.
   ------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition--base),
	            color var(--wp--custom--transition--base);
}

a {
	transition: color var(--wp--custom--transition--base);
}

/* ------------------------------------------------------------------
   4. FICHA DE PRODUCTO (WooCommerce)
   WooCommerce imprime formularios y pestañas con clases propias que
   theme.json no alcanza. Aquí se alinean con los tokens.
   ------------------------------------------------------------------ */

/* Galería: esquinas redondeadas y fondo papel mientras carga la foto. */
.organic-pdp .woocommerce-product-gallery__image,
.organic-pdp .woocommerce-product-gallery__image img,
.organic-pdp .flex-viewport {
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

/* Sin la lupa de WooCommerce sobre la foto. El lightbox se mantiene: tocar
   la foto abre la misma pantalla completa (script en functions.php), y con
   teclado se abre con Enter sobre la foto. La lupa es absoluta: no deja hueco. */
.organic-pdp .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	display: none;
}

.organic-pdp .woocommerce-product-gallery__image {
	cursor: zoom-in;
}

.organic-pdp .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--wp--preset--spacing--3);
	margin-top: 18px;
	padding: 0;
	list-style: none;
}

/* Cada miniatura ocupa su celda de la cuadrícula. WooCommerce les da
   width:25% y float con un selector de mucho peso (4 clases y 3 etiquetas):
   dentro de la celda de ~76 px quedaban en ~19 px. Solo aquí, !important. */
.organic-pdp .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
}

.organic-pdp .flex-control-thumbs img {
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--wp--preset--color--linea);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--wp--custom--transition--base);
}

.organic-pdp .flex-control-thumbs img.flex-active,
.organic-pdp .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--wp--preset--color--forest);
}

/* En escritorio la columna de compra acompaña el scroll de la galería. */
@media (min-width: 782px) {
	.organic-pdp__compra {
		position: sticky;
		top: var(--wp--preset--spacing--6);
		align-self: flex-start;
	}
}

/* Precio */
.organic-pdp .wp-block-woocommerce-product-price .price,
.organic-pdp .wp-block-woocommerce-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--forest-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

/* En el bloque Precio de producto, WooCommerce imprime <del> e <ins>
   directamente: se cubren tanto ese marcado como el clásico con .price. */
.organic-pdp .price:has(del),
.organic-pdp .wp-block-woocommerce-product-price:has(del) {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.organic-pdp .price del,
.organic-pdp .wp-block-woocommerce-product-price del,
.organic-pdp .wc-block-components-product-price__regular {
	order: 1;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: line-through;
}

.organic-pdp .price ins,
.organic-pdp .wp-block-woocommerce-product-price ins,
.organic-pdp .wc-block-components-product-price__value.is-discounted {
	order: 2;
	color: var(--wp--preset--color--error);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.05;
	text-decoration: none;
}

.organic-pdp .price del .woocommerce-Price-amount,
.organic-pdp .wp-block-woocommerce-product-price del .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

/* Selector de variación (presentación, calibre…) */
.organic-pdp table.variations {
	width: 100%;
	border: 0;
	margin-bottom: var(--wp--preset--spacing--4);
}

.organic-pdp table.variations tbody {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--3);
}

.organic-pdp table.variations tr {
	display: block;
	min-width: 0;
}

.organic-pdp table.variations th,
.organic-pdp table.variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.organic-pdp table.variations th label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--forest-dark);
}

.organic-pdp table.variations select,
.organic-pdp .quantity input.qty {
	min-height: 48px;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
}

.organic-pdp table.variations select {
	width: 100%;
}

.organic-pdp table.variations select:focus,
.organic-pdp .quantity input.qty:focus {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--forest);
}

.organic-pdp .reset_variations {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* Cantidad + botón en una fila; el botón ocupa el resto. */
.organic-pdp form.cart:not(.variations_form),
.organic-pdp .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	align-items: stretch;
}

.organic-pdp .quantity input.qty {
	width: 136px;
	text-align: center;
}

.organic-pdp .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	flex: 1 1 12rem;
	min-height: 48px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--citrus);
	color: var(--wp--preset--color--forest-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.organic-pdp .single_add_to_cart_button svg {
	flex: 0 0 auto;
}

.organic-pdp .single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--citrus-dark);
}

.organic-pdp .single_add_to_cart_button:disabled,
.organic-pdp .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.organic-pdp .woocommerce-variation-price {
	margin-bottom: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--forest-dark);
}

.organic-pdp .stock {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--success);
}

.organic-pdp .stock.out-of-stock {
	color: var(--wp--preset--color--error);
}

/* Bloque de confianza junto al botón. Color de texto explícito: el grupo
   tiene color de borde y WordPress le añade la clase has-border-color;
   el texto nunca debe depender de eso. */
.organic-compra-info,
.organic-compra-info p,
.organic-compra-info strong {
	color: var(--wp--preset--color--ink);
}

.organic-compra-info {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--4) !important;
	margin-bottom: var(--wp--preset--spacing--4) !important;
	padding: var(--wp--preset--spacing--4) !important;
}

.organic-compra-info__item--contacto {
	grid-column: 1 / -1;
}

.organic-compra-info a {
	color: var(--wp--preset--color--forest);
	font-weight: 600;
}

.organic-compra-info__item {
	margin: 0;
	padding-left: var(--wp--preset--spacing--5);
	position: relative;
	line-height: 1.5;
}

.organic-compra-info__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--forest);
}

/* ---------- Ficha 2.4.7: cabecera, chips, equivalencia y total ----------
   Todo lo de este bloque lo monta assets/js/ficha.js. Sin JavaScript no
   existe ninguno de estos elementos y la ficha es exactamente la de 2.4.6.

   Organic vende por presentación comercial completa. Ningún control de
   esta sección permite elegir kilos: la equivalencia es solo referencia. */

.organic-pdp__cabecera {
	margin-bottom: var(--wp--preset--spacing--2);
}

.organic-pdp__cabecera > * {
	margin: 0;
}

.organic-pdp__ref {
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.organic-pdp__entrada {
	margin-top: var(--wp--preset--spacing--3) !important;
	margin-bottom: 0 !important;
	line-height: 1.55;
	text-wrap: pretty;
}

/* Equivalencia por kilo: referencia para comparar proveedores, no unidad
   de compra. Va pegada al precio, en texto menor y apagado, y sin ningún
   control asociado. Lo que se compra es la presentación completa. */
.organic-pdp__equivalencia {
	order: 3;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* El <select> nativo se oculta con posición absoluta, nunca con
   display:none: así sigue enviándose con el formulario, enfocándose y
   siendo legible por lector de pantalla. Los chips son una capa encima,
   no un reemplazo. De esto depende el funcionamiento sin JavaScript. */
.organic-select-oculto {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0 !important;
}

.organic-chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--2);
}

.organic-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	min-height: 50px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--3);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--forest-dark);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--linea);
	font-family: var(--wp--preset--font-family--heading);
	text-align: left;
	cursor: pointer;
	transition: box-shadow var(--wp--custom--transition--base),
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.organic-chip:hover {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--forest);
}

.organic-chip.is-activo {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

.organic-chip.is-agotado {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--muted);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
	cursor: not-allowed;
	text-decoration: line-through;
}

.organic-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

.organic-chip__valor {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.organic-chip__pie {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	opacity: 0.85;
}

/* ---------- Altura de la cabecera fija ----------
   105 px en escritorio (32 de franja promocional + 73 de fila principal);
   73 px por debajo de 781 px, donde la franja se va con el scroll. El valor
   ya estaba implícito en el comentario de la media query de la cabecera;
   aquí se declara una sola vez para que el sticky pueda usarlo. */
:root {
	--organic-header-alto: 105px;
}

@media (max-width: 781px) {
	:root {
		--organic-header-alto: 73px;
	}
}

/* La columna de compra se anclaba a 32 px del borde del viewport, es decir
   73 px POR DEBAJO del borde inferior de la cabecera fija: al hacer scroll,
   el título del producto quedaba tapado. Se ancla bajo la cabecera, con la
   barra de administración sumada cuando existe. */
@media (min-width: 782px) {
	.organic-pdp__compra {
		top: calc(
			var(--wp-admin--admin-bar--height, 0px) +
			var(--organic-header-alto) +
			var(--wp--preset--spacing--5)
		);
	}
}

/* ---------- Rótulos de las dos cifras ----------
   La ficha muestra dos importes que con cantidad 1 son idénticos. Sin
   nombrarlos, el segundo se lee como repetición del primero. El rótulo del
   precio se declina con la presentación real: "Precio por caja",
   "Precio por saco". */
.organic-pdp__rotulo-precio {
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--ambar);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* ---------- Compactación vertical ----------
   Del precio al botón había ~350 px: en un portátil de 768 px de alto el
   CTA quedaba fuera de la primera pantalla. */
/* El rótulo aporta el aire superior del grupo: el precio se pega a él. */
.organic-pdp .wp-block-woocommerce-product-price {
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--4) !important;
}

/* Con un solo atributo de variación, la rejilla fija de dos columnas dejaba
   el selector —y con él los chips— en la mitad del ancho disponible: a
   1024 px cada chip quedaba en 54 px. Con auto-fit, un atributo ocupa todo
   el ancho y dos se reparten, sin caso especial ni media query. */
.organic-pdp table.variations tbody {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.organic-pdp table.variations {
	margin-bottom: var(--wp--preset--spacing--2);
}

/* "Limpiar" ocupaba una fila entera bajo los chips para un enlace
   secundario. Sube a la línea del rótulo del atributo, donde pertenece.
   Lo mueve ficha.js y solo con un atributo: con dos, un único enlace al
   lado del primer rótulo daría a entender que limpia solo ese. */
.organic-pdp table.variations th {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
}

.organic-pdp table.variations th label {
	margin-bottom: var(--wp--preset--spacing--2);
}

.organic-pdp .reset_variations {
	margin-top: 0;
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	white-space: nowrap;
}

/* El contenedor de variación se colapsa SOLO cuando de verdad está vacío.
   La clase la pone assets/js/ficha.js tras cada evento de WooCommerce y la
   retira en cuanto entra cualquier contenido, así que el precio de la
   variación, la disponibilidad, la descripción y el aviso de combinación
   inexistente se siguen mostrando siempre. Nunca se oculta el contenedor
   padre ni el bloque de compra. */
.organic-pdp .woocommerce-variation.is-vacio {
	display: none !important;
}

.organic-pdp .woocommerce-variation:not(.is-vacio) {
	margin-bottom: var(--wp--preset--spacing--2);
}

/* ---------- Caja de compra ----------
   Reúne disponibilidad, cantidad, total y acción en un solo contenedor.
   En variables la caja es .single_variation_wrap, que es el elemento que
   WooCommerce muestra y oculta con slideDown/slideUp: conservar ahí el
   display por defecto evita que su estilo en línea pelee con el nuestro.
   El grid va dentro, en .woocommerce-variation-add-to-cart, que WooCommerce
   solo gobierna por clase. */
.organic-pdp .single_variation_wrap,
.organic-pdp form.cart:not(.variations_form) {
	box-sizing: border-box;
	margin-top: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

.organic-pdp .woocommerce-variation-add-to-cart,
.organic-pdp form.cart:not(.variations_form) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	align-items: center;
}

.organic-pdp .quantity.organic-qty-ficha {
	grid-column: 1;
}

/* Total del pedido: último dato antes de actuar. Sube entre la cantidad y
   el botón, dentro de form.cart, para que se lea antes del clic y no
   después. Rótulo encima de la cifra: cabe igual a 375 px que a 1440. */
.organic-pdp__total {
	display: flex;
	grid-column: 2;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin: 0;
	justify-self: end;
	text-align: right;
}

.organic-pdp__total-rotulo {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.2;
}

.organic-pdp__total-cifra {
	color: var(--wp--preset--color--forest-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	white-space: nowrap;
}

/* ---------- Botón ----------
   Ancho completo bajo cantidad y total: gana jerarquía por peso y posición,
   sin cambiar ningún color. Radio 10, como el resto del sistema; la píldora
   queda para etiquetas y chips. */
.organic-pdp .single_add_to_cart_button {
	grid-column: 1 / -1;
	width: 100%;
	flex: none;
	height: 52px;
	min-height: 52px;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color var(--wp--custom--transition--base),
		transform 100ms ease;
}

/* WooCommerce Blocks fija el CTA en la segunda columna con un selector más
   específico. Este override limitado al PDP restablece la fila completa. */
.organic-pdp .wp-block-woocommerce-add-to-cart-form .variations_button > .single_add_to_cart_button,
.organic-pdp .wp-block-woocommerce-add-to-cart-form form.cart > .single_add_to_cart_button {
	grid-column: 1 / -1;
	justify-self: stretch;
}

.organic-pdp .single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

.organic-pdp .single_add_to_cart_button:active {
	transform: scale(0.98);
}

/* Deshabilitado: la opacidad 0.45 dejaba el texto en 3,5:1, por debajo de
   AA. Se apaga con superficie propia, que además lo distingue de un botón
   a medio cargar. */
.organic-pdp .single_add_to_cart_button:disabled,
.organic-pdp .single_add_to_cart_button.disabled,
.organic-pdp .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	opacity: 1;
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--muted);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
	cursor: not-allowed;
}

.organic-pdp .single_add_to_cart_button:disabled:hover,
.organic-pdp .single_add_to_cart_button.disabled:hover {
	background-color: var(--wp--preset--color--paper);
}

/* Disponibilidad dentro de la caja, con el mismo lenguaje que los chips. */
.organic-pdp .woocommerce-variation-availability .stock,
.organic-pdp form.cart .stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.organic-pdp .woocommerce-variation-availability .stock::before,
.organic-pdp form.cart .stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--wp--custom--radius--pill);
	background: currentColor;
}

/* Hechos de venta y asesoría (patterns/ficha-hechos.php). Sustituyen en la
   ficha al bloque de confianza de 210 px por tres chips de 32 px y una
   fila. El patrón organic/compra-info sigue disponible para otras páginas. */
.organic-ficha-hechos__chip {
	display: inline-flex;
	align-items: center;
	height: 32px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.organic-ficha-asesoria {
	margin: var(--wp--preset--spacing--3) 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.organic-ficha-asesoria a {
	color: var(--wp--preset--color--forest);
	font-weight: 600;
	display: inline-block;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.organic-pdp table.variations tbody {
		grid-template-columns: minmax(0, 1fr);
	}

	.organic-chips {
		gap: var(--wp--preset--spacing--1);
	}

	.organic-pdp form.cart:not(.variations_form),
	.organic-pdp .woocommerce-variation-add-to-cart {
		flex-wrap: nowrap;
	}

	/* El botón compartía fila con la cantidad y a 600 px se reducía a un
	   icono para que cupieran los dos. Ahora ocupa su propia fila dentro de
	   la caja de compra: recupera ancho completo y texto visible, que es lo
	   que un CTA necesita en móvil. */
	.organic-pdp .single_add_to_cart_button.organic-pdp__add {
		flex: none;
		width: 100%;
		padding: 0 var(--wp--preset--spacing--4);
	}

	.organic-pdp__add-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
}

/* Pestañas: descripción e información adicional */
.woocommerce-tabs .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--5);
	margin: 0 0 var(--wp--preset--spacing--6);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.woocommerce-tabs .wc-tabs li a {
	display: block;
	padding: var(--wp--preset--spacing--3) 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.woocommerce-tabs .wc-tabs li.active a,
.woocommerce-tabs .wc-tabs li a:hover {
	color: var(--wp--preset--color--forest-dark);
	border-bottom-color: var(--wp--preset--color--citrus);
}

.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-bottom: 1px solid var(--wp--preset--color--linea);
	text-align: left;
	vertical-align: top;
}

.woocommerce-product-attributes th {
	width: 30%;
	font-weight: 600;
	color: var(--wp--preset--color--forest-dark);
}

.woocommerce-product-attributes td p {
	margin: 0;
}

/* ------------------------------------------------------------------
   5. PORTADA (hero)
   ------------------------------------------------------------------ */

/* El <picture> hereda la posición absoluta de la clase del bloque;
   la imagen interior es la que debe cubrir el área. */
.organic-hero__picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.organic-hero .wp-block-cover__inner-container {
	z-index: 2;
}

.organic-hero h1 {
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Botón secundario claro sobre fondo oscuro */
.organic-boton-claro .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--white);
	background: transparent;
	color: var(--wp--preset--color--white);
}

.organic-boton-claro .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--forest-dark);
}

/* Móvil: la imagen 4:5 tiene el cielo arriba; el texto va arriba y el
   degradado pasa a ser vertical para que se lea sobre la foto. */
@media (max-width: 781px) {
	.organic-hero {
		min-height: 88vh !important;
		align-items: flex-start !important;
		padding-top: var(--wp--preset--spacing--8) !important;
	}

	.organic-hero .wp-block-cover__gradient-background {
		background: linear-gradient(180deg, rgba(19, 47, 34, 0.9) 0%, rgba(19, 47, 34, 0.6) 45%, rgba(19, 47, 34, 0) 75%) !important;
	}

	.organic-hero h1 {
		font-size: var(--wp--preset--font-size--xxxl);
	}
}

/* ------------------------------------------------------------------
   6. CABECERA
   La parte "header" completa (franja superior + fila principal) queda
   fija al hacer scroll. Es además el contexto de posición del panel
   del mega menú, que se abre a todo el ancho justo debajo.
   ------------------------------------------------------------------ */

.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* ---------- Franja promocional (patterns/topbar-promos.php) ---------- */
.organic-promos-bar {
	background: var(--wp--preset--color--promo);
	color: var(--wp--preset--color--white);
}

.organic-promos-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--5);
}

.organic-promos-bar__ventana {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 92%, transparent 100%);
}

.organic-promos-bar__pista {
	display: flex;
	width: max-content;
	animation: organic-promos-bar 34s linear infinite;
}

.organic-promos-bar__ventana:hover .organic-promos-bar__pista {
	animation-play-state: paused;
}

.organic-promos-bar__grupo {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.organic-promos-bar__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	height: 32px;
	padding-right: var(--wp--preset--spacing--7);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.organic-promos-bar__item svg {
	flex: 0 0 auto;
	opacity: 0.92;
}

.organic-promos-bar__tel {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 32px;
	white-space: nowrap;
}

.organic-promos-bar__tel a,
.organic-promos-bar__tel a:visited {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.organic-promos-bar__tel a:hover,
.organic-promos-bar__tel a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@keyframes organic-promos-bar {
	to { transform: translateX(-50%); }
}

@media (max-width: 600px) {
	.organic-promos-bar__inner {
		gap: var(--wp--preset--spacing--3);
		padding: 0 var(--wp--preset--spacing--4);
	}

	.organic-promos-bar__item {
		padding-right: var(--wp--preset--spacing--5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.organic-promos-bar__pista {
		animation: none;
	}
}

/* La marca es lo único que puede encoger: los iconos y el menú mantienen
   su tamaño táctil y el nombre pasa a dos líneas antes de desbordar. */
.organic-header__marca {
	flex: 0 1 auto;
	min-width: 0;
}

.organic-header__marca .wp-block-site-title {
	min-width: 0;
	white-space: nowrap;
}

.organic-header__acciones {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-left: auto;
}

.organic-header__acciones > * {
	margin: 0 !important;
}

/* Iconos de la cabecera: área táctil mínima de 44 px */
.organic-header__acciones .wp-block-search__button,
.organic-header__acciones .wc-block-customer-account a,
.organic-header__acciones .wc-block-mini-cart__button {
	box-sizing: border-box;
	width: 44px;
	padding: 0;
	border-radius: var(--wp--custom--radius--md);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--forest-dark);
}

.organic-header__acciones .wp-block-search__button svg,
.organic-header__acciones .wc-block-customer-account svg,
.organic-header__acciones .wc-block-mini-cart__button svg {
	width: 22px;
	height: 22px;
}

/* Compatibilidad con el selector de WooCommerce usado por el bloque actual. */
.organic-header__acciones .wc-block-customer-account a {
	min-width: 44px;
}

.organic-header__acciones .wp-block-search__button {
	border: 0;
	background: transparent;
	border-radius: var(--wp--custom--radius--md);
}

.organic-header__acciones .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--pill);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--body);
}

.organic-header__buscar.wp-block-search__searchfield-hidden .wp-block-search__input {
	transition: none;
	outline: 0;
	width: 0;
	min-width: 0;
	padding: 0;
	border: 0;
}

.organic-header__buscar.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
	overflow: hidden;
	border: 0;
	box-shadow: none;
}

/* Los tres controles comparten la misma caja visual cuando la búsqueda está
   cerrada; el formulario de búsqueda de WordPress no debe conservar 88 px. */
.organic-header__buscar.wp-block-search__searchfield-hidden {
	width: 44px;
	flex: 0 0 44px;
}

.organic-header__buscar.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper,
.organic-header__acciones .wp-block-woocommerce-customer-account,
.organic-header__acciones .wp-block-woocommerce-mini-cart {
	width: 44px;
	min-width: 44px;
}

.organic-header__acciones .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--citrus);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

/* Cuando el buscador se expande en escritorio reserva su propio ancho dentro
   de la fila; así no invade el logo ni los enlaces del menú. */
@media (min-width: 782px) {
	/* El campo abierto ocupa una segunda línea propia. La fila principal
	   conserva logo, navegación y acciones sin solapamientos. */
	.organic-header:has(.organic-header__buscar:not(.wp-block-search__searchfield-hidden)) {
		padding-bottom: calc(var(--wp--preset--spacing--3) * 2 + 56px) !important;
	}

	.organic-header__fila {
		position: relative;
	}

	.organic-header__buscar:not(.wp-block-search__searchfield-hidden) {
		flex: 0 0 44px;
	}

	.organic-header__buscar:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		position: static;
		width: auto;
	}

	.organic-header__buscar:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		top: calc(100% + var(--wp--preset--spacing--3));
		right: 0;
		box-sizing: border-box;
		width: min(360px, calc(100vw - 32px));
		min-height: 44px;
		z-index: 3;
	}
}

@media (max-width: 960px) {
	.organic-header__fila {
		gap: var(--wp--preset--spacing--2) !important;
	}

	.organic-header__marca {
		flex: 1 1 auto;
	}

	.organic-header__marca .wp-block-site-title {
		font-size: var(--wp--preset--font-size--md);
		white-space: normal;
		line-height: 1.1;
		text-wrap: balance;
	}
}

/* Móvil: 16 px de margen lateral en la cabecera y la cuenta pasa al menú
   lateral (enlace "Mi cuenta"). Quedan menú, marca, buscar y carrito. */
@media (max-width: 600px) {
	.organic-header.has-global-padding {
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
	}

	.organic-header__marca .wp-block-site-title {
		font-size: var(--wp--preset--font-size--base);
	}

	.organic-header__acciones .wp-block-woocommerce-customer-account {
		display: none;
	}
}

/* Móvil: la franja promocional (32 px) se va con el scroll y solo queda fija
   la fila principal: 73 px en vez de 105. */
@media (max-width: 781px) {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > .wp-block-template-part:first-child {
		top: calc(var(--wp-admin--admin-bar--height, 0px) - 32px);
	}

	/* Buscar y carrito forman un grupo: la lupa deja el relleno de botón del
	   tema (32 px por lado, 88 px de ancho) y queda en 44 × 44 como el
	   carrito. Sin separación extra: el aire interior de cada botón (10 y
	   11 px) deja ~21 px entre los dos iconos. */
	.organic-header__acciones {
		gap: 4px !important;
	}

	.organic-header__acciones .wp-block-search__button {
		width: 44px;
		padding: 0;
	}
}

/* Móvil: el campo de búsqueda abierto va en una segunda fila, a lo ancho de
   la cabecera. Antes compartía la fila con la marca: el nombre se reducía a
   0 px y el carrito salía de la pantalla. La lupa sigue en la primera fila;
   la cabecera crece solo mientras la búsqueda está abierta. 16 px de letra
   para que iOS no amplíe la página al escribir. */
@media (max-width: 781px) {
	.organic-header__fila {
		position: relative;
	}

	.organic-header__buscar:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		top: calc(100% + var(--wp--preset--spacing--3));
		right: 0;
		left: 0;
		box-sizing: border-box;
		width: auto;
		min-height: 44px;
		background: var(--wp--preset--color--white);
		/* La talla base es fluida (baja a ~14 px en móvil): 1rem garantiza
		   los 16 px reales que evitan el zoom automático de iOS. */
		font-size: max(1rem, var(--wp--preset--font-size--base));
	}

	.organic-header:has(.organic-header__buscar:not(.wp-block-search__searchfield-hidden)) {
		padding-bottom: calc(var(--wp--preset--spacing--3) * 2 + 44px) !important;
	}
}

/* Por debajo de 601 px la barra de administración de WordPress deja de ser
   fija (se va con el scroll), pero su variable sigue valiendo 46 px: la
   cabecera quedaba pegada a 46 px del borde y dejaba un hueco por el que se
   veía el slider. Aquí la referencia es el borde de la pantalla. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > .wp-block-template-part:first-child {
		top: -32px;
	}
}

@media (max-width: 380px) {
	.organic-header__marca .wp-block-site-title {
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* ---------- Cierre mayorista del inicio (patrón organic/cta-mayorista) ----------
   Fondo verde bosque sólido, entre la sección blanca y el pie (verde oscuro).
   Contraste sobre #1F4B36: blanco 9,9:1; antetítulo cítrico 4,6:1 (14 px en
   negrita). El formulario todavía no envía: el botón está desactivado y el
   aviso lo dice; falta el procesador (ver PENDIENTES.md). */
/* Destino de "Compras al por mayor" (#mayoristas): no queda bajo la
   cabecera fija. */
.organic-cta-mayorista {
	scroll-margin-top: var(--wp--preset--spacing--9);
}

.organic-cta-mayorista__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--8);
	align-items: start;
}

.organic-cta-mayorista__intro > * {
	margin: 0;
}

.organic-cta-mayorista__intro,
.organic-cta-mayorista__texto,
.organic-cta-mayorista__form,
.organic-cta-mayorista__campo label,
.organic-cta-mayorista__aviso {
	color: rgba(255, 255, 255, 0.92);
}

.organic-cta-mayorista__intro h2 {
	color: var(--wp--preset--color--white);
}

.organic-cta-mayorista__kicker {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--citrus);
}

.organic-cta-mayorista__intro h2 {
	margin-top: var(--wp--preset--spacing--3);
	text-wrap: balance;
}

.organic-cta-mayorista__texto {
	margin-top: var(--wp--preset--spacing--4) !important;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
}

.organic-cta-propuesta__kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ambar);
}

.organic-cta-propuesta h2 {
	max-width: 640px;
	margin: var(--wp--preset--spacing--3) auto 0;
	text-wrap: balance;
}

.organic-cta-propuesta__texto {
	max-width: 640px;
	margin: var(--wp--preset--spacing--4) auto 0 !important;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
}

/* Botón deliberadamente distinto al resto del sitio (rojo de marca), para
   que destaque como la única llamada a la propuesta comercial. Al pasar el
   ratón pasa a verde bosque con una elevación suave; en foco de teclado
   usa el mismo efecto, para que no dependa del ratón. */
.organic-cta-propuesta__boton .wp-block-button__link {
	background-color: var(--wp--preset--color--promo);
	color: var(--wp--preset--color--white);
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.organic-cta-propuesta__boton .wp-block-button__link:hover,
.organic-cta-propuesta__boton .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--white);
	transform: translateY(-3px);
	box-shadow: 0 16px 28px rgba(31, 75, 54, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.organic-cta-propuesta__boton .wp-block-button__link {
		transition: background-color 0.3s ease;
	}
	.organic-cta-propuesta__boton .wp-block-button__link:hover,
	.organic-cta-propuesta__boton .wp-block-button__link:focus-visible {
		transform: none;
	}
}

.organic-cta-mayorista__campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
}

.organic-cta-mayorista__campo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	min-width: 0;
}

.organic-cta-mayorista__campo--ancho {
	grid-column: 1 / -1;
}

.organic-cta-mayorista__campo label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* 16 px reales de letra en los campos: iOS no amplía la página al escribir. */
.organic-cta-mayorista__campo input,
.organic-cta-mayorista__campo textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: max(1rem, var(--wp--preset--font-size--base));
}

.organic-cta-mayorista__campo textarea {
	min-height: 120px;
	resize: vertical;
}

/* Texto de ejemplo en gris legible (5,3:1 sobre blanco); Firefox le baja
   la opacidad por defecto. */
.organic-cta-mayorista__campo input::placeholder,
.organic-cta-mayorista__campo textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.organic-cta-mayorista__campo input:focus-visible,
.organic-cta-mayorista__campo textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--citrus);
	outline-offset: 2px;
}

.organic-cta-mayorista__aviso {
	margin: var(--wp--preset--spacing--5) 0 0;
	font-size: var(--wp--preset--font-size--sm);
}

.organic-cta-mayorista__aviso a,
.organic-cta-mayorista__aviso a:hover,
.organic-cta-mayorista__aviso a:visited {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.organic-cta-mayorista__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--4);
}

.organic-cta-mayorista__enviar,
.organic-cta-mayorista__ventas {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--wp--preset--spacing--6);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.organic-cta-mayorista__enviar {
	background: var(--wp--preset--color--citrus);
	color: var(--wp--preset--color--forest-dark);
}

.organic-cta-mayorista__enviar:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.organic-cta-mayorista__ventas,
.organic-cta-mayorista__ventas:visited {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.organic-cta-mayorista__ventas:hover,
.organic-cta-mayorista__ventas:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--forest-dark);
}

@media (max-width: 781px) {
	.organic-cta-mayorista__grid,
	.organic-cta-mayorista__campos {
		grid-template-columns: minmax(0, 1fr);
	}

	.organic-cta-mayorista__grid {
		gap: var(--wp--preset--spacing--6);
	}

	.organic-cta-mayorista__enviar,
	.organic-cta-mayorista__ventas {
		flex: 1 1 100%;
	}
}

/* ---------- Segunda foto del producto al pasar el ratón ----------
   Tarjetas del inicio (organic-card) y del catálogo (bloque de WooCommerce).
   Va encima de la principal, en la misma caja: la tarjeta no cambia de
   tamaño. Solo con ratón; en pantallas táctiles queda en display:none y,
   por la carga diferida, el navegador ni la descarga. Fundido, sin zoom. */
.organic-foto-alt {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.wc-block-components-product-image a:has(> .organic-foto-alt) {
		position: relative;
		display: block;
	}

	.organic-card__media .organic-foto-alt,
	.wc-block-components-product-image .organic-foto-alt {
		display: block;
		position: absolute;
		inset: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		margin: 0;
		/* WooCommerce da 1 px de borde a las imágenes de su bloque que no son
		   la principal: la segunda foto quedaba 2 px más grande que la caja. */
		border: 0;
		padding: 0;
		object-fit: cover;
		opacity: 0;
		transition: opacity 300ms ease;
	}

	.organic-card:hover .organic-foto-alt,
	.wc-block-product:hover .organic-foto-alt {
		opacity: 1;
	}
}

/* En pantallas táctiles las dos fotografías forman un riel horizontal de
   una imagen por pantalla. La primera sigue siendo la portada de la card y
   la segunda puede verse con un gesto lateral, sin cambiar su altura. */
@media (hover: none), (pointer: coarse) {
	.organic-card__media--doble {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
	}

	.organic-card__media--doble::-webkit-scrollbar {
		display: none;
	}

	.organic-card__media--doble .organic-card__img,
	.organic-card__media--doble .organic-foto-alt {
		position: static;
		display: block;
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 1;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.organic-card__media .organic-foto-alt,
	.wc-block-components-product-image .organic-foto-alt {
		transition: none;
	}
}

/* ---------- Sugerencias del buscador (assets/js/buscador.js) ----------
   Lista con foto y nombre bajo el campo. En escritorio cuelga del buscador;
   en móvil, del ancho de la cabecera, bajo el campo de la segunda fila. */
.organic-sugerencias {
	position: absolute;
	z-index: 60;
	top: calc(100% + var(--wp--preset--spacing--2));
	right: 0;
	box-sizing: border-box;
	width: min(360px, calc(100vw - 2 * var(--wp--preset--spacing--4)));
	padding: var(--wp--preset--spacing--2);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--sm);
	text-align: left;
}

.organic-sugerencias[hidden] {
	display: none;
}

.organic-sugerencias__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.organic-sugerencias__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	min-height: 44px;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.3;
	text-decoration: none;
}

.organic-sugerencias__item img {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--md);
	object-fit: cover;
}

.organic-sugerencias__item:hover,
.organic-sugerencias__item.is-activa {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--forest-dark);
}

.organic-sugerencias__vacio {
	margin: 0;
	padding: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.organic-sugerencias__todo {
	display: block;
	margin-top: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--2);
	border-top: 1px solid var(--wp--preset--color--linea);
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.organic-sugerencias__todo:hover {
	color: var(--wp--preset--color--forest-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 782px) {
	.organic-header__buscar {
		position: relative;
	}
}

@media (max-width: 781px) {
	/* El campo abierto va en la segunda fila (posicionado respecto a la
	   fila de la cabecera); la lista, justo debajo y a lo ancho. */
	.organic-sugerencias {
		top: calc(100% + var(--wp--preset--spacing--3) + 44px + var(--wp--preset--spacing--2));
		left: 0;
		width: auto;
	}
}

/* ---------- Marquesina de marcas (patrón organic/marcas) ----------
   Banda blanca entre el cierre mayorista y el pie. Dos grupos iguales de
   logos: la pista se desplaza la mitad de su ancho y vuelve a empezar sin
   que se note (bucle infinito). Los bordes se desvanecen con una máscara de
   transparencia, no con una capa de color. Pausa al pasar el ratón; quieta
   con "reducir movimiento". */
.organic-marcas {
	padding-top: var(--wp--preset--spacing--7);
	padding-bottom: var(--wp--preset--spacing--7);
}

.organic-marcas__titulo,
.organic-marcas__texto {
	box-sizing: border-box;
	margin-right: auto;
	margin-left: auto;
	padding: 0 var(--wp--preset--spacing--5);
}

.organic-marcas__titulo {
	max-width: 760px;
	margin-top: 0;
	margin-bottom: 0;
	text-wrap: balance;
}

.organic-marcas__texto {
	max-width: 680px;
	margin-top: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--6);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
}

.organic-marcas__ventana {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.organic-marcas__pista {
	display: flex;
	width: max-content;
	animation: organic-marcas 36s linear infinite;
}

.organic-marcas__ventana:hover .organic-marcas__pista {
	animation-play-state: paused;
}

.organic-marcas__grupo {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.organic-marcas__logo {
	flex: 0 0 auto;
	padding: 0 var(--wp--preset--spacing--9);
}

.organic-marcas__logo img {
	display: block;
	width: auto;
	height: 72px;
}

@keyframes organic-marcas {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 781px) {
	.organic-marcas {
		padding-top: var(--wp--preset--spacing--6);
		padding-bottom: var(--wp--preset--spacing--6);
	}

	.organic-marcas__logo {
		padding: 0 var(--wp--preset--spacing--6);
	}

	.organic-marcas__logo img {
		height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.organic-marcas__pista {
		animation: none;
	}
}

/* ---------- Favoritos: corazón de las tarjetas (assets/js/favoritos.js) ----------
   Esquina superior derecha, sin círculo visual. Se conserva un blanco táctil
   de 44 × 44 para accesibilidad sin cubrir innecesariamente la fotografía. */
.organic-fav {
	position: absolute;
	z-index: 2;
	top: var(--wp--preset--spacing--2);
	right: var(--wp--preset--spacing--2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--forest);
	cursor: pointer;
	transition: transform var(--wp--custom--transition--base);
}

.organic-fav svg {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
}

/* Aviso para lectores de pantalla ("… se guardó en favoritos"). */
.organic-fav-aviso {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.organic-fav svg path {
	fill: transparent;
	stroke: currentColor;
	transition: fill var(--wp--custom--transition--base);
}

.organic-fav.is-activo {
	color: var(--wp--preset--color--promo);
}

.organic-fav.is-activo svg path {
	fill: currentColor;
}

.organic-fav:active {
	transform: scale(0.92);
}

.organic-fav:focus-visible {
	outline: 3px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

/* ---------- Página pública de favoritos ---------- */
.organic-favoritos__head {
	margin-bottom: var(--wp--preset--spacing--6);
}

.organic-favoritos__head h1,
.organic-favoritos__head p {
	margin: 0;
}

.organic-favoritos__kicker {
	margin-bottom: var(--wp--preset--spacing--2) !important;
	color: var(--wp--preset--color--ambar);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.organic-favoritos__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.organic-favoritos__item {
	display: flex;
	min-width: 0;
}

.organic-favoritos__vacio {
	padding: var(--wp--preset--spacing--8);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	text-align: center;
}

.organic-favoritos__vacio h2,
.organic-favoritos__vacio p {
	margin-top: 0;
}

.organic-favoritos__cta {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--citrus);
	color: var(--wp--preset--color--forest-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 1100px) {
	.organic-favoritos__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.organic-favoritos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--3);
	}

	.organic-favoritos__vacio {
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
	}
}

@media (max-width: 600px) {
	.organic-fav {
		top: 2px;
		right: 2px;
		width: 40px;
		height: 40px;
	}

	.organic-fav svg {
		width: 19px;
		height: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.organic-fav,
	.organic-fav svg path {
		transition: none;
	}

	.organic-fav:active {
		transform: none;
	}
}

/* ---------- Portada: el pie sigue sin hueco a la última sección ----------
   WordPress separa los bloques raíz con el espacio general (24 px): entre
   el cierre de la portada y el pie quedaba una franja del fondo papel. */
.home .wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------
   7. PIE DE PÁGINA
   ------------------------------------------------------------------ */

.organic-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--7);
}

.organic-footer__columns > .wp-block-column {
	min-width: 0;
}

.organic-footer__columns .wp-block-site-title,
.organic-footer__columns .wp-block-site-title a {
	color: var(--wp--preset--color--white);
}

@media (min-width: 782px) {
	.organic-footer__columns .wp-block-site-title {
		white-space: nowrap;
	}
}

.organic-footer__mapa {
	overflow: hidden;
	margin: var(--wp--preset--spacing--3) 0;
	border: 1px solid rgba(198, 208, 198, 0.45);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
}

.organic-footer__mapa iframe {
	display: block;
	width: 100%;
	height: 170px;
	border: 0;
}

@media (max-width: 781px) {
	.organic-footer__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.organic-footer__mapa iframe {
		height: 200px;
	}
}

.organic-pie-lista {
	margin: 0;
	list-style: none;
}

.organic-pie-lista li {
	margin: 0;
}

.organic-pie-lista a {
	display: inline-block;
	padding: var(--wp--preset--spacing--1) 0;
	color: var(--wp--preset--color--footer-text);
	text-decoration: none;
}

.organic-pie-lista a:hover,
.organic-pie-lista a:focus-visible {
	color: var(--wp--preset--color--citrus);
}

footer.wp-block-group a {
	color: var(--wp--preset--color--footer-text);
}

footer.wp-block-group a:hover {
	color: var(--wp--preset--color--citrus);
}

/* ------------------------------------------------------------------
   CAJA DE COMPRA: COLOCACIÓN EXPLÍCITA
   La cantidad y el total comparten la primera fila, el botón ocupa la
   segunda entera, y cualquier otro hijo del formulario —presente o
   futuro— va debajo, nunca en medio.
   ------------------------------------------------------------------ */

.organic-pdp form.cart:not(.variations_form),
.organic-pdp .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--3);
	align-items: center;
}

.organic-pdp form.cart:not(.variations_form) > .quantity,
.organic-pdp .woocommerce-variation-add-to-cart > .quantity {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

.organic-pdp form.cart:not(.variations_form) > .organic-pdp__total,
.organic-pdp .woocommerce-variation-add-to-cart > .organic-pdp__total {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	justify-self: end;
}

.organic-pdp form.cart:not(.variations_form) > .single_add_to_cart_button,
.organic-pdp .woocommerce-variation-add-to-cart > .single_add_to_cart_button {
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	justify-self: stretch;
}

/* Cualquier otro hijo del formulario ocupa el ancho completo por debajo del
   botón. No se oculta ninguno: un aviso de WooCommerce se sigue viendo. */
.organic-pdp form.cart:not(.variations_form) > *:not(.quantity):not(.organic-pdp__total):not(.single_add_to_cart_button),
.organic-pdp .woocommerce-variation-add-to-cart > *:not(.quantity):not(.organic-pdp__total):not(.single_add_to_cart_button) {
	grid-column: 1 / -1;
}

/* Cierre de la demo: reemplaza el formulario de checkout, no el carrito. */
.organic-demo-checkout {
	max-width: 840px;
	margin: var(--wp--preset--spacing--7) auto;
	color: var(--wp--preset--color--forest-dark);
}

.organic-demo-checkout__kicker {
	margin: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ambar);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.organic-demo-checkout h2 {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
}

.organic-demo-checkout__intro {
	max-width: 66ch;
	margin: 0 0 var(--wp--preset--spacing--6);
	color: var(--wp--preset--color--muted);
}

.organic-demo-checkout__resumen {
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

.organic-demo-checkout__resumen h3 {
	margin: 0 0 var(--wp--preset--spacing--4);
}

.organic-demo-checkout__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.organic-demo-checkout__items li,
.organic-demo-checkout__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) 0;
	border-top: 1px solid var(--wp--preset--color--linea);
}

.organic-demo-checkout__producto {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	min-width: 0;
}

.organic-demo-checkout__producto img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--sm);
}

.organic-demo-checkout__producto strong,
.organic-demo-checkout__producto small {
	display: block;
}

.organic-demo-checkout__producto small,
.organic-demo-checkout__nota {
	color: var(--wp--preset--color--muted);
}

.organic-demo-checkout__importe,
.organic-demo-checkout__total strong {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.organic-demo-checkout__total strong {
	font-size: var(--wp--preset--font-size--lg);
}

.organic-demo-checkout__nota {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--sm);
}

.organic-demo-checkout__vacio {
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--lg);
}

.organic-demo-checkout__cierre {
	margin-top: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--forest-dark);
	color: var(--wp--preset--color--white);
}

.organic-demo-checkout__cierre h3 {
	margin: 0 0 var(--wp--preset--spacing--2);
	color: inherit;
	font-size: clamp(22px, 3vw, 30px);
}

.organic-demo-checkout__cierre p {
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--footer-text);
}

.organic-demo-checkout__cta,
.organic-demo-checkout__volver {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-right: var(--wp--preset--spacing--3);
	font-weight: 700;
	text-decoration: none;
}

.organic-demo-checkout__cta {
	padding: 0 var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--citrus);
	color: var(--wp--preset--color--forest-dark);
}

.organic-demo-checkout__cta:hover {
	background: var(--wp--preset--color--citrus-dark);
}

.organic-demo-checkout__volver {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.organic-demo-checkout__cta:focus-visible,
.organic-demo-checkout__volver:focus-visible {
	outline: 3px solid var(--wp--preset--color--citrus);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.organic-demo-checkout {
		margin: var(--wp--preset--spacing--5) auto;
	}

	.organic-demo-checkout__resumen,
	.organic-demo-checkout__cierre {
		padding: var(--wp--preset--spacing--4);
	}

	.organic-demo-checkout__cta,
	.organic-demo-checkout__volver {
		width: 100%;
		margin-right: 0;
	}
}