/* ==========================================================================
   Velas Velia — Home · "Más vendidos" + "Promoción especial"
   --------------------------------------------------------------------------
   Estilos propios de estas dos secciones. Consume EXCLUSIVAMENTE los tokens
   de tokens.css y reutiliza las clases vv- de main.css (.vv-product-card,
   .vv-badge, .vv-btn, .vv-display, .vv-script…). Solo se añade aquí el
   pegamento de layout (espaciado de sección, cabecera, banda dorada) que no
   existe como componente.

   Fuente visual: Storefront.jsx → FeaturedGrid + PromoBand.
   ========================================================================== */

/* ==========================================================================
   1. MÁS VENDIDOS (FeaturedGrid)
   ========================================================================== */

.vv-mas-vendidos {
	padding-block: var(--space-12);
}

/* Cabecera: heading a la izquierda, badge alineado a la base, a la derecha */
.vv-mas-vendidos__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.vv-mas-vendidos__heading {
	display: flex;
	flex-direction: column;
}

/* Script "los favoritos" — tamaño del diseño (30px) sin tirar del baseline */
.vv-mas-vendidos__eyebrow {
	font-size: var(--text-xl);
	line-height: 1;
	color: var(--gold-600);
}

/* Display "Más vendidos" — tono ink-900, pegado al script de arriba */
.vv-mas-vendidos__title {
	margin: 2px 0 0;
	font-size: var(--text-2xl);
	line-height: 1;
	color: var(--ink-900);
}

/* Grid fluida: las tarjetas se reacomodan solas según el ancho disponible
   (mínimo 220px), evitando el salto brusco 3→2→1 y que en tablet queden
   tarjetas demasiado anchas. En desktop amplio se fija a 3 columnas (mockup). */
.vv-mas-vendidos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-8);
}

/* La tarjeta es un <a>: heredamos el look de .vv-product-card y limpiamos el enlace */
.vv-mas-vendidos__card {
	color: inherit;
	text-decoration: none;
}

.vv-mas-vendidos__card:hover {
	color: inherit;
}

/* Pie de la tarjeta de la Home: nombre y precio APILADOS y a la izquierda
   (en el mockup el precio va debajo del nombre, no a la derecha). */
.vv-mas-vendidos__card .vv-product-card__foot {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
}

/* Bloque nombre + meta a la izquierda del pie */
.vv-mas-vendidos__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Nombre en marrón cálido apagado y precio algo mayor (jerarquía del mockup). */
.vv-mas-vendidos__card .vv-product-card__name {
	font-weight: var(--fw-medium);
	color: var(--ink-600);
}

/* El precio real de Woo viene como .woocommerce-Price-amount dentro del pill;
   neutralizamos el color de enlace heredado para mantener el oro de marca. */
.vv-mas-vendidos__card .vv-product-card__price,
.vv-mas-vendidos__card .vv-product-card__price .woocommerce-Price-amount,
.vv-mas-vendidos__card .vv-product-card__price ins,
.vv-mas-vendidos__card .vv-product-card__price del {
	color: var(--gold-700);
	text-decoration: none;
}

/* Precio anterior (tachado) en ofertas: apagado y con su línea */
.vv-mas-vendidos__card .vv-product-card__price del {
	color: var(--ink-300);
	text-decoration: line-through;
	font-size: 0.85em;
	margin-right: var(--space-1);
}

/* ==========================================================================
   2. PROMOCIÓN ESPECIAL (PromoBand)
   ========================================================================== */

.vv-promo {
	/* CTA cálido en terracota (acento del sistema); separa la banda del footer camel. */
	background: var(--terra-600);
	color: var(--text-on-accent);
	margin-top: var(--space-6);
}

.vv-promo__inner {
	padding-block: var(--space-16);
	text-align: center;
}

/* Sparkle de marca centrado, en blanco sobre el oro */
.vv-promo__sparkle {
	display: inline-flex;
	color: var(--text-on-brand);
}

/* Título display — blanco sobre el oro (anula el ink-900 por defecto de h2) */
.vv-promo__title {
	margin: var(--space-3) 0 var(--space-2);
	font-size: var(--text-2xl);
	color: var(--text-on-brand);
}

/* Texto de promo — crema cálido, ancho de lectura cómodo y centrado */
.vv-promo__text {
	max-width: 620px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: #FBF3E6; /* crema sobre oro (mismo tono del diseño de origen) */
}

.vv-promo__text strong {
	font-weight: var(--fw-bold);
	color: var(--text-on-brand);
}

.vv-promo__cta {
	margin-top: var(--space-6);
}

/* Botón blanco sobre oro: variante --dark reusada pero invertida (blanco/oro) */
.vv-promo__btn.vv-btn--dark {
	background: var(--white);
	color: var(--gold-800);
	border-color: var(--white);
}

.vv-promo__btn.vv-btn--dark:hover:not(:disabled) {
	filter: none;
	background: var(--gold-050);
	border-color: var(--gold-050);
}

/* ==========================================================================
   3. RESPONSIVE
   ========================================================================== */

/* Desktop amplio: fijamos 3 columnas exactas como el mockup
   (la rejilla fluida ya cubre tablet y móvil). */
@media (min-width: 1024px) {
	.vv-mas-vendidos__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.vv-mas-vendidos__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.vv-promo__title {
		font-size: var(--text-xl);
	}
}