/* ==========================================================================
   VIDRIERA CÁLIDA — design/shop.css  ·  Piel de TIENDA (archive) + tarjeta.
   Port fiel de Zarevo v1 (.rn-product des-encajada → .vc-card). Light-only.
   El motor (core/shop.css) ya resuelve TODA la mecánica: acá sólo aplicamos
   la marca encima, ganando por especificidad donde el core pone caja/borde.

   Receta: card-clásica DES-ENCAJADA ("sin caja"). El objeto ES la media:
   fondo transparente, sin borde/sombra/padding de caja; foto en panel piedra
   con --radius-lg y zoom scale(1.045) al hover; leve translateY(-4px) en la
   card. Rojo (--accent) SOLO en precio de oferta, badge de oferta y wishlist
   activa. Precios en --font-display 700 con lining-nums tabular-nums.
   ========================================================================== */

/* ── Cabecera de tienda (.vc-shop-header) ─────────────────────────────────
   Título de archivo en display confiado (el core ya usa --font-display); acá
   apretamos el tracking al lenguaje de la marca y bajamos la descripción a
   ink-2. Sin hairline inferior: la vidriera respira, el grid abre el ritmo. */
.vc-shop-header__title {
	letter-spacing: -0.03em;
	line-height: var(--lh-tight);
}
.vc-shop-header .term-description,
.vc-shop-header > p {
	color: var(--ink-2);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────
   El separador del core cae en --line (casi invisible sobre paper): lo
   subimos un punto para que se lea, como en v1. */
.vc-breadcrumbs__sep {
	color: var(--ink-3);
}

/* ── Result count / orderby (fallback nativo) ─────────────────────────────
   El select del orderby usa --radius-md (contrato de inputs de la marca). */
.vc-orderby__select {
	border-radius: var(--radius-md);
}

/* ========================================================================
   TARJETA DE PRODUCTO — .vc-card DES-ENCAJADA (port .rn-product v1)
   ======================================================================== */

/* La card deja de ser caja: sin fondo, sin borde, sin sombra, sin overflow
   recortando la sombra flotante de nada. El objeto visual es la media. Se
   gana al core (.vc-card { background; border; border-radius; overflow }) con
   la misma especificidad de clase + el peso del orden de carga de la capa
   design. Reseteamos overflow para que un translate no se clipee. */
.vc-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
/* El core pone :hover { border-color; box-shadow }: lo anulamos — el hover
   de esta receta vive en la media (zoom) y en la card (lift), no en un borde. */
.vc-card:hover {
	border-color: transparent;
	box-shadow: none;
}

/* ── Media: el panel piedra con la foto (el corazón de la vidriera) ────────
   Radio grande diferenciado (--radius-lg), fondo piedra, foto object-cover.
   overflow hidden acá (no en la card) para recortar SOLO el zoom de la img. */
.vc-card__media {
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	box-shadow: var(--shadow-1);
	overflow: hidden;
}

/* ── Cuerpo: sin padding lateral de caja; sólo aire vertical bajo la media ──
   Como la card ya no es caja, el texto se alinea al borde de la media. */
.vc-card__body {
	padding: var(--sp-3) 0 0;
	gap: 0.25rem;
}

/* ── Categoría: eyebrow sobrio en muted, sans 500 uppercase chico ──────────
   (En v1 = .rn-cat context; acá el core ya da el tratamiento — reforzamos
   peso y tono para que pegue con el resto de las pieles.) */
.vc-card__cat {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--ink-3);
}

/* ── Título: sans/display chico peso 600, ink → carbón fuerte al hover ─────
   v1 usaba peso 600 con tracking apretado y color verde-900 (acá carbón). */
.vc-card__title {
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: var(--lh-snug);
}
.vc-card__title a {
	color: var(--ink);
}
.vc-card__title a:hover {
	color: var(--brand-strong);
}

/* ── Rating: estrellas en acento (única salvedad cromática ok) ─────────────
   El core ya deja .star-rating en --accent; el conteo en muted. */
.vc-card__rating-count {
	color: var(--ink-3);
}

/* ── Precio: display peso 700, lining-nums tabular-nums; oferta en rojo ────
   Decisión v1: .rn-product .price/ins/.amount en --font-display 700. El <del>
   (precio tachado) va a --ink-3; el <ins> (precio vigente) al rojo-700 de
   texto-acento (contraste alto sobre claro). */
.vc-card__price {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--brand-strong);
	font-variant-numeric: lining-nums tabular-nums;
}
.vc-card__price del {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--ink-3);
}
.vc-card__price ins {
	font-weight: 700;
	color: var(--accent-strong);
}

/* ========================================================================
   BADGES — nuevo (carbón sobrio) · oferta (rojo) · agotado (neutro). Pill.
   ======================================================================== */
/* El core ya los pone en columna arriba-izquierda con --radius-pill. Acá sólo
   afinamos color al lenguaje de marca (v1: --new verde-tint, --sale rojo,
   --soldout arena). "Nuevo" = carbón soft sobrio; "Oferta" = rojo; "Agotado"
   = neutro apagado. */
.vc-badge {
	font-weight: 600;
	letter-spacing: 0.05em;
	box-shadow: var(--shadow-1);
}
.vc-badge--nuevo {
	background: var(--brand-soft);
	color: var(--brand-strong);
}
/* Oferta = rojo pleno. Subimos la especificidad a .vc-card__badges .vc-badge--oferta
   (0,0,2,0) para ganarle a la regla de contexto del core (.vc-card__badges .onsale,
   que pinta el sale-flash claro) TANTO en la tienda como en la home (featured/newest,
   fuera de .woocommerce ul.products). El sale-flash es span.onsale.vc-badge--oferta,
   así que este selector también lo cubre. */
.vc-card__badges .vc-badge--oferta {
	background: var(--accent);
	color: var(--cta-ink);
}
.vc-badge--agotado {
	background: var(--surface-2);
	color: var(--ink-3);
}

/* El sale-flash del core (span.onsale.vc-badge--oferta) se fuerza a fluir en
   .vc-card__badges con selectores más específicos (fix core:492): acá sólo
   viramos su tinte al rojo pleno con texto blanco, igualando a --oferta.
   Igualamos la especificidad del core (3 clases) para ganarle el fondo. */
.woocommerce ul.products li.product .vc-card__badges .onsale,
.woocommerce-page ul.products li.product .vc-card__badges .onsale {
	background: var(--accent);
	color: var(--cta-ink);
	font-weight: 600;
	letter-spacing: 0.05em;
	box-shadow: var(--shadow-1);
}

/* ── Wishlist (corazón): ink → rojo al hover/activo, panel raised flotante ──
   El core ya lo deja como botón circular raised con sombra. Reforzamos que el
   estado activo (aria-pressed) rellene en rojo pleno (v1 usaba acento-700). */
.vc-wish {
	color: var(--ink-2);
	box-shadow: var(--sh-float);
}
.vc-wish:hover {
	color: var(--accent-strong);
	border-color: var(--accent);
}
.vc-wish[aria-pressed="true"] {
	color: var(--accent);
	border-color: var(--accent);
}

/* ── Quick view: pill hairline sobre la media (no la banda oscura del core) ─
   Reformulamos el disparador como una PÍLDORA claro-raised flotando abajo a
   la izquierda de la media (más de "vidriera premium" que la barra full-width
   oscura). Sigue oculto hasta hover/foco; en touch queda visible. */
.vc-qv-btn {
	inset: auto auto var(--sp-3) var(--sp-3);
	width: auto;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--surface-raised);
	color: var(--brand-strong);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-pill);
	box-shadow: var(--sh-float);
	transform: translateY(0.5rem);
}
.vc-qv-btn:hover {
	color: var(--brand-strong);
	border-color: var(--brand);
	background: var(--surface-raised);
}
.vc-qv-btn:focus-visible {
	outline-offset: 2px;
}

/* ========================================================================
   FILTROS — panel/rail (.vc-filters) + chips activos + toggle mobile
   ======================================================================== */
/* Rail limpio sin caja: los grupos ya se separan por hairline (core). No le
   ponemos borde/fondo de panel — deja respirar como el resto de la vidriera.
   Inputs de precio en --radius-md (contrato de inputs). */
.vc-filters__price-input,
.vc-filters__orderby {
	border-radius: var(--radius-md);
}
.vc-filters__legend {
	letter-spacing: -0.01em;
}
/* Checkbox marca: accent-color al carbón (el core ya lo hace); hover del ítem
   a la banda piedra. El clear vira a rojo (única acción destructiva). */
.vc-filters__clear:hover {
	color: var(--accent-strong);
}

/* Toggle off-canvas (mobile): pill carbón sobrio, no un botón de color. */
.vc-filters-toggle:hover {
	border-color: var(--brand);
	color: var(--brand-strong);
}

/* ── Chips de filtros activos ──────────────────────────────────────────────
   Chip = pill piedra-carbón sobria (NO rojo: no es conversión). Hover marca
   el borde en carbón. El chip "limpiar todo" es el único que vira a rojo. */
.vc-chip {
	background: var(--surface-2);
	color: var(--brand-strong);
	font-weight: 500;
}
.vc-chip:hover {
	border-color: var(--brand);
}
.vc-chip--clear {
	background: transparent;
	border-color: var(--line);
	color: var(--ink-3);
}
.vc-chip--clear:hover {
	color: var(--accent-strong);
	border-color: var(--accent);
}

/* ========================================================================
   PAGINACIÓN — píldoras hairline; activa en carbón pleno (no rojo)
   ======================================================================== */
/* El core ya resetea la caja del core-woo y aplica píldoras. Acá fijamos la
   estética de marca: hover en banda piedra + borde carbón; página actual en
   carbón pleno con texto blanco (la conversión-rojo se reserva al CTA). */
.vc-pagination a.page-numbers:hover,
.woocommerce nav.vc-pagination ul.page-numbers li a:hover {
	border-color: var(--brand);
	color: var(--brand-strong);
	background: var(--surface-2);
}
.vc-pagination .page-numbers.current,
.woocommerce nav.vc-pagination ul.page-numbers li span.current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--cta-ink);
}

/* ========================================================================
   ESTADO VACÍO — sin caja dura; tono editorial sobrio
   ======================================================================== */
/* Reemplazamos el borde discontinuo del wireframe por el aviso limpio del
   core (el .woocommerce-info ya trae su caja piedra). Sólo centramos el tono. */
.vc-empty {
	color: var(--ink-2);
}
.vc-empty .woocommerce-info {
	border-radius: var(--radius-md);
}

/* ========================================================================
   QUICK VIEW (modal) — panel raised flotante con sombra cálida
   ======================================================================== */
/* El core ya lo monta como panel --surface-raised con --radius-lg y sombra.
   Acá sólo cambiamos la sombra genérica por la cálida bespoke (--sh-soft),
   ponemos el título en display apretado y el precio en display 700. El overlay
   se mantiene con la mezcla carbón del core. */
.vc-qv-modal__dialog {
	box-shadow: var(--sh-soft);
}
.vc-qv__title {
	letter-spacing: -0.025em;
	line-height: var(--lh-tight);
	color: var(--brand-strong);
}
.vc-qv__price {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--brand-strong);
	font-variant-numeric: lining-nums tabular-nums;
}
.vc-qv__price del {
	color: var(--ink-3);
}
.vc-qv__price ins {
	font-weight: 700;
	color: var(--accent-strong);
}
/* Media del quick view en panel piedra con radio de tarjeta (como la card). */
.vc-qv__media {
	border-radius: var(--radius-lg);
}
/* Link "ver ficha completa": texto ink con subrayado hairline → rojo al hover
   (patrón de link de texto de la marca, no botón). */
.vc-qv__full {
	color: var(--brand-strong);
	text-decoration-color: var(--line);
}
.vc-qv__full:hover {
	color: var(--accent-strong);
	text-decoration-color: var(--accent);
}

/* ========================================================================
   MOTION — masa contenida; TODO dentro de no-preference, nada en reduce
   ======================================================================== */
/* La card se levanta y la foto hace zoom con el easing de orquestación
   (--ease-out-quint), como en v1 (.rn-product:hover translateY(-4px) +
   img scale(1.045)). El core ya declara la transición base de la img; acá
   sobre-escribimos el destino del zoom y agregamos el lift de la card. */
@media (prefers-reduced-motion: no-preference) {
	.vc-card {
		transition: transform var(--tr-slow) var(--ease-out-quint);
	}
	.vc-card:hover {
		transform: translateY(-4px);
	}
	.vc-card__media-link img {
		transition: transform var(--tr-slow) var(--ease-out-quint);
	}
	.vc-card:hover .vc-card__media-link img {
		transform: scale(1.045);
	}
	.vc-qv-btn {
		transition: opacity var(--tr) var(--ease-out), transform var(--tr) var(--ease-out-quint);
	}
	.vc-qv-modal__dialog {
		animation: vc-qv-in var(--tr-slow) var(--ease-out-quint) both;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vc-card:hover,
	.vc-card:hover .vc-card__media-link img {
		transform: none;
	}
}