/*
Theme Name: Aceitunas y Encurtidos
Description: Tema de bloques propio, sencillo y sin dependencias externas.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: aceitunas
*/
/*
 * Diseño 0.2.0 — «el puesto del mercado» (aprobado por Aarón el 13-oct-2026).
 *
 * Por qué: la foto real del puesto de Manolo y Manoli lleva cada aceituna con su
 * cartel verde fosforito. Ese cartel es lo único llamativo de la web (el precio de
 * cada producto); todo lo demás es tranquilo: fondo «salmuera» (blanco verdoso),
 * texto oscuro, Alegreya para títulos y Alegreya Sans para leer.
 * Descartado: crema + terracota y tarjetas iguales con sombra (lo que hace
 * cualquier generador de webs), y el dorado del logotipo como color de la web
 * (con el logo ya basta; repetirlo lo recarga todo).
 *
 * Colores y textos se cambian desde Apariencia > Editor, sin tocar código.
 * Por qué un tema propio y no uno del mercado: menos código de terceros = menos
 * superficie de ataque y nada de «pro» de pago.
 */

/* ---- Lo que el navegador pinta solo: también lleva el diseño ---- */
html { scrollbar-color: var(--wp--preset--color--gordal) var(--wp--preset--color--salmuera); }
::selection { background: var(--wp--preset--color--cartel); color: var(--wp--preset--color--tinta); }
input, textarea, select { caret-color: var(--wp--preset--color--guindilla); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wp--preset--color--gordal); outline-offset: 2px; border-radius: 2px; }
.has-morada-background-color :focus-visible { outline-color: var(--wp--preset--color--cartel); }
html, body { overflow-x: clip; }
a, button, input, select, textarea, label { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(78, 90, 23, .18); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.entry-content > p, .wp-block-post-content > p, .wp-block-post-content li { max-width: 68ch; }

/* ---- Cabecera ---- */
.cab-logo img { display: block; height: 64px; width: auto; }
@media (max-width: 781px) { .cab-logo img { height: 48px; } }
.cab-aviso p { margin: 0; }

/* ---- Botones ---- */
.wp-block-button__link, .wc-block-components-button, .button { transition: background-color .15s ease-out; }
/* Botones que escriben, bloqueados mientras guardan (evita doble pedido). */
.wc-block-components-button[disabled], .wc-block-components-button.is-busy,
.button.loading, .button:disabled { pointer-events: none; opacity: .6; }
.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--tinta);
	border: 1.5px solid currentColor;
}
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--papel); }

/* ---- El cartel del precio (lo memorable) ----
 * Como los carteles del puesto: papel verde fosforito, letra de mano (Alegreya
 * cursiva) y un poco torcido. Al pasar por encima del producto se endereza: es
 * el único movimiento de la web, y responde a lo que hace la persona. */
.wc-block-grid__product-price, .wc-block-components-product-price,
ul.products li.product .price, .summary .price, .wp-block-woocommerce-product-price .wc-block-components-product-price {
	/* !important: WooCommerce encoge el precio (.857em) y lo estira a todo el ancho. */
	display: inline-block !important; width: fit-content !important; max-width: 100%;
	background: var(--wp--preset--color--cartel); color: var(--wp--preset--color--tinta) !important;
	font-family: var(--wp--preset--font-family--titulos); font-style: italic; font-weight: 700;
	font-size: 1.25rem !important; line-height: 1.2; padding: .2em .6em .25em;
	font-variant-numeric: lining-nums tabular-nums;
	border-radius: 2px; transform: rotate(-2deg);
	box-shadow: 0 1px 3px rgba(31, 36, 20, .22);
	transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.summary .price, .wp-block-woocommerce-product-price .wc-block-components-product-price { font-size: 1.75rem !important; }
li.product:hover .price, .wc-block-product:hover .wc-block-components-product-price,
li.wc-block-grid__product:hover .wc-block-grid__product-price { transform: rotate(0); }
.price del, .wc-block-components-product-price del { opacity: .55; font-weight: 500; margin-right: .3em; }
.price ins, .wc-block-components-product-price ins { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
	.wc-block-grid__product-price, .wc-block-components-product-price, ul.products li.product .price { transition: none; }
}

/* ---- Listas de productos ---- */
ul.products li.product, .wc-block-product { text-align: left; }
ul.products li.product img, .wc-block-components-product-image img, .wc-block-grid__product-image img {
	width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--wp--preset--color--blanco);
	border-radius: 4px; border: 1px solid var(--wp--preset--color--linea);
}
ul.products li.product .woocommerce-loop-product__title, .wc-block-components-product-name,
.wp-block-post-title a { font-family: var(--wp--preset--font-family--titulos); font-weight: 600; text-decoration: none; }
/* !important: WooCommerce fija el título del producto en 1em. overflow-wrap: los
   nombres de los packs son muy largos y en móvil rompían la columna. */
ul.products li.product .woocommerce-loop-product__title { font-size: 1.1875rem !important; line-height: 1.25; padding: .7rem 0 .55rem !important; color: var(--wp--preset--color--tinta); overflow-wrap: anywhere; }
ul.products li.product { margin-bottom: 2rem !important; }
@media (max-width: 781px) { ul.products li.product .woocommerce-loop-product__title { font-size: 1.0625rem !important; } }
ul.products li.product a { text-decoration: none; }
ul.products li.product .button { margin-top: .9rem; display: inline-block; }
.onsale { background: var(--wp--preset--color--guindilla) !important; color: #fff !important; border-radius: 2px !important; }

/* ---- Portada ---- */
.portada-foto img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: 4px; display: block; }
.tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.tipo { display: block; color: inherit; text-decoration: none; }
.tipo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.tipo strong { display: block; margin-top: .6rem; font: 700 1.625rem/1.1 var(--wp--preset--font-family--titulos); }
.tipo span { color: var(--wp--preset--color--gordal); }
.tipo:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.subtipos { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.hechos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem; margin: 0; }
.hechos dt { font: 700 1.3125rem/1.2 var(--wp--preset--font-family--titulos); }
.hechos dd { margin: .3rem 0 0; }
@media (max-width: 781px) {
	.tipos { grid-template-columns: 1fr; }
	.tipo img { aspect-ratio: 16 / 9; }
	.hechos { grid-template-columns: 1fr; }
}

/* ---- Páginas ---- */
.foto-puesto img { border-radius: 4px; }
.lista-contacto { list-style: none; padding: 0; }
.lista-contacto li { padding: .5rem 0; border-bottom: 1px solid var(--wp--preset--color--linea); }

/* ---- Pie ---- */
.pie a { color: var(--wp--preset--color--salmuera); }
.pie a:hover { color: var(--wp--preset--color--cartel); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li + li { margin-top: .35rem; }

/* ---- Ficha de producto ----
 * Un tamaño menos que el de la portada: los nombres de los packs llevan sus cinco
 * variedades y, a tamaño de portada, ocupaban media pantalla. */
.single-product h1.wp-block-post-title, .single-product h1.product_title {
	font-size: var(--wp--preset--font-size--x-large); overflow-wrap: anywhere;
}