/* ==========================================================================
   Zarevo v2 — design/product.css  ·  PIEL "Vidriera cálida"
   Ficha de producto. Port fiel de la ficha de zarevo-design.css v1:
   galería sobre piedra redondeada 20px, título Bricolage 800, precio display
   en rojo, ATC roja (la viste el core), descripción/acordeones con hairlines,
   badge de oferta pill dentro de la media, sticky ATC cálido.

   Escribe SOLO sobre clases estables vc-* del core/template. El motor ya
   resuelve estructura y mecánica (core/product.css, ~780 líneas): esta capa
   sobreescribe con mayor especificidad SOLO donde la marca lo pide, usando
   los selectores compuestos del core (.vc-single, .woocommerce div.product…)
   para ganar la cascada de woocommerce-general sin !important.

   Reglas de color de la dirección:
   - ROJO (--accent) SOLO en: precio, ins de oferta, badge .onsale. Nada más.
   - El CTA add-to-cart hereda --cta-bg del core: NO se re-estiliza (solo el
     micro-ajuste de la barra sticky).
   - Todo lo demás = carbón (--brand / --brand-strong) / ink / hairline.
   ========================================================================== */

/* ── Galería: superficie de piedra, radio bespoke 20px ──────────────────
   v1: "galería sobre superficie suave, sin caja dura", 20px de radio. El core
   ya redondea .vc-gallery__main a --radius-lg (16) con hairline; acá subimos
   el panel de la media a 20px y bajamos el peso del borde para que la foto
   flote sobre la piedra cálida en vez de vivir en una caja. */
.vc-single__gallery { --vc-gallery-aspect: 4 / 5; }

.vc-single .vc-gallery__main {
	border-radius: 20px;
	background: var(--surface-2);
	border-color: var(--line);
	box-shadow: var(--sh-float);
}

/* Zoom con masa sobre la media (v1: scale al hover de la foto principal).
   Solo el <a> real (con lightbox) invita al zoom; el placeholder <div> no. */
a.vc-gallery__main img { transform-origin: center; }

/* ── Miniaturas: hairline + estado activo en carbón ─────────────────────
   El core ya marca la activa con border-color:--brand y sube la opacidad.
   Acá afinamos: la activa gana un anillo carbón nítido; el resto arranca
   apagado y despierta al hover, en el mismo lenguaje que las cards del shop. */
.vc-single .vc-gallery__thumb {
	border-radius: var(--radius-md);
	background: var(--surface-2);
}
.vc-single .vc-gallery__thumb.is-active,
.vc-single .vc-gallery__thumb[aria-current="true"] {
	border-color: var(--brand-strong);
	box-shadow: inset 0 0 0 1px var(--brand-strong);
}

/* ── Badge de oferta: pill de tint rojo dentro de la media ──────────────
   v1: WooCommerce lo emite como círculo recortado con offset negativo; lo
   fijamos adentro, arriba-izquierda, como pill. El core ya lo posiciona y le
   da radius-pill; acá bloqueamos el look de marca (tint --accent-soft + texto
   --accent-strong, peso display) por si otra capa lo pisó, y le damos aire. */
.vc-single__gallery .onsale,
.vc-single__gallery .vc-single__sale,
.woocommerce .vc-single__gallery span.onsale {
	padding: 0.4rem 0.7rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xs);
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--accent-strong);
	background: var(--accent-soft);
	box-shadow: var(--shadow-1);
}

/* ── Sumario: título display ─────────────────────────────────────────────
   v1: Bricolage 800, tracking -0.03em, line-height 1.02. El core arranca del
   token --fs-h1 con --lh-tight (1.06); acá aplicamos la firma de la marca. */
.vc-single .vc-single__title,
.vc-single .product_title.entry-title {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	color: var(--brand-strong);
}

/* Rating: estrellas en rojo (acento), link de conteo en ink discreto. */
.vc-single .vc-single__rating .star-rating { color: var(--accent); }
.vc-single .vc-single__rating-link {
	color: var(--ink-3);
	text-decoration: none;
}
.vc-single .vc-single__rating-link:hover { color: var(--brand-strong); }

/* ── Precio: display 800, lining-nums, rojo ──────────────────────────────
   v1: precio en --font-display peso 800; el <ins>/monto en el verde de marca,
   <del> muted. Acá el precio "normal" va en --brand-strong (carbón) y el
   número de OFERTA (ins) vira a --accent (rojo) — rojo reservado a precio/
   oferta/acción. <del> muted en --ink-3. El core ya fija tamaño y
   font-variant tabular con especificidad (0,4,2): igualamos esa cadena para
   ganarle sin !important. */
.vc-single .vc-single__price,
.woocommerce div.product p.price.vc-single__price {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--brand-strong);
	font-variant-numeric: lining-nums tabular-nums;
}
.vc-single .vc-single__price del,
.woocommerce div.product p.price.vc-single__price del {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--ink-3);
}
/* Con oferta: el precio vigente (ins) en rojo — único cromático de la zona. */
.vc-single .vc-single__price ins,
.woocommerce div.product p.price.vc-single__price ins {
	text-decoration: none;
	color: var(--accent);
	font-weight: inherit;
}

/* Descripción corta: cuerpo Inter, ink-2, medida cómoda (ya la fija el core;
   acá solo aseguramos el tono cálido del cuerpo). */
.vc-single .vc-single__excerpt { color: var(--ink-2); }

/* Precio de la variación elegida: misma firma display/roja que el sumario. */
.vc-single .single_variation .woocommerce-variation-price .price {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--brand-strong);
}
.vc-single .single_variation .woocommerce-variation-price .price ins {
	text-decoration: none;
	color: var(--accent);
}

/* Select de variación: foco en carbón (el borde de reposo lo da el core). */
.vc-single form.cart.vc-single__cart .vc-variations .vc-variations__value select:focus-visible {
	border-color: var(--brand-strong);
	outline-color: var(--focus-ring);
}
.vc-variations__reset:hover { color: var(--accent-strong); }

/* ── Add-to-cart: lo viste el core con --cta-bg (rojo) ───────────────────
   NO re-estilizar la .single_add_to_cart_button acá (hereda .vc-btn--primary
   → --cta-bg del core). El único cromático de "acción" ya está resuelto. */

/* ── Meta: links carbón con subrayado al hover ──────────────────────────
   Links de texto = ink, viran a --accent (rojo) recién en el hover. */
.vc-single .vc-single__meta-row a {
	color: var(--brand-strong);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
	transition: color var(--tr) var(--ease-out), text-decoration-color var(--tr) var(--ease-out);
}
.vc-single .vc-single__meta-row a:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* ── Acordeones: separadores hairline, no tarjetas ──────────────────────
   v1: descripción/detalles como filas separadas por hairline. El core ya
   arma <details> con hairlines --line y un marker en píldora. Acá: trigger en
   Bricolage (título) con tracking apretado; el marker vira a tint rojo suave
   al abrir para señalar el estado sin gritar; panel en cuerpo cómodo 1.75. */
.vc-accordion__summary {
	font-family: var(--font-display);
	letter-spacing: -0.015em;
	color: var(--brand-strong);
}
.vc-accordion__summary:hover { color: var(--accent-strong); }
.vc-accordion[open] > .vc-accordion__summary { color: var(--brand-strong); }
.vc-accordion[open] > .vc-accordion__summary .vc-accordion__marker {
	background: var(--accent-soft);
	color: var(--accent-strong);
}
/* Panel: cuerpo Inter, ink-2, interlínea generosa (v1: line-height 1.75),
   medida ~70ch (la fija el core). Solo reforzamos el tono. */
.vc-accordion__panel { color: var(--ink-2); line-height: 1.75; }
.vc-accordion__panel p { line-height: 1.75; }
.vc-accordion__panel h2,
.vc-accordion__panel h3 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--brand-strong);
}
/* Tabla de atributos: encabezado de fila en piedra, texto carbón. */
.vc-accordion__panel .shop_attributes th {
	color: var(--brand-strong);
	background: var(--surface-2);
}

/* Reseñas: estrellas en rojo, burbuja de comentario sobre raised. */
.vc-accordion__panel #reviews .star-rating,
.vc-accordion__panel #reviews p.stars a { color: var(--accent); }
.vc-accordion__panel #reviews .comment-text {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
}

/* ── Sticky ATC (mobile): panel cálido flotante ─────────────────────────
   v1/dirección: fondo --surface-raised, hairline superior, precio display,
   sombra cálida flotante (no la genérica). El botón hereda --cta-bg del core.
   El core ya lo fija abajo (mobile) / arriba (≥880); acá vestimos superficie,
   sombra y tipografía. */
.vc-sticky-atc {
	background: var(--surface-raised);
	box-shadow: var(--sh-float);
}
.vc-sticky-atc__name {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--brand-strong);
}
.vc-sticky-atc__price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--brand-strong);
	font-variant-numeric: lining-nums tabular-nums;
}
.vc-sticky-atc__price del { font-family: var(--font-sans); font-weight: 500; color: var(--ink-3); }
.vc-sticky-atc__price ins { text-decoration: none; color: var(--accent); }
.vc-sticky-atc__qty:focus-visible { border-color: var(--brand-strong); }

/* ── Relacionados / upsells: banda con hairline superior ────────────────
   Las tarjetas se visten en design/shop.css (.vc-card). Acá solo el respiro y
   el hairline que separa la sección del sumario, como en v1. El badge .onsale
   dentro de esas cards ya sale como pill de tint rojo por el core/shop. */
.vc-related,
.vc-upsells {
	border-top: var(--border-w) solid var(--line);
	padding-top: clamp(var(--sp-6), 5vw, var(--sp-8));
	margin-top: clamp(var(--sp-6), 5vw, var(--sp-8));
}
/* Cuando van encadenados, no dupliques el hairline/gap entre ambas bandas. */
.vc-upsells + .vc-related {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* ── Motion: zoom con masa sobre la media (dentro de no-preference) ──────
   v1: la foto principal hace scale al hover con easing quint. Contenido y
   anulado en (reduce) por el bloque del motor; acá agregamos SOLO el zoom de
   marca (el resto de transiciones ya viven en el core). */
@media (prefers-reduced-motion: no-preference) {
	a.vc-gallery__main img {
		transition: transform var(--tr-slow) var(--ease-out-quint);
	}
	a.vc-gallery__main:hover img { transform: scale(1.045); }
	.vc-single .vc-gallery__thumb {
		transition:
			border-color var(--tr) var(--ease-out),
			box-shadow var(--tr) var(--ease-out);
	}
	.vc-single__meta-row a { transition: color var(--tr) var(--ease-out); }
}