/* ==========================================================================
   Vértice Commerce 2 — core/nav.css
   Chrome del sitio (MOTOR, siempre encolado): topbar, header sticky, marca,
   nav de escritorio con dropdown, acciones con contadores, drawers off-canvas
   (menú / mini-cart / búsqueda), búsqueda en vivo y footer. Porta la mecánica
   de las secciones 6 de theme.css + layout.css de v1 con prefijo vc- y SOLO
   tokens semánticos.

   Fixes de auditoría aplicados acá:
   - theme.css:344 → el header sticky (y los drawers fixed) usan
     top: var(--wp-admin--admin-bar--height, 0px) en vez de los offsets
     hardcodeados 32/46px de v1: WordPress define esa custom property cuando
     hay admin bar y el chrome queda siempre debajo, en todos los anchos.

   Breakpoints del contrato: 640px / 880px / 1100px, mobile-first (min-width).
   El nav de escritorio entra en 880px (debajo: burger + drawer).

   Estados (los pone el JS del motor, Task 11 — contrato):
   - Drawers: [aria-hidden="false"] en .vc-drawer = abierto. El shell está en
     header.php (#vc-nav-drawer) y footer.php (#vc-mini-cart, #vc-search).
   - Scroll lock: body.vc-drawer-open (CONTRATO DEFINIDO ACÁ: el JS agrega la
     clase al abrir cualquier drawer y la quita al cerrar el último).
   - Dropdown de escritorio: apertura por [aria-expanded="true"] en el <a> del
     ítem (.menu-item-has-children); :hover y :focus-within funcionan sin JS.
   - Búsqueda en vivo: el JS inyecta en [data-vc-live-results] (role=listbox,
     abre SOLO con options) los ítems a.vc-livesearch__item del endpoint
     vc_live_search, a.vc-livesearch__all ("ver todos los resultados") y
     .is-active sobre el ítem resaltado con el teclado. Los mensajes de
     estado (p.vc-livesearch__state: "buscando…/sin resultados/error") van
     en un HERMANO div.vc-livesearch--state que crea el JS: los hijos de un
     listbox solo pueden ser options.

   Las TRANSICIONES de drawers/dropdown viven en core/motion.css (acá solo
   estados finales): sin motion.css el chrome sigue siendo 100% funcional.

   Convención clearfix: WooCommerce inyecta ::after de clearfix en
   ul.cart_list li (mini-cart); se anula con content:none para que no genere
   cajas fantasma en el layout en grilla del ítem.
   ========================================================================== */

/* ============================ 1. TOPBAR ================================= */
/* header.php: .vc-topbar > .vc-container.vc-topbar__inner > p.vc-topbar__text
   (solo se imprime con texto cargado en el panel). */
.vc-topbar {
	background: var(--surface-inverse);
	color: var(--surface);
	font-size: var(--fs-xs);
	letter-spacing: 0.03em;
}
.vc-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding-block: var(--sp-1);
	text-align: center;
}
.vc-topbar__text { margin: 0; max-width: none; }

/* ============================ 2. HEADER STICKY ========================== */
/* Fix theme.css:344: offset por la admin bar vía custom property del core de
   WP (0px sin admin bar). Solo mecánica: fondo sólido para que el contenido
   no se transparente al scrollear; la piel (blur, píldora, sombra) es de la
   capa de diseño. */
.vc-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--z-nav);
	background: var(--surface);
	border-bottom: var(--border-w) solid var(--line);
}
.vc-header__bar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: var(--header-h);
}
@media (min-width: 880px) {
	.vc-header__bar { gap: var(--sp-5); }
}

/* ============================ 3. MARCA / LOGO =========================== */
.vc-header__brand {
	display: flex;
	align-items: center;
	flex: none;
	min-width: 0;
}

/* Logo subido por el cliente (the_custom_logo → a.custom-logo-link >
   img.custom-logo). Tope de tamaño acorde al sizes que fija inc/setup.php
   (fix header.php:77): sin esto un emblema cuadrado sale gigante. */
.vc-header__brand .custom-logo-link { display: inline-flex; align-items: center; }
.vc-header__brand .custom-logo {
	width: auto;
	height: auto;
	max-height: 48px;
	max-width: min(200px, 40vw);
	object-fit: contain;
}

/* Fallback sin logo: monograma SVG + nombre del sitio (header.php). */
.vc-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--ink);
	min-width: 0;
}
.vc-logo:hover { color: var(--brand-strong); }
.vc-logo__mark { width: 40px; height: 40px; flex: none; }
.vc-logo__text { display: flex; flex-direction: column; min-width: 0; }
.vc-logo__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: var(--lh-tight);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vc-logo__tag {
	margin-top: 2px;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================ 4. NAV DE ESCRITORIO ====================== */
/* header.php: nav.vc-nav-wrap > ul.vc-nav (wp_nav_menu, depth 2). Mobile-first:
   oculto hasta 880px (ahí el menú vive en el drawer). */
.vc-nav-wrap { display: none; }

@media (min-width: 880px) {
	.vc-nav-wrap { display: block; margin-inline: auto; min-width: 0; }

	.vc-nav {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2) var(--sp-5);
	}
	.vc-nav li { margin: 0; }
	.vc-nav a {
		display: inline-flex;
		align-items: center;
		padding-block: var(--sp-2);
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--ink);
	}
	.vc-nav a:hover,
	.vc-nav .current-menu-item > a,
	.vc-nav .current-menu-ancestor > a { color: var(--brand-strong); }

	/* --- Dropdown / mega-menú (ítems con hijos) --- */
	.vc-nav .menu-item-has-children { position: relative; }
	.vc-nav .menu-item-has-children > a { gap: 0.35rem; }
	/* Caret dibujado con bordes (currentColor, sin assets). */
	.vc-nav .menu-item-has-children > a::after {
		content: "";
		width: 0.4em;
		height: 0.4em;
		margin-top: -0.18em;
		border-right: 1.6px solid currentColor;
		border-bottom: 1.6px solid currentColor;
		transform: rotate(45deg);
		flex: none;
	}

	.vc-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: calc(-1 * var(--sp-2));
		/* Sin z-index propio (contrato: solo --z-*): .vc-header ya crea el
		   stacking context en --z-nav y, adentro, el panel posicionado pinta
		   sobre el contenido de la página. */
		min-width: 13rem;
		margin: 0;
		padding: var(--sp-2);
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 2px;
		background: var(--surface-raised);
		border: var(--border-w) solid var(--line);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
	}
	/* Puente invisible: el hover no se corta en el hueco ítem → panel. */
	.vc-nav .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(-1 * var(--sp-2));
		height: var(--sp-2);
	}

	/* Apertura: aria-expanded (JS), hover (pointer) y focus-within (teclado
	   sin JS). Estados finales acá; la transición está en core/motion.css. */
	.vc-nav .menu-item-has-children > a[aria-expanded="true"] + .sub-menu,
	.vc-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.vc-nav .menu-item-has-children > a[aria-expanded="true"]::after,
	.vc-nav .menu-item-has-children:focus-within > a::after {
		transform: rotate(225deg);
		margin-top: 0.1em;
	}
	@media (hover: hover) and (pointer: fine) {
		.vc-nav .menu-item-has-children:hover > .sub-menu {
			opacity: 1;
			visibility: visible;
			transform: none;
		}
		.vc-nav .menu-item-has-children:hover > a::after {
			transform: rotate(225deg);
			margin-top: 0.1em;
		}
	}

	.vc-nav .sub-menu li { margin: 0; }
	.vc-nav .sub-menu a {
		display: block;
		width: 100%;
		padding: var(--sp-2) var(--sp-3);
		border-radius: var(--radius-sm);
		font-size: var(--fs-sm);
		color: var(--ink);
		white-space: nowrap;
	}
	.vc-nav .sub-menu a:hover,
	.vc-nav .sub-menu a:focus-visible {
		background: var(--brand-soft);
		color: var(--brand-strong);
	}
}

/* ============================ 5. ACCIONES + CONTADORES ================== */
.vc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	flex: none;
	margin-left: auto; /* sin nav central (mobile) empuja los íconos al borde */
}

/* Burger solo hasta que entra el nav de escritorio. */
@media (min-width: 880px) {
	.vc-header__burger { display: none; }
}

/* ---------- Degradación sin JS (html.no-js, contrato de header.php) ------ */
/* header.php imprime class="no-js" en <html> y un script inline la cambia a
   "js" apenas corre. Si NO corre (JS desactivado/bloqueado), el chrome no
   puede depender de drawers: el burger — que solo abre un drawer vía JS — se
   oculta y el nav principal se muestra en TODOS los viewports (envuelto bajo
   la marca en móvil, con los submenús como listas estáticas visibles). La
   búsqueda ya degrada sola: el trigger del header es un <a> a ?s= (la página
   de resultados trae su propio form). */
html.no-js .vc-header__burger { display: none; }
@media (max-width: 879.98px) {
	html.no-js .vc-header__bar { flex-wrap: wrap; padding-block: var(--sp-2); }
	html.no-js .vc-nav-wrap { display: block; order: 3; width: 100%; }
	html.no-js .vc-nav {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-1) var(--sp-4);
	}
	html.no-js .vc-nav li { margin: 0; }
	html.no-js .vc-nav a {
		display: inline-flex;
		align-items: center;
		padding-block: var(--sp-1);
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--ink);
	}
	/* Submenús: nada de dropdown (esas reglas viven en el bloque ≥880px):
	   lista anidada visible y navegable. */
	html.no-js .vc-nav .sub-menu {
		list-style: none;
		margin: 0;
		padding-left: var(--sp-3);
		width: 100%;
	}
}

/* En pantallas chicas, wishlist y cuenta viven en el drawer (los links
   .vc-drawer__link de header.php): se sacan del header para que marca +
   búsqueda + carrito + burger entren sin desbordar. Mobile-first: ocultos
   por defecto, vuelven en 640px (mismo display que .vc-icon-btn). */
.vc-header__wishlist,
.vc-header__account { display: none; }
@media (min-width: 640px) {
	.vc-header__wishlist,
	.vc-header__account { display: inline-grid; }
}

/* Contadores (carrito / wishlist). El de carrito lo reemplaza el fragment
   span.vc-cart-count de inc/woocommerce.php; el de wishlist lo puebla el JS
   ([data-vc-wishlist-count], nace hidden). Par --cta-*: contraste AA
   garantizado por contrato. */
.vc-cart-count,
.vc-wishlist-count {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background: var(--cta-bg);
	color: var(--cta-ink);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1;
}
/* Sobre el botón de ícono van como badge flotante (el .vc-icon-btn de
   components.css ya es position:relative). En los .vc-drawer__link quedan
   inline junto al texto. */
.vc-icon-btn > .vc-cart-count,
.vc-icon-btn > .vc-wishlist-count {
	position: absolute;
	top: 2px;
	right: 0;
}

/* ============================ 6. DRAWERS ================================ */
/* header.php / footer.php: .vc-drawer[aria-hidden] > .vc-drawer__overlay
   [data-vc-drawer-close] + .vc-drawer__panel[role=dialog]. Contrato de
   z-index: overlay en --z-overlay, panel en --z-modal. Estados finales acá;
   transiciones en core/motion.css. */
.vc-drawer {
	position: fixed;
	inset: 0;
	top: var(--wp-admin--admin-bar--height, 0px); /* fix theme.css:344 */
	z-index: var(--z-overlay);
	pointer-events: none;
}
.vc-drawer[aria-hidden="false"] { pointer-events: auto; }

/* Scroll lock (contrato: el JS pone la clase en <body> con un drawer abierto). */
body.vc-drawer-open { overflow: hidden; }

.vc-drawer__overlay {
	position: absolute;
	inset: 0;
	z-index: var(--z-overlay);
	background: color-mix(in srgb, var(--surface-inverse) 45%, transparent);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
}
.vc-drawer[aria-hidden="false"] .vc-drawer__overlay {
	opacity: 1;
	visibility: visible;
}

/* Panel lateral (default: menú y mini-cart entran desde la derecha). */
.vc-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: var(--z-modal);
	width: min(88vw, 400px);
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-left: var(--border-w) solid var(--line);
	box-shadow: var(--shadow-3);
	transform: translateX(100%);
	visibility: hidden;
}
.vc-drawer[aria-hidden="false"] .vc-drawer__panel {
	transform: none;
	visibility: visible;
}

/* Variante búsqueda: sheet superior a todo el ancho (mecánica del overlay de
   búsqueda de v1). */
.vc-drawer--search .vc-drawer__panel {
	inset: 0 0 auto 0;
	width: 100%;
	height: auto;
	max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	border-left: 0;
	border-bottom: var(--border-w) solid var(--line);
	transform: translateY(-100%);
}
.vc-drawer--search[aria-hidden="false"] .vc-drawer__panel { transform: none; }
.vc-drawer--search .vc-drawer__body {
	width: 100%;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

/* Cabecera y cuerpo del panel. */
.vc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex: none;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: var(--border-w) solid var(--line);
}
.vc-drawer__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h3);
	color: var(--ink);
}
.vc-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-4);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Links utilitarios del drawer de navegación (wishlist / mi cuenta). El nav
   con flex:1 los ancla al pie del panel. */
.vc-drawer__link {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-3);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	font-weight: 500;
	color: var(--ink);
}
.vc-drawer__link:hover {
	color: var(--brand-strong);
	border-color: var(--brand);
}
.vc-drawer__link svg { width: 20px; height: 20px; flex: none; }
.vc-drawer__link .vc-wishlist-count { margin-left: var(--sp-1); }

/* ============================ 7. MENÚ DEL DRAWER ======================== */
/* header.php: nav.vc-drawer-nav > ul.vc-drawer-nav__menu (wp_nav_menu,
   depth 2; submenús siempre expandidos: sin dropdowns en touch). */
.vc-drawer-nav { flex: 1 1 auto; }
.vc-drawer-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.vc-drawer-nav__menu > li { border-bottom: var(--border-w) solid var(--line); }
.vc-drawer-nav__menu a {
	display: block;
	padding: var(--sp-3) var(--sp-1);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ink);
}
.vc-drawer-nav__menu a:hover,
.vc-drawer-nav__menu .current-menu-item > a { color: var(--brand-strong); }
.vc-drawer-nav__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--sp-2) var(--sp-4);
}
.vc-drawer-nav__menu .sub-menu a {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	padding: var(--sp-2) var(--sp-1);
	color: var(--ink-2);
}
.vc-drawer-nav__menu .sub-menu a:hover { color: var(--brand-strong); }

/* ============================ 8. MINI-CART (interno) ==================== */
/* footer.php: .vc-drawer__body > div.vc-minicart__items (fragment AJAX) con
   el markup del core de Woo (override cart/mini-cart.php): ul.woocommerce-
   mini-cart > li.woocommerce-mini-cart-item (a.remove + a[img+nombre] +
   dl.variation + span.quantity) + p.__total + p.__buttons. Los selectores van
   anidados bajo .vc-drawer a propósito: especificidad acotada que le gana a
   las reglas de widget del CSS core de WooCommerce (float de la miniatura,
   clearfix, a.remove) sin !important. */
.vc-drawer--minicart .vc-drawer__body { overflow: hidden; padding-bottom: var(--sp-3); }
.vc-drawer .vc-minicart__items {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.vc-drawer .vc-minicart__items ul.woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vc-drawer .woocommerce-mini-cart-item {
	position: relative;
	margin: 0;
	padding: var(--sp-3) var(--sp-6) var(--sp-3) 0; /* aire a la derecha para el botón quitar */
	border-bottom: var(--border-w) solid var(--line);
}
/* Anula el clearfix del CSS core de Woo en el ítem (ver cabecera). */
.vc-drawer .woocommerce-mini-cart-item::before,
.vc-drawer .woocommerce-mini-cart-item::after { content: none; }

/* Enlace producto: miniatura + nombre en grilla. */
.vc-drawer .woocommerce-mini-cart-item a:not(.remove) {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: center;
	color: var(--ink);
	font-weight: 500;
	line-height: var(--lh-snug);
}
.vc-drawer .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--brand-strong); }
.vc-drawer .woocommerce-mini-cart-item img {
	float: none; /* el widget core la flota a la derecha en 32px */
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: var(--border-w) solid var(--line);
	background: var(--surface-2);
}

/* Variaciones (dl.variation del core) y línea de cantidad × precio. */
.vc-drawer .woocommerce-mini-cart-item .variation {
	display: block;
	margin: var(--sp-1) 0 0 calc(64px + var(--sp-3));
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
.vc-drawer .woocommerce-mini-cart-item .variation dt,
.vc-drawer .woocommerce-mini-cart-item .variation dd {
	display: inline;
	margin: 0;
	float: none;
}
.vc-drawer .woocommerce-mini-cart-item .quantity {
	display: block;
	margin: var(--sp-1) 0 0 calc(64px + var(--sp-3));
	font-size: var(--fs-sm);
	color: var(--ink-2);
}
.vc-drawer .woocommerce-mini-cart-item .quantity .amount { color: var(--ink); font-weight: 500; }

/* Quitar del carrito (a.remove del core: target 32px, estado de error). */
.vc-drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	font-size: 1.25rem;
	line-height: 1;
	font-weight: 400;
	color: var(--ink-3);
	background: transparent;
	text-decoration: none;
}
.vc-drawer .woocommerce-mini-cart-item a.remove:hover {
	color: var(--error);
	background: var(--error-soft);
}

/* Total + botones, anclados al pie del drawer. */
.vc-drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin: 0;
	padding-top: var(--sp-3);
	border-top: var(--border-w) solid var(--line);
	font-weight: 500;
	color: var(--ink);
	max-width: none;
}
.vc-drawer .woocommerce-mini-cart__total .amount { font-size: 1.1rem; font-weight: 600; }

.vc-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	max-width: none;
}
/* Botones del core (a.button.wc-forward / a.button.checkout): misma receta
   que .vc-btn (components.css) sin depender de que el filtro les sume la
   clase. Especificidad acotada bajo .vc-drawer (sin !important). */
.vc-drawer .woocommerce-mini-cart__buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-3) var(--sp-5);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	text-align: center;
	border: var(--border-w) solid var(--brand);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--brand-strong);
}
.vc-drawer .woocommerce-mini-cart__buttons .button:hover {
	background: var(--brand-soft);
	color: var(--brand-strong);
}
.vc-drawer .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--cta-bg);
	border-color: transparent;
	color: var(--cta-ink);
}
.vc-drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--cta-bg-hover);
	color: var(--cta-ink);
}

/* Vacío (mensaje del override + CTA a la tienda). */
.vc-drawer .woocommerce-mini-cart__empty-message {
	margin: var(--sp-5) 0 0;
	text-align: center;
	color: var(--ink-2);
	max-width: none;
}

/* Barra de envío gratis dentro del mini-cart (components.css la estila; acá
   solo el aire respecto del total). */
.vc-drawer .vc-minicart__items .vc-shipbar { padding-top: var(--sp-3); }

/* ============================ 9. BÚSQUEDA EN VIVO ======================= */
/* footer.php: div.vc-livesearch#vc-live-results[data-vc-live-results]
   (nace hidden; el [hidden] lo gobierna el guard de reset.css). El JS
   inyecta a.vc-livesearch__item (endpoint vc_live_search) + __all +
   .is-active, y crea un HERMANO div.vc-livesearch.vc-livesearch--state para
   los mensajes p.vc-livesearch__state (fuera del listbox). */
.vc-livesearch {
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.vc-livesearch__state {
	margin: 0;
	padding: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--ink-2);
	max-width: none;
}
.vc-livesearch__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-4);
	color: var(--ink);
	border-bottom: var(--border-w) solid var(--line);
}
.vc-livesearch__item:last-child { border-bottom: 0; }
.vc-livesearch__item:hover { background: var(--surface-2); color: var(--ink); }
/* Resaltado por teclado (flechas): más fuerte que el hover. */
.vc-livesearch__item.is-active { background: var(--brand-soft); }
.vc-livesearch__thumb {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface-2);
	border: var(--border-w) solid var(--line);
}
.vc-livesearch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vc-livesearch__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.vc-livesearch__name {
	font-weight: 500;
	line-height: var(--lh-snug);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vc-livesearch__price { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.vc-livesearch__price .amount { color: var(--ink); font-weight: 600; }
.vc-livesearch__price del { color: var(--ink-3); margin-right: var(--sp-1); font-weight: 400; }
.vc-livesearch__price ins { text-decoration: none; }
.vc-livesearch__all {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--brand-strong);
	background: var(--surface-2);
	border-top: var(--border-w) solid var(--line);
}
.vc-livesearch__all:hover { color: var(--brand); }

/* ============================ 10. FOOTER ================================ */
/* footer.php: .vc-footer > .vc-container > .vc-footer__cols + .vc-footer__
   bottom. Mecánica neutra sobre --surface-2 (la capa de diseño decide si el
   pie va invertido, de marca, etc.). */
.vc-footer {
	margin-top: clamp(var(--sp-7), 7vw, var(--sp-9));
	padding-block: clamp(var(--sp-6), 6vw, var(--sp-8)) var(--sp-5);
	background: var(--surface-2);
	border-top: var(--border-w) solid var(--line);
	color: var(--ink-2);
}
.vc-footer__cols {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Anula el clearfix que Woo inyecta en contenedores (ítem fantasma en grid). */
.vc-footer__cols::before,
.vc-footer__cols::after { content: none; }

.vc-footer__brand { max-width: 34ch; }
.vc-footer__logo { margin-bottom: var(--sp-3); }
/* Tope del logo subido (mismo criterio que el header). */
.vc-footer__logo img,
.vc-footer__logo .custom-logo {
	width: auto;
	height: auto;
	max-height: 64px;
	max-width: 100%;
	object-fit: contain;
}
.vc-footer__name {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--ink);
}
.vc-footer__about { margin: 0; font-size: var(--fs-sm); }

.vc-footer__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--ink);
}
.vc-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}
.vc-footer__menu a { color: var(--ink-2); }
.vc-footer__menu a:hover { color: var(--brand-strong); }
.vc-footer__contact-item { color: var(--ink-2); }

.vc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-4);
	margin-top: clamp(var(--sp-5), 5vw, var(--sp-7));
	padding-top: var(--sp-4);
	border-top: var(--border-w) solid var(--line);
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
.vc-footer__credit-link { font-weight: 600; color: var(--ink-2); }
.vc-footer__credit-link:hover { color: var(--brand-strong); }