/* =============================================================================
   Header (patrón em-wine-store/header)
   -----------------------------------------------------------------------------
   Barra de anuncio + header fijo. Desde 1024 px: logo, buscador y acciones en una
   fila, y bajo ellos el menú con paneles. Hasta 1023 px: una fila con el menú en un
   panel lateral. Los colores y medidas salen de theme.json (settings.custom.header).
   Las reglas de Navegación llevan .ws-header .ws-header__nav para ganarle al CSS del
   core, cuyo punto de quiebre es 600 px.
   ============================================================================= */

/* El wrapper de la parte no debe limitar el sticky al alto de la propia parte. */
.wp-block-template-part:has(> .ws-header) {
	display: contents;
}

.ws-announce,
.ws-header {
	--ws-gutter: 32px;
	--ws-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
	--ws-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
	--ws-icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.1a1 1 0 0 1-1 .9H7.2a1 1 0 0 1-1-.9z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
	--ws-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
	--ws-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
	--ws-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

/* ---- Barra de anuncio ----------------------------------------------------- */
.ws-announce {
	border-bottom: 1px solid var(--wp--preset--color--inverse-border);
	font-size: var(--wp--preset--font-size--x-small);
}

.ws-announce__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--ws-gutter));
	height: var(--wp--custom--header--announce-height);
	margin-inline: auto;
	padding-inline: var(--ws-gutter);
}

.ws-announce .ws-announce__inner.ws-announce__inner > * {
	margin-block: 0;
}

.ws-announce strong {
	color: var(--wp--preset--color--inverse-foreground);
	font-weight: 600;
}

.ws-announce .ws-announce__tagline {
	color: var(--wp--preset--color--inverse-foreground);
	font-style: italic;
}

.ws-announce .ws-announce__tagline strong {
	color: var(--wp--preset--color--accent);
	font-style: normal;
	font-weight: 400;
}

/* ---- Header ---------------------------------------------------------------- */
.ws-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--inverse-border);
}

/* El header es fijo, pero el scroll-padding-top del html (para anclas) lo hace ver "tapado": al escribir en el
   buscador el navegador subía la página para sacar el campo de esa franja. Con el foco en él, no hay relleno. */
html:has(.ws-header__search :focus) {
	scroll-padding-top: 0;
}

/* El lienzo del editor separa los bloques de la raíz; aquí van pegados. */
.ws-announce + .ws-header.ws-header {
	margin-block: 0;
}

/* El panel lateral queda sobre el botón de WhatsApp y el resto de la página. */
.ws-header:has(.is-menu-open) {
	z-index: 340;
}

.ws-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: var(--wp--custom--header--logo-width) minmax(0, 1fr) auto;
	grid-template-rows: var(--wp--custom--header--row-height) var(--wp--custom--header--nav-height);
	grid-template-areas:
		"logo search actions"
		"nav nav nav";
	align-items: center;
	column-gap: var(--ws-gutter);
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--ws-gutter));
	margin-inline: auto;
	padding-inline: var(--ws-gutter);
}

.ws-header .ws-header__inner.ws-header__inner > * {
	margin-block: 0;
}

/* Logo (bloque Logo del sitio). */
.ws-header .ws-header__logo {
	grid-area: logo;
	line-height: 0;
}

.ws-header .ws-header__logo a {
	display: block;
}

.ws-header .ws-header__logo img {
	display: block;
	width: var(--wp--custom--header--logo-width);
	max-width: 100%;
	height: auto;
}

/* Buscador: el bloque de em-product-search o, sin el plugin, el bloque Buscar limitado a productos.
   El campo es el mismo en los dos; las reglas nombran el marcado de cada uno. Las sugerencias del plugin son un
   panel oscuro como los del menú: sus variables --em-ps-* se redefinen con los tokens del theme. */
.ws-header .ws-header__search {
	--em-ps-panel-background: var(--wp--custom--header--submenu-background);
	--em-ps-panel-color: var(--wp--preset--color--inverse-foreground);
	--em-ps-panel-border: var(--wp--custom--header--field-border);
	--em-ps-panel-radius: var(--wp--preset--border-radius--medium);
	--em-ps-panel-shadow: var(--wp--preset--shadow--large);
	--em-ps-panel-gap: var(--wp--preset--spacing--10);
	--em-ps-item-padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	--em-ps-item-gap: var(--wp--preset--spacing--30);
	--em-ps-item-active: var(--wp--preset--color--inverse-border);
	--em-ps-heading-color: var(--wp--preset--color--primary-light);
	--em-ps-muted: var(--wp--preset--color--inverse-muted);
	--em-ps-match: var(--wp--preset--color--primary-light);
	--em-ps-image-size: var(--wp--custom--header--suggestion-image);
	--em-ps-image-radius: var(--wp--preset--border-radius--small);
	--em-ps-image-background: var(--wp--preset--color--surface);
	--em-ps-icon-color: var(--wp--preset--color--inverse-muted);

	grid-area: search;
	margin: 0;
}

.ws-header .ws-header__search .wp-block-search__inside-wrapper,
.ws-header .ws-header__search .em-product-search__form {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.ws-header .ws-header__search .wp-block-search__inside-wrapper::before,
.ws-header .ws-header__search .em-product-search__form::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 14px;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--inverse-muted);
	mask: var(--ws-icon-search) center / contain no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
}

.ws-header .ws-header__search .wp-block-search__inside-wrapper::after,
.ws-header .ws-header__search .em-product-search__form::after {
	content: "/";
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--30);
	padding: 0 7px;
	border: 1px solid var(--wp--custom--header--field-border);
	border-radius: var(--wp--preset--border-radius--x-small);
	color: var(--wp--preset--color--inverse-muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 18px;
	transform: translateY(-50%);
	pointer-events: none;
}

.ws-header .ws-header__search .wp-block-search__input,
.ws-header .ws-header__search .em-product-search__input {
	box-sizing: border-box;
	width: 100%;
	height: var(--wp--custom--header--search-height);
	margin: 0;
	padding: 0 48px 0 44px;
	border: 1px solid var(--wp--custom--header--field-border);
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--custom--header--field-background);
	box-shadow: none;
	color: var(--wp--preset--color--inverse-foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-small);
	/* El placeholder es largo: en un header angosto (1024 px) termina en "…" y no a media palabra. */
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
}

.ws-header .ws-header__search .wp-block-search__input::placeholder,
.ws-header .ws-header__search .em-product-search__input::placeholder {
	color: var(--wp--custom--header--field-placeholder);
	opacity: 1;
}

.ws-header .ws-header__search .wp-block-search__input:focus,
.ws-header .ws-header__search .em-product-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary-light);
}

.ws-header .ws-header__search .wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Mientras se escribe, el "/" deja su lugar al botón de borrar y al indicador de carga del plugin. */
.ws-header .ws-header__search .em-product-search__form:focus-within::after,
.ws-header .ws-header__search .em-product-search__form:has(.em-product-search__input:not(:placeholder-shown))::after {
	display: none;
}

.ws-header .ws-header__search .em-product-search__clear {
	right: var(--wp--preset--spacing--20);
}

.ws-header .ws-header__search .em-product-search__clear:hover,
.ws-header .ws-header__search .em-product-search__clear:focus-visible {
	color: var(--wp--preset--color--inverse-foreground);
}

/* Sugerencias: textos con la letra y los tamaños del theme. */
.ws-header .ws-header__search .em-product-search__panel {
	padding-block: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--snug);
}

.ws-header .ws-header__search .em-product-search__heading {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

.ws-header .ws-header__search .em-product-search__group + .em-product-search__group {
	margin-top: var(--wp--preset--spacing--20);
}

.ws-header .ws-header__search .em-product-search__meta {
	font-size: var(--wp--preset--font-size--x-small);
}

.ws-header .ws-header__search .em-product-search__more {
	margin-top: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--primary-light);
}

/* El link global (primary, subrayado) gana en :hover al color heredado del plugin y deja texto rojo sobre
   gris: las sugerencias mantienen su color y sin subrayado en todos los estados. */
.ws-header .ws-header__search .em-product-search__item,
.ws-header .ws-header__search .em-product-search__item:hover,
.ws-header .ws-header__search .em-product-search__item:focus,
.ws-header .ws-header__search .em-product-search__item.is-active {
	color: var(--wp--preset--color--inverse-foreground);
	text-decoration: none;
}

.ws-header .ws-header__search .em-product-search__more:hover,
.ws-header .ws-header__search .em-product-search__more:focus,
.ws-header .ws-header__search .em-product-search__more.is-active {
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
}

/* Acciones: buscar (solo compacto), cuenta y carro. */
.ws-header .ws-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.ws-header__actions > * {
	margin: 0;
}

.ws-header__actions .wp-block-buttons {
	display: none;
}

.ws-header .ws-header__search-toggle .wp-block-button__link,
.ws-header .ws-header__account .wc-block-customer-account__link,
.ws-header .ws-header__cart .wc-block-mini-cart__button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-height: 0;
	padding: 6px 10px;
	border: 0;
	border-radius: var(--wp--preset--border-radius--medium);
	background: none;
	color: var(--wp--preset--color--inverse-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: inherit;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
}

.ws-header .ws-header__search-toggle .wp-block-button__link:hover,
.ws-header .ws-header__account .wc-block-customer-account__link:hover,
.ws-header .ws-header__cart .wc-block-mini-cart__button:hover {
	background: var(--wp--custom--header--action-hover);
	color: var(--wp--preset--color--inverse-foreground);
}

.ws-header .ws-header__search-toggle .wp-block-button__link::before,
.ws-header .ws-header__account .wc-block-customer-account__link::before,
.ws-header .ws-header__cart .wc-block-mini-cart__quantity-badge::before {
	content: "";
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--inverse-foreground);
	mask: center / contain no-repeat;
}

.ws-header .ws-header__search-toggle .wp-block-button__link::before {
	mask-image: var(--ws-icon-search);
}

.ws-header .ws-header__account .wc-block-customer-account__link::before {
	mask-image: var(--ws-icon-user);
}

.ws-header .ws-header__cart .wc-block-mini-cart__quantity-badge::before {
	mask-image: var(--ws-icon-bag);
}

.ws-header .ws-header__account .wc-block-customer-account__visual,
.ws-header .ws-header__cart .wc-block-mini-cart__icon {
	display: none;
}

.ws-header .ws-header__account .label {
	padding: 0;
}

.ws-header .ws-header__cart {
	visibility: visible;
}

.ws-header .ws-header__cart .wc-block-mini-cart__quantity-badge {
	position: static;
	display: block;
	margin: 0;
}

.ws-header .ws-header__cart .wc-block-mini-cart__badge {
	position: absolute;
	top: 0;
	right: 4px;
	left: auto;
	box-sizing: border-box;
	min-width: 19px;
	height: 19px;
	margin: 0;
	padding: 0 5px;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--gradient--primary);
	color: var(--wp--preset--color--on-primary);
	font: 700 var(--wp--preset--font-size--xx-small) / 19px var(--wp--preset--font-family--body);
	text-align: center;
	transform: none;
}

/* ---- Menú: base común -------------------------------------------------------- */
.ws-header .ws-header__nav {
	grid-area: nav;
}

.ws-header .ws-header__nav a {
	text-decoration: none;
}

.ws-header .ws-header__nav .wp-block-navigation__submenu-icon {
	display: none;
}

/* Promo de los paneles (bloque em-wine-store/nav-promo). */
.ws-header .ws-nav-promo__link {
	display: grid;
	grid-template-columns: var(--wp--custom--header--promo-image-width) 1fr;
	align-items: center;
	gap: 18px;
	box-sizing: border-box;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.ws-nav-promo__image {
	display: block;
	width: var(--wp--custom--header--promo-image-width);
	height: var(--wp--custom--header--promo-image-height);
	border-radius: var(--wp--preset--border-radius--medium);
	object-fit: cover;
}

.ws-nav-promo__kicker {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

.ws-nav-promo__title {
	display: block;
	margin: 6px 0 10px;
	font: 600 var(--wp--preset--font-size--lead) / 1.3 var(--wp--preset--font-family--heading);
	text-transform: none;
	letter-spacing: normal;
}

/* ---- Desktop (≥1024 px): menú en fila con paneles ------------------------------ */
@media (min-width: 1024px) {
	.ws-header .ws-header__nav,
	.ws-header .ws-header__nav .wp-block-navigation__responsive-container,
	.ws-header .ws-header__nav .wp-block-navigation__responsive-close,
	.ws-header .ws-header__nav .wp-block-navigation__responsive-dialog,
	.ws-header .ws-header__nav .wp-block-navigation__responsive-container-content {
		position: static;
		align-self: stretch;
		height: 100%;
	}

	.ws-header .ws-header__nav .wp-block-navigation__responsive-container-content {
		display: block;
	}

	.ws-header .ws-header__nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--wp--preset--spacing--10);
		width: 100%;
		height: 100%;
	}

	/* Los paneles se anclan a .ws-header__inner, no a su ítem. */
	.ws-header .ws-header__nav .wp-block-navigation-item {
		position: static;
	}

	.ws-header .ws-header__nav .wp-block-navigation__container > .wp-block-navigation-item {
		align-items: stretch;
		height: 100%;
	}

	.ws-header .ws-header__nav .wp-block-navigation__container > .wp-block-navigation-item > a {
		display: flex;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		height: 100%;
		padding: 0 14px;
		border-bottom: 2px solid transparent;
		line-height: var(--wp--custom--line-height--none);
		transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
	}

	.ws-header .ws-header__nav .wp-block-navigation__container > .wp-block-navigation-item:hover > a,
	.ws-header .ws-header__nav .wp-block-navigation__container > .wp-block-navigation-item > a:focus-visible,
	.ws-header .ws-header__nav .wp-block-navigation__container > .current-menu-item > a,
	.ws-header .ws-header__nav .wp-block-navigation__container > .current-menu-ancestor > a {
		border-color: var(--wp--preset--color--primary-light);
		color: var(--wp--preset--color--accent-hover);
	}

	/* Flecha de los ítems con panel: apunta hacia arriba mientras el panel está abierto. */
	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child > a::after {
		content: "";
		flex: none;
		width: 6px;
		height: 6px;
		margin: -3px 0 0 2px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--wp--custom--transition--base) ease, margin var(--wp--custom--transition--base) ease;
	}

	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child:hover > a::after,
	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child:focus-within > a::after {
		margin-top: 3px;
		transform: rotate(-135deg);
	}

	/* Links secundarios: a la derecha, con el texto de la tienda. */
	.ws-header .ws-header__nav .wp-block-navigation__container > :not(.is-style-ws-secondary) + .is-style-ws-secondary {
		margin-inline-start: auto;
	}

	.ws-header .ws-header__nav .wp-block-navigation__container > .is-style-ws-secondary > a {
		color: var(--wp--preset--color--inverse-muted);
		font-family: var(--wp--preset--font-family--body);
		letter-spacing: 0;
		text-transform: none;
	}

	.ws-header .ws-header__nav .is-style-ws-compact {
		display: none;
	}

	/* Panel. */
	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		grid-template-columns: repeat(4, 1fr) 1.35fr;
		gap: var(--ws-gutter);
		box-sizing: border-box;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 30px var(--ws-gutter) 34px;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--surface);
		box-shadow: var(--wp--preset--shadow--x-large);
		color: var(--wp--preset--color--foreground);
		font-family: var(--wp--preset--font-family--body);
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		/* Cerrado: transparente y un poco arriba; visibility se apaga al terminar el fundido. */
		display: grid;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		transition:
			opacity var(--wp--custom--transition--fast) ease,
			transform var(--wp--custom--transition--fast) ease,
			visibility 0s linear var(--wp--custom--transition--fast);
	}

	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container,
	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child.is-selected > .wp-block-navigation__submenu-container,
	.ws-header .ws-header__nav .wp-block-navigation__container > .has-child.has-child-selected > .wp-block-navigation__submenu-container {
		overflow: visible;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition:
			opacity var(--wp--custom--transition--base) ease,
			transform var(--wp--custom--transition--base) ease,
			visibility 0s;
	}

	/* Columnas: su nombre es el título y la lista siempre está abierta. */
	.ws-header .ws-header__nav .wp-block-navigation__submenu-container > .has-child,
	.ws-header .ws-header__nav .wp-block-navigation__submenu-container > .ws-nav-promo {
		display: block;
	}

	.ws-header .ws-header__nav .wp-block-navigation__container .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
		display: block;
		margin-bottom: var(--wp--preset--spacing--30);
		padding: 0;
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 700;
		line-height: var(--wp--custom--line-height--none);
	}

	.ws-header .ws-header__nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		height: auto;
		overflow: visible;
		border: 0;
		background: none;
		opacity: 1;
		visibility: visible;
	}

	.ws-header .ws-header__nav .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 5px 0;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--body-small);
	}

	.ws-header .ws-header__nav .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--foreground);
	}

	.ws-header .ws-header__nav .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .is-style-ws-view-all .wp-block-navigation-item__content {
		color: var(--wp--preset--color--foreground);
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--primary);
		text-underline-offset: 4px;
	}

	/* Link de la página actual dentro del panel. */
	.ws-header .ws-header__nav .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--foreground);
		font-weight: 600;
	}

	.ws-header .ws-header__nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .current-menu-item > a::before {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-inline-end: var(--wp--preset--spacing--20);
		border-radius: 50%;
		background: var(--wp--preset--color--primary);
		vertical-align: middle;
	}
}

/* Link externo: ícono de "abre en otra pestaña". */
.ws-header .ws-header__nav a[target="_blank"]::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	mask: var(--ws-icon-external) center / contain no-repeat;
}

/* ---- Compacto (≤1023 px): una fila y panel lateral --------------------------- */
@media (max-width: 1023px) {
	.ws-announce,
	.ws-header {
		--ws-gutter: var(--wp--preset--spacing--50);
	}

	.ws-announce__inner {
		display: flex;
		justify-content: center;
		height: auto;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		text-align: center;
	}

	.ws-announce .ws-announce__shipping {
		display: none;
	}

	.ws-announce .ws-announce__tagline {
		line-height: 1.35;
	}

	.ws-header__inner {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		grid-template-rows: auto;
		grid-template-areas:
			"nav logo actions"
			"search search search";
		column-gap: var(--wp--preset--spacing--20);
		min-height: var(--wp--custom--header--height-compact);
		padding-block: var(--wp--preset--spacing--20);
	}

	.ws-header .ws-header__logo {
		width: var(--wp--custom--header--logo-width-compact);
		max-width: 100%;
	}

	.ws-header .ws-header__logo img {
		width: 100%;
	}

	.ws-header .ws-header__search {
		display: none;
		padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--10);
	}

	.ws-header.is-search-open .ws-header__search {
		display: block;
	}

	.ws-header .ws-header__search .wp-block-search__inside-wrapper::after,
	.ws-header .ws-header__search .em-product-search__form::after {
		display: none;
	}

	/* Sin esto Safari de iOS hace zoom al enfocar el campo. */
	.ws-header .ws-header__search .wp-block-search__input,
	.ws-header .ws-header__search .em-product-search__input {
		font-size: 16px;
	}

	.ws-header .ws-header__actions {
		gap: 0;
	}

	.ws-header__actions .wp-block-buttons {
		display: flex;
	}

	.ws-header .ws-header__account {
		display: none;
	}

	.ws-header .ws-header__search-toggle .wp-block-button__link,
	.ws-header .ws-header__cart .wc-block-mini-cart__button {
		justify-content: center;
		gap: 0;
		min-width: 44px;
		min-height: 44px;
		padding: var(--wp--preset--spacing--20);
		font-size: 0;
	}

	.ws-header .ws-header__cart-label {
		display: none;
	}

	.ws-header .ws-header__cart .wc-block-mini-cart__badge {
		top: 2px;
		right: 0;
	}

	/* Botón del menú y botón de cierre: el texto lo pone el bloque Navegación. */
	.ws-header .ws-header__nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--wp--preset--color--inverse-foreground);
		font-size: 0;
	}

	.ws-header .ws-header__nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 24px;
		height: 24px;
		background: currentColor;
		mask: var(--ws-icon-menu) center / contain no-repeat;
	}

	.ws-header .ws-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.ws-header .ws-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0) 0 0;
		z-index: 2;
		display: flex;
		padding: 0;
		overflow: hidden;
		background: var(--wp--custom--header--scrim);
		color: var(--wp--preset--color--inverse-foreground);
		font-size: var(--wp--preset--font-size--body);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__responsive-close {
		width: min(var(--wp--custom--header--drawer-width), 88vw);
		max-width: none;
		height: 100%;
		margin: 0;
		animation: ws-header-drawer-in var(--wp--custom--transition--base) ease;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100%;
		margin: 0;
		padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--50);
		overflow-y: auto;
		border-right: 1px solid var(--wp--preset--color--inverse-border);
		background: var(--wp--preset--color--inverse);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
		position: static;
		display: inline-flex;
		align-items: center;
		align-self: flex-end;
		gap: 6px;
		margin: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		padding: 10px;
		color: var(--wp--preset--color--inverse-foreground);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--body-small);
		font-weight: 600;
		line-height: var(--wp--custom--line-height--relaxed);
		letter-spacing: 0;
		text-transform: none;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__responsive-container-close::before {
		content: "";
		width: 20px;
		height: 20px;
		background: currentColor;
		mask: var(--ws-icon-close) center / contain no-repeat;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		padding: 0;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation-item {
		display: block;
		padding: 0;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		min-height: 54px;
		padding: 0 var(--wp--preset--spacing--50);
		border-bottom: 1px solid var(--wp--preset--color--inverse-border);
		border-left: 3px solid transparent;
		color: var(--wp--preset--color--inverse-foreground);
		font-size: var(--wp--preset--font-size--body);
		line-height: var(--wp--custom--line-height--none);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:hover > a,
	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a:focus-visible,
	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .current-menu-item > a,
	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .current-menu-ancestor > a {
		border-left-color: var(--wp--preset--color--primary-light);
		color: var(--wp--preset--color--accent-hover);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .has-child > a::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 1.6px solid currentColor;
		border-bottom: 1.6px solid currentColor;
		transform: rotate(45deg) translateY(-3px);
		transition: transform var(--wp--custom--transition--base);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .has-child > a[aria-expanded="true"]::after {
		transform: rotate(-135deg) translateY(-3px);
	}

	.ws-header .ws-header__nav .is-menu-open .is-style-ws-secondary > a,
	.ws-header .ws-header__nav .is-menu-open .is-style-ws-compact > a {
		justify-content: flex-start;
		gap: 6px;
		color: var(--wp--preset--color--inverse-muted);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--body-small);
		letter-spacing: 0;
		text-transform: none;
	}

	/* Acordeón: el panel del desktop se abre dentro del menú lateral. */
	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		display: none;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .has-child > a[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		position: static;
		display: block;
		width: auto;
		height: auto;
		padding: 6px var(--wp--preset--spacing--50) 18px 27px;
		overflow: visible;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--inverse-border);
		background: var(--wp--custom--header--submenu-background);
		color: var(--wp--preset--color--inverse-foreground);
		font-family: var(--wp--preset--font-family--body);
		font-weight: 400;
		letter-spacing: 0;
		opacity: 1;
		text-transform: none;
		visibility: visible;
		animation: ws-header-accordion-in var(--wp--custom--transition--base) ease;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container > .has-child {
		margin-top: var(--wp--preset--spacing--40);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container > .has-child > a {
		display: block;
		margin-bottom: var(--wp--preset--spacing--30);
		padding: 0;
		color: var(--wp--preset--color--primary-light);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 700;
		line-height: var(--wp--custom--line-height--none);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		display: block;
		width: auto;
		height: auto;
		padding: 0;
		overflow: visible;
		border: 0;
		background: none;
		opacity: 1;
		visibility: visible;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container a {
		display: block;
		padding: var(--wp--preset--spacing--20) 0;
		color: var(--wp--preset--color--inverse-muted);
		font-size: var(--wp--preset--font-size--body-small);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container a:hover,
	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container .is-style-ws-view-all a {
		color: var(--wp--preset--color--inverse-foreground);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container .is-style-ws-view-all a {
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--primary-light);
		text-underline-offset: 4px;
	}

	/* Link de la página actual dentro del acordeón. */
	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .current-menu-item > a {
		color: var(--wp--preset--color--inverse-foreground);
		font-weight: 600;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .current-menu-item > a::before {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-inline-end: var(--wp--preset--spacing--20);
		border-radius: 50%;
		background: var(--wp--preset--color--primary-light);
		vertical-align: middle;
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation-item.ws-nav-promo {
		display: none;
	}
}

/* En el editor, un lienzo angosto no debe esconder el menú que se está editando:
   salvo que se elija la vista previa de tablet o mobile, se muestra bajo el logo. */
@media (max-width: 1023px) {
	.is-desktop-preview .ws-header .ws-header__inner {
		grid-template-areas:
			"logo logo actions"
			"nav nav nav";
	}

	.is-desktop-preview .ws-header .ws-header__nav .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.is-desktop-preview .ws-header .ws-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
	}
}

@keyframes ws-header-drawer-in {
	from {
		transform: translateX(-100%);
	}
}

@keyframes ws-header-accordion-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* ---- Mobile (≤699 px) -------------------------------------------------------- */
@media (max-width: 699px) {
	.ws-announce,
	.ws-header {
		--ws-gutter: var(--wp--preset--spacing--40);
	}
}

/* ---- Poca altura en horizontal: el header deja de ser fijo ----------------- */
@media (max-height: 520px) and (orientation: landscape) {
	.ws-header {
		position: static;
	}

	.ws-announce__inner {
		padding-block: var(--wp--preset--spacing--10);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
		padding-bottom: var(--wp--preset--spacing--30);
	}

	.ws-header .ws-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
		min-height: 46px;
	}
}

/* =============================================================================
   Header del checkout (parts/checkout-header.html)
   -----------------------------------------------------------------------------
   El de WooCommerce (logo y link al carro, sin buscador ni menú) con el fondo
   y el logo del header de la tienda.
   ============================================================================= */
.ws-checkout-header {
	border-bottom: 1px solid var(--wp--preset--color--inverse-border);
}

.ws-checkout-header__inner {
	min-height: var(--wp--custom--header--row-height);
}

.ws-checkout-header .ws-checkout-header__logo {
	line-height: 0;
}

.ws-checkout-header .ws-checkout-header__logo img {
	display: block;
	width: var(--wp--custom--header--logo-width);
	max-width: 100%;
	height: auto;
}

.ws-checkout-header .wc-block-cart-link {
	color: inherit;
}

@media (max-width: 1023px) {
	.ws-checkout-header__inner {
		min-height: var(--wp--custom--header--height-compact);
	}

	.ws-checkout-header .ws-checkout-header__logo img {
		width: var(--wp--custom--header--logo-width-compact);
	}
}

/* =============================================================================
   Footer del checkout (parts/checkout-footer.html)
   -----------------------------------------------------------------------------
   Checkout y pedido recibido: el cierre del footer de la tienda (derechos,
   mayores de 18 y advertencia legal) más el aviso de compra segura, sin menús.
   ============================================================================= */
.ws-checkout-footer .ws-checkout-footer__inner {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
}

.ws-checkout-footer .ws-checkout-footer__inner p,
.ws-checkout-footer .wp-block-site-title {
	margin: 0;
}

/* El nombre del sitio va en la letra de la frase, no en la de títulos. */
.ws-checkout-footer .wp-block-site-title {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* El separador va por CSS: en mobile la frase va siempre en su propia línea, sin "·" delante. */
.ws-checkout-footer .ws-checkout-footer__age::before {
	content: "· ";
}

@media (max-width: 699px) {
	.ws-checkout-footer .ws-checkout-footer__age {
		flex-basis: 100%;
	}

	.ws-checkout-footer .ws-checkout-footer__age::before {
		content: none;
	}
}

.ws-checkout-footer .ws-checkout-footer__icon {
	flex: none;
	width: var(--wp--preset--font-size--body);
	height: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--primary-light);
}

.ws-checkout-footer .ws-checkout-footer__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.ws-checkout-footer .ws-checkout-footer__warning {
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--inverse-border);
	font-weight: 700;
}

@media (max-width: 699px) {
	.ws-checkout-footer .ws-checkout-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}