.product-section {
  display: flex;
  padding: 2rem 1rem;
  background-color: var(--grey-050);
  gap: 2rem;
  margin-top: 0;
  border: 1px solid var(--grey-200); /* Subtle border around the entire section */
  border-radius: 8px;
}
.aside {
  background-color: var(--grey-100);
  padding: 1rem;
  border-radius: 5px;
  flex-shrink: 0;
  width: 250px;
  border: 1px solid var(--grey-300); /* Light border to define the sidebar */
}
.aside h4,
.aside h5 {
  margin-bottom: 1rem;
  color: var(--text-dark);
}
#sortOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
#sortOptions .btn-outline-secondary {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 25px;
  background: #ffffff; /* White background for buttons */
  color: var(--text-dark); /* Black text for contrast */
}
#sortOptions .btn-outline-secondary:hover,
#sortOptions .btn-outline-secondary:focus,
#sortOptions .btn-outline-secondary.active {
  background-color: var(--bg-dark) !important;
  color: #fff !important;
  border-color: var(--bg-dark) !important;
}
#sortOptions .btn-outline-secondary.active {
  background-color: #212529;
}

/* Mobile Filters */
@media (max-width: 767.98px) {
  .product-section {
    flex-direction: column;
  }
  .container-fluid.d-md-none .row {
    gap: 0.5rem;
  }
  .dropdown-menu.w-100 {
    padding: 1rem;
    background: #ffffff; /* White for dropdown menu */
    border: 1px solid var(--grey-300); /* Border for definition */
    border-radius: 8px;
  }
  .aside.d-none.d-md-block {
    display: none !important;
  }
  .d-flex.justify-content-end.d-none.d-md-block {
    display: none !important;
  }
}

/* Grid Overrides */
.products-grid .product-image {
  aspect-ratio: 4/3;
}
.product-category {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 3px;
  z-index: 1;
}
.product-section .col-lg-4,
.product-section .col-md-6,
.product-section .col-sm-12 {
  margin-bottom: 1.25rem;
}
@media (max-width: 576px) {
  .product-card {
    width: 100%;
    margin: 0 auto;
    max-width: 280px;
  }
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-right: 0;
  }
}

.product-section .row {
  display: flex;
  flex-wrap: wrap;
  background: #ffffff; /* White background for the grid row */
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--grey-300); /* Border to separate grid from rest */
}
.product-section .row > [class*="col-"] {
  display: flex;
}
.product-section .row .col-lg-4 .modern-product-card {
  height: auto !important;
  margin-bottom: 1.5rem !important;
  flex: 1;
  background: var(--grey-050); /* Light grey for cards to reduce brightness */
  border: 1px solid var(--grey-200); /* Subtle border around each card */
}
.product-section .row .col-lg-4 .modern-product-card .product-image-container {
  height: 280px !important;
}
/* Mobile grid adjustments */
@media (max-width: 768px) {
  .product-section
    .row
    .col-md-6
    .modern-product-card
    .product-image-container {
    height: 250px !important;
  }
  .product-section .row .col-sm-12 .modern-product-card {
    max-width: 100% !important;
  }
}

/* Pagination */
.pagination-controls {
  background: #ffffff; /* White background for pagination */
  padding: 1rem;
  border: 1px solid var(--grey-300); /* Border for definition */
  border-radius: 8px;
  margin-top: 2rem;
}

/* No Products Message (add this class in EJS: <h1 class="no-products">NO PRODUCTS AVAILABLE</h1>) */
.no-products {
  text-align: center;
  padding: 150px;
  color: var(--text-dark);
  background: var(--grey-100); /* Light grey background */
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  margin: 2rem 0;
}

/* Overrides for theme elements in this page */
.product-section .modern-product-card {
  background: var(--grey-050) !important; /* Ensure light grey background */
  border: 1px solid var(--grey-200) !important; /* Border for each card */
}