/* =========================================================
   NDX OFERTAS
   Hermano del comparador y del buscador de poliester: mismo
   esqueleto, container queries y colores por variables CSS que
   se emiten desde PHP ya saneados.
   ========================================================= */
.ndx-offers-wrap {
  container-type: inline-size;
  container-name: ndxoffers;
  display: flex;
  height: 100%;
}

.ndx-offers, .ndx-offers *, .ndx-offers *::before, .ndx-offers *::after { box-sizing: border-box; }

.ndx-offers {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 1280px;
  margin: 16px auto;

  color: var(--ndx-off-text);
  background: #fff;
  border: 1px solid var(--ndx-off-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(40, 25, 20, .10);

  font-family: var(--ndx-font, "Manrope", system-ui, -apple-system, sans-serif);
}

.ndx-offers__main { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 16px; }

/* ---------- Cabecera ----------
   Ancho holgado: todo en una fila.
   Ancho justo: el enlace se queda en su esquina, titulo y chip ocupan una
   fila propia y la cuenta atras baja a una tercera fila centrada. Sin esto,
   los tres bloques se reparten de forma desordenada al no caber. */
.ndx-offers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  margin-bottom: 12px;
}

.ndx-offers__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; 
  gap: 8px 10px;
  min-width: 0;
}

.ndx-offers__title {
  margin: 0;
  color: 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;
}

/* Descuento maximo de la seleccion, calculado en PHP. */
.ndx-offers__max {
  flex: 0 0 auto;
  padding: 3px 9px;
  color: #fff;
  background: var(--ndx-off-main);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ndx-offers__timer {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 10px;
  background: var(--ndx-off-soft);
  border: 1px solid var(--ndx-off-line);
  border-radius: 999px;
}

.ndx-offers__timer-label {
  color: var(--ndx-off-muted);
  font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.ndx-offers__timer-value {
  color: var(--ndx-off-main);
  font-size: .80rem; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* Empuja el enlace al extremo derecho. */
.ndx-offers__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ndx-off-main) !important;
  font-size: .70rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-decoration: none !important;
  white-space: nowrap;
}

.ndx-offers__all:hover { filter: brightness(1.15); }
.ndx-offers__all span { font-size: .95em; line-height: 1; }

/* ---------- Carrusel ---------- */
.ndx-offers__slider { position: relative; flex: 1 1 auto; }

.ndx-offers__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Espacio para que la sombra del hover no se recorte. */
  margin: -6px;
  padding: 6px;
}

.ndx-offers__viewport::-webkit-scrollbar { display: none; }

.ndx-offers__track { display: flex; gap: 12px; }

.ndx-offers__card {
  /* Cada tarjeta ocupa 1/N del ancho visible, descontando los huecos. */
  flex: 0 0 calc((100% - (var(--ndx-off-visible, 4) - 1) * 12px) / var(--ndx-off-visible, 4));
  scroll-snap-align: start;

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--ndx-off-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ndx-offers__card:hover {
  border-color: var(--ndx-off-main);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(40, 25, 20, .10);
}

/* ---------- Flechas ---------- */
.ndx-offers__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  padding: 0;

  color: var(--ndx-off-main);
  background: #fff;
  border: 1px solid var(--ndx-off-border);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(40, 25, 20, .16);

  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;

  transform: translateY(-50%);
  transition: opacity .15s ease, filter .15s ease;
}

.ndx-offers__arrow--prev { left: -8px; }
.ndx-offers__arrow--next { right: -8px; }
.ndx-offers__arrow:hover { filter: brightness(.97); }

.ndx-offers__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Tarjeta ---------- */
.ndx-offers__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  padding: 6px;
  background: #fff;
  border-bottom: 1px solid var(--ndx-off-border);
  overflow: hidden;
}

.ndx-offers__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* La etiqueta, el precio y el ahorro llevan variable propia con respaldo al
   color principal. La rejilla las define y los tiene independientes; el
   carrusel no las define, cae al respaldo y se ve exactamente igual que
   antes. Asi se separan los colores sin tocar lo que ya esta en produccion. */
.ndx-offers__badge {
  position: absolute;
  top: 7px; left: 7px;
  padding: 2px 7px;
  color: var(--ndx-off-badge-text, #fff);
  background: var(--ndx-off-badge-bg, var(--ndx-off-main));
  border-radius: 999px;
  font-size: .64rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ndx-offers__body { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; padding: 9px 10px 11px; }

.ndx-offers__name a {
  color: inherit;
  text-decoration: none;
}

.ndx-offers__name a:hover { color: var(--ndx-off-main); }

/* Sin boton, la tarjeta entera es el area de clic: esta capa cubre todo el
   recuadro y lleva a la ficha. El chip y los precios siguen siendo texto
   seleccionable porque la capa queda por debajo del contenido. */
.ndx-offers__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ndx-offers__body > * { position: relative; z-index: 2; }
.ndx-offers__name { position: relative; z-index: 2; }

.ndx-offers__name {
  margin: 0;
  color: var(--ndx-off-text);
  font-size: .78rem; font-weight: 750; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Columna: precio arriba, ahorro debajo, siempre. */
.ndx-offers__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;

  margin: auto 0 0;
}

/* Precio y precio tachado comparten fila y se alinean por linea base. */
.ndx-offers__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
}

.ndx-offers__price {
  color: var(--ndx-off-price, var(--ndx-off-main));
  font-size: 1.04rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ndx-offers__price-old {
  color: var(--ndx-off-muted);
  font-size: .72rem; font-weight: 600; text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.ndx-offers__saving {
  color: var(--ndx-off-saving, var(--ndx-off-main));
  font-size: .66rem; font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* Sufijo de unidad pegado al precio, en tono secundario. */
.ndx-offers__unit {
  margin-left: 1px;
  color: var(--ndx-off-muted);
  font-size: .62em;
  font-weight: 700;
  letter-spacing: 0;
}



/* ---------- Chip de caracteristica ----------
   Misma forma que la etiqueta de porcentaje, pero en tono neutro: es un
   atributo del producto, no una llamada a la accion. Se ajusta al texto
   (align-self) en lugar de ocupar todo el ancho. */
.ndx-offers__feature {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  align-self: flex-start;
  max-width: 100%;

  margin: 1px 0 0;
  padding: 2px 8px;

  background: var(--ndx-off-chip-bg, #eef1f4);
  border-radius: 999px;

  color: var(--ndx-off-chip-text, #5a6672);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.55;

}

.ndx-offers__feature svg {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}

.ndx-offers__feature span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Responsive por contenedor ---------- */
@container ndxoffers (max-width: 840px) {
  .ndx-offers__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 9px 12px;
  }

  .ndx-offers__headline { grid-column: 1; grid-row: 1; }

  /* El enlace se ancla arriba a la derecha, pase lo que pase debajo. */
  .ndx-offers__all {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    align-self: start;
  }

  .ndx-offers__timer {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

@container ndxoffers (max-width: 900px) {
  .ndx-offers__card {
    flex-basis: calc((100% - (min(var(--ndx-off-visible, 4), 3) - 1) * 14px) / min(var(--ndx-off-visible, 4), 3));
  }
}

@container ndxoffers (max-width: 680px) {
  /* El enlace se queda arriba a la derecha en TODOS los anchos: es la
     referencia fija de la cabecera. Solo la cuenta atras baja de fila. */
  .ndx-offers__main { padding: 14px 14px 15px; }
  .ndx-offers__title { font-size: 1.08rem; }
  .ndx-offers__price { font-size: .98rem; }
  .ndx-offers__card { flex-basis: calc((100% - 10px) / 2); }
  .ndx-offers__track { gap: 10px; }
}

@container ndxoffers (max-width: 400px) {
  .ndx-offers { border-radius: 12px; }
  .ndx-offers__main { padding: 13px 12px 14px; }
  .ndx-offers__card { flex-basis: 82%; }
  .ndx-offers__arrow { display: none; }

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

  .ndx-offers__all { font-size: .78rem; letter-spacing: .02em; }
  .ndx-offers__all span { font-size: .9em; }
  .ndx-offers__max { font-size: .90rem; padding: 4px 11px; }

  .ndx-offers__timer { padding: 6px 12px; }
  .ndx-offers__timer-label { font-size: .78rem; }
  .ndx-offers__timer-value { font-size: 1.02rem; }

  .ndx-offers__badge { font-size: .84rem; padding: 3px 10px; }

  .ndx-offers__body { gap: 7px; padding: 11px 12px 13px; }
  .ndx-offers__name { font-size: 1.02rem; line-height: 1.3; }
  .ndx-offers__price { font-size: 1.34rem; }
  .ndx-offers__price-old { font-size: .94rem; }
  .ndx-offers__saving { font-size: .88rem; }
  .ndx-offers__feature { font-size: .84rem; padding: 3px 11px; }
  .ndx-offers__feature svg { width: 14px; height: 14px; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 967px) {
    .ndx-offers__head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 9px 12px;
    }
    .ndx-offers__headline { grid-column: 1; grid-row: 1; }
    .ndx-offers__headline { align-self: start; }
    .ndx-offers__all { grid-column: 2; grid-row: 1; margin-left: 0; align-self: start; }
    .ndx-offers__timer { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  }

  @media (max-width: 900px) { .ndx-offers__card { flex-basis: calc((100% - 28px) / 3); } }
  @media (max-width: 680px) { .ndx-offers__card { flex-basis: calc((100% - 11px) / 2); } }
  @media (max-width: 400px) { 
      /* El título abraza más: es el elemento que debe dominar en móvil. */
      .ndx-offers__title {
        font-size: 1.30rem;
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -.02em;
      }
      .ndx-offers__card { flex-basis: 82%; }
    
      .ndx-offers__all { font-size: .78rem; letter-spacing: .02em; }
      .ndx-offers__max { font-size: .90rem; padding: 4px 11px; }
    
      .ndx-offers__timer { padding: 6px 12px; }
      .ndx-offers__timer-label { font-size: .78rem; }
      .ndx-offers__timer-value { font-size: 1.02rem; }
    
      .ndx-offers__badge { font-size: .84rem; padding: 3px 10px; }
    
      .ndx-offers__body { gap: 7px; padding: 11px 12px 13px; }
      .ndx-offers__name { font-size: 1.02rem; line-height: 1.3; }
      .ndx-offers__price { font-size: 1.34rem; }
      .ndx-offers__price-old { font-size: .94rem; }
      .ndx-offers__saving { font-size: .88rem; }
      .ndx-offers__feature { font-size: .84rem; padding: 3px 11px; }
      .ndx-offers__feature svg { width: 14px; height: 14px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ndx-offers__viewport { scroll-behavior: auto; }
  .ndx-offers * { transition: none !important; }
}