/*
Theme Name: Almendra Mix
Theme URI: https://almendramix.cl
Description: Tema hijo de Twenty Twenty-Five con la identidad de Almendra Mix:
             paleta oficial, tipografías autoalojadas y ajustes de tienda.
Author: Apollo TI
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.1
Text Domain: almendramix
*/

/* La configuración vive en theme.json. Acá solo van los detalles que el editor
   de bloques no cubre. */

/* --- Logo: la insignia es alta, se limita para que no domine el header --- */
.wp-block-site-logo img {
	max-height: 96px;
	width: auto;
}

/* --- Precios de WooCommerce ---------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--wp--preset--color--verde-bosque);
	font-family: var(--wp--preset--font-family--titulos);
}

.woocommerce div.product p.price {
	font-size: var(--wp--preset--font-size--large);
}

/* --- Tarjetas de producto ------------------------------------------------ */
.woocommerce ul.products li.product {
	background: var(--wp--preset--color--blanco);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--verde-salvia) 25%, transparent);
	border-radius: 14px;
	padding: 1rem;
	transition: transform .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--azul-petroleo) 14%, transparent);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 1.05rem;
	color: var(--wp--preset--color--verde-bosque);
}

/* --- Etiqueta de oferta -------------------------------------------------- */
.woocommerce span.onsale {
	background: var(--wp--preset--color--rojo-terracota);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulos);
	border-radius: 999px;
}

/* --- Selector de formato en la ficha ------------------------------------- */
.woocommerce div.product form.cart .variations select {
	border: 2px solid var(--wp--preset--color--verde-salvia);
	border-radius: 10px;
	padding: .6rem .8rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	background: var(--wp--preset--color--blanco);
}

.woocommerce div.product form.cart .variations label {
	font-family: var(--wp--preset--font-family--titulos);
	color: var(--wp--preset--color--verde-bosque);
}

/* --- Acento de marca: se reserva Pacifico para detalles puntuales -------- */
.acento-marca {
	font-family: var(--wp--preset--font-family--acento);
	color: var(--wp--preset--color--azul-petroleo);
}

/* --- Aviso de producto en borrador (solo lo ve quien administra) --------- */
.almendramix-pendiente {
	background: var(--wp--preset--color--amarillo-mantequilla);
	border-left: 4px solid var(--wp--preset--color--rojo-terracota);
	padding: .75rem 1rem;
	margin-block-end: 1rem;
	border-radius: 6px;
	font-size: .9rem;
}

/* --- Tienda: barra lateral + grilla ------------------------------------- */

.almendramix-tienda__lateral {
	font-size: .95rem;
}

.almendramix-sidebar h3 {
	margin-block-end: .5rem;
}

/* Los bloques de filtro traen su propio espaciado; se compacta un poco. */
.almendramix-sidebar .wp-block-woocommerce-product-filters > * + * {
	margin-block-start: 1rem;
}

/* En móvil el propio bloque de WooCommerce ya convierte los filtros en un cajón
   con el botón "Filtrar productos" (lo hace bajo 600 px, ver product-filters-style.css).
   Antes acá había un `order: 2` que mandaba la columna entera al final de la página:
   el botón quedaba DEBAJO de la grilla, después de todos los productos, donde nadie
   lo busca. Se saca para que el botón sea lo primero que aparece. */
@media (max-width: 781px) {
	.almendramix-sidebar__ayuda {
		display: none;
	}
}

/* Entre 601 y 781 px el bloque todavía se dibuja desplegado, sin botón. Ahí los
   filtros van arriba igual, pero repartidos en dos columnas para que no empujen
   los productos fuera de la pantalla. */
@media (min-width: 601px) and (max-width: 781px) {
	.almendramix-sidebar .wc-block-product-filters__overlay-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem 1.5rem;
		align-items: start;
	}

	/* "Formato" trae 16 opciones: sin tope, la grilla de productos queda a una
	   pantalla de distancia. Se le da scroll propio. */
	.almendramix-sidebar .wc-block-product-filter-checkbox-list {
		max-height: 11rem;
		overflow-y: auto;
	}
}

/* Grilla de producto: tarjetas parejas aunque los títulos tengan distinto largo */
.wp-block-woocommerce-product-template li.wc-block-product {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--blanco);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--verde-salvia) 22%, transparent);
	border-radius: 14px;
	padding: .85rem;
	transition: transform .18s ease, box-shadow .18s ease;
}

.wp-block-woocommerce-product-template li.wc-block-product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--azul-petroleo) 12%, transparent);
}

/* El botón queda abajo, alineado en todas las tarjetas de la fila. */
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-button {
	margin-block-start: auto;
}

.wp-block-woocommerce-product-template li.wc-block-product img {
	border-radius: 10px;
}

/* Ficha de producto */
.almendramix-ficha__envio {
	margin-block: 1.25rem;
}

/* --- Barra de aviso del encabezado --------------------------------------
   Pedido del cliente (correo del 2026-08-17): que diga "Compra on line y
   retiro en tienda", con un icono de carrito y uno de los monitos del logo.
   Los monitos son recortes del propio logo, no ilustraciones nuevas. */

.am-barra {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin: 0;
	padding: .15rem 0;
	min-height: 38px;
	font-size: .95rem;
	line-height: 1.25;
	text-align: center;
}

.am-barra__carro {
	flex: none;
	color: var(--wp--preset--color--amarillo-mantequilla);
}

.am-barra__texto strong {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	letter-spacing: .01em;
}

/* El horario es dato secundario: separado en escritorio, oculto en móvil. */
.am-barra__extra::before {
	content: "·";
	margin: 0 .45rem;
	opacity: .6;
}

/* El selector lleva `img` a propósito. WooCommerce agrega la clase
   `woocommerce-page` al <body> del carro, el checkout, mi cuenta y la tienda, y
   su hoja trae `.woocommerce-page img { height: auto }`. Con una sola clase
   (`.am-barra__monito`) esa regla gana por especificidad y el monito salía a
   tamaño original —370 px— reventando la barra en esas páginas. */
.am-barra img.am-barra__monito {
	flex: none;
	height: 34px;
	width: auto;
	/* Sobresale un poco por abajo: la barra deja de ser una franja plana. */
	margin-block-end: -6px;
	filter: drop-shadow(0 2px 3px rgb(0 0 0 / .28));
}

@media (max-width: 600px) {
	.am-barra {
		min-height: 34px;
		font-size: .85rem;
		gap: .45rem;
	}

	.am-barra__extra {
		display: none;
	}

	.am-barra img.am-barra__monito {
		height: 34px;
	}
}

/* ==========================================================================
   Formato general — correo del cliente del 2026-08-17:
   "se ve muy vacío el fondo en todos los contenidos... mejorar el diseño y
   hacerlo más entretenido y no tan sobrio".
   Lo que sigue no toca ninguna fotografía: trabaja con color, textura, los
   monitos del propio logo y los bordes ondulados de la marca.
   ========================================================================== */

/* --- Textura de fondo ----------------------------------------------------
   El crema plano era lo que se veía "vacío". Se le pone un motivo de hojas y
   puntos muy tenue, del mismo verde de la paleta. */
body {
	background-color: var(--wp--preset--color--crema);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23567C57' stroke-opacity='0.13' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M18 30c8-9 18-9 24-3-6 8-16 10-24 3z'/%3E%3Cpath d='M22 27c5-1 10 1 14 3'/%3E%3Cpath d='M78 88c8-9 18-9 24-3-6 8-16 10-24 3z'/%3E%3Cpath d='M82 85c5-1 10 1 14 3'/%3E%3C/g%3E%3Cg fill='%23C65A3A' fill-opacity='0.11'%3E%3Ccircle cx='92' cy='26' r='3.2'/%3E%3Ccircle cx='30' cy='92' r='3.2'/%3E%3Ccircle cx='60' cy='58' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-attachment: fixed;
}

/* --- Cabecera de las páginas interiores ---------------------------------- */

.am-cabecera {
	position: relative;
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	overflow: hidden;
	/* Motivo de hojas sobre el verde, para que la banda no sea un rectángulo liso. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23FBF6E9' stroke-opacity='0.13' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 44c11-12 24-12 32-4-8 11-21 13-32 4z'/%3E%3Cpath d='M100 118c11-12 24-12 32-4-8 11-21 13-32 4z'/%3E%3Ccircle cx='128' cy='36' r='5'/%3E%3Ccircle cx='44' cy='120' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Borde ondulado hacia el fondo crema. */
.am-cabecera::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 26px;
	background-color: var(--wp--preset--color--crema);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26h120V9c-10 0-10 8-20 8S90 9 80 9 70 17 60 17 50 9 40 9 30 17 20 17 10 9 0 9z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26h120V9c-10 0-10 8-20 8S90 9 80 9 70 17 60 17 50 9 40 9 30 17 20 17 10 9 0 9z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 120px 26px;
	mask-size: 120px 26px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

.am-cabecera__fila {
	gap: 1.5rem;
}

.am-cabecera__titulo {
	margin: 0;
	max-width: 22ch;
}

/* El monito de cada página. Se resuelve por la clase de slug que agrega
   functions.php, para no depender de los IDs de las páginas. */
.am-cabecera__monito {
	flex: none;
	display: block;
	width: 108px;
	height: 132px;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	margin-block-end: calc(var(--wp--preset--spacing--50) * -1 + 4px);
	filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3));
}

.pagina-quienes-somos       .am-cabecera__monito { background-image: url(assets/monitos/almendra-acogedora.png); }
.pagina-contacto            .am-cabecera__monito { background-image: url(assets/monitos/avellana-hogarena.png); }
.pagina-despacho            .am-cabecera__monito { background-image: url(assets/monitos/castana-coqueta.png); }
.pagina-preguntas-frecuentes .am-cabecera__monito { background-image: url(assets/monitos/pistacho-alegre.png); }
.pagina-devoluciones        .am-cabecera__monito { background-image: url(assets/monitos/nuez-sabia.png); }
.pagina-terminos-y-condiciones .am-cabecera__monito { background-image: url(assets/monitos/nuez-sabia.png); }
.pagina-privacidad          .am-cabecera__monito { background-image: url(assets/monitos/almendra-acogedora.png); }

@media (max-width: 781px) {
	.am-cabecera__monito {
		width: 74px;
		height: 92px;
	}

	.am-cabecera__titulo {
		max-width: none;
	}
}

/* --- Hoja de contenido ---------------------------------------------------
   El texto iba suelto sobre el fondo. Ahora va sobre una tarjeta blanca que
   sube y monta sobre la onda de la cabecera. */

.am-hoja {
	padding-block: 0 var(--wp--preset--spacing--50);
}

.am-hoja > .wp-block-post-content {
	position: relative;
	z-index: 1;
	margin-block-start: calc(var(--wp--preset--spacing--30) * -1);
	background: var(--wp--preset--color--blanco);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	box-shadow: 0 14px 40px color-mix(in srgb, var(--wp--preset--color--verde-bosque) 12%, transparent);
}

@media (max-width: 600px) {
	.am-hoja > .wp-block-post-content {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
		border-radius: 14px;
	}
}

/* Los h2 dentro de la hoja llevan un subrayado corto de color: rompe la
   sucesión de párrafos grises. */
.am-hoja h2 {
	margin-block-start: 2.25rem;
}

.am-hoja h2::after {
	content: "";
	display: block;
	width: 62px;
	height: 4px;
	margin-block-start: .5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--rojo-terracota);
}

.am-hoja h3 {
	color: var(--wp--preset--color--verde-salvia);
	margin-block-start: 1.75rem;
}

/* Viñetas de marca en vez del punto por defecto. */
.am-hoja ul.wp-block-list {
	list-style: none;
	padding-inline-start: 1.6rem;
}

.am-hoja ul.wp-block-list > li {
	position: relative;
	margin-block-end: .55rem;
}

.am-hoja ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.5rem;
	inset-block-start: .5em;
	width: 11px;
	height: 11px;
	border-radius: 50% 0 50% 50%;
	background: var(--wp--preset--color--verde-salvia);
	transform: rotate(45deg);
}

/* El título de la banda y la tarjeta de contenido comparten ancho: si no, el
   título queda pegado al borde de la ventana y la tarjeta al centro, y el
   desajuste se lee como un error de maqueta. */
:root {
	--am-ancho-hoja: 880px;
}

.am-cabecera__fila,
.am-hoja > .wp-block-post-content {
	max-width: var(--am-ancho-hoja);
	margin-inline: auto;
}

/* --- Portada: fila de ventajas con monitos -------------------------------- */

.am-ventajas {
	position: relative;
	padding-block-end: calc(var(--wp--preset--spacing--30) + 22px) !important;
}

/* Onda hacia el crema, igual que la de la cabecera de las páginas. */
.am-ventajas::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 22px;
	background-color: var(--wp--preset--color--crema);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26h120V9c-10 0-10 8-20 8S90 9 80 9 70 17 60 17 50 9 40 9 30 17 20 17 10 9 0 9z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26h120V9c-10 0-10 8-20 8S90 9 80 9 70 17 60 17 50 9 40 9 30 17 20 17 10 9 0 9z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 120px 22px;
	mask-size: 120px 22px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

/* `img.` por lo mismo que en la barra: en las páginas con la clase
   `woocommerce-page` la regla `.woocommerce-page img { height: auto }` gana. */
.am-ventajas img.am-ventajas__monito {
	display: block;
	height: 78px;
	width: auto;
	margin: 0 auto .5rem;
	filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--wp--preset--color--verde-bosque) 25%, transparent));
}

@media (max-width: 781px) {
	.am-ventajas img.am-ventajas__monito {
		height: 62px;
	}
}

/* --- Portada: banda de cierre con los seis monitos ------------------------ */

.am-cierre {
	position: relative;
	overflow: hidden;
}

/* Onda arriba, para entrar desde el crema. */
.am-cierre::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -1px;
	height: 22px;
	background-color: var(--wp--preset--color--crema);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v17c-10 0-10-8-20-8S90 17 80 17 70 9 60 9 50 17 40 17 30 9 20 9 10 17 0 17z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v17c-10 0-10-8-20-8S90 17 80 17 70 9 60 9 50 17 40 17 30 9 20 9 10 17 0 17z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 120px 22px;
	mask-size: 120px 22px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

.am-cierre img.am-cierre__fila {
	display: block;
	width: min(100%, 760px);
	height: auto;
	margin: 1.25rem auto .75rem;
}

/* --- Portada: sección "En qué creemos" -----------------------------------
   El velo del bloque de portada tapa la foto entera. Para que la imagen se
   vea y el texto igual se lea, el velo queda bajo (50%) y el contraste del
   título y la bajada lo pone este degradado, que solo cubre la franja de
   arriba: más abajo van las tarjetas blancas, que no lo necesitan. */

.am-creemos .wp-block-cover__inner-container {
	position: relative;
}

.am-creemos .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	/* desborda el contenedor: el degradado tiene que llegar a los bordes */
	inset-block-start: calc(var(--wp--preset--spacing--50) * -1);
	inset-inline: -50vw;
	height: 340px;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--verde-bosque) 82%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--verde-bosque) 74%, transparent) 45%,
		transparent 100%
	);
	pointer-events: none;
}

.am-creemos .wp-block-cover__inner-container > * {
	position: relative;
	z-index: 1;
}

/* --- Portada: hero -------------------------------------------------------
   Mismo criterio que en "En qué creemos": el velo del bloque tapa la foto
   entera, así que queda bajo y el contraste del titular lo pone un degradado
   detrás del texto. Acá es radial, para que las esquinas —donde entran las
   ramas del almendro— queden limpias. */

.am-hero .wp-block-cover__inner-container {
	position: relative;
}

.am-hero .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	inset: -14% -12%;
	background: radial-gradient(
		ellipse 62% 58% at 50% 50%,
		color-mix(in srgb, var(--wp--preset--color--verde-bosque) 66%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--verde-bosque) 54%, transparent) 55%,
		transparent 100%
	);
	pointer-events: none;
}

.am-hero .wp-block-cover__inner-container > * {
	position: relative;
	z-index: 1;
}

/* --- "En qué creemos": carrusel horizontal en móvil -----------------------
   Apiladas, las cuatro tarjetas son 1.400 px de scroll para leer cuatro frases.
   Bajo 781 px pasan a una fila que se desliza con el dedo, con anclaje por
   tarjeta. Es scroll nativo con scroll-snap: no hay JavaScript de por medio, y
   si el CSS no carga las tarjetas siguen apiladas y legibles.

   WordPress fuerza `flex-basis: 100% !important` a las columnas bajo 782 px, de
   ahí los !important de acá: son para ganarle a esa regla, no por costumbre. */

@media (max-width: 781px) {
	.am-creemos .wp-block-columns {
		flex-wrap: nowrap !important;
		align-items: stretch;
		gap: .75rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		/* De borde a borde: si el carrusel respeta el margen del contenido,
		   la tarjeta cortada del costado no se ve y se pierde la pista de que
		   hay más. */
		margin-inline: calc(var(--wp--preset--spacing--30) * -1);
		padding: .25rem var(--wp--preset--spacing--30) .75rem;
		scroll-padding-inline: var(--wp--preset--spacing--30);
		scrollbar-width: none;
	}

	.am-creemos .wp-block-columns::-webkit-scrollbar {
		display: none;
	}

	/* Deja asomando la tarjeta siguiente: esa es la señal de que se desliza.
	   El tope de 320 px es para que en un teléfono grande o una tableta chica
	   entren dos tarjetas en vez de una sola enorme y medio vacía.

	   El selector repite el `:not(.is-not-stacked-on-mobile)` de WordPress a
	   propósito. La regla suya es
	       .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
	   que suma 0,3,0 de especificidad, y `!important` no desempata: con
	   `.am-creemos .wp-block-column` (0,2,0) ganaba la de WordPress y la
	   tarjeta se quedaba en flex-basis 100%. */
	.am-creemos .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: min(82%, 320px) !important;
		scroll-snap-align: center;
	}

	.am-creemos .wp-block-column > .wp-block-group {
		height: 100%;
	}
}


/* ---------------------------------------------------------------------------
   Buscador de productos del encabezado
   Va dentro de la fila del logo para no sumar alto. Bajo 900 px se pasa a una
   segunda linea a ancho completo, que es mas usable que un campo diminuto.
   --------------------------------------------------------------------------- */
.am-buscador {
	display: flex;
	align-items: stretch;
	max-width: 260px;
	border: 2px solid var(--wp--preset--color--amarillo-mantequilla);
	border-radius: 999px;
	background: var(--wp--preset--color--crema);
	overflow: hidden;
}

.am-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: .34rem .2rem .34rem .85rem;
	font-family: var(--wp--preset--font-family--texto);
	font-size: .9rem;
	color: var(--wp--preset--color--verde-bosque);
}

.am-buscador__campo::placeholder { color: var(--wp--preset--color--verde-salvia); opacity: .85; }
.am-buscador__campo:focus { outline: none; }
.am-buscador:focus-within { border-color: var(--wp--preset--color--verde-salvia); }

.am-buscador__boton {
	flex: none;
	display: grid;
	place-items: center;
	border: 0;
	cursor: pointer;
	padding: 0 .7rem;
	background: var(--wp--preset--color--verde-bosque);
	color: var(--wp--preset--color--blanco);
}

.am-buscador__boton:hover { background: var(--wp--preset--color--verde-salvia); }

.am-buscador__lupa {
	display: none;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--verde-bosque);
	cursor: pointer;
	padding: .3rem .5rem;
}

/* Bajo 1100 px el encabezado va apretado: el buscador desplegado ocupa 250 px y
   empujaba el menu a una segunda fila. Se pliega a la lupa y el campo aparece en
   una fila propia solo cuando el visitante lo pide. */
@media (max-width: 1099px) {
	.am-buscador--plegable {
		border-color: transparent;
		background: transparent;
		max-width: none;
	}

	.am-buscador--plegable .am-buscador__lupa { display: grid; place-items: center; }

	.am-buscador--plegable .am-buscador__campo,
	.am-buscador--plegable .am-buscador__boton {
		display: none;
	}

	.am-buscador--abierto {
		order: 10;
		width: 100%;
		margin-top: .5rem;
		border-color: var(--wp--preset--color--amarillo-mantequilla);
		background: var(--wp--preset--color--crema);
	}

	.am-buscador--abierto .am-buscador__campo,
	.am-buscador--abierto .am-buscador__boton {
		display: block;
	}

	.am-buscador--abierto .am-buscador__boton { display: grid; place-items: center; }
	.am-buscador--abierto .am-buscador__lupa { display: none; }
}

/* Encabezado del checkout: solo el logo y el carro, sin menu, para no distraer
   a alguien que ya esta pagando; pero con la marca a la vista, que es lo que
   le dice al cliente en que tienda esta metiendo su tarjeta. */
.am-checkout-cabecera {
	border-bottom: 3px solid var(--wp--preset--color--amarillo-mantequilla);
	background: var(--wp--preset--color--blanco);
}

.am-checkout-pie {
	border-top: 3px solid var(--wp--preset--color--amarillo-mantequilla);
	font-size: .85rem;
}

/* ---------------------------------------------------------------------------
   Encabezado entre 601 y 900 px
   WordPress recien pliega el menu en un cajon bajo 600 px, asi que entre medio
   quedaba desplegado y no cabia: el encabezado se partia en tres filas (logo /
   menu / carro) y crecia a 219 px, mas alto que en escritorio. Se aprieta la
   tipografia y el espaciado del menu para que entre en una sola fila.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) and (min-width: 600px) {
	.am-barra-aviso + .wp-block-group .wp-block-site-logo img { max-height: 56px; width: auto; }

	.am-barra-aviso + .wp-block-group .wp-block-group.alignwide,
	.am-barra-aviso + .wp-block-group .wp-block-group.alignwide > .wp-block-group {
		flex-wrap: nowrap;
		gap: .4rem;
	}

	.am-barra-aviso + .wp-block-group .wp-block-navigation {
		font-size: .78rem;
	}

	.am-barra-aviso + .wp-block-group .wp-block-navigation ul {
		gap: .6rem;
		flex-wrap: nowrap;
	}

	.am-barra-aviso + .wp-block-group .wc-block-mini-cart__button {
		padding-inline: .35rem;
	}
}

/* ---------------------------------------------------------------------------
   Encabezado en teléfono (hasta 599 px)
   Con el menú ya plegado en hamburguesa quedan logo + lupa + hamburguesa +
   cuenta + carro. En pantallas de 360 px eso no cabía y el grupo se partía en
   dos filas, con el logo solo arriba. Se fuerza una sola fila y se achica el
   logo, que es lo que más ancho ocupa.
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.am-barra-aviso + .wp-block-group .wp-block-group.alignwide {
		flex-wrap: nowrap;
		gap: .35rem;
	}

	.am-barra-aviso + .wp-block-group .wp-block-site-logo img {
		max-height: 56px;
		width: auto;
	}

	.am-barra-aviso + .wp-block-group .wc-block-mini-cart__button {
		padding-inline: .3rem;
		gap: .25rem;
	}

	.am-buscador__lupa { padding: .25rem .35rem; }

	/* La almendra sobresale por abajo a propósito, pero con la barra más baja
	   quedaba cortada por el borde. Se achica para que siga asomando entera. */
	.am-barra img.am-barra__monito {
		height: 28px;
		margin-block-end: -4px;
	}
}

/* --- Tienda: título de cada categoría dentro de la grilla ----------------
   El título entra como un <li> más de la grilla de productos, así que necesita
   ocupar la fila completa: `grid-column: 1 / -1` sobre el CSS grid de
   `.wc-block-product-template__responsive`.

   Ojo con la especificidad: WooCommerce trae
   `.wc-block-product-template__responsive > li { margin-block-start: 0 }`,
   que con 0,2,1 le gana a cualquier regla de una sola clase. Por eso el selector
   repite el contenedor. Es la misma lección de `.woocommerce-page img` del 18-08. */

.wc-block-product-template > li.am-tienda__titulo {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* El primero va pegado arriba; los siguientes abren el intervalo que separa
   una categoría de la otra, que es justo lo que pidió el cliente. */
.wc-block-product-template > li.am-tienda__titulo + li {
	margin-block-start: 0;
}

.wc-block-product-template > li.am-tienda__titulo:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--40, 2.5rem);
	padding-block-start: 1.75rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--verde-salvia) 30%, transparent);
}

.wc-block-product-template > li.am-tienda__titulo h2 {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--preset--color--verde-bosque);
	margin: 0;
}

.wc-block-product-template > li.am-tienda__titulo h2::after {
	content: "";
	display: block;
	width: 62px;
	height: 4px;
	margin-block-start: .5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--rojo-terracota);
}

.wc-block-product-template > li.am-tienda__titulo p {
	margin: .6rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--verde-salvia);
}

/* --- Formulario de contacto ---------------------------------------------
   Lo pinta el mu-plugin 02-almendramix-contacto.php. Los campos van a ancho
   completo y en columna: en un formulario de cuatro campos, ponerlos de a dos
   solo gana una fila y obliga a mirar en zigzag. */

.am-formulario {
	margin-block-start: 1.5rem;
}

.am-formulario__campo {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-block-end: 1rem;
}

.am-formulario__campo label {
	font-family: var(--wp--preset--font-family--titulos);
	color: var(--wp--preset--color--verde-bosque);
	font-size: .95rem;
}

.am-formulario__campo label span {
	font-family: var(--wp--preset--font-family--cuerpo);
	color: var(--wp--preset--color--verde-salvia);
	font-weight: 400;
}

.am-formulario__campo input,
.am-formulario__campo textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--verde-salvia) 55%, transparent);
	border-radius: 10px;
	background: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	color: inherit;
}

.am-formulario__campo textarea {
	resize: vertical;
	min-height: 8rem;
}

.am-formulario__campo input:focus-visible,
.am-formulario__campo textarea:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--azul-petroleo) 45%, transparent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--azul-petroleo);
}

.am-formulario__envio button {
	font-family: var(--wp--preset--font-family--titulos);
	background: var(--wp--preset--color--azul-petroleo);
	color: var(--wp--preset--color--blanco);
	border: 0;
	border-radius: 999px;
	padding: .8rem 1.9rem;
	font-size: 1rem;
	cursor: pointer;
}

.am-formulario__envio button:hover {
	background: var(--wp--preset--color--verde-bosque);
}

.am-formulario__nota {
	font-size: .85rem;
	color: var(--wp--preset--color--verde-salvia);
}

/* La trampa para robots tiene que estar en el HTML y fuera de la vista, pero
   sin `display:none`: hay robots que saltan justamente lo que está oculto así. */
.am-formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.am-formulario__ok,
.am-formulario__error {
	border-radius: 10px;
	padding: .9rem 1.1rem;
	margin-block-end: 1.25rem;
	border-left: 4px solid;
}

.am-formulario__ok {
	background: color-mix(in srgb, var(--wp--preset--color--verde-salvia) 16%, transparent);
	border-left-color: var(--wp--preset--color--verde-bosque);
}

.am-formulario__error {
	background: var(--wp--preset--color--amarillo-mantequilla);
	border-left-color: var(--wp--preset--color--rojo-terracota);
}

/* --- Hero en móvil: que se vea el estero -------------------------------
   El hero es 1600x962 y en un teléfono la caja queda vertical, así que
   `object-fit: cover` solo muestra la franja central: entran la pradera y el
   árbol de la derecha, y el estero —que corre por el tercio izquierdo— queda
   fuera de cuadro. Correrlo hacia la izquierda lo devuelve a la vista.

   El valor no es al ojo: a 390 px se ven 605 px de los 1600 del original, así
   que el 18 % pone el recorte en x≈180-785 y el estero cae en el tercio
   izquierdo del encuadre, no pegado al borde. */

@media (max-width: 781px) {
	.am-hero img.wp-block-cover__image-background {
		object-position: 18% center;
	}
}

/* --- Crédito de autoría en el pie --------------------------------------
   Más chico y atenuado que el resto del pie: es firma, no contenido. */
.am-credito {
	margin-top: 0.5rem;
	opacity: 0.7;
}

.am-credito a {
	color: inherit;
	text-decoration: none;
}

.am-credito a:hover,
.am-credito a:focus-visible {
	text-decoration: underline;
}