/* CSS Variables for theming */
    :root {
      --primary-color: #166e22;
      --primary-dark: #0e5016;
      --primary-light: #2a8c36;
      --white: #ffffff;
      --light-gray: #f8f9fa;
      --dark-gray: #343a40;
      --border-color: rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
      --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      --box-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    body {
      background-color: var(--light-gray);
    }

    /* Header Section */

    .products-header h1 {
      font-family: Playfair-bold;
      color: var(--dark-gray);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .products-count {
      color: #6c757d;
      font-size: 0.95rem;
    }

    /* Filter Cards */
    .filter-card {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      box-shadow: var(--box-shadow);
      transition: var(--transition);
      overflow: hidden;
    }

    .filter-card:hover {
      box-shadow: var(--box-shadow-hover);
    }

    .filter-card .card-header {
      background-color: var(--primary-color);
      color: var(--white);
      font-weight: 600;
      padding: 1rem;
      border-bottom: none;
    }

    .filter-card .card-body {
      padding: 1.25rem;
    }

    /* Price Range Styling */
    .form-range {
      height: 6px;
      background: linear-gradient(to right, var(--primary-light) 0%, var(--primary-light) 100%);
      border-radius: 3px;
      outline: none;
    }

    .form-range::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--primary-color);
      border: 3px solid var(--white);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: var(--transition);
    }

    .form-range::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 3px 10px rgba(22, 110, 34, 0.4);
    }

    .form-range::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--primary-color);
      border: 3px solid var(--white);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: var(--transition);
    }

    .range-value {
      font-size: 0.9em;
      color: var(--primary-color);
      font-weight: 600;
      margin-top: 0.75rem;
    }

    /* Checkbox Styling */
    .form-check-input {
      border-color: var(--primary-color);
    }

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

    .form-check-input:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(22, 110, 34, 0.25);
    }

    .form-check {
      margin-bottom: 0.75rem;
      transition: var(--transition);
    }

    .form-check:hover {
      transform: translateX(5px);
    }

    .form-check-label {
      color: var(--dark-gray);
      font-weight: 500;
      cursor: pointer;
    }

    /* Active Filters */
    .active-filters-section {
      background: var(--white);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--box-shadow);
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .active-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .filter-badge {
      background-color: var(--primary-color);
      color: var(--white);
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .btn-clear-filters {
      background-color: transparent;
      border: 2px solid var(--primary-color);
      color: var(--primary-color);
      padding: 0.4rem 1rem;
      border-radius: 20px;
      font-weight: 500;
      transition: var(--transition);
    }

    .btn-clear-filters:hover {
      background-color: var(--primary-color);
      color: var(--white);
      transform: translateY(-2px);
    }

    /* Pagination */
    .pagination .page-link {
      color: var(--primary-color);
      border-color: var(--border-color);
      padding: 0.6rem 1rem;
      margin: 0 2px;
      border-radius: 8px;
      font-weight: 500;
      transition: var(--transition);
    }

    .pagination .page-item.active .page-link {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(22, 110, 34, 0.3);
    }

    .pagination .page-link:hover {
      color: var(--white);
      background-color: var(--primary-light);
      border-color: var(--primary-light);
      transform: translateY(-2px);
    }

    /* No products message */
    .no-products {
      text-align: center;
      padding: 3rem 1rem;
      color: #6c757d;
    }

    .no-products i {
      font-size: 4rem;
      margin-bottom: 1rem;
      color: var(--primary-color);
      opacity: 0.5;
    }

    /* Sticky sidebar */
    .sticky-sidebar {
      position: sticky;
      top: 20px;
    }


    @keyframes slideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive adjustments */
    @media (max-width: 767.98px) {

      .active-filters {
        justify-content: center;
      }
    }

    /* Sort Select Styling */
    .form-select {
      border-color: var(--border-color);
      border-radius: 8px;
      padding: 0.6rem 1rem;
      font-weight: 500;
      color: var(--dark-gray);
      transition: var(--transition);
      background-color: var(--white);
    }

    .form-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(22, 110, 34, 0.25);
    }

    .form-select:hover {
      border-color: var(--primary-light);
    }

    /* Custom select styling for better control */
    #sortSelect {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23166e22' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    }

    #sortSelect option {
      color: var(--primary-color);
      background-color: var(--white);
      padding: 0.5rem;
    }

    #sortSelect option:hover,
    #sortSelect option:focus,
    #sortSelect option:checked,
    #sortSelect option:active {
      background-color: var(--primary-color) !important;
      color: var(--white) !important;
    }

    /* Firefox specific */
    @-moz-document url-prefix() {
      #sortSelect option:checked {
        background-color: var(--primary-color);
        color: var(--white);
      }
    }

    /* Utility classes */
    .text-primary-custom {
      color: var(--primary-color) !important;
    }

    .bg-primary-custom {
      background-color: var(--primary-color) !important;
    }