/* ==========================================================================
   Velas Velia — Layout: HEADER y FOOTER
   --------------------------------------------------------------------------
   Estilos del header sticky translúcido y del footer oscuro. Replican el
   resultado visual del componente Storefront del sistema de diseño.
   Consume EXCLUSIVAMENTE tokens de tokens.css y reutiliza las clases vv-
   de main.css (.vv-container, .vv-icon-btn, .vv-logo…). No hardcodea valores.
   ========================================================================== */

/* --- Skip link (accesibilidad) ------------------------------------------- */

.vv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}

.vv-skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
	width: auto;
	height: auto;
	padding: var(--space-2) var(--space-4);
	background: var(--gold-600);
	color: var(--text-on-brand);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-pill);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
}

/* ==========================================================================
   HEADER · 3 bandas (anuncio · utilidad · navegación camel)
   ========================================================================== */

/* --- Banda 1 · barra de anuncio (no sticky) ------------------------------- */
.vv-topbar {
	background: var(--cream-200);
	border-bottom: var(--border-w) solid var(--line);
}

.vv-topbar__msg {
	margin: 0;
	padding-block: var(--space-2);
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	color: var(--ink-600);
}

/* --- Header sticky (fila de utilidad + banda de nav) ---------------------- */
.vv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: var(--border-w) solid var(--line);
}

/* --- Banda 2 · fila de utilidad ------------------------------------------- */
.vv-header__bar-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 68px;
	padding-block: var(--space-3);
}

/* Menú secundario (izquierda) */
.vv-header__secondary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-header__secondary-menu li { margin: 0; padding: 0; list-style: none; }

.vv-header__secondary-menu a {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	color: var(--ink-700);
	white-space: nowrap;
	transition: color var(--dur) var(--ease-out);
}

.vv-header__secondary-menu a:hover { color: var(--gold-700); }

/* Logo centrado y prominente */
.vv-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
}

.vv-header .vv-header__logo .vv-logo {
	height: 48px;
	width: auto;
	max-height: 48px;
	max-width: 190px;
	object-fit: contain;
}

/* Acciones (derecha): moneda + iconos de línea */
.vv-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.vv-header__cop {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.08em;
	color: var(--ink-700);
}

.vv-header__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	/* !important para anular borde y color que el tema padre (Hello/Elementor)
	   pone a todos los <button> (borde + color magenta de marca de Elementor). */
	border: 0 !important;
	background: none;
	color: var(--gold-700) !important;
	cursor: pointer;
	border-radius: var(--radius-pill);
	transition: color var(--dur) var(--ease-out), background var(--dur);
}

.vv-header__icon:hover {
	color: var(--gold-900) !important;
	background: var(--gold-100);
}

/* Foco accesible con el anillo de marca (no el magenta por defecto del padre). */
.vv-header__icon:focus-visible,
.vv-header__menu-toggle:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.vv-header__cart-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background: var(--terra-600);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* --- Banda 3 · navegación principal (camel) ------------------------------- */
.vv-header__nav {
	background: var(--camel);
}

.vv-header__nav .vv-container {
	display: flex;
	justify-content: center;
}

.vv-header__menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	padding-block: var(--space-3);
	list-style: none;
}

.vv-header__menu li { margin: 0; padding: 0; list-style: none; }

.vv-header__menu a {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	color: var(--text-on-brand);
	white-space: nowrap;
	transition: opacity var(--dur) var(--ease-out), color var(--dur);
}

.vv-header__menu a:hover,
.vv-header__menu .current-menu-item > a,
.vv-header__menu .current_page_item > a {
	color: #fff;
	opacity: 0.82;
}

/* Hamburguesa: oculta en escritorio, visible en móvil. */
.vv-header__menu-toggle {
	display: none !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0 !important;
	background: none;
	color: var(--ink-700);
	cursor: pointer;
}

/* --- Buscador desplegable ------------------------------------------------- */
.vv-header__search {
	border-top: var(--border-w) solid var(--line);
	background: var(--white);
}

.vv-header__search[hidden] { display: none; }

.vv-header__search-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding-block: var(--space-4);
}

.vv-header__search-input { flex: 1 1 auto; }

/* --- Responsive: header --------------------------------------------------- */

@media (max-width: 860px) {
	.vv-header__menu-toggle { display: inline-flex !important; }

	/* En móvil se ocultan los links secundarios y la moneda. */
	.vv-header__secondary,
	.vv-header__cop { display: none; }

	/* La banda camel se colapsa en un desplegable bajo la fila (con .is-open). */
	.vv-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--camel);
		box-shadow: var(--shadow-md);
	}

	.vv-header__nav.is-open { display: block; }

	.vv-header__nav .vv-container { display: block; }

	.vv-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: var(--space-2);
	}

	.vv-header__nav .vv-header__menu a {
		display: block;
		width: 100%;
		padding-block: var(--space-3);
		text-align: center;
	}
}

@media (max-width: 520px) {
	.vv-header__bar-inner { gap: var(--space-2); min-height: 60px; }

	.vv-header .vv-header__logo .vv-logo { height: 38px; max-height: 38px; }

	.vv-header__actions { gap: var(--space-2); }
	.vv-header__account { display: none; }

	.vv-header__search-input { flex: 1 1 100%; }
	.vv-header__search-form .vv-btn { width: 100%; }
}

/* ==========================================================================
   FOOTER · bloque oscuro con logo invertido y columnas
   ========================================================================== */

.vv-footer {
	/* Banda camel del sistema de diseño, con texto claro (igual que el header)
	   para buen contraste y legibilidad. */
	background: var(--camel);
	color: var(--text-on-brand);
}

.vv-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: var(--space-10);
	padding-top: var(--space-12);
	padding-bottom: var(--space-10);
}

/* Bloque de marca */
.vv-footer__brand {
	max-width: 300px;
}

.vv-footer__logo {
	display: inline-flex;
}

/* Sobre la banda camel, el logo va como silueta clara (casi-blanco) para
   contraste elegante, igual que el texto. */
.vv-footer .vv-logo--invert {
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

.vv-footer__tagline {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: var(--leading-relaxed);
	margin: var(--space-4) 0 0;
	color: var(--text-on-brand);
	opacity: 0.85;
}

/* Columnas de enlaces */
.vv-footer__cols {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

.vv-footer__col-title {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	color: var(--text-on-brand);
	margin: 0 0 var(--space-3);
	letter-spacing: 0.01em;
	text-transform: none;
}

.vv-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-footer__links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-footer__links a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-on-brand);
	opacity: 0.82;
	transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.vv-footer__links a:hover {
	color: var(--text-on-brand);
	opacity: 1;
}

/* Columna SÍGUENOS: handle + iconos de redes + dirección */
.vv-footer__handle {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	color: var(--text-on-brand);
	margin-bottom: var(--space-3);
}

.vv-footer__social {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.vv-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	color: var(--text-on-brand);
	background: rgba(255, 255, 255, 0.14);
	transition: background var(--dur) var(--ease-out), color var(--dur);
}

.vv-footer__social a:hover {
	background: var(--text-on-brand);
	color: var(--camel);
}

.vv-footer__address {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	line-height: var(--leading-relaxed);
	color: var(--text-on-brand);
	opacity: 0.8;
	margin: 0;
	max-width: 230px;
}

/* Línea inferior de copyright */
.vv-footer__bottom {
	border-top: var(--border-w) solid rgba(255, 255, 255, 0.22);
	padding: var(--space-4) var(--space-8);
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--text-on-brand);
	opacity: 0.78;
}

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

@media (max-width: 900px) {
	.vv-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	.vv-footer__brand {
		grid-column: 1 / -1;
		max-width: none;
	}
}

@media (max-width: 520px) {
	/* Footer más compacto en móvil: 2 columnas (no 1) y menos aire vertical
	   para que no quede tan alto. */
	.vv-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5) var(--space-8);
		padding-top: var(--space-8);
		padding-bottom: var(--space-6);
	}

	/* Marca y "Síguenos" ocupan toda la fila; Categorías | Nosotros van juntas. */
	.vv-footer__brand,
	.vv-footer__col--social {
		grid-column: 1 / -1;
	}

	.vv-footer__brand {
		margin-bottom: var(--space-2);
	}

	/* Reduce el padding lateral del copyright en pantallas muy estrechas. */
	.vv-footer__bottom {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
}