/* ==========================================================================
   Catálogo (PLP)

   Encabezado centrado, filtros a la izquierda en escritorio y en tiras de
   chips en celular, grilla de tarjetas a la derecha.

   Prefijos propios del área: .mvk-shop-, .mvk-filter-, .mvk-chip.
   ========================================================================== */

/*
 * 🚨 Acá NO se reserva el alto del header.
 *
 * Lo hace header.css con `body:not(.home) { padding-block-start:
 * var(--mvk-hdr-offset) }`, que cubre todas las pantallas sin hero de una vez.
 * Esta regla lo reservaba OTRA VEZ: 102px de más en celular, sumados al
 * respiro de sección de .mvk-shop-wrap. Entre el header y el rótulo
 * "CATÁLOGO" quedaban más de 200px de blanco, que en una pantalla de celular
 * es media pantalla desperdiciada antes de ver el primer producto.
 *
 * Quedó de cuando shop.css se escribió, antes de que header.css tuviera la
 * regla global.
 */
.mvk-shop {
  background: var(--mvk-white);
}

.mvk-shop-wrap {
  max-width: var(--mvk-max-wide);
  margin: 0 auto;
  padding-inline: var(--mvk-pad);
  padding-block: var(--mvk-sec-top) var(--mvk-sec-bottom);
}

/* --- Encabezado ---------------------------------------------------------- */

.mvk-shop-head {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  margin-block-end: clamp(28px, 4vw, 56px);
}

.mvk-shop-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 600 10px/1 var(--mvk-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mvk-text-soft-light);
}

/* Los dos filetes que flanquean el rótulo */
.mvk-shop-rule {
  display: block;
  width: clamp(28px, 6vw, 64px);
  height: 1px;
  background: var(--mvk-line);
}

.mvk-shop-title { font-size: var(--mvk-h1-page); }

.mvk-shop-count {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--mvk-text-mid);
}

/* --- Cuerpo: filtros + grilla -------------------------------------------- */

.mvk-shop-body {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
}

/*
 * 🚨 min-width: 0 en los hijos del grid.
 *
 * Los ítems de un grid nacen con min-width:auto, o sea que NO pueden achicarse
 * por debajo del ancho de su contenido. La tira de chips es más ancha que la
 * pantalla y estiraba la columna entera a 1114px sobre un viewport de 390,
 * arrastrando scroll horizontal a todo el catálogo.
 *
 * El overflow-x:auto de la tira no alcanza: para cuando entra en juego, el
 * padre ya creció. Hay que dejar que la columna se achique primero.
 */
.mvk-shop-filters,
.mvk-shop-main {
  min-width: 0;
}

/* --- Filtros ------------------------------------------------------------- */

.mvk-filter-group + .mvk-filter-group { margin-block-start: 22px; }

.mvk-filter-h {
  margin: 0 0 10px;
  display: block;
}

/*
 * En celular cada grupo es una tira horizontal deslizable, con un desvanecido
 * en el borde derecho que insinúa que hay más. El degradado va sobre el color
 * de fondo real, no sobre blanco puro, para que no se note el corte.
 */
.mvk-filter-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-block-end: 2px;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}

.mvk-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--mvk-line);
  background: var(--mvk-white);
  /* 🚨 Chip en REPOSO: gris medio, no negro pleno (prototipo, función lnk(),
     rama narrow: 500 10.5px/1, .12em, #6B6B6B).
     Con todos los rótulos en negro las cuatro tiras —categoría, talle, color y
     orden— pesaban lo mismo que el chip elegido salvo por el relleno, así que
     a 390px la fila de chips competía de igual a igual con el título CATÁLOGO
     y con la grilla, que es lo que hay que mirar. El elegido se invierte a
     negro (.is-on) y ahí sí salta solo.
     --mvk-text-mid es #6B6B6B: 5.33:1 sobre blanco, cumple AA de sobra.
     El tracking queda en .12em y no en el rango .2em–.32em de la regla 4 a
     propósito: eso es para RÓTULOS de sección; esto es un control, y a .2em
     "MENOR PRECIO" no entra en la columna de 210px de escritorio. */
  color: var(--mvk-text-mid);
  font: 500 10.5px/1 var(--mvk-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .25s var(--mvk-ease), background .25s var(--mvk-ease), color .25s var(--mvk-ease);
}

.mvk-chip:hover { border-color: var(--mvk-black); color: var(--mvk-black); }

/*
 * El filtro puesto se marca con inversión de color Y con aria-current en el
 * PHP: no alcanza con el color solo. El borde negro sobre fondo negro además
 * mantiene el área de foco visible.
 */
.mvk-chip.is-on {
  background: var(--mvk-black);
  border-color: var(--mvk-black);
  color: var(--mvk-white);
}

.mvk-chip:focus-visible {
  outline: 2px solid var(--mvk-black);
  outline-offset: 2px;
}

/* El punto de color del chip de color lleva borde: el crudo y el blanco
   sobre fondo blanco desaparecerían. */
.mvk-chip-dot {
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(12, 11, 11, .22);
}

/* --- Grilla -------------------------------------------------------------- */

/* 🚨 DOS columnas en celular, no una: es un chequeo explícito del handoff. */
.mvk-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px) clamp(10px, 1.6vw, 22px);
}

/* --- Estado vacío -------------------------------------------------------- */

.mvk-shop-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-block: clamp(48px, 9vw, 110px);
  text-align: center;
}

.mvk-shop-empty-title {
  margin: 0;
  font-family: var(--mvk-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mvk-title-ls);
  line-height: var(--mvk-title-lh);
  font-size: clamp(22px, 4vw, 38px);
}

.mvk-shop-empty-sub {
  margin: 0;
  font: 300 14px/1.6 var(--mvk-sans);
  color: var(--mvk-text-mid);
}

.mvk-shop-empty-btn {
  margin-block-start: 8px;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 28px;
  background: var(--mvk-black);
  color: var(--mvk-white);
  font: 600 11px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: opacity .25s var(--mvk-ease);
}

.mvk-shop-empty-btn:hover { color: var(--mvk-white); opacity: .84; }

/* --- Paginación ---------------------------------------------------------- */

.mvk-shop-main .woocommerce-pagination {
  margin-block-start: clamp(32px, 5vw, 64px);
  text-align: center;
}

.mvk-shop-main .woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.mvk-shop-main .woocommerce-pagination li { border: 0; }

.mvk-shop-main .woocommerce-pagination a,
.mvk-shop-main .woocommerce-pagination span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--mvk-line);
  font: 500 12px/1 var(--mvk-mono);
}

.mvk-shop-main .woocommerce-pagination .current {
  background: var(--mvk-black);
  border-color: var(--mvk-black);
  color: var(--mvk-white);
}

/* ==========================================================================
   Escritorio: filtros en columna fija a la izquierda
   ========================================================================== */

@media (min-width: 1080px) {

  .mvk-shop-body {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
  }

  /* La columna acompaña el scroll: el catálogo es mucho más largo que ella. */
  .mvk-shop-filters {
    position: sticky;
    top: calc(var(--mvk-hdr-offset-scrolled, var(--mvk-hdr-offset, 102px)) + 16px);
  }

  .mvk-filter-group + .mvk-filter-group { margin-block-start: 28px; }

  /* En columna los chips se apilan y no hace falta ni scroll ni máscara. */
  .mvk-filter-list {
    flex-wrap: wrap;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mvk-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ==========================================================================
   MVK-MODOS: las cuatro entradas del menu dejan de ser la misma pantalla
   ==========================================================================
   Categorias, Nuevos ingresos, Mas vendidos y Sale comparten esta plantilla
   —eso mantiene vivos los filtros, la paginacion y las direcciones
   compartibles— y llegan con .mvk-shop--MODO en el <main>.

   🚨 Este archivo NO toca .mvk-card* ni .mvk-cat: son de home-rails.css y de
   home-hero.css, y una clase definida en dos areas rompe el build (con razon).
   El enganche son VARIABLES: aca se declaran, alla se consumen, y el valor por
   defecto de cada una es exactamente el aspecto de siempre.
   ========================================================================== */

.mvk-shop-sub {
  max-width: 52ch;
  margin: 14px auto 0;
  font: 300 clamp(14px, 1.5vw, 16px)/1.6 var(--mvk-sans);
  color: var(--mvk-text-mid);
  text-align: center;
  text-wrap: pretty;
}

/* Sale: cuanto baja es el dato principal. */
.mvk-shop--sale {
  --mvk-card-off-size: 13px;
  --mvk-card-off-weight: 700;
}

/*
 * 🚨 ACA ESTABA "--mvk-card-old-op: .75" Y SE SACO: ATENUAR EL PRECIO TACHADO
 * LO DEJA POR DEBAJO DEL MINIMO LEGIBLE.
 *
 * El gris del precio de lista es #767676, que sobre blanco da 4,54:1 — pasa,
 * pero con lo justo. Bajarlo al 75% lo compone a #989898 y cae a 2,88:1.
 *
 * Y el precio tachado no es decoracion: es contra lo que la persona compara
 * para decidir si el descuento le sirve. En la pantalla de rebajas, menos que
 * en ninguna otra, puede ser el dato ilegible. El enfasis ya lo carga el
 * porcentaje en negro pleno; apagar el otro no sumaba nada.
 */

/* Nuevos ingresos: la etiqueta "Nuevo" —que la tarjeta ya pone sola en lo que
   entro hace menos de 30 dias— pasa a negro pleno. */
.mvk-shop--novedades {
  --mvk-card-badge-bg: var(--mvk-black);
  --mvk-card-badge-fg: var(--mvk-white);
}

/* Mas vendidos: el numero de puesto, y la etiqueta corrida para no pisarlo. */
.mvk-shop--vendidos {
  --mvk-card-rank: counter(mvk-puesto);
  --mvk-card-badge-x: auto 14px;
}

.mvk-shop--vendidos .mvk-shop-grid { counter-reset: mvk-puesto; }

/* Categorias: el mosaico va pegado al encabezado, sin el aire de una seccion
   entera en el medio. */
.mvk-shop--categorias {
  --mvk-cat-pad-top: 0;
}

.mvk-shop--categorias .mvk-shop-wrap { padding-block-end: 0; }