/* NDX categorias de ofertas - 1.17.0 */
/* =========================================================
   NDX CATEGORIAS DE OFERTAS

   Tarjetas que filtran la rejilla. Comparten las variables de
   color de la rejilla (--ndx-off-*), que las emite el mismo
   metodo, asi que cambiar la paleta en el Back Office cambia
   las dos secciones a la vez.

   Responsive por CONTENEDOR: la seccion puede ir a ancho
   completo o dentro de una columna de Elementor, y el ancho
   de la ventana no dice nada del hueco real.
   ========================================================= */
.ndx-cats-wrap {
  container-type: inline-size;
  container-name: ndxcats;
  display: flex;
  width: 100%;

  /* La franja de fondo va en el envoltorio, no en la seccion: asi ocupa
     todo el ancho del contenedor de Elementor aunque las tarjetas esten
     limitadas a 1280 px. */
  background: var(--ndx-cats-bg, #eef4fb);
}

.ndx-cats {
  width: 100%;
  max-width: 1280px;
  margin: 16px auto;
  padding: 26px 18px 30px;
  color: var(--ndx-off-text);
  font-family: var(--ndx-font, "Manrope", system-ui, -apple-system, sans-serif);
}

.ndx-cats__head { margin-bottom: 20px; text-align: center; }

.ndx-cats__title {
  margin: 0 0 6px;
  color: var(--ndx-off-title, var(--ndx-off-main));
  font-size: clamp(1.32rem, 1.05rem + 1.1cqi, 1.86rem);
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.14;
}

.ndx-cats__subtitle {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--ndx-off-muted);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------- Carrusel ----------
   Las tarjetas van SIEMPRE en una fila que se desplaza en horizontal, nunca
   saltan a una segunda linea: una rejilla de categorias partida en dos filas
   desiguales se lee mal y no es lo que representa (son hermanas, no una
   lista larga).

   Las flechas se muestran solo si de verdad no caben, y eso lo decide el JS
   midiendo el ancho real, no un numero fijo de tarjetas: con 4 columnas
   configuradas y 4 categorias no sobra nada, pero con 6 columnas en un
   hueco estrecho sobra con 3. */
.ndx-cats__viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.ndx-cats__list {
  display: flex;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;

  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Hueco para que la sombra del hover no se recorte al desplazar. */
  padding: 6px 4px 10px;
}

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

/* Cada tarjeta ocupa una fraccion exacta del ancho visible, descontando los
   huecos: asi entran justo las columnas configuradas y la siguiente asoma
   solo si hay mas. */
.ndx-cats__card {
  position: relative;
  flex: 0 0 calc((100% - 8px - (var(--ndx-cats-cols, 6) - 1) * 14px) / var(--ndx-cats-cols, 6));
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  min-width: 0;

  background: #fff;

  /*
   * 2px SIEMPRE, cambie o no el estado. El grosor no varia nunca, asi que
   * seleccionar una tarjeta no puede mover el contenido ni añadir un
   * segundo trazo: lo unico que cambia es el color.
   *
   * Esta es la tercera version de esto. Las dos anteriores dibujaban el
   * estado activo con un anillo ADEMAS del borde (primero por dentro,
   * luego por fuera), y en ambos casos se veia un doble trazo. Un solo
   * borde no puede duplicarse.
   */
  border: 2px solid var(--ndx-off-border);
  border-radius: 14px;
  overflow: hidden;

  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

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

/* Estado activo: lo pone offers-grid.js al filtrar, y tambien cuando se
   pulsa el chip equivalente dentro de la rejilla.

   SOLO cambia el color del borde. Ningun anillo, ninguna sombra interior y
   ningun tinte de fondo: nada que pueda leerse como un segundo borde. El
   box-shadow se anula explicitamente por si el tema de la tienda le pone
   uno a los elementos seleccionados. */
.ndx-cats__card.ndx-filtro-oferta--activo {
  border-color: var(--ndx-off-filter-active-bg, var(--ndx-off-main));
  box-shadow: none;
}

.ndx-cats__card.ndx-filtro-oferta--activo:hover {
  box-shadow: 0 10px 22px rgba(40, 25, 20, .10);
}

/*
 * Hueco de la imagen. Se reserva aunque no haya imagen, para que las
 * tarjetas no bailen mientras se van subiendo.
 *
 * La imagen va en posicion ABSOLUTA a proposito. Antes iba en flujo con
 * height:100%, y ese porcentaje no se puede resolver contra una altura que
 * la esta calculando el propio aspect-ratio: el navegador lo trataba como
 * auto y la altura del hueco acababa siendo la de la imagen, no la pedida.
 * Por eso cambiar aspect-ratio no hacia nada mientras hubiera imagen.
 *
 * Sacandola del flujo, la imagen ya no cuenta para la altura y aspect-ratio
 * manda siempre. min-height:0 quita ademas el suelo que flex pone a sus
 * hijos.
 *
 * Para cambiar la proporcion basta con --ndx-cats-ratio, aqui debajo.
 * Cuanto mayor sea el primer numero, mas baja y apaisada queda la tarjeta.
 */
.ndx-cats__thumb {
  position: relative;
  display: block;
  aspect-ratio: var(--ndx-cats-ratio, 16 / 9);
  min-height: 0;
  background: #fff;
}

.ndx-cats__thumb img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  display: block;
}

.ndx-cats__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  padding: 2px 14px 15px;
}

.ndx-cats__name {
  color: var(--ndx-off-text);
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.ndx-cats__desc {
  color: var(--ndx-off-muted);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.38;
}

/* El boton se resetea a fondo: es un <button> de verdad, y los temas de
   PrestaShop les ponen bordes, fondos y rellenos propios. */
.ndx-cats__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;

  margin: auto 0 0;
  padding: 8px 0 0;

  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  color: var(--ndx-off-main);
  font: inherit;
  font-size: .8rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

/* La capa de clic cubre la tarjeta entera: se pulsa donde se pulse, filtra.
   Mismo patron que el nombre de las tarjetas de producto de la rejilla. */
.ndx-cats__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/*
 * El foco del teclado se dibuja en la TARJETA, no en el boton.
 *
 * El boton esta estirado por encima de toda la tarjeta con ::after, asi que
 * un anillo de foco alrededor del boton en si (que ocupa solo el texto "Ver
 * ofertas") quedaria descolocado. Y se anulan outline y box-shadow del
 * boton porque muchos temas de PrestaShop le ponen los suyos, que es otra
 * via por la que aparece un trazo que el modulo no ha pedido.
 */
.ndx-cats__cta:focus,
.ndx-cats__cta:focus-visible {
  outline: none;
  box-shadow: none;
}

.ndx-cats__card:focus-within {
  outline: 3px solid var(--ndx-off-soft, #fdf2ee);
  outline-offset: 2px;
}

.ndx-cats__arrow { transition: transform .15s ease; }
.ndx-cats__card:hover .ndx-cats__arrow { transform: translateX(3px); }

/* ---------- Flechas ---------- */
.ndx-cats__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  padding: 0;

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

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

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

.ndx-cats__nav:hover { color: #fff; background: var(--ndx-off-main); }

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

.ndx-cats__nav[hidden] { display: none; }
.ndx-cats__nav--prev { left: -6px; }
.ndx-cats__nav--next { right: -6px; }

/* ---------- Responsive por contenedor ----------
   min() en lugar de un numero fijo: si el cliente configuro 3 columnas, un
   contenedor estrecho no debe SUBIRLO a 4. */
@container ndxcats (max-width: 1100px) {
  .ndx-cats__card { flex-basis: calc((100% - 3 * 14px) / min(var(--ndx-cats-cols, 6), 4)); }
}

@container ndxcats (max-width: 820px) {
  .ndx-cats__card { flex-basis: calc((100% - 2 * 14px) / min(var(--ndx-cats-cols, 6), 3)); }
}

@container ndxcats (max-width: 560px) {
  .ndx-cats { padding: 20px 12px 22px; }
  .ndx-cats__list { gap: 10px; }

  /* Se deja asomar la siguiente tarjeta: es la pista visual de que la fila
     sigue, mas fiable que una flecha en una pantalla tactil. */
  .ndx-cats__card { flex-basis: 62%; }

  .ndx-cats__name { font-size: .98rem; }
  .ndx-cats__desc { font-size: .84rem; }
  .ndx-cats__cta { font-size: .86rem; }
  .ndx-cats__nav { display: none; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1100px) { .ndx-cats__card { flex-basis: calc((100% - 3 * 14px) / 4); } }
  @media (max-width: 820px) { .ndx-cats__card { flex-basis: calc((100% - 2 * 14px) / 3); } }
  @media (max-width: 560px) {
    .ndx-cats { padding: 20px 12px 22px; }
    .ndx-cats__list { gap: 10px; }
    .ndx-cats__card { flex-basis: 62%; }
    .ndx-cats__nav { display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ndx-cats__list { scroll-behavior: auto; }
}

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