/* ==========================================================================
   Velas Velia — Ficha de producto (WooCommerce single)
   --------------------------------------------------------------------------
   Layout en 2 columnas del componente Detail del Storefront, fiel a la guía
   visual (detalledeproducto.png): galería real de Woo a la izquierda (foto
   grande + miniaturas), y a la derecha el panel de compra (categoría, título
   display, PRECIO en tinta, descripción, selector de variaciones, cantidad +
   "Agregar al carrito", nota de envío, CTA de WhatsApp y fila de pilares).
   SOLO tokens del sistema; reusa los componentes vv- (badge, tag, btn, field).
   ========================================================================== */

/* --- Contenedor de la ficha (2 columnas) --------------------------------- */
.vv-single .vv-single__inner {
	padding-top: var(--space-10);
	padding-bottom: var(--space-16);
	display: grid;
	/* Galería algo más ancha que el panel, como en la guía. */
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-12);
	align-items: start;
}

/* Usa el ancho estándar del container (no el narrow). */
.vv-single .vv-single__inner.vv-container {
	max-width: var(--container);
}

/* ==========================================================================
   GALERÍA (columna izquierda) — markup real de WooCommerce
   ========================================================================== */

.vv-single__gallery {
	position: sticky;
	top: var(--space-8);
}

.vv-single__gallery .woocommerce-product-gallery {
	position: relative;
	margin: 0;
}

/* Foto principal en squircle grande con sombra de foto. */
.vv-single__gallery .woocommerce-product-gallery__wrapper,
.vv-single__gallery .woocommerce-product-gallery__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.vv-single__gallery .woocommerce-product-gallery__image {
	background: var(--gold-050);
	box-shadow: var(--shadow-photo);
}

.vv-single__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;            /* sin deformar; deja que photoswipe calcule bien */
	display: block;
	border-radius: var(--radius-lg);
}

/* Botón de zoom/lightbox de Woo (la lupa): táctil y visible también en móvil. */
.vv-single__gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--white) 90%, transparent);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	font-size: 0; /* compacta el icono PNG nativo de Woo */
}

.vv-single__gallery .woocommerce-product-gallery__trigger img {
	width: 18px;
	height: 18px;
	margin: 0;
}

/* Modal de photoswipe por encima del header sticky y demás capas. */
.pswp { z-index: 100000; }
.pswp__bg { background: rgba(43, 36, 32, 0.92); } /* tinta de marca */

/* Miniaturas (thumbnails reales): squircles pequeños en fila, como la guía. */
.vv-single__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.vv-single__gallery .flex-control-thumbs li {
	width: 84px;
	height: 84px;
	margin: 0;
	list-style: none;
}

.vv-single__gallery .flex-control-thumbs img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: var(--border-w) solid var(--line);
	cursor: pointer;
	opacity: 0.78;
	transition: opacity var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.vv-single__gallery .flex-control-thumbs img:hover,
.vv-single__gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border: var(--border-w-2) solid var(--gold-600);
}

/* ==========================================================================
   PANEL DE COMPRA (columna derecha)
   ========================================================================== */

.vv-single__summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--space-2);
}

/* Título display con el nombre real del producto (Erotique). */
.vv-single__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
	margin: 0 0 var(--space-4);
	/* Mayúscula inicial (no todo en mayúsculas). */
	text-transform: none;
	letter-spacing: -0.005em;
}

/* --- PRECIO -------------------------------------------------------------
   En la guía el precio es texto grande en tinta (no la pill dorada). Como el
   override price.php envuelve el precio en .vv-price-pill, aquí lo "desvestimos"
   SOLO dentro de la ficha: sin fondo, sin sombra, tipografía display en tinta. */
.vv-single__price {
	margin: 0 0 var(--space-5);
}

.vv-single__price .price,
.vv-single__price-wrap {
	margin: 0;
}

.vv-single__price .vv-price-pill,
.vv-single__price .vv-price-pill--lg {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.vv-single__price .vv-price-pill,
.vv-single__price .vv-price-pill ins,
.vv-single__price .vv-price-pill .amount {
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--text-xl);
	letter-spacing: -0.01em;
	color: var(--text-heading);
	text-decoration: none;
}

/* Precio tachado (oferta): más pequeño y atenuado junto al vigente. */
.vv-single__price .vv-price-pill del,
.vv-single__price .vv-price-pill del .amount {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--text-muted);
	text-decoration: line-through;
	opacity: 0.7;
}

/* Descripción corta real. */
.vv-single__excerpt {
	font-family: var(--font-body);
	color: var(--text-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	max-width: 460px;
	margin-bottom: var(--space-6);
}

.vv-single__excerpt p {
	margin: 0 0 var(--space-3);
}

.vv-single__excerpt p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   FORMULARIO DE COMPRA (opciones + add-to-cart real)
   ========================================================================== */

.vv-single__form {
	width: 100%;
}

/* Disponibilidad / stock. */
.vv-single__form .stock {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: 0 0 var(--space-4);
}

.vv-single__form .stock.out-of-stock {
	color: var(--terra-700);
}

/* --- Bloque de opciones de tamaño (chips .vv-tag) en producto simple ----- */
.vv-single__options {
	margin-bottom: var(--space-5);
}

.vv-single__options-label {
	display: block;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-label);
	color: var(--text-body);
	margin-bottom: var(--space-3);
}

.vv-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Las etiquetas .vv-tag llevan un radio oculto dentro; mantenemos el look vv-. */
.vv-single__tags .vv-tag {
	position: relative;
}

/* Estado activo del chip cuando su radio está marcado (selección real). */
.vv-single__tags .vv-tag:has(.vv-single__tag-input:checked) {
	background: var(--gold-600);
	color: var(--text-on-brand);
	border-color: var(--gold-600);
	box-shadow: var(--shadow-pill);
}

.vv-single__tag-input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

/* Campo de personalización (input pill del sistema). */
.vv-single__personalize {
	width: 100%;
	max-width: 340px;
	margin-bottom: var(--space-6);
}

/* --- Fila de compra: cantidad + botón primario --------------------------- */
.vv-single__buy {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

/* --- Stepper de cantidad (como la guía) ---------------------------------
   Tres piezas: botón "−" en caja crema redondeada · caja BLANCA con el número ·
   botón "+" en caja crema redondeada. Los botones −/+ los inyecta main.js como
   mejora progresiva; el input.qty nativo de Woo es la caja blanca del medio.
   Sin JS, el input sigue siendo un campo redondeado usable. */
.vv-single__buy .quantity {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* Botones de paso − / + : caja crema redondeada con el glifo centrado. */
.vv-single__buy .quantity .vv-qty__btn {
	-webkit-appearance: none;
	appearance: none;
	width: 52px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-lg);
	line-height: 1;
	color: var(--ink-700);
	background: var(--gold-100);
	border: var(--border-w) solid var(--gold-200);
	border-radius: var(--radius-md);
	cursor: pointer;
	user-select: none;
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.vv-single__buy .quantity .vv-qty__btn:hover {
	background: var(--gold-200);
	color: var(--ink-900);
}

.vv-single__buy .quantity .vv-qty__btn:active {
	transform: var(--press-scale);
}

/* Caja blanca central con el número (input nativo de Woo). */
.vv-single__buy .quantity input.qty {
	width: 64px;
	height: 56px;
	text-align: center;
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--text-md);
	color: var(--text-heading);
	background: var(--white);
	border: var(--border-w) solid var(--line-warm);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	padding: 0 var(--space-1);
	outline: none;
	/* Oculta las flechas nativas del number input (usamos −/+). */
	-moz-appearance: textfield;
	transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.vv-single__buy .quantity input.qty::-webkit-outer-spin-button,
.vv-single__buy .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vv-single__buy .quantity input.qty:focus {
	border-color: var(--gold-400);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --- Botón "Agregar al carrito" como pill CAMEL/TAUPE de marca ------------
   En la guía el botón es un pill camel apagado (no oro saturado) con texto
   crema y buen tracking. Woo lo pinta morado por defecto; lo alineamos usando
   solo tokens del sistema (--camel, pill, tipografía de marca). */
.vv-single .single_add_to_cart_button,
.vv-single .single_add_to_cart_button.button.alt,
.vv-single .single_add_to_cart_button.disabled,
.vv-single .single_add_to_cart_button.button.alt.disabled,
.vv-single .button.alt {
	/* !important porque WooCommerce repinta de morado el estado .button.alt y
	   sobre todo .button.alt.disabled (producto variable sin opción elegida). */
	flex: 1 1 auto;
	min-width: 240px;
	background: var(--camel) !important;
	color: var(--text-on-brand) !important;
	border: var(--border-w-2) solid var(--camel);
	border-radius: var(--radius-pill);
	min-height: 58px;
	padding: 16px 40px;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-base);
	/* Tracking algo más amplio para casar con el "AGREGAR AL CARRITO" del
	   mockup (texto en mayúscula inicial, separado). */
	letter-spacing: 0.06em;
	box-shadow: var(--shadow-pill);
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--dur) var(--ease-out), filter var(--dur),
		background var(--dur), border-color var(--dur);
}

/* Estado deshabilitado (variable sin opción): dorado atenuado, no morado. */
.vv-single .single_add_to_cart_button.disabled,
.vv-single .single_add_to_cart_button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

.vv-single .single_add_to_cart_button:hover:not(:disabled),
.vv-single .button.alt:hover:not(:disabled) {
	/* Oscurece ligeramente el camel en hover (sin saltar a oro). */
	background: var(--gold-500) !important;
	border-color: var(--gold-500);
}

.vv-single .single_add_to_cart_button:active {
	transform: var(--press-scale);
}

/* --- Nota de envío gratis (texto pequeño bajo la compra) ----------------- */
.vv-single__shipping-note {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: var(--space-3) 0 0;
}

/* CTA de WhatsApp bajo el formulario. */
.vv-single__whatsapp {
	margin-top: var(--space-5);
}

/* ==========================================================================
   FILA DE PILARES / TRUST BADGES (como en la guía de detalle)
   --------------------------------------------------------------------------
   Reutiliza los iconos webp de la home (vv-pillars), aquí en círculos
   compactos con divisores verticales entre cada uno.
   ========================================================================== */

.vv-single__features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-2);
	width: 100%;
	margin: var(--space-8) 0 0;
	padding: var(--space-6) 0 0;
	list-style: none;
	border-top: var(--border-hair);
}

.vv-single__feature {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	padding-inline: var(--space-2);
}

/* Divisor vertical corto entre pilares. */
.vv-single__feature:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 56px;
	background: var(--line);
}

/* Forma de "arco" (rounded top, base más recta) como en la guía, no círculo. */
.vv-single__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 64px;
	border-radius: 999px 999px var(--radius-md) var(--radius-md);
}

.vv-single__feature-icon--malva { background: var(--malva-200); }
.vv-single__feature-icon--sage  { background: var(--sage-200); }
.vv-single__feature-icon--terra { background: var(--terra-200); }
.vv-single__feature-icon--camel { background: var(--camel-300); }

.vv-single__feature-img {
	width: auto;
	height: auto;
	max-width: 32px;
	max-height: 34px;
}

.vv-single__feature-label {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-2xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--ink-700);
	text-transform: uppercase;
	max-width: 12ch;
}

/* ==========================================================================
   META DEL PRODUCTO (SKU/categorías/etiquetas)
   ========================================================================== */

.vv-single__meta {
	margin-top: var(--space-8);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.vv-single__meta .sku_wrapper,
.vv-single__meta .posted_in,
.vv-single__meta .tagged_as {
	display: block;
	margin-bottom: var(--space-1);
}

.vv-single__meta a {
	color: var(--gold-700);
}

/* ==========================================================================
   SECCIÓN INFERIOR (pestañas, relacionados, upsells)
   ========================================================================== */

.vv-single__after {
	padding-bottom: var(--space-16);
}

.vv-single__after .woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: 0;
	margin: 0 0 var(--space-6);
	border-bottom: var(--border-hair);
}

.vv-single__after .woocommerce-tabs ul.tabs li {
	list-style: none;
}

.vv-single__after .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.vv-single__after .woocommerce-tabs ul.tabs li.active a {
	color: var(--gold-700);
	border-bottom: var(--border-w-2) solid var(--gold-600);
}

/* Títulos de las secciones inferiores con la voz display. */
.vv-single__after h2 {
	font-family: var(--font-display);
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--text-heading);
}

/* ==========================================================================
   RESPONSIVE — una columna en pantallas pequeñas
   ========================================================================== */

@media (max-width: 980px) {
	.vv-single .vv-single__inner {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	/* En móvil la galería va arriba y el panel debajo; sin sticky. */
	.vv-single__gallery {
		position: static;
		top: auto;
	}

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

	.vv-single__summary {
		align-items: stretch;
	}
}

/* --- Móvil: compra apilada y CTAs a ancho completo ----------------------- */
@media (max-width: 600px) {
	/* La fila de compra pasa a fila cantidad + botón flexible; si no caben,
	   el botón salta de línea a ancho completo. */
	.vv-single__buy .single_add_to_cart_button {
		width: 100%;
		flex: 1 1 100%;
	}

	/* CTA de WhatsApp a ancho completo en móvil. */
	.vv-single__whatsapp,
	.vv-single__whatsapp.vv-btn {
		width: 100%;
		justify-content: center;
	}

	/* Pilares: 2 columnas en móvil para que respiren. */
	.vv-single__features {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6) var(--space-2);
	}

	/* Sin divisor en el inicio de cada fila de 2 columnas. */
	.vv-single__feature:nth-child(odd)::before {
		display: none;
	}
}

/* --- Móvil estrecho: título más contenido -------------------------------- */
@media (max-width: 480px) {
	.vv-single__title {
		font-size: var(--text-xl);
	}

	.vv-single__price .vv-price-pill,
	.vv-single__price .vv-price-pill ins,
	.vv-single__price .vv-price-pill .amount {
		font-size: var(--text-xl);
	}
}