/**
 * Amazzing Filter — overrides child smartmaterials3d (media=screen → fuera de CCC).
 * Swatches Color: atributo a3 + feature COLORES f18.
 * Sticky sidebar + cache-bust: 2026-09-17-scrollbar-v2
 */

/*
 * Sticky en #left-column (no en #amazzing_filter): con align-self:start la
 * columna solo mide el alto del filtro; si el sticky va en el hijo, no hay
 * recorrido. 7.5rem = alto de la cabecera fija.
 */
body#category #left-column,
body[id^="category"] #left-column {
  position: sticky !important;
  top: 7.5rem !important;
  z-index: 2;
  align-self: start !important;
  margin-bottom: var(--space-6);
  max-height: calc(100vh - 7.5rem - var(--space-4));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--sm-line) transparent;
}

/* Scrollbars discretos: columna filtros + listas a3/f18 */
body#category #left-column::-webkit-scrollbar,
body[id^="category"] #left-column::-webkit-scrollbar,
#amazzing_filter .af_filter.a3 ul::-webkit-scrollbar,
#amazzing_filter .af_filter.f18 ul::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

body#category #left-column::-webkit-scrollbar-track,
body[id^="category"] #left-column::-webkit-scrollbar-track,
#amazzing_filter .af_filter.a3 ul::-webkit-scrollbar-track,
#amazzing_filter .af_filter.f18 ul::-webkit-scrollbar-track {
  background: transparent;
}

body#category #left-column::-webkit-scrollbar-thumb,
body[id^="category"] #left-column::-webkit-scrollbar-thumb,
#amazzing_filter .af_filter.a3 ul::-webkit-scrollbar-thumb,
#amazzing_filter .af_filter.f18 ul::-webkit-scrollbar-thumb {
  background-color: var(--sm-line);
  border-radius: var(--radius-pill);
}

body#category #left-column::-webkit-scrollbar-thumb:hover,
body[id^="category"] #left-column::-webkit-scrollbar-thumb:hover,
#amazzing_filter .af_filter.a3 ul::-webkit-scrollbar-thumb:hover,
#amazzing_filter .af_filter.f18 ul::-webkit-scrollbar-thumb:hover {
  background-color: var(--sm-muted);
}

body#category #left-column::-webkit-scrollbar-button,
body[id^="category"] #left-column::-webkit-scrollbar-button,
#amazzing_filter .af_filter.a3 ul::-webkit-scrollbar-button,
#amazzing_filter .af_filter.f18 ul::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

#amazzing_filter.block {
  position: static !important;
  top: auto !important;
}

#amazzing_filter.block .title_block {
  display: block !important;
}

/* Checkbox dentro de swatch: oculto */
#amazzing_filter .af-color-box input.af.checkbox,
#amazzing_filter .af-color-box input.af.radio {
  display: none !important;
}

/* Color a3 + COLORES f18 — nombre visible, 2 columnas */
#amazzing_filter .af_filter.a3 ul,
#amazzing_filter .af_filter.f18 ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-2);
  align-items: stretch;
  padding: 0;
  margin: 0;
  max-height: 20rem;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--sm-line) transparent;
}

#amazzing_filter .af_filter.a3 li,
#amazzing_filter .af_filter.f18 li {
  padding: 0;
  margin: 0;
  overflow: visible;
  float: none;
  min-width: 0;
}

#amazzing_filter .af_filter.a3 .af-color-label,
#amazzing_filter .af_filter.f18 .af-color-label,
#amazzing_filter .af_filter.f18 .af-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  padding: var(--space-1) 0;
  margin: 0;
  cursor: pointer;
}

#amazzing_filter .af_filter.a3 .af-color-label .name,
#amazzing_filter .af_filter.f18 .af-color-label .name,
#amazzing_filter .af_filter.f18 .af-checkbox-label .name {
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-regular);
  line-height: var(--lh-h2);
  color: var(--sm-ink);
}

#amazzing_filter .af_filter.a3 .af-color-label .count,
#amazzing_filter .af_filter.f18 .af-color-label .count,
#amazzing_filter .af_filter.f18 .af-checkbox-label .count {
  display: none !important;
}

#amazzing_filter .af_filter.a3 .af-color-box,
#amazzing_filter .af_filter.f18 .af-color-box {
  display: block !important;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--sm-line) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 2px var(--sm-white) !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

#amazzing_filter .af_filter.a3 li.active .af-color-box,
#amazzing_filter .af_filter.a3 .active .af-color-box,
#amazzing_filter .af_filter.f18 li.active .af-color-box,
#amazzing_filter .af_filter.f18 .active .af-color-box {
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  margin: 0 !important;
  border-color: var(--sm-teal) !important;
  box-shadow: inset 0 0 0 2px var(--sm-white) !important;
}

#amazzing_filter .af_filter.a3 li.active .af-color-box::after,
#amazzing_filter .af_filter.a3 .active .af-color-box::after,
#amazzing_filter .af_filter.f18 li.active .af-color-box::after,
#amazzing_filter .af_filter.f18 .active .af-color-box::after {
  content: none !important;
  display: none !important;
}

/* we_utilities color-map: sin huecos (más específico que AF `.af_filter li{display:block}`) */
#amazzing_filter .af_filter.we-cmap-tones li.we-cmap-out {
  display: none !important;
}

/* Scrollbars AF genéricos (cualquier overflow del bloque filtros) */
#amazzing_filter,
#amazzing_filter .af_filter_content,
#amazzing_filter .af_filter ul {
  scrollbar-width: thin;
  scrollbar-color: var(--sm-line-strong) transparent;
}
#amazzing_filter::-webkit-scrollbar,
#amazzing_filter .af_filter_content::-webkit-scrollbar,
#amazzing_filter .af_filter ul::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
#amazzing_filter::-webkit-scrollbar-track,
#amazzing_filter .af_filter_content::-webkit-scrollbar-track,
#amazzing_filter .af_filter ul::-webkit-scrollbar-track {
  background: transparent;
}
#amazzing_filter::-webkit-scrollbar-thumb,
#amazzing_filter .af_filter_content::-webkit-scrollbar-thumb,
#amazzing_filter .af_filter ul::-webkit-scrollbar-thumb {
  background-color: var(--sm-line-strong);
  border-radius: var(--radius-pill);
}
#amazzing_filter::-webkit-scrollbar-thumb:hover,
#amazzing_filter .af_filter_content::-webkit-scrollbar-thumb:hover,
#amazzing_filter .af_filter ul::-webkit-scrollbar-thumb:hover {
  background-color: var(--sm-soft);
}
#amazzing_filter::-webkit-scrollbar-button,
#amazzing_filter .af_filter_content::-webkit-scrollbar-button,
#amazzing_filter .af_filter ul::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}