/* pages/categoria/categoria.css
 * Estilos específicos de la vista de categoría.
 *
 * La vista puede renderizarse en dos modos:
 *   - Terminal: grid de productos directos (estilo clásico, comportamiento
 *     anterior intacto).
 *   - Multinivel: secciones de productos por hija, una fila con scroll
 *     horizontal por sección (mismo patrón que el home).
 *
 * Las clases base (.mf-cats, .mf-cat, .mf-products, .mf-section__head,
 * .mf-section__title, .mf-card, .mf-card--more) son globales y viven en
 * /css/main.css o /pages/index/index.css — aquí solo añadimos ajustes de
 * composición específicos de la página de categoría.
 */

.mf-catview__sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* El atributo HTML `hidden` se implementa por defecto con display:none,
 * pero la regla .mf-catview__sections { display: flex } de arriba tiene
 * la misma specificity y viene después → sobrescribe el hide. Cuando
 * entramos a una categoría terminal (L3 sin hijas) hacemos
 * sectionsEl.hidden = true en JS y necesitamos que se oculte de verdad
 * para que no se vean los skeletons pre-cargados del HTML. */
.mf-catview__sections[hidden] {
  display: none;
}

/* Cuando la rama multinivel está activa, el grid clásico se oculta. */
#mf-catview-grid[hidden] {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────
 * Modo multinivel: cada sección debe verse como en el home
 * (una sola fila con scroll horizontal, no grid de 6 columnas que
 * envuelve las cards verticalmente). Sobreescribimos solo dentro del
 * contenedor .mf-catview__sections para no afectar otros .mf-products.
 * ──────────────────────────────────────────────────────────────── */
.mf-catview__sections .mf-products {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.8rem;
  padding-bottom: 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mf-red) var(--mf-bg-3);
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%,
    #000 88%,
    rgba(0, 0, 0, 0.6) 94%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    #000 0%,
    #000 88%,
    rgba(0, 0, 0, 0.6) 94%,
    transparent 100%);
  transition: -webkit-mask-image 0.25s ease, mask-image 0.25s ease;
}
.mf-catview__sections .mf-products::-webkit-scrollbar {
  height: 8px;
  display: block;
}
.mf-catview__sections .mf-products::-webkit-scrollbar-track {
  background: var(--mf-bg-3);
  border-radius: 99px;
}
.mf-catview__sections .mf-products::-webkit-scrollbar-thumb {
  background: var(--mf-red);
  border-radius: 99px;
}
.mf-catview__sections .mf-products::-webkit-scrollbar-thumb:hover {
  background: var(--mf-red-2);
}
.mf-catview__sections .mf-products .mf-card {
  flex: 0 0 calc((100% - 0.8rem * 5) / 6.5);
  min-width: 0;
}
/* Cuando ya se hizo scroll, mostrar también el degradado izquierdo */
.mf-catview__sections .mf-products.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.6) 6%,
    #000 12%,
    #000 88%,
    rgba(0, 0, 0, 0.6) 94%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.6) 6%,
    #000 12%,
    #000 88%,
    rgba(0, 0, 0, 0.6) 94%,
    transparent 100%);
}
/* Cuando se llegó al final, ocultar el degradado derecho */
.mf-catview__sections .mf-products.is-end {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.6) 6%,
    #000 12%,
    #000 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.6) 6%,
    #000 12%,
    #000 100%);
}

/* Tablet: 5.5 cards visibles */
@media (max-width: 1100px) {
  .mf-catview__sections .mf-products .mf-card {
    flex: 0 0 calc((100% - 0.8rem * 4) / 5.5);
  }
}
/* PC: aire entre el final de la fila de productos (incluido su
   scrollbar) y el título de la siguiente sección. */
@media (min-width: 1081px) {
  .mf-catview__sections .mf-products {
    margin-bottom: 2.5rem;
  }
}
/* Móvil: 2.5 cards visibles, con un poco más de aire al borde derecho
   para que el "medio producto" asomado sirva de señal de scroll. */
@media (max-width: 720px) {
  .mf-catview__sections .mf-products { gap: 0.6rem; }
  .mf-catview__sections .mf-products .mf-card {
    flex: 0 0 calc((100% - 0.6rem) / 2.5);
  }
  .mf-catview__sections .mf-products {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%);
  }
  .mf-catview__sections .mf-products.is-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 8%, #000 16%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 8%, #000 16%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%);
  }
}