/* ==========================================================================
   V2 · LA TIENDA (2-oct-2026, ronda 5)
   Carga después de v2.css sólo con ?vista=v2 (inc/portada-v2.php). Todo cuelga
   de .rv-v2 o de clases v2t-*: la tienda viva no ve este archivo.

   Plan (skill frontend-design):
   · Tokens del sitio: negro #1A1A1A, magenta #D6006E, magenta oscuro, rubor
     #FCF1F6, gris línea. Playfair para nombres y precios, Jost para lo demás.
     Esquinas de 2 px (--radio). Nada de sombras de tarjeta genéricas.
   · Lo memorable en UN lugar: la escalera de precios de la línea, que dibuja
     el tabulador real (rvpre_tabla) como peldaños que bajan. Lo demás quieto.
   · Celular primero (79 % de las compras): la tira de líneas se desliza con
     el dedo, Filtros y Orden van juntos y pegados arriba al bajar.
   ========================================================================== */

.rv-v2 { --rubor: #FCF1F6; --rubor-linea: #F3C2DA; }

/* ---------- 1. Encabezado: título, nota y precio por volumen en UNA línea ----------
   2a vuelta (Fer: «horrible»): fuera la caja rosa con barras y las tarjetas con
   borde. El precio por volumen es un renglón tipográfico, el mejor en fucsia. */
.rv-v2 .v2t-cab { display: grid; gap: 18px; }
@media (min-width: 901px) {
  body.rv-v2:has(#rv-notas:checked) .v2t-cab:has(.v2t-cab__notas) { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; align-items: start; }
}
.rv-v2 .v2t-cab__txt .h1 { text-wrap: balance; }
.rv-v2 .v2t-lead {
  margin-top: 12px; max-width: 60ch; font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.55; color: var(--negro-suave);
}
.rv-v2 .v2t-vol {
  margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font-size: .84rem; color: var(--gris); line-height: 1.4;
}
.rv-v2 .v2t-vol__t { color: var(--negro); font-weight: 500; }
.rv-v2 .v2t-vol__esc { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.rv-v2 .v2t-vol__esc i { font-style: normal; color: #CFC7C9; }
.rv-v2 .v2t-vol b { font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--negro); margin-left: 2px; }
.rv-v2 .v2t-vol__mejor, .rv-v2 .v2t-vol__mejor b, .rv-v2 .v2t-vol__corto b { color: var(--magenta); }
.rv-v2 .v2t-vol__corto { display: none; }
.rv-v2 .v2t-vol a { color: var(--negro); font-weight: 500; text-decoration: underline; text-decoration-color: var(--magenta); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rv-v2 .v2t-vol a:hover { color: var(--magenta); }
/* Notas para Rocío en su propia columna: no tapan nada. */
.rv-v2 .v2t-cab__notas { display: grid; gap: 12px; }
.rv-v2 .v2t-cab__notas .postit-ancla { height: auto; max-width: none; margin: 0; }
.rv-v2 .v2t-cab__notas .postit { position: relative; top: auto; right: auto; left: auto; width: auto; }
body.rv-v2:has(#rv-notas:not(:checked)) .v2t-cab__notas { display: none; }

/* ---------- 2. Las líneas: chips finos con miniatura redonda ---------- */
.rv-v2 .v2t-lineas {
  display: flex; gap: 8px; margin-top: 24px; padding: 2px 0;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
}
.rv-v2 .v2t-lineas::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .rv-v2 .v2t-lineas { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
/* Una sola fila siempre (~48 px). Si no caben, se desliza y la orilla derecha
   se desvanece para avisar que hay más (clase que pone v2-tienda.js). */
.rv-v2 .v2t-lineas--mas { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.rv-v2 .v2t-lineas--fin { -webkit-mask-image: none; mask-image: none; }
.rv-v2 .v2t-linea {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 13px 0 5px; border: 1px solid var(--gris-linea); border-radius: 999px;
  background: transparent; color: var(--negro); font-size: .84rem; font-weight: 500; white-space: nowrap;
  scroll-snap-align: start; transition: border-color .2s, background-color .2s, color .2s;
}
.rv-v2 .v2t-linea--todo { padding-left: 16px; }
.rv-v2 .v2t-linea:hover { border-color: var(--negro); }
.rv-v2 .v2t-linea:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.rv-v2 .v2t-linea.is-on { background: var(--negro); border-color: var(--negro); color: #fff; }
.rv-v2 .v2t-linea__foto { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--hueso); flex: none; }
.rv-v2 .v2t-linea__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-v2 .v2t-linea__n { font-size: .72rem; font-weight: 400; color: var(--gris); font-variant-numeric: tabular-nums; }
.rv-v2 .v2t-linea.is-on .v2t-linea__n { color: rgba(255, 255, 255, .72); }

/* Tableta y laptop chica: tres columnas de modelos en vez de dos tarjetas de
   640 px de alto (la compra rápida cabe de sobra en 210 px). */
@media (min-width: 700px) and (max-width: 1099px) {
  .rv-v2.woocommerce-shop .cat-lay .prods,
  .rv-v2.tax-product_cat .cat-lay .prods,
  .rv-v2.post-type-archive-product .cat-lay .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
}

/* Cel: el precio por volumen va corto («de $135 a $80 por blíster») y la nota
   de la línea en tres renglones; la nota completa vive en la ficha. */
@media (max-width: 600px) {
  .rv-v2 .v2t-lead { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .rv-v2 .v2t-vol__t, .rv-v2 .v2t-vol__esc { display: none; }
  .rv-v2 .v2t-vol__corto { display: inline; }
  .rv-v2 .v2t-vol { margin-top: 12px; }
  .rv-v2 .v2t-lineas { margin-top: 18px; margin-bottom: -14px; } /* la sección trae 34 px abajo en línea */
}

/* ---------- 3. Barra de resultados: Filtros + Orden, y lo elegido ---------- */
@media (min-width: 901px) {
  .rv-v2 .cat-bar.v2t-cabres {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "estado barra";
    align-items: center; gap: 12px 20px;
  }
  .rv-v2 .v2t-cabres .v2t-barra { grid-area: barra; }
  .rv-v2 .v2t-cabres .v2t-estado { grid-area: estado; }
}
.rv-v2 .v2t-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }

@media (max-width: 900px) {
  /* La barra se «disuelve» para que «Filtros + Orden» pueda pegarse arriba
     mientras se recorren los 66 modelos (sticky necesita al padre alto). */
  .rv-v2 .cat-bar.v2t-cabres { display: contents; }
  .rv-v2 .v2t-barra {
    position: sticky; top: var(--v2-hdr, 80px); z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter);
    background: #fff; border-bottom: 1px solid var(--gris-linea);
  }
  .rv-v2 .v2t-barra .cat-abrir { margin: 0; justify-content: center; min-height: 44px; padding: 10px 12px; }
  .rv-v2 .v2t-barra .woocommerce-ordering,
  .rv-v2 .v2t-barra .woocommerce-ordering select { width: 100%; height: 44px; min-height: 44px; }
  .rv-v2 .v2t-estado { margin: 12px 0 18px; }
}
.rv-v2 .v2t-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-v2 .v2t-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px 6px 14px;
  background: transparent; color: var(--negro); border: 1px solid var(--gris-linea);
  border-radius: 999px; font-size: .82rem; font-weight: 500; line-height: 1.1;
  transition: border-color .2s;
}
.rv-v2 .v2t-chip span { font-size: 1.15rem; line-height: 1; color: var(--magenta); }
.rv-v2 .v2t-chip:hover { border-color: var(--negro); }
.rv-v2 .v2t-chip:focus-visible,
.rv-v2 .v2t-limpiar:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.rv-v2 .v2t-limpiar { font-size: .82rem; font-weight: 500; color: var(--magenta-osc); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.rv-v2 .filtros__cab .v2t-limpiar { margin-left: auto; margin-right: 12px; }
@media (min-width: 901px) { .rv-v2 .filtros__cab .v2t-limpiar { display: none; } }

/* ---------- 4. Tarjetas ---------- */
/* En el cel la tarjeta mide 167 px: «$100 | Mayoreo desde $60» se partía en dos
   con la rayita colgando sola. Va en su propio renglón, sin rayita. */
@media (max-width: 600px) {
  .rv-v2 .prods .prod__precios { gap: 2px 8px; }
  .rv-v2 .prods .precio--may { flex-basis: 100%; border-left: 0; padding-left: 0; font-size: .74rem; }
  .rv-v2 .prods .v2rapida { gap: 6px; padding-top: 10px; }
}
/* Agotado: su botón de WhatsApp abajo, a la altura de los «Agregar» de al lado. */
.rv-v2 .prod:has(.v2t-vuelve) { height: 100%; }
/* El bloque negro «Ver ficha» sobre la foto sobra: la foto ya lleva a la ficha. */
.rv-v2 .prod:has(.v2t-vuelve) .prod__quick { display: none; }
.rv-v2 .prod:has(.v2t-vuelve) .prod__info { flex: 1; display: flex; flex-direction: column; }
.rv-v2 .v2t-vuelve {
  margin-top: auto; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 40px; padding: 8px 10px; border: 1px solid var(--negro); border-radius: var(--radio);
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--negro);
  transition: background-color .2s, color .2s;
}
.rv-v2 .prod:has(.v2t-vuelve) .prod__precios { margin-bottom: 12px; }
.rv-v2 .v2t-vuelve:hover { background: var(--negro); color: #fff; }

/* ---------- 5. Carga infinita ---------- */
/* woo.css pone display:inline-flex a los puntos y .btn al botón, y eso le gana
   al atributo hidden: al pie se veían los tres puntos quietos y un botón vacío
   aunque no estuviera cargando nada. (El mismo defecto está en la tienda viva.) */
.rv-v2 .cat-infinito [hidden] { display: none !important; }
.rv-v2 .cat-infinito { min-height: 44px; }