/*
Theme Name: Web Librería Editorial
Description: A child theme of fse-book-store, scaffolded by Studio Code.
Template: fse-book-store
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: web-libreria-editorial
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
 */

:root {
	--wl-shadow: 0 18px 50px rgba(32, 50, 56, 0.08);
}

/* Cart and checkout title bands sit in the same phrase as the 404 band, but
 * they only inherit the root padding on their right side. On phones that left
 * the heading glued to the screen edge and off the content grid. Mirror the
 * same gutter on both sides so every page title lines up.
 *
 * Both selectors are needed: the two bands stopped carrying a `core/heading`
 * and print the page's own title instead (a `core/post-title`, so the owner can
 * rename them from the page), and the 404 band is excluded above by its class. */
.wp-block-group.has-section-bg-color-background-color:not(.wl-error-page):has(> .wp-block-heading),
.wp-block-group.has-section-bg-color-background-color:not(.wl-error-page):has(> .wp-block-post-title) {
	padding-left: var(--wp--style--root--padding-left, clamp(28px, 5.5vw, 96px)) !important;
}

body {
	background: #e9e9e9;
}

.wp-site-blocks {
	background: #ffffff;
	margin: 0 auto;
	max-width: 1680px;
}

.wl-section-label {
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wl-catalog > .wp-block-columns,
.wl-catalog > .wl-product-grid {
	max-width: none;
	width: 100%;
}

@media (max-width: 781px) {
	.wp-site-blocks {
		box-sizing: border-box;
		width: 100%;
	}

	.wl-site-header .wp-block-navigation {
		order: 0;
		width: auto;
	}

	.wl-site-header .wp-block-navigation__responsive-container-open {
		display: block;
	}

	.wl-product-grid .wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	body {
		overflow-x: hidden;
	}
}

/* -------------------------------------------------------------------------
 * Reference rebuild: monochrome editorial shell + compact book catalogue.
 * Keep the visual language deliberately quiet and consistent with the
 * supplied references. WooCommerce remains responsible for the interactions.
 * ------------------------------------------------------------------------- */

/* Poppins (OFL): geometric sans closer to the logo's letterforms than the
 * system stack, while staying very legible at small sizes. Local files —
 * no third-party requests. */
@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Medium.ttf") format("truetype");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Bold.ttf") format("truetype");
	font-weight: 800;
	font-display: swap;
}

:root {
	/* Design tokens: change a font or a color once here and it updates
	 * everywhere. --wl-font is the whole UI (header, cards, search, footer);
	 * --wl-font-headings is for headings (closer to the logo's geometry,
	 * still very readable). Previous UI font kept as a comment to switch
	 * back in one line:
	 *   --wl-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; */
	--wl-font: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--wl-font-headings: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--wl-ink: #111111;
	--wl-muted: #707070;
	--wl-line: #e6e6e6;
	/* Price tones, shared by the book cards and the product page: the current
	 * amount is the only red, the crossed-out one the only grey. They used to
	 * be spelled out in four places with three different greys, which is how a
	 * book ended up with a black old price on one surface and a red one on the
	 * next. Change the tone here and every book price in the shop follows. */
	--wl-price: #d0342c;
	--wl-price-was: #9a9a9a;
	/* Fluid page rail: the shared left/right line of header, hero copy,
	 * sections and footer — ~22px on laptops, ~4vw on big monitors, like the
	 * reference layout. */
	--wl-shell-gutter: max(22px, 4vw);
	--wl-soft: #f5f5f5;
	--wl-frame: #f0f0f0;
	/* Ancho MÍNIMO de la baldosa del libro. Un solo token para todas las
	 * estanterías del sitio (inicio, catálogo, categoría, autor, búsqueda):
	 * la fila se declara con `minmax(--wl-plate, 1fr)`, de modo que la
	 * baldosa crece lo justo —nunca mucho— hasta llenar la fila entera, y en
	 * pantallas anchas salen más libros en vez de baldosas más grandes.
	 *
	 * Crecer hasta llenar es justo lo que faltaba: con pistas de ancho fijo
	 * (`repeat(auto-fill, 208px)`) la última columna sobraba siempre, y ese
	 * era el "aire raro" a la derecha. Medido: 88px libres a 1199, 143 a
	 * 1018 y 221 a 744 (el iPad en vertical, que se quedaba en dos columnas
	 * porque a tres le faltaba 1px).
	 *
	 * La tapa es cuadrada por `aspect-ratio`, así que sigue a la columna. */
	--wl-plate: 240px;
}

/* Una sola baldosa para todo lo que no es escritorio grande: 176px, la misma
 * que en el móvil, y las pistas estiradas hasta llenar la fila. Antes el
 * catálogo con raíl de filtros (hasta 990px) iba por su cuenta y salían
 * dos columnas de 208 con 143px de hueco a 1018, o dos de 279 con el token
 * de 200. Con 176 el catálogo reparte 4/3/2 columnas de 182 a 271 según la
 * anchura, siempre sin escalón. */
@media (max-width: 1300px) {
	:root {
		--wl-plate: 176px;
	}
}

/* Kill the parent theme's animations outright: wow.js entrances AND the
 * zoomInUp family, which keeps content invisible (opacity:0, scale .5,
 * animation-fill-mode both, .8s delay) until a script we disabled never
 * runs — the "animation from 2000" on account/cart/search pages. The site's
 * own carousel uses transitions, not these keyframes. */
.wow,
.archieve-post,
[class*="wow"],
.entry-content,
.wp-block-comments,
.single-post-meta,
.taxonomy-category,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	animation: none !important;
	transform: none !important;
	opacity: 1 !important;
}

/* The parent theme also sets overflow:hidden on .entry-content (leftover
 * clipping for the animation we killed). hidden turns the wrapper into a
 * scroll container, which silently breaks position:sticky — the checkout
 * order summary must follow the scroll. clip keeps the visual clipping
 * without the sticky-killing side effect. */
.entry-content {
	overflow: clip !important;
}

html {
	background: var(--wl-frame);
	overflow-x: clip;
	/* "Volver arriba" del footer enlaza a `#` (fragmento vacío): en un tema de
	 * bloques la cabecera es `position: sticky`, así que cualquier ancla con
	 * `id` dentro de ella se resuelve como "ya visible" y la página no se
	 * mueve. El fragmento vacío es el único destino que sí lleva al inicio
	 * del documento, y con esto el salto se anima en lugar de saltar de golpe.
	 * `prefers-reduced-motion` lo devuelve a un salto instantáneo. */
	scroll-behavior: smooth;
	/* Que un doble toque no haga zoom. `manipulation` quita justo eso —el
	 * zoom que se dispara al tocar dos veces rápido y desplaza la página
	 * debajo del dedo— y deja el resto de gestos, incluido el pellizco para
	 * ampliar, que es accesibilidad (WCAG 1.4.4) y no se puede tocar.
	 *
	 * La alternativa de quitar `maximum-scale` del `viewport` también
	 * funciona, pero además mata el zoom con los dedos y obliga a(users con
	 * baja visión a alejarse la pantalla sin poder. `touch-action` en el
	 * `html` cubre también los gestos que empiezan en un hijo, que es el
	 * caso normal: la última palabra la tiene el ancestro más alto. */
	touch-action: manipulation;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background: var(--wl-frame) !important;
	color: var(--wl-ink);
	font-family: var(--wl-font);
	overflow-x: clip;
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
	font-family: var(--wl-font);
}

/* Headings lean on the dedicated display stack (see --wl-font-headings). */
h1,
h2,
h3 {
	font-family: var(--wl-font-headings);
}

.wp-site-blocks {
	background: #ffffff !important;
	box-shadow: none !important;
	margin: 72px auto 52px;
	max-width: 1824px;
	width: calc(100% - 64px);
}

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.wp-site-blocks h5,
.wp-site-blocks h6,
.wp-site-blocks p,
.wp-site-blocks a {
	color: var(--wl-ink);
}

/* Regla de hover de la casa, en un solo sitio: tinta en reposo, gris al pasar
 * el ratón, y sin subrayado. Hace falta porque los estilos globales de
 * WordPress traen `a:hover { color: var(--wp--preset--color--primary) }` y en
 * esta tienda ese preset es #111111 — la misma tinta que ya tienen los
 * enlaces — y `a { text-decoration: underline }` del tema padre. Resultado:
 * media tienda se ponía negra y subrayado al pasar el ratón, y los botones de
 * WooCommerce (`a.button:hover`, `.wc-forward:hover`) heredaban un subrayado
 * que ningún botón debería tener. Los botones y cualquier superficie con
 * fondo propio (CTA de tinta, cajón de carrito) no entran aquí: su `color`
 * con `!important` gana a esta regla.
 *
 * El `:root` de delante no es decorativo: sin él esta regla empata en
 * especificidad con las reglas de cada componente (`.wl-pdp .wl-pdp-author
 * a`, `.wl-filter-clear:hover`, …) y, al estar antes que ellas, pierde.
 * Con `:root` gana a todo lo que no lleve `!important`, y los componentes que
 * quieren otra cosa (migas de pan, pestañas de cuenta, iconos, pie negro)
 * declaran su hover con `!important` más abajo.
 *
 * Excepción sobre el subrayado: el pie negro lo mantiene, porque allí el texto
 * es blanco y el subrayado es lo que lo delata; lo recuperan sus propias
 * reglas, también con `!important`. */
:root .wp-site-blocks a:hover,
:root .wp-site-blocks a:focus-visible {
	color: var(--wl-muted);
	text-decoration: none !important;
}

.wl-site-header .wp-block-navigation-item__content:hover,
.wl-site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wl-muted) !important;
}

/* --- La otra mitad de la regla de hover: las superficies -----------------
 * La regla de arriba va de texto; esta va de superficies. La casa no quiere
 * que un control en superficie clara se convierta en una mancha negra al
 * pasar el ratón: en una miniatura de 36px el salto es más grande que el
 * propio botón, y en un icono de línea además lo deja invisible (tinta
 * sobre tinta). Al revés: superficie clara → relleno suave; superficie ya
 * negra → un punto más de gris. Las negras lo tienen en su propio bloque,
 * más abajo, y no entran aquí.
 *
 * WooCommerce rompe esa norma en sus botones huecos: en reposo son
 * transparentes (solo llevan `box-shadow: inset 0 0 0 1px currentColor`) y al
 * pasar el ratón se rellenan de #1e1e1e con el texto en blanco. Aquí se les
 * da el mismo relleno suave que al carrito de la miniatura, para que un
 * botón que alguien añada en el editor del sitio no aparezca de negro.
 *
 * Los botones de bloque de WordPress NO se tocan, y es deliberado: en reposo
 * WordPress les pone su propio gris (#32373c, la regla `:where()` de su
 * estilo base, que casi no pesa), así que el relleno negro que les mete el
 * tema padre al hover (#111) solo oscurece un botón que ya era oscuro. Meterlos
 * aquí convertiría el 404 —la única página con botones de bloque— en dos
 * botones claros, que es justo el efecto que se quiere evitar.
 */
.wc-block-components-button.is-style-outline:hover,
.wc-block-components-button.is-style-outline:focus-visible,
.wc-block-components-button.outlined:hover,
.wc-block-components-button.outlined:focus-visible {
	background: var(--wl-soft) !important;
	border-color: var(--wl-ink) !important;
	color: var(--wl-ink) !important;
}

/* Buscar, cuenta, carrito y el botón de menú no tenían hover: se les
 * escribía `background: transparent !important` y se quedaban igual con el
 * ratón encima. Mismo relleno suave que los otros controles pequeños de la
 * casa, nunca un bloque de tinta. */
.wl-site-header button:hover,
.wl-site-header .wc-block-customer-account__link:hover {
	background: var(--wl-soft) !important;
	border-radius: 2px;
}

/* Los enlaces que solo envuelven una imagen (el logo, las miniaturas del
 * carrito y del mini-carrito) heredan del tema padre el
 * `a { text-decoration: underline }`: en el carrito se veía una raya bajo
 * cada miniatura y, peor, desaparecía al pasar el ratón. Los dos enlaces de
 * portada de las estanterías y de los eventos llevan además una etiqueta
 * pegada encima, así que no entran en el `:only-child`. */
a:has(> img:only-child),
.wl-featured-media,
.wl-event-photo {
	text-decoration: none;
}

/* WooCommerce subraye al hover un par de controles del checkout que no son
 * enlaces sino <span> ("Editar" en la tarjeta de dirección, "+ Añadir
 * apartamento"), así que la regla de arriba no llega a ellos. */
:root .wp-site-blocks .wc-block-components-address-card__edit:hover,
:root .wp-site-blocks .wc-block-components-address-form__address_2-toggle:hover {
	color: var(--wl-muted);
	text-decoration: none !important;
}

/* The catalog is a plain white band centred on the reading rail, so the
 * container rule lives here once and for all. WordPress pushes the top
 * rhythm down from the page head, so the band starts right under it. */
.wl-catalog {
	background: #ffffff !important;
	box-sizing: border-box;
	margin: 0 auto 90px;
	padding: 0 var(--wl-shell-gutter);
	padding-bottom: 84px !important;
	padding-top: 34px !important;
	width: 100%;
}

/* Pagination: square buttons like the site's own controls, current page
 * filled in ink. WordPress ships blue links with dots between numbers. */
.wl-catalog .wp-block-query-pagination,
.wl-product-grid .wp-block-query-pagination,
.wl-search-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 44px;
}

.wl-catalog .wp-block-query-pagination .page-numbers,
.wl-product-grid .wp-block-query-pagination .page-numbers,
.wl-search-pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--wl-line);
	border-radius: 10px;
	color: var(--wl-ink);
	display: inline-flex;
	font-family: var(--wl-font);
	font-size: 14px;
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	padding: 0 10px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wl-catalog .wp-block-query-pagination .page-numbers:hover,
.wl-catalog .wp-block-query-pagination .page-numbers:focus-visible,
.wl-product-grid .wp-block-query-pagination .page-numbers:hover,
.wl-search-pagination .page-numbers:hover {
	background: var(--wl-soft);
	border-color: var(--wl-ink);
	color: var(--wl-ink);
}

.wl-catalog .wp-block-query-pagination .page-numbers.current,
.wl-product-grid .wp-block-query-pagination .page-numbers.current,
.wl-search-pagination .page-numbers.current {
	background: var(--wl-ink);
	border-color: var(--wl-ink);
	color: #ffffff;
	font-weight: 600;
}

/* Arrows read as the site's square buttons, with the arrow centred. */
.wl-catalog .wp-block-query-pagination .wp-block-query-pagination-previous,
.wl-catalog .wp-block-query-pagination .wp-block-query-pagination-next,
.wl-product-grid .wp-block-query-pagination .wp-block-query-pagination-previous,
.wl-product-grid .wp-block-query-pagination .wp-block-query-pagination-next {
	align-items: center;
	border: 1px solid var(--wl-line);
	border-radius: 10px;
	color: var(--wl-ink);
	display: inline-flex;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	text-decoration: none;
}

.wl-catalog .wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wl-catalog .wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wl-product-grid .wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wl-product-grid .wp-block-query-pagination .wp-block-query-pagination-next:hover {
	background: var(--wl-soft);
	border-color: var(--wl-ink);
}

.wl-catalog .wp-block-query-pagination .wp-block-query-pagination-previous-arrow,
.wl-catalog .wp-block-query-pagination .wp-block-query-pagination-next-arrow,
.wl-product-grid .wp-block-query-pagination .wp-block-query-pagination-previous-arrow,
.wl-product-grid .wp-block-query-pagination .wp-block-query-pagination-next-arrow {
	margin: 0;
}

/* Catalog pagination (theme-rendered): square buttons in the site's own
 * style, current page filled in ink, "…" only where pages are skipped. */
.wl-catalog-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 40px 0 4px;
}

.wl-catalog-pagination .wl-page-num,
.wl-catalog-pagination .wl-page-nav {
	align-items: center;
	aspect-ratio: auto;
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 10px;
	color: var(--wl-ink);
	display: inline-flex;
	font-family: var(--wl-font);
	font-size: 14px;
	justify-content: center;
	line-height: 1.2;
	min-height: 40px;
	min-width: 40px;
	padding: 0 12px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wl-catalog-pagination .wl-page-nav {
	gap: 8px;
	white-space: nowrap;
}

.wl-catalog-pagination .wl-page-num:hover,
.wl-catalog-pagination .wl-page-num:focus-visible,
.wl-catalog-pagination .wl-page-nav:hover,
.wl-catalog-pagination .wl-page-nav:focus-visible {
	background: var(--wl-soft);
	border-color: var(--wl-ink);
	color: var(--wl-ink);
}

.wl-catalog-pagination .wl-page-num.is-current {
	background: var(--wl-ink);
	border-color: var(--wl-ink);
	color: #ffffff;
	font-weight: 600;
}

.wl-catalog-pagination .wl-page-gap {
	color: var(--wl-muted);
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
}

/* Catalog head: the visible one is GONE, on purpose — the category name in
 * huge letters above the toolbar repeated what the user had just clicked and
 * pushed the books down 71px (medido en /product-category/clasicos/). The h1
 * stays in the DOM with `screen-reader-text`, so screen readers and search
 * engines still have a heading; no more `.wl-catalog-head` wrapper, no more
 * description paragraph, and no rules to style either. */

@media (max-width: 1100px) and (min-width: 782px) {

	.wl-site-header .wp-block-navigation-item__content {
		font-size: 12px;
	}
}

@media (max-width: 781px) {
	.wp-site-blocks {
		margin: 24px auto;
		width: calc(100% - 24px);
	}

	.wl-catalog {
		padding-top: 28px;
	}

	.wl-catalog > .wp-block-columns {
		margin-bottom: 20px;
	}

	.wl-product-grid .wp-block-woocommerce-product-template {
		column-gap: 10px !important;
		row-gap: 32px !important;
	}

}

/* -------------------------------------------------------------------------
 * Final viewport and proportion pass.
 * The parent theme adds root padding to the site wrapper. Keep the editorial
 * page inside the viewport and let its full-width sections fill that page,
 * rather than escaping into the browser canvas.
 * ------------------------------------------------------------------------- */

.wp-site-blocks {
	box-sizing: border-box;
	margin: 48px auto !important;
	max-width: 1824px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: min(1824px, calc(100% - 96px)) !important;
}

.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > main {
	box-sizing: border-box;
	max-width: none !important;
	width: 100% !important;
}

.wp-site-blocks > .wp-block-template-part > .alignfull,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.alignfull {
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* Grid metrics live in the single "cover plates" block further down
 * (--wl-plate): the old rules here forced four 1fr columns and a 4:5 cover,
 * which is what made catalog cards look different from home cards. */
.wl-product-grid .wp-block-woocommerce-product-template {
	margin: 24px auto 0 !important;
	max-width: none !important;
}

.wl-product-grid .wp-block-woocommerce-product-template > li {
	min-width: 0;
}

@media (max-width: 781px) {
	.wp-site-blocks {
		margin: 24px auto !important;
		width: calc(100% - 24px) !important;
	}

}

/* -------------------------------------------------------------------------
 * Homepage composition.
 * Keep the front page deliberately quieter than the catalog: one white
 * canvas, one editorial hero, and a compact four-up selection.
 * ------------------------------------------------------------------------- */

.wl-home-header {
	border-bottom: 0 !important;
	/* The wrapper carries no padding: the inner grid owns the rail gutter. */
	padding: 0 !important;
}

.wp-site-blocks .wl-home-header-inner {
	box-sizing: border-box;
	display: flex;
	gap: 24px;
	max-width: none !important;
	padding: 18px var(--wl-shell-gutter) 15px !important;
	width: 100% !important;
}

/* Visually hidden but available to screen readers and crawlers. */
.screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* Brand: the logo alone (no wordmark text beside it). Only the height is
 * set — the width follows the image's own proportions, never squished. */
.wl-home-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.wl-home-logo img {
	display: block;
	height: 72px;
	width: auto;
}

.wl-home-nav .wp-block-navigation__responsive-container,
.wl-home-nav .wp-block-navigation__responsive-container-content {
	width: auto;
}

.wl-home-tools .wp-block-woocommerce-customer-account,
.wl-home-tools .wc-block-customer-account {
	color: var(--wl-ink) !important;
	font-size: 14px;
	margin: 0;
}

.wl-home-tools .wc-block-customer-account__link,
.wl-home-tools .wc-block-customer-account__toggle {
	color: var(--wl-ink) !important;
	padding: 0 !important;
	text-decoration: none !important;
}

.wl-home-tools .wc-block-customer-account__link .label,
.wl-home-tools .wc-block-customer-account__toggle .label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.wl-home-tools .wc-block-customer-account__account-icon,
.wl-home-tools .wc-block-customer-account__visual > svg {
	color: var(--wl-ink) !important;
	height: 22px !important;
	width: 22px !important;
}

.wl-home-tools .wc-block-mini-cart__button {
	color: var(--wl-ink) !important;
	fill: var(--wl-ink) !important;
	min-height: 30px;
	min-width: 30px;
	padding: 0 !important;
	stroke: var(--wl-ink) !important;
}

.wl-home-tools .wc-block-mini-cart__icon {
	color: var(--wl-ink) !important;
	fill: var(--wl-ink) !important;
	height: 22px !important;
	width: 22px !important;
}

.wl-home-tools .wc-block-mini-cart__badge {
	display: inline-flex !important;
}

.wl-home {
	background: #ffffff;
	box-sizing: border-box;
	color: var(--wl-ink);
	margin: 0;
	overflow: hidden;
	padding-bottom: 76px;
	width: 100%;
}

/* Aviso para quien lea esto: el `<main>` de la portada NO puede ser un
 * bloque `core/group`. El tema padre trae `main.wp-block-group > * + * {
 * margin-top: 0 }`, pensada para sus plantillas, donde el contenido es un
 * bloque solo; en la portada se come todos los huecos entre secciones —de
 * 44/36/52px a 0— porque gana a `.wl-home-featured` y `.wl-home-cats` por
 * especificidad (0,1,2 contra 0,1,0). Por eso el contenedor es el bloque
 * `web-libreria/home-main`, que escribe su propio `<main class="wl-home">`.
 * Las secciones de la portada se separan con el margen que llevan aquí
 * abajo y en sus consultas por anchura. */

.wl-home-hero {
	/* Rounded card on the shared rail (same insets as the events banner): a
	 * light-gray panel that reads as the hero without running edge to edge.
	 * The artwork fades out of the gray on its left edge (see the media
	 * gradient) so the column/photo seam is a soft transition, not a cut. */
	background: #efefef;
	border-radius: 24px;
	box-sizing: border-box;
	margin: 20px auto 0;
	max-width: 1500px;
	min-height: 0;
	overflow: hidden;
	position: relative;
	width: calc(100% - var(--wl-shell-gutter) - var(--wl-shell-gutter));
}

/* Hero carousel: slides stack on top of each other and cross-fade with a
 * plain fade — no zoom, no drift; nothing moves, only opacity. The incoming
 * slide starts right away; the outgoing one fades on its own timeline, so
 * the two cross through white (the section background) without flashing. */
.wl-hero-track {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	/* Target height as a floor, never a ceiling: the copy column decides how
	 * tall the hero gets, so titles, text and buttons are never clipped
	 * (the hero clips overflow, so a fixed height would cut them off). */
	min-height: clamp(320px, 24vw, 380px);
}

.wl-hero-slide {
	column-gap: 0;
	display: grid;
	grid-column: 1 / -1;
	grid-row: 1;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	height: 100%;
	min-height: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease, visibility 0s linear 500ms;
	visibility: hidden;
	z-index: 1;
}

.wl-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 500ms ease;
	visibility: visible;
	z-index: 2;
}

/* Slides 2+ use an h2 for document outline; it must look identical to the
 * layout never jumps between slides. */
.wl-home-hero-copy .wl-hero-slide-title,
.wl-home-hero-copy h1 {
	color: var(--wl-ink);
	font-family: var(--wl-font-headings);
	/* Sizing tuned for Poppins (wider than the system stack): the 3-line
	 * cap keeps the copy column compact at every width instead of piling
	 * up to 5 giant lines that inflate the whole hero. */
	font-size: clamp(27px, 2.35vw, 40px);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.06;
	margin: 0 0 16px;
	max-width: 500px;
	text-wrap: balance;
}

/* Carousel controls: a compact square chip in the bottom-right, over the
 * artwork (like editorial sliders) — arrows beside the progress dots.
 * Corners match the site's buttons (10px) so it reads as UI, not a bubble. */
.wl-hero-nav {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	border: 0;
	border-radius: 10px;
	/* Anchored inside the artwork with a fixed inset — the media reaches the
	 * hero edges, so this keeps the chip over the photo at every width. */
	bottom: clamp(20px, 2.4vw, 34px);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	display: flex;
	gap: 6px;
	padding: 5px 8px;
	position: absolute;
	right: clamp(22px, 4vw, 72px);
	z-index: 6;
}

.wl-hero-dots {
	display: flex;
	gap: 8px;
}

.wl-hero-arrow {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	color: var(--wl-ink);
	cursor: pointer;
	display: flex;
	height: 38px;
	justify-content: center;
	padding: 0;
	position: static;
	transition: background-color 0.15s ease;
	width: 38px;
	z-index: 6;
}

.wl-hero-arrow:hover,
.wl-hero-arrow:focus-visible {
	background: var(--wl-soft);
	box-shadow: none;
}

/* The photo melts into the gray: a left-edge gradient in the panel color
	 * turns the hard seam into a soft fade. The controls chip floats above it. */
.wl-home-hero-media {
	position: relative;
}

.wl-home-hero-media::before {
	background: linear-gradient(90deg, #efefef 0%, rgba(239, 239, 239, 0.55) 7%, rgba(239, 239, 239, 0) 20%);
	content: "";
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

.wl-hero-dot {
	align-self: center;
	background: rgba(17, 17, 17, 0.22);
	border: 0;
	border-radius: 2px;
	box-sizing: border-box;
	cursor: pointer;
	height: 7px;
	overflow: hidden;
	padding: 0;
	position: relative;
	transition: background-color 400ms ease, width 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 7px;
}

.wl-hero-dot.is-active {
	background: var(--wl-ink);
	width: 26px;
}

/* A quiet progress sweep fills the active dot over the 10s cycle. It pauses
 * together with the rotation (the script toggles .is-paused on the section)
 * so the fill always matches the moment the slide actually changes. */
.wl-hero-dot.is-active::before {
	animation: wl-hero-dot-progress 10s linear forwards;
	background: rgba(255, 255, 255, 0.5);
	content: "";
	inset: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left center;
}

.wl-home-hero.is-paused .wl-hero-dot.is-active::before {
	animation-play-state: paused;
}

@keyframes wl-hero-dot-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

.wl-hero-dot:focus-visible {
	outline: 2px solid var(--wl-ink);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wl-hero-slide,
	.wl-hero-slide .wl-home-hero-media img,
	.wl-hero-slide .wl-home-hero-copy {
		transform: none;
		transition: none;
	}

	.wl-hero-dot,
	.wl-hero-dot.is-active {
		transition: none;
	}

	.wl-hero-dot.is-active::before {
		animation: none;
	}
}

.wl-home-hero-copy {
	align-content: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 24px clamp(24px, 3vw, 48px) 24px clamp(20px, 2.5vw, 40px);
}

.wl-home-hero-copy p {
	color: #454545;
	font-size: clamp(14.5px, 1.05vw, 17px);
	line-height: 1.45;
	margin: 0 0 22px;
	max-width: 470px;
}

.wl-home-hero-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.wl-home-button {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	justify-content: center;
	min-height: 46px;
	padding: 0 24px;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.wl-home-button-primary {
	background: var(--wl-ink);
	color: #ffffff !important;
}

.wl-home-button-primary:hover,
.wl-home-button-primary:focus-visible {
	background: #343434;
	color: #ffffff !important;
}

.wl-home-button-secondary {
	background: transparent;
	border: 1.5px solid var(--wl-ink);
	color: var(--wl-ink) !important;
}

/* Outlined buttons get a soft fill on hover, not a solid black one: the same
 * rule the small controls follow, so nothing in the shop turns into a black
 * block under the pointer. */
.wl-home-button-secondary:hover,
.wl-home-button-secondary:focus-visible {
	background: var(--wl-soft);
	border-color: var(--wl-ink);
	color: var(--wl-ink) !important;
}

/* On the light panel the hero buttons keep the site's standard scheme:
 * solid ink primary, outlined secondary. */

.wl-home-hero-media {
	height: 100%;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}

.wl-home-hero-media img {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.wl-home-featured {
	margin: 44px 0 0;
}

.wl-home-cats {
	margin: 44px 0 0;
}

.wl-featured-heading {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
}

.wl-heading-link {
	border-bottom: 0 !important;
	color: var(--wl-ink) !important;
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
}

.wl-heading-link span {
	display: inline-block;
	margin-left: 5px;
	transition: transform 0.15s ease;
}

.wl-heading-link:hover span,
.wl-heading-link:focus-visible span {
	transform: translateX(3px);
}

.wl-heading-link:hover,
.wl-heading-link:focus-visible {
	color: var(--wl-muted) !important;
}

/* One shared rail for every home section: header, hero copy, shelves and
 * categories all start and end on the same fluid gutter (--wl-shell-gutter)
 * — wide monitors get generous, consistent margins while the hero artwork
 * itself runs full-bleed like the reference. The trust band keeps its own
 * rail on the rule that lays it out. */
.wl-home-featured .wl-featured-heading,
.wl-home-featured .wl-featured-carousel,
.wl-home-cats .wl-featured-heading,
.wl-home-cats .wl-cats-carousel {
	margin-left: var(--wl-shell-gutter);
	margin-right: var(--wl-shell-gutter);
}

.wl-featured-heading h2 {
	color: var(--wl-ink);
	font-family: var(--wl-font-headings);
	font-size: clamp(30px, 2.7vw, 44px);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.05;
	margin: 0;
}

/* Estantería de la página de búsqueda: la MISMA baldosa elástica que el
 * catálogo, con el token del sitio. Antes llevaba su propia escalera de
 * columnas fijas (240/208/176px) en la capa de móvil, que además de ir por
 * su cuenta se comía las bandas de más arriba y acababa declarando
 * `auto-fill` de ancho fijo: en el móvil sacaba una tarjeta de 176px en una
 * fila de 332 y dejaban 156px de blanco a su derecha —medido a 390px—,
 * que es el hueco raro que se veía en el móvil. */
.wl-featured-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(var(--wl-plate), 1fr));
}

.wl-featured-media {
	align-items: center;
	background: #f5f5f5;
	display: flex;
	/* Plate height is fixed per breakpoint further down (240/208/176px on
	 * the home, 296/248/208 elsewhere) — that keeps the shelf arrows
	 * anchored to a constant offset at every width. */
	justify-content: center;
	overflow: hidden;
	width: 100%;
	position: relative;
}

.wl-featured-media > a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.wl-featured-media img {
	display: block;
	height: auto;
	max-height: 92%;
	max-width: 78%;
	object-fit: contain;
	width: auto;
}

/* =========================================================================
 * Home book shelves: horizontal rows with side arrows (same interaction
 * model as the PDP recommendations carousel). The scroll container is the
 * row; arrows anchor to the wrapper and never move. Cards keep the exact
 * width of the old 5-column grid, so the look is identical when a row fits
 * without scrolling.
 * ====================================================================== */
.wl-featured-carousel {
	position: relative;
}

.wl-featured-row {
	-webkit-overflow-scrolling: touch;
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	/* Breathing room so hover shadows never clip at the row edges (top
	 * padding is also baked into the .wl-row-arrow offsets). */
	padding: 6px 0 22px;
	scrollbar-width: none;
	/* No scroll-snap here: it fights the JS glide (re-snaps every frame and
	 * kills the animation). Magnetic settling is done in home-carousels.js. */
}

.wl-featured-row::-webkit-scrollbar {
	display: none;
}

.wl-featured-row > * {
	flex: 0 0 calc((100% - 48px) / 5);
	min-width: 0;
}

.wl-row-arrow {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--wl-line);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	color: var(--wl-ink);
	cursor: pointer;
	display: flex;
	height: 46px;
	justify-content: center;
	padding: 0;
	position: absolute;
	/* Anchored to the top, level with the cover plates, fixed offset — same
	 * scheme as the PDP arrows, so scrolling and resizing never move them.
	 * Plates are fixed-height per breakpoint: half the plate minus half the
	 * arrow, plus the row's 6px top padding: 240/2 − 23 + 6 = 103px. */
	top: 103px;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
	width: 46px;
	z-index: 3;
}

.wl-row-arrow--prev {
	left: -14px;
}

.wl-row-arrow--next {
	right: -14px;
}

.wl-row-arrow:hover,
.wl-row-arrow:focus-visible {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.wl-row-arrow:disabled {
	cursor: default;
	opacity: 0.3;
}

/* Without overflow there is nothing to scroll: hide the arrows completely
 * so short rows never show dead controls. */
.wl-featured-carousel:not(.wl-row-has-arrows) .wl-row-arrow {
	display: none;
}

.wl-featured-carousel:focus-visible {
	outline: 2px solid var(--wl-ink);
	outline-offset: 4px;
}

/* El descuento es la primera pastilla de la columna de etiquetas: dentro de
 * .wl-badges ya no se posiciona, se apila sola. */
.wl-featured-badge {
	background: #e3402e;
	border-radius: 0 0 3px 0;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 6px 9px;
}

/* =========================================================================
 * Book prices: one source for every surface.
 *
 * The card price (home shelves, catalog, category, author, search and the
 * product page recommendations) and the product page price are the same thing
 * at two sizes, so the tones live in --wl-price / --wl-price-was and the
 * markup WooCommerce prints is styled once, here: <del> is the crossed-out
 * amount, <ins> the current one. Every surface is listed because the theme
 * paints its own cards in PHP and grafts the rest onto WooCommerce's blocks,
 * and both end up inside these wrappers.
 * ====================================================================== */

/* The crossed-out amount: quiet grey, a step smaller, never the focus. */
.wl-featured-price del,
.wl-pdp-price del,
.wl-catalog del,
.wl-product-grid del,
.wl-pdp del,
.wl-search del,
.woocommerce-Price-amount del,
.woocommerce-Price-amount del .woocommerce-Price-amount {
	color: var(--wl-price-was) !important;
	font-size: 0.74em;
	opacity: 1;
	text-decoration-color: currentColor;
}

/* The current amount: the only red in the block, underlined by nothing.
 * No ".woocommerce-Price-amount:last-child" here: the struck-out amount is
 * also the last child of its own <del>, and that selector was painting the
 * crossed-out figure red. */
.wl-featured-price ins,
.wl-pdp-price ins,
.wl-catalog ins,
.wl-product-grid ins,
.wl-pdp ins,
.wl-search ins,
.woocommerce-Price-amount ins {
	color: var(--wl-price) !important;
	font-style: normal;
	text-decoration: none;
}

/* WooCommerce sets the size and the colour on the amount itself, so the <del>
 * scale above was landing on an element whose own child kept 13px: the
 * crossed-out figure never actually got smaller, which is what made a
 * discounted price twice as wide as a plain one and left it crowding the
 * cart button. The amount (and the bdi inside it) inherit from the del/ins
 * they live in, on the cards and on the product page alike. */
.wl-featured-price .woocommerce-Price-amount,
.wl-featured-price del .woocommerce-Price-amount,
.wl-featured-price ins .woocommerce-Price-amount,
.wl-pdp-price del .woocommerce-Price-amount,
.wl-pdp-price ins .woocommerce-Price-amount,
.wl-featured-card .wl-featured-price bdi,
.wl-pdp-price bdi {
	color: inherit;
	font-size: inherit;
}

/* Novedad / Premiado: one tidy column in the corner, under the discount chip.
 * Every badge is a same-format pill; the discount keeps its own red chip and
 * the rest are dark/gold.
 *
 * The column is a real flex column, and that is the whole point: it used to
 * position each badge on its own and push the next one down by a percentage of
 * its OWN height. But the chips are not all the same height (the discount is
 * bigger: 13px type against 10.5px), so the second badge was shifted by the
 * wrong amount and «Premiado» ended up tucked under the discount chip. In a
 * column every badge takes the space it really needs and the gap is the same
 * for all of them, so no combination (sale + novedad + premiado) can collide. */
.wl-badges {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 3px;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 1;
}

.wl-badge {
	background: var(--wl-ink);
	border-radius: 3px;
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1;
	padding: 5px 8px;
	text-transform: uppercase;
}

.wl-badge--award {
	background: #b98a2f;
}

/* Card: hairline border around cover + text block (like the reference).
 * Flex column: title and author sit on top, the price + cart row is pinned
 * to the bottom with margin-top:auto so every card in a row — whatever its
 * title length — lines up its buy row on the same baseline. */
.wl-featured-card {
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	padding-bottom: 4px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wl-featured-card:hover {
	border-color: rgba(17, 17, 17, 0.3);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Título de la tarjeta: dos líneas y, si no cabe, los tres puntos.
 *
 * Aquí hubo un `line-clamp: 2` que se quitó porque cortaba a media
 * palabra y sin puntos: a 122px de ancho "El coronel no tiene quien le
 * escriba" y "El amor en los tiempos de cólera" ocupan tres líneas y solo se
 * veían las dos primeras. El problema de aquella versión no era el recorte,
 * sino cómo se hacía: una caja de altura fija con `overflow: hidden` se
 * limita a tapar lo que sobra, y lo que tapa no pone nada. Eso se resuelve
 * con `-webkit-line-clamp`, que recorta la última línea que se ve y le
 * añade el «…» de verdad. Mismo límite de dos líneas, pero el que se lee
 * termina en puntos y se entiende que el título sigue.
 *
 * Dos líneas y no una porque la tarjeta más estrecha del sitio es de 176px
 * con letra de 15-16px: con una sola línea, «El coronel no tiene qui…» en
 * todas, que se pierde el título de verdad. Con dos entra entero casi todo
 * lo que hay ahora —medido: ninguno de los 34 títulos de tarjeta de la web
 * pasa de dos líneas a 1280, 768, 390 y 320— y el recorte solo aparece cuando
 * un nombre es de verdad largo.
 *
 * El texto entero sigue en el DOM: se recorta lo que se ve, no lo que se
 * lee, así que un lector de pantalla sigue leyendo el título completo y el
 * enlace sigue siendo el mismo.
 *
 * La fila no se descuadra: el alto de la tarjeta lo fija la rejilla y la
 * fila de precio lleva `margin-top:auto`, así que los botones de comprar
 * siguen alineados abajo aunque el título ocupe dos líneas o una.
 *
 * Y las dos líneas están RESERVADAS siempre (`min-height: 2.4em`, dos
 * interlineados): dentro de una fila la rejilla ya iguala los altos, pero
 * entre filas no —medido a 1199: 368.6 en la primera y 350.6 en la segunda,
 * según el título ocupara 2 líneas o 1—, así que los precios de una fila
 * caían 18px más arriba que en la de al lado. Con la reserva, todas las
 * tarjetas miden lo mismo y el precio cae siempre en el mismo sitio.
 *
 * 15px es el título de la tarjeta en TODO el sitio, y esta regla es la única
 * que lo dice. Había además dos `font-size: 16px` sueltos, uno por debajo de
 * 900px y otro por debajo de 781px, que solo tocaban el `h3` de la tarjeta de
 * inicio: la rejilla imprime su título como `h2.wp-block-post-title` y se
 * quedaba en 15px, de modo que el mismo libro se leía a distinto tamaño
 * según dónde estuviera —medido a 561px: 16px en inicio, 15px en el
 * catálogo—. Ahora la tarjeta es una: el `h3` y el `h2` del bloque van
 * listados juntos en todas sus reglas, y cambiar el estilo de la tarjeta en
 * un sitio lo cambia en todos. */
.wl-featured-card h3,
.wl-featured-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--wl-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	/* Dos interlineados reservados: ver el comentario de arriba. En móvil
	 * esta misma caja pide `--wl-tap` (44px), que es la banda que entra
	 * después. */
	min-height: 2.4em;
	margin: 12px 12px 2px;
	overflow: hidden;
}

.wl-featured-card h3 a,
.wl-featured-card .wp-block-post-title a {
	color: var(--wl-ink) !important;
	text-decoration: none;
}

.wl-featured-card h3 a:hover,
.wl-featured-card h3 a:focus-visible,
.wl-featured-card .wp-block-post-title a:hover,
.wl-featured-card .wp-block-post-title a:focus-visible {
	color: var(--wl-muted) !important;
}

.wl-featured-card p {
	font-size: 13px;
	line-height: 1.3;
	margin: 0 12px 3px;
}

/* Autor: una sola línea, con puntos si no cabe. Antes crecía a dos líneas y
 * la tarjeta entera crecía con él, de modo que una fila de libros quedaba
 * con los precios a alturas distintas según el autor que le tocara. Con el
 * `min-height` ya no hace falta como reserva: la línea única siempre ocupa lo
 * mismo y todas las tarjetas de la rejilla miden lo mismo. */
.wl-featured-card .wl-featured-author {
	display: block;
	min-height: 1.3em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Price + add-to-cart row, pinned to the card bottom like the reference.
 * The row never breaks into two lines: a discounted price is two amounts
 * ("14,90 € 12,70 €") and on the smallest tiles it used to wrap, which made
 * that card's buy row taller and broke the alignment of the whole row.
 *
 * No "space-between" here: it poured the free width into the gap between the
 * price and the cart button, so the breathing room depended on how long the
 * price was — a discounted price sat ~48px from the button while a plain one
 * sat ~95px away, and a row of cards looked randomly cramped. The price now
 * takes the slack and the button keeps the same place on every card. */
.wl-featured-buy {
	align-items: center;
	display: flex;
	gap: 10px;
	margin: auto 12px 12px;
}

.wl-featured-buy .wl-featured-price {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	/* WooCommerce's block stylesheet forces "white-space: normal" on its
	 * price block, which is what made discounted prices wrap. */
	white-space: nowrap;
}

/* On the smallest tiles a two-amount price needs a touch less type to sit
 * on one line next to the cart button. */
@media (max-width: 600px) {

	.wl-featured-buy .wl-featured-price {
		font-size: 13.5px;
	}

	/* 176px tile: a discounted price (two amounts) plus the cart button needs
	 * a couple of extra pixels. Tighten the text inset and the gap — the
	 * title, author and price keep the same left line. The title needs both
	 * of its names: the catalog and the recommendations print it as
	 * "h2/h3.wp-block-post-title", and without the second selector those
	 * titles kept the 12px base inset while the author and the price moved
	 * to 10px, leaving the title hanging 2px to the right of the column. */
	.wl-featured-card h3,
	.wl-featured-card .wp-block-post-title,
	.wl-featured-card p {
		margin-left: 10px;
		margin-right: 10px;
	}

	.wl-featured-buy {
		gap: 4px;
		margin-left: 10px;
		margin-right: 10px;
	}
}

.wl-featured-buy .wl-featured-price {
	flex: 1 1 auto;
	margin: 0 !important;
}

.wl-card-cart {
	align-items: center;
	border: 1px solid var(--wl-line);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--wl-ink) !important;
	display: flex;
	height: 32px;
	justify-content: center;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	width: 36px;
}

.wl-featured-card {
	position: relative;
}

/* A quiet hover: a soft fill and a firmer outline. Filling this 36px button
 * solid black turned it into a black blob under the pointer — a jump much
 * bigger than the button itself, and the same jarring trick this theme
 * avoids everywhere else on small controls. */
.wl-card-cart:hover,
.wl-card-cart:focus-visible {
	background: var(--wl-soft);
	border-color: var(--wl-ink);
	color: var(--wl-ink) !important;
}

.wl-featured-price {
	margin-top: 6px !important;
}

.wl-featured-author {
	color: var(--wl-ink);
}

/* Category carousel: one card per product category, generated from the real
 * catalog so new categories appear (and empty ones disappear) by themselves.
 * Reference layout: fixed square cards — width never scales with the screen,
 * wider monitors simply reveal more cards — with round side arrows
 * underneath (see assets/home-carousels.js). */
.wl-cats-carousel {
	position: relative;
}

.wl-cats-grid {
	--wl-cat-size: 240px;
	--wl-cat-cover: 112px;
	--wl-cat-cover-mid: 136px;
	column-gap: 16px;
	display: grid;
	grid-auto-columns: var(--wl-cat-size);
	grid-auto-flow: column;
	/* Vertical padding gives the hover lift and the opening fan room, so
	 * nothing clips against the scroll container's edges (overflow-x also
	 * clips vertically); the bottom also hosts the hover shadow (32px). */
	padding: 10px 0 32px;
	overflow-x: auto;
	scrollbar-width: none;
}

.wl-cats-grid::-webkit-scrollbar {
	display: none;
}

/* Fixed card size per breakpoint: square at every width. Flat scale — no
 * size jump on very wide monitors (bigger cards read as "the page grew"). */
@media (max-width: 1279px) {
	.wl-cats-grid {
		--wl-cat-size: 224px;
	}
}

/* Category cards: each shelf gets a warm editorial tint (assigned in HTML
 * via --wl-cat-tint) so the row reads as colourful library shelves. The
 * card is styled as a physical book: spine light on the left edge, page
 * block at the bottom, soft lifted shadow; the covers fan up from the
 * bottom edge and spread open on hover. */
.wl-cat-card {
	aspect-ratio: 1;
	background: var(--wl-cat-tint, #f3f3f3);
	border-radius: 16px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 12px 26px -20px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	color: var(--wl-ink) !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 26px 26px 0;
	position: relative;
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
	width: var(--wl-cat-size);
}

/* Spine: a soft vertical light along the left edge, like a book standing
 * with its binding towards us. */
.wl-cat-card::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.025) 10px, rgba(0, 0, 0, 0) 26px);
	border-radius: 16px 0 0 16px;
	content: "";
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 26px;
}

/* Page block: a faint groove along the bottom edge, like the sheet stack
 * of a closed book. */
.wl-cat-card::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
	border-radius: 0 0 14px 14px;
	bottom: 0;
	content: "";
	height: 7px;
	left: 10px;
	pointer-events: none;
	position: absolute;
	right: 10px;
}

.wl-cat-card:hover,
.wl-cat-card:focus-visible {
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 16px 30px -14px rgba(0, 0, 0, 0.28);
	transform: translateY(-5px);
}

.wl-cat-card h3 {
	font-family: var(--wl-font);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
}

.wl-cat-covers {
	align-items: flex-end;
	display: flex;
	justify-content: center;
	margin: auto -10px 0;
	position: relative;
}

.wl-cat-covers img {
	background: #ffffff;
	border-radius: 3px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	display: block;
	height: var(--wl-cat-cover, 124px);
	object-fit: contain;
	position: relative;
	transform-origin: bottom center;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	width: auto;
}

/* The hand of cards — but only when there are exactly three covers.
 * With fewer books the roles change (checked with nth-last-child) so no
 * single book ever inherits a side book's rotation. */
.wl-cat-covers img:first-child:nth-last-child(3) {
	height: var(--wl-cat-cover);
	z-index: 1;
}

.wl-cat-covers img:nth-child(2):nth-last-child(2) {
	height: var(--wl-cat-cover-mid);
	margin: 0 -16px;
	z-index: 2;
}

.wl-cat-covers img:nth-child(3) {
	height: var(--wl-cat-cover);
	z-index: 1;
}

/* One book: stands tall and centred, no fan. */
.wl-cat-covers img:only-child {
	height: var(--wl-cat-cover-mid);
	margin: 0;
	z-index: 2;
}

/* Two books: the second stands slightly taller in front. */
.wl-cat-covers img:last-child:nth-child(2) {
	height: var(--wl-cat-cover-mid);
	margin-left: -16px;
	z-index: 2;
}

/* Hover: the hand of cards opens — side books rotate outwards, the middle
 * one lifts towards the reader. Only within a three-book hand. */
.wl-cat-card:hover .wl-cat-covers img:first-child:nth-last-child(3),
.wl-cat-card:focus-visible .wl-cat-covers img:first-child:nth-last-child(3) {
	transform: rotate(-7deg) translateX(-5px);
}

.wl-cat-card:hover .wl-cat-covers img:nth-child(3),
.wl-cat-card:focus-visible .wl-cat-covers img:nth-child(3) {
	transform: rotate(7deg) translateX(5px);
}

.wl-cat-card:hover .wl-cat-covers img:nth-child(2):nth-last-child(2),
.wl-cat-card:hover .wl-cat-covers img:only-child,
.wl-cat-card:hover .wl-cat-covers img:last-child:nth-child(2),
.wl-cat-card:focus-visible .wl-cat-covers img:nth-child(2):nth-last-child(2),
.wl-cat-card:focus-visible .wl-cat-covers img:only-child,
.wl-cat-card:focus-visible .wl-cat-covers img:last-child:nth-child(2) {
	transform: translateY(-9px);
}

/* Floating round arrows, vertically centred on the card row. */
.wl-cats-arrow {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	color: var(--wl-ink);
	cursor: pointer;
	display: flex;
	height: 46px;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: calc(50% - 23px);
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
	width: 46px;
	z-index: 3;
}

.wl-cats-arrow--prev {
	left: -23px;
}

.wl-cats-arrow--next {
	right: -23px;
}

.wl-cats-arrow:hover,
.wl-cats-arrow:focus-visible {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.wl-cats-arrow:disabled {
	cursor: default;
	opacity: 0.3;
}

/* Without overflow there is nothing to scroll: hide the arrows. */
.wl-cats-carousel:not(.wl-cats-has-arrows) .wl-cats-arrow {
	display: none;
}

/* Newsletter band (optional, Apariencia → Personalizar → Portada). */
.wl-home-newsletter {
	background: #f3f3f3;
	margin-top: 56px;
	padding: 52px 22px;
}

/* =========================================================================
 * Events on the home: rounded warm-paper panel with the exact reference
 * layout — heading + sub + underlined "Ver todos los eventos →", then a
 * board of cards: the first event wide (date column, copy, button, photo
 * filling the right), the rest compact (photo on top, title, excerpt,
 * hairline, time/venue with icons).
 * ====================================================================== */
.wl-home-events {
	margin: 52px 0 0;
}

.wl-events-banner {
	background: #faf6ef;
	border-radius: 24px;
	box-sizing: border-box;
	color: var(--wl-ink);
	margin: 0 var(--wl-shell-gutter);
	padding: clamp(28px, 3vw, 56px);
}

.wl-events-banner-head {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin: 0 0 clamp(20px, 2.2vw, 36px);
}

.wl-events-banner-head h2 {
	color: var(--wl-ink);
	font-family: var(--wl-font-headings);
	font-size: clamp(34px, 3.3vw, 56px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0;
}

.wl-events-sub {
	color: var(--wl-muted);
	font-size: clamp(14px, 1.05vw, 17px);
	line-height: 1.45;
	margin: 10px 0 0;
}

.wl-events-all {
	border-bottom: 1px solid rgba(17, 17, 17, 0.45);
	color: var(--wl-ink) !important;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	padding: 2px 0 4px;
	text-decoration: none;
	white-space: nowrap;
}

.wl-events-all span {
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.15s ease;
}

.wl-events-all:hover span,
.wl-events-all:focus-visible span {
	transform: translateX(3px);
}

.wl-events-all:hover,
.wl-events-all:focus-visible {
	border-bottom-color: rgba(17, 17, 17, 0.85);
	color: var(--wl-ink) !important;
}

/* Board: featured card takes ~62%, the two compact ones split the rest.
 * Fixed-height grid rows keep every card level; on narrow screens it
 * becomes a simple 1-col stack. */
.wl-events-board {
	display: grid;
	gap: clamp(12px, 1.2vw, 20px);
	/* Fixed row height keeps the featured card at a readable ~1.7:1 — lower
	 * than before so the section doesn't dominate the page. */
	grid-auto-rows: clamp(330px, 24vw, 480px);
	grid-template-columns: 2.5fr 1fr 1fr;
}

.wl-events-board .wl-event-card--compact:nth-child(n + 4) {
	display: none;
}

.wl-event-card {
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 16px;
	display: flex;
	gap: 0;
	overflow: hidden;
	padding: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.wl-event-card:hover {
	border-color: rgba(17, 17, 17, 0.35);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}

/* Featured card: horizontal, date column + copy + photo. The grid row is
 * 1fr (equal to the compact cards), so the photo fills whatever the copy
 * needs and all three cards always end at the same line. */
.wl-event-card--featured {
	align-items: stretch;
	flex-direction: row;
}

.wl-event-card--featured .wl-event-main {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	gap: clamp(22px, 1.8vw, 34px);
	min-width: 0;
	padding: clamp(26px, 2.4vw, 44px) clamp(24px, 2vw, 38px) clamp(26px, 2.4vw, 44px) clamp(28px, 2.6vw, 48px);
}

.wl-event-card--featured .wl-event-datebox {
	border-right: 1px solid var(--wl-line);
	padding: 8px clamp(16px, 1.5vw, 26px) 0 0;
}

.wl-event-card--featured .wl-event-day {
	font-size: clamp(40px, 3vw, 60px);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.wl-event-card--featured .wl-event-month {
	font-size: clamp(11px, 0.85vw, 14px);
	margin-top: 6px;
}

.wl-event-card--featured .wl-event-datebox::after {
	background: rgba(17, 17, 17, 0.4);
	content: "";
	height: 1px;
	margin-top: clamp(10px, 1vw, 16px);
	width: clamp(26px, 2.2vw, 40px);
}

.wl-event-card--featured .wl-event-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 0;
}

.wl-event-card--featured .wl-event-button {
	margin-top: auto;
}

/* Both card shapes give the photo the same fixed share of the row and
 * crop it to fill; only the arrangement differs. */
.wl-event-card--featured .wl-event-photo,
.wl-event-card--compact .wl-event-photo {
	flex: 0 0 40%;
}

.wl-event-card--featured .wl-event-photo img,
.wl-event-card--compact .wl-event-photo img {
	/* `display: block` porque la imagen inline se sentaba sobre la línea de
	 * base: la caja del fotos salía 8px más alta que la imagen y recortaba
	 * por abajo. */
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Compact card: photo on top, copy below. The photo takes a fixed, modest
 * share of the card height (not "whatever is left"), so every compact card
 * in the row shows the same photo height and the description below gets
 * the room to be read in full. Titles clamp to 2 lines so copy blocks
 * stay level; excerpts are never clamped. */
.wl-event-card--compact {
	flex-direction: column;
}

.wl-event-card--compact .wl-event-photo {
	display: block;
	margin: 10px 10px 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}

.wl-event-card--compact .wl-event-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 14px 16px 16px;
}

.wl-event-datebox {
	color: var(--wl-ink);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	font-weight: 700;
	line-height: 1;
}

.wl-event-day {
	font-family: var(--wl-font);
	font-size: 26px;
}

.wl-event-month {
	color: var(--wl-muted);
	font-size: 10px;
	letter-spacing: 0.12em;
	margin-top: 4px;
	text-transform: uppercase;
}

.wl-event-body {
	min-width: 0;
}

/* Título del evento, entero: el `line-clamp: 2` recortaba sin puntos los
 * nombres largos ("Presentación con Íñigo Aguas" medía 50px de contenido en
 * 48px de caja) y el recorte caía justo en la última letra. */
.wl-event-title {
	font-family: var(--wl-font);
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.28;
	margin: 0;
}

.wl-event-excerpt {
	color: var(--wl-muted);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 10px 0 0;
}

.wl-event-card--featured .wl-event-title {
	font-size: clamp(21px, 1.8vw, 26px);
	line-height: 1.2;
}

.wl-event-title a {
	color: var(--wl-ink) !important;
	text-decoration: none;
}

.wl-event-title a:hover,
.wl-event-title a:focus-visible {
	color: var(--wl-muted) !important;
}

.wl-event-meta {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 12px 0 0;
}

.wl-event-meta-line {
	align-items: center;
	color: var(--wl-muted);
	display: flex;
	font-size: 13.5px;
	gap: 8px;
	line-height: 1.3;
}

.wl-event-meta-line svg {
	color: var(--wl-ink);
	flex: 0 0 16px;
}

.wl-event-card--featured .wl-event-meta {
	margin-top: 16px;
}

.wl-event-foot {
	margin-top: auto;
}

.wl-event-divider {
	border: 0;
	border-top: 1px solid var(--wl-line);
	margin: 14px 0 10px;
}

.wl-event-button {
	align-items: center;
	background: var(--wl-ink);
	border-radius: 10px;
	color: #ffffff !important;
	display: inline-flex;
	font-size: 14.5px;
	font-weight: 500;
	gap: 12px;
	justify-content: center;
	margin-top: 18px;
	padding: 14px 24px;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
	width: fit-content;
}

.wl-event-button span {
	display: inline-block;
	transition: transform 0.15s ease;
}

.wl-event-button:hover,
.wl-event-button:focus-visible {
	background: #333333;
	transform: translateY(-1px);
}

.wl-event-button:hover span,
.wl-event-button:focus-visible span {
	transform: translateX(3px);
}

/* Responsive: two compact cards beside the featured one give way to a
 * 2-col row, then everything stacks on phones (photo first). */
@media (max-width: 1100px) {
	.wl-events-board {
		grid-template-columns: 1fr 1fr;
		/* Auto rows: the featured card spans both columns and sets the height,
	 * the compact cards level to it — nothing can clip mid-content. */
		grid-auto-rows: auto;
	}

	.wl-events-board .wl-event-card--featured {
		grid-column: 1 / -1;
	}

	.wl-events-board .wl-event-card--compact:nth-child(n + 5) {
		display: none;
	}

	/* Full-width featured: the tall side datebox reads oddly on a wide
	 * card — switch to a horizontal date chip above the title. */
	.wl-event-card--featured .wl-event-main {
		flex-direction: column;
		gap: 14px;
		padding: 24px 26px 26px;
	}

	.wl-event-card--featured .wl-event-datebox {
		align-items: baseline;
		border-right: 0;
		flex-direction: row;
		gap: 8px;
		padding: 0;
	}

	.wl-event-card--featured .wl-event-datebox::after {
		display: none;
	}

	.wl-event-card--featured .wl-event-day {
		font-size: 34px;
	}

	.wl-event-card--featured .wl-event-month {
		font-size: 11px;
		margin-top: 0;
	}

	.wl-event-card--featured .wl-event-title {
		font-size: 22px;
	}

	.wl-event-card--featured .wl-event-photo {
		flex: 0 0 34%;
	}
}

@media (max-width: 781px) {
	.wl-events-banner {
		border-radius: 18px;
		margin: 0 var(--wl-shell-gutter);
		padding: 26px var(--wl-shell-gutter) 28px;
	}

	.wl-events-board {
		grid-auto-rows: auto;
		grid-template-columns: minmax(0, 1fr);
	}

	.wl-events-banner-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.wl-events-board .wl-event-card--compact:nth-child(n + 3) {
		display: none;
	}

	.wl-event-card--featured {
		flex-direction: column;
	}

	.wl-event-photo {
		flex: 0 0 auto;
		height: 170px;
		margin: 10px 10px 0;
		overflow: hidden;
		border-radius: 8px;
	}

	.wl-event-card--featured .wl-event-photo {
		flex: 0 0 auto;
		order: -1;
		/* Featured carries an extra content block (button); trim the photo
		 * a touch so both cards level out at the same height. */
		height: 150px;
	}

	.wl-event-card--compact .wl-event-photo {
		flex: 0 0 auto;
	}

	.wl-event-card--featured .wl-event-main {
		padding: 18px 16px 20px;
	}

	.wl-event-card--featured .wl-event-day {
		font-size: 32px;
	}

	.wl-event-card--featured .wl-event-title {
		font-size: 20px;
	}

	.wl-event-button {
		padding: 12px 20px;
	}
}

/* =========================================================================
 * Store band "La librería": editable trust/reassurance points under
 * the categories. Light card style, in tune with the category cards.
 * ====================================================================== */
/* Trust band: full-width white strip with hairlines (like the reference),
 * icon + title on one line, muted detail below — quiet, aligned to the rail. */
.wl-home-store {
	border-bottom: 1px solid var(--wl-line);
	border-top: 1px solid var(--wl-line);
	margin: 48px 0 0;
	padding: 34px 0;
}

.wl-home-store-grid {
	display: grid;
	gap: 12px 32px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-left: var(--wl-shell-gutter);
	margin-right: var(--wl-shell-gutter);
}

.wl-store-item {
	align-items: flex-start;
	display: flex;
	gap: 15px;
	padding: 0;
}

.wl-store-ico {
	align-items: center;
	color: var(--wl-ink);
	display: flex;
	flex: 0 0 24px;
	height: 24px;
	justify-content: center;
	margin-top: 1px;
	width: 24px;
}

.wl-store-copy h3 {
	font-family: var(--wl-font);
	font-size: 15.5px;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}

.wl-store-copy p {
	color: var(--wl-muted);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 5px 0 0;
}

.wl-newsletter-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1400px;
}

.wl-newsletter-copy h2 {
	font-family: var(--wl-font);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.05;
	margin: 0 0 8px;
}

.wl-newsletter-copy p {
	color: var(--wl-muted);
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
}

@media (max-width: 781px) {
	.wl-newsletter-inner {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 1200px) {
	.wl-row-arrow {
		top: 103px; /* home plate is 240px down to 900px: 240/2 − 23 + 6 row padding */
	}
}

/* Plate drops to 248px at ≤1000px — the arrow anchor follows (46px arrow:
 * 248/2 − 23). */
/* Elige tu próxima lectura on phones: same carousel, smaller square cards
 * (208px), swipe to move with dots underneath; side arrows stay desktop-only
 * (they would cover the single visible card). */
@media (max-width: 600px) {
	.wl-cats-grid {
		--wl-cat-size: 192px;
		--wl-cat-cover: 88px;
		--wl-cat-cover-mid: 108px;
	}

	.wl-cat-card {
		padding: 16px 16px 0;
	}

	.wl-cat-card h3 {
		font-size: 18px;
	}

	.wl-cats-arrow {
		display: none;
	}
}

@media (max-width: 1000px) {
	.wl-row-arrow {
		top: 87px; /* 208/2 − 23 + 6 row padding */
	}
}

@media (max-width: 900px) {
	.wl-home-header-inner {
		gap: 18px;
	}

	.wl-row-arrow {
		height: 40px;
		top: 90px; /* plate 208px at this width: 208/2 − 20 + 6 */
		width: 40px;
	}

	.wl-home-nav .wp-block-navigation__container {
		gap: 22px;
	}

	.wl-hero-track,
	.wl-hero-slide {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}

	/* Tablet: the copy column is narrow — a slightly smaller title keeps it
	 * to 2-3 lines (Poppins runs wide) and both hero buttons on one row. */
	.wl-home-hero-copy h1,
	.wl-home-hero-copy .wl-hero-slide-title {
		font-size: clamp(23px, 2.9vw, 30px);
	}

	.wl-row-arrow {
		height: 40px;
		top: 90px; /* plate 208px at this width: 208/2 − 20 + 6 */
		width: 40px;
	}

	.wl-home-store-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}	@media (max-width: 781px) {	.wl-home-logo img {
		height: 48px;
	}

	.wl-home-nav .wp-block-navigation__container {
		gap: 20px;
	}

	.wl-home-hero {
		border-radius: 18px;
		height: auto;
		margin: 16px var(--wl-shell-gutter) 0;
	}

	.wl-hero-track,
	.wl-hero-slide {
		height: auto;
		grid-template-columns: minmax(0, 1fr);
	}

	.wl-home-hero-copy {
		padding: 28px 22px 24px 26px;
	}

	.wl-home-hero-copy h1,
	.wl-home-hero-copy .wl-hero-slide-title {
		font-size: clamp(25px, 6.4vw, 34px);
		max-width: 560px;
	}

	.wl-home-hero-copy p {
		font-size: 14.5px;
		line-height: 1.5;
		margin: 0 0 18px;
	}

	.wl-home-hero-actions {
		gap: 12px;
	}

	.wl-home-hero-actions .wl-home-button {
		font-size: 13.5px;
		min-height: 46px;
		padding: 0 20px;
	}

	.wl-home-hero-media {
		height: clamp(210px, 46vw, 280px);
		min-height: 0;
	}

	.wl-home-featured {
		margin: 36px 0 0;
	}

	.wl-featured-row > * {
		flex-basis: calc((100% - 10px) / 2);
	}

	.wl-row-arrow {
		display: none;
	}

	.wl-home-store {
		border-bottom-width: 0;
		margin: 44px 0 0;
		padding: 26px 0 4px; /* grid carries the rail margins — no extra */
	}

	.wl-home-store-grid {
		row-gap: 20px;
	}

	.wl-featured-heading h2 {
		font-size: 30px;
	}

	.wl-featured-card p {
		font-size: 13px;
	}

	.wl-featured-badge {
		font-size: 12px;
		padding: 5px 8px;
	}
}

@media (max-width: 440px) {
	:root {
		--wl-shell-gutter: 16px;
	}

	.wl-home-hero-copy {
		padding-left: 22px;
		padding-right: 22px;
	}

	.wl-home-hero-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.wl-home-button {
		width: 100%;
	}

	.wl-home-featured {
		margin-left: 14px;
		margin-right: 14px;
	}

	.wl-featured-heading {
		align-items: flex-start;
		gap: 14px;
	}

	.wl-featured-heading h2 {
		font-size: 28px;
	}

	.wl-featured-heading a {
		flex: 0 0 auto;
	}

	.wl-featured-media {
		aspect-ratio: 1 / 1.05;
	}
}
/* Author archive page (/autor/{nombre}): the shop's classic layout —
 * editorial header, filter rail on the left, books on the right. */
.wl-author-archive {
	max-width: 1560px !important;
}

/* Header: eyebrow + name + divider + bio, centered — the "person" moment
 * before the shop interface takes over. */
.wl-author-head {
	margin: 0 22px 36px;
	text-align: center;
}

.wl-author-head .wl-author-name {
	color: var(--wl-ink);
	font-family: var(--wl-font);
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.02;
	margin: 0;
}

.wl-author-head .wl-author-name::after {
	content: "";
	background: var(--wl-ink);
	display: block;
	height: 2px;
	margin: 18px auto 0;
	opacity: 0.85;
	width: 44px;
}

.wl-author-bio {
	color: var(--wl-muted);
	font-size: 15px;
	line-height: 1.55;
	margin: 16px auto 0;
	max-width: 66ch;
}

/* The catalog pattern keeps its own two-column body and its 34px top
 * padding for the shop page; the header sits directly above, so join the
 * flow without stray whitespace. */
.wl-author-archive .wl-catalog {
	margin-top: 0;
	padding-top: 0 !important;
}

@media (max-width: 781px) {
	.wl-author-head {
		margin: 0 18px 28px;
	}
}

/* Narrow screens: the shop's drawer pattern — rail collapses behind the
 * "Filtros" toggle, books go two-across. */
@media (max-width: 1000px) {
	.wl-author-archive .wc-block-product-template__responsive.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.wl-author-archive .wc-block-product-template__responsive.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Owner switched the price facet off and no filters are active: drop the
 * whole column and let the books use the full width. */
.wl-author-archive:has(.wl-author-filters-none) .wl-catalog .wl-catalog-body {
	grid-template-columns: minmax(0, 1fr);
}

.wl-author-archive:has(.wl-author-filters-none) .wl-catalog .wl-catalog-filters {
	display: none;
}

/* Author page filter column: mirrors the shop sidebar's column anatomy
 * (top-aligned, sticky) while carrying only the author facets. The first
 * section header must share its line with the "N libros / Ordenar por"
 * toolbar on the right — measured to the pixel below. */
.wl-author-filters {
	padding-bottom: 10px;
}

/* La × de "Quitar el filtro de precio" ya no existe: el precio se quita
 * desmarcando y aplicando, o con el "Limpiar" del pie. El `position:
 * relative` del título se queda, que no estorba. */
.wl-author-filters .wl-filter-title {
	position: relative;
}

/* Los filtros de autor se comportan como el resto de enlaces claros:
 * tinta -> gris al hover, sin subrayado (lo pone la regla de la casa). */

/* Price facet: native range inputs stay invisible but handle keyboard and
 * touch; every visible element (track, fill, dots) is drawn by us and
 * positioned by JS with the browser's own thumb formula, so dots always
 * sit exactly on the line. */
.wl-price {
	position: relative;
}

.wl-price__viz {
	display: block;
	height: 20px;
	position: relative;
	width: 100%;
}

.wl-price__track {
	background: #e7e2d8;
	border-radius: 999px;
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: 9px;
}

.wl-price__fill {
	background: var(--wl-ink);
	border-radius: 999px;
	height: 3px;
	position: absolute;
	top: 8.5px;
}

.wl-price__dot {
	background: var(--wl-ink);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	height: 14px;
	position: absolute;
	top: 3px;
	transform: translateX(-7px);
	width: 14px;
}

.wl-price__dot[data-wl-price-dot="max"] {
	height: 16px;
	top: 2px;
	transform: translateX(-8px);
	width: 16px;
}

.wl-price__input {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	display: block;
	height: 20px;
	margin: -20px 0 0;
	opacity: 0;
	position: relative;
	width: 100%;
}

.wl-price__input:focus-visible + .wl-price__input + .wl-price__viz .wl-price__dot[data-wl-price-dot="min"],
.wl-price:focus-within .wl-price__dot {
	outline: 2px solid var(--wl-ink);
	outline-offset: 2px;
}

.wl-price__read {
	color: var(--wl-muted);
	display: flex;
	font-size: 12.5px;
	justify-content: space-between;
	margin-top: 4px;
}

.wl-price__read span {
	font-variant-numeric: tabular-nums;
}

/* The author's genre rows are the same .wl-filter-cat-item list the shop
 * sidebar uses, so they are styled once, further down, with the rest of
 * the sidebar filters. */

/* Live search suggestions dropdown (header search field). */
form.wl-home-search,
.wl-home-search form[role="search"],
.wl-home-search form.wp-block-search {
	position: relative;
}

.wl-sug {
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
	display: none;
	left: 0;
	padding: 14px 16px 10px;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 60;
}

.wl-sug.is-open {
	display: block;
}

.wl-sug-label {
	color: var(--wl-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.wl-sug-group {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.wl-sug-group li + li {
	margin-top: 2px;
}

.wl-sug-group a {
	align-items: center;
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--wl-ink);
	display: flex;
	gap: 10px;
	padding: 7px 8px;
	text-decoration: none;
	transition: background 0.12s ease;
}

.wl-sug-group a:hover,
.wl-sug-group a:focus-visible {
	background: #f5f2ec;
}

.wl-sug-author-badge {
	align-items: center;
	background: #f0ece3;
	border-radius: 50%;
	color: var(--wl-ink);
	display: flex;
	flex: 0 0 30px;
	font-family: var(--wl-font);
	font-size: 13px;
	font-weight: 700;
	height: 30px;
	justify-content: center;
}

.wl-sug-thumb {
	background: #f5f2ec;
	border: 1px solid var(--wl-line);
	border-radius: 3px;
	flex: 0 0 30px;
	height: 42px;
	object-fit: cover;
	width: 30px;
}

.wl-sug-info {
	flex: 1 1 auto;
	min-width: 0;
}

/* Título de la sugerencia, entero. `nowrap` + `ellipsis` lo cortaban a una
 * línea con puntos; la fila ya crece con el contenido (miniatura a la izquierda,
 * texto a la derecha), así que se deja que se parta en las líneas que necesite. */
.wl-sug-title {
	display: block;
	font-weight: 600;
	line-height: 1.25;
}

.wl-sug-meta {
	color: var(--wl-muted);
	display: block;
	flex: 0 0 auto;
	font-size: 12.5px;
	white-space: nowrap;
}

/* El autor de la sugerencia tampoco se recorta: `nowrap` + `ellipsis` lo
 * dejaban en "Por Gabriel García Márc…" y la fila crece sin problema. */
.wl-sug-book .wl-sug-meta {
	flex: 0 1 auto;
	white-space: normal;
}

.wl-sug-price {
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
}

.wl-sug-more {
	border-top: 1px solid var(--wl-line);
	color: var(--wl-ink);
	display: block;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 2px 6px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wl-sug-more:hover {
	color: var(--wl-muted);
}

.wl-sug-empty {
	color: var(--wl-muted);
	font-size: 13.5px;
	padding: 4px 2px 8px;
}

@media (max-width: 480px) {
	.wl-sug {
		position: fixed;
		left: 12px;
		right: 12px;
		top: 64px;
	}

	/* The 176px two-across grid turns every title into 2 cramped lines and
	 * the card into a tall sliver; one full-width book per row keeps the
	 * title on 1–2 lines and the card at a calm ratio. */
	.wl-catalog .wc-block-product-template,
	.wl-product-grid .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Header refinement to match the supplied reference: visible outlined search
 * field, thin utility icons, and the same quiet sans-serif rhythm. */

.wl-home-header-inner {
	padding-bottom: 14px;
	padding-top: 16px;
}

.wl-home-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	align-items: center;
	background: #ffffff !important;
	border: 1px solid #cfcfcf !important;
	border-radius: 5px;
	box-sizing: border-box;
	display: flex;
	height: 48px;
	min-height: 48px;
	padding: 0 12px 0 10px !important;
	width: 100% !important;
}

.wl-home-search .wp-block-search__input {
	background: transparent !important;
	border: 0 !important;
	box-sizing: border-box;
	clip: auto;
	clip-path: none;
	color: var(--wl-ink) !important;
	display: block;
	font-size: 15px;
	height: 46px;
	min-width: 0;
	order: 2;
	overflow: visible;
	outline: 0;
	padding: 0 0 0 12px !important;
	position: static;
	white-space: normal;
	width: 100%;
}

.wl-home-search .wp-block-search__input::placeholder {
	color: #999999;
	opacity: 1;
}

/* The magnifier is drawn by the button's own ::before (a masked 22px glyph),
 * because the block's own SVG icon is hidden. That leaves the button with no
 * content of its own, so its height came out 0: the parent theme sets
 * `height: auto` on `.wp-block-search.wp-block-search__button-inside
 * .wp-block-search__inside-wrapper .wp-block-search__button`, which is four
 * classes — one heavier than the plain `30px` and therefore the winner. A
 * 0-height box centred in a 48px field puts the icon 11px below the middle,
 * so the search was the one header icon that did not line up with the account
 * and the cart. The second selector below is the search form's own
 * `wp-block-search__button-inside` class compounded onto `wl-home-search`
 * (the form itself carries all three), which makes it five classes — one
 * heavier than the rule it has to beat. Desktop only: on phones the size
 * lives in the touch layer (44px), the single other owner of this box. */
@media (min-width: 782px) {
	.wl-home-search .wp-block-search__inside-wrapper .wp-block-search__button,
	.wl-home-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
		height: 30px;
		width: 30px;
	}
}

.wl-home-search .wp-block-search__button {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	color: var(--wl-ink) !important;
	display: inline-flex;
	flex: 0 0 30px;
	height: 30px;
	justify-content: center;
	margin: 0;
	order: 1;
	padding: 0 !important;
	position: relative;
	width: 30px;
}

.wl-home-search .wp-block-search__button svg {
	height: 25px;
	width: 25px;
}

.wl-home-search .wp-block-search__button .search-icon {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.35;
}

.wl-home-account .wc-block-customer-account__link {
	align-items: center;
	display: inline-flex;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.wl-home-account .wc-block-customer-account__visual {
	position: relative;
}

.wl-home-account .wc-block-customer-account__visual > svg {
	display: none !important;
}

/* Los iconos de la cuenta y de la cesta se enmascaran con los ficheros de
 * la librería —`user-circle` y `shopping-bag`—, igual que la lupa, y en la
 * misma caja: 24px centrada en el área del dedo con `inset: 0; margin: auto`,
 * que da el mismo resultado tanto en los 30px del escritorio como en los 44px
 * del táctil. Antes dibujaban la bolsa y el busto a mano con bordes CSS —
 * un `::before` y un `::after` cada uno, con la mitad de la altura de la
 * pieza menos su descentrado metidos a mano en los márgenes—, y esa
 * aritmética era justo lo que se veía descuadrado.
 *
 * El `<svg>` de WooCommerce y el suyo propio se apagan: el que se ve es el
 * de la librería. */
.wl-home-account .wc-block-customer-account__visual::before,
.wl-home-cart .wc-block-mini-cart__button::before {
	background-color: var(--wl-ink);
	content: "";
	height: 24px;
	inset: 0;
	margin: auto;
	position: absolute;
	width: 24px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wl-home-account .wc-block-customer-account__visual::before {
	-webkit-mask-image: url("assets/icons/user-circle.svg");
	mask-image: url("assets/icons/user-circle.svg");
}

.wl-home-cart .wc-block-mini-cart__button::before {
	-webkit-mask-image: url("assets/icons/shopping-bag.svg");
	mask-image: url("assets/icons/shopping-bag.svg");
}

/* El `::after` era la segunda mitad del dibujo a mano —el asa de la bolsa y
 * los hombros del busto—. Ya no hace falta. */
.wl-home-account .wc-block-customer-account__visual::after,
.wl-home-cart .wc-block-mini-cart__button::after {
	content: none;
	display: none;
}

.wl-home-cart .wc-block-mini-cart__button {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	color: var(--wl-ink) !important;
	display: inline-flex;
	justify-content: center;
	min-height: 30px;
	min-width: 30px;
	padding: 0 !important;
	position: relative;
	width: 30px;
}.wl-home-cart .wc-block-mini-cart__icon {
	display: none !important;
}

.wl-home-cart .wc-block-mini-cart__quantity-badge {
	display: contents;
}

@media (max-width: 1020px) and (min-width: 782px) {
	.wl-home-nav .wp-block-navigation__container {
		gap: 24px;
	}
}

/* Final reference pass: the page runs edge to edge and all three utility
 * symbols share one 30px optical box and one thin line weight. */

html,
body {
	background: #ffffff !important;
}

.wp-site-blocks {
	margin: 0 auto !important;
	max-width: none !important;
	width: 100% !important;
}

@media (min-width: 1024px) {
	.wl-home-header {
		padding-left: 0;
		padding-right: 0;
	}

	.wl-home-header-inner {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Shared header system.
 * The front page and every WooCommerce/content template use the same
 * three-column header. Desktop keeps the search field visible; mobile keeps
 * the same controls but turns search into a compact, labelled icon and lets
 * WordPress own the accessible navigation overlay.
 * ------------------------------------------------------------------------- */

.wl-home-header,
.wl-site-header {
	background: #ffffff !important;
	border-bottom: 1px solid var(--wl-line) !important;
	box-sizing: border-box;
	color: var(--wl-ink) !important;
	width: 100% !important;
}

/* La lupa es solo de táctil: por encima de 782px el campo de búsqueda está
 * en la cabecera y la lupa estorbaría. Se declara aquí, fuera de las bandas,
 * para que la regla de la capa móvil (que va después) la vuelva a enseñar. */
.wl-search-toggle {
	display: none;
}

.wl-home-header-inner {
	align-items: center !important;
	box-sizing: border-box;
	column-gap: clamp(24px, 3.4vw, 52px);
	display: grid !important;
	grid-template-columns: max-content minmax(0, 1fr) max-content;
	margin: 0 !important;
	max-width: none !important;
	min-width: 0;
	padding: 18px var(--wl-shell-gutter) 15px !important;
	width: 100% !important;
}

.wl-home-nav {
	/* Grid item, so the flex shorthand is inert here; kept so the computed
	 * value matches the rest of the header system. */
	flex: 1 1 auto;
	grid-column: 2;
	grid-row: 1;
	justify-content: flex-start;
	justify-self: start;
	margin: 0 !important;
	min-width: 0;
	width: auto !important;
}

.wl-home-nav .wp-block-navigation__container {
	align-items: center;
	flex-wrap: nowrap !important;
	gap: clamp(22px, 3vw, 42px) !important;
}

.wl-home-nav .wp-block-navigation-item__content {
	color: var(--wl-ink) !important;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	padding: 4px 0 !important;
	white-space: nowrap;
}

.wl-home-tools {
	align-items: center !important;
	display: flex !important;
	/* Grid item: inert shorthand, kept for the computed value. */
	flex: 0 0 auto;
	gap: 18px;
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	min-width: 0;
}

.wl-home-search {
	flex: 0 1 430px;
	margin: 0 !important;
	min-width: 200px;
	width: clamp(220px, 29vw, 430px);
}

/* El buscador del header es un icono de línea sobre fondo blanco. Heredaba
 * el relleno negro del tema padre al pasar el ratón (`.wp-block-search__button:hover`
 * → color del pie), que lo convertía en un cuadrado negro con el icono
 * encima en el mismo tono de tinta. Aquí el relleno es el mismo suave que
 * usan el carrito de la miniatura y los botones huecos. */
.wl-home-search .wp-block-search__button:hover,
.wl-home-search .wp-block-search__button:focus-visible {
	background: var(--wl-soft) !important;
	border-radius: 50%;
	color: var(--wl-ink) !important;
}

.wl-home-search .wp-block-search__button .search-icon {
	display: none !important;
}

.wl-home-account,
.wl-home-cart {
	flex: 0 0 30px;
	height: 30px;
	width: 30px;
}

.wl-home-account .wc-block-customer-account__visual,
.wl-home-cart .wc-block-mini-cart__button {
	height: 30px !important;
	width: 30px !important;
}

/* El grosor de línea de la cuenta y de la cesta lo pone ya el fichero de
 * la librería (1.5 sobre 24), así que lo que ajustaba el borde de los
 * dibujados a mano —1.35px— ya no aplica a nada. Lo que sí hace falta es
 * fijar el TONO en los dos sitios donde la máscara se pinta, porque el
 * heredado del botón no siempre es el de la tinta. */
.wl-home-account .wc-block-customer-account__visual::before,
.wl-home-cart .wc-block-mini-cart__button::before {
	background-color: var(--wl-ink) !important;
}

@media (min-width: 782px) {
	.wl-home-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.wl-home-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		background: transparent;
		display: block;
		position: static;
	}

	.wl-home-nav .wp-block-navigation__responsive-container-content {
		display: block;
		padding: 0;
	}

	.wl-home-nav .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1080px) {
	.wl-home-header-inner {
		column-gap: 22px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.wl-home-nav .wp-block-navigation__container {
		gap: 18px;
	}

	.wl-home-nav .wp-block-navigation-item__content {
		font-size: 14px;
	}

	.wl-home-search {
		flex-basis: 220px;
		min-width: 180px;
		width: 220px;
	}

	.wl-home-tools {
		gap: 14px;
	}
}

@media (max-width: 781px) {
	.wl-home-header-inner {
		column-gap: 12px;
		grid-template-columns: minmax(0, 1fr) max-content max-content;
		padding: 16px 18px;
		row-gap: 18px;
	}

	.wl-home-nav {
		/* El núcleo pone `position: relative` en `.wp-block-navigation` para
		 * que los submenús se midan contra el nav. Aquí no hay submenús
		 * (tres secciones de primer nivel), y ese `relative` estorba: el
		 * panel del menú va `position: absolute` y, con el nav de bloque
		 * contenedor, `top: 100%` le daba 44px —la altura de la
		 * hamburguesa— y se quedaba pegado a ella en vez de colgar de la
		 * cabecera (medido: panel de 44px de ancho en la esquina superior
		 * derecha). Sin él, el bloque contenedor pasa a ser la cabecera
		 * —que es `position: sticky`—, el mismo contra el que se coloca
		 * el overlay de la lupa. */
		position: static;
		justify-self: end;
		order: 2;
		width: 30px;
	}

	.wl-home-nav .wp-block-navigation__responsive-container-open {
		align-items: center;
		background: transparent;
		border: 0;
		color: var(--wl-ink);
		display: inline-flex;
		height: 30px;
		justify-content: center;
		margin: 0;
		padding: 0;
		/* Para que el `::after` de la × se pueda colocar dentro del botón;
		 * sin `relative` se iría al `<nav>`, que además ahora es `static`. */
		position: relative;
		width: 30px;
	}

	.wl-home-nav .wp-block-navigation__responsive-container-open svg {
		height: 22px;
		width: 22px;
	}

	/* La hamburguesa se convierte en ×, en su mismo sitio. Es el botón que
	 * el usuario acaba de pulsar, así que la cruz cae exactamente donde
	 * estaba la hamburguesa: nada de ir a buscarla al otro extremo del
	 * panel, y una sola señal de «aquí se cierra».
	 *
	 * El dibujo lo hace un `::after` enmascarado —la misma técnica que la
	 * lupa y los iconos del pie— mientras el `<svg>` del núcleo se
	 * desvanece. Los dos se solapan en el mismo centro —el `::after` con
	 * `top/left: 50%` y un `translate` para centrarse— y el cambio es un
	 * fundido de 0.18s, no un salto. `currentColor` los tiñe igual que el
	 * texto del botón, sin duplicar el color.
	 *
	 * El glifo de la × es el mismo que traía el botón de cerrar del panel
	 * —`m13.06 12 6.47-6.47…`—, así que al moverla la cruz se ve
	 * exactamente igual de grande: solo cambia dónde está. Y el de la
	 * hamburguesa repite los dos `<path>` del `<svg>` del núcleo para que
	 * el fundido no dé un salto de grosor. Los dos van a 22px fijos, los
	 * mismos que el `<svg>`, y no al tamaño del botón: este mide 30px en
	 * la banda de 781px y 44px en la capa táctil, y el área del dedo no
	 * tiene que decidir cuánto mide el dibujo.
	 *
	 * El estado sale de `html.has-modal-open`, que es la clase que el
	 * núcleo pone y quita en el `<html>` al abrir y cerrar (la misma que
	 * bloquea el scroll más abajo). */
	.wl-home-nav .wp-block-navigation__responsive-container-open > svg,
	.wl-home-nav .wp-block-navigation__responsive-container-open::before,
	.wl-home-nav .wp-block-navigation__responsive-container-open::after {
		transition: opacity 0.18s ease;
	}

	/* El dibujo son dos pseudo-elementos superpuestos, `::before` con la
	 * hamburguesa y `::after` con la ×, y el estado se lee de
	 * `html.has-modal-open`: el que le toca se ve y el otro se desvanece.
	 * Dos y no uno porque `mask-image` no interpola entre dos ficheros, así
	 * que con un solo pseudo el cambio sería un salto; con dos, un
	 * fundido de 0.18s.
	 *
	 * El `<svg>` que trae el bloque se apaga del todo —`display: none`—:
	 * es el icono de dos rayas del núcleo, y a partir de aquí el que se ve
	 * es el de la librería, en los dos estados. */
	.wl-home-nav .wp-block-navigation__responsive-container-open > svg {
		display: none;
	}

	.wl-home-nav .wp-block-navigation__responsive-container-open::before,
	.wl-home-nav .wp-block-navigation__responsive-container-open::after {
		background-color: currentColor;
		content: "";
		height: 22px;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate( -50%, -50% );
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		width: 22px;
	}

	.wl-home-nav .wp-block-navigation__responsive-container-open::before {
		-webkit-mask-image: url("assets/icons/bars-3.svg");
		mask-image: url("assets/icons/bars-3.svg");
		opacity: 1;
	}

	.wl-home-nav .wp-block-navigation__responsive-container-open::after {
		-webkit-mask-image: url("assets/icons/x-mark.svg");
		mask-image: url("assets/icons/x-mark.svg");
		opacity: 0;
	}

	html.has-modal-open .wl-home-nav .wp-block-navigation__responsive-container-open::before {
		opacity: 0;
	}

	html.has-modal-open .wl-home-nav .wp-block-navigation__responsive-container-open::after {
		opacity: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		.wl-home-nav .wp-block-navigation__responsive-container-open::before,
		.wl-home-nav .wp-block-navigation__responsive-container-open::after {
			transition: none;
		}
	}

	.wl-home-tools {
		gap: 14px;
		order: 3;
	}

	/* (El buscador móvil vive en la capa táctil del final del archivo:
	 * campo real de 44px con su entrada a 16px. El intento de 30px con el
	 * input recortado con `clip` fue sustituido por aquel diseño y aquí
	 * ya no hay reglas que lo contradigan.) */

	/* --- El menú: el mismo panel que la lupa -----------------------------
	 * El menú no es un overlay: es la lupa con las secciones dentro. Panel
	 * blanco que cuelga del borde inferior de la cabecera, la página detrás
	 * velada, sin scroll, y se cierra con la hamburguesa —que se vuelve ×
	 * al abrir—, con Escape o tocando fuera.
	 * Las medidas están copiadas del overlay de búsqueda una a una —12px de
	 * aire, `0 16px 28px rgba(17,17,17,.13)`, telón `rgba(17,17,17,.38)`,
	 * 0.26s— para que las dos cosas se lean como la misma cosa.
	 *
	 * Lo que cambia es el contenido: donde la lupa mete el campo, aquí van
	 * las tres secciones en fila. El panel queda en 68px, la misma altura que
	 * el de la lupa, y cada enlace es una fila de 44px de alto: el mismo
	 * dedo que el buscador.
	 *
	 * Del núcleo hay que deshacer tres cosas, por lo mismo que en la lupa:
	 *  - `inset: 0` a pantalla completa y `overflow: auto`: el panel ahora
	 *    CUELGA de la cabecera (`top: 100%`), y el telón vive fuera de su
	 *    caja, así que `overflow` tiene que ser `visible`.
	 *  - el `padding` de spacing global: el panel lo lleva su regla.
	 *  - `flex-direction: column !important` y `gap: 0 !important` en la
	 *    lista: aquí va en fila, y los dos necesitan `!important` porque el
	 *    rival es la regla de siete clases de `.has-modal-open`.
	 */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: transparent;
		box-sizing: border-box;
		display: block;
		left: 0;
		margin: 0;
		overflow: visible;
		padding: 0;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 20;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* El telón, igual que el de la lupa: arranca en el borde inferior del
	 * panel y baja un viewport, así que la cabecera y el panel quedan
	 * limpios y solo se vela la página de detrás. Transparente al abrir y
	 * `0.38` con la misma transición de 0.26s del panel, para que no
	 * aparezca de golpe. `prefers-reduced-motion` la quita, igual que allí. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open::before {
		background: rgba(17, 17, 17, 0);
		content: "";
		height: 100vh;
		left: 0;
		position: absolute;
		right: 0;
		top: 100%;
		transition: background-color 0.26s ease;
	}

	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open::before {
		background: rgba(17, 17, 17, 0.38);
	}

	@media (prefers-reduced-motion: reduce) {
		.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open::before {
			transition: none;
		}
	}

	/* El panel. Es el envoltorio que WordPress cuelga sobre el diálogo y la
	 * lista (`.responsive-close`), el equivalente de
	 * `.wl-search-overlay__panel`, y por eso el telón va en el contenedor y
	 * no aquí: un `clip-path` recorta a sus descendientes y el telón
	 * desaparecería.
	 *
	 * La persiana es la del buscador: `inset(0 0 100% 0)` la deja recogida
	 * por su borde inferior y suelta a 0. Los dos `inset` llevan los mismos
	 * cuatro valores a propósito —`inset(0)` tiene un solo argumento y
	 * contra un `inset()` de cuatro no se interpola, saltaría de golpe—.
	 * Un `transform` a secas se vería por encima del logo mientras baja,
	 * porque la cabecera no recorta a sus hijos. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		align-items: center;
		background: #ffffff;
		box-shadow: 0 16px 28px rgba(17, 17, 17, 0.13);
		clip-path: inset(0 0 0 0);
		display: flex;
		gap: 8px;
		padding: 12px 14px;
		position: relative;
		transform: translateY(0);
		transition: clip-path 0.26s ease, transform 0.26s ease;
	}

	@media (prefers-reduced-motion: reduce) {
		.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
			transition: none;
		}
	}

	/* El diálogo es la fila: la lista a la izquierda ocupando el hueco y la
	 * × al borde derecho. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		align-items: center;
		display: flex;
		flex: 1 1 auto;
		flex-direction: row;
		gap: 8px;
		min-height: 0;
		min-width: 0;
		position: static;
		width: 100%;
	}

	/* La × ya no vive aquí: se ha ido al botón de la hamburguesa, que es
	 * donde está el dedo que acaba de abrir el menú. Este botón de cerrar
	 * lo que hace es desaparecer —`display: none` y nada más, para que no
	 * ocupe ni un píxel—.
	 *
	 * No se borra del DOM, y no puede: sigue siendo el que sabe cerrar.
	 * WordPress le ata `actions.closeMenuOnClick` y es el único sitio por
	 * el que el JS puede pedirle al menú que se cierre, así que el
	 * JavaScript del tema lo sigue pulsando a ciegas (cerrar por el telón,
	 * cerrar desde la hamburguesa, cerrar con Escape). Un `display: none`
	 * no impide un `.click()` programático, así que funciona igual.
	 *
	 * De paso sale de la lista de enfocables que WordPress calcula al
	 * abrir (`checkVisibility`), así que al abrir el foco se va al primer
	 * enlace en vez de a una × invisible. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	/* La lista: las tres secciones, una detrás de otra, repartidas en
	 * tercios. `overflow: visible` porque aquí no hay nada que
	 * desplazar: el panel no tiene alto máximo y crece con su contenido. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: center;
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 0;
		margin: 0;
		min-height: 0;
		min-width: 0;
		overflow: visible;
		padding: 0;
		width: auto;
	}

	/* El `border: 0 !important` sí es necesario: el tema padre dibuja un
	 * marco alrededor de la lista del overlay
	 * (`ul.wp-block-navigation__container { border: 1px solid
	 * hsla(0,0%,57%,.231) }`, dentro de la misma regla de siete clases que
	 * obliga al `gap: 0`). Sin quitarlo, las tres secciones salían dentro
	 * de una caja gris clavada a la izquierda.
	 *
	 * La lista se reparte en tres tercios, no con `space-between` sino
	 * dejándola en `stretch`: el reparto lo hacen los `li` con su
	 * `flex: 1 1 0`. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		align-self: stretch;
		background: transparent;
		border: 0 !important;
		box-shadow: none;
		display: flex;
		flex: 0 1 auto;
		flex-direction: row !important;
		gap: 0 !important;
		height: auto;
		justify-content: stretch;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	/* Cada sección se estira a un tercio del panel —`flex: 1 1 0`— para
	 * que el dedo tenga una celda ancha, no lo que ocupa la palabra. Con
	 * `space-between` y anchos de contenido quedaban tres islands
	 * estrechos; así los tres touchdown miden un tercio del ancho, que a
	 * 320px son 98px cada uno. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open li {
		align-items: center;
		background: transparent;
		border: 0;
		box-shadow: none;
		flex: 1 1 0;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		width: auto;
	}

	/* El enlace es ahora una columna: el icono arriba y la palabra debajo,
	 * las dos centradas. Sigue siendo la fila de 44px —`--wl-tap`— para
	 * que el dedo no tenga que acertar la letra, y la letra se queda en
	 * 16 como la del campo. El `gap` de 5px es lo que separa el icono de
	 * su palabra: 20 + 5 + 18 = 43, o sea que la celda sale justo en los
	 * 44px del dedo y el panel entero se queda en 68px, la misma altura
	 * que el de la lupa. Ese era el objetivo: los dos paneles miden lo
	 * mismo aunque uno lleve un campo y el otro tres secciones.
	 *
	 * El padding lleva `!important` porque la fila global de enlaces de
	 * L3163 lo fija a `4px 0`; los 8px de aire horizontal son el blanco
	 * del dedo. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open li:last-child .wp-block-navigation-item__content {
		align-items: center;
		align-self: stretch;
		background: transparent;
		border: 0 !important;
		border-radius: 0;
		box-shadow: none;
		color: var(--wl-ink) !important;
		display: flex;
		flex-direction: column;
		font-size: 16px;
		font-weight: 500;
		gap: 5px;
		justify-content: center;
		letter-spacing: -0.01em;
		line-height: 1.1;
		min-height: var(--wl-tap);
		padding: 0 8px !important;
		white-space: nowrap;
		width: 100%;
	}

	/* El icono de cada sección, ENCIMA de su nombre. Se reaprovecha el
	 * hueco que el tema padre ocupaba con la flecha de la lista: mismo
	 * pseudo-elemento, otro dibujo, así que no hay que tocar el marcado
	 * —que es del bloque de WordPress y no admite HTML propio—.
	 *
	 * Es un `::before` enmascarado con un SVG en `data:` y teñido de
	 * `currentColor`, la misma receta que la lupa y los iconos del pie.
	 * Como el enlace es un `display: flex` en columna, el pseudo se
	 * coloca solo arriba del texto, sin órdenes ni `order`.
	 * `position: static`, `margin: 0` y `transform: none` deshacen el
	 * adorno del tema padre, que lo colocaba en su sitio con esas tres
	 * cosas. `flex: 0 0 20px` para que el dedo no lo aplaste.
	 *
	 * Veinte, y no dieciocho, porque arriba tiene todo el ancho de la
	 * celda y ya no compite con el texto por la misma línea. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
		background-color: currentColor;
		content: "";
		flex: 0 0 20px;
		height: 20px;
		margin: 0;
		position: static;
		transform: none;
		width: 20px;
		-webkit-mask-image: var( --wl-seccion-icon, none );
		mask-image: var( --wl-seccion-icon, none );
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	/* Los tres iconos son de HEROICONS, la librería del sitio: `home`,
	 * `book-open` y `calendar`, los ficheros de `assets/icons/` copiados
	 * del repositorio. El `stroke-width` es el 1.5 con el que nacen, un
	 * 25 % más fino que el que tenía antes el dibujo a mano.
	 *
	 * Cada uno se pone en su enlace con `:nth-child` sobre la lista, que
	 * son tres y en el mismo orden que el menú del escritorio: Inicio,
	 * Libros, Eventos. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child( 1 ) .wp-block-navigation-item__content {
		--wl-seccion-icon: url("assets/icons/home.svg");
	}

	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child( 2 ) .wp-block-navigation-item__content {
		--wl-seccion-icon: url("assets/icons/book-open.svg");
	}

	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child( 3 ) .wp-block-navigation-item__content {
		--wl-seccion-icon: url("assets/icons/calendar.svg");
	}

	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		background: var(--wl-soft);
		color: var(--wl-ink) !important;
	}

	/* Foco de teclado visible: la trampa de foco de WordPress hace que se
	 * llegue aquí con el Tab. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var(--wl-ink);
		outline-offset: -2px;
	}

	/* Y el scroll de la página parado, como con la lupa. El tema padre
	 * pone `html.has-modal-open { overflow: auto }` (L1996), que deshace el
	 * bloqueo que el núcleo hace al abrir el overlay; esta es la clase que
	 * WordPress añade al `<html>` mientras el menú está abierto, así que se
	 * devuelve. Mismo selector, yendo después. */
	html.has-modal-open {
		overflow: hidden;
	}

	html.has-modal-open body {
		overscroll-behavior: contain;
	}
}

@media (max-width: 440px) {
	.wl-home-header-inner {
		column-gap: 8px;
		padding-left: 14px;
		padding-right: 14px;
	}

	.wl-home-tools {
		gap: 10px;
		justify-content: flex-end;
		order: 3;
	}

	/* El panel del menú mantiene los 14px del de la lupa: a 320 de ancho las
	 * tres secciones necesitan ese aire, y quitarlo las pegaba al borde. */
	.wl-home-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 781px) {
	/* The desktop four-up rule is intentionally overridden here so product
	 * cards keep readable titles and usable add-to-cart targets on phones. */
	.wl-product-grid .wp-block-woocommerce-product-template {
		column-gap: 16px !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		margin-top: 24px !important;
		max-width: none !important;
		row-gap: 34px !important;
	}

	/* El buscador vuelve a ser campo aquí no: la capa táctil del final del
	 * archivo es la dueña del diseño móvil (44px, borde, entrada a 16px);
	 * esto solo desmonta el aspecto de escritorio si algún día cambia el
	 * orden de las hojas. */
	.wl-home-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	/* El cajón del carrito tapa el menú: fuera del árbol cuando está
	 * cerrado, para que ni con z-index menor pueda interceptar el dedo. */
	.wc-block-mini-cart__drawer[aria-hidden="true"] {
		display: none !important;
	}
}

/* Search icon: one crisp magnifier glyph drawn with a CSS mask, so circle and
 * handle always join perfectly (two positioned pseudo-elements never quite
 * met). Same ink color and optical size as the account and cart icons; the
 * 1.4 stroke at 21px reads as the same thin line. */
.wl-home-search .wp-block-search__button .search-icon {
	display: none !important;
}

.wl-home-search .wp-block-search__button::before {
	background-color: var(--wl-ink);
	content: "";
	height: 22px;
	inset: 0;
	margin: auto;
	position: absolute;
	width: 22px;
	-webkit-mask-image: url("assets/icons/magnifying-glass.svg");
	mask-image: url("assets/icons/magnifying-glass.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wl-home-search .wp-block-search__button::after {
	content: none !important;
}

/* =========================================================================
 * Footer
 * Dark editorial surface built from core blocks so it stays editable in
 * Appearance → Editor. Icons are decorative CSS masks: the copy itself is
 * plain, editable text.
 * ====================================================================== */

.wp-site-blocks .wl-footer {
	background: #161616 !important;
	border-top: 0;
	color: #f5f5f2 !important;
	box-sizing: border-box;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

.wp-site-blocks .wl-footer__main {
	box-sizing: border-box;
	margin: 0;
	max-width: none;
	padding: 64px var(--wl-shell-gutter) 48px;
	width: 100%;
}

.wl-footer__columns {
	column-gap: 56px !important;
	display: grid !important;
	grid-template-columns: 1.45fr 0.85fr 0.95fr 1.05fr;
	margin: 0 !important;
	row-gap: 32px !important;
}

.wl-footer__columns > .wp-block-column {
	flex-basis: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* Brand column ---------------------------------------------------------- */

.wp-site-blocks .wl-footer .wp-block-site-title {
	font-size: 26px !important;
	line-height: 1.15;
	margin: 0 0 14px !important;
}

.wp-site-blocks .wl-footer .wp-block-site-title,
.wp-site-blocks .wl-footer .wp-block-site-title a {
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	text-decoration: none !important;
}

/* Logo del pie, en blanco.
 *
 * El logo es un PNG negro sobre fondo transparente (medido: la luminancia
 * media de lo opaco es 17 sobre 255, o sea, negro), y el pie tiene fondo
 * `primary`, que es negro. Se ve negro sobre negro.
 *
 * En vez de crear un segundo fichero blanco —que se quedaría viejo en
 * cuanto se cambiara el logo— se invierte en CSS: `brightness(0)` lleva
 * cualquier píxel opaco a negro y `invert(1)` lo lleva a blanco. El canal
 * alfa no lo tocan los dos filtros, así que lo transparente sigue
 * transparente y no aparece un cuadrado blanco alrededor de la marca. En la
 * cabecera el mismo logo se queda negro, y así una sola imagen sirve para las
 * dos columnas.
 *
 * El ancho lo fija el bloque (`width`); aquí sólo se controla el alto para
 * que la marca no salga ni enorme ni pequeña. */
.wp-site-blocks .wl-footer__logo img {
	filter: brightness(0) invert(1);
	height: 96px;
	width: auto;
}

@media (max-width: 600px) {
	.wp-site-blocks .wl-footer__logo img {
		height: 76px;
	}
}

.wl-footer__social {
	gap: 10px !important;
	margin: 0 !important;
}

.wl-footer__social .wp-social-link {
	background: transparent !important;
}

.wl-footer__social .wp-social-link a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: #f5f5f2;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.wl-footer__social .wp-social-link a:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #161616 !important;
	text-decoration: none;
}

.wl-footer__social .wp-social-link svg {
	fill: currentColor;
	height: 17px;
	width: 17px;
}

/* Texto de relleno del pie (Instagram, correo, páginas de ayuda, datos de
 * contacto). Va más apagado que los enlaces de verdad para que se lea como
 * «esto falta por poner» y no como un dato. En el pie negro (fondo `primary`)
 * el blanco puro es `--wl-soft`, que es lo que usan los enlaces.
 *
 * El prefijo `.wp-site-blocks` no es decorativo: sin él esta regla tiene MENOS
 * especificidad que la que pone el color de los `<p>` del tema padre, y el
 * texto salía en `rgb(17,17,17)` —negro sobre negro— en vez de apagado. Es
 * justo el fallo que se ve en el móvil, donde el pie entero va en una sola
 * columna y los dos textos de relleno son casi todo lo que hay. */
.wp-site-blocks .wl-footer .wl-footer__placeholder {
	color: rgba(245, 245, 242, 0.38);
	font-size: 14px;
	margin: 0;
}

/* Column titles and links ---------------------------------------------- */

.wp-site-blocks .wl-footer h2.wl-footer__title {
	color: rgba(245, 245, 242, 0.5) !important;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em;
	line-height: 1.2;
	margin: 2px 0 18px !important;
	text-transform: uppercase;
}

.wl-footer__nav {
	width: 100%;
}

.wl-footer__nav .wp-block-navigation__container {
	align-items: flex-start !important;
	display: flex;
	flex-direction: column;
	gap: 11px !important;
	justify-content: flex-start !important;
	text-align: left !important;
	width: 100%;
}

.wl-footer__nav .wp-block-navigation-item {
	flex: 0 0 auto;
	justify-content: flex-start;
	margin: 0 !important;
	text-align: left !important;
	width: auto;
}

.wl-footer__nav .wp-block-navigation-item__content {
	color: rgba(245, 245, 242, 0.78) !important;
	font-size: 15px !important;
	line-height: 1.45;
	padding: 0 !important;
}

.wl-footer__nav .wp-block-navigation-item__content:hover,
.wl-footer__nav .wp-block-navigation-item__content:focus-visible {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Contact -------------------------------------------------------------- */

/* `padding-left` + `margin-left` negativo en el icono es la sangría francesa:
 * la primera línea (icono + texto) queda a 0 y las de continuación —la
 * dirección parte en dos líneas con `<br>`— alineadas con el texto.
 *
 * OJO: cuelgue con `text-indent` negativo NO vale aquí. Es una propiedad
 * heredada y la capa táctil convierte el enlace de las filas de correo y
 * teléfono en `inline-flex`, o sea un contenedor de bloque: el `-27px` le
 * llegaba al texto dentro del enlace y lo montaba encima del icono
 * (medido: texto en x=0, 44px de solape). El margen negativo vive solo en
 * el `::before` y no lo hereda nadie. */
.wp-site-blocks .wl-footer__contact {
	color: rgba(245, 245, 242, 0.78) !important;
	font-size: 15px !important;
	line-height: 1.55;
	margin: 0 0 13px !important;
	padding-left: 27px;
}

.wp-site-blocks .wl-footer__contact a {
	color: #ffffff !important;
	text-decoration: none;
}

.wp-site-blocks .wl-footer__contact a:hover,
.wp-site-blocks .wl-footer__contact a:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* El icono va en el flujo, no absoluto. Antes era `position: absolute` con
 * `top: 3px` contra la caja del párrafo, y el texto vivía en la caja de
 * línea: cuando la capa táctil (más abajo) convierte el enlace de las filas
 * de correo y teléfono en `inline-flex` de 44px, la línea crece a 44px pero
 * el icono se queda clavado arriba — medido: mail y phone con el icono
 * 10.5px por encima del texto, pin y clock (sin enlace) correctos. En flujo
 * con `vertical-align: middle` el icono se centra en la línea que sea, y
 * además el `padding-left` que lo empujaba (27px aquí, 25px en la banda
 * móvil) sobra: medido, los cuatro rows quedan a menos de 1px. */
.wl-footer__contact::before {
	background-color: rgba(245, 245, 242, 0.75);
	content: "";
	display: inline-block;
	height: 17px;
	margin-left: -27px;
	margin-right: 10px;
	vertical-align: middle;
	width: 17px;
	-webkit-mask-image: var(--wl-footer-icon, none);
	mask-image: var(--wl-footer-icon, none);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wl-footer__contact--pin {
	--wl-footer-icon: url("assets/icons/map-pin.svg");
}

.wl-footer__contact--clock {
	--wl-footer-icon: url("assets/icons/clock.svg");
}

.wl-footer__contact--mail {
	--wl-footer-icon: url("assets/icons/envelope.svg");
}

.wl-footer__contact--phone {
	--wl-footer-icon: url("assets/icons/phone.svg");
}

/* Assurance row -------------------------------------------------------- */
/* Legal bar ------------------------------------------------------------ */

.wl-footer__bottom {
	background: #101010 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

.wp-site-blocks .wl-footer__bottom-inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	justify-content: space-between;
	margin: 0;
	max-width: none;
	padding: 15px var(--wl-shell-gutter);
	width: 100%;
}

.wp-site-blocks .wl-footer__legal {
	color: rgba(245, 245, 242, 0.5) !important;
	font-size: 13px !important;
	margin: 0 !important;
}

.wp-site-blocks .wl-footer__totop {
	font-size: 13px !important;
	margin: 0 0 0 auto !important;
}

.wp-site-blocks .wl-footer__totop a {
	align-items: center;
	color: rgba(245, 245, 242, 0.65) !important;
	display: inline-flex;
	gap: 8px;
	text-decoration: none;
}

.wp-site-blocks .wl-footer__totop a:hover {
	color: #ffffff !important;
}

.wl-footer__totop a::after {
	background-color: currentColor;
	content: "";
	height: 14px;
	width: 14px;
	-webkit-mask-image: url("assets/icons/arrow-up.svg");
	mask-image: url("assets/icons/arrow-up.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Responsive footer ---------------------------------------------------- */

@media (max-width: 1024px) {
	.wl-footer__columns {
		column-gap: 28px !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 36px !important;
	}

	.wl-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 781px) {
	/* Los selectores de esta banda repiten el prefijo `.wp-site-blocks` de las
	 * reglas base: sin él tienen menos especificidad que ellas y no se aplican
	 * (el pie móvil se quedaba con el relleno y el `align-items` de escritorio). */
	.wp-site-blocks .wl-footer__main {
		padding: 38px 24px 30px;
	}

	/* Brand and contact run full width; the two link lists share one row so
	 * the footer stays compact on phones. */
	.wl-footer__columns {
		column-gap: 24px !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 28px !important;
	}

	.wl-footer__col--brand,
	.wl-footer__col--contact {
		grid-column: 1 / -1;
	}

	.wp-site-blocks .wl-footer__contact {
		font-size: 14px !important;
	}

	.wp-site-blocks .wl-footer__bottom-inner {
		align-items: center;
		flex-direction: column;
		padding: 15px 24px;
	}

	.wp-site-blocks .wl-footer__totop {
		margin-left: 0 !important;
	}

	/* En el móvil el pie va todo centrado: una sola columna de contenido y
	 * nada alineado a la izquierda contra el resto. Antes cada bloque Keepía
	 * su `text-align` de escritorio y el pie se leía como cuatro textos
	 * pegados al borde izquierdo con un hueco vacío a la derecha.
	 *
	 * Se centran los bloques y también su contenido, porque un `text-align`
	 * en el `<p>` gana a alinear el contenedor, y los enlaces de navegación
	 * necesitan además el `justify-content` porque son `inline-flex`. */
	.wp-site-blocks .wl-footer__main,
	.wp-site-blocks .wl-footer__bottom-inner {
		text-align: center;
	}

	.wp-site-blocks .wl-footer__title,
	.wp-site-blocks .wl-footer .wl-footer__placeholder,
	.wp-site-blocks .wl-footer__contact,
	.wp-site-blocks .wl-footer__legal {
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	.wp-site-blocks .wl-footer__nav .wp-block-navigation-item__content {
		justify-content: center;
		text-align: center !important;
	}

	.wp-site-blocks .wl-footer__nav ul,
	.wp-site-blocks .wl-footer__nav .wp-block-navigation__container {
		align-items: center;
		justify-content: center;
	}

	/* El `<li>` de la navegación también: lleva su propio `text-align` heredado
	 * del bloque y es el que decide dónde cae cada línea. */
	.wp-site-blocks .wl-footer__nav .wp-block-navigation-item,
	.wp-site-blocks .wl-footer__nav .wp-block-navigation-item__content {
		text-align: center !important;
	}
}

/* Narrow phones: trim the link columns so labels still fit on one line. */
@media (max-width: 420px) {
	.wl-footer__columns {
		column-gap: 18px !important;
	}

	.wl-footer__nav .wp-block-navigation-item__content {
		font-size: 14px !important;
	}
}

/* =========================================================================
 * Unified inner pages (search, blog, posts, archives)
 * Every non-shop page now shares the home design language: same frame, same
 * margins, same type scale, same card anatomy as "Libros destacados". All
 * values come from the :root tokens so global tweaks stay one-line changes.
 * ====================================================================== */

.wl-search {
	margin: 0 22px;
}

.wl-search-head {
	margin: 0 auto;
	max-width: 1280px;
	padding: 44px 0 8px;
}

.wl-search-label {
	color: var(--wl-muted);
	font-size: 12px;
	letter-spacing: 0.14em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.wl-search-title {
	color: var(--wl-ink);
	font-size: clamp(34px, 4.5vw, 62px);
	font-weight: 700;
	letter-spacing: -0.055em;
	line-height: 1.02;
	margin: 0;
	overflow-wrap: anywhere;
}

.wl-search-form {
	align-items: center;
	background: #ffffff;
	border: 1px solid #cfcfcf;
	border-radius: 5px;
	box-sizing: border-box;
	display: flex;
	gap: 10px;
	margin: 26px auto 0;
	max-width: 560px;
	padding: 0 14px 0 12px;
}

.wl-search-form:focus-within {
	border-color: var(--wl-ink);
}

.wl-search-form-icon {
	background-color: var(--wl-ink);
	content: "";
	flex: 0 0 18px;
	height: 18px;
	-webkit-mask-image: url("assets/icons/magnifying-glass.svg");
	mask-image: url("assets/icons/magnifying-glass.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 18px;
}

.wl-search-form input[type="search"] {
	background: transparent;
	border: 0;
	color: var(--wl-ink);
	flex: 1 1 auto;
	font-size: 15px;
	font-family: var(--wl-font);
	min-width: 0;
	outline: 0;
	padding: 14px 0;
}

.wl-search-form input[type="search"]::placeholder {
	color: #999999;
	opacity: 1;
}

/* Thin native clear button: Safari/WebKit paint a heavy default X inside
 * search inputs; this replaces it with the same 1.4 stroke as the icons,
 * both in the header field and on the search page form. */
.wl-search-form input[type="search"]::-webkit-search-cancel-button,
.wl-home-search .wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--wl-muted);
	content: "";
	height: 14px;
	width: 14px;
	-webkit-mask-image: url("assets/icons/x-mark.svg");
	mask-image: url("assets/icons/x-mark.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Results reuse the exact home card anatomy: gray plate, contained cover,
 * title, meta line, price. */
.wl-search .wl-featured {
	margin: 34px auto 84px;
	max-width: 1280px;
}

.wl-search-count {
	border: 1px solid var(--wl-line);
	border-radius: 999px;
	color: var(--wl-muted);
	font-size: 13px;
	padding: 4px 12px;
}

.wl-search-empty {
	color: var(--wl-muted);
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 520px;
}

.wl-search-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wl-search-pagination {
	margin-top: 44px;
}

.wl-search-pagination .page-numbers {
	color: var(--wl-ink);
	display: inline-block;
	font-size: 14px;
	padding: 6px 11px;
	text-decoration: none;
}

.wl-search-pagination .page-numbers.current {
	border-bottom: 1px solid var(--wl-ink);
	font-weight: 600;
}

.wl-search-pagination .page-numbers:hover,
.wl-search-pagination .page-numbers:focus-visible {
	color: var(--wl-muted);
}

/* Blog archive and single posts: quiet editorial grid, same tokens. */
.wl-post-head {
	margin: 0 auto;
	max-width: 1280px;
}

.wl-post-title {
	color: var(--wl-ink);
	font-size: clamp(34px, 4.5vw, 62px);
	font-weight: 700;
	letter-spacing: -0.055em;
	line-height: 1.02;
	margin: 0 0 10px;
}

.wl-post-date {
	letter-spacing: 0.1em;
}

.wl-post-image img {
	display: block;
	margin: 18px auto 26px;
	max-width: 1280px;
	width: 100%;
}

/* ─── Ficha de un evento ───
 *
 * Antes esta página era el título solo, con la fecha en una línea de
 * mayúsculas por encima, la foto metida en una caja de 780px donde
 * sobraba sitio a los lados, y el texto suelto debajo. Se ha montado
 * con la misma caja blanca de las tarjetas de la agenda y la misma
 * repartición en tres zonas —fecha a la izquierda, texto en el medio,
 * foto a la derecha— para que pasar de la agenda a la ficha sea un paso
 * y no un salto de página. */
.wl-event-single {
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 20px;
	display: grid;
	/* Cada fila del mapa necesita tres celdas, las mismas tres que
	 * `grid-template-columns`: si no coinciden, el navegador tira el mapa
	 * entero y los bloques se colocan solos (medido: el título se iba a la
	 * columna estrecha de 168px y la foto al centro). */
	grid-template-areas:
		"titulo titulo foto"
		"datos  cuerpo foto"
		"pie    cuerpo foto";
	grid-template-columns: minmax(126px, 168px) minmax(0, 1fr) minmax(0, 40%);
	/* La tercera fila es la que absorbe el sobrante, y dentro de ella la
	 * vuelta se va al fondo (`align-self: end`): si la sobrante la
	 * tuviera el texto, un evento de una frase dejaba 330px de blanco
	 * debajo. */
	grid-template-rows: auto auto 1fr;
	margin: 10px auto 56px;
	max-width: var(--wp--style--global--wide-size, 1280px);
	min-height: 420px;
	padding: 0;
}

/* El bloque del título trae la restricción de la plantilla genérica
 * (900px y centrado, con `margin: 0 auto`, que dentro de una rejilla lo
 * encoge al contenido —medido: 677px en vez de 740—); aquí manda la
 * rejilla de arriba. */
.wl-event-single .wl-post-head {
	grid-area: titulo;
	justify-self: stretch;
	margin: 0;
	max-width: none;
	padding: clamp(28px, 3vw, 46px) clamp(24px, 2.6vw, 42px) 0;
}

.wl-event-single .wl-post-title {
	font-size: clamp(28px, 3.4vw, 44px);
	letter-spacing: -0.035em;
	line-height: 1.08;
	margin: 0;
}

/* La foto se estira a toda la altura de la caja en vez de decidirla ella.
 *
 * Antes la caja era la que mandaba y la imagen flotaba dentro (medido:
 * 350×226 dentro de 780×270, con la proporción deformada). Dos cosas del
 * tema padre estorban y hay que quitar de en medio:
 *
 * 1. `.wp-block-post-featured-image .wp-post-image { max-width: 350px;
 *    max-height: 350px }` — el `<img>` lleva la clase `wp-post-image` y
 *    hereda el tope: la foto salía de 494×350 en una columna de 494×617.
 * 2. `.wp-block-post-featured-image img { transition: all .5s ease }` — con
 *    el alto en `100%` la imagen anima desde su tamaño natural al de la
 *    columna cada vez que se asienta la página: un salto de 267px al
 *    cargar.
 *
 * Y la caja no lleva `aspect-ratio` a propósito: un elemento que salta
 * varias filas y además impone proporción reparte el sobrante entre las
 * filas, y medido se lo quedaba entero la de arriba —el título medía
 * 652px de alto en una ficha de 617—. Si la altura la pone la columna de
 * texto, las cuatro filas se reparten solas. */
.wl-event-single .wl-post-image {
	grid-area: foto;
	margin: 0;
	min-height: 100%;
	overflow: hidden;
}

.wl-event-single .wp-block-post-featured-image .wp-post-image {
	max-height: none;
	max-width: none;
	transition: none;
}

.wl-event-single .wl-post-image img {
	display: block;
	height: 100%;
	margin: 0;
	max-width: none;
	object-fit: cover;
	transition: none;
	width: 100%;
}

.wl-event-single .wl-post-content {
	grid-area: cuerpo;
	max-width: none;
	padding: 22px clamp(24px, 2.6vw, 42px) 0;
}

.wl-event-single .wl-post-content > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.wl-event-single .wl-post-content p {
	color: #333333;
	font-size: 16.5px;
	line-height: 1.6;
}

.wl-event-single-pie {
	align-self: end;
	grid-area: pie;
	margin: 0;
}

.wl-event-single-volver {
	align-items: center;
	color: var(--wl-muted) !important;
	display: inline-flex;
	font-size: 14.5px;
	gap: 10px;
	margin: 0 0 32px;
	padding: 0 0 0 clamp(24px, 2.6vw, 42px);
	text-decoration: none;
	transition: color 0.15s ease, gap 0.15s ease;
}

.wl-event-single-volver:hover,
.wl-event-single-volver:focus-visible {
	color: var(--wl-ink) !important;
	gap: 14px;
}

.wl-event-single-datos {
	grid-area: datos;
	padding: clamp(22px, 2.4vw, 34px) 0 0 clamp(24px, 2.6vw, 42px);
}

.wl-event-single-fecha {
	margin: 0;
}

.wl-event-single-dia {
	display: block;
	font-family: var(--wl-font);
	font-size: clamp(46px, 4.6vw, 66px);
	font-weight: 650;
	letter-spacing: -0.04em;
	line-height: 0.9;
}

.wl-event-single-mes {
	color: var(--wl-muted);
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin-top: 10px;
	text-transform: uppercase;
}

.wl-event-single-ano {
	color: var(--wl-muted);
	display: block;
	font-size: 13px;
	letter-spacing: 0.16em;
	margin-top: 2px;
}

.wl-event-single-hora {
	align-items: center;
	border-top: 1px solid var(--wl-line);
	color: var(--wl-muted);
	display: flex;
	font-size: 14.5px;
	gap: 9px;
	margin: 20px 0 0;
	max-width: 126px;
	padding-top: 16px;
}

.wl-event-single-hora svg {
	color: var(--wl-ink);
	flex: 0 0 17px;
}

.wl-event-single-cta {
	align-items: center;
	background: var(--wl-ink);
	border-radius: 10px;
	color: #ffffff !important;
	display: inline-flex;
	font-size: 14.5px;
	gap: 10px;
	justify-content: center;
	margin-top: 22px;
	max-width: 126px;
	padding: 13px 18px;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

.wl-event-single-cta:hover,
.wl-event-single-cta:focus-visible {
	background: #333333;
	transform: translateY(-1px);
}

.wl-event-single-cta span {
	display: inline-block;
	transition: transform 0.15s ease;
}

.wl-event-single-cta:hover span,
.wl-event-single-cta:focus-visible span {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	/* En una sola columna la foto pasa debajo del título: a 780px el hueco
	 * central se queda en 300 y el título se parte en dos líneas. */
	.wl-event-single {
		grid-template-areas:
			"titulo"
			"foto"
			"datos"
			"cuerpo"
			"pie";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		min-height: 0;
	}

	.wl-event-single .wl-post-image {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.wl-event-single .wl-post-head {
		padding: clamp(24px, 4vw, 34px) clamp(20px, 4vw, 34px) 0;
	}

	.wl-event-single-datos {
		padding: 26px clamp(20px, 4vw, 34px) 0;
	}

	.wl-event-single-hora,
	.wl-event-single-cta {
		max-width: none;
	}

	.wl-event-single .wl-post-content {
		padding: 20px clamp(20px, 4vw, 34px) 0;
	}

	.wl-event-single-volver {
		margin-bottom: 30px;
		padding: 0 clamp(20px, 4vw, 34px);
	}
}

.wl-post-content > * {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.wl-index-grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 26px auto 0;
	max-width: 1280px;
	padding: 0;
}

.wl-index-card {
	min-width: 0;
}

.wl-index-image img {
	aspect-ratio: 1.2 / 1;
	background: var(--wl-frame);
	display: block;
	object-fit: cover;
	width: 100%;
}

.wl-index-title {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 10px 0 0;
}

.wl-index-title a {
	color: var(--wl-ink);
	text-decoration: none;
}

.wl-index-title a:hover,
.wl-index-title a:focus-visible {
	color: var(--wl-muted);
}

@media (max-width: 900px) {
	.wl-search {
		margin: 0 18px;
	}

	.wl-index-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.wl-search {
		margin: 0 18px;
	}

	.wl-search-head {
		padding-top: 30px;
	}

	.wl-search-title {
		font-size: clamp(30px, 6.5vw, 40px);
	}
}

@media (max-width: 600px) {
	.wl-index-grid {
		grid-template-columns: 1fr;
	}
}

/* "Otras secciones": pages/posts found by the search, kept visually quiet
 * so the product cards stay the protagonists. */
.wl-search-other {
	border-top: 1px solid var(--wl-line);
	list-style: none;
	margin: 40px 0 0;
	max-width: 680px;
	padding: 0;
}

.wl-search-other li {
	border-bottom: 1px solid var(--wl-line);
	padding: 16px 0;
}

.wl-search-other a {
	color: var(--wl-ink);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.wl-search-other a:hover,
.wl-search-other a:focus-visible {
	color: var(--wl-muted);
}

.wl-search-other p {
	color: var(--wl-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 5px 0 0;
}

/* =========================================================================
 * Root gutters (global fix)
 * Block themes give constrained/wide blocks a max-width but NO side margins,
 * so on viewports narrower than those widths every block touches the screen
 * edge (shop grid, product page, blog...). Give every top-level block the
 * same editorial gutter on small screens; full-bleed surfaces keep theirs.
 * ====================================================================== */

@media (max-width: 1310px) {
	/* Below wideSize+gutters, wide blocks span the full viewport and touch
	 * the edges. Only TOP-LEVEL children get one gutter, never stacked;
	 * header, footer, the home main and the search pattern manage their own
	 * margins; alignfull surfaces are edge-to-edge by design. */
	body .wp-site-blocks > *:not(header):not(footer):not(.wl-home):not(.wl-search):not(.alignfull) {
		margin-left: 22px !important;
		margin-right: 22px !important;
		width: auto !important;
	}
}

@media (max-width: 900px) {
	body .wp-site-blocks > *:not(header):not(footer):not(.wl-home):not(.wl-search):not(.alignfull) {
		margin-left: 18px !important;
		margin-right: 18px !important;
		width: auto !important;
	}
}

/* WooCommerce classic breadcrumbs force a wide nowrap line; let them wrap
 * and stay inside the gutters on phones. */
.woocommerce-breadcrumb {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	white-space: normal;
}

.single-product .woocommerce-breadcrumb {
	font-size: 13px;
}

/* =========================================================================
 * Full-bleed neutralisation (root fix)
 * The parent theme pulls full-width bands outside the viewport with
 * negative side margins (margin: -outer) to undo its own page padding.
 * Our layout is already edge-to-edge, so those margins just push bands
 * 79px off-canvas on 404/cart/checkout/search. Full-width must mean
 * left:0 / right:0 here, nothing else.
 * ====================================================================== */

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The parent theme pushes ".woocommerce" down 50px for its old header; on
 * block templates that class lands on BODY, dragging the whole site down
 * (the shop header sat 50px lower than every other page). Zero it: spacing
 * between header and content is ours. */
body.woocommerce,
body.woocommerce-page {
	margin-top: 0 !important;
}

/* =========================================================================
 * Shop cards = home featured cards (same anatomy, same type)
 * The home grid is the design reference: system font, no stars, no inline
 * add-to-cart buttons, contained cover on a light plate. This block makes
 * the shop/category grids indistinguishable from it.
 *
 * The three rating selectors are a guard, not a fix: the shop does not collect
 * reviews, so there are no stars to print — but the card has no room for them,
 * so if reviews are ever switched on, a Product Rating block in the template
 * must not be what breaks the grid.
 * ====================================================================== */

.wl-product-grid .wp-block-woocommerce-product-rating,
.wl-product-grid .wc-block-components-product-rating,
.wl-product-grid .wl-product-stars,
.wl-product-grid .wc-block-components-product-button,
.wl-product-grid .wp-block-woocommerce-product-button,
.wl-product-grid .wc-block-components-product-sale-badge,
.wl-product-grid .wp-block-woocommerce-product-sale-badge {
	display: none !important;
}

/* One price size for the book card, whatever the surface: home shelves,
 * catalog, author, category, search and the product page recommendations
 * all print the same 13px, with the crossed-out amount in grey and the
 * current one in red (tones in --wl-price / --wl-price-was). A touch bolder
 * than the plain body text so the price holds its own against the title.
 * WooCommerce's block stylesheet sets its own size and weight per block, so
 * this has to win explicitly. The amount and the bdi are deliberately NOT
 * listed: pinned at 13px here they would pin the crossed-out figure too, and
 * the "del" scale would do nothing. They inherit instead.
 *
 * El selector es UNO para todas las superficies porque el marcado también lo
 * es: `inc/book-card.php` pinta el precio de la rejilla con el mismo
 * `get_price_html()` dentro del mismo `<p>` que la tarjeta de inicio. Antes
 * cada superficie traía el suyo —el bloque de WooCommerce además mete un
 * `<div class="wc-block-components-product-price">` entre el `<p>` y las
 * cifras— y por eso hacía falta una regla aparte para la rejilla que le
 * ponía su propio `font-weight: 400` y un `margin: 8px 2px 0`: el mismo
 * libro en oferta salía en negrita en la portada y normal en el catálogo,
 * 2px más metido y 8px más bajo. Con un solo envoltorio, estas reglas
 * sobran. */
.wl-featured-card .wl-featured-price,
.wl-featured-card .wl-featured-price .woocommerce-Price-amount {
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* My account: quiet editorial form instead of the raw WooCommerce box. */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce-MyAccount-content form {
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 8px;
	box-sizing: border-box;
	max-width: 460px;
	padding: 34px 32px;
}

.woocommerce-account .woocommerce form.login label,
.woocommerce-account .woocommerce form.register label {
	color: var(--wl-ink);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-account .woocommerce-input-wrapper .input-text,
.woocommerce-account form input.input-text {
	border: 1px solid #cfcfcf;
	border-radius: 5px;
	box-sizing: border-box;
	font-family: var(--wl-font);
	font-size: 15px;
	padding: 12px 14px;
	width: 100%;
}

.woocommerce-account form input.input-text:focus {
	border-color: var(--wl-ink);
	outline: none;
}

/* Account CTAs: same square, sentence-case button as the rest of the shop
 * (WooCommerce ships them as uppercase 45px pills). */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce button.button {
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	color: #ffffff !important;
	cursor: pointer;
	font-family: var(--wl-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	min-height: 50px;
	padding: 13px 30px !important;
	text-transform: none !important;
}

.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce button.button:hover {
	background: #333333 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border-top: 1px solid var(--wl-line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wl-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	color: var(--wl-ink);
	display: block;
	font-size: 15px;
	padding: 12px 2px;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	font-weight: 600;
}

/* =========================================================================
 * Shop catalog: centered container + native filter sidebar
 * The catalog keeps the home grid anatomy but sits in a centered container,
 * with WooCommerce's own filter blocks (categories, price, rating, stock) in
 * a right sidebar, like a proper store. No display title: navigation labels
 * the page already.
 * ====================================================================== */

/* One reading rail for every catalog page (books, categories and authors).
 * 1560px is what fits four book tiles of 240px plus the 252px filter column
 * without leaving a half-empty row. WordPress forces "max-width: none
 * !important" on every top-level group, and the selector below is as
 * specific as that rule but comes later, so it wins. */
.wp-site-blocks > .wl-catalog {
	max-width: 1560px !important;
}

.wl-catalog .wl-catalog-body {
	align-items: flex-start;
	display: grid;
	gap: 46px;
	grid-template-columns: 252px minmax(0, 1fr);
}

.wl-catalog .wl-catalog-filters {
	box-sizing: border-box;
	position: sticky;
	top: 110px;
	width: 100%;
}

.wl-catalog .wl-filter-title {
	border-bottom: 1px solid var(--wl-line);
	color: var(--wl-ink);
	font-family: var(--wl-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 26px 0 14px;
	padding-bottom: 10px;
}

/* First section of the column: its glyph top shares the line with the "N
 * libros / Ordenar por" toolbar text on the right column, and its bottom
 * rule lands on the toolbar's hairline. The 33px is measured, not guessed:
 * it is the toolbar's own depth (its padding plus half-leading) and it is
 * the same on the shop, the categories and the author archive, so one rule
 * keeps the three side by side. The toolbar is just the count and the two
 * view buttons now — the "Limpiar" lives at the foot of the column, next to
 * "Aplicar filtros", and having both said the same thing on the same screen
 * was the duplication the owner pointed at. */
.wl-catalog .wl-catalog-filters .wl-filter-title:first-of-type {
	margin-top: 33px;
	padding-bottom: 22px;
}

/* Folded drawer on narrow screens: no toolbar sits beside the column, so
 * the extra depth would read as stray whitespace. */
@media (max-width: 1000px) {
	.wl-catalog .wl-catalog-filters .wl-filter-title:first-of-type {
		margin-top: 0;
		padding-bottom: 12px;
	}
}

/* Checkbox lists: quiet rows, counts in muted ink. */
.wl-catalog .wc-block-product-filter-checkbox-list__label {
	align-items: center;
	color: var(--wl-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--wl-font);
	font-size: 14px;
	gap: 10px;
	line-height: 1.35;
	padding: 5px 0;
}

.wl-catalog .wc-block-product-filter-checkbox-list__input {
	accent-color: var(--wl-ink);
	height: 15px;
	margin: 0;
	width: 15px;
}

.wl-catalog .wc-block-product-filter-checkbox-list__text-wrapper {
	flex: 1 1 auto;
}

.wl-catalog .wc-block-product-filter-checkbox-list__count {
	color: #999999;
	font-size: 13px;
}

/* Price slider: editorial hairline controls. */
.wl-catalog .wc-block-product-filter-price__amount {
	align-items: center;
	color: var(--wl-ink);
	display: flex;
	font-family: var(--wl-font);
	font-size: 13px;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 16px;
}

.wl-catalog .wc-block-product-filter-price__amount input[type="text"] {
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	box-sizing: border-box;
	font-family: var(--wl-font);
	font-size: 13px;
	padding: 7px 9px;
	width: 100%;
}

.wl-catalog .wc-block-formatted-money-amount {
	font-family: var(--wl-font);
}

.wl-catalog .wc-block-product-filter-price input[type="range"] {
	accent-color: var(--wl-ink);
	width: 100%;
}

/* WooCommerce's own filter blocks, if a plugin ever drops them in: the theme
 * renders its own panel in PHP, so these are a safety net, not the design.
 * There is no rating rule here on purpose: the shop does not collect reviews,
 * and a filter over a catalog with no reviews can only return nothing. */
.wl-catalog .wc-block-product-filter-status .wc-block-product-filter-checkbox-list__label {
	color: var(--wl-ink);
}

/* Active filter chips, removable inline. */
.wl-catalog .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.wl-catalog .wc-block-product-filter-removable-chips__item {
	align-items: center;
	background: #f1efec;
	border: 1px solid var(--wl-line);
	border-radius: 999px;
	color: var(--wl-ink);
	display: inline-flex;
	font-size: 13px;
	gap: 4px;
	padding: 4px 6px 4px 12px;
}

.wl-catalog .wc-block-product-filter-removable-chips__remove {
	background: transparent;
	border: 0;
	color: #777777;
	cursor: pointer;
	display: inline-flex;
	height: 20px;
	padding: 0;
	width: 20px;
}

.wl-catalog .wc-block-product-filter-removable-chips__remove:hover {
	color: var(--wl-ink);
}

.wl-catalog .wc-block-product-filter-removable-chips__remove-icon {
	height: 14px;
	width: 14px;
}

/* Toolbar: results count left, sorting right, hairline underneath. */
.wl-catalog .wl-shop-toolbar {
	align-items: center;
	border-bottom: 1px solid var(--wl-line);
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 26px;
	padding-bottom: 14px;
	width: 100%;
}

.wl-catalog .wl-shop-toolbar .wc-block-components-product-results-count {
	color: #7d7d7d;
	font-family: var(--wl-font);
	font-size: 13.5px;
	margin: 0;
}

.wl-catalog .wc-block-catalog-sorting {
	margin: 0;
}

.wl-catalog .wc-block-catalog-sorting label {
	color: #777777;
	font-size: 13px;
}

.wl-catalog .wc-block-catalog-sorting select {
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	color: var(--wl-ink);
	cursor: pointer;
	font-family: var(--wl-font);
	font-size: 13px;
	padding: 7px 30px 7px 14px;
}

/* Pagination inside the centered container. */
.wl-catalog .wp-block-query-pagination {
	border-top: 1px solid var(--wl-line);
	font-family: var(--wl-font);
	margin-top: 46px;
	padding-top: 22px;
}

/* Hoja de filtros ------------------------------------------------------- */
/* El telón es un elemento real, no un pseudo: hay dos hojas que compartirlo
 * y con un pseudo habría que adivinar por coordenadas si el toque ha caído
 * dentro o fuera. Fuera de la banda de hoja no se dibuja ni ocupa. */
.wl-catalog .wl-sheet-backdrop {
	display: none;
}

.wl-sheet__head {
	display: none;
}

@media (max-width: 1000px) {
	.wl-catalog {
		margin-top: 26px;
		padding: 0 18px;
	}

	/* Sin columna a la izquierda, el cuerpo deja de ser la rejilla de dos
	 * columnas con 46px de hueco: sin esto los libros se quedan en 252px
	 * de los 301px que hay, que es donde medía la rejilla antes de este
	 * cambio (y donde se quedó la regla siguiente, la de dos columnas:
	 * dos baldosas de 119px en vez de dos de 143). */
	.wl-catalog .wl-catalog-body {
		display: block;
	}

	.wl-catalog.is-sheet-ready .wl-view-btn--filter {
		display: inline-flex;
	}

	/* La columna deja de ser una caja: el panel —que es la salida del
	 * bloque, con su id y su cabecera— es directamente la hoja. Con
	 * `display: none` no habría caja que animar, y con la caja quieta
	 * (`display: contents`) se lleva su margen y su borde de escritorio. */
	.wl-catalog.is-sheet-ready .wl-catalog-filters {
		display: contents;
	}

	/* Cerrada no es `display: none`: es una caja aparcada fuera de la
	 * pantalla. Así tiene estado anterior que interpolar al entrar y sale
	 * del orden de tabulación mientras está cerrada (`visibility`), sin
	 * tener que mover el foco a mano al cerrarla. */
	.wl-catalog.is-sheet-ready #wl-catalog-filters-panel {
		background: #ffffff;
		border-radius: 18px 18px 0 0;
		bottom: 0;
		box-shadow: 0 -14px 44px rgba(17, 17, 17, 0.22);
		box-sizing: border-box;
		display: block;
		left: 0;
		max-height: 84vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
		position: fixed;
		right: 0;
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.3s;
		visibility: hidden;
		z-index: 60;
	}

	.wl-catalog.is-sheet-ready.is-filters-open #wl-catalog-filters-panel {
		transform: translateY(0);
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
		visibility: visible;
	}

	/* La cabecera se queda pegada arriba al recorrer los filtros: es la
	 * única forma de cerrar la hoja sin tener que volver a subir. */
	.wl-catalog.is-sheet-ready .wl-sheet__head {
		align-items: center;
		background: #ffffff;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		padding: 16px 0 12px;
		position: sticky;
		top: 0;
		z-index: 1;
	}

	.wl-catalog.is-sheet-ready .wl-sheet__title {
		color: var(--wl-ink);
		font-family: var(--wl-font);
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 0;
		margin: 0;
	}

	.wl-catalog.is-sheet-ready .wl-sheet__close {
		align-items: center;
		background: var(--wl-soft);
		border: 0;
		border-radius: 999px;
		box-sizing: border-box;
		color: var(--wl-ink);
		cursor: pointer;
		display: inline-flex;
		height: var(--wl-tap);
		justify-content: center;
		width: var(--wl-tap);
	}

	.wl-catalog .wl-sheet-backdrop {
		background: rgba(17, 17, 17, 0.42);
		bottom: 0;
		display: block;
		left: 0;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
		visibility: hidden;
		z-index: 55;
	}

	.wl-catalog.is-sheet-open .wl-sheet-backdrop {
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.3s ease;
		visibility: visible;
	}

	/* El panel de orden es la misma hoja, con su propia cabecera. Al abrirlo
	 * el navegador pinta el contenido ya en su sitio final —no hay estado
	 * anterior que interpolar—, así que el script pinta el estado cerrado
	 * con `.is-in`, fuerza el cálculo del estilo y lo quita: la transición
	 * entonces sí tiene de dónde a dónde ir. */
	.wl-catalog.is-sheet-ready .wl-sort__panel,
	.wl-catalog.is-sheet-ready .wl-sort__panel.is-in {
		border: 0;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -14px 44px rgba(17, 17, 17, 0.22);
		bottom: 0;
		left: 0;
		max-height: 78vh;
		min-width: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 12px calc(24px + env(safe-area-inset-bottom, 0px));
		position: fixed;
		right: 0;
		top: auto;
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.3s;
		visibility: hidden;
		z-index: 60;
	}

	.wl-catalog.is-sheet-ready .wl-sort[open] .wl-sort__panel {
		box-shadow: 0 -14px 44px rgba(17, 17, 17, 0.22);
		transform: translateY(0);
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
		visibility: visible;
	}

	.wl-catalog.is-sheet-ready .wl-sort__title {
		background: #ffffff;
		font-size: 17px;
		letter-spacing: 0;
		padding: 18px 12px 12px;
		position: sticky;
		text-transform: none;
		top: 0;
		z-index: 1;
	}

	.wl-catalog.is-sheet-ready .wl-sort__opt {
		font-size: 15px;
		min-height: var(--wl-tap-alto);
		padding: 12px;
	}
}

/* =========================================================================
 * Sidebar filters (web-libreria/shop-filters) + toolbar (catalog-toolbar).
 * Server-rendered blocks; these styles complete the editorial look.
 * ====================================================================== */

.wl-shop-filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wl-shop-filters li {
	margin: 0;
}

.wl-shop-filters a {
	color: var(--wl-ink);
	text-decoration: none;
}

/* El formulario de filtros: una sola caja GET que lleva las casillas, el
 * precio y el botón de aplicar. Al ticks no se navega —antes cada faceta era
 * un enlace y pulsar "Infantil" cambiaba de página y se llevaba por delante
 * el precio que ya estaba puesto—, solo se marca, y "Aplicar filtros" es lo
 * único que manda la petición. Por eso la columna se puede leer completa sin
 * que la página se mueva. */
.wl-filter-form {
	margin: 0;
}

.wl-filter-form__body {
	display: block;
}

/* Cada faceta es una fila con su casilla real. El `label` es lo que se toca
 * entera (la casilla sola mide 16px), y el contador se va a la derecha porque
 * el nombre con `flex: 1` se queda con el hueco que sobra. */
.wl-filter-check {
	align-items: center;
	/* `border-box` para que el suelo táctil sea la fila ENTERA: sin esto el
	 * `min-height: 44px` de la banda móvil se suma al `padding` y cada
	 * casilla medía 68px —medido a 390px— para un texto de 18. */
	box-sizing: border-box;
	color: var(--wl-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--wl-font);
	font-size: 13.5px;
	gap: 10px;
	letter-spacing: 0.01em;
	line-height: 1.35;
	padding: 6px 0;
}

.wl-filter-check:hover .wl-filter-check__name,
.wl-filter-check:focus-within .wl-filter-check__name {
	color: var(--wl-muted);
}

.wl-filter-check__input {
	accent-color: var(--wl-ink);
	flex: 0 0 auto;
	height: 16px;
	margin: 0;
	width: 16px;
}

.wl-filter-check__name {
	flex: 1 1 auto;
}

.wl-filter-cat-count {
	color: #999999;
	flex: 0 0 auto;
	font-size: 13px;
}

/* Pie del formulario: aplicar y limpiar, siempre en el mismo sitio y con el
 * mismo aspecto en la columna de escritorio y en la hoja del móvil.
 *
 * "Limpiar" solo se pinta cuando hay algo que limpiar (mismo criterio que el
 * punto rojo de la barra): en una página sin filtros era un botón que solo
 * recarga la página, y un pie con dos botones y uno muerto se lee peor que un
 * solo botón bien grande. Con filtros puestos, el de aplicar se encoge y los
 * dos se reparten la fila. */
.wl-filter-actions {
	align-items: center;
	border-top: 1px solid var(--wl-line);
	display: flex;
	gap: 10px;
	margin-top: 22px;
	padding: 16px 0 0;
}

.wl-filter-apply {
	appearance: none;
	background: var(--wl-ink);
	border: 1px solid var(--wl-ink);
	border-radius: 999px;
	box-sizing: border-box;
	color: #ffffff;
	cursor: pointer;
	flex: 1 1 auto;
	font-family: var(--wl-font);
	font-size: 14px;
	font-weight: 500;
	min-height: var(--wl-tap);
	padding: 0 18px;
	position: relative;
}

.wl-filter-apply:hover,
.wl-filter-apply:focus-visible {
	background: #000000;
	border-color: #000000;
	color: #ffffff;
}

.wl-filter-clear {
	border: 1px solid var(--wl-line);
	border-radius: 999px;
	/* `border-box` en los dos, o no se emparejan: el botón es un `<button>`
	 * (WordPress lo pone en border-box) y este es un `<a>` (content-box), así
	 * que sus dos bordes se sumaban al `min-height` y la pareja medía 44 y
	 * 45.4px, con un píxel de desnivel entre los dos. */
	box-sizing: border-box;
	color: var(--wl-ink);
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	font-family: var(--wl-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	min-height: var(--wl-tap);
	padding: 0 20px;
	text-decoration: none;
}

.wl-filter-clear:hover,
.wl-filter-clear:focus-visible {
	background: var(--wl-soft);
	border-color: var(--wl-ink);
	color: var(--wl-ink);
	text-decoration: none;
}

/* Folded drawer (≤1000px): the ONLY filter UI on phones, so its rows need
 * real touch height — the 5px of the desktop sidebar made every category a
 * 31px sliver. Sits after the base rules so the media query wins by order
 * (same specificity). The panel is one column wide here, so the extra row
 * height costs nothing. */
@media (max-width: 1000px) {
	.wl-filter-check {
		padding: 10px 0;
	}

	.wl-price {
		padding: 6px 0 10px;
	}

	/* El pie se queda pegado al borde de abajo de la hoja: con la lista de
	 * facetas por delante, "Aplicar" tiene que estar a la vista sin tener que
	 * bajar al final, que es justo cuando se llega a la última categoría. */
	.wl-catalog.is-sheet-ready .wl-filter-actions {
		background: #ffffff;
		bottom: 0;
		margin-top: 18px;
		padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
		position: sticky;
		z-index: 1;
	}
}

.wl-shop-count-group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Toolbar: count left, sorting right. */
.wl-shop-toolbar-inner {
	align-items: center;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	width: 100%;
}

.wl-shop-count {
	color: #7d7d7d;
	font-family: var(--wl-font);
	font-size: 13.5px;
	margin: 0;
}

.wl-shop-count-n {
	color: var(--wl-ink);
	font-weight: 600;
}

/* =========================================================================
 * Barra de vista del catálogo: los dos controles de la lista.
 * En el escritorio el orden es un desplegable y los filtros son la columna de
 * la izquierda; por debajo de 1000px esa columna no cabe y los mismos
 * controles se convierten en dos iconos aquí, con cada panel abriendo como
 * una hoja desde abajo. Son los mismos nodos en los dos casos —solo cambia
 * su posición—, así que no hay dos implementaciones que mantener.
 * ====================================================================== */

.wl-view-bar {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-left: auto;
}

/* Botón redondo de la casa, como el resto de controles utility del tema: ni
 * píldora negra ni caja; tinta y línea, relleno suave al pasar por encima.
 *
 * El `box-sizing` no es Cosmético: un `<button>` lo trae de serie en
 * `border-box` y un `<summary>` no, así que el mismo `min-height: 44px` daba
 * 44px en el botón de filtros y 61.44px en el de orden (44 de contenido + 16
 * de relleno). Medido a 390px. */
.wl-view-btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wl-line);
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--wl-ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wl-font);
	font-size: 13.5px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.2;
	min-height: 40px;
	padding: 8px 15px;
	/* El puntito de "hay filtros puestos" va en la esquina, no en el flujo:
	 * en el móvil la etiqueta del botón se esconde y una píldora con el
	 * número empujaba el icono de sitio. */
	position: relative;
	white-space: nowrap;
}

.wl-view-btn:hover,
.wl-view-btn:focus-visible {
	background: var(--wl-soft);
	border-color: var(--wl-ink);
	color: var(--wl-ink);
}

.wl-view-icon {
	flex: 0 0 auto;
}

/* Los tamaños van en CSS y no solo en los atributos `width`/`height` del
 * `<svg>`: hay un `svg { width: 24px; height: 24px }` suelto por el tema y
 * gana a los atributos de presentación, que para eso son presentacionales.
 * Medido: los iconos de la barra medían 24x24 con `width="18"`. */
.wl-view-icon--18 {
	height: 18px;
	width: 18px;
}

.wl-view-icon--20 {
	height: 20px;
	width: 20px;
}

/* Hay filtros puestos: un puntito rojo en la esquina del botón de filtros.
 * Va en la esquina y no dentro de la fila porque por debajo de 560px la
 * etiqueta “Filtros” se esconde y sólo queda el icono: como elemento en el
 * flujo, el puntito centroría el icono contra el borde. El anillo blanco lo
 * separa del borde de la píldora y el rojo es el mismo `--wl-price` del
 * precio de oferta, para que el aviso y el precio hablen el mismo idioma.
 * Cuántos hay ya lo dice el `aria-label` del botón y el enlace “Limpiar
 * filtros” de la barra. */
.wl-view-btn__dot {
	background: var(--wl-price);
	border-radius: 999px;
	box-shadow: 0 0 0 2px #ffffff;
	height: 8px;
	position: absolute;
	right: 4px;
	top: 4px;
	width: 8px;
}

/* El botón de filtros solo existe donde la columna está plegada; arriba de
 * 1000px la columna ya está a la vista y el botón sería un no-op. */
.wl-view-btn--filter {
	display: none;
}

/* Desplegable de orden --------------------------------------------------- */

.wl-sort {
	position: relative;
}

/* El marcador por defecto es el triángulo del navegador, y en algunos el
 * punto de la lista: los dos fuera, el botón es el que se ve. */
.wl-sort > summary {
	list-style: none;
}

.wl-sort > summary::-webkit-details-marker {
	display: none;
}

.wl-sort > summary::marker {
	content: "";
}

.wl-sort__panel {
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 14px;
	box-shadow: 0 18px 46px rgba(17, 17, 17, 0.14);
	min-width: 272px;
	padding: 8px;
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 40;
}

.wl-sort__title {
	color: #8a8a8a;
	font-family: var(--wl-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0;
	padding: 8px 12px 6px;
	text-transform: uppercase;
}

.wl-sort__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wl-sort__item {
	margin: 0;
}

.wl-sort__opt {
	align-items: center;
	border-radius: 10px;
	color: var(--wl-ink);
	display: flex;
	font-family: var(--wl-font);
	font-size: 14px;
	gap: 12px;
	min-height: 44px;
	padding: 8px 12px;
	text-decoration: none;
}

.wl-sort__opt:hover,
.wl-sort__opt:focus-visible {
	background: var(--wl-soft);
	color: var(--wl-ink);
}

.wl-sort__opt.is-current {
	font-weight: 600;
}

/* El visto se reserva siempre su hueco: si solo lo dibujara la opción
 * activa, el resto de las filas bailarían al cambiar de orden. */
.wl-sort__opt .wl-view-check {
	color: var(--wl-ink);
	opacity: 0;
}

.wl-sort__opt.is-current .wl-view-check {
	opacity: 1;
}

/* Teléfono: los dos controles se quedan en icono. La etiqueta sobra cuando
 * los dos botones están uno al lado del otro y el de filtros lleva su
 * contador; con las dos dentro, el nombre del orden activo (que es largo:
 * “Ordenar por precio: bajo a alto”) empujaba la barra a dos filas y
 * empujaba con ella la rejilla. Sigue en el DOM y en el `aria-label` del
 * lector de pantalla, y el icono del botón es el del orden en vigor.
 *
 * 560px y no 781px: entre 561 y 781 hay sitio de sobra para las etiquetas, y
 * en tableta conviene verlas. */
@media (max-width: 560px) {
	.wl-shop-toolbar-inner {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.wl-view-btn__label {
		display: none;
	}

	.wl-view-btn {
		justify-content: center;
		min-width: var(--wl-tap);
		padding-left: 11px;
		padding-right: 11px;
	}
}

/* WordPress flow layout injects 24px gaps between blocks: the catalog
 * manages its own rhythm, so flatten the two columns and their children.
 * The page head (or the author name) already opens the page, so the gaps
 * on the columns themselves would stack on top of it. */
.wl-catalog .wl-catalog-body,
.wl-catalog .wl-catalog-filters,
.wl-catalog .wl-catalog-products,
.wl-catalog .wl-catalog-filters > *,
.wl-catalog .wl-catalog-products > * {
	margin-top: 0 !important;
}

/* =========================================================================
 * Product detail page — reference layout: plate + sale badge, bold title,
 * price, black buy button + wishlist, book preview, author recommendations.
 * ====================================================================== */

.wl-pdp {
	box-sizing: border-box;
	margin: 0 auto;
	padding-left: 22px;
	padding-right: 22px;
	width: 100%;
}

.wl-pdp .woocommerce-breadcrumb {
	color: #999999;
	font-family: var(--wl-font);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	margin: 0 0 26px;
}

.wl-pdp .wp-block-woocommerce-store-notices {
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
}

.wl-pdp > .wp-block-woocommerce-breadcrumbs,
.wl-pdp .wp-block-woocommerce-breadcrumbs {
	margin: 0 !important;
}

.wl-pdp > *:first-child {
	margin-top: 0 !important;
}

/* WordPress flow layout injects 24px gaps between blocks: the product page
 * manages its own rhythm, so flatten them inside the hero column and main.
 * The recommendations section re-adds its own breathing room below. */
.wl-pdp > * + * {
	margin-top: 0 !important;
}

.wl-pdp .wl-pdp-info-col > * + *:not(.wl-pdp-descbox) {
	margin-top: 0 !important;
}

.wl-pdp > .wl-pdp-rel-wrap,
.wl-pdp .wl-pdp-rel-wrap {
	margin-top: 84px !important;
}

.wl-pdp .woocommerce-breadcrumb a {
	color: #777777;
	text-decoration: none;
}

/* Migas de pan: reposan en gris, así que al hover se encienden a tinta
 * (si bajaran a gris no se vería el cambio) pero sin subrayado. */
.wl-pdp .woocommerce-breadcrumb a:hover,
.wl-pdp .woocommerce-breadcrumb a:focus-visible {
	color: var(--wl-ink);
}

.wl-pdp .woocommerce-breadcrumb .breadcrumb-separator {
	padding: 0 7px;
}

/* Hero: big grey plate + info column. */
.wl-pdp-hero {
	gap: 72px;
	margin: 0 0 84px;
}

.wl-pdp-media-col {
	flex-basis: 33% !important;
}

/* The book, sized for the shelf and not for the screen. At 33% of a 1400px
 * hero the plate measured 453px and the cover 376x573: 64% of the viewport
 * height, taller than the title, the author and the buy button together, and
 * it kept growing on wider monitors because the column was a share of the
 * hero. Past 1000px the column stops following the window and settles at
 * 360px — cover ~316x482 at 1440, and the same at 2000. */
@media (min-width: 1001px) {
	.wl-pdp-media-col {
		flex: 0 0 360px !important;
	}

	.wl-pdp-info-col {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Info column typography. Scoped to the column on purpose: the book title and
 * the card titles are the same block, and a bare ".wl-pdp" selector reached
 * the recommendation cards at the bottom of the page too — handing them the
 * book title's flush margin, so their titles sat on the card border while
 * the author and the price kept their 12px inset. */
.wl-pdp-info-col .wp-block-post-title {
	color: var(--wl-ink);
	font-size: clamp(30px, 2.8vw, 40px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.12;
	margin: 6px 0 14px;
}

.wl-pdp .wl-pdp-author {
	color: var(--wl-muted);
	font-family: var(--wl-font);
	font-size: 14.5px;
	letter-spacing: 0.01em;
	/* Author, price and buy button read as one block: the gaps between them
	 * were wide enough to look like three separate paragraphs (20px + 26px).
	 * Tightened to 8px and 14px: still distinct, no longer detached. */
	margin: 0 0 8px;
}

.wl-pdp .wl-pdp-author a {
	color: var(--wl-ink);
	font-weight: 500;
	text-decoration: none;
}


/* Price: red sale price first, grey strikethrough regular price after. */
.wl-pdp .wl-pdp-price .wc-block-components-product-price {
	align-items: baseline;
	color: var(--wl-ink);
	display: flex;
	font-size: 22px;
	font-weight: 400;
	gap: 10px;
	margin: 0 0 14px;
}

.wl-pdp .wl-pdp-price .wc-block-components-product-price del {
	margin-left: 0 !important;
	order: 2;
}

.wl-pdp .wl-pdp-price .wc-block-components-product-price ins {
	order: 1;
}

/* The parent theme colors bdi directly, which would beat inheritance:
 * target the amount inside ins/del explicitly. */
.wl-pdp .wl-pdp-price .wc-block-components-product-price ins,
.wl-pdp .wl-pdp-price .wc-block-components-product-price ins bdi,
.wl-pdp .wl-pdp-price .wc-block-components-product-price ins .woocommerce-Price-amount {
	color: var(--wl-price) !important;
}

.wl-pdp .wl-pdp-price .wc-block-components-product-price del bdi {
	color: var(--wl-price-was) !important;
}

.wl-pdp .wl-pdp-price .wc-block-components-product-price__value.is-discounted {
	color: var(--wl-price);
	text-decoration: none;
}

/* Buy row: compact centered button + square wishlist beside it. */

/* The block wrapper also holds two invisible leftovers: Stripe's Express
 * Checkout mount and the <wc-order-attribution-inputs> web component. Left as
 * a block box they produced a stray 26px line box under the form, so the row
 * was taller than the button and the wishlist button no longer sat level
 * with it. As a column flex box each leftover collapses to its own height —
 * nothing is hidden, so a payment method that fills its mount still shows. */
.wl-pdp .wl-pdp-buy .wl-pdp-cart {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

/* That web component hosts hidden inputs, not content, but WooCommerce still
 * gives it a top margin: zero it so the row is exactly the button's height. */
.wl-pdp .wl-pdp-buy .wl-pdp-cart wc-order-attribution-inputs {
	margin: 0;
}

/* One height for both controls, so the wishlist sits flush with the black
 * button instead of being centred against a taller box. */
.wl-pdp .wl-pdp-buy {
	--wl-pdp-buy-h: 50px;
}

.wl-pdp .wl-pdp-buy .wl-pdp-cart form.cart {
	background: var(--wl-ink);
	border-radius: 4px;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	justify-content: center;
	margin: 0;
	max-width: 340px;
	padding: 0;
}

.wl-pdp .wl-pdp-buy .wl-pdp-cart .quantity {
	display: none !important;
}

.wl-pdp .wl-pdp-buy .wl-pdp-cart button[type="submit"] {
	background: transparent !important;
	border: 0;
	border-radius: 0;
	color: #ffffff;
	cursor: pointer;
	font-family: var(--wl-font);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	/* The shared WooCommerce CTA rule (cart & checkout) owns this button's
	 * height and padding with !important; ask for the same height here so the
	 * wishlist square and the black button stay on one line. The margin and
	 * max-width neutralise the parent theme's ≤767px mobile rule
	 * (.single_add_to_cart_button { margin: 10px !important; max-width: 260px }),
	 * which inflated the form 20px above the row's shared height at
	 * tablet widths. */
	margin: 0 !important;
	max-width: none;
	min-height: var(--wl-pdp-buy-h);
	padding: 0 38px !important;
	text-align: center;
	transform: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	white-space: nowrap;
}

/* Quiet hover: a soft tint, never the parent theme's jump. */
.wl-pdp .wl-pdp-buy .wl-pdp-cart button[type="submit"]:hover,
.wl-pdp .wl-pdp-buy .wl-pdp-cart button[type="submit"]:focus-visible {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff;
	opacity: 1;
	transform: none;
}

.wl-pdp-wishlist {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: var(--wl-pdp-buy-h, 50px);
	justify-content: center;
	padding: 0;
	transition: border-color 0.15s ease, color 0.15s ease;
	width: var(--wl-pdp-buy-h, 50px);
}

.wl-pdp-wishlist:hover,
.wl-pdp-wishlist:focus-visible {
	border-color: var(--wl-ink);
	color: var(--wl-ink);
}

.wl-pdp-wishlist.is-active {
	color: var(--wl-price);
}

.wl-pdp-wishlist.is-active svg path {
	fill: currentColor;
}

/* Description box: clamped under the buy button, expands in place. */
.wl-pdp-descbox {
	margin-top: 56px;
}

/* The template hands this box FSE's `constrained` layout, which caps its
 * children at `--wp--style--global--content-size` (780px) and centres them
 * with auto margins. Below that width nothing happened; above it — every
 * desktop with the hero in two columns — the heading and the text drifted
 * inwards while the title, the price and the buy button stayed flush with
 * the column's left edge, so the box looked misaligned with the rest. The
 * column is already the constraint here: the children just fill it. */
.wl-pdp-descbox.is-layout-constrained > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.wl-pdp-descbox-title {
	color: var(--wl-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

/* The preview is cut in LINES, not in pixels. A fixed 74px ended 2.5px into
 * the third line, so the last visible line was always sliced and the text
 * seemed to stop mid-sentence; "3lh" is exactly three lines of this box's own
 * line-height, whatever the font size, the language or the width of the
 * column. The line count lives in a custom property because the script below
 * needs the same number to know whether there is anything to expand.
 * The font size and line-height are declared here and not only on the
 * paragraphs, because "lh" resolves against the clamped element itself. */
.wl-pdp-descbox-body {
	--wl-pdp-desc-lines: 3;
	font-size: 15px;
	line-height: 1.7;
	max-height: 77px; /* Fallback for engines without the lh unit. */
	max-height: calc(var(--wl-pdp-desc-lines) * 1lh);
	overflow: hidden;
	position: relative;
	transition: max-height 0.35s ease;
}

/* Open: hundreds of lines tall, so a long description is never cut off at the
 * bottom while the button still reads "Leer menos". A length rather than
 * "none" keeps the expansion animated. */
.wl-pdp-descbox-body.is-open {
	max-height: 4000px;
	max-height: 300lh;
}

/* Only the very bottom of the last line fades: enough to say "there is more",
 * short enough that the line itself stays crisp and readable. */
.wl-pdp-descbox-body:not(.is-open)::after {
	background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 86%);
	bottom: 0;
	content: "";
	height: 9px;
	height: 0.35lh;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.wl-pdp-descbox-body p {
	color: #4a4a4a;
	font-family: var(--wl-font);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 10px;
}

/* The last paragraph keeps no trailing margin: inside the clamp that margin
 * would be dead space under the cut, and expanded it a gap under the text. */
.wl-pdp-descbox-body p:last-child {
	margin-bottom: 0;
}

.wl-pdp-desc-toggle {
	background: none;
	border: 0;
	color: var(--wl-ink);
	cursor: pointer;
	font-family: var(--wl-font);
	font-size: 14px;
	font-weight: 600;
	margin-top: 12px;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wl-pdp-desc-toggle:hover {
	color: #6b6b6b;
}

/* A book with no long description would otherwise show the heading over an
 * empty box. product-page.php flags that case on the body. */
body.wl-pdp-empty-desc .wl-pdp-descbox {
	display: none;
}

/* Recommendations: header with "Ver todos", 4-card grid, side arrows. */
.wl-pdp-rel-wrap {
	margin-top: 84px;
	position: relative;
}

.wl-pdp-rel-head {
	align-items: baseline;
	margin-bottom: 26px;
}

.wl-pdp-rel-title {
	color: var(--wl-ink);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	letter-spacing: -0.04em;
	margin: 0;
}

.wl-rel-more {
	color: #4d4d4d;
	font-family: var(--wl-font);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.wl-rel-more:hover {
	color: var(--wl-ink);
}

/* Responsive: stack the hero under 1000px.
 *
 * El aire de página de 18px ya NO lo lleva el <main>: lo llevan sus hijos.
 * Si lo llevara el main, la franja de recomendaciones —que ha de llegar al
 * borde físico en móvil— tendría que comérselo con márgenes negativos, y
 * esos pierden contra el `margin: auto !important` del layout constrained
 * del núcleo (medido: la franja se quedaba a 18px del borde pase lo que
 * llevara la hoja de estilos del tema). Con el main a 0, la franja llega
 * sola al borde y cada bloque se da su aire por dentro. */
@media (max-width: 1000px) {
	.wl-pdp {
		padding-left: 0;
		padding-right: 0;
	}

	/* El aire lo retoman todos los hijos MENOS la franja de recomendaciones:
	 * un `> *` y no una lista de clases, porque los avisos de WooCommerce y
	 * compañía pueden llegar con la clase que les dé la gana. */
	.wl-pdp > *:not(.wl-pdp-rel-wrap) {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Último inserto: el wrapper `div.product` que WooCommerce cuelga sobre
	 * el main recibe el aire de la banda global de insertos del tema
	 * (`body .wp-site-blocks > :not(header):not(footer):not(.wl-home):…`,
	 * 18px `!important` en móvil, especificidad 0,4,3 —medido—). Es el aire
	 * que seguía viéndose entre la franja y el borde. A cero en móvil; la
	 * quinta clase `.product` (que el wrapper también lleva) sube esta regla
	 * a 0,5,1 y gana a la banda por especificidad, no por orden de hoja. */
	body.single-product .wp-site-blocks > .wp-block-group.woocommerce.product {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.wl-pdp-hero {
		display: grid;
		gap: 30px;
		grid-template-columns: 1fr;
		margin-bottom: 64px;
	}

	.wl-pdp-info-col .wp-block-post-title {
		font-size: clamp(26px, 6vw, 34px);
	}

	.wl-pdp-descbox {
		margin-top: 44px;
	}

	.wl-pdp-rel-wrap {
		margin-top: 56px;
	}

}

/* Tablet portrait (iPad 768x1024) fits the two columns the desktop uses: the
 * book beside the title and the buy row. Stacked, the cover measured 628x958
 * and the title fell at y=1156, a whole screen down; side by side the hero
 * goes from 1492px to 464px. The book plate is 260-304px here and the info
 * column takes the rest (355px at 768, 326px at the 660px floor, where the buy
 * row still fits at 248px). Below 660px the columns stack exactly as before. */
@media (min-width: 660px) and (max-width: 1000px) {
	.wl-pdp .wl-pdp-hero {
		display: flex;
		/* `!important` obligatorio: el block library fuerza
		 * `flex-wrap: wrap !important` por debajo de 782px, y sin él las dos
		 * columnas se apilaban igual (medido a 767: portada 628x958, título
		 * en y=1156). */
		flex-wrap: nowrap !important;
		gap: 36px;
	}

	/* Estas dos necesitan SELECTOR, no solo `!important`: por debajo de 781px
	 * el block library pone `flex-basis: 100% !important` a
	 * `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`,
	 * que tiene la misma especificidad (0,2,0) que estas y va cargado después.
	 * Empates los gana el último, así que a 0,2,0 se quedaba apilado y con
	 * `nowrap` la columna de info caía a 0px. Con `.wl-pdp` delante, (0,4,0). */
	.wl-pdp .wl-pdp-hero > .wp-block-column.wl-pdp-media-col {
		flex: 0 0 clamp(260px, 42%, 304px) !important;
	}

	.wl-pdp .wl-pdp-hero > .wp-block-column.wl-pdp-info-col {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	.wl-pdp .wl-pdp-buy .wl-pdp-cart form.cart {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}

	.wl-pdp .wl-pdp-buy .wl-pdp-cart button[type="submit"] {
		font-size: 13.5px;
		padding: 0 30px !important;
		text-align: center;
		width: 100%;
	}

	.wl-pdp-wishlist {
		height: var(--wl-pdp-buy-h, 50px);
		width: var(--wl-pdp-buy-h, 50px);
	}
}

/* The template wrapper gets WP's flow gap (margin-block-start) on product
 * pages: the breadcrumb already breathes with its own spacing. */
body.single-product .wp-site-blocks > .wp-block-group.woocommerce {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* The details and recommendations groups are alignwide, but WP's constrained
 * layout still narrows their children to content-size and centers them:
 * free them so headings and grids align with the hero plate. */
.wl-pdp .wl-pdp-rel-wrap > *,
.wl-pdp .wl-pdp-rel-wrap .wp-block-woocommerce-product-collection > * {
	max-width: none !important;
}

/* =========================================================================
 * Product gallery slider — fade between covers, arrows and dots inside
 * the editorial plate. Images come from the product gallery in WordPress.
 * ====================================================================== */
.wl-pdp .wl-gal {
	background: #f7f7f7;
	border: 1px solid var(--wl-line);
	box-sizing: border-box;
	min-height: 320px;
	overflow: hidden;
	position: relative;
}

/* All slides share one grid cell: intrinsic height, no absolute
 * positioning, so the plate can never collapse or leak its contents. */
.wl-pdp .wl-gal-track {
	display: grid;
	width: 100%;
}

.wl-pdp .wl-gal-slide {
	box-sizing: border-box;
	align-items: center;
	display: flex;
	grid-area: 1 / 1;
	justify-content: center;
	opacity: 0;
	padding: 38px;
	pointer-events: none;
	position: relative;
	transition: opacity 0.45s ease;
	visibility: hidden;
}

.wl-pdp .wl-gal-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.wl-pdp .wl-gal-slide img {
	/* Fill the plate: the cover is the star of the ficha, not a stamp.
	 * Width drives the size and height follows from the image's own ratio
	 * (contain keeps any aspect inside the slide), so a 333x500 original
	 * renders as a ~490x735 poster instead of a half-size thumbnail. */
	box-sizing: border-box;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: 100%;
}

/* Sale badge on the gallery plate. */
/* Una sola columna para el descuento y las etiquetas de la imagen grande, con
 * la misma idea que las tarjetas: cada una ocupa el alto que tiene y la
 * separación es igual para todas. `pointer-events: none` porque la columna
 * cuelga por encima de la galería y no debe robar el clic a los controles. */
.wl-pdp .wl-gal-corner {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 4px;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: 3;
}

.wl-pdp .wl-gal-badge {
	background: #e3402e;
	border-radius: 0 0 3px 0;
	box-sizing: border-box;
	color: #ffffff;
	font-family: var(--wl-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 13px;
	white-space: nowrap;
}

/* Arrows: quiet white circles at both sides. */
.wl-gal-arrow {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--wl-line);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
	color: var(--wl-ink);
	cursor: pointer;
	display: flex;
	height: 38px;
	justify-content: center;
	padding: 0;
	position: absolute;
	/* Static centering (no translateY): arrows can never shift, whatever
	 * the page underneath is doing. 38px button → 19px half-height. */
	top: calc(50% - 19px);
	transition: background 0.15s ease, box-shadow 0.15s ease;
	width: 38px;
	z-index: 3;
}

.wl-gal-arrow--prev {
	left: 16px;
}

.wl-gal-arrow--next {
	right: 16px;
}

.wl-gal-arrow:hover,
.wl-gal-arrow:focus-visible {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Dots: bottom center of the plate. */
.wl-gal-dots {
	bottom: 18px;
	display: flex;
	gap: 7px;
	justify-content: center;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 3;
}

.wl-gal-dot {
	background: #c9c9c9;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 7px;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
	width: 7px;
}

.wl-gal-dot.is-active {
	background: var(--wl-ink);
	transform: scale(1.15);
}

/* =========================================================================
 * Recommendations carousel: fixed card widths inside a scroll viewport,
 * side arrows overlaying the edges.
 * ====================================================================== */
.wl-pdp-rel-grid {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	overflow-y: hidden;
	/* No scroll-snap and no CSS smooth here: both fight the JS carousel's
	 * own smooth scrollBy (mandatory snap reverts intermediate positions
	 * and freezes chained steps). JS passes behavior:'smooth' per step. */
	scrollbar-width: none;
}

.wl-pdp-rel-grid::-webkit-scrollbar {
	display: none;
}

/* Single rail definition: the gaps live here once, and nothing below
 * re-states them (the narrow-screen gap rules were dead: this !important
 * pair already won at every width). */
/* La fila la pinta el servidor (inc/product-relations.php): una <ul> que
 * lleva a propósito la clase del motor de WooCommerce —.wc-block-product-
 * template— para heredar el carrusel que ya existía: los gaps de arriba y
 * los anchos por columna de la regla siguiente valen igual para sus <li>.
 * Lo único nuevo es el reset de lista: sin él, las viñetas del <ul> se
 * colaban a la izquierda de cada tarjeta. */
.wl-pdp-rel-grid .wl-pdp-rel-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wl-pdp-rel-grid .wc-block-product-template {
	column-gap: 14px !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	row-gap: 30px !important;
}

.wl-pdp-rel-grid .wc-block-product-template > * {
	flex: 0 0 calc((100% - 60px) / 4);
	min-width: 0;
}

.wl-rel-arrow {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	color: var(--wl-ink);
	cursor: pointer;
	display: flex;
	height: 46px;
	justify-content: center;
	padding: 0;
	position: absolute;
	/* Fixed vertical anchor, level with the row of covers and left static:
	 * no translateY() and no JS re-measuring, so the arrows can never drift
	 * up or down while the strip scrolls. 163px ≈ vertical center of the
	 * cover plates at desktop widths. */
	top: 163px;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
	width: 46px;
	z-index: 3;
}

.wl-rel-arrow--prev {
	left: -14px;
}

.wl-rel-arrow--next {
	right: -14px;
}

.wl-rel-arrow:hover,
.wl-rel-arrow:focus-visible {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.wl-rel-arrow:disabled {
	cursor: default;
	opacity: 0.3;
}

.wl-pdp-rel-wrap.wl-rel-has-arrows .wl-rel-arrow:disabled {
	opacity: 0.35;
}

.wl-pdp-rel-wrap:not(.wl-rel-has-arrows) .wl-rel-arrow {
	display: none;
}

@media (max-width: 1000px) {
	.wl-pdp .wl-gal {
		min-height: 0;
	}

	.wl-pdp .wl-gal-slide {
		padding: 28px 22px 38px;
	}

	.wl-pdp .wl-gal-slide img {
		height: auto;
		max-height: 100%;
		max-width: 100%;
		width: 100%;
	}

	.wl-pdp-rel-grid .wc-block-product-template > * {
		flex-basis: calc((100% - 40px) / 3);
	}

	/* El carrusel llega al BORDE de la pantalla: como el main ya no lleva
	 * aire de página (ver el comentario del media de arriba), la franja
	 * ocupa el ancho completo sin márgenes negativos. El título conserva
	 * el aire por dentro, y la fila —que se desplaza entera con el dedo—
	 * corta sus tarjetas en el borde físico: la última asoma cortada, que
	 * es la señal de que hay más. */
	.wl-pdp .wl-pdp-rel-wrap .wl-pdp-rel-title,
	.wl-pdp .wl-pdp-rel-wrap > .wl-pdp-rel-grid {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* La franja ya empieza en el borde físico: las flechas, que colgaban
	 * medio fuera (left/right: -14px), se clavan dentro para no quedar
	 * cortadas por la pantalla. */
	.wl-rel-arrow--prev {
		left: 6px;
	}

	.wl-rel-arrow--next {
		right: 6px;
	}

	.wl-rel-arrow {
		height: 40px;
		top: 92px;
		width: 40px;
	}

	.wl-rel-arrow--prev {
		left: -14px;
	}

	.wl-rel-arrow--next {
		right: -14px;
	}
}

@media (max-width: 640px) {
	/* Dos tarjetas y un asomo de la tercera: la celda es (100% - 18px)/2.3,
	 * no la mitad exacta que había —a 390px la mitad dejaba 177px por
	 * tarjeta y un hueco muerto a la derecha; con el asomo la fila dice
	 * sola que se puede desplazar. El 18px restado es el padding que la
	 * regla de arriba devuelve a la izquierda. */
	.wl-pdp-rel-grid .wc-block-product-template > * {
		flex-basis: calc((100% - 18px) / 2.3);
	}

	/* Aire asimétrico: el mismo de la página a la izquierda, y a la derecha
	 * el mínimo para que la tarjeta que asoma no se pegue al borde
	 * físico del teléfono. */
	.wl-pdp .wl-pdp-rel-wrap > .wl-pdp-rel-grid {
		padding-left: 18px;
		padding-right: 8px;
	}

	/* Con celdas de dos tarjetas y asomo, la placa mide menos que antes:
	 * la flecha baja a su centro (y a 36px, el tamaño del asa de la
	 * galería). El left/right: 6px lo pone la regla de 1000px de arriba. */
	.wl-rel-arrow {
		height: 36px;
		top: 58px;
		width: 36px;
	}

	.wl-gal-arrow {
		height: 34px;
		top: calc(50% - 17px);
		width: 34px;
	}

	.wl-gal-arrow--prev {
		left: 10px;
	}

	.wl-gal-arrow--next {
		right: 10px;
	}
}

/* Card plates: the cover sits centered inside the plate at the same ratio
 * as the home "featured" grid (71% wide, max 84% tall, contain). */
.wl-pdp-rel-grid .wp-block-woocommerce-product-image a,
.wl-pdp-rel-grid .wc-block-components-product-image a {
	/* Full plate height: the cover's percentage max-height needs a
	 * definite containing block, or tall covers overflow and get cropped. */
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

/* The product-image block prints `object-fit:cover;aspect-ratio:1/1` inline,
 * which crops every portrait cover into a square. !important beats inline
 * declarations, so the plates keep the same cover anatomy as the home grid. */
.wl-pdp-rel-grid .wc-block-components-product-image img,
.wl-pdp-rel-grid .wp-block-woocommerce-product-image img {
	aspect-ratio: auto !important;
	display: block;
	height: auto !important;
	margin: 0 auto;
	max-height: 84%;
	max-width: 71% !important;
	object-fit: contain !important;
	transform: none !important;
	width: auto !important;
}

/* =========================================================================
 * Cart: header count bubble + slide-in mini-cart drawer.
 *
 * WooCommerce ships both with opinionated defaults (20px badge type, a
 * product table with duplicated prices, a full-width checkout button). This
 * section re-skins those blocks in the site's editorial language — same ink,
 * hairlines, plates and type as the rest of the shop — and stays purely
 * presentational, so the owner can keep managing the cart from the Site
 * Editor without anything breaking.
 * ====================================================================== */

/* Count bubble over the header cart icon, with a white ring so it stays
 * legible against the icon stroke. WooCommerce hides it at zero items, which
 * is what we want: the number only appears once there is something to count.
 *
 * The bubble is placed from the CENTER of the button, not from its corner,
 * and that is the whole point. The button is 30px on the desktop header and
 * 44px in the touch layer, but the icon inside is the same 24px centred in
 * both — measured: the old `right: -7px; top: -5px` is measured from the
 * button's edge, so in the 44px touch box the bubble drifted 7px further out
 * than in the 30px one while the icon did not move at all. That was the
 * "the red dot is too far away" on phones: same number, same icon, bubble
 * 7px adrift. Anchoring to the centre makes the offsets absolute and the
 * bubble lands on the same pixel of the icon in every device.
 *
 * `left: 50%` + `margin-left` fixes its top-left corner, which is what
 * WooCommerce's own `left: 100%; margin-left: -44%` did too, scaled to the
 * bubble instead of to the button. The bubble grows to the right as the
 * number gets longer, the way it does on the desktop today.
 *
 * `-21px` up and `4px` right are measured from the icon, not guessed: the
 * 24px icon reaches 12px above the centre, so the bubble's top edge clears
 * it by 9px, and its left edge bites 8px into the icon's right half —a
 * tercio de su ancho, el solape que hace que se lea pegado en vez de
 * suelto, sin taparle el asa a la bolsa. */
.wl-site-header .wc-block-mini-cart__badge {
	align-items: center;
	background: #e3402e !important;
	border: 1.5px solid #ffffff;
	border-radius: 999px;
	box-sizing: border-box;
	color: #ffffff !important;
	display: inline-flex !important;
	font-family: var(--wl-font) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	height: 18px;
	justify-content: center;
	letter-spacing: 0;
	left: 50%;
	line-height: 1 !important;
	margin-left: 4px;
	margin-top: -21px;
	min-width: 18px;
	padding: 0 5px;
	position: absolute !important;
	right: auto;
	top: 50%;
	transform: none;
	z-index: 2;
}

/* When the cart is empty the bubble goes away, and the attribute that says so
 * is WooCommerce's own: it sets `hidden` on the badge and binds it to whether
 * the count is above zero. The two rules above pin `display: inline-flex
 * !important` on the badge, which is author CSS and beats the `display: none`
 * the browser gives `[hidden]` — so an empty cart showed a red "0". This puts
 * the attribute back in charge; the bubble and the `display` are both declared
 * in the same band, a few lines apart, on purpose. */
.wl-site-header .wc-block-mini-cart__badge[hidden],
.wl-home-tools .wc-block-mini-cart__badge[hidden] {
	display: none !important;
}

/* --- Drawer shell ------------------------------------------------------- */

/* Fill the panel WooCommerce already sizes (480px on desktop, the viewport on
 * phones) so title, prices and buttons share one right edge. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	background: #ffffff;
	box-sizing: border-box;
	font-family: var(--wl-font);
	width: 100%;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents {
	height: 100%;
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 26px 26px 24px;
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* WooCommerce swaps the filled and empty views with the `hidden` attribute;
 * a layout rule with `display: flex` would beat it and leave an empty cart
 * showing a subtotal and a checkout button. Keep `hidden` authoritative. */
.wc-block-mini-cart__drawer [hidden] {
	display: none !important;
}

/* The close button shares the title's line: the wrapper offset matches the
 * drawer padding and the 40px button centres against the 40px title box. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close-wrapper {
	position: absolute;
	right: 26px;
	top: 26px;
	z-index: 3;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	align-items: center;
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 50%;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0 !important;
	transition: background 0.15s ease;
	width: 40px;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible {
	background: #f3f3f3 !important;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
	height: 18px;
	width: 18px;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	align-items: center;
	border-bottom: 1px solid var(--wl-line);
	color: var(--wl-ink);
	display: flex;
	font-family: var(--wl-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: 0 !important;
	min-height: 40px;
	padding: 0 48px 14px 0 !important;
}

/* Woo centres the close button with a negative margin of its own, which left
 * it floating above the title. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close-wrapper,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	margin: 0 !important;
}

/* The notice area is a layout slot even while empty, which pushed the title and
 * everything under it 16px down. Collapse it when it has nothing to say. */
.wc-block-mini-cart__drawer .wc-block-components-notices:empty {
	display: none !important;
}

/* The "(2)" counter next to the drawer title reads as noise: the items below
 * already say how many there are. Markup stays so it can be re-enabled. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block {
	display: none !important;
}

/* --- Item rows ---------------------------------------------------------- */

.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 !important;
	-webkit-overflow-scrolling: touch;
}

/* Woo frames the items table with a 2px rounded box; the rows already read as
 * a list thanks to their hairlines, so drop the frame. Fixed layout lets the
 * cover and the price keep their width while the title wraps. */
.wc-block-mini-cart__drawer .wc-block-cart-items {
	border: 0 !important;
	border-collapse: collapse !important;
	border-radius: 0 !important;
	border-spacing: 0 !important;
	display: block !important;
	padding: 0 !important;
	table-layout: fixed !important;
	width: 100% !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-items tbody {
	display: block !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__product {
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Column headings ("Producto / Detalles / Total") add nothing at this size:
 * image, name and price already read as one row. */
.wc-block-mini-cart__drawer .wc-block-cart-items__header {
	display: none !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-items__row {
	border-bottom: 1px solid var(--wl-line);
}

/* WooCommerce lays this table out as a grid and runs four tracks for the three
 * cells a row has, so the last track stayed empty and the price never reached
 * the drawer's right edge. Define the three tracks the row actually needs:
 * cover, flexible middle, price. The middle track may shrink, so a long title
 * can never push the price out of the panel. */
.wc-block-mini-cart__drawer .wc-block-cart-items__row {
	align-items: center;
	column-gap: 14px;
	display: grid !important;
	grid-template-columns: 70px minmax(0, 1fr) 74px;
	padding: 16px 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-items__row > td {
	display: block !important;
	min-width: 0;
	padding: 0 !important;
	vertical-align: middle !important;
	width: auto !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__image {
	padding: 0 !important;
	width: auto !important;
}

/* The same grey plate the shop uses: a cover inside a panel reads as a
 * product, a cover floating on white reads as a loose file. */
.wc-block-mini-cart__drawer .wc-block-cart-item__image a {
	align-items: center;
	background: #f3f3f3;
	border: 1px solid var(--wl-line);
	box-sizing: border-box;
	display: flex !important;
	height: 100px;
	justify-content: center;
	overflow: hidden;
	width: 70px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__image a[hidden] {
	display: none !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__image img {
	background: transparent;
	box-sizing: border-box;
	display: block;
	height: auto !important;
	margin: 0 auto;
	max-height: 84% !important;
	max-width: 72% !important;
	object-fit: contain !important;
	width: auto !important;
}

/* WooCommerce keeps a hidden twin of each thumbnail in the cell until the
 * product loads; `display: block` above would otherwise reveal it. */
.wc-block-mini-cart__drawer .wc-block-cart-item__image img[hidden] {
	display: none !important;
}

/* Nombre del libro en el cajón del carrito, entero. El `line-clamp: 2` de aquí
 * saltaba la última línea de los títulos largos sin dejar puntos. El cajón
 * crece hacia abajo con la lista, así que no hace falta recortarlo. */
.wc-block-mini-cart__drawer .wc-block-components-product-name {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em;
	line-height: 1.3 !important;
	margin: 0;
	text-decoration: none !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name:hover {
	color: var(--wl-muted) !important;
}

/* Twin of the name WooCommerce renders while the item loads. */
.wc-block-mini-cart__drawer .wc-block-components-product-name[hidden] {
	display: none !important;
}

/* Short description and attribute tables belong to the product page, not to a
 * two-line cart row. */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata,
.wc-block-mini-cart__drawer .wc-block-cart-item__prices {
	display: none !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-badge {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--wl-muted) !important;
	display: block;
	font-family: var(--wl-font) !important;
	font-size: 12px !important;
	margin: 0 0 2px !important;
	padding: 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__quantity {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	align-items: center;
	background: #ffffff !important;
	border: 1px solid var(--wl-line);
	border-radius: 999px;
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto !important;
	height: 30px;
	padding: 0 4px;
	width: auto !important;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wl-font) !important;
	flex: 0 0 28px !important;
	font-size: 15px !important;
	height: 26px !important;
	justify-content: center;
	line-height: 1 !important;
	min-width: 0 !important;
	padding: 0 !important;
	transition: background 0.15s ease;
	width: 28px !important;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:hover,
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:focus-visible {
	background: #f3f3f3 !important;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	flex: 0 0 26px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: 26px !important;
	min-width: 0 !important;
	padding: 0 !important;
	text-align: center;
	width: 26px !important;
}

/* WooCommerce subraya la × de "Eliminar" en reposo y se lo quita al hover:
 * el subrayado de un icono suelto se ve como un fallo. Aquí ni en reposo ni
 * al pasar el ratón; el color gris -> tinta es toda la señal. */
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	color: #a3a3a3 !important;
	cursor: pointer;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	padding: 0 !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
	width: 28px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover,
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:focus-visible {
	color: var(--wl-ink) !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg {
	height: 16px;
	width: 16px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__total {
	color: var(--wl-ink) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 0 !important;
	text-align: right;
	white-space: nowrap;
	width: auto !important;
}

/* "Ahorra 0,00 €" is noise; the product page already shows the discount. */
.wc-block-mini-cart__drawer .wc-block-components-sale-badge {
	display: none !important;
}

/* --- Footer ------------------------------------------------------------- */

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	border-top: 1px solid var(--wl-line);
	margin-top: 20px;
	padding: 18px 0 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-components-totals-item__label {
	color: var(--wl-muted) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	color: var(--wl-ink) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

.wc-block-mini-cart__drawer .wc-block-components-totals-item__description {
	color: var(--wl-muted) !important;
	font-size: 12.5px !important;
	line-height: 1.45;
	margin-top: 6px !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
	align-items: center;
	border-radius: 2px !important;
	box-sizing: border-box;
	display: inline-flex !important;
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	height: 48px;
	justify-content: center;
	letter-spacing: -0.01em;
	padding: 0 16px !important;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
	width: 100% !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	color: #ffffff !important;
	order: 1;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:focus-visible {
	background: #2b2b2b !important;
	border-color: #2b2b2b !important;
	color: #ffffff !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
	display: none !important;
}

/* --- Empty state -------------------------------------------------------- */

.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding: 40px 10px;
	text-align: center;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper p {
	color: var(--wl-muted) !important;
	font-size: 15px !important;
	margin: 0 0 20px !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	align-items: center;
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	box-sizing: border-box;
	color: #ffffff !important;
	display: inline-flex !important;
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	height: 48px;
	justify-content: center;
	padding: 0 26px !important;
	text-decoration: none !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:focus-visible {
	background: #2b2b2b !important;
	border-color: #2b2b2b !important;
}

@media (max-width: 480px) {
	.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents {
		padding: 22px 18px 20px;
	}

	.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
		font-size: 19px !important;
	}

	.wc-block-mini-cart__drawer .wc-block-components-drawer__close-wrapper {
		right: 18px;
		top: 22px;
	}

	.wc-block-mini-cart__drawer .wc-block-cart-items__row {
		grid-template-columns: 62px minmax(0, 1fr) 68px;
	}

	.wc-block-mini-cart__drawer .wc-block-cart-item__image a {
		height: 92px;
		width: 62px;
	}

	/* Primary action on top when the two buttons stack, each at its own
	 * height (flex-basis 0 would collapse them in a column). */
	.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
		flex-direction: column-reverse;
	}

	.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
		flex: 0 0 auto;
		height: 48px;
	}
}

/* =========================================================================
 * Cart & checkout pages.
 *
 * The cart page renders WooCommerce's block cart (the same components as the
 * mini-cart drawer) so both surfaces can speak one language. The parent theme
 * still dresses every WooCommerce button as an uppercase slate pill, so the
 * shared button rule below pulls them back to the site's own CTA: black,
 * square corners, sentence case. Purely presentational — the owner keeps
 * editing the cart from the Site Editor.
 * ====================================================================== */

/* --- Shared: WooCommerce CTAs ------------------------------------------- */

.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-button:not(.is-link),
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
/* Account buttons stay INSIDE the .woocommerce container: the bare
   ".woocommerce-account button" variant also captured the header search
   icon and Woo's password toggle, painting them as black blocks. */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce .wp-element-button,
.woocommerce-cart .button,
.woocommerce-checkout .button {
	background-color: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	box-sizing: border-box;
	color: #ffffff !important;
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	min-height: 50px !important;
	padding: 0 26px !important;
	text-transform: none !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wc-block-cart .wc-block-components-button:not(.is-link):hover,
.wc-block-cart .wc-block-components-button:not(.is-link):focus-visible,
.wc-block-checkout .wc-block-components-button:not(.is-link):hover,
.wc-block-checkout .wc-block-components-button:not(.is-link):focus-visible,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce .wp-element-button:hover,
.woocommerce-account .woocommerce .wp-element-button:focus-visible,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover {
	background-color: #2b2b2b !important;
	border-color: #2b2b2b !important;
	color: #ffffff !important;
}

.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--wl-ink) !important;
	border-color: var(--wl-ink) !important;
	color: #ffffff !important;
}

/* --- Cart page: items table --------------------------------------------- */

/* The cart block sits inside the post-content wrapper, which the constrained
 * layout caps at reading width — too narrow for a cart table and its summary. */
body.woocommerce-cart .wp-block-post-content,
body.woocommerce-checkout .wp-block-post-content,
body.woocommerce-cart main#content > .wp-block-post-content,
body.woocommerce-checkout main#content > .wp-block-post-content {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1180px !important;
	width: 100% !important;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
	/* The constrained layout would squeeze both blocks into the 780px content
	 * column; a cart table needs a wider stage. */
	box-sizing: border-box;
	font-family: var(--wl-font) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1180px !important;
	width: 100% !important;
}

.wc-block-cart .wc-block-components-sidebar-layout {
	gap: 56px;
}

.wc-block-cart .wc-block-cart__sidebar {
	width: 340px !important;
}

.wc-block-cart .wc-block-cart-items {
	border: 0 !important;
	border-collapse: collapse !important;
	border-radius: 0 !important;
	border-spacing: 0 !important;
	table-layout: fixed !important;
	width: 100% !important;
}

.wc-block-cart .wc-block-cart-items__header th {
	border-bottom: 1px solid var(--wl-line) !important;
	color: var(--wl-muted) !important;
	font-family: var(--wl-font) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	padding: 0 0 12px !important;
	text-transform: uppercase !important;
}

/* Fixed column widths keep "Producto" on one line and align the prices. */
.wc-block-cart .wc-block-cart-items__header-image,
.wc-block-cart .wc-block-cart-item__image {
	width: 112px !important;
}

.wc-block-cart .wc-block-cart-items__header-total,
.wc-block-cart .wc-block-cart-item__total {
	width: 120px !important;
}

.wc-block-cart .wc-block-cart-item__image {
	padding: 22px 18px 22px 0 !important;
}

.wc-block-cart .wc-block-cart-items__row > td {
	border-top: 1px solid var(--wl-line) !important;
	padding: 22px 0 !important;
	vertical-align: top;
}

.wc-block-cart .wc-block-cart-item__image img {
	background: #f3f3f3;
	box-sizing: border-box;
	display: block;
	height: auto !important;
	max-height: 126px;
	object-fit: contain !important;
	width: 84px !important;
}

.wc-block-cart .wc-block-cart-item__image img[hidden] {
	display: none !important;
}

.wc-block-cart .wc-block-components-product-name {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em;
	line-height: 1.35 !important;
	text-decoration: none !important;
}

/* Su color de reposo lleva `!important`, así que el hover de la casa no
 * llegaba: el título del libro no respondía al ratón. */
.wc-block-cart .wc-block-components-product-name:hover {
	color: var(--wl-muted) !important;
}

.wc-block-cart .wc-block-cart-item__prices,
.wc-block-cart .wc-block-components-product-metadata,
.wc-block-cart .wc-block-components-sale-badge {
	display: none !important;
}

.wc-block-cart .wc-block-cart-item__quantity {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-top: 14px;
}

.wc-block-cart .wc-block-components-quantity-selector {
	align-items: center;
	background: #ffffff !important;
	border: 1px solid var(--wl-line);
	border-radius: 999px;
	box-sizing: border-box;
	display: inline-flex;
	height: 38px;
	padding: 0 3px;
}

.wc-block-cart .wc-block-components-quantity-selector__button {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wl-font) !important;
	font-size: 16px !important;
	height: 30px !important;
	justify-content: center;
	line-height: 1 !important;
	padding: 0 !important;
	transition: background 0.15s ease;
	width: 30px !important;
}

.wc-block-cart .wc-block-components-quantity-selector__button:hover,
.wc-block-cart .wc-block-components-quantity-selector__button:focus-visible {
	background: #f3f3f3 !important;
}

.wc-block-cart .wc-block-components-quantity-selector__input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	height: 30px !important;
	padding: 0 !important;
	text-align: center;
	width: 30px !important;
}

.wc-block-cart .wc-block-cart-item__remove-link {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	color: var(--wl-muted) !important;
	cursor: pointer;
	display: inline-flex;
	height: 34px;
	justify-content: center;
	padding: 0 !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
	width: 34px;
}

.wc-block-cart .wc-block-cart-item__remove-link:hover,
.wc-block-cart .wc-block-cart-item__remove-link:focus-visible {
	color: var(--wl-ink) !important;
}

.wc-block-cart .wc-block-cart-item__remove-link svg {
	height: 18px;
	width: 18px;
}

.wc-block-cart .wc-block-cart-item__total {
	text-align: right;
}

.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
.wc-block-cart .wc-block-cart-item__total .wc-block-formatted-money-amount {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	white-space: nowrap;
}

/* --- Cart page: totals sidebar ------------------------------------------ */

.wc-block-cart .wp-block-woocommerce-cart-totals-block {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.wc-block-cart .wc-block-components-sidebar {
	border: 1px solid var(--wl-line) !important;
	border-radius: 2px !important;
	box-sizing: border-box;
	padding: 26px !important;
	background: #ffffff !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
	position: sticky !important;
	top: 96px !important;
	max-height: calc(100vh - 192px) !important;
	overflow-y: auto !important;
}

.wc-block-cart .wc-block-cart__totals-title {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	text-transform: none !important;
}

.wc-block-cart .wc-block-components-panel__button {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	padding: 0 !important;
}

.wc-block-cart .wc-block-components-totals-wrapper {
	border-top: 1px solid var(--wl-line) !important;
	padding: 16px 0 !important;
}

.wc-block-cart .wc-block-components-totals-item__label {
	color: var(--wl-muted) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wl-ink) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
}

.wc-block-cart .wc-block-cart__submit {
	padding: 0 !important;
}

.wc-block-cart .wc-block-cart__submit-button {
	justify-content: center;
	text-align: center;
	width: 100%;
}

/* Coupon panel: Woo leaves the code input as a bare browser field.
   Same treatment as checkout: the text-input wrapper IS the field. */
.wc-block-cart .wc-block-components-totals-coupon__form {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 14px;
}

.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	background: #ffffff !important;
	border: 1px solid #dcdad5 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	box-sizing: border-box;
	flex: 1 1 auto;
	height: 46px !important;
	min-width: 0;
	transition: border-color 0.15s ease;
}

.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input.is-active,
.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input:focus-within {
	border-color: var(--wl-ink) !important;
	box-shadow: none !important;
}

.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 14px !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 14px !important;
}

.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input label {
	color: #8a867e !important;
	font-family: var(--wl-font) !important;
	font-size: 13px !important;
}

.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-button {
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	flex: 0 0 auto;
	font-family: var(--wl-font) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	min-height: 46px !important;
	padding: 0 12px !important;
}

.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-button[aria-disabled="true"],
.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-button:disabled {
	background: transparent !important;
	color: #b5b1a8 !important;
}

/* "Aplicar" era un botón de texto con relleno transparente: el hover lo
 * subrayaba, que es justo lo que no hace un botón. Relleno suave, como el
 * "Limpiar" del pie de filtros. */
.wc-block-cart .wc-block-components-totals-coupon__form .wc-block-components-button:hover:not([aria-disabled="true"]):not(:disabled) {
	background: var(--wl-soft) !important;
}

.wc-block-cart .wc-block-components-totals-coupon__content {
	font-size: 14px;
}

/* --- Checkout page: fields & order summary ------------------------------ */

.wc-block-checkout .wc-block-components-sidebar-layout {
	display: flex !important;
	gap: 56px !important;
	align-items: flex-start !important;
}

.wc-block-checkout .wc-block-checkout__main {
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

/* Sidebar / Resumen del pedido */
.wc-block-checkout .wc-block-checkout__sidebar {
	width: 380px !important;
	flex: 0 0 380px !important;
	background: #ffffff !important;
	border: 1px solid var(--wl-line) !important;
	border-radius: 2px !important;
	box-sizing: border-box !important;
	padding: 28px !important;
	position: sticky !important;
	top: 96px !important;
	/* Si el resumen es más alto que la ventana, hace scroll interno
	   para que el Total siempre quede accesible mientras acompaña */
	max-height: calc(100vh - 192px) !important;
	overflow-y: auto !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout .wc-block-components-checkout-order-summary,
.wc-block-checkout .wc-block-components-order-summary {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Ocultar sección de notas del pedido */
.wc-block-checkout .wp-block-woocommerce-checkout-order-note-block,
.wc-block-checkout .wc-block-checkout__order-notes {
	display: none !important;
}

/* Woo renderiza el resumen DOS veces: el acordeón del sidebar y una segunda
   tarjeta completa dentro de las acciones (tras el botón de compra). La
   segunda copia es redundante — Woo ya la esconde en escritorio; aquí la
   escondemos en todas las anchuras para que solo exista el acordeón. */
.wc-block-checkout .checkout-order-summary-block-fill-wrapper,
.wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
	display: none !important;
}

/* Evitar scroll horizontal en checkout.
   IMPORTANTE: "clip" y no "hidden" — hidden convierte a estos ancestros
   en contenedores de scroll y eso mata el position:sticky del resumen.
   clip recorta igual pero no rompe el sticky. */
.wc-block-checkout,
.wc-block-checkout .wc-block-components-sidebar-layout,
.wc-block-checkout .wc-block-checkout__sidebar,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout .wc-block-components-order-summary,
.wc-block-checkout .wc-block-components-order-summary__content,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	overflow-x: clip !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* ============================================================
   NUCLEAR RESET — quitar todos los bordes del sidebar de WC
   ============================================================ */
.wc-block-checkout .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-totals-item,
.wc-block-checkout .wc-block-components-totals-coupon,
.wc-block-checkout .wc-block-components-totals-footer-item,
.wc-block-checkout .wc-block-components-panel,
.wc-block-checkout .wc-block-components-panel__button {
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* ============================================================
   RESUMEN DEL PEDIDO — Cabecera
   ============================================================ */
.wc-block-checkout .wc-block-components-checkout-order-summary__title,
.wc-block-checkout .wc-block-components-order-summary__header {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	border: none !important;
	border-bottom: 1px solid #ebe8e2 !important;
	padding-bottom: 16px !important;
	margin-bottom: 0 !important;
	text-transform: none !important;
}

/* Los enlaces de texto del checkout (los términos, el aviso de tarjetas de
 * prueba) heredan el `a { text-decoration: underline }` del tema padre. En
 * esta tienda ningún enlace de superficie clara va subrayado en reposo: solo
 * el pie negro, a propósito. */
.wc-block-checkout a {
	text-decoration: none;
}

/* ============================================================
   ARTÍCULOS DEL PEDIDO
   ============================================================ */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block,
.wc-block-checkout .wc-block-components-order-summary__content {
	max-height: 280px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	scrollbar-width: thin !important;
	scrollbar-color: #dcdad5 transparent !important;
}

.wc-block-checkout .wc-block-components-order-summary-item {
	display: grid !important;
	grid-template-columns: 44px minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 0 !important;
	border: none !important;
	border-bottom: 1px solid #f0ede8 !important;
	box-sizing: border-box !important;
}

.wc-block-checkout .wc-block-components-order-summary-item:last-child {
	border-bottom: none !important;
}

.wc-block-checkout .wc-block-components-order-summary-item__image {
	position: relative !important;
	width: 44px !important;
	min-width: 44px !important;
	margin: 0 !important;
	line-height: 0 !important;
}

/* Contenida en su placa, sin recortar: mismas proporciones que en la tienda. */
.wc-block-checkout .wc-block-components-order-summary-item__image img {
	width: 44px !important;
	height: 64px !important;
	object-fit: contain !important;
	background: #f3f3f3 !important;
	border: 1px solid #e2e0da !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	padding: 2px !important;
	box-sizing: border-box !important;
	display: block !important;
}

/* El círculo negro de cantidad no vuelve: el JS pinta un "1 ×" gris junto
   al título, mucho más discreto. */
.wc-block-checkout .wc-block-components-order-summary-item__quantity {
	display: none !important;
}

.wc-block-checkout .wl-item-qty {
	color: #8a8a8a !important;
	font-family: var(--wl-font) !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	margin: 0 4px 0 6px !important;
	letter-spacing: 0 !important;
}

.wc-block-checkout .wc-block-components-order-summary-item__description {
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Título del libro en el resumen del pedido, entero. Aquí el nombre se
 * recortaba a una sola línea con puntos suspensivos; la celda es una columna
 * de `minmax(0, 1fr)` dentro de una rejilla, así que el título puede ocupar las
 * líneas que necesite y la fila crece con él. */
.wc-block-checkout .wc-block-components-product-name {
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--wl-ink) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	max-width: 100% !important;
	white-space: normal !important;
	display: block !important;
}

/* Ocultar info redundante dentro del ítem */
.wc-block-checkout .wc-block-cart-item__prices,
.wc-block-checkout .wc-block-components-order-summary-item__individual-prices,
.wc-block-checkout .wc-block-components-sale-badge,
.wc-block-checkout .wc-block-components-product-badge,
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-order-summary-item__description p {
	display: none !important;
}

/* Precio del libro — columna derecha del grid */
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-price,
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-formatted-money-amount {
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--wl-ink) !important;
	white-space: nowrap !important;
	text-align: right !important;
}

/* ============================================================
   CUPÓN DE DESCUENTO
   ============================================================ */
.wc-block-checkout .wc-block-components-totals-coupon {
	padding: 14px 0 4px !important;
	margin: 0 !important;
}

.wc-block-checkout .wc-block-components-panel__button {
	color: var(--wl-muted) !important;
	font-family: var(--wl-font) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	padding: 0 !important;
	text-decoration: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.wc-block-checkout .wc-block-components-panel__button-icon {
	order: -1 !important;
}

.wc-block-checkout .wc-block-components-totals-coupon__form {
	display: flex !important;
	align-items: stretch !important;
	gap: 10px !important;
	margin-top: 12px !important;
	margin-bottom: 4px !important;
}

/* The wrapper (.wc-block-components-text-input) is the visible field:
   hairline bar, quiet focus. Woo paints a 2px black ring on .is-active —
   neutralised here. */
.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	background: #ffffff !important;
	border: 1px solid #dcdad5 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	height: 46px !important;
	min-height: 46px !important;
	min-width: 0 !important;
	transition: border-color 0.15s ease;
}

.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input.is-active,
.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input:focus-within {
	border-color: var(--wl-ink) !important;
	box-shadow: none !important;
	border-width: 1px !important;
}

.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 14px !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 14px !important;
}

.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus {
	box-shadow: none !important;
	outline: none !important;
}

/* The floating label overlaps the typed value inside the unified bar —
   cart-ui.js hides it and moves the hint into a real placeholder. */
.wc-block-components-totals-coupon__form .wc-block-components-text-input label {
	display: none !important;
}

/* "Aplicar" as a quiet text button, aligned with the bar */
.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-button {
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	flex: 0 0 auto !important;
	font-family: var(--wl-font) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	height: 46px !important;
	min-height: 46px !important;
	letter-spacing: 0.01em;
	padding: 0 12px !important;
}

.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-button[aria-disabled="true"],
.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-button:disabled {
	background: transparent !important;
	color: #b5b1a8 !important;
	box-shadow: none !important;
}

.wc-block-checkout .wc-block-components-totals-coupon__form .wc-block-components-button:hover:not([aria-disabled="true"]):not(:disabled) {
	background: var(--wl-soft) !important;
}

/* ============================================================
   DESGLOSE DE TOTALES — sin líneas entre filas
   ============================================================ */
/* Los bloques (subtotal, envío…) sin el aire heredado de Woo, pegados al Total. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-discount-block,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-fee-block,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-shipping-block {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block {
	border-top: 1px solid #ebe8e2 !important;
	padding-top: 12px !important;
}

.wc-block-checkout .wc-block-components-totals-wrapper {
	padding: 6px 0 0 !important;
	margin: 0 !important;
	border: none !important;
	border-top: none !important;
}

/* Reset nuclear de TODOS los bordes dentro del wrapper de totales */
.wc-block-checkout .wc-block-components-totals-wrapper *,
.wc-block-checkout .wc-block-components-totals-wrapper::before,
.wc-block-checkout .wc-block-components-totals-wrapper::after {
	border-top: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

.wc-block-checkout .wc-block-components-totals-item {
	padding: 3px 0 !important;
	margin: 0 !important;
}

.wc-block-checkout .wc-block-components-totals-item__label {
	color: #777777 !important;
	font-family: var(--wl-font) !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
}

.wc-block-checkout .wc-block-components-totals-item__value {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
}

/* TOTAL — único separador, destacado */
.wc-block-checkout .wc-block-components-totals-footer-item {
	border: none !important;
	border-top: 1.5px solid #111111 !important;
	padding: 10px 0 0 !important;
	margin-top: 6px !important;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

/* ============================================================
   COLUMNA IZQUIERDA — Secciones del formulario
   ============================================================ */
.wc-block-checkout .wc-block-components-checkout-step__title {
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 18px !important;
}

.wc-block-checkout .wc-block-components-checkout-step {
	padding: 22px 0 !important;
	border-bottom: 1px solid #eceae4 !important;
}

/* ============================================================
   CAMPOS DE TEXTO
   ============================================================ */
.wc-block-checkout .wc-block-components-text-input {
	position: relative !important;
}

.wc-block-checkout .wc-block-components-text-input input {
	background: #ffffff !important;
	border: 1px solid #d8d5cf !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	height: 52px !important;
	padding: 20px 14px 6px !important;
	width: 100% !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-block-checkout .wc-block-components-text-input label {
	position: absolute !important;
	left: 14px !important;
	top: 16px !important;
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	color: #888888 !important;
	pointer-events: none !important;
	line-height: 1 !important;
	transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease !important;
}

.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-text-input:focus-within label {
	top: 7px !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	color: #444444 !important;
}

.wc-block-checkout .wc-blocks-components-select {
	position: relative !important;
}

.wc-block-checkout .wc-blocks-components-select__select {
	background: #ffffff !important;
	border: 1px solid #d8d5cf !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	color: var(--wl-ink) !important;
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	height: 52px !important;
	padding: 20px 14px 6px !important;
	width: 100% !important;
}

.wc-block-checkout .wc-blocks-components-select__label {
	position: absolute !important;
	left: 14px !important;
	top: 7px !important;
	font-family: var(--wl-font) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	color: #444444 !important;
	pointer-events: none !important;
}

.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus,
.wc-block-checkout select:focus {
	border-color: var(--wl-ink) !important;
	box-shadow: 0 0 0 1px var(--wl-ink) !important;
	outline: none !important;
}

/* ============================================================
   OPCIONES DE ENVÍO — lista plana editorial (fila completa,
   radios propios, precio a la derecha sin píldoras)
   ============================================================ */
/* La última fila ya cierra la lista con su hairline; el separador del
   paso duplicaría la línea. */
.wc-block-checkout .wc-block-checkout__shipping-option {
	border-bottom: 0 !important;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 17px 2px !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #eceae4 !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	position: relative !important;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover {
	background: transparent !important;
}

/* Radio propio, idéntico al de pago: anillo fino que se rellena. */
.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: static !important;
	transform: none !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	width: 18px !important;
	height: 18px !important;
	border: 1.5px solid #c9c6bf !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	cursor: pointer !important;
	transition: border 0.15s ease !important;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__input:checked {
	border: 5.5px solid var(--wl-ink) !important;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__input::before {
	display: none !important;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-layout {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	gap: 10px !important;
}

/* Woo centra este grupo con margin:auto — anulándolo, el nombre va a la
   izquierda y el precio (margin-left:auto en su span) a la derecha. */
.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label-group {
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	justify-content: flex-start !important;
	text-align: left !important;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--wl-ink) !important;
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	white-space: normal !important;
	text-align: left !important;
}

/* El precio, a la derecha, como texto plano — sin píldoras. */
.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label {
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--wl-ink) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	margin-left: auto !important;
	white-space: nowrap !important;
}

/* ============================================================
   OPCIONES DE PAGO — lista plana editorial
   Nada de tarjetas con borde: filas separadas por hairlines,
   radio de selección propio (anillo negro) y contenido indentado
   bajo la etiqueta. Como una lista de libros, no como un panel
   de administración.
   ============================================================ */
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control-accordion-option *,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::before,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after {
	box-shadow: none !important;
	outline: none !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #eceae4 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option:last-child {
	border-bottom: 0 !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option:hover,
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	background: transparent !important;
}

/* La caja de resaltado de Woo alrededor de la opción marcada (borde
   lateral/vertical) no pinta aquí: el radio relleno ya indica la elección. */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked,
.wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
	border: 0 !important;
	box-shadow: none !important;
}

/* Woo pinta ese resaltado, conectores y un punto negro con pseudo-elementos;
   aquí no participan (el radio relleno es el único indicador). */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::before,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout .wc-block-components-radio-control__option::before,
.wc-block-checkout .wc-block-components-radio-control__option::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::before,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after,
.wc-block-checkout .wc-block-components-radio-control__input::before,
.wc-block-checkout .wc-block-components-radio-control__input::after {
	display: none !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 17px 2px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

/* Radio propio: anillo fino que se rellena al elegir. */
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: static !important;
	transform: none !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	width: 18px !important;
	height: 18px !important;
	border: 1.5px solid #c9c6bf !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	cursor: pointer !important;
	transition: border 0.15s ease !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input:checked {
	border: 5.5px solid var(--wl-ink) !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-layout {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	gap: 10px !important;
}

/* Woo centra el grupo etiqueta/logos dentro de la fila; la lista editorial
   lee de izquierda a derecha. */
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label-group {
	margin: 0 !important;
	text-align: left !important;
	flex: 1 1 auto !important;
	width: auto !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

/* El contenedor del grupo de métodos no lleva caja: solo hairlines por fila. */
.wc-block-checkout .wc-block-components-radio-control:has(.wc-block-components-radio-control-accordion-option),
.wc-block-checkout .wc-block-components-payment-method-options {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label {
	font-family: var(--wl-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--wl-ink) !important;
}

/* Los logos SVG de Stripe en la fila se ven como un punto negro roto; los
   logotipos VISA/MC/AMEX ya viven en la tarjeta de formulario. */
.wc-block-checkout .wc-block-components-radio-control__label img {
	display: none !important;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-content {
	padding: 2px 0 20px 32px !important;
	border: none !important;
	margin: 0 !important;
}

/* Ocultar mensajes de error de Stripe */
.wc-block-checkout .wc-block-store-notice.is-error,
.wc-block-checkout .wc-block-components-notice-banner.is-error {
	display: none !important;
}

/* Ocultar instrucciones de tarjeta de prueba */
.wc-block-checkout .wc-block-gateway-container > p:not(:empty),
.wc-block-checkout p.testmode-info,
.wc-block-checkout [class^="wc-stripe-payment-method-instructions"],
.wc-block-checkout [class*="wc-stripe-payment-method-instructions"] {
	display: none !important;
}

/* ============================================================
   STRIPE — Tarjeta de datos (aspecto Payment Element)
   ============================================================ */
.wl-stripe-preview-card {
	margin: 4px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.wl-stripe-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	padding: 0 2px;
}

.wl-stripe-title {
	font-family: var(--wl-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wl-ink, #111);
	letter-spacing: 0.01em;
}

.wl-stripe-badges {
	display: flex;
	gap: 6px;
	align-items: center;
}

.wl-stripe-brand {
	width: 34px;
	height: 22px;
	display: block;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.wl-stripe-box {
	background: #ffffff;
	border: 1px solid #dcdad4;
	border-radius: 6px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wl-stripe-box:focus-within {
	border-color: var(--wl-ink, #111);
	box-shadow: 0 0 0 1px var(--wl-ink, #111);
}

.wl-stripe-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
}

.wl-stripe-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: none;
	stroke: #9a968e;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wl-stripe-field--number {
	border-bottom: 1px solid #e7e5df;
}

.wl-stripe-field--number .wl-stripe-input {
	padding-left: 2px;
}

.wl-stripe-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

/* Separador vertical entre caducidad y CVC, sobre el contenedor */
.wl-stripe-split::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: #e7e5df;
}

/* Woo y el tema global ponen borde a todos los inputs del checkout:
   aquí lo anulamos con prioridad para que la caja única manda */
.wc-block-checkout .wl-stripe-preview-card .wl-stripe-input,
.woocommerce-checkout .wl-stripe-preview-card .wl-stripe-input,
.wl-stripe-preview-card .wl-stripe-input {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 400 !important;
	height: 46px !important;
}

.wc-block-checkout .wl-stripe-preview-card .wl-stripe-input:focus,
.wl-stripe-preview-card .wl-stripe-input:focus {
	box-shadow: none !important;
	outline: none !important;
}

.wl-stripe-input {
	height: 46px;
	border: 0;
	background: transparent;
	padding: 0 14px;
	font-family: var(--wl-font);
	font-size: 15px;
	color: var(--wl-ink, #111);
	width: 100%;
	box-sizing: border-box;
	border-radius: 0;
}

.wl-stripe-input::placeholder {
	color: #a3a099;
	opacity: 1;
}

.wl-stripe-input:focus {
	outline: none;
	box-shadow: none;
}

.wl-stripe-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	padding: 0 2px;
	font-family: var(--wl-font);
	font-size: 11.5px;
	color: #8a867e;
}

.wl-stripe-secure {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wl-stripe-lock {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 480px) {
	.wl-stripe-note {
		flex-wrap: wrap;
		gap: 6px;
	}

	.wl-stripe-input {
		font-size: 16px; /* evita el zoom automático en iOS */
	}
}

/* Badge "Modo de pruebas" de Stripe — neutro, sin amarillos */
.wc-block-checkout .wc-stripe-test-mode-badge,
.wc-block-checkout [class*="test-mode-badge"],
.wc-block-checkout [class*="TestModeBadge"] {
	font-size: 10.5px !important;
	font-weight: 600 !important;
	background: #f4f3ef !important;
	border: 1px solid #dcdad5 !important;
	color: #777777 !important;
	border-radius: 2px !important;
	padding: 1px 7px !important;
	margin-left: 8px !important;
	letter-spacing: 0.02em !important;
}

.wc-block-checkout input[type="radio"],
.wc-block-checkout input[type="checkbox"] {
	accent-color: var(--wl-ink) !important;
}

/* ============================================================
   BOTÓN REALIZAR EL PEDIDO
   ============================================================ */
.wc-block-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--wl-ink) !important;
	border: none !important;
	border-radius: 8px !important;
	box-sizing: border-box !important;
	color: #ffffff !important;
	cursor: pointer !important;
	font-family: var(--wl-font) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	min-height: 54px !important;
	padding: 0 32px !important;
	text-transform: none !important;
	transition: background 0.15s ease !important;
	width: 100% !important;
	justify-content: center !important;
	text-align: center !important;
	margin-top: 20px !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: #333333 !important;
}

/* ============================================================
   ICONO CARRITO EN CABECERA (checkout/cart)
   ============================================================ */
body.woocommerce-checkout .wc-block-mini-cart,
body.woocommerce-cart .wc-block-mini-cart,
body.woocommerce-checkout .wl-home-cart,
body.woocommerce-cart .wl-home-cart {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

body.woocommerce-checkout .wc-block-mini-cart__button,
body.woocommerce-cart .wc-block-mini-cart__button {
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* ============================================================
   ENTREGA: SELECTOR ENVIAR vs. RECOGIDA
   Control segmentado fino, como el resto del sitio: una sola
   píldora con hairline, mitad activa en blanco.
   ============================================================ */
.wc-block-checkout .wc-block-checkout__shipping-method-container {
	background: #f4f3ef !important;
	border-radius: 2px !important;
	padding: 3px !important;
	gap: 3px !important;
	border: 1px solid var(--wl-line) !important;
	display: flex !important;
	flex-direction: row !important;
	/* Woo pone flex-wrap:wrap — con opciones a 50% + gap, la segunda salta de línea */
	flex-wrap: nowrap !important;
	max-width: 420px !important;
}

.wc-block-checkout .wc-block-checkout__shipping-method-option {
	/* base 0: mitades exactas del contenedor, inmunes al gap (50%+gap envolvía) */
	flex: 1 1 0 !important;
	min-width: 0 !important;
	border-radius: 1px !important;
	border: none !important;
	background: transparent !important;
	color: #8a8a8a !important;
	font-family: var(--wl-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 10px 12px !important;
	transition: background 0.15s ease, color 0.15s ease !important;
	cursor: pointer !important;
	box-shadow: none !important;
	outline: none !important;
}

.wc-block-checkout .wc-block-checkout__shipping-method-option:hover {
	color: var(--wl-ink) !important;
}

.wc-block-checkout .wc-block-checkout__shipping-method-option--selected,
.wc-block-checkout .wc-block-checkout__shipping-method-option[aria-checked="true"] {
	background: #ffffff !important;
	color: var(--wl-ink) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09) !important;
}

.wc-block-checkout .wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-title,
.wc-block-checkout .wc-block-checkout__shipping-method-option[aria-checked="true"] .wc-block-checkout__shipping-method-option-title {
	color: var(--wl-ink) !important;
	font-weight: 600 !important;
}

.wc-block-checkout .wc-block-checkout__shipping-method-option-icon {
	width: 17px !important;
	height: 17px !important;
}

.wc-block-checkout .wc-block-checkout__shipping-method-option-icon path {
	fill: currentColor !important;
}

.wc-block-checkout .wc-block-checkout__shipping-method-option-title-wrapper {
	gap: 9px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ============================================================
   STRIPE — Pasarela de pago
   ============================================================ */
.wc-block-checkout .wc-block-components-radio-control-accordion-content .wc-stripe-elements-field,
.wc-block-checkout .wc-block-components-radio-control-accordion-content .wc-block-gateway-container {
	margin: 0 !important;
}

/* --- Product collections inside cart / checkout ------------------------- */

.wc-block-cart .wp-block-woocommerce-product-collection img[data-testid="product-image"],
.wc-block-checkout .wp-block-woocommerce-product-collection img[data-testid="product-image"] {
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

@media (max-width: 1000px) {
	.wc-block-cart .wc-block-components-sidebar-layout {
		gap: 32px;
	}

	.wc-block-cart .wc-block-cart__sidebar {
		width: auto !important;
	}

	.wc-block-cart .wc-block-cart-items__header-image,
	.wc-block-cart .wc-block-cart-item__image {
		width: 92px !important;
	}

	.wc-block-cart .wc-block-cart-items__header-total,
	.wc-block-cart .wc-block-cart-item__total {
		width: 96px !important;
	}

	.wc-block-cart .wc-block-cart-item__image {
		padding-right: 12px !important;
	}

	.wc-block-cart .wc-block-cart-item__image img {
		max-height: 108px;
		width: 72px !important;
	}

	.wc-block-cart .wc-block-components-sidebar {
		padding: 20px !important;
		position: static !important;
		max-height: none !important;
		overflow-y: visible !important;
	}

	.wc-block-checkout .wc-block-components-sidebar-layout {
		flex-direction: column !important;
		gap: 32px !important;
	}

	.wc-block-checkout .wc-block-checkout__sidebar {
		width: 100% !important;
		flex: 1 1 100% !important;
		position: static !important;
		padding: 20px !important;
		/* La tarjeta de resumen sube al inicio en columna única;
	   en pantallas aún más estrechas Woo la convierte en acordeón él solo. */
		order: -1 !important;
	}
}

/* Phones: WooCommerce lays the cart row out as a four-column grid whose last
 * column lands outside the viewport, clipping the price. Rebuild it as cover +
 * details, with the price tucked into the top-right corner of the details
 * column. Must stay after the tablet rules so it wins the cascade. */
@media (max-width: 600px) {
	.wc-block-cart .wc-block-cart-items {
		table-layout: auto !important;
	}

	.wc-block-cart .wc-block-cart-items__header {
		display: none !important;
	}

	.wc-block-cart .wc-block-cart-items__row {
		border-top: 1px solid var(--wl-line) !important;
		column-gap: 14px;
		display: grid !important;
		grid-template-columns: 84px minmax(0, 1fr) auto !important;
		padding: 18px 0 !important;
	}

	/* One hairline per row instead of one per grid column. */
	.wc-block-cart .wc-block-cart-items__row > td {
		border-top: 0 !important;
	}

	.wc-block-cart .wc-block-cart-item__image {
		border: 0 !important;
		display: block !important;
		grid-area: 1 / 1 / 2 / 2 !important;
		padding: 0 !important;
		width: 84px !important;
	}

	.wc-block-cart .wc-block-cart-item__image img {
		max-height: 108px;
		width: 72px !important;
	}

	.wc-block-cart .wc-block-cart-item__product {
		border: 0 !important;
		display: block !important;
		grid-area: 1 / 2 / 2 / 3 !important;
		min-width: 0;
		padding: 0 !important;
		width: auto !important;
	}

	/* Own track: the title can wrap inside column 2 without ever reaching the
	 * price (Woo overrides padding-based reservations with higher-specificity
	 * !important rules, so the overlay approach is not safe here). */
	.wc-block-cart .wc-block-cart-item__total {
		border: 0 !important;
		display: block !important;
		grid-area: 1 / 3 / 2 / 4 !important;
		align-self: start;
		justify-self: end;
		padding: 0 !important;
		width: auto !important;
	}

	.wc-block-cart .wc-block-cart-item__quantity {
		margin-top: 12px;
	}
}

/* Coupon code: the field and its quiet text button stay inline at every
 * width — the unified bar is narrow enough for phones, so no stacking. */

/* The checkout button and the coupon heading are translated in the browser,
 * out of reach of the theme's PHP gettext filter. `assets/cart-ui.js` swaps
 * those two labels in the DOM so the visible text and the accessible name
 * always match. */

/* --- Cart page: empty state --------------------------------------------- */

.wp-block-woocommerce-empty-cart-block {
	font-family: var(--wl-font);
}

/* WooCommerce paints this state with a 5em black sad face. Swap the mask for
 * the site's own icon (a Heroicons file, like the footer ones) at a modest
 * size so the empty cart keeps the editorial voice instead of a default emoji. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	-webkit-mask-image: url("assets/icons/book-open.svg") !important;
	background-color: var(--wl-muted) !important;
	height: 52px !important;
	margin: 0 auto 22px !important;
	mask-image: url("assets/icons/book-open.svg") !important;
	mask-size: 52px !important;
	width: 52px !important;
}

/* The suggested-products grid draws internal card borders; the rest of the
 * shop uses bare plates. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	border: 0 !important;
}

.wc-block-cart__empty-cart__title {
	color: var(--wl-ink) !important;
	font-size: clamp(22px, 2.4vw, 30px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em;
	margin: 0 0 10px !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	color: var(--wl-line);
	margin: 26px auto !important;
}

.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
	color: var(--wl-ink) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em;
	margin-bottom: 26px !important;
}

/* Suggested products: the same plates as the rest of the shop. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	align-items: center;
	aspect-ratio: 1.2 / 1;
	background: #f3f3f3;
	border: 1px solid var(--wl-line);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	height: auto !important;
	margin: 0 auto;
	max-height: 84% !important;
	max-width: 71% !important;
	object-fit: contain !important;
	width: auto !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	color: var(--wl-ink);
	font-family: var(--wl-font) !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em;
	margin-top: 14px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	color: var(--wl-ink);
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	margin-top: 4px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	align-items: center;
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	box-sizing: border-box;
	color: #ffffff !important;
	display: inline-flex;
	font-family: var(--wl-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: 44px;
	justify-content: center;
	letter-spacing: -0.01em;
	margin-top: 12px;
	padding: 0 18px !important;
	text-decoration: none;
	text-transform: none !important;
	width: 100%;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
	background: #2b2b2b !important;
	border-color: #2b2b2b !important;
	color: #ffffff !important;
}

/* ============================================================
   Cajón de carrito propio (páginas carrito/checkout)
   Woo imprime un botón stub sin cajón ahí; el tema construye
   el suyo (assets/cart-drawer-standalone.js). Geometría propia,
   interiores reutilizados de las reglas .wc-block-mini-cart__drawer.
   ============================================================ */
.wl-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wl-cart-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.wl-cart-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.45);
}

.wl-cart-overlay .wl-cart-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(480px, 100vw);
	background: #ffffff;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
	font-family: var(--wl-font);
}

.wl-cart-overlay.is-open .wl-cart-panel {
	transform: translateX(0);
}

.wl-cart-overlay .wl-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 26px 16px;
	border-bottom: 1px solid var(--wl-line);
	flex: 0 0 auto;
}

.wl-cart-overlay .wl-cart-head h2 {
	color: var(--wl-ink);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0;
}

.wl-cart-overlay .wl-cart-close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--wl-ink);
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	transition: background 0.15s ease;
	width: 40px;
}

.wl-cart-overlay .wl-cart-close:hover,
.wl-cart-overlay .wl-cart-close:focus-visible {
	background: #f3f3f3;
}

.wl-cart-overlay .wl-cart-close svg {
	height: 18px;
	width: 18px;
}

.wl-cart-overlay .wl-cart-items {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 26px;
	-webkit-overflow-scrolling: touch;
}

.wl-cart-overlay .wl-cart-foot {
	flex: 0 0 auto;
	padding: 0 26px 24px;
}

/* Empty state spans the whole items area. */
.wl-cart-overlay .wl-cart-items .wc-block-mini-cart__empty-cart-wrapper {
	height: 100%;
}

@media (max-width: 480px) {
	.wl-cart-overlay .wl-cart-items,
	.wl-cart-overlay .wl-cart-foot {
		padding-left: 18px;
		padding-right: 18px;
	}

	.wl-cart-overlay .wl-cart-foot {
		padding-bottom: 18px;
	}
}

/* --- Interiores del cajón propio: re-mapeo de las reglas de Woo ---------- */
.wl-cart-overlay .wc-block-cart-items {
	border: 0 !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	display: block !important;
	padding: 0 !important;
	table-layout: fixed !important;
	width: 100% !important;
}

.wl-cart-overlay .wc-block-cart-items tbody {
	display: block !important;
}

.wl-cart-overlay .wc-block-cart-items__row {
	align-items: center;
	border-bottom: 1px solid var(--wl-line);
	column-gap: 14px;
	display: grid !important;
	grid-template-columns: 70px minmax(0, 1fr) 74px;
	padding: 16px 0 !important;
}

.wl-cart-overlay .wc-block-cart-items__row > td {
	display: block !important;
	min-width: 0;
	padding: 0 !important;
	vertical-align: middle !important;
	width: auto !important;
}

.wl-cart-overlay .wc-block-cart-item__image a {
	align-items: center;
	background: #f3f3f3;
	border: 1px solid var(--wl-line);
	box-sizing: border-box;
	display: flex !important;
	height: 100px;
	justify-content: center;
	overflow: hidden;
	width: 70px;
}

.wl-cart-overlay .wc-block-cart-item__image img {
	background: transparent;
	display: block;
	height: auto !important;
	margin: 0 auto;
	max-height: 84% !important;
	max-width: 72% !important;
	object-fit: contain !important;
	width: auto !important;
}

/* Lo mismo en la superposición del carrito. */
.wl-cart-overlay .wc-block-components-product-name {
	color: var(--wl-ink) !important;
	display: block;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em;
	line-height: 1.3 !important;
	margin: 0;
	text-decoration: none !important;
}

.wl-cart-overlay .wc-block-components-product-name:hover {
	color: var(--wl-muted) !important;
}

.wl-cart-overlay .wc-block-cart-item__quantity {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.wl-cart-overlay .wc-block-components-quantity-selector {
	align-items: center;
	background: #ffffff !important;
	border: 1px solid var(--wl-line);
	border-radius: 999px;
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto !important;
	height: 30px;
	padding: 0 4px;
	width: auto !important;
}

.wl-cart-overlay .wc-block-components-quantity-selector__button {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 28px !important;
	font-size: 15px !important;
	height: 26px !important;
	justify-content: center;
	line-height: 1 !important;
	min-width: 0 !important;
	padding: 0 !important;
	transition: background 0.15s ease;
	width: 28px !important;
}

.wl-cart-overlay .wc-block-components-quantity-selector__button:hover {
	background: #f3f3f3 !important;
}

.wl-cart-overlay .wc-block-components-quantity-selector__input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	flex: 0 0 26px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: 26px !important;
	min-width: 0 !important;
	padding: 0 !important;
	text-align: center;
	width: 26px !important;
}

.wl-cart-overlay .wc-block-cart-item__remove-link {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	color: #a3a3a3 !important;
	cursor: pointer;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	padding: 0 !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
	width: 28px;
}

.wl-cart-overlay .wc-block-cart-item__remove-link:hover {
	color: var(--wl-ink) !important;
}

.wl-cart-overlay .wc-block-cart-item__remove-link svg {
	height: 16px;
	width: 16px;
}

.wl-cart-overlay .wc-block-cart-item__total {
	color: var(--wl-ink) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 0 !important;
	text-align: right;
	white-space: nowrap;
	width: auto !important;
}

.wl-cart-overlay .wc-block-mini-cart__footer {
	border-top: 1px solid var(--wl-line);
	margin-top: 20px;
	padding: 18px 0 0 !important;
}

.wl-cart-overlay .wc-block-components-totals-item__label {
	color: var(--wl-muted) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
}

.wl-cart-overlay .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	color: var(--wl-ink) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

.wl-cart-overlay .wc-block-components-totals-item__description {
	color: var(--wl-muted) !important;
	font-size: 12.5px !important;
	line-height: 1.45;
	margin-top: 6px !important;
}

.wl-cart-overlay .wc-block-mini-cart__footer-actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.wl-cart-overlay .wc-block-mini-cart__footer-checkout {
	align-items: center;
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	color: #ffffff !important;
	display: inline-flex !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	height: 48px;
	justify-content: center;
	letter-spacing: -0.01em;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease;
	width: 100% !important;
}

.wl-cart-overlay .wc-block-mini-cart__footer-checkout:hover,
.wl-cart-overlay .wc-block-mini-cart__footer-checkout:focus-visible {
	background: #2b2b2b !important;
	border-color: #2b2b2b !important;
	color: #ffffff !important;
}

.wl-cart-overlay .wc-block-mini-cart__empty-cart-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	justify-content: center;
	padding: 40px 10px;
	text-align: center;
}

.wl-cart-overlay .wc-block-mini-cart__empty-cart-wrapper p {
	color: var(--wl-muted) !important;
	font-size: 15px !important;
	margin: 0 0 20px !important;
}

.wl-cart-overlay .wc-block-mini-cart__shopping-button {
	align-items: center;
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	color: #ffffff !important;
	display: inline-flex !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	height: 48px;
	justify-content: center;
	padding: 0 26px !important;
	text-decoration: none !important;
}

/* =========================================================================
 * Consistencia global: los controles del header nunca se pintan oscuros y
 * las portadas miden lo mismo en todas las rejillas.
 * ====================================================================== */

/* Cinturón y tirantes: ninguna regla de botones de Woo (cart/checkout/
 * account) puede alcanzar los controles del header. */
.wl-site-header .wp-block-search__button,
.wl-site-header button,
.wl-site-header .wp-element-button {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	color: var(--wl-ink);
}

/* Toggle "mostrar contraseña" de Woo dentro del campo de login:
   antes heredaba el bloque negro de los CTA; ahora es un ojo de línea fina
   pegado al borde derecho del propio campo. */
.woocommerce-account .password-input {
	position: relative;
	display: block;
}

.woocommerce-account .password-input .input-text {
	padding-right: 44px;
	width: 100%;
}

/* Woo pinta su propio icono (y el tachado al alternar) vía background/
   pseudo-elementos; aquí manda el nuestro, anclado al centro derecho.
   Va como MÁSCARA y no como `background-image` a propósito: el SVG de la
   librería trae `stroke="currentColor"` para poder heredarlo, y como
   imagen externa eso resuelve a negro —el color inicial de `color`—, así
   que pintado se quedaría negro fijo. Enmascarado, el tono lo pone el
   `background-color` y puede seguir el token. */
.woocommerce-account .password-input .show-password-input {
	-webkit-mask-image: url("assets/icons/eye.svg") !important;
	appearance: none;
	background-color: var(--wl-muted) !important;
	background-image: none !important;
	border: 0 !important;
	bottom: auto !important;
	box-shadow: none !important;
	-webkit-mask-position: center !important;
	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-size: 20px 20px !important;
	color: transparent;
	cursor: pointer;
	height: 32px !important;
	left: auto !important;
	margin: 0 !important;
	mask-image: url("assets/icons/eye.svg") !important;
	mask-position: center !important;
	mask-repeat: no-repeat !important;
	mask-size: 20px 20px !important;
	min-height: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%);
	width: 32px !important;
	z-index: 2;
}

.woocommerce-account .password-input .show-password-input::before,
.woocommerce-account .password-input .show-password-input::after {
	content: none !important;
	display: none !important;
}

/* Estado alternado: ojo tachado, mismo trazo fino */
.woocommerce-account .password-input .show-password-input.display-password {
	-webkit-mask-image: url("assets/icons/eye-slash.svg") !important;
	mask-image: url("assets/icons/eye-slash.svg") !important;
}

/* Portadas: una sola caja para TODA tarjeta de libro del sitio.
 *
 * El bloque de portada de WooCommerce (catálogo, categoría, autor, búsqueda
 * y las recomendaciones de la ficha) recibe la clase de inicio
 * "wl-featured-media" desde PHP, así que una regla las dimensiona a todas y
 * no queda ninguna por superficie que se vaya por su cuenta.
 *
 * La tapa es cuadrada POR RELACIÓN DE ASPECTO, no con una altura fija: la
 * baldosa de la rejilla crece hasta llenar la fila, y el carrusel de la ficha
 * tiene tarjetas de ancho fijo, así que en los dos casos lo que manda es el
 * ancho de la columna. Antes la altura venía de `--wl-plate` y por eso las
 * recomendaciones de la ficha medían 176 de alto por 142 de ancho —una
 * proporción rara— mientras el resto de tarjetas sí eran cuadradas. */
.wl-featured-media,
.wl-product-grid .wc-block-components-product-image,
.wl-product-grid .wp-block-woocommerce-product-image,
.wl-catalog .wc-block-components-product-image,
.wl-catalog .wp-block-woocommerce-product-image,
.wl-pdp-rel-grid .wl-featured-media,
.wl-pdp-rel-grid .wc-block-components-product-image,
.wl-pdp-rel-grid .wp-block-woocommerce-product-image {
	aspect-ratio: 1 / 1;
	height: auto;
}

/* WooCommerce's own sale badge is replaced by the home card's red discount
 * corner (same markup everywhere) — hide the duplicate inside the plate. */
.wl-featured-media .wc-block-components-product-sale-badge,
.wl-featured-media .wp-block-woocommerce-product-sale-badge {
	display: none;
}

/* Rejilla de tarjetas: `--wl-plate` es el ancho MÍNIMO y la pista crece hasta
 * 1fr, de modo que la última columna siempre llega al borde derecho y no queda
 * el escalón de blanco que se veía a la derecha de las tarjetas. El `!important`
 * es obligatorio: la plantilla responsiva de WooCommerce (que en tablet se
 * colapsa a una columna gigante) trae su propia declaración. */
.wl-catalog .wc-block-product-template,
.wl-product-grid .wc-block-product-template {
	grid-template-columns: repeat(auto-fill, minmax(var(--wl-plate), 1fr)) !important;
	justify-content: start;
}

.wl-catalog .wc-block-product-template {
	column-gap: 14px !important;
	row-gap: 30px !important;
}

/* =========================================================================
 * ÁREA DE CUENTA — rediseño editorial
 * El tema padre pintaba los <li> del menú como cajas negras (background
 * var(--primary), texto blanco). Aquí se reescribe toda la zona como la
 * estructuran las librerías online: menú lateral con estado activo,
 * encabezado con saludo, chips de estado en pedidos, tarjetas en
 * direcciones/detalles. El admin bar se apaga desde functions.php.
 * ====================================================================== */

/* --- Layout: menú lateral + contenido --------------------------------- */
.woocommerce-account .woocommerce {
	display: flex;
	gap: 56px;
	align-items: flex-start;
	max-width: 1180px;
	margin: 0 auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
	width: 220px;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Encabezado del dashboard ----------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

/* --- Pedidos: tabla editorial con chips de estado ---------------------- */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: none !important;
	border-collapse: collapse;
	font-family: var(--wl-font);
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid var(--wl-ink) !important;
	color: var(--wl-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 12px !important;
	text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--wl-line) !important;
	color: var(--wl-ink);
	font-size: 14.5px;
	padding: 16px 12px !important;
	vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td {
	border-bottom: none;
}

/* Números de pedido: peso editorial, sin azul subrayado */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-number a {
	color: var(--wl-ink) !important;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--wl-muted) !important;
}

/* Chips de estado: redonda suave, color por estado */
.woocommerce-account .woocommerce-orders-table__cell-order-status span {
	border-radius: 999px;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 4px 12px;
	white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status .status-completed {
	background: #eef3ee;
	color: #2e5d3a;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status .status-processing {
	background: #fdf1e4;
	color: #8a5a19;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status .status-on-hold {
	background: #f4f3ef;
	color: #6a6a6a;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status .status-cancelled,
.woocommerce-account .woocommerce-orders-table__cell-order-status .status-refunded,
.woocommerce-account .woocommerce-orders-table__cell-order-status .status-failed {
	background: #f9ecea;
	color: #9c3a2e;
}

/* Botones de fila (Ver / Pagar / Cancelar): texto tranquilo, no pastillas */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--wl-ink) !important;
	min-height: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
	text-underline-offset: 4px;
	box-shadow: none !important;
	font-size: 13.5px !important;
}

/* "Ver" es un enlace subrayado en reposo, no un botón: el subrayado se
 * queda también al hover (la regla de la casa se lo quitaría). */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button:hover,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button:focus-visible {
	color: var(--wl-muted) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* --- Direcciones y detalles: tarjetas suaves --------------------------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column--shipping-address,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column--billing-address,
.woocommerce-account .woocommerce-MyAccount-content .u-columns .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content address {
	background: #faf9f6;
	border: 1px solid var(--wl-line);
	border-radius: 8px;
	color: var(--wl-ink);
	font-style: normal;
	line-height: 1.6;
	padding: 22px 24px;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wl-font);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}

/* Enlace "editar" junto a cada tarjeta: texto, no pastilla */
.woocommerce-account .woocommerce-MyAccount-content .edit {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	font-size: 13.5px;
	min-height: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Igual que "Ver": subrayado en reposo, subrayado al hover. WooCommerce lo
 * quita en `.wc-block-components-address-card__edit:hover`. */
.woocommerce-account .woocommerce-MyAccount-content .edit:hover,
.woocommerce-account .woocommerce-MyAccount-content .edit:focus-visible {
	color: var(--wl-muted) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* --- Formularios de cuenta (dirección, detalles, reset) ---------------- */
.woocommerce-account .woocommerce-MyAccount-content form,
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	background: transparent;
	border: 0;
	max-width: 560px;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content label {
	color: var(--wl-ink);
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 6px;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	background: #ffffff;
	border: 1px solid #d6d3cc;
	border-radius: 6px;
	box-sizing: border-box;
	font-family: var(--wl-font);
	font-size: 14.5px;
	padding: 11px 13px;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--wl-ink);
	outline: none;
}

/* CTA del área de cuenta: botón tinta cuadrado del sitio */
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content .button:not(.edit):not(table .button) {
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	color: #ffffff !important;
	font-family: var(--wl-font) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	min-height: 48px !important;
	padding: 0 26px !important;
}

.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:not(.edit):not(table .button):hover {
	background: #2b2b2b !important;
	border-color: #2b2b2b !important;
}

/* --- Móvil: el menú pasa arriba en horizontal con scroll ---------------- */
@media (max-width: 900px) {

	.woocommerce-account .woocommerce {
		display: block;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 28px;
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		border-top: 0;
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		border-bottom: 0;
		flex: 0 0 auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		background: #f4f3ef;
		border: 1px solid var(--wl-line);
		border-radius: 999px;
		padding: 8px 16px !important;
		white-space: nowrap;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		background: var(--wl-ink);
		border-left: 0;
		color: #ffffff !important;
		padding-left: 16px !important;
	}
}

/* =========================================================================
 * Account area layout: full editorial container
 * The page template constrains .entry-content to the theme content width,
 * which crushes the account dashboard. Widen it here and make the
 * navigation/content pair a real flex row (Woo's legacy float 48% fights it).
 * ====================================================================== */
.woocommerce-account .entry-content.page-content,
.woocommerce-account .wp-block-post-content.is-layout-constrained {
	max-width: 1160px;
}

.woocommerce-account .woocommerce {
	align-items: flex-start;
	display: flex;
	gap: 56px;
	max-width: 100%;
	width: 100%;
}

.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 220px;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

/* Avisos (p. ej. "Confirma tu dirección de correo electrónico") en el
   lenguaje editorial: fondo blanco, hairline, sin azul de sistema. */
/* La cuenta hereda la franja global (fondo suave, sin borde ni sombra). Aquí
   solo queda el margen: la tarjeta blanca con regla negra la sustituye la
   regla global, y duplicarla aquí era lo que la revolvía a ganarle. */
.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
	margin: 0 0 24px;
}

.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > svg {
	color: var(--wl-muted);
}

.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a {
	color: var(--wl-ink) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 800px) {
	.woocommerce-account .woocommerce {
		display: block;
		gap: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 32px;
		width: 100%;
	}
}

/* El tema padre hereda el borde grueso del encabezado a las celdas de
   número de pedido: aquí cada fila ya cierra con hairline propio. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-number {
	border-bottom: none !important;
}

/* Aviso de cuenta ("Confirma tu direccion de correo electronica"). Una sola
   regla para los tres montones que habia aqui: el flex del contenido, el
   boton como accion de texto y el salto a 640px. El texto va primero y la
   accion despues, y la accion es un enlace, no el boton de 48px que traia
   WooCommerce (su min-height lo dejaba mas alto que la frase que explicaba). */
.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > .wc-block-components-notice-banner__content::before {
	display: none;
}

/* En el DOM de Woo la acción va antes del texto: la pasamos al final. El texto
   no está en ningún elemento —es un nodo de texto suelto junto al enlace—, así
   que en vez de `order` sobre un contenedor se usa `margin-left: auto` en la
   acción, que empuja el espacio libre hacia ella y la alinea a la derecha. */
.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .button.wc-forward {
	margin-left: auto;
	order: 2;
}

.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .button.wc-forward {
	/* Hereda el botón de tinta del bloque global; aquí solo se confirma que
	   gana la regla global y no la de los botones de la cuenta. */
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	color: #ffffff !important;
	min-height: 0 !important;
	padding: 11px 20px !important;
	text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .button.wc-forward:hover {
	background: #333333 !important;
	color: #ffffff !important;
}

@media (max-width: 640px) {
	.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
		align-items: flex-start;
		flex-direction: column;
	}

	.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .button.wc-forward {
		white-space: normal;
	}
}

/* Woo marca el número de pedido como <th scope="row">: en el cuerpo de la
   tabla debe verse como una celda normal (hairline), no como encabezado. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th.woocommerce-orders-table__cell {
	background: transparent !important;
	border-bottom: 1px solid var(--wl-line) !important;
	color: var(--wl-ink);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: normal;
	padding: 16px 12px !important;
	text-align: left;
	text-transform: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child th.woocommerce-orders-table__cell {
	border-bottom: none !important;
}

/* Tabla responsive de Woo oculta los <th>: el número de pedido (que es un
   th) desaparecía en móvil. Lo mostramos con el mismo patrón de etiqueta
   flotante que Woo usa en las celdas normales. */
@media screen and (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table th.woocommerce-orders-table__cell-order-number {
		display: block !important;
		text-align: right;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table th.woocommerce-orders-table__cell-order-number::before {
		content: "Pedido: ";
		float: left;
		font-weight: 700;
	}
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th.woocommerce-orders-table__cell-order-number::before {
	margin-right: 6px;
}

/* El activo ya indica con peso y barra lateral: sin subrayado redundante. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
	text-decoration: none;
}

/* --- Direcciones: grid real (Woo usa floats que solapan con contenedor
   ancho) y tarjetas blancas alineadas con el dashboard ------------------ */
.woocommerce-account .woocommerce-MyAccount-content .col2-set {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set::after {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-1,
.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	background: #fff;
	height: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	align-items: flex-start;
	display: flex;
	gap: 12px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	margin-left: auto;
}


.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
}

/* Colocación explícita: el flujo auto de la rejilla se invierte en alguna
   configuración (rtl heredado / auto-placement); esto lo ancla. */
.woocommerce-account .woocommerce-MyAccount-content .col2-set {
	direction: ltr;
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-1 {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-2 {
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 700px) {
	.woocommerce-account .woocommerce-MyAccount-content .col2-set {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-1,
	.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-2 {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Las tarjetas medían contenido+padding (content-box) y pisaban el gap. */
.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-1,
.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-2 {
	box-sizing: border-box;
}

/* Blanco real: la regla del padre con .u-columns gana por especificidad. */
.woocommerce-account .woocommerce-MyAccount-content .u-columns .woocommerce-Address {
	background: #fff;
	padding: 26px 28px;
}

/* Encabezado de tarjeta: título contenido y acción arriba a la derecha. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	align-items: baseline;
	gap: 16px;
	margin-bottom: 18px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	font-size: 13.5px;
	white-space: nowrap;
}
/* En móvil el heading del padre (35px, centrado) infla el min-content de
   la tarjeta y desborda la pista. min-width:0 en los items + título propio. */
.woocommerce-account .woocommerce-MyAccount-content .col2-set > div {
	min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title h3 {
	font-size: 22px !important;
	text-align: left !important;
}

@media (max-width: 700px) {
	.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title {
		align-items: baseline;
		flex-wrap: wrap;
	}

	.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title h2,
	.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title h3 {
		font-size: 19px !important;
	}
}

/* Cabecera de tarjeta apilada: el título no compite con el enlace en una
   sola línea (con 290px útiles se partía en tres). */
.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title {
	display: block;
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title h3 {
	margin: 0 0 4px;
}

/* Enlace "Editar" / "Añadir" de cada tarjeta de dirección: una sola regla con
   el resultado final de la pila que había aqui. Antes se repartía en seis
   reglas sucesivas —inline-block, luego block, luego float:none, luego
   margin-left— porque el header centrado del tema padre se colaba por
   separado. Se ancla todo de una vez. */
.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title,
.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title .edit {
	text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set .woocommerce-Address-title .edit {
	display: block;
	float: none !important;
	font-size: 13.5px;
	margin: 0 0 14px;
	width: fit-content;
}

/* =========================================================================
 * WooCommerce notices: quiet bands, close buttons, toasts
 * A band, not a card: no border, no shadow, no ink rule. The message reads as
 * text and the action sits after it, so a two-sentence nudge such as
 * "Confirma tu dirección de correo electrónico…" no longer leads with a button
 * bigger than the sentence explaining it. The same rule serves the account,
 * the cart and the checkout. Feedback (message/info) floats as bottom-right
 * toasts and self-dismisses; errors stay inline until closed.
 * ====================================================================== */
.wl-toasts {
	bottom: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: min(420px, calc(100vw - 40px));
	position: fixed;
	right: 28px;
	z-index: 99999;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--wl-soft) !important;
	border: none !important;
	border-radius: 4px;
	box-shadow: none !important;
	color: var(--wl-ink) !important;
	font-family: var(--wl-font);
	line-height: 1.55;
	overflow: hidden;
	position: relative;
}

/* WooCommerce marks its notices with a round badge before the text
 * (`.woocommerce-message[role="alert"]::before { content: "✓" }`, a circle in
 * the accent colour). On these cards that badge collided with the absolutely
 * positioned × and ate the first words of the sentence, and it was the one
 * thing the editorial notices never needed: they carry their own × and the
 * message says everything. Killed here for every role, so a notice that
 * arrives as role="alert" looks the same as one that arrives as
 * role="status". */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.wc-block-components-notice-banner::before {
	content: none !important;
	display: none !important;
}

/* La acción se sale del flujo del texto: así el enlace deja de medir más que
   la frase que lo explica, y en pantallas estrechas cae debajo. */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	justify-content: space-between;
}

/* El texto a la izquierda, la acción a la derecha, sea cual sea el orden en
   que WooCommerce los imprima. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	justify-content: space-between;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content > p,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content > span:not(.button) {
	order: 1;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .button {
	order: 2;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.wc-block-components-notice-banner a {
	color: var(--wl-ink) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Toasts: slide-in + fade-out choreography. */
.wl-toast {
	animation: wlToastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wlToastIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wl-notice--out {
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.wl-toast.wl-notice--out {
	transform: translateY(8px);
}

/* Close button: quiet × at top-right. */
.wl-notice-close {
	align-items: center;
	background: transparent;
	border: none;
	color: var(--wl-muted);
	cursor: pointer;
	display: flex;
	font-size: 22px;
	height: 34px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 8px;
	top: 8px;
	transition: color 0.15s ease;
	width: 34px;
}

.wl-notice-close:hover {
	color: var(--wl-ink);
}

/* Toast spacing so text clears the ×. */
.wl-toast {
	padding-right: 40px;
}

/* Classic notices keep their own padding; block banners already have it.
   WooCommerce marca el padding de la franja de bloque con `!important`
   (wc-blocks.css), así que aquí también hace falta para poder dejar sitio a
   la × absoluta sin que se monte encima de la acción. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 16px 20px;
	padding-right: 44px;
}

.wc-block-components-notice-banner {
	padding: 16px 20px !important;
	padding-right: 48px !important;
}

.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner::before {
	display: none !important;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	padding: 0 !important;
}

/* Errores: mismo cuerpo de franja, pero teñido, para que se distingan sin
   volver a la caja con borde. */
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: #fdf2f2 !important;
	color: #7a1c15 !important;
}

/* Éxito: la MISMA franja teñida, en verde pastel. El ««título» añadido a tu
 * carrito» de notices.js es un `.woocommerce-message` como lo son el resto de
 * avisos de éxito de WooCommerce —cupón aplicado, cuenta actualizada, líneas
 * del carrito quitadas—, así que un solo tinte los cubre todos y no hay que
 * teñir ninguno a mano.
 *
 * El verde está medido contra su propia franja: #164d31 sobre #eef7f1 da
 * 8,9:1, muy por encima del 4,5 que necesita el texto corrido. El × se queda
 * gris y el botón de acción en tinta —lo que se mueve es el fondo y las
 * letras, no la forma—, así que el toast sigue siendo el mismo objeto con
 * otro ánimo y no una caja nueva. */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background: #eef7f1 !important;
	color: #164d31 !important;
}

.woocommerce-error li {
	font-size: 14.5px;
}

/* Checkout keeps Woo's layout but gets the same card look (no toast there). */
.wc-block-checkout .wc-block-components-notice-banner,
.wc-block-checkout .wc-block-store-notice {
	margin: 0 0 20px;
}

/* Acción dentro de un aviso ("Confirmar dirección", "Ver carrito"): el mismo
   botón de tinta del resto de la tienda, pero pequeño. Antes era un enlace
   pelado y subrayado en negro, que al pasar el ratón quedaba peor: la línea
   negra bajo un texto de 14px parece un enlace suelto dentro de una franja.
   El `min-height` también hay que apagarlo —la regla global de botones de
   carrito y pago lo subía a 50px, más alto que la frase de al lado—. */
.woocommerce-message .button,
.woocommerce-info .button,
.wc-block-components-notice-banner .button {
	background: var(--wl-ink) !important;
	border: 1px solid var(--wl-ink) !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-family: var(--wl-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	min-height: 0 !important;
	padding: 11px 20px !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.wc-block-components-notice-banner .button:hover {
	background: #333333 !important;
	border-color: #333333 !important;
	color: #ffffff !important;
}

/* =========================================================================
 * Acceder / Crear cuenta: un panel cada vez
 * La plantilla enseña el acceso o el alta, nunca los dos a la vez, y debajo un
 * enlace salta al otro. Es la misma medida que usa el caso de «registro
 * desactivado» de abajo, para que la columna no se estire al ancho de la
 * página con un solo formulario dentro.
 * ====================================================================== */
.woocommerce-account .woocommerce > .wl-acct-views {
	display: block;
	margin: 0 auto;
	max-width: 520px;
	width: 100%;
}

.woocommerce-account .woocommerce > .wl-acct-views::after {
	content: none;
}

/* El título del panel necesita su propio bloque. La regla de abajo que lo deja
 * en 26px apunta a `.u-column1` / `.u-column2` / `.col2-set`, que ya no son
 * ancestros suyos: sin esto el «Acceder» salía a los 45px de titular que el
 * tema padre reserva para las cabeceras de su hero. Se declara aparte y no
 * dentro de la regla antigua para que las dos cosas no se pisen.
 * El rótulo es un H1 (es el único titular de la pantalla de acceso) y se mide
 * aquí igual que cuando era un H2: el nombre del selector es lo único que ha
 * cambiado, las declaraciones son las mismas. */
.woocommerce-account .woocommerce > .wl-acct-views .wl-acct-panel h1 {
	font-family: var(--wl-font-headings) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 24px;
	text-align: left;
}

/* El aviso de error se imprime antes del panel y ocupa todo el ancho del
 * contenido, así que con el panel estrecho a 520px quedaba colgando a la
 * izquierda del formulario. Se le da la misma medida y se centra. Solo en la
 * pantalla de acceso, porque en «Pedidos» o «Direcciones» los avisos sí tienen
 * que ocupar el ancho de la página entera.
 *
 * `woocommerce-account` va en el propio `body`, no en un ancestro aparte: por
 * eso el selector empieza en `body.wl-account-login` y no lleva la clase de
 * WooCommerce por medio, que no existiría. */
body.wl-account-login .woocommerce > .woocommerce-notices-wrapper {
	margin-left: auto;
	margin-right: auto;
	max-width: 520px;
	width: 100%;
}

/* El enlace de cambio va centrado y tranquilo: es una salida, no otro CTA que
 * compita con el botón del formulario. El «Crear cuenta» sí se destaca, porque
 * es la acción que se ofrece a quien no tiene cuenta. */
.wl-acct-switch {
	border-top: 1px solid var(--wl-line);
	font-family: var(--wl-font);
	font-size: 15px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	text-align: center;
}

.wl-acct-switch a {
	color: var(--wl-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wl-acct-switch a:hover {
	color: var(--wl-muted);
}

/* =========================================================================
 * La retícula de dos columnas de WooCommerce, que ya no se usa en la pantalla
 * de acceso pero sí en «Direcciones». Se deja por si la dueña desactiva el
 * registro o si WooCommerce vuelve a pintar los dos formularios a la vez.
 * ====================================================================== */
.woocommerce-account .woocommerce > .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin: 0;
	max-width: none;
	width: 100%;
}

.woocommerce-account .woocommerce > .col2-set::after {
	content: none;
}

.woocommerce-account .woocommerce > .col2-set .u-column1 {
	border-right: 1px solid var(--wl-line);
	box-sizing: border-box;
	float: none;
	padding: 0 56px 0 0;
	width: 100%;
}

.woocommerce-account .woocommerce > .col2-set .u-column2 {
	box-sizing: border-box;
	float: none;
	padding: 0 0 0 56px;
	width: 100%;
}

/* El tema padre da a las columnas de su hero los nombres genéricos .col-1 y
 * .col-2, y los acompaña de `!important` en tres cortes: a 1399px fija el
 * título de cada una a 40px/25px y a 1299px a 35px/20px, a 899px convierte
 * .col-2 en una rejilla de dos columnas, a 781px la centra, y a 599px la
 * devuelve a bloque. WooCommerce reutiliza esos mismos nombres en las columnas
 * de la cuenta, así que sin esto: en 1220px «Acceder» salía a 35px y
 * «Registrarse» a 20px, y entre 600 y 899px el formulario de registro se
 * partía en dos celdas, con el título en una y el formulario en otra.
 *
 * Las cajas se reassertan una sola vez y sin media queries: contra un
 * `!important` gana la especificidad, no la posición, y así el arreglo no
 * depende de acertar con los tres cortes del padre. */
.woocommerce-account .woocommerce .col-1,
.woocommerce-account .woocommerce .col-2 {
	display: block !important;
	flex-basis: auto !important;
	float: none !important;
	text-align: start;
}

.woocommerce-account .u-column1.col-1 h2,
.woocommerce-account .u-column2.col-2 h2,
.woocommerce-account .woocommerce > .col2-set .u-column1 h2,
.woocommerce-account .woocommerce > .col2-set .u-column2 h2 {
	font-family: var(--wl-font-headings) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 24px;
	text-align: left;
}

/* Con el registro desactivado WooCommerce no imprime el contenedor de dos
 * columnas; el formulario queda suelto y se centra a una medida legible. */
.woocommerce-account .woocommerce > form.login {
	margin: 0 auto;
	max-width: 520px;
	width: 100%;
}

.woocommerce-account .woocommerce > form.login h2 {
	font-family: var(--wl-font-headings) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 24px;
}

/* Formularios sin caja: la página es el panel. */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	background: transparent;
	border: none;
	border-radius: 0;
	max-width: none;
	padding: 0;
}

.woocommerce-account .woocommerce form.login p,
.woocommerce-account .woocommerce form.register p {
	color: var(--wl-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 18px;
}

.woocommerce-account .woocommerce form.login label,
.woocommerce-account .woocommerce form.register label {
	color: var(--wl-ink);
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin: 0 0 8px;
}

.woocommerce-account .woocommerce form.login .woocommerce-form-row,
.woocommerce-account .woocommerce form.register .woocommerce-form-row {
	margin: 0 0 20px;
}

.woocommerce-account .woocommerce form.login input.input-text,
.woocommerce-account .woocommerce form.register input.input-text {
	background: #fff;
	border: 1px solid #d9d6cf;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 15px;
	height: 48px;
	padding: 0 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.woocommerce-account .woocommerce form.login input.input-text:focus,
.woocommerce-account .woocommerce form.register input.input-text:focus {
	border-color: var(--wl-ink);
	box-shadow: none;
	outline: none;
}

/* Recuérdame discreto en una línea con el acceso. */
.woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0 0 22px;
}

.woocommerce-account .woocommerce form.login input[type="checkbox"] {
	accent-color: var(--wl-ink);
	height: 16px;
	margin: 0;
	width: 16px;
}

.woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme label {
	font-size: 14px;
	font-weight: 400;
	margin: 0;
}

/* CTA a todo el ancho de su columna. */
.woocommerce-account .woocommerce form.login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce form.register .wp-element-button,
.woocommerce-account .woocommerce form.register button[type="submit"] {
	width: 100%;
}

.woocommerce-account .woocommerce form.login .woocommerce-form-login__submit {
	margin: 0 0 18px;
}

/* Acceso social (Nextend Social Login).
 *
 * El plugin imprime su CSS en línea al final de wp_head, así que gana a
 * cualquier regla suelta; estas van dentro de la banda de la cuenta y con más
 * selectores para pasarle por delante. Lo que se busca es que el botón se lea
 * como el resto: mismo tipo, mismo radio de 2px y el ancho de la columna, como
 * los CTA de arriba. El color de cada botón lo pone el propio proveedor, que es
 * su marca; no se toca. */
.wl-acct-alt {
	color: var(--wl-muted);
	font-family: var(--wl-font);
	font-size: 13px;
	letter-spacing: 0.06em;
	margin: 0 0 14px;
	text-align: center;
	text-transform: uppercase;
}

/* Los 3px son los del `padding: 3px` que WooCommerce pone en `.form-row`: los
   campos y el CTA van dentro de uno y por eso quedan tres píxeles más
   estrechos. Los botones se imprimen fuera de ningún `p`, así que sin esto
   quedarían más anchos que todo lo demás de la columna. */
.woocommerce-account .woocommerce form.login .nsl-container,
.woocommerce-account .woocommerce form.register .nsl-container {
	margin: 0 3px;
	width: calc(100% - 6px);
}

.woocommerce-account .woocommerce form.login div.nsl-container .nsl-container-buttons,
.woocommerce-account .woocommerce form.register div.nsl-container .nsl-container-buttons {
	display: flex;
	flex-direction: column;
	grid-template-columns: none;
	padding: 0;
	width: 100%;
}

.woocommerce-account .woocommerce form.login div.nsl-container .nsl-container-buttons a,
.woocommerce-account .woocommerce form.register div.nsl-container .nsl-container-buttons a {
	border-radius: 2px;
	flex: 0 0 auto;
	font-family: var(--wl-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
	min-height: 50px;
	width: 100%;
}

.woocommerce-account .woocommerce form.login div.nsl-container .nsl-container-buttons a:last-child,
.woocommerce-account .woocommerce form.register div.nsl-container .nsl-container-buttons a:last-child {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce form.login div.nsl-container .nsl-button,
.woocommerce-account .woocommerce form.register div.nsl-container .nsl-button {
	align-items: center;
	border-radius: 2px;
	display: flex;
	justify-content: center;
	min-height: 50px;
	padding: 0;
}

/* El logotipo va pegado a la izquierda y la etiqueta se estira a todo el ancho
   con el texto centrado, que es el diseño del plugin. Con la columna de la
   cuenta eso deja un hueco grande entre la «G» y el texto, así que se juntan
   los dos y se centra el bloque, igual que el CTA de encima. De paso, los
   10px de relleno vertical de la etiqueta hacían el botón 24px más alto que el
   resto de la columna. */
.woocommerce-account .woocommerce form.login div.nsl-container .nsl-button-svg-container,
.woocommerce-account .woocommerce form.register div.nsl-container .nsl-button-svg-container {
	padding: 0 6px 0 0;
}

.woocommerce-account .woocommerce form.login div.nsl-container .nsl-button-label-container,
.woocommerce-account .woocommerce form.register div.nsl-container .nsl-button-label-container {
	flex: 0 1 auto;
	font-family: var(--wl-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce form.login .woocommerce-LostPassword,
.woocommerce-account .woocommerce form.login .lost_password {
	font-size: 14px;
	margin: 0;
}

.woocommerce-account .woocommerce form.login .woocommerce-LostPassword a,
.woocommerce-account .woocommerce form.login .lost_password a {
	color: var(--wl-muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.woocommerce-account .woocommerce form.login .woocommerce-LostPassword a:hover,
.woocommerce-account .woocommerce form.login .lost_password a:hover {
	color: var(--wl-ink);
}

/* Una sola columna por debajo de 860px, con el divisor girado a horizontal.
   El anclaje explícito de columnas va antes del corte para que la retícula no
   deje la segunda columna en la fila 2 de un grid de una sola columna. */
.woocommerce-account .woocommerce > .col2-set {
	direction: ltr;
}

.woocommerce-account .woocommerce > .col2-set .u-column1 {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-account .woocommerce > .col2-set .u-column2 {
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 860px) {
	.woocommerce-account .woocommerce > .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account .woocommerce > .col2-set .u-column1,
	.woocommerce-account .woocommerce > .col2-set .u-column2 {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce-account .woocommerce > .col2-set .u-column1 {
		border-right: none;
		padding: 0;
	}

	.woocommerce-account .woocommerce > .col2-set .u-column2 {
		border-top: 1px solid var(--wl-line);
		margin-top: 36px;
		padding: 36px 0 0;
	}
}

/* Corrección: woocommerce-account vive en el propio body (compuesto), no es
   descendiente. Acceder/Registro es una pantalla propia, centrada y sin el
   layout de dos paneles de la cuenta logada. */
body.wl-account-login.woocommerce-account .woocommerce {
	display: block;
}

body.wl-account-login.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

body.wl-account-login.woocommerce-account .entry-content.page-content,
body.wl-account-login.woocommerce-account .wp-block-post-content.is-layout-constrained {
	max-width: 1160px;
}

/* =========================================================================
 * Account area: editorial page header + horizontal tab navigation
 * The "Resumen / Pedidos / ..." list re-renders as an underlined tab strip
 * under the greeting, matching the home language. Sidebar model retired.
 * ====================================================================== */
.wl-acct-head {
	margin: 0 0 30px;
}

/* One heading per screen, in the shop's own display stack. The previous
   rule asked for var(--wl-serif), a token this theme never defines, so every
   account heading silently fell back to Georgia while the rest of the shop
   is Poppins. */
.wl-acct-head__title {
	color: var(--wl-ink);
	font-family: var(--wl-font-headings);
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.12;
	margin: 0;
}

/* El saludo va encima del título de sección y se queda en una línea discreta:
   es un saludo, no un dato. Sin él, el H1 «Pedidos» dice lo mismo que la
   pestaña activa que hay justo debajo. Se ancla con dos clases porque
   `.wp-site-blocks p` pone todo en tinta y gana en especificidad. */
.wl-acct-head .wl-acct-head__greeting {
	color: var(--wl-muted);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin: 0 0 6px;
}

.wl-acct-head .wl-acct-head__lead {
	color: var(--wl-muted);
	font-size: 15.5px;
	line-height: 1.6;
	margin: 12px 0 0;
	max-width: 62ch;
}

/* El encabezado de las pantallas de recuperación (recuperar, contraseña nueva,
   correo enviado): es el único bloque que sobrevive sin la franja de pestañas,
   porque no la hay. La pantalla de acceso no lo usa: allí el titular es el
   título del panel, y solo se enseña uno de los dos. */
.wl-acct-head--login {
	margin: 0 0 34px;
	max-width: 62ch;
}

/* The page template prints the post title as a heading above everything. The
   account area does not want it: its own header names the section, and the
   title of the page template is out of the document there (inc/account.php,
   wl_account_drop_page_title()) because it said the same thing and nobody
   could read it. The wrapper is now empty and this rule is also what keeps its
   40px band from opening a hole at the top of every account screen. */
body.woocommerce-account .page-title-wrap {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100% !important;
	float: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border-top: none;
	display: flex;
	gap: 26px;
	list-style: none;
	margin: 0 0 34px;
	overflow-x: auto;
	padding: 0 0 2px;
	scrollbar-width: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	background: transparent !important;
	border-bottom: none !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	border-bottom: 2px solid transparent;
	color: var(--wl-muted) !important;
	display: block;
	font-family: var(--wl-font);
	font-size: 14.5px;
	font-weight: 500;
	padding: 6px 2px 12px !important;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--wl-ink) !important;
	padding-left: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-bottom-color: var(--wl-ink);
	color: var(--wl-ink) !important;
	font-weight: 600;
	padding-left: 2px;
}

/* Legacy sidebar rules retired: content takes the full width now. */
.woocommerce-account .woocommerce {
	display: block !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 100% !important;
}

/* =========================================================================
 * Footer always at the bottom (short pages, e.g. account)
 * Flex column on the body; the site wrapper eats the leftover space and the
 * footer template part sticks to the end.
 * ====================================================================== */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > footer.wp-block-template-part {
	margin-top: auto;
}

/* El tema padre convierte la navegación de cuenta en píldoras en móvil;
   reafirmamos la tira de pestañas en su propia media query. */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		gap: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li,
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var(--wl-muted) !important;
		display: block !important;
		min-height: 0 !important;
		padding: 6px 2px 12px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		border-bottom: 2px solid transparent !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		border-bottom-color: var(--wl-ink) !important;
		color: var(--wl-ink) !important;
		font-weight: 600;
	}
}

/* ─── Page title (plantillas de página estáticas) ─── */
.page-title-wrap { margin-bottom: 40px; }
.page-title-wrap .wp-block-post-title { margin: 0; text-align: center; }
.page-title-wrap .wp-block-post-title a { color: inherit; text-decoration: none; }

/* ─── Página de eventos (página «Eventos», encima del contenido de la
 * dueña): un destacado en grande, los dos siguientes al lado y el resto
 * de las fechas en tiras.
 *
 * La agenda ya no lleva encabezado propio. Antes arrancaba con un H2
 * («Agenda de la librería») y un párrafo debajo («Presentaciones, firmas y
 * clubes de lectura…») que sólo repetía lo que se ve en las tarjetas, con
 * el H1 de la plantilla («Eventos») un nivel por encima: tres rótulos
 * para un solo bloque y ninguna información. Ahora el H1 es el único
 * título y la rejilla empieza justo debajo.
 *
 * La banda de arriba necesita la medida ancha —la columna restringida son
 * 780px y las tres tarjetas saldrían estrechas—; `alignwide` no llega
 * tan hondo, así que el ancho se pone a mano. El contenido editable que
 * la dueña escriba debajo hereda esa misma medida. */
.wl-events-page {
	box-sizing: border-box;
	margin: 0 0 48px;
}

.wl-events-page.alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--style--global--wide-size, 1280px);
	width: 100%;
}

body:has(.wl-events-page) .entry-content {
	box-sizing: border-box;
	max-width: none;
	padding-left: var(--wl-shell-gutter);
	padding-right: var(--wl-shell-gutter);
	width: 100%;
}

body:has(.wl-events-page) .entry-content > * {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--style--global--wide-size, 1280px);
}

/* Banda 1 — el destacado y los dos siguientes.
 *
 * El reparto es 1,9 / 1 / 1 y no el 2,5 / 1 / 1 de antes: con el reparto
 * viejo las dos tarjetas de al lado medían 246px sobre 1134 (el 22% de la
 * columna) y se leían como miniaturas de la grande. Con 1/3,9 de la
 * medida son ~284px, que ya son tarjetas y no rótulos, y la grande se
 * queda con 539 —su columna de texto pasa de 148 a 199px, que es justo
 * lo que hace que «Presentación con Íñigo Aguas» quepa en dos líneas y
 * no en tres.
 *
 * `grid-auto-rows` fija la altura de la banda para que las tres terminen
 * en la misma línea; la cota la pone la tarjeta pequeña, que es la que
 * menos texto lleva. */
.wl-events-page-grid {
	display: grid;
	gap: 14px;
	grid-auto-rows: clamp(440px, 35vw, 480px);
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr);
	/* La rejilla se abre 3px por arriba y por abajo y recupera esos 6px
	 * en el margen, para que la tarjeta no tenga nada recortando su
	 * alzamiento. `.entry-content` trae `overflow: clip` y la tarjeta de
	 * arriba se levanta 2px al pasar el ratón —medido: el borde superior
	 * pasaba de y=268 a y=266 y los 2px se perdían—. */
	margin: -3px 0 23px;
	padding: 3px 0;
}

/* La grande deja algo más de aire a la foto: su texto va en una sola
 * columna estrecha al lado de la caja de fecha, y con el 40% de antes se
 * quedaba en 148px. */
.wl-events-page-grid .wl-event-card--featured .wl-event-photo {
	flex: 0 0 36%;
}

/* Las dos de al lado: algo más de foto y un cuerpo un punto mayor. Es lo
 * único que las separa de las compactas de la portada, y es justo lo que
 * las hace grandes al lado de la primera. */
.wl-events-page-grid .wl-event-card--compact .wl-event-photo {
	flex: 0 0 42%;
}

.wl-events-page-grid .wl-event-card--compact .wl-event-body {
	padding: 16px 18px 18px;
}

.wl-events-page-grid .wl-event-card--compact .wl-event-title {
	font-size: 19px;
}

.wl-events-page-grid .wl-event-card--compact .wl-event-excerpt {
	font-size: 15px;
}

/* Una librería con dos o tres fechas no debe dejar huecos: si sólo hay
 * una tarjeta, ocupa la banda entera; si hay una grande y una mediana, la
 * mediana se estira hasta el final. */
@media (min-width: 1101px) {
	.wl-events-page-grid .wl-event-card--featured:only-child {
		grid-column: 1 / -1;
	}

	.wl-events-page-grid .wl-event-card--compact:nth-child(2):last-child {
		grid-column: 2 / -1;
	}
}

@media (max-width: 1100px) {
	/* Por debajo de 1100 la grande ya no tiene ancho para el reparto
	 * horizontal de fecha y texto (la regla general de la tarjeta la
	 * pone en columna), así que ocupa la fila entera y las dos medianas
	 * se reparten la de abajo. */
	.wl-events-page-grid {
		grid-auto-rows: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* En fila y con `auto` la grande mediría lo que miden sus bloques —252px
	 * medidos a 1024, con la fecha, el título, una línea y el botón—, que
	 * es más baja que las dos de debajo y la deja cojeando. */
	.wl-events-page-grid .wl-event-card--featured {
		grid-column: 1 / -1;
		min-height: clamp(300px, 26vw, 360px);
	}

	/* Con la fila en `auto` el `flex-basis` en porcentaje ya no tiene
	 * contra qué medirse —se resolvería al tamaño natural de la miniatura,
	 * 150px—, así que las dos fotos pasan a alto fijo. */
	.wl-events-page-grid .wl-event-card--compact .wl-event-photo {
		flex: 0 0 210px;
	}

	/* Con una sola mediana debajo de la grande, se estira a la fila. */
	.wl-events-page-grid .wl-event-card--compact:nth-child(2):last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 781px) {
	/* Aquí la grande sí pasa a columna (foto encima, texto debajo) y su
	 * `flex-basis: 36%` —pensado para el ancho— resolvería contra una
	 * altura que la propia foto ayuda a decidir. Medido a 781px: 666px de
	 * alto con 187px de hueco entre la hora y el botón. Con el eje
	 * principal en vertical, el mismo reparto se escribe en píxeles. */
	.wl-events-page-grid .wl-event-card--featured {
		min-height: 0;
	}

	.wl-events-page-grid .wl-event-card--featured .wl-event-photo {
		flex: 0 0 170px;
	}
}

@media (max-width: 640px) {
	.wl-events-page-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wl-events-page-grid .wl-event-card--compact .wl-event-photo {
		flex: 0 0 180px;
	}
}

/* ─── Banda 2 — el resto de la agenda, en tiras ───
 *
 * Una sola caja blanca con las filas separadas por un pelo, como el
 * programa de mano de una librería: la lista se lee de un tirón y no
 * compite con la banda de tarjetas de arriba. Cada tira lleva lo mínimo
 * que identifica un evento —cuándo y cómo se llama— y nada más: sin
 * extracto y sin botón, que a diez fechas seguidas sólo añadirían ruido. */
.wl-events-list {
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 16px;
	overflow: hidden;
}

.wl-events-list-title {
	color: var(--wl-muted);
	font-family: var(--wl-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin: 0;
	padding: 18px 24px 14px;
	text-transform: uppercase;
}

.wl-event-strip + .wl-event-strip {
	border-top: 1px solid var(--wl-line);
}

/* Toda la fila es el enlace (el título es su nombre accesible), que es lo
 * que hace cómoda de recorrer una agenda larga con el dedo. Las pistas son
 * automáticas: sin foto la fila simplemente no tiene la primera columna y
 * se cierra por la izquierda. */
.wl-event-strip-link {
	align-items: center;
	color: var(--wl-ink) !important;
	display: grid;
	gap: 20px;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	padding: 15px 24px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.wl-event-strip-link:hover,
.wl-event-strip-link:focus-visible {
	background: var(--wl-soft);
}

.wl-event-strip-photo {
	border-radius: 6px;
	display: block;
	height: 58px;
	overflow: hidden;
	width: 58px;
}

.wl-event-strip-photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.wl-event-strip-date {
	display: flex;
	flex-direction: column;
	line-height: 1;
	width: 62px;
}

.wl-event-strip-day {
	font-family: var(--wl-font);
	font-size: 26px;
	font-weight: 650;
	letter-spacing: -0.03em;
}

.wl-event-strip-month {
	color: var(--wl-muted);
	font-size: 12px;
	letter-spacing: 0.06em;
	margin-top: 5px;
	text-transform: uppercase;
}

.wl-event-strip-main {
	display: block;
	min-width: 0;
}

.wl-event-strip-title {
	font-family: var(--wl-font);
	font-size: 18px;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}

.wl-event-strip-meta {
	align-items: center;
	color: var(--wl-muted);
	display: flex;
	font-size: 13.5px;
	gap: 8px;
	line-height: 1.3;
	margin-top: 6px;
}

.wl-event-strip-meta svg {
	color: var(--wl-ink);
	flex: 0 0 16px;
}

.wl-event-strip-go {
	color: var(--wl-muted);
	font-size: 18px;
	transition: transform 0.15s ease;
}

.wl-event-strip-link:hover .wl-event-strip-go,
.wl-event-strip-link:focus-visible .wl-event-strip-go {
	transform: translateX(4px);
}

@media (max-width: 640px) {
	/* En el móvil la tira se queda en fecha + título + flecha. Medido a
	 * 390px: con la foto de 58px el título se queda en 173px y
	 * «Presentación: El invierno de las letras» ocupa tres líneas; sin
	 * foto caben dos, que es lo que debe verse. */
	.wl-event-strip-link {
		gap: 14px;
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: 14px 16px;
	}

	.wl-event-strip-photo {
		display: none;
	}

	.wl-event-strip-date {
		width: 46px;
	}

	.wl-event-strip-day {
		font-size: 22px;
	}

	.wl-event-strip-title {
		font-size: 16px;
	}

	.wl-events-list-title {
		padding: 16px 16px 12px;
	}
}

/* ─── El evento, en pop-up ───
 *
 * Tocar una tarjeta o una tira de la agenda abre esto en vez de saltar a
 * la ficha: la agenda se recorre de un vistazo sin perder el sitio de
 * donde se estaba.
 *
 * La foto va en una columna ancha a la derecha, a la altura completa. La
 * primera versión la metía en una franja de 216px y el pop-up parecía un
 * decidedly pequeño y la foto, una postage stamp; ahora la caja mide 720px
 * y la foto 340, que es lo que hace falta para que se vea de verdad.
 *
 * El marcado lo arma `assets/event-dialog.js` al vuelo y se pinta con la
 * misma caja blanca y la misma fecha partida de las tarjetas, para que
 * abrir un evento se lea como seguir leyendo la agenda y no como saltar
 * a otra web. */
.wl-ev-dialog {
	background: transparent;
	border: 0;
	color: var(--wl-ink);
	font-family: var(--wl-font);
	/* El `<dialog>` se centra solo; se dice igual para que no dependa de
	 * los valores por defecto del navegador. */
	margin: auto;
	max-width: min(860px, calc(100vw - 40px));
	padding: 0;
	width: 100%;
}

/* El fondo: medio negro, como el telón del menú y el de la lupa pero más
 * cerrado, porque aquí el contenido de detrás no interesa —está en otra
 * cosa— y lo que se ha abierto es una ficha. */
.wl-ev-dialog::backdrop {
	background: rgba(17, 17, 17, 0.52);
	backdrop-filter: blur(2px);
}

.wl-ev-dialog__caja {
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(17, 17, 17, 0.24);
	display: grid;
	/* El texto a la izquierda y la foto a la derecha, como la ficha. Con
	 * 860px de caja la foto se lleva 380 y al texto le quedan 480: el
	 * título del evento entra en dos líneas cortas y la descripción en
	 * tres, sin que sobre hueco a la derecha. Antes medía 720 con 340 de
	 * foto, que se veía pequeño al lado de la tarjeta grande de la
	 * agenda. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	/* La caja es la que se recorta y la que lleva el alto máximo, no el
	 * `<dialog>`: un `max-height` en porcentajes sobre un padre de alto
	 * automático no resuelve, y es la caja la que se ve. Con
	 * `overflow: hidden auto` la parte de arriba —foto incluida— se
	 * mantiene quieta en un móvil en horizontal y el texto baja. */
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	/* Un evento con poco texto dejaría una caja plana; con la foto al
	 * lado, esta altura mínima la deja siempre en proporción de retrato
	 * o casi. En móvil la foto va encima y manda el alto natural.
	 *
	 * El `min()` no es adorno: en CSS el `min-height` gana al
	 * `max-height`, así que con los 380px fijos un móvil apaisado —740×360
	 * medido— sacaba la caja 25px por debajo de la pantalla. Encoger el
	 * mínimo con el mismo alto que el máximo deja la caja dentro y, como
	 * el mínimo queda por debajo, la caja de verdad manda. */
	min-height: min(320px, calc(100vh - 32px));
	min-height: min(320px, calc(100dvh - 32px));
	overflow: hidden auto;
	overscroll-behavior: contain;
	position: relative;
	text-align: left;
}

/* Sin foto (un evento sin imagen destacada) la rejilla se queda con una
 * sola columna; si no, la segunda quedaría reservada y vacía. */
.wl-ev-dialog__caja:not(:has(.wl-ev-dialog__medio:not([hidden]))) {
	grid-template-columns: minmax(0, 1fr);
}

/* La foto, con `position: relative` en la celda y `absolute` en la
 * imagen, para que la imagen NO decida el alto de la caja. Con
 * `height: 100%` dentro de una celda de rejilla, y al calcular la altura
 * de la fila el porcentaje se trata como `auto`: la fila se estiraba
 * hasta la altura natural de la foto y el texto se quedaba solo arriba,
 * con un agujero debajo que iba de 46 a 212px según la foto del evento
 * —medido: dos pop-ups del mismo texto, uno de 376px de alto y otro de
 * 505—. Ahora la altura la manda el texto y la foto se estira a llenar. */
.wl-ev-dialog__medio {
	background: #f2efe9;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.wl-ev-dialog__foto {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.wl-ev-dialog__cuerpo {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(24px, 2.4vw, 34px);
}

/* Los `hidden` de los bloques opcionales. Hace falta la regla: los que
 * llevan `display: flex` o `inline-flex` —la fecha, los datos, el texto y
 * el botón— la ganarían por tener más especificidad que el
 * `display: none` que pone el navegador a `[hidden]`. */
.wl-ev-dialog [hidden] {
	display: none;
}

/* La fecha, con el mismo linguagem que la caja de la tarjeta grande: el
 * día grande y el mes en versalitas al lado, el año detrás y más discreto. */
.wl-ev-dialog__fecha {
	align-items: baseline;
	display: flex;
	gap: 10px;
	margin: 0 0 16px;
}

.wl-ev-dialog__dia {
	font-family: var(--wl-font);
	font-size: 44px;
	font-weight: 650;
	letter-spacing: -0.03em;
	line-height: 1;
}

.wl-ev-dialog__mes {
	color: var(--wl-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wl-ev-dialog__ano {
	color: var(--wl-muted);
	font-size: 11px;
	letter-spacing: 0.14em;
}

/* La hora se va al extremo derecho de la misma línea con `margin-left:
 * auto`, que la empuja; así el día, el mes, el año y la hora se leen de
 * una pasada como «cuándo». Se pone en tinta y un punto mayor que el
 * lugar, que es un dato de apoyo: lo primero que se mira de un evento es
 * cuándo, y no se iba a ver porque iba en gris claro debajo del título. */
.wl-ev-dialog__fecha .wl-ev-dialog__hora {
	color: var(--wl-ink);
	font-size: 15.5px;
	font-weight: 500;
	margin-left: auto;
	padding-bottom: 4px;
}

/* La línea de «cuándo» no lleva `align-items: baseline` como el resto:
 * el día es de 44px y la hora de 15.5, y con la línea base compartida el
 * reloj y las cifras quedaban colgando por debajo. */
.wl-ev-dialog__fecha {
	align-items: center;
}

.wl-ev-dialog__titulo {
	font-family: var(--wl-font);
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 650;
	letter-spacing: -0.03em;
	line-height: 1.12;
	margin: 0;
}

/* Hora y lugar, uno debajo del otro y con una raya entre ellos. Se
 * esconden juntos: si un evento no tiene lugar, la raya y el hueco de
 * arriba sobrarían, y el bloque entero lleva `hidden` desde JavaScript
 * cuando no hay ninguno de los dos. */
.wl-ev-dialog__datos {
	border-top: 1px solid var(--wl-line);
	margin: 18px 0 0;
	padding-top: 16px;
}

.wl-ev-dialog__hora,
.wl-ev-dialog__lugar {
	align-items: center;
	color: var(--wl-muted);
	display: flex;
	font-size: 14.5px;
	gap: 10px;
	line-height: 1.4;
	margin: 0;
}

.wl-ev-dialog__lugar {
	margin-top: 9px;
}

/* El icono de cada línea es un `::before`, no un elemento: así el único
 * `<span>` del `<p>` es el del texto y no hay forma de confundir uno con
 * otro. Antes el icono era un `<span>` y el texto se escribía dentro de
 * él, dentro de la máscara, donde no se ve: se veía el reloj y el
 * chincheta, pero no la hora ni el lugar. */
.wl-ev-dialog__hora::before,
.wl-ev-dialog__lugar::before {
	background-color: var(--wl-ink);
	content: "";
	display: inline-block;
	flex: 0 0 18px;
	height: 18px;
	width: 18px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wl-ev-dialog__hora::before {
	-webkit-mask-image: url("assets/icons/clock.svg");
	mask-image: url("assets/icons/clock.svg");
}

.wl-ev-dialog__lugar::before {
	-webkit-mask-image: url("assets/icons/map-pin.svg");
	mask-image: url("assets/icons/map-pin.svg");
}

.wl-ev-dialog__texto {
	color: var(--wl-muted);
	font-size: 15.5px;
	line-height: 1.62;
	margin: 18px 0 0;
}

.wl-ev-dialog__texto a {
	color: var(--wl-ink) !important;
}

/* El pie lleva ya un solo botón, así que no necesita `space-between`
 * ni la regla de la ficha como única acción. Lo que sí conserva es el
 * `margin-top: auto`, para que el botón baje al fondo de la caja y se
 * quede allí haya tres párrafos de texto o ninguno: así todos los
 * pop-ups ofrecen el botón en el mismo sitio. */
.wl-ev-dialog__pie {
	margin-top: auto;
	padding-top: 24px;
}

.wl-ev-dialog__pie:not(:has(a:not([hidden]))) {
	margin-top: 0;
	padding-top: 0;
}

.wl-ev-dialog__enlace {
	align-items: center;
	background: var(--wl-ink);
	border-radius: 10px;
	color: #ffffff !important;
	display: inline-flex;
	font-size: 14.5px;
	font-weight: 500;
	gap: 10px;
	justify-content: center;
	padding: 14px 26px;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

.wl-ev-dialog__enlace:hover,
.wl-ev-dialog__enlace:focus-visible {
	background: #333333;
	transform: translateY(-1px);
}

.wl-ev-dialog__enlace span {
	transition: transform 0.15s ease;
}

.wl-ev-dialog__enlace:hover span,
.wl-ev-dialog__enlace:focus-visible span {
	transform: translateX(3px);
}

/* El icono del botón de cerrar sale de la biblioteca del tema
 * (`assets/icons/`), que dibuja como máscara de CSS: el color lo pone
 * `background-color` y el dibujo no ocupa sitio en el HTML. Los de la
 * hora y el lugar son `::before`, más arriba. */
.wl-ev-dialog__ic {
	background-color: var(--wl-ink);
	display: inline-block;
	flex: 0 0 18px;
	height: 18px;
	width: 18px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wl-ev-dialog__ic--cerrar {
	-webkit-mask-image: url("assets/icons/x-mark.svg");
	mask-image: url("assets/icons/x-mark.svg");
}

.wl-ev-dialog__salir {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--wl-line);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(17, 17, 17, 0.14);
	color: var(--wl-ink);
	cursor: pointer;
	display: inline-flex;
	/* 44px y no 38: es la caja que se toca con el dedo, y el tema ya
	 * exige 44×44 en toda la capa táctil —aquí no lo cubre ninguna regla
	 * porque el botón lo arma JavaScript—. */
	height: 44px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 12px;
	top: 12px;
	transition: background-color 0.15s ease;
	width: 44px;
	z-index: 2;
}

.wl-ev-dialog__salir:hover {
	background: #f2efe9;
}

.wl-ev-dialog__salir:focus-visible,
.wl-ev-dialog__enlace:focus-visible {
	outline: 2px solid var(--wl-ink);
	outline-offset: 2px;
}

/* La entrada y la salida duran lo que tarda el JavaScript en cerrar:
 * 170ms. Si el CSS tardara más, el diálogo desaparecería a media
 * animación. */
@keyframes wl-ev-entra {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.99);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wl-ev-sale {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(8px) scale(0.99);
	}
}

.wl-ev-dialog[open] .wl-ev-dialog__caja {
	animation: wl-ev-entra 0.17s ease both;
}

.wl-ev-dialog.is-cerrando .wl-ev-dialog__caja {
	animation: wl-ev-sale 0.17s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.wl-ev-dialog[open] .wl-ev-dialog__caja,
	.wl-ev-dialog.is-cerrando .wl-ev-dialog__caja {
		animation: none;
	}
}

/* El scroll de la página parado mientras se mira un evento, como con la
 * lupa y con el menú. Sin esto, en un móvil el dedo sigue bajando la
 * agenda por detrás del pop-up.
 *
 * `scrollbar-gutter: stable` va aquí y no en `html { }` a secas, que es
 * donde lo tiene la lupa (y sólo por debajo de 782px): sin él, en un
 * escritorio con barra de scroll normal —Windows— quitar la barra al
 * abrir el pop-up ensancharía el contenido lo que mide la barra y toda
 * la página se iría a la derecha. Reservando el hueco sólo mientras el
 * diálogo está abierto no se nota nada al abrir ni al cerrar, y por
 * encima de 782px el escritorio sigue igual que estaba. */
html.wl-ev-abierto {
	overflow: hidden;
	scrollbar-gutter: stable;
}

html.wl-ev-abierto body {
	overscroll-behavior: contain;
}

@media (max-width: 640px) {
	.wl-ev-dialog {
		max-width: calc(100vw - 24px);
	}

	/* En una sola columna la foto pasa encima del texto, como en la ficha
	 * por debajo de 900px, y la caja deja de medir: manda lo que miden
	 * sus bloques. De paso, en el móvil la caja roza los bordes y el
	 * radio baja un poco para no quedar tan redondo.
	 *
	 * Las filas se escriben a mano porque en el DOM el texto va antes que
	 * la foto —para que un lector de pantalla encuentre primero el
	 * título— y sin esto la foto se colocaría debajo. */
	.wl-ev-dialog__caja {
		border-radius: 16px;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* La foto deja de ser una columna y pasa a ser una banda de 16:9 con
	 * su propio alto: estirada hasta el fondo, en un evento con poco
	 * texto se comía media pantalla. El alto lo lleva ahora la celda y
	 * no la imagen —que va en `absolute` para no decidir el alto de la
	 * caja—, así que la proporción se declara aquí. */
	.wl-ev-dialog__medio {
		aspect-ratio: 16 / 9;
		grid-row: 1;
		max-height: 42vh;
	}

	.wl-ev-dialog__cuerpo {
		grid-row: 2;
	}

	.wl-ev-dialog__salir {
		right: 10px;
		top: 10px;
	}
}

/* El botón se estira a lo ancho en el móvil. En el escritorio se queda
 * con su ancho, que es como se lee una acción sola; en una columna
 * estrecha, un botón de 186px pegado a la izquierda parece un trozo
 * de algo más ancho. */
@media (max-width: 480px) {
	.wl-ev-dialog__enlace {
		justify-content: center;
		width: 100%;
	}
}

/* Product page badge stack: injected inside the active gallery slide
 * La columna de etiquetas de la ficha es .wl-gal-corner (en .wl-gal-corner,
 * arriba), y lleva las mismas .wl-badge que las tarjetas. */
/* Events page grid: same white hairline cards as the home banner; the
 * page sits on the standard white background, so nothing else changes. */

/* Teléfonos: dos libros por fila, con la baldosa siguiendo a la columna.
 *
 * La banda va en 600px, que es donde el propio token `--wl-plate` baja a
 * 176: por debajo la baldosa sigue a la columna, por encima manda la baldosa
 * mínima. Antes esta banda estaba en 430px y se quedaba corta: dos baldosas
 * de 176 más el hueco de 14 son 366, y la rejilla del catálogo mide
 * `ancho - 102` (medido: 297 a 390, 408 a 501, 556 a 649), así que hacen
 * falta 459px de pantalla para que quepan dos. Entre 431 y 458 —justo el
 * caso que el comentario de esta regla dice evitar— salía UNA baldosa de
 * 176 en una fila de 351, con 175px de blanco al lado.
 * Medido a 445px: `grid-template-columns: 176px`.
 *
 * Sigue siendo necesaria con la rejilla elástica: por debajo de 600 la fila
 * no da para dos baldosas mínimas, así que sin esta banda `auto-fill` cae
 * en una sola pista y la tapa se estira a 297px de alto —medido a 390px:
 * `grid-template-columns: 141.5px` con la banda puesta, `1fr` sin ella—.
 *
 * Y el carrito se va a la esquina de la tapa: en una baldosa estrecha la
 * fila de compra se come el ancho y el precio perdía sitio para enseñar las
 * dos cifras, la tachada y la actual.
 *
 * El `!important` no es opcional: la rejilla por defecto se declara con
 * `minmax(var(--wl-plate), 1fr) !important` más abajo en el archivo, y
 * un `!important` solo lo mueve otro `!important`. Sin él esta banda era
 * letra muerta y el móvil se quedaba en una columna de 176px —medido a
 * 390px: `grid-template-columns: 175.995px`—, que es justo lo que pasaba.
 *
 * Aquí ya NO se repite la tapa cuadrada: la regla general de las portadas
 * (más arriba) la pone cuadrada en todo el sitio, y con la baldosa elástica
 * basta. Estaba aquí porque antes el alto venía de `--wl-plate`. */
@media (max-width: 600px) {

	.wl-catalog .wc-block-product-template,
	.wl-product-grid .wc-block-product-template,
	.wl-featured-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.wl-catalog .wl-featured-card,
	.wl-product-grid .wl-featured-card {
		position: relative;
	}

	/* El botón se va a la esquina de la tapa, a 8px. Su esquina cuadrada cae
	 * dentro de la curva de la tarjeta: con radio 12 el centro del arco está a
	 * 12px de cada borde, así que la esquina del botón queda a 5,7px de él y
	 * el `overflow: hidden` no la toca. Por debajo de 3,5px de separación ya
	 * empozaría a cortarla. */
	.wl-catalog .wl-card-cart,
	.wl-product-grid .wl-card-cart {
		background: #ffffff;
		height: 30px;
		position: absolute;
		right: 8px;
		top: 8px;
		width: 30px;
		z-index: 2;
	}

	.wl-catalog .wl-featured-buy,
	.wl-product-grid .wl-featured-buy {
		justify-content: flex-start;
	}
}

/* =========================================================================
 * Book cards: el carrusel de la portada.
 * El carril horizontal NO es una rejilla: son tarjetas de ancho FIJO en un
 * riel que se desplaza, y ahí el ancho tiene que ser fijo a propósito —si
 * se estira para llenar lo que queda, deja de haber un “siguiente” que asome
 * y se pierde la pista de que el carril continúa. Por eso este ancho sigue
 * su propia escalera (240/208/176) y no usa el token elástico.
 *
 * La rejilla que sí se estira es `.wl-featured-grid` (búsqueda), declarada
 * arriba del todo con el mismo `minmax(--wl-plate, 1fr)` que el catálogo. La
 * escalera de columnas fijas que estaba aquí (240/208/176 en auto-fill) se
 * llevó por delante: al ser fija, la última columna nunca llenaba la fila, y
 * además al llegar aquí pisaba las bandas de 4/3/2 columnas de más arriba.
 * ====================================================================== */
.wl-featured-row > * {
	flex: 0 0 auto;
	width: 240px;
}

@media (max-width: 1000px) {

	.wl-featured-row > * {
		width: 208px;
	}
}

@media (max-width: 600px) {

	.wl-featured-row > * {
		width: 176px;
	}
}

/* =========================================================================
   CAPA MÓVIL — todo lo que cambia en pantalla pequeña, en un solo sitio
   ---------------------------------------------------------------------------
   Hasta aquí cada componente se había mobileado con su propio parche dentro de
   su propia media query, y el resultado era un móvil que "funcionaba" pero no
   se podía usar: iconos de 30px, un buscador de 12px de ancho escondido con
   `clip` dentro de la cabecera, precios de 9,6px y enlaces de 18px de alto.

   Aquí se arregla de una vez. Cuatro reglas de fondo:

   1. La cabecera se pega al borde superior. En el escritorio no hace falta
      (hay sitio para todo), pero en el móvil perder la navegación al hacer
      scroll es justo la diferencia entre una web y una aplicación. `z-index:
      10` la deja por debajo del menú a pantalla completa (20) y del cajón de
      carrito, que deben seguir tapándola.
   2. Ningún control mide menos de 44px: el mínimo que recomienda la guía
      táctil. Los iconos no crecen —crece la caja que los rodea— para que la
      cabecera siga siendo discreta.
   3. El texto pequeño se queda en 12px como suelo. Un precio no se lee.
   4. El buscador deja de ser un icono: pasa a ser un campo de verdad, en su
      propia fila, porque en la cabecera no cabe junto a los iconos y un input
      de 12px es un adorno.

   Sobre el `!important`: la cabecera y los iconos vienen con reglas de mayor
   peso (`.wp-site-blocks .wl-home-header-inner` y
   `.wl-home-cart .wc-block-mini-cart__button` los fijan con `!important`), y
   el buscador usa selectores de cuatro clases para ganar por orden. Aquí se
   iguala la fuerza en vez de pelear: los selectores largos reproducen los del
   propio tema y el `!important` se usa solo donde ya lo había.

   El escritorio (≥1001px) no se toca: ninguna regla de este bloque entra
   ahí y las de arriba siguen mandando. Lo único que vive fuera de las
   media queries son las tres medidas de abajo, y ninguna regla por encima
   de 1000px las lee.

   Y hay cinco bandas, con cada regla en la más estrecha que la necesita,
   para que el alcance se lea sin convenciones:

     · `max-width: 519px`   móvil estrecho: la cabecera reparte la fila de
       arriba entre marca y acciones, y el buscador baja a su propia fila.
     · `520px`…`781px`      móvil ancho: la cabecera cabe en una fila y baja
       de 111px a 65px.
     · `1000px` + `500px` de alto — móvil en horizontal. Todas las bandas
       anteriores son solo por anchura, así que un móvil girado se caía por
       la rendija y se encontraba con la cabecera de escritorio.
     · `max-width: 781px`   móvil, y solo móvil: el resto de la capa.
     · `max-width: 1000px`  lo que necesita tableta tanto como móvil: la
       cabecera pegada al borde y el interior del panel de filtros, que allí
       también se pliega.
     · `782px`…`1000px`     lo que es solo de tableta.
   ====================================================================== */

/* Las tres medidas de esta capa, una vez. `--wl-tap` es el suelo táctil
 * (44px, el mínimo de la guía); `--wl-tap-alto` es la acción principal de
 * una pantalla, un escalón por encima; `--wl-min-texto` es el suelo del
 * texto. Antes eran literales repetidos por todo el bloque —44px 46 veces,
 * 12px 18, 48px 7—, de modo que la regla «ningún control baja de 44px» era
 * un comentario y un `43px` podía colarse sin que nadie se enterara. Con
 * esto se cambian en un sitio o no se cambian.
 *
 * Van AQUÍ, fuera de las media queries, y no dentro de la de móvil, porque
 * la consulta hermana de tableta también los lee: dentro de un
 * `max-width: 781px` no los veía, computaban a vacío y su única regla —el
 * `min-height` del botón de filtros— quedaba muerta. Medido a 900px:
 * `min-height: 0px` y caja 102x46, frente a los 48px que sí daba a 390px.
 * Una variable se declara donde la leen todas las consultas que la leen,
 * no donde nació.
 *
 * Que estén arriba no las filtra a partir de 1000px: por encima de esa
 * cifra ningún selector las usa, así que el escritorio no cambia
 * (comprobado a 1280px).
 *
 * Y tienen que ir dentro de un selector: una declaración suelta al
 * principio de un `@media` no es una regla válida, el navegador la
 * descarta y al recuperarse se come el resto del bloque — medido: la
 * cabecera pasaba de 111 a 243px y los iconos de 44 a 22 —.
 *
 * Ojo con los demás 12px del bloque (los de `padding`): son geometría,
 * no el suelo del texto, y por eso no pasan por aquí. */
:root {
	--wl-tap: 44px;
	--wl-tap-alto: 48px;
	--wl-min-texto: 12px;
}

@media (max-width: 781px) {

	/* Un toque de app: sin el marco azul del navegador al pulsar, y con un
	 * gris muy suave que sustituye al `:hover` (en el dedo no existe). */
	.wp-site-blocks a,
	.wp-site-blocks button,
	.wl-site-header a,
	.wl-site-header button {
		-webkit-tap-highlight-color: rgba(17, 17, 17, 0.07);
	}

	/* --- 1. La cabecera: se adapta al ancho y se queda a mano --------- */
	/* Las dos bandas que reparten la cabecera según el ancho que hay están
	 * fuera de esta, justo debajo: 479px y 480–781px. Aquí queda lo que es
	 * igual en todo el móvil, que es el esqueleto de dos filas. */

	/* Fila 1: marca a la izquierda, menú a la derecha. Fila 2: buscador,
	 * cuenta y carrito a lo ancho, porque en la cabecera no caben cinco
	 * cosas en 390px. El relleno y el ancho los fija la regla global
	 * `.wp-site-blocks .wl-home-header-inner` con `!important`, así que el
	 * selector tiene que llevar ese mismo `.wp-site-blocks` para poder
	 * igualarla.
	 *
	 * El logo y el buscador van con fila EXPLÍCITA: en un grid, `order`
	 * no reordena y las colocaciones `auto` caen donde puedan. Sin esto,
	 * el buscador (order 3, columna 1, fila auto) ocupaba la celda libre
	 * de la fila 1 (290px) y empujaba la marca a la fila 2 con los
	 * iconos: la marca a y=86, el buscador a y=18. Con la fila fija,
	 * marca arriba-izquierda y buscador arriba en su fila.
	 *
	 * El `padding` sí lleva `!important`: el rival es el mismo selector con
	 * `.wp-site-blocks` delante y su propio `!important` (18px de gutters),
	 * y a un `!important` solo lo mueve otro `!important`. */
	.wp-site-blocks .wl-home-header-inner {
		column-gap: 6px;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 6px;
		padding: 8px 14px !important;
	}

	.wl-home-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.wl-home-tools {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* La marca es un png cuadrado (logo-romantica-100x100.png): se deja en
	 * 56px con su proporción, sin deformar. Antes iba en 40px dentro de una
	 * caja de 44px y se veía pequeña al lado de los iconos de 44. */
	.wl-home-logo,
	.wl-home-logo .custom-logo {
		height: 56px;
		justify-content: center;
		width: 56px;
	}

	.wl-home-logo img {
		height: 56px;
		width: 56px;
	}

	.wl-home-logo {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.wl-home-nav {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		order: 2;
		width: var(--wl-tap);
	}

	/* Los tres controles de la derecha: 44px de caja, icono de 22px dentro.
	 * La lupa del buscador entra por el selector de cuatro clases de más
	 * abajo (el que le da también su posición en la fila del campo). */
	.wl-site-header .wp-block-navigation__responsive-container-open,
	.wl-home-nav,
	.wl-site-header .wc-block-customer-account__link,
	.wl-site-header .wc-block-customer-account__toggle,
	.wl-home-tools .wp-element-button {
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* Estas dos vienen con `height/width: 30px !important` en el tema
	 * (línea del mini-carrito), así que hay que igualar el peso. */
	.wl-home-account,
	.wl-home-cart {
		flex: 0 0 var(--wl-tap);
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* Este sí lo necesita: el tema fija el botón del carrito en 30px con su
	 * propio `!important`, así que sin este el icono se queda en 30 mientras
	 * sus vecinos suben a 44. */
	.wl-home-cart .wc-block-mini-cart__button {
		height: var(--wl-tap) !important;
		width: var(--wl-tap) !important;
	}

	.wl-home-tools {
		align-items: center;
		gap: 6px;
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		justify-self: stretch;
		order: 3;
	}

	/* --- Buscador: lupa en vez de franja ------------------------------ */
	/* Abajo de 782px el campo no cabe: a 390 la cabecera medía 110.7px con
	 * el campo en su propia fila y a 768 la franja se comía 514px. Ahora hay
	 * una lupa de 44px que abre el campo en un panel (search-overlay.js mueve
	 * el formulario real, así que las sugerencias siguen funcionando).
	 *
	 * Al irse el campo se va también la segunda fila: la cabecera pasa a una
	 * sola con marca, lupa, cuenta, carrito y menú al borde derecho. */
	/* El campo se esconde y la lupa toma su sitio. La colocación de cada
	 * pieza NO se toca aquí: `.wl-home-tools` es `display: contents !important`
	 * en las dos bandas, así que manda el `grid-column` de cada hijo — y las
	 * bandas de abajo son las que la declaran. */
	.wl-site-header .wl-home-search {
		display: none;
	}

	.wl-search-toggle {
		align-items: center;
		background: transparent;
		border: 0;
		color: var(--wl-ink);
		cursor: pointer;
		display: inline-flex;
		height: var(--wl-tap);
		justify-content: center;
		padding: 0;
		width: var(--wl-tap);
	}

	/* El panel CUELGA del header, no flota en mitad de la pantalla. Por eso el
	 * overlay se mete dentro de `<header class="wp-block-template-part">`, que
	 * es el elemento `position: sticky` de la cabecera: `top: 100%` lo deja
	 * justo debajo del borde inferior del header —a cualquier altura— y se
	 * mueve con él cuando la cabecera se queda pegada al hacer scroll. Así no
	 * hay que medir nada desde JS ni recalcular al redimensionar, y el pelo de
	 * la cabecera (`border-bottom`) hace de costura entre header y panel.
	 *
	 * El bloqueo de scroll va en la clase que el JS alterna en `<html>`:
	 * `search-overlay.js` la pone al abrir y la quita al cerrar, y aquí se
	 * le da el único uso que le faltaba. La misma clase que abre el overlay
	 * es la que para la página; no hay dos interruptores que puedan
	 * desincronizarse.
	 *
	 * La forma es `overflow: hidden` en `<html>` y no `position: fixed` en
	 * `<body>`: la fija del body pone el scroll a 0 y hay que devolverlo a
	 * mano al cerrar (medido: 400 -> 0 -> 400, y durante el meantime la
	 * cabecera sticky se despega). Con `overflow: hidden` la posición se
	 * conserva sola —medido: 400 antes, 400 con el bloqueo puesto, 400 al
	 * quitarlo— y el `position: sticky` del header sigue resolviéndose
	 * contra el viewport, que es lo que hace falta para que el panel siga
	 * colgando de su borde inferior.
	 *
	 * `overscroll-behavior: contain` en el body es para el arrastre que
	 * empieza dentro del overlay y se sale: sin él, el gesto se encadena al
	 * documento aunque el documento no pueda desplazarse. */
	html.wl-search-open {
		overflow: hidden;
	}

	/* Y para que al bloquear la página no se mueva ni un pixel: `overflow:
	 * hidden` quita la barra de scroll, y al quitarla el contenido se ensancha
	 * lo que mide la barra (~15px) y toda la cabecera se va a la derecha — se
	 * nota al abrir la lupa y parece que la interfaz da un tirón. Lo mismo
	 * pasa con el panel del menú, que también para la página con
	 * `html.has-modal-open { overflow: hidden }`.
	 *
	 * `scrollbar-gutter: stable` reserva ese hueco SIEMPRE, también con el
	 * panel cerrado, así que abrir y cerrar no cambia el ancho de nada. Es la
	 * solución del propio navegador para esto; la alternativa —restaurar el
	 * ancho con un `padding-right` en JS— es la misma idea a mano y además
	 * depende de acertar cuánto mide la barra en cada sistema.
	 *
	 * Va aquí, dentro de la capa táctil, a propósito y no por descuido: la
	 * lupa y el menú son lo único que para la página, y por encima de 782px
	 * la cabecera tiene el campo de búsqueda abierto y no hay nada que
	 * bloquear. Por encima de 782px esta regla no existe (medido: `auto` a
	 * 782 y `stable` a 781), así que el escritorio queda exactamente como
	 * estaba y no se le estrecha el contenido 15px por reserving un hueco
	 * que antes no reservaba.
	 *
	 * En los sistemas de barra superpuesta (el macOS por defecto) no cambia
	 * nada: ahí la barra no ocupa ancho y no había salto. */
	html {
		scrollbar-gutter: stable;
	}

	html.wl-search-open body {
		overscroll-behavior: contain;
	}

	.wl-search-overlay {
		left: 0;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 20;
	}

	.wl-search-overlay[hidden] {
		display: none;
	}

	/* Se cierra al pulsar fuera. Arranca en el borde del panel —el mismo
	 * `top: 100%`— para no interceptar toques sobre la cabecera, y baja un
	 * viewport. El panel va después en el DOM, así que el dedo cae siempre en
	 * el panel.
	 *
	 * El fondo sí se ve, y hace falta: con el scroll bloqueado, la trampa de
	 * foco y `aria-modal="true"`, esto ya es un modal y un modal sin fondo
	 * detrás no se lee como tal. Antes era `transparent` con el argumento de
	 * que "un desplegable no es un modal"; al dejar de serlo, el argumento
	 * dejó de valer y el fondo tenía que existir. Arranca en transparente y
	 * se oscurece con la misma transición del panel (0.26s), para que no
	 * aparezca de golpe. Arriba queda la cabecera sin tocar: el fondo empieza
	 * en `top: 100%`, o sea justo debajo de su borde inferior. */
	.wl-search-overlay__backdrop {
		background: rgba(17, 17, 17, 0);
		border: 0;
		height: 100vh;
		left: 0;
		padding: 0;
		position: absolute;
		right: 0;
		top: 100%;
		transition: background-color 0.26s ease;
	}

	.wl-search-overlay.is-open .wl-search-overlay__backdrop {
		background: rgba(17, 17, 17, 0.38);
	}

	/* `prefers-reduced-motion` quita la transición también aquí: con ella el
	 * fondo se teletransporta al estado final, que es lo que se quiere. */
	@media (prefers-reduced-motion: reduce) {
		.wl-search-overlay__backdrop {
			transition: none;
		}
	}

	.wl-search-overlay__panel {
		align-items: center;
		background: #ffffff;
		box-shadow: 0 16px 28px rgba(17, 17, 17, 0.13);
		display: flex;
		gap: 8px;
		padding: 12px 14px;
		position: relative;
		/* Se abre como una persiana que baja del header: `inset(... 100% 0)`
		 * recorta el panel justo por su borde inferior y se suelta a 0. Con un
		 * `transform` a secas el panel se vería por encima del logo mientras
		 * sube, porque el header no recorta a sus hijos. */
		clip-path: inset(0 0 100% 0);
		transform: translateY(-6px);
		transition: clip-path 0.26s ease, transform 0.26s ease;
	}

	/* Los dos `inset` llevan los mismos cuatro valores a propósito: `inset(0)`
	 * tiene un solo argumento y contra un `inset()` de cuatro no se interpola
	 * (salta de golpe), que es justo lo que se quería evitar. */
	.wl-search-overlay.is-open .wl-search-overlay__panel {
		clip-path: inset(0 0 0 0);
		transform: translateY(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.wl-search-overlay__panel {
			clip-path: inset(0 0 0 0);
			transform: none;
			transition: none;
		}
	}

	.wl-search-overlay__slot {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* El desplegable de sugerencias se posiciona contra el formulario. */
	.wl-search-overlay__slot form.wl-home-search {
		position: relative;
		width: 100%;
	}

	.wl-search-overlay__close {
		align-items: center;
		background: transparent;
		border: 0;
		color: var(--wl-ink);
		cursor: pointer;
		display: inline-flex;
		flex: 0 0 var(--wl-tap);
		height: var(--wl-tap);
		justify-content: center;
		padding: 0;
		width: var(--wl-tap);
	}

	/* Dentro del panel no hace falta el botón de buscar del bloque de búsqueda.
	 * La fila se quedaba así: [campo] [lupa 44x44] [X 44x44], dos botones de
	 * icono pegados y del mismo tamaño, y no hay forma de saber de un vistazo
	 * cuál cierra y cuál envía. Aquí ya se busca escribiendo y con Intro, así
	 * que la lupa es un tercer botón que sólo aporta duda. La de la cabecera,
	 * fuera del panel, se queda: esa sí es la que abre esto.
	 *
	 * El `!important` no es por pereza: las reglas del buscador del tema padre
	 * llegan a cinco clases (`.wl-home-search.wp-block-search.wp-block-search__button-inside
	 * .wp-block-search__inside-wrapper .wp-block-search__button`) y ganan a
	 * cualquier selector normal, por muy largo que sea. */
	.wl-search-overlay .wl-home-search .wp-block-search__inside-wrapper .wp-block-search__button,
	.wl-search-overlay .wl-home-search .wp-block-search__button {
		display: none !important;
	}

	/* El buscador no encoge: min-width:0 en un item de grid es lo que deja
	 * que el track lo aplane al mínimo (min-content); con 0, "290px". El
	 * ancho lo fija la fila, no una cifra fija. El gap también se corrige
	 * aquí: el row-gap de 24px de la regla base dejaba un hueco que
	 * empujaba la fila 2 (el campo) hacia abajo dentro de la cabecera. */
	.wp-site-blocks .wl-home-header-inner {
		row-gap: 6px;
	}

	/* El campo, de verdad: sin `clip`, con borde y 16px de letra (16px evita
	 * que iOS haga zoom al enfocar). Los selectores largos son los del propio
	 * tema, que es como ganan ellos. */
	.wl-home-search {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}

	.wl-home-search,
	.wl-home-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
		height: var(--wl-tap);
		min-height: var(--wl-tap);
	}

	/* El fondo blanco y el borde gris los pone el tema con su propio
	 * `!important` y exactamente estos valores, así que repetirlos aquí solo
	 * añadiría dos `!important` sin cambiar un píxel. Lo que sí hay que
	 * declarar es el `padding`, que el tema fija a `0 12px 0 10px` —distinto
	 * al nuestro porque aquí la lupa va dentro del campo—. */
	.wl-home-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
		border-radius: 8px;
		padding: 0 2px 0 12px !important;
	}

	/* La altura del input necesita un selector de cuatro clases, no dos. El
	 * rival es del tema padre y va por la escalera larga —
	 * `.wp-block-search.wp-block-search__button-inside
	 * .wp-block-search__inside-wrapper .wp-block-search__input { height: 55px }`
	 * (0,4,0)— y con el selector corto este bloque pierde y el campo se sale
	 * 11px por arriba y por abajo de su caja. Subir a cuatro clases y ganar
	 * por posición evita el `!important`.
	 *
	 * La altura es el suelo táctil, no una cifra inventada: estaba en 42px y
	 * el campo era, por tanto, el único control del bloque por debajo de los
	 * 44px que este mismo bloque declara — medido a 320/390/781: 132x42,
	 * 202x42 y 593x42—. El bloque se contradecía a sí mismo en el control
	 * del que más se habla (regla de fondo n.º 4).
	 *
	 * El `padding-left` sí lo necesita: el rival de ese es
	 * `padding: 0 0 0 12px !important`, y un `!important` solo lo mueve otro
	 * `!important`.
	 *
	 * Las dos primeras clases son las que lleva el propio `<form>` de la
	 * cabecera, que es donde se juntan (`wl-home-search` y
	 * `wp-block-search__button-inside`), así que van compounded en el mismo
	 * selector. Ojo: el form NO lleva `.wp-block-search`, así que empezar por
	 * esa clase no encuentra nada — comprobado: el input se quedaba clipado
	 * y a 55px, o sea invisible, en la portada. */
	.wl-home-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
		clip: auto;
		clip-path: none;
		font-size: 16px;
		height: var(--wl-tap);
		min-height: 0;
		padding-left: 0 !important;
		position: static;
		width: 100%;
	}

	/* El botón de lupa hereda un selector de cuatro clases del tema padre;
	 * se reproduce para darle los 44px y su sitio en la fila del campo.
	 * Este es el ÚNICO lugar que fija su caja en móvil. */
	.wl-site-header .wp-block-search__button,
	.wl-home-search .wp-block-search__inside-wrapper .wp-block-search__button,
	.wl-home-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
		flex: 0 0 var(--wl-tap);
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* --- 2. Catálogo: filtros alcanzables y tarjetas con dedos -------- */
	/* Los dos controles de la barra de vista. Antes el de filtros ocupaba
	 * toda la anchura —era la acción principal de la pantalla y tenía que
	 * caer donde cae el pulgar—, pero ahora comparte fila con el de orden, y
	 * una fila con dos botones a todo el ancho empuja la rejilla hacia abajo
	 * sin ganar nada: el suelo de 44px los hace pulsables igual de pie. */
	.wl-catalog .wl-view-btn,
	.wl-catalog .wl-sheet__close {
		min-height: var(--wl-tap);
	}

	.wl-catalog .wl-view-btn {
		font-size: 15px;
	}

	.wl-catalog .wl-shop-filters a,
	.wl-catalog .wl-filter-check {
		min-height: var(--wl-tap);
	}

	/* El precio tachado caía a 9,6px (0,74em de 13px). En el dedo no se lee:
	 * 12px es el suelo del texto en móvil. */
	.wl-featured-price del,
	.wl-pdp-price del,
	.wl-catalog del,
	.wl-product-grid del,
	.wl-pdp del,
	.wl-search del {
		font-size: var(--wl-min-texto);
	}

	.wl-featured-price {
		font-size: 14px;
	}

	/* El botón de carrito de la tarjeta pasa a 44px. En el catálogo y en la
	 * rejilla el tema lo deja en 30px con dos selectores propios. */
	.wl-catalog .wl-card-cart,
	.wl-product-grid .wl-card-cart,
	.wl-card-cart {
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* Los títulos de las tarjetas: una o dos líneas, pero nunca una franja
	 * de 18px. El `min-height` va en el `<a>` —que es el enlace real— y no
	 * en el `h2`, que solo lo envuelve: puesto en el `h2` el título medía 44
	 * y el dedo seguía teniendo 18 encima.
	 *
	 * El interlineado es la parte que hace que las dos cosas cuadren a la vez.
	 * El recorte de dos líneas con puntos suspensivos vale exactamente dos
	 * líneas de alto, y el suelo táctil son 44px: con 18px de interlineado
	 * el recorte medía 36 y el `min-height` estiraba la caja a 44, así que la
	 * tercera línea asomaba medio cortada por debajo («I Know Why the /
	 * Caged Bird… / Sing» cortado en dos). Con 22px de interlineado, dos
	 * líneas SON los 44px del suelo: el título es siempre el mismo alto, el
	 * `…` cae donde toca y el dedo tiene sus 44. Medido a 390px. */
	.wl-featured-card h3,
	.wl-featured-card .wp-block-post-title,
	.wl-featured-card .wc-block-product-title {
		line-height: 22px;
		min-height: var(--wl-tap);
	}

	.wl-featured-card .wp-block-post-title > a,
	.wl-featured-card .wc-block-product-title > a,
	.wl-featured-card h3 > a {
		display: block;
		min-height: var(--wl-tap);
	}

	/* --- 3. Portada ---------------------------------------------------- */
	.wl-hero-arrow {
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* El punto del carrusel mide 7px. Se mantiene el punto tal cual —es lo
	 * que da el ritmo— y lo que crece es la caja que lo pulsa: `padding` con
	 * `box-sizing: content-box` + `background-clip: content-box` deja el
	 * dibujo en su sitio y amplía el área táctil sin tocar ni el color ni la
	 * animación de progreso del `::before`, que se recoloca con el mismo
	 * relleno.
	 *
	 * El relleno vertical son 18,5px a cada lado, no 11: con 11 la caja
	 * medía 29px de alto y se quedaba a menos de 44 (medido). Ahora mide 44.
	 *
	 * El horizontal NO sube a los 18,5px que los 44px de ancho exigirían, y el
	 * motivo es el sitio, no el dedo. La fila de puntos vive dentro del chip
	 * de controles, que mide 177px y del que sólo hay 199px hasta el borde
	 * del héroe: con la fila a 44px por punto, tres puntos la llevarían a
	 * 248px y el chip desbordaría a 390px. A 9px la caja activa mide 44x44 y la
	 * inactiva 25x44 —esta última por encima del mínimo de 24px de WCAG 2.2
	 * (2.5.8, AA)—, la fila crece 8px (61 → 69) y el chip sigue dentro. Las
	 * cajas apenas se tocan: entre centros hay 30,5px. */
	.wl-hero-dots {
		gap: 0;
	}

	.wl-hero-dot,
	.wl-hero-dot.is-active {
		background-clip: content-box;
		box-sizing: content-box;
		overflow: hidden;
		padding: 18.5px 9px;
	}

	.wl-hero-dot.is-active::before {
		height: 7px;
		inset: 18.5px 9px auto 9px;
	}

	/* "Ver todos →" y compañía: enlaces sueltos de una línea, con altura de
	 * fila para que el dedo no tenga que acertar el texto. */
	.wl-heading-link,
	.wl-events-all,
	.wl-rel-more,
	.wl-index-title a,
	.wl-search-other a {
		align-items: center;
		display: inline-flex;
		min-height: var(--wl-tap);
	}

	/* El título de cada evento es un enlace, y su caja es el texto y nada más
	 * (`display: inline`, sin relleno). Con un nombre largo eso pasaba de 44px
	 * de ancho por casualidad; con los títulos de ejemplo —"Evento 1"—
	 * se quedó en 79x28, por debajo del suelo táctil. Se le da altura de fila
	 * como los enlaces de arriba; el texto no se mueve de sitio porque va
	 * centrado en la caja, y el título es una línea, así que no hay recorte. */
	.wl-event-title a {
		align-items: center;
		display: inline-flex;
		min-height: var(--wl-tap);
	}

	/* Las etiquetas pequeñas se leen: 10,5px no es un tamaño de texto, y a
	 * 12px el selector tiene que llevar la ruta entera porque el de la
	 * cabecera gana por peso. */
	.wl-event-card .wl-event-month,
	.wl-home-events .wl-event-month,
	.wl-event-month {
		font-size: var(--wl-min-texto);
	}

	.wl-badge {
		font-size: var(--wl-min-texto);
		letter-spacing: 0.02em;
	}

	/* Numeración de páginas: botones, no texto. Los selectores llevan la
	 * ruta del bloque porque el tema los define así (0,2,0) y gana. */
	.wl-catalog-pagination .wl-page-num,
	.wl-catalog-pagination .wl-page-nav {
		min-height: var(--wl-tap);
		min-width: var(--wl-tap);
	}

	/* Las flechas del carrusel de "Libros relacionados". */
	.wl-rel-arrow {
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* --- 4. Ficha de producto ----------------------------------------- */
	/* La ficha se deja como estaba. Aquí hubo una fila de compra pegada al
	 * borde (`position: sticky; bottom: 0` sobre `.wl-pdp-buy`) que no
	 * servía para nada: su contenedor, `.wl-pdp-info-col`, mide 427px y la
	 * fila está en su base, así que se «pegaba» durante 66px de recorrido y
	 * se soltaba. Medido a 390px, su `top` iba 772 → 538 → 238 → −62 al bajar
	 * 0/300/600/900. No se pidió, no funcionaba y su comentario afirmaba lo
	 * contrario, así que se ha quitado entero, incluidos los 52px que solo
	 * existían para sostenerla. Lo que queda aquí sí sirve: el autor y el
	 * «leer más» con los 44px del resto. */
	.wl-pdp-author a {
		/* `content-box` (el valor por defecto) hacía que el `min-height` de 44px
		 * se sumara al `padding`: la caja medía 64px, no 44, y el `<p>` del autor
		 * heredaba esos 64 — con 23.2px de línea dejaban ~31px de aire muerto
		 * entre el nombre y el precio. `border-box` hace que los 44px sean los
		 * 44px: mismo dedo, 20px menos de hueco. */
		box-sizing: border-box;
		display: inline-block;
		min-height: var(--wl-tap);
		padding: 10px 0;
	}

	/* El `Por` es texto, no un control: se queda en la línea y no estira la
	 * caja del autor, que es la que empuja el precio hacia abajo. Con `center`
	 * se alinea con el centro del enlace: sin él el texto suelto se iba al
	 * borde de arriba de la línea de 44px y quedaba 10.5px por encima del
	 * nombre. */
	.wl-pdp-author {
		align-items: center;
		display: flex;
		/* El `Por` es un ítem flex anónimo y su espacio final no cuenta:
		 * sin este `gap` se quedaba pegado al nombre. */
		gap: 4px;
	}

	.wl-pdp .wl-pdp-desc-toggle {
		min-height: var(--wl-tap);
	}

	/* --- 5. Carrito y pago ---------------------------------------------- */
	/* "Código de descuento" era una línea de 20px: con 48px se pulsa. */
	.wc-block-cart .wc-block-components-panel__button,
	.wc-block-checkout .wc-block-components-panel__button {
		min-height: var(--wl-tap-alto);
	}

	/* El nombre del libro y el selector de cantidad: el − y el + medían
	 * 30px y la crucita de eliminar 24px. Aquí el `!important` no es
	 * capricho: el tema fija el selector en 30px y la crucita con
	 * selectores de tres clases, y hay que igualarlos para ganar. */
	.wc-block-cart .wc-block-components-product-name {
		min-height: var(--wl-tap);
	}

	.wc-block-cart .wc-block-components-quantity-selector {
		gap: 2px;
		height: var(--wl-tap-alto);
		width: auto;
	}

	/* Estos tres también los necesita: el tema fija el selector de cantidad
	 * en 30×30 con `!important` y la caja en 14,5px con el suyo, así que
	 * sin ayuda externa el `−` y el `+` se quedan en 30 mientras sus
	 * vecinos de la tarjeta suben a 44. */
	.wc-block-cart .wc-block-components-quantity-selector__button,
	.wc-block-cart .wc-block-components-quantity-selector__input {
		font-size: 16px !important;
		height: var(--wl-tap) !important;
		min-width: var(--wl-tap);
		width: var(--wl-tap) !important;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
	.wc-block-cart .wc-block-cart-item__remove-link {
		align-items: center;
		display: inline-flex;
		height: var(--wl-tap);
		justify-content: center;
		width: var(--wl-tap);
	}

	.wc-block-cart .wc-block-components-totals-shipping__via,
	.wc-block-checkout .wc-block-components-totals-shipping__via {
		font-size: var(--wl-min-texto);
	}

	/* Las etiquetas flotantes del checkout. El tema las baja a 11,5px con
	 * `!important` cuando el campo está activo; en un teléfono eso no se
	 * lee. 12,5px sigue siendo una etiqueta y ya se distingue del valor. */
	.wc-block-checkout .wc-block-components-text-input.is-active label,
	.wc-block-checkout .wc-block-components-text-input:focus-within label,
	.wc-block-checkout .wc-blocks-components-select__label {
		font-size: 12.5px !important;
	}

	/* Casillas y opciones de pago: la casilla.square es de 20px, pero lo
	 * que se pulsa es la fila completa, así que se le da altura de dedo. */
	.wc-block-checkout .wc-block-components-checkbox label,
	.wc-block-checkout .wc-block-components-address-form__address_2-toggle,
	.wc-block-checkout .wc-block-components-address-card__edit {
		align-items: center;
		display: flex;
		min-height: var(--wl-tap);
	}

	.wc-block-checkout .wc-block-components-radio-control__option-layout {
		min-height: 52px;
	}

	/* El enlace dentro de la casilla de términos («Política de privacidad»)
	 * es texto en línea: se le da alto de renglón para que se pulse. */
	.wc-block-checkout .wc-block-components-checkbox__label a {
		display: inline-block;
		min-height: 24px;
		padding: 3px 0;
	}

	/* Aviso de pago: 11,5px es tamaño de nota al pie, no de interfaz. */
	.wl-stripe-secure {
		font-size: var(--wl-min-texto);
	}

	/* La barra de pago del carrito ya es fija; se le da aire y se separa del
	 * borde para que no parezca un recorte de la pantalla. */
	.wc-block-cart .wc-block-cart__submit-container--sticky {
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.wc-block-cart .wc-block-cart__submit-container--sticky .wc-block-components-button {
		min-height: 52px;
	}

	/* --- 6. Cuenta ------------------------------------------------------ */
	/* El `padding` de las pestañas lleva `!important` porque hay dos reglas
	 * del tema con el suyo: la global (`padding: 6px 2px 12px !important`)
	 * y la de ≤900px (`padding: 8px 16px !important`). A un `!important`
	 * solo lo mueve otro `!important`, y sin esto las pestañas se quedan
	 * con 8px de alto en lugar de los 44 que necesitan. */
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		min-height: 46px;
		padding-bottom: 12px !important;
		padding-top: 12px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-number a,
	.woocommerce-account .woocommerce-MyAccount-content .edit {
		align-items: center;
		display: inline-flex;
		min-height: var(--wl-tap);
	}

	/* El botón «Ver» de cada pedido eran 23x22px. La regla de arriba lo
	 * deja a `min-height: 0 !important` para que en el escritorio case con
	 * el resto de botones de la tabla; aquí hay que igualarla también. */
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table .woocommerce-button {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: var(--wl-tap) !important;
		padding-bottom: 10px !important;
		padding-top: 10px !important;
	}

	.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
		min-width: 72px;
	}

	/* Botones sueltos de la cuenta («Confirmar dirección de envío»…). */
	.woocommerce-account .woocommerce-MyAccount-content a.button,
	.woocommerce-account .woocommerce-MyAccount-content button.button {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: var(--wl-tap);
	}

	.wl-notice-close {
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* El botón del ojo («mostrar contraseña») del formulario de acceso es el
	 * último control del sitio por debajo del suelo: 32x32, con `!important`
	 * en la regla de escritorio (L9232-9257). En móvil sube a 44x44 y el
	 * campo adelanta su `padding-right` de 44 a 56px para que el ojo, ahora
	 * más ancho, no se monte sobre lo que se está escribiendo. Sin este
	 * `!important` no lo mueve ni el orden de las reglas, porque el suyo
	 * también lo lleva.
	 *
	 * La casilla «Recordarme» NO se toca: mide 16x16, pero está dentro de un
	 * `<label>` de 313x27, así que el objetivo real es el texto y ya pasa el
	 * mínimo de WCAG 2.2 (2.5.8, AA). */
	.woocommerce-account .password-input .input-text {
		padding-right: 56px;
	}

	.woocommerce-account .password-input .show-password-input {
		height: var(--wl-tap) !important;
		right: 4px !important;
		width: var(--wl-tap) !important;
	}

	/* --- 7. Pie: enlaces con altura de fila ------------------------------ */
	.wl-footer__nav .wp-block-navigation-item__content,
	.wl-footer__contact a,
	.wp-site-blocks .wl-footer__totop a,
	.wl-footer__col--brand .wp-block-site-title a {
		align-items: center;
		display: inline-flex;
		min-height: var(--wl-tap);
	}

	.wl-footer__social .wp-social-link a {
		height: var(--wl-tap);
		width: var(--wl-tap);
	}
}

/* La cabecera deja de ser siempre igual. Antes ocupaba 111px en CUALQUIER
 * anchura entre 320 y 781, con la fila de arriba reducida a marca, hueco y
 * hamburguesa: 274px de vacío a 390px y 665px a 781px, y el buscador
 * peleándose el ancho con dos iconos. Ahora hay dos formas de cabecera y se
 * elige por el ancho que hay, no por costumbre.
 *
 * El corte está en 520px, medido: es la primera anchura en la que la fila
 * única deja un campo de 228px, que ya es un sitio donde escribir de verdad
 * (a 480 eran 188px, y a 479 el campo de la banda ancha llega a 391px — un
 * salto de 200px de golpe, que es justo lo que hace que un cambio de
 * maquetación se note). Por debajo de 520 el buscador baja a su propia fila
 * y lo tiene entero: 232px a 320 y 431px a 519.
 *
 * En las dos bandas `.wl-home-tools` se pone a `display: contents`: con él,
 * el buscador, la cuenta y el carrito pasan a ser hijos de la rejilla de la
 * cabecera y se pueden colocar donde toque. Sin eso los tres vienen
 * empaquetados en una caja y no hay manera de separar el buscador de los dos
 * iconos que lo rodeaban. */
@media (max-width: 519px) {

	/* El `!important` sí es necesario aquí: el tema declara
	 * `.wl-home-tools { display: flex !important }` (L3123) para que el grupo
	 * de la derecha sea una fila, y a un `!important` solo lo mueve otro
	 * `!important`. Sin esto el buscador, la cuenta y el carrito se quedan
	 * encerrados en su caja y la cabecera no puede separarlos. */
	.wl-home-tools {
		display: contents !important;
	}

	/* Marca a la izquierda y las cuatro acciones a la derecha. Caben de
	 * sobra: 14 de margen + 44 de marca + 4×44 de acciones + 4 huecos de 6
	 * = 284 de 320. Antes eran tres acciones y el buscador en su propia fila
	 * (la cabecera medía 110.7px a 390); ahora la lupa ocupa su lugar y la
	 * cabecera vuelve a una sola fila. */
	.wp-site-blocks .wl-home-header-inner {
		grid-template-columns: minmax(0, 1fr) repeat(4, var(--wl-tap));
		grid-template-rows: minmax(0, 1fr);
	}

	.wl-home-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.wl-search-toggle {
		grid-column: 2;
		grid-row: 1;
	}

	.wl-home-cart {
		grid-column: 3;
		grid-row: 1;
	}

	.wl-home-account {
		grid-column: 4;
		grid-row: 1;
	}

	.wl-home-nav {
		grid-column: 5;
		grid-row: 1;
	}
}

@media (min-width: 520px) and (max-width: 781px) {

	/* Mismo `!important` y por el mismo motivo que en la banda estrecha: sin
	 * esto los tres hijos del grupo no salen de su caja.
	 *
	 * Y aquí NO se toca el `display` de la cabecera: el tema lo fija en
	 * `grid !important` (L3080) y cambiarlo a flex obligaría a otro
	 * `!important` para pelear por algo que la rejilla ya resuelve. Se
	 * declara la rejilla de una fila y se coloca cada pieza en su columna. */
	.wl-home-tools {
		display: contents !important;
	}

	/* Una sola fila: marca, hueco y las cuatro acciones. El hueco del medio
	 * se queda vacío a propósito — es lo que empuja los iconos al borde
	 * derecho. Antes lo ocupaba el campo (a 768 la franja se comía 514px);
	 * ahora la lupa se queda pegada al resto de acciones. */
	.wp-site-blocks .wl-home-header-inner {
		grid-template-columns: auto minmax(0, 1fr) repeat(4, var(--wl-tap));
		grid-template-rows: minmax(0, 1fr);
	}

	.wl-home-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.wl-home-search {
		grid-column: 2;
		grid-row: 1;
	}

	/* Columna 2: el hueco. La lupa entra en la 3, con las demás acciones. */
	.wl-search-toggle {
		grid-column: 3;
		grid-row: 1;
	}

	/* A la derecha, en orden de lectura con el dedo. */
	.wl-home-account {
		grid-column: 4;
		grid-row: 1;
	}

	.wl-home-cart {
		grid-column: 5;
		grid-row: 1;
	}

	.wl-home-nav {
		grid-column: 6;
		grid-row: 1;
	}

	/* Con una fila hay altura de sobra y la marca deja de encogerse: pasa de
	 * 44 a 48 de caja. Sigue por debajo de los 60px del escritorio, que es
	 * lo que se ve bien, pero ya no es más pequeña en el móvil que en la
	 * mesa — que era lo raro de antes. El png es cuadrado, así que la
	 * proporción se mantiene sola. */
	/* La banda ancha de móvil (≤781) ya fija la marca en 56px; aquí solo
	 * hace falta reaffirmarlo porque más abajo hay reglas antiguas de
	 * 48px que, por orden de cascada, se crecieron. */
	.wl-home-logo,
	.wl-home-logo .custom-logo,
	.wl-home-logo img {
		height: 56px;
		width: 56px;
	}
}

/* Un móvil en horizontal se quedaba con la cabecera de escritorio. Todas las
 * bandas de arriba son solo por anchura, así que a 844×390 (un iPhone en
 * horizontal) salía la de escritorio: 94px en una ventana de 390, el 24% de la
 * pantalla, con el buscador plegado a 166×55 con letra de 15px —medido—,
 * mientras el mismo móvil en vertical, a 390 de ancho, tiene una cabecera de
 * 65px con el campo a 448×44 y letra de 16px. El móvil no puede tener dos
 * cabeceras según cómo lo sujetes.
 *
 * El corte es por ALTO y no solo por ancho, y en 500px: los móviles en
 * horizontal miden entre 375 y 440 de alto, mientras que una tableta girada
 * (iPad mini: 744) o cualquier ventana de escritorio de tamaño normal quedan
 * muy por encima —comprobado: 1180×820, que es una tableta en horizontal, sigue
 * con la cabecera de escritorio y le queda bien—. Con la condición de ancho
 * añadida, ningún escritorio entra: 1001px y 1280px no matchean ni de lejos.
 *
 * Y el alto solo, por sí solo, no basta: un móvil VERTICAL con el teclado
 * abierto se parece a uno girado en que le quedan pocas centenas de píxeles de
 * alto. Sin el suelo de ancho de abajo, a 390×430 se cumplía igual y pasaba
 * algo que no puede pasar: el campo de la cabecera se quedaba a 98px de ancho
 * —inservible— y la lupa se escondía, dejando el móvil vertical sin buscar
 * —medido—. El suelo en 600px es el hueco real entre las dos cosas: un móvil
 * girado mide 667 o más (667×390 deja el campo a 375px, 740×390 a 448px) y
 * ninguno vertical llega.
 *
 * Aquí la navegación se queda visible —los tres enlaces, que es lo que
 * aprovecha una ventana ancha— y lo que baja es la altura: 94px → 64px, el
 * 16% de la pantalla en vez del 24%. El buscador, en cambio, sí se abre: hay
 * sitio de sobra (a 844 le quedan 474px de columna) y una caja de 166px con
 * letra de 15px no es un campo de búsqueda en un dispositivo táctil. */
@media (min-width: 600px) and (max-width: 1000px) and (max-height: 500px) {

	/* El campo vuelve a la cabecera, y a estos anchos el campo visible es lo
	 * que se pidió: en horizontal hay sitio de sobra para él y un overlay
	 * encima obligaba a tocar dos veces para buscar.
	 *
	 * La banda `(max-width: 781px)` de arriba esconde el campo con
	 * `.wl-site-header .wl-home-search { display: none }` (L10133), y como
	 * esta banda también se cumple por debajo de 782px —un móvil de 740×390
	 * cumple las dos— ese `display: none` se llevaba el resultado: la banda
	 * de alto solo llegaba a aplicar por encima de 782px, justo donde el
	 * campo ya se veía de todos modos.
	 *
	 * Esto también arregla lo que hacía el teclado virtual: al bajar de 500px
	 * de alto con el overlay abierto, un móvil vertical ya no coincide con
	 * esta banda, así que la lupa sigue en su sitio y `search-overlay.js` —que
	 * pregunta al CSS en vez de repetir el corte— deja el panel abierto en
	 * lugar de cerrarlo solo —medido: antes se cerraba al cruzar los 500—.
	 *
	 * El arreglo es de selector, no de orden. Aquí va el mismo selector
	 * exacto que el de L10133 (`.wl-site-header .wl-home-search`, dos
	 * clases) y esta banda va después en el fichero, así que gana por
	 * posición sin `!important`: misma especificidad, gana la última. El
	 * `.wl-site-header` delante no es opcional: sin él el selector sería de
	 * una clase y perdería contra el rival.
	 *
	 * Y con el campo visible, la lupa sobra: se escondería el campo que el
	 * usuario acaba de pedir. `display: none` también, por la misma razón de
	 * arriba —misma especificidad, esta banda después—. */
	.wl-site-header .wl-home-search {
		display: block;
	}

	.wl-site-header .wl-search-toggle {
		display: none;
	}

	/* El `!important` y el motivo son los de siempre: el tema declara
	 * `.wl-home-tools { display: flex !important }` (L3123) y con el
	 * envoltorio entero el buscador no puede ocupar una columna propia. */
	.wl-home-tools {
		display: contents !important;
	}

	/* Marca, navegación, buscador y las dos acciones, todo en una fila. La
	 * navegación conserva su ancho natural (182px a 844) y el buscador se
	 * lleva el resto. */
	.wp-site-blocks .wl-home-header-inner {
		column-gap: 6px;
		grid-template-columns: auto auto minmax(0, 1fr) var(--wl-tap) var(--wl-tap);
		grid-template-rows: minmax(0, 1fr);
		padding: 8px 14px !important;
	}

	.wl-home-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.wl-home-nav {
		grid-column: 2;
		grid-row: 1;
	}

	.wl-home-search {
		grid-column: 3;
		grid-row: 1;
		/* Sin esto el campo no llena su columna: el escritorio lo deja en
		 * `flex: 0 1 220px` y a 844 mide 220px de los 474 de la columna, con
		 * 250px de hueco a la derecha. `width: auto` lo devuelve al ancho de
		 * la celda, que es lo que se pidió. */
		min-width: 0;
		width: auto;
	}

	.wl-home-account {
		grid-column: 4;
		grid-row: 1;
	}

	.wl-home-cart {
		grid-column: 5;
		grid-row: 1;
	}

	/* La marca baja de 72 a 56: con una ventana de 390 de alto, 72px de marca
	 * son el 18% de la pantalla solo en el logo. Sigue siendo más grande que
	 * los 44px de los iconos. El png es cuadrado, así que la proporción se
	 * mantiene sola. */
	.wl-home-logo,
	.wl-home-logo .custom-logo {
		height: 56px;
		width: 56px;
	}

	.wl-home-logo img {
		height: 56px;
		width: 56px;
	}

	/* Los dos iconos de la derecha y el de la lupa, al suelo táctil. Sin
	 * esto esta banda daría una cabecera compacta con enlaces de 44px pero
	 * con iconos de 30×30, que es la misma contradicción que tenía el campo
	 * de búsqueda a 42px: una capa que declara 44px y no se lo aplica. El
	 * `!important` del botón del carrito es el del tema, que lo fija a 30px
	 * con el suyo. */
	.wl-home-account,
	.wl-home-cart {
		flex: 0 0 var(--wl-tap);
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	.wl-home-cart .wc-block-mini-cart__button {
		height: var(--wl-tap) !important;
		width: var(--wl-tap) !important;
	}

	.wl-site-header .wc-block-customer-account__link,
	.wl-site-header .wc-block-customer-account__toggle {
		height: var(--wl-tap);
		width: var(--wl-tap);
	}

	/* Los enlaces se quedan en los 44px justos. Su caja se va a 52 porque
	 * el tema les pone `padding: 4px 0` (L3117, en la raiz y con su
	 * `!important`) y el alto de contenido ya son 44: 44 + 4 + 4 = 52. La
	 * fila crece con ellos y la cabecera midía 69px en vez de los 64 de este
	 * cálculo. Sin el relleno vertical son 44, que es el suelo táctil, y la
	 * fila queda en 48.
	 *
	 * El `!important` es inevitable: el del rival es también
	 * `!important`, y a un `!important` solo lo mueve otro. Solo aquí: en la
	 * tableta en vertical los 52px sobran y dan contraste con el resto de la
	 * fila, así que no se tocan. */
	.wl-home-nav .wp-block-navigation-item__content {
		padding: 0 !important;
	}

	/* El buscador pasa a ser un campo de verdad: 16px de letra (16px evita
	 * que iOS haga zoom al enfocar) y el suelo táctil de alto. Son las dos
	 * únicas cosas que cambian; el borde, el fondo y el radio ya son los de
	 * escritorio y se dejan. Los selectores largos son los del propio tema,
	 * que es como ganan ellos. */
	.wl-home-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
		font-size: 16px;
		height: var(--wl-tap);
		min-height: 0;
	}

	/* El botón de la lupa. Los tres selectores son los que usa la banda móvil,
	 * y por el mismo motivo: el ancho lo ganaba el de cuatro clases pero el
	 * alto no —medido: 44 de ancho por 30 de alto—, porque el rival del alto
	 * viene con `!important`. Con los tres, la caja queda en 44×44. */
	.wl-site-header .wp-block-search__button,
	.wl-home-search .wp-block-search__inside-wrapper .wp-block-search__button,
	.wl-home-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
		flex: 0 0 var(--wl-tap);
		height: var(--wl-tap) !important;
		width: var(--wl-tap);
	}
}

/* La lista de sugerencias, en el móvil estrecho.
 *
 * Aquí hay una regla vieja que la rompe: `@media (max-width: 480px)` (L2825)
 * pone la lista en `position: fixed` con `top: 64px`. Ese 64 era la altura
 * de la cabecera cuando esta lista se escribió, y ya no es la altura de nada:
 * medido a 320 y 390, el campo ocupa `y 58..102` y la lista `y 64..339`, así
 * que el encabezado de la propia lista queda dibujado encima del input
 * —`elementFromPoint` en el centro del campo devuelve `p.wl-sug-label`—. Es
 * justo el peek que se repite por aquí: clavar la altura de otro elemento en
 * vez de anclarte a él.
 *
 * La arreglo sin tocarla, porque la capa móvil va después y gana sin
 * `!important`: se le devuelve el posicionamiento que ya tiene el resto del
 * sitio, que es anclarse a la caja del propio campo con `top: calc(100% + 8px)`.
 * Cero números de altura, y el resultado es el mismo que ya funcionaba de 481
 * a 781px. La lista pasa a medir lo que mide la fila del campo (292px a
 * 320px, 362px a 390px) en vez de los 296 y 366 que sacaba el `left/right: 12px`
 * de la regla vieja, y a dejar de taparlo. */
@media (max-width: 480px) {

	.wl-sug {
		left: 0;
		position: absolute;
		right: 0;
		top: calc(100% + 8px);
	}
}

/* Lo que necesita tableta tanto como móvil, en su propia banda. Fuera de la
 * de móvil a propósito: si estuviera dentro, para saber que la consulta de
 * tableta hereda de esta habría que saberlo de memoria. */
@media (max-width: 1000px) {

	/* Lo que se pega al borde NO es `.wl-site-header` sino su
	 * `header.wp-block-template-part`. Un `position: sticky` en la cabecera
	 * interior no hace nada: su contenedor mide exactamente lo mismo que
	 * ella, así que el sticky queda encerrado en esa caja y la cabecera se
	 * va de la pantalla con ella — que es justo lo que pasaba antes. El
	 * `header` sí abarca todo el ancho y sí se queda.
	 *
	 * Vive aquí y no en la banda de móvil para que la tableta también lo
	 * tenga. Antes el móvil se pegaba y la tableta no —medido a 900px:
	 * `position: relative` y `y=-900` al bajar—, y eso no es una decisión
	 * que se pueda defender: perder la navegación al hacer scroll duele en
	 * cualquier pantalla que se pueda desplazar.
	 *
	 * El `z-index: 10` deja la cabecera por debajo del menú a pantalla
	 * completa (20) y del cajón de carrito, que deben seguir tapándola. */
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.wl-site-header {
		z-index: 10;
	}

	/* --- El panel de filtros, por dentro ----------------------------- */
	/* Los enlaces del panel ya medían 44px, pero el control de precio se
	 * quedaba fuera de la cuenta: es un `input[type=range]` invisible
	 * (`opacity: 0`) de 20px de alto montado sobre un dibujo de 20px, con
	 * dos puntos de 14 y 16px. Con el panel abierto se medía así, que es la
	 * única forma de verlo —cerrado, `display: none`, no se mide nada—: a
	 * 390px 318x20 y a 900px 828x20, con los mismos puntos de 14 y 16.
	 *
	 * Los dos `input` salen del flujo y se apilan uno encima del otro con
	 * `position: absolute`, igual que ya hacían con el margen negativo, pero
	 * con 44px de alto en vez de 20. La banda se centra en la pista: el
	 * contenedor gana 12px de aire por arriba (`padding-top`), el input va a
	 * `top: 0` y la pista queda en medio de los 44px. Sin ese aire la banda
	 * se saldría 12px sobre el filtro de arriba y le robaría el toque. El
	 * dibujo no cambia de sitio ni de color: sigue siendo la misma pista de
	 * 20px con la misma tinta. */
	.wl-catalog .wl-price {
		padding-top: 12px;
	}

	.wl-catalog .wl-price__input {
		font-size: 16px;
		height: var(--wl-tap);
		left: 0;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	/* Los puntos crecen para que haya algo que apuntar: 14/16px → 22/24px,
	 * con el mismo borde blanco de 2px. Sobresalen 1-2px de la pista, que es
	 * `aria-hidden` y no recorta, y el centro se mantiene sobre la banda. */
	.wl-catalog .wl-price__dot {
		height: 22px;
		top: -1px;
		transform: translateX(-11px);
		width: 22px;
	}

	.wl-catalog .wl-price__dot[data-wl-price-dot="max"] {
		height: 24px;
		top: -2px;
		transform: translateX(-12px);
		width: 24px;
	}

	/* El anillo de foco encendía los dos puntos a la vez —regla base del
	 * tema, `.wl-price:focus-within .wl-price__dot`—, así que con dos bandas
	 * de 44px apiladas no se distinguía cuál de las dos tenía el foco.
	 * Medido a 900px: los dos anillos a la vez.
	 *
	 * Aquí solo se apaga el punto que NO tiene el foco; el que lo tiene lo
	 * enciende la regla base, que ya es exactamente el anillo buscado
	 * (2px de tinta, 2px de separación). Una versión anterior de este bloque
	 * añadía además su propia regla para encenderlo y la otra para apagarlo,
	 * y las dos eran código muerto: se apoyaban en `:focus-visible`, que un
	 * `input[type=range]` no llega a satisfacer con el foco puesto por
	 * código ni por arrastre — medido: `matches(':focus-visible')` da
	 * `false` con el input enfocada—. El `:focus-within` de la base, en
	 * cambio, sí responde, así que esta regla va con `:focus` y no con
	 * `:focus-visible`: es la que se encarga de encender. */
	.wl-catalog .wl-price:has(.wl-price__input[data-wl-price-input="max"]:focus) .wl-price__dot[data-wl-price-dot="min"],
	.wl-catalog .wl-price:has(.wl-price__input[data-wl-price-input="min"]:focus) .wl-price__dot[data-wl-price-dot="max"] {
		outline: none;
	}
}

/* Tableta: los filtros también se pliegan aquí, y el botón merece dedo. */
@media (min-width: 782px) and (max-width: 1000px) {

	/* La banda de tableta hereda la fila de escritorio, y con ella sus
	 * objetivos: los enlaces de la navegación medían 37x25 y 54x25, la mitad
	 * de lo que exige el suelo táctil del bloque. Aquí se estiran a 44 de
	 * alto sin tocarlos de ancho, que es donde está el texto. */
	.wl-home-nav .wp-block-navigation-item__content {
		align-items: center;
		display: flex;
		min-height: var(--wl-tap);
	}

	.wl-catalog .wl-view-btn {
		min-height: var(--wl-tap-alto);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		min-height: 46px;
	}
}

/* Placeholder of the shop toolbar block inside the editor: it is drawn on the
 * server, so the editor shows one quiet line saying what it is. Dashed so it
 * reads as "not the real thing", like every other placeholder in the editor. */
.wl-toolbar-placeholder {
	border: 1px dashed #c3c4c7;
	color: #646970;
	font-size: 13px;
	padding: 10px 12px;
}

/* The front page's computed sections, as the editor shows them. It draws
   nothing of its own: the box only says WHICH sections this block prints, so
   picking it up in the editor does not look like a broken page. Same dashed
   line as the shop toolbar's placeholder, because it is the same idea. */
.wl-home-sections-note {
	border: 1px dashed #c3c4c7;
	color: #646970;
	font-size: 13px;
	padding: 10px 12px;
}