/* ==========================================================================
   iCase — CATEGORÍA / LISTADO v1.0  ·  "Bloque"
   Archivo: static/css/icase-category.css
   Requiere: icase-tokens.css, icase-product.css

   Rio ya trae sidebar de filtros, drawer de filtros en mobile, filtro por
   precio, orden y breadcrumbs. Esto los restiliza sobre sus clases `js-*`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CABECERA
   -------------------------------------------------------------------------- */
.template-category .breadcrumbs,
.category-breadcrumbs-container .breadcrumbs {
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase;
  color: var(--ic-ink-3);
}
.template-category .breadcrumbs a { color: var(--ic-ink-3); }
.template-category .breadcrumbs a:hover { color: var(--ic-ink); }

.ic-cathead { padding-block: var(--ic-s6) var(--ic-s5); }
.ic-cathead__title {
  font-size: var(--ic-fs-h1); font-weight: var(--ic-fw-black);
  letter-spacing: var(--ic-ls-display); line-height: 1.05;
  color: var(--ic-ink); margin: var(--ic-s3) 0 0;
}
.ic-cathead__desc { margin-top: var(--ic-s4); max-width: 62ch; color: var(--ic-ink-2); }

/* Chips de subcategoría: el atajo que hoy no existe */
.ic-catsubs {
  display: flex; gap: var(--ic-s2);
  overflow-x: auto; scrollbar-width: none;
  padding-block: var(--ic-s5) var(--ic-s2);
  margin-inline: calc(var(--ic-gutter) * -1); padding-inline: var(--ic-gutter);
}
.ic-catsubs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .ic-catsubs { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } }
.ic-catsub {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 var(--ic-s4);
  border: 1.5px solid var(--ic-line); border-radius: var(--ic-r-ui);
  background: #fff; color: var(--ic-ink-2);
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi);
  white-space: nowrap;
  transition: border-color var(--ic-t-fast) var(--ic-ease), color var(--ic-t-fast) var(--ic-ease);
}
.ic-catsub:hover { border-color: var(--ic-ink); color: var(--ic-ink); }
.ic-catsub.is-active { background: var(--ic-ink); border-color: var(--ic-ink); color: #fff; }

/* --------------------------------------------------------------------------
   2. BARRA DE CONTROLES (orden + filtros)
   -------------------------------------------------------------------------- */
.category-controls,
.js-category-controls {
  border-block: 1px solid var(--ic-line);
  padding-block: var(--ic-s3);
  margin-bottom: var(--ic-s6);
  background: var(--ic-paper);
}
/* Al scrollear queda pegada arriba: filtrar sin volver al principio */
@media (min-width: 768px) {
  .js-category-controls.is-sticky,
  .category-controls-sticky {
    position: sticky; top: var(--ic-header-h); z-index: var(--ic-z-sticky);
  }
}
.js-sort-by-private,
.template-category .form-select {
  height: 42px; padding: 0 var(--ic-s6) 0 var(--ic-s3);
  border: 1.5px solid var(--ic-line) !important; border-radius: var(--ic-r-ui) !important;
  background: #fff !important; color: var(--ic-ink) !important;
  font-family: var(--ic-font); font-size: var(--ic-fs-sm) !important;
  font-weight: var(--ic-fw-semi) !important; letter-spacing: -0.01em;
  appearance: none; cursor: pointer;
}
.js-sort-by-private:hover { border-color: var(--ic-ink-3) !important; }
.js-sort-by-private:focus { border-color: var(--ic-blue) !important; outline: none; }

.filters-updating-message,
.js-applying-filter {
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase; color: var(--ic-ink-3);
}

/* --------------------------------------------------------------------------
   3. FILTROS
   -------------------------------------------------------------------------- */
.filters-sidebar { padding-right: var(--ic-s6); }
.filters-sidebar h3, .filters-sidebar h4,
.modal-filters h3, .modal-filters h4 {
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase;
  font-weight: var(--ic-fw-medium); color: var(--ic-ink-3);
  padding-bottom: var(--ic-s3); border-bottom: 1px solid var(--ic-line);
  margin-bottom: var(--ic-s3);
}

.checkbox-container {
  display: flex; align-items: center; gap: 10px;
  padding-block: 7px; cursor: pointer;
  font-size: var(--ic-fs-body); color: var(--ic-ink-2);
  transition: color var(--ic-t-fast) var(--ic-ease);
}
.checkbox-container:hover { color: var(--ic-ink); }
.checkbox-icon {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--ic-line); border-radius: 2px;
  background: #fff;
  transition: all var(--ic-t-fast) var(--ic-ease);
}
.checkbox:checked + .checkbox-icon,
.checkbox-container input:checked ~ .checkbox-icon {
  background: var(--ic-ink); border-color: var(--ic-ink);
}
.checkbox-text { line-height: 1.3; }
.checkbox-color { width: 20px; height: 20px; border-radius: 2px; border: 1px solid var(--ic-line); }

/* Filtro de precio */
.price-filter-container, .js-price-filter-container { padding-top: var(--ic-s2); }
.filter-input-price, .js-price-filter-input {
  height: 40px; width: 100%;
  border: 1.5px solid var(--ic-line); border-radius: var(--ic-r-ui);
  padding-inline: var(--ic-s3);
  font-size: var(--ic-fs-body); font-variant-numeric: tabular-nums;
}
.filter-input-price:focus { border-color: var(--ic-blue); outline: none; }
.js-price-filter-btn {
  min-height: 40px; border-radius: var(--ic-r-ui) !important;
  border: 1.5px solid var(--ic-ink) !important;
  background: transparent !important; color: var(--ic-ink) !important;
  font-weight: var(--ic-fw-bold) !important; font-size: var(--ic-fs-sm) !important;
}
.js-price-filter-btn:not(.disabled):hover { background: var(--ic-ink) !important; color: #fff !important; }
.js-price-filter-btn.disabled { border-color: var(--ic-line) !important; color: var(--ic-ink-3) !important; }

/* Drawer de filtros en mobile */
.modal-filters {
  background: var(--ic-paper);
  border-radius: 0; border: 0;
  box-shadow: var(--ic-sh-drawer);
}
.modal-filters .modal-header {
  background: var(--ic-blue); color: #fff;
  min-height: 56px; border: 0; border-radius: 0;
  padding-inline: var(--ic-s5) var(--ic-s3);
  font-weight: var(--ic-fw-bold);
}
.modal-filters .modal-body { padding: var(--ic-s5); }
.modal-filters .btn-primary {
  min-height: 52px; border-radius: var(--ic-r-ui);
  background: var(--ic-blue); border: 0; color: #fff;
  font-weight: var(--ic-fw-bold); font-size: 1rem;
}
.filters-overlay, .js-filters-overlay, .js-sorting-overlay { background: rgba(16,20,24,.45); }

/* --------------------------------------------------------------------------
   4. GRILLA
   -------------------------------------------------------------------------- */
.js-category-body, .category-body { padding-bottom: var(--ic-s10); }

/* La grilla del tema usa columnas de Bootstrap; se normaliza el aire */
.template-category .js-item-product,
.template-search .js-item-product { margin-bottom: var(--ic-s7); }

/* Sin resultados */
.ic-empty {
  padding-block: var(--ic-s11); text-align: center; max-width: 44ch; margin-inline: auto;
}
.ic-empty h2 {
  font-size: var(--ic-fs-h3); font-weight: var(--ic-fw-black);
  letter-spacing: var(--ic-ls-display); margin-bottom: var(--ic-s3);
}
.ic-empty p { color: var(--ic-ink-2); margin-bottom: var(--ic-s6); }

/* --------------------------------------------------------------------------
   5. PAGINACIÓN / VER MÁS
   -------------------------------------------------------------------------- */
.template-category .pagination,
.template-search .pagination {
  display: flex; justify-content: center; gap: var(--ic-s2);
  list-style: none; padding: 0; margin-block: var(--ic-s8) 0;
}
.template-category .pagination a,
.template-category .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: 10px;
  border: 1px solid var(--ic-line); border-radius: var(--ic-r-ui);
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi);
  font-variant-numeric: tabular-nums; color: var(--ic-ink-2);
  transition: all var(--ic-t-fast) var(--ic-ease);
}
.template-category .pagination a:hover { border-color: var(--ic-ink); color: var(--ic-ink); }
.template-category .pagination .active span,
.template-category .pagination .current {
  background: var(--ic-ink); border-color: var(--ic-ink); color: #fff;
}