/* ── Split-panel layout: filter fixed, products scroll ───── */
@media (min-width: 992px) {
  #allProducts {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
  }

  #allProducts > .row {
    height: calc(100vh - 215px); /* viewport minus topbar+header+nav+breadcrumb */
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: stretch;
  }

  /* Filter column: fixed, no scroll */
  #filterSidebar {
    height: 100%;
    overflow: hidden;
    position: static;
    flex-shrink: 0;
  }

  /* Products column: independent scroll */
  #productsCol {
    height: 100%;
    overflow-y: auto;
    padding-top: 20px;
    padding-bottom: 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--dk-raised) transparent;
  }
  #productsCol::-webkit-scrollbar { width: 4px; }
  #productsCol::-webkit-scrollbar-track { background: transparent; }
  #productsCol::-webkit-scrollbar-thumb { background: var(--dk-raised); border-radius: 4px; }
}

/* ── Filter Panel ───────────────────────────────────────── */
.filter-panel {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}
.filter-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--gray-100);
}
.filter-section:last-of-type { border-bottom: none; }
.filter-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 14px;
}
.filter-check {
  margin-bottom: 8px;
  font-size: 0.875rem;
}
.filter-check .form-check-input:checked { background-color: var(--navy-900); border-color: var(--navy-900); }
.quick-price-btn {
  font-size: 0.78rem;
  padding: 4px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  color: var(--gray-600);
  background: white;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  display: inline-block;
}
.quick-price-btn:hover, .quick-price-btn.active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: white;
}
.active-filters-section { background: var(--gray-50); }
.active-filter-tag {
  background: var(--navy-900);
  color: white;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.active-filter-tag a { color: rgba(255,255,255,0.7); text-decoration: none; margin-left: 4px; }

.filter-cta-box {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  margin: 0 20px 20px;
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  color: white;
}

/* ── Products Toolbar ───────────────────────────────────── */
.products-toolbar {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 18px;
}
.grid-btn {
  width: 34px;
  height: 34px;
  border: 2px solid var(--gray-200);
  background: white;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--gray-500);
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-btn.active, .grid-btn:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: white;
}

/* ── Empty State ────────────────────────────────────────── */
.empty-state {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
}

/* ── Mobile Filter Slide ────────────────────────────────── */
@media (max-width: 991.98px) {
  #filterSidebar {
    position: fixed;
    top: 0;
    left: -340px;
    width: 320px;
    height: 100vh;
    z-index: 1050;
    overflow-y: auto;
    transition: left 0.3s ease;
    background: white;
    box-shadow: var(--shadow-xl);
  }
  #filterSidebar.open { left: 0; }
  .filter-panel { border-radius: 0; position: static; border: none; }
}

/* ═══════════════════════════════════════════════════════════
   DARK PREMIUM THEME — category page overrides
═══════════════════════════════════════════════════════════ */

/* Filter panel */
.filter-panel { background: var(--dk-elevated); border-color: var(--dk-border); }
.filter-section { border-bottom-color: var(--dk-border); }
.filter-heading { color: var(--dk-text-faint); }
.filter-check { color: var(--dk-text-muted); }
.filter-check .form-check-label { color: var(--dk-text-muted); }
.filter-check .form-check-input { background-color: var(--dk-overlay); border-color: var(--dk-border); }
.filter-check .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.form-check-label { color: var(--dk-text-muted); }

/* Quick price buttons */
.quick-price-btn { background: var(--dk-raised); border-color: var(--dk-border); color: var(--dk-text-muted); }
.quick-price-btn:hover, .quick-price-btn.active { background: var(--gold); border-color: var(--gold); color: #000; }

/* Active filters */
.active-filters-section { background: var(--dk-raised); }

/* Products toolbar */
.products-toolbar { background: var(--dk-elevated); border-color: var(--dk-border); }
.grid-btn { background: var(--dk-raised); border-color: var(--dk-border); color: var(--dk-text-muted); }
.grid-btn.active, .grid-btn:hover { background: var(--gold); border-color: var(--gold); color: #000; }

/* Empty state */
.empty-state { background: var(--dk-elevated); }

/* Mobile filter panel */
@media (max-width: 991.98px) {
  #filterSidebar { background: var(--dk-elevated); }
}