html { scrollbar-gutter: stable; overflow-y: scroll; }
    .abc-items {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 25px !important;
      height: 25px !important;
      border-radius: 50% !important;
      border: 1.5px solid #B5C7E9 !important;
      background: #FFFFFF !important;
      font-family: 'Nunito Sans', sans-serif !important;
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #4672C8 !important;
      cursor: pointer;
      padding: 0 !important;
      line-height: 1.5 !important;
      vertical-align: middle;
    }
    .abc-items:hover, .abc-items.active {
      background-color: #0943B5 !important;
      border-color: #0943B5 !important;
      border-radius: 50% !important;
      color: #FFFFFF !important;
    }
    .abc-items-todos {
      width: auto !important;
      padding: 0 10px !important;
      border-radius: 25px !important;
    }
    .abc-items-todos.active, .abc-items-todos:hover {
      border-radius: 25px !important;
    }
    .collections-grid-area {
      transition: opacity 0.2s ease;
    }
    .collections-abc-filter {
      width: 100%;
      max-width: 1312px;
      margin: 8px auto 0;
      padding: 10px 0;
      box-sizing: border-box;
    }
    .collections-abc-filter form {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .collections-abc-filter__left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .collections-abc-filter__right {
      display: flex;
      align-items: center;
      margin-left: auto;
    }
    .collections-abc-filter__label {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 700;
      font-size: calc(14 * var(--global-base-font-size) / 16);
      color: #0943B5;
      white-space: nowrap;
    }
    .collections-abc-filter .list-inline {
      display: flex !important;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .collections-abc-filter .list-inline-item {
      margin: 0 !important;
      display: flex !important;
      align-items: center;
    }
    /* Desktop: ocultar fila mobile */
    .collections-abc-mobile-row { display: none; }
    .collections-abc-mobile-wrap { display: none; }

    /* TABLET + MOBILE (<1100px): mismo tratamiento de UI que móvil
       (flechas azules, ABC scroll, top bar). iPad hereda todo esto;
       solo el grid difiere (2 columnas) y eso vive en landing_v8.css. */
    @media (max-width: 1099px) {
      /* Mostrar el nuevo wrapper mobile de ABC */
      .collections-abc-mobile-wrap { display: flex !important; }
      /* Ocultar las dos filas desktop */
      .collections-abc-desktop-only { display: none !important; }
      /* Ocultar el toggle de tipo en el top bar (va en el drawer) */
      .filter-panel__type-toggle { display: none !important; }

      /* TOP BAR: columna — primero Filtros, luego conteo */
      .collections-top-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 6px;
        padding: 8px 0 4px;
      }
      .collections-mobile-filter-btn {
        margin-left: 0 !important;
        flex-shrink: 0;
      }
      .collections-results-count {
        margin: 0 !important;
        font-size: calc(13 * var(--global-base-font-size) / 16);
      }

      /* ── ABC MOBILE: 2 FILAS ── */

      /* Contenedor wrap: columna */
      .collections-abc-mobile-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 6px;
        padding: 4px 0 6px;
      }
      /* Fila 1: "Filtrar por" izquierda, botones derecha */
      .abc-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }
      /* Etiqueta "Filtrar por" */
      .abc-mobile-label {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 700;
        font-size: calc(15 * var(--global-base-font-size) / 16);
        color: #0943B5;
        white-space: nowrap;
      }
      /* Grupo de botones ← → */
      .abc-nav-group {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      /* Botones base */
      .abc-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 25px;
        min-width: 25px;
        border-radius: 50%;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
      }
      /* Variante sólida azul (diseño Figma) */
      .abc-nav-btn--filled {
        background: #0943B5 !important;
        border: none !important;
      }
      .abc-nav-btn--filled:hover {
        background: #0734A0 !important;
      }
      /* Fila 2: letras y números scrollables — ancho completo */
      .abc-scroll-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .abc-scroll-container::-webkit-scrollbar { display: none; }
      .abc-all-items {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap !important;
        margin: 0;
        padding: 0;
        list-style: none;
      }
    }

    /* Grid 1 columna SOLO en móvil (<768px). iPad usa 2 columnas (landing_v8.css). */
    @media (max-width: 767px) {
      .collections-grid {
        grid-template-columns: 1fr !important;
        justify-items: center;
      }
      .collections-grid > li {
        width: 316px !important;
        max-width: 100%;
      }
      .collection-card {
        width: 316px !important;
        max-width: 100%;
        height: auto !important;
        min-height: 538px !important;
      }
    }

/* iPad (768-1099px): alinear banner, filtros y grid al mismo ancho centrado
   (2 tarjetas de 316px + 24px gap = 656px) para que el banner no se estire
   a todo el ancho de la pantalla y todo quede proporcional. */
@media (min-width: 768px) and (max-width: 1099px) {
  .section-breadcrumb,
  .section-banner,
  .collections-abc-filter,
  .collections-top-bar,
  .collections-page-wrapper,
  .active-filters-row {
    max-width: 656px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Active Filters Chips */
.active-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 16px 0;
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
}
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  background-color: #E6EEFA;
  color: #0943B5;
  padding: 4px 12px;
  border-radius: 16px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: calc(14 * var(--global-base-font-size) / 16);
  font-weight: 600;
}
.active-filter-chip button {
  background: none;
  border: none;
  color: #0943B5;
  margin-left: 8px;
  font-size: calc(16 * var(--global-base-font-size) / 16);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active-filter-chip button:hover {
  color: #0734A0;
}