/* Product listing partial (Product/ProductListing): filter sidebar, toolbar, chips, grid, pagination. Used by the
   product list page and the Home "All Products" section, so both controllers load it. */

/* Filter sidebar */
.filter-sidebar .accordion-button {
  font-weight: 600;
  padding: 1rem 0;
  background-color: transparent;
  box-shadow: none;
}

.filter-sidebar .accordion-button:not(.collapsed) {
  color: var(--brand-primary-hover);
}

.filter-sidebar .accordion-item {
  border: none;
  border-bottom: 1px solid #e2e8f0;
  background-color: transparent;
}

.filter-sidebar .accordion-body {
  padding: 0 0 1rem 0;
}

.hv1 .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.custom-checkbox-list {
  max-height: 220px;
  overflow-y: auto;
}

.custom-checkbox-list::-webkit-scrollbar {
  width: 4px;
}

.custom-checkbox-list::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

/* two cards per row on phones: keep the card button on one line */
@media (max-width: 575.98px) {
  #v1-product-grid .btn-add-cart {
    font-size: 0.8rem;
  }
}

/* filter chips: style.css makes every <button> display:flex, which dropped the chip's close button onto its own line,
   so the chip is an inline flex box; not the d-inline-flex utility, which is !important and would override [hidden] */
.v1-chip {
  display: inline-flex;
  align-items: center;
}

.v1-chip[hidden] {
  display: none;
}

.toolbar-select {
  border-radius: 20px;
  font-size: 0.9rem;
  border-color: #e2e8f0;
}

/* Pagination: buttons (not <a>, which style.css forces to color: inherit) as separated pills */
.hv1 .pagination {
  gap: 6px;
  --bs-pagination-color: var(--text-dark);
  --bs-pagination-hover-color: var(--brand-primary-hover);
  --bs-pagination-focus-color: var(--brand-primary-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.25);
  --bs-pagination-active-bg: var(--brand-primary-hover);
  --bs-pagination-active-border-color: var(--brand-primary-hover);
}

.hv1 .pagination .page-link {
  border-radius: 8px !important;
}

.v1-chip .btn-close {
  font-size: 0.55rem;
}

/* Loading placeholder for a grid card, replaced once the JS renders the products */
.v1-skeleton-grid {
  height: 360px;
  border-radius: 12px;
}