/* =========================================================
   NDX REJILLA DE OFERTAS

   Solo lo propio de la rejilla: cabecera, filtros, rejilla y
   boton de "ver mas". La TARJETA vive en offers.css y es
   literalmente la misma que la del carrusel (.ndx-offers__*),
   igual que el marco .ndx-offers. Duplicar aqui esas reglas
   habria significado que cualquier ajuste de la tarjeta
   tendria que aplicarse dos veces, y tarde o temprano una de
   las dos copias se queda atras.

   Responsive por CONTENEDOR, no por ventana: el bloque puede
   ir en una columna del 50 % de Elementor, donde el ancho
   real (~660 px) no tiene nada que ver con el del navegador
   (~1400 px). Con media queries se aplicaria siempre el
   layout de escritorio dentro de un hueco estrecho.
   ========================================================= */
.ndx-grid-wrap {
  container-type: inline-size;
  container-name: ndxgrid;
  display: flex;
  width: 100%;
}

/* ---------- Cabecera ---------- */
.ndx-grid__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  margin-bottom: 12px;
}

.ndx-grid__title {
  margin: 0;
  color: var(--ndx-off-title, var(--ndx-off-main));
  font-size: clamp(1.14rem, 0.98rem + 0.75cqi, 1.34rem);
  font-weight: 850;
  letter-spacing: -.015em;
  line-height: 1.12;
}

.ndx-grid__count {
  color: var(--ndx-off-muted);
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* La ordenacion se ancla a la derecha y no se mueve: es la referencia fija
   de la cabecera, como el enlace "ver todas" en el carrusel. */
.ndx-grid__sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.ndx-grid__sort label {
  margin: 0;
  color: var(--ndx-off-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* appearance:none quita la flecha nativa, que en Windows es enorme y no
   respeta el color del bloque; se repinta con dos degradados. */
.ndx-grid__sort select {
  max-width: 190px;
  padding: 6px 28px 6px 10px;

  color: var(--ndx-off-text);
  background-color: #fff;
  border: 1px solid var(--ndx-off-border);
  border-radius: 8px;

  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ndx-off-muted) 50%),
                    linear-gradient(135deg, var(--ndx-off-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.ndx-grid__sort select:focus-visible {
  outline: 3px solid var(--ndx-off-soft);
  outline-offset: 1px;
}

/* ---------- Filtros ---------- */
.ndx-grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--ndx-off-border);
}

.ndx-grid__filter {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;

  padding: 5px 12px;

  /* Los chips de filtro NO comparten color con el chip de caracteristica de
     la tarjeta: son dos cosas distintas (un control y un atributo del
     producto) y se configuran por separado. */
  color: var(--ndx-off-filter-text, var(--ndx-off-muted));
  background: var(--ndx-off-filter-bg, var(--ndx-off-chip-bg, #eef1f4));
  border: 1px solid transparent;
  border-radius: 999px;

  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.35;
  cursor: pointer;

  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.ndx-grid__filter:hover { border-color: var(--ndx-off-line); }

.ndx-grid__filter:focus-visible {
  outline: 3px solid var(--ndx-off-soft);
  outline-offset: 1px;
}

/* El estado activo no se marca solo con color: aria-pressed lo anuncia a los
   lectores de pantalla y es el mismo atributo que consulta el JS. */
.ndx-grid__filter[aria-pressed="true"] {
  color: var(--ndx-off-filter-active-text, #fff);
  background: var(--ndx-off-filter-active-bg, var(--ndx-off-main));
  border-color: var(--ndx-off-filter-active-bg, var(--ndx-off-main));
}

.ndx-grid__filter b { font-weight: 800; font-variant-numeric: tabular-nums; opacity: .75; }
.ndx-grid__filter[aria-pressed="true"] b { opacity: .85; }

/* ---------- Rejilla ---------- */
.ndx-grid__list {
  display: grid;
  grid-template-columns: repeat(var(--ndx-grid-cols, 4), minmax(0, 1fr));
  gap: 12px;
}

/* Las tarjetas ocultas NO se sacan del DOM: asi el navegador conserva la
   posicion de scroll, no se recrean nodos al filtrar y no hay que volver a
   descargar las imagenes al pulsar "ver mas".

   La regla hace falta porque .ndx-offers__card es display:flex, y eso gana
   al comportamiento por defecto del atributo hidden. */
.ndx-grid .ndx-offers__card[hidden] { display: none; }

/* ---------- Ver mas ---------- */
.ndx-grid__more {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.ndx-grid__more button {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 38px;
  padding: 9px 22px;

  color: var(--ndx-off-more, var(--ndx-off-main));
  background: var(--ndx-off-more-bg, #fff);
  border: 1px solid var(--ndx-off-more, var(--ndx-off-main));
  border-radius: 999px;

  font: inherit;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .04em;
  cursor: pointer;

  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Al pasar por encima se invierte: el fondo toma el color del texto y el
   texto el del fondo. Con "Principal oscuro" configurado, el borde y el
   fondo usan ese tono, que es para lo que existe ese campo. */
.ndx-grid__more button:hover {
  color: var(--ndx-off-more-bg, #fff);
  background: var(--ndx-off-dark, var(--ndx-off-more, var(--ndx-off-main)));
  border-color: var(--ndx-off-dark, var(--ndx-off-more, var(--ndx-off-main)));
}

.ndx-grid__more button:focus-visible {
  outline: 3px solid var(--ndx-off-soft);
  outline-offset: 2px;
}

.ndx-grid__more-icon { font-size: .95em; line-height: 1; }

.ndx-grid__empty {
  padding: 26px 10px;
  color: var(--ndx-off-muted);
  font-size: .84rem;
  font-weight: 600;
  text-align: center;
}

/* ---------- Responsive por contenedor ----------
   min() en lugar de un numero fijo: si el cliente configuro 2 columnas, un
   contenedor estrecho no debe SUBIRLO a 3. */
@container ndxgrid (max-width: 900px) {
  .ndx-grid__list {
    grid-template-columns: repeat(min(var(--ndx-grid-cols, 4), 3), minmax(0, 1fr));
  }
}

@container ndxgrid (max-width: 680px) {
  .ndx-grid .ndx-offers__main { padding: 14px 14px 16px; }
  .ndx-grid__list { grid-template-columns: repeat(min(var(--ndx-grid-cols, 4), 2), minmax(0, 1fr)); gap: 10px; }

  /* El desplegable deja de caber junto al titulo: pasa a ancho completo en
     lugar de encogerse hasta no poder leer la opcion elegida. */
  .ndx-grid__sort { margin-left: 0; width: 100%; }
  .ndx-grid__sort select { flex: 1 1 auto; max-width: none; }
}

@container ndxgrid (max-width: 400px) {
  .ndx-grid { border-radius: 12px; }
  .ndx-grid .ndx-offers__main { padding: 13px 12px 14px; }
  .ndx-grid__list { grid-template-columns: minmax(0, 1fr); }

  .ndx-grid__title { font-size: 1.30rem; font-weight: 900; line-height: 1.10; letter-spacing: -.02em; }

  /* Los chips pasan a una fila que se desplaza en horizontal: apilados
     ocuparian media pantalla antes del primer producto. */
  .ndx-grid__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 11px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ndx-grid__filters::-webkit-scrollbar { display: none; }
  .ndx-grid__filter { flex: 0 0 auto; font-size: .78rem; }

  .ndx-grid__count { font-size: .84rem; }
  .ndx-grid__sort label { font-size: .74rem; }
  .ndx-grid__sort select { font-size: .86rem; padding: 8px 30px 8px 12px; }
  .ndx-grid__more button { font-size: .84rem; min-height: 44px; }

  /* Con una sola columna la tarjeta es grande: el texto acompaña. Son los
     mismos valores que usa el carrusel en su tramo de 400 px. */
  .ndx-grid .ndx-offers__body { gap: 7px; padding: 11px 12px 13px; }
  .ndx-grid .ndx-offers__name { font-size: 1.02rem; line-height: 1.3; }
  .ndx-grid .ndx-offers__price { font-size: 1.34rem; }
  .ndx-grid .ndx-offers__price-old { font-size: .94rem; }
  .ndx-grid .ndx-offers__saving { font-size: .88rem; }
  .ndx-grid .ndx-offers__feature { font-size: .84rem; padding: 3px 11px; }
  .ndx-grid .ndx-offers__feature svg { width: 14px; height: 14px; }
  .ndx-grid .ndx-offers__badge { font-size: .84rem; padding: 3px 10px; }
}

/* Navegadores sin container queries (Chrome <105, Safari <16, Firefox <110):
   las mismas reglas por ventana. Sin esto ignorarian todo el bloque de
   arriba y se quedarian con la rejilla de escritorio en un movil. */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .ndx-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 680px) {
    .ndx-grid .ndx-offers__main { padding: 14px 14px 16px; }
    .ndx-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ndx-grid__sort { margin-left: 0; width: 100%; }
    .ndx-grid__sort select { flex: 1 1 auto; max-width: none; }
  }

  @media (max-width: 400px) {
    .ndx-grid { border-radius: 12px; }
    .ndx-grid .ndx-offers__main { padding: 13px 12px 14px; }
    .ndx-grid__list { grid-template-columns: minmax(0, 1fr); }
    .ndx-grid__title { font-size: 1.30rem; font-weight: 900; line-height: 1.10; letter-spacing: -.02em; }
    .ndx-grid__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 11px; scrollbar-width: none; }
    .ndx-grid__filters::-webkit-scrollbar { display: none; }
    .ndx-grid__filter { flex: 0 0 auto; font-size: .78rem; }
    .ndx-grid__count { font-size: .84rem; }
    .ndx-grid__sort select { font-size: .86rem; padding: 8px 30px 8px 12px; }
    .ndx-grid__more button { font-size: .84rem; min-height: 44px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ndx-grid * { transition: none !important; }
}