/*
 * Zapatelas: estilos del tema (marco común, UI-01 y UI-02).
 * Solo colores de HANDOFF §3, siempre como variables --wp--preset--color--*.
 * Referencia visual: design/Producto.dc.html (aviso, cabecera y pie).
 */

/* --- Base ------------------------------------------------------------------ */

.zl-aviso a,
.zl-cabecera a,
.zl-pie a {
	text-decoration: none;
}

/* Las bandas del marco van pegadas entre sí (el hueco por defecto entre partes sobraría). El relleno
   lateral de la raíz solo llega a los bloques con diseño restringido (useRootPaddingAwareAlignments),
   por eso cada banda lo declara en su propia regla. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Botones del menú (elementos con submenú): sin el aspecto de botón por defecto. */
.zl-nav button,
.zl-nav .wp-block-navigation-item__content {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* --- Aviso ----------------------------------------------------------------- */

.zl-aviso {
	padding: 10px 16px;
	text-align: center;
}

.zl-aviso p {
	margin: 0;
	font-size: var(--wp--preset--font-size--antetitulo);
	font-weight: 500;
	line-height: 1.5;
}

/* --- Cabecera -------------------------------------------------------------- */

.zl-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px clamp(20px, 5vw, 80px);
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--linen);
}

.zl-logo {
	margin: 0;
}

.zl-logo a {
	display: block;
}

.zl-logo img {
	display: block;
	height: 48px;
	width: auto;
}

/* Menú: 15 px / 500 con 28 px entre elementos. */
.zl-nav {
	flex: 1 1 0;
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	--wp--style--block-gap: 28px;
}

/* El menú 15 real tiene etiquetas más largas que la maqueta («Colecciones especiales») y chevrones:
   entre 901 y 1440 px se aprieta el hueco y el relleno lateral de la cabecera para que quepa en una fila. */
@media (min-width: 901px) and (max-width: 1440px) {
	.zl-cabecera {
		gap: 16px;
		padding-inline: clamp(20px, 2.5vw, 80px);
	}

	.zl-nav {
		--wp--style--block-gap: 16px;
	}
}

.zl-nav a,
.zl-nav button {
	color: var(--wp--preset--color--ink);
}

.zl-nav a:hover,
.zl-nav button:hover,
.zl-nav a:focus-visible {
	color: var(--wp--preset--color--brand);
}

/* Donar (44 px, estilo borde) y Mini-Cart. */
.zl-acciones {
	display: flex;
	align-items: center;
	gap: 16px;
}

.zl-acciones .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 28px;
	line-height: 1;
}

/* Estilo «borde»: se define aquí y no en theme.json porque WordPress emite la variación de theme.json
   como is-style-outline--2 y no se engancha al estilo outline del núcleo. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--ink);
	background-color: transparent;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.zl-acciones .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 4px;
	color: var(--wp--preset--color--ink);
	letter-spacing: normal;
	text-transform: none;
}

.zl-acciones .wc-block-mini-cart__amount {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.zl-acciones .wc-block-mini-cart__icon {
	color: var(--wp--preset--color--ink);
}

/* --- Menú móvil: punto de corte de 900 px (F2-Q09 = a, supuesto A5) --------- */
/* El bloque Navegación pasa a escritorio a 600 px; entre 600 y 900 px se muestra
   el botón de abrir y se oculta el contenedor en línea, como la maqueta. */

@media (min-width: 600px) and (max-width: 900px) {
	.zl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.zl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
}

/* Capa del menú abierto: fondo crema, elementos de 18 px y objetivos de 44 px. */
.wp-block-navigation.zl-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
}

.zl-nav .is-menu-open .wp-block-navigation-item__content,
.zl-nav .is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--lead);
}

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

.zl-pie {
	padding: 72px clamp(20px, 5vw, 80px) 32px;
}

.zl-pie a {
	color: inherit;
}

.zl-pie a:hover {
	text-decoration: underline;
}

.zl-pie > .zl-pie-columnas,
.zl-pie > .zl-pie-inferior {
	max-width: 1360px;
	margin-inline: auto;
}

.zl-pie-columnas {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 48px;
	margin-bottom: 0;
}

.zl-pie-columnas > .wp-block-column {
	min-width: 0;
	flex-basis: auto;
}

.zl-pie-marca,
.zl-pie-tienda,
.zl-pie-sobre,
.zl-pie-puesto {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zl-pie-marca p,
.zl-puesto p {
	margin: 0;
	color: var(--wp--preset--color--foot-muted);
	line-height: 1.7;
}

.zl-pie-titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

.zl-pie-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.zl-puesto {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
}

.zl-puesto a {
	display: inline-block;
	/* Zona táctil de 44 px sin alterar la altura de la fila (HANDOFF §3, desviación 23). */
	margin-block: -12px;
	padding-block: 12px;
	text-decoration: underline;
}

.zl-pie-inferior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--foot-muted);
	font-size: var(--wp--preset--font-size--antetitulo);
}

.zl-pie-inferior p {
	margin: 0;
	font-size: var(--wp--preset--font-size--antetitulo);
}

.zl-legales {
	font-size: var(--wp--preset--font-size--antetitulo);
}

/* Logos de entidades: sobre una pastilla blanca para que el logo positivo
   (Fundación Santander) tenga contraste sobre el pie oscuro. */
.zl-entidades {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.zl-entidad {
	margin: 0;
	padding: 6px 10px;
	background-color: var(--wp--preset--color--white);
	border-radius: 8px;
	line-height: 0;
}

.zl-entidad img {
	display: block;
	height: 40px;
	width: auto;
}

.zl-logo-pie {
	margin: 0;
	align-self: flex-start;
}

.zl-logo-pie img {
	display: block;
	height: 48px;
	width: auto;
}

@media (max-width: 900px) {
	.zl-pie-columnas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Portada: contenido de Elementor ---------------------------------------------- */

/* Bloque «Ven a vernos al Mercado de La Cebada» (sección 3a15305f de la página 4). En móvil el
   degradado es transparente a la derecha y el texto ocupa todo el ancho, así que las líneas se
   solapaban con la foto. El velo pasa a color liso casi opaco (color global ec25634) para que el
   texto repose siempre sobre fondo claro; a más de 767 px no cambia nada. */
@media (max-width: 767px) {
	body .elementor-4 .elementor-element.elementor-element-3a15305f > .elementor-background-overlay {
		background-image: none;
		background-color: var(--e-global-color-ec25634);
		opacity: 0.93;
	}
}

/* --- 404 -------------------------------------------------------------------- */

.zl-404 {
	padding-block: 80px 96px;
}

/* Entradas y archivos (index, single): separación respecto a cabecera y pie. */
.zl-main {
	padding-block: 48px 72px;
}

.zl-404 .wp-block-search {
	margin-block: 24px;
}

/* --- Foco visible (UI-02) --------------------------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Sobre fondos oscuros o rojos el rojo de marca no llega a 3:1; contorno blanco. */
.zl-aviso :focus-visible,
.zl-pie :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* --- Movimiento reducido ---------------------------------------------------- */

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