.h6.facet-title {
  font-family: Jost;

  font-weight: 500;

  font-size: 18px;
}

/* Facet list (ul) */

.facet ul {
  margin: 0;

  padding: 0;

  list-style: none;

  display: flex !important;

  flex-wrap: wrap;
}

#search_filters {
  padding: 0 !important;
}

/* ============== */

/* SIZE STYLES */

/* ============== */

/* Size options container - make it a flex container */

.facet:has(> p.h6.facet-title:contains("Size")) ul,
#facet_:has(+ p:contains("Size")) ul,
.facet:has(.h6:contains("Size")) ul {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding-top: 10px;
}

/* Hide original input and checkbox for size options */

.facet:has(> p.h6.facet-title:contains("Size")) .custom-checkbox,
#facet_:has(+ p:contains("Size")) .custom-checkbox,
.facet:has(.h6:contains("Size")) .custom-checkbox {
  display: none;
}

/* Size option individual styling */

.facet:has(> p.h6.facet-title:contains("Size")) .facet-label,
#facet_:has(+ p:contains("Size")) .facet-label,
.facet:has(.h6:contains("Size")) .facet-label {
  margin: 0;

  padding: 0;

  width: auto;
}

/* Style size option links as circular buttons */

.facet:has(> p.h6.facet-title:contains("Size")) .facet-label a.search-link,
#facet_:has(+ p:contains("Size")) .facet-label a.search-link,
.facet:has(.h6:contains("Size")) .facet-label a.search-link {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: 1px solid #ddd;

  background: #fff;

  padding: 0;

  margin: 0;

  font-size: 12px;

  text-decoration: none;

  color: #333;
}

/* Active size option */

.facet:has(> p.h6.facet-title:contains("Size")) .facet-label.active a.search-link,
#facet_:has(+ p:contains("Size")) .facet-label.active a.search-link,
.facet:has(.h6:contains("Size")) .facet-label.active a.search-link {
  background-color: #333;

  color: #fff;

  border-color: #333;
}

/* Alternative selector approach for Size based on facet index if needed */

.facet:nth-child(2) .facet-label a.search-link {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: 1px solid #ddd;

  background: #fff;

  padding: 0;

  font-size: 12px;
}

.facet:nth-child(2) .facet-label.active a.search-link {
  background-color: #333;

  color: #fff;

  border-color: #333;
}

/* ============== */

/* COLOR STYLES */

/* ============== */

/* Color swatches container */

.facet:has(> p.h6.facet-title:contains("Color")) ul,
#facet_:has(+ p:contains("Color")) ul,
.facet:has(.h6:contains("Color")) ul {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding-top: 10px;
}

/* Individual color swatch */

.facet:has(> p.h6.facet-title:contains("Color")) .facet-label,
#facet_:has(+ p:contains("Color")) .facet-label,
.facet:has(.h6:contains("Color")) .facet-label {
  margin: 0;
}

/* Hide color option text */

.facet:has(> p.h6.facet-title:contains("Color")) .facet-label a.search-link,
#facet_:has(+ p:contains("Color")) .facet-label a.search-link,
.facet:has(.h6:contains("Color")) .facet-label a.search-link {
  font-size: 0;

  padding: 0;

  display: block;
}

/* Color circle styling - From first version */

.custom-checkbox span.color {
  width: 30px !important;

  height: 30px !important;

  border-radius: 50%;

  border: 1px solid #ddd;

  display: block;
}

/* Active color swatch */

.facet-label.active .custom-checkbox span.color {
  border: 2px solid #333;
}

/* Additional color swatch styling to ensure circular appearance */

.facet:has(> p.h6.facet-title:contains("Color")) .custom-checkbox,
#facet_:has(+ p:contains("Color")) .custom-checkbox,
.facet:has(.h6:contains("Color")) .custom-checkbox {
  width: 30px;

  height: 30px;

  margin-left: 0;
}

/* For the color property element */

.custom-checkbox span.color {
  overflow: hidden;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: 1px solid #ddd;
}

/* Alternative selector for color facets */

.facet:nth-child(3) ul {
  display: flex;

  flex-wrap: wrap;

  gap: 0px;
}

.facet:nth-child(3) .facet-label {
  margin: 0;
}

.facet:nth-child(3) .facet-label a.search-link {
  font-size: 0;
}

.facet:nth-child(3) .custom-checkbox {
  width: 30px;

  height: 30px;

  margin-left: 0;
}

.facet:nth-child(3) .custom-checkbox span.color {
  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: 1px solid #ddd;

  display: block;
}

.facet:nth-child(3) .facet-label.active .custom-checkbox span.color {
  border: 2px solid #333;
}

/* ================= */

/* MOBILE RESPONSIVE */

/* ================= */

@media (max-width: 767px) {
  /* Mobile facet title */

  .title {
    padding: 10px 0;

    cursor: pointer;

    position: relative;
  }

  /* Mobile facet title chevron */

  .navbar-toggler.collapse-icons {
    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);
  }

  /* Size options on mobile */

  .facet:has(> p.h6.facet-title:contains("Size")) ul,
  #facet_:has(+ p:contains("Size")) ul,
  .facet:has(.h6:contains("Size")) ul {
    justify-content: flex-start;
  }

  /* Price inputs on mobile */

  .price-inputs {
    flex-direction: column;

    gap: 15px;
  }

  .price-input-container {
    width: 100%;
  }
}

.faceted-slider.collapse li {
  width: 90%;
}

.facet.clearfix[data-type="availability"] ul {
  display: block !important;
}

.facet.clearfix[data-type="availability"] {
  padding: 13px 0px !important;
}

.facet.clearfix[data-type="attribute_group"] {
  padding-top: 0px !important;
}

.color-facet ._gray-darker.search-link.js-search-link {
  display: none !important;
}

.color-facet {
  padding: 17px 0px !important;
}

.size-facet {
  padding: 27px 0px !important;

  /* background-color: green; */
}

.size-facet .size-circle {
  display: inline-block;

  margin: 5px;

  position: relative;
}

.size-facet .size-circle input {
  position: absolute;

  opacity: 0;

  width: 100%;

  height: 100%;

  cursor: pointer;
}

.size-facet .size-circle .size-label {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 30px; /* Adjust size as needed */

  height: 30px; /* Adjust size as needed */

  border-radius: 50%; /* Makes it a circle */

  background-color: #ffffff; /* Default white background */

  border: 1px solid #000000; /* Default border */

  font-size: 9px; /* Adjust text size */

  font-weight: 400; /* Match the bold text in the image */

  color: #000000; /* Default text color */

  text-align: center;

  transition: all 0.3s ease; /* Smooth transition for hover/active states */
}

.size-facet .size-circle input:checked + .size-label {
  background-color: #000000; /* Black background when selected */

  color: #ffffff; /* White text when selected */

  border-color: #000000; /* Keep border color consistent */
}

.size-facet .size-circle .size-label:hover {
  background-color: #e0e0e0; /* Light gray on hover (optional) */

  border-color: #000000; /* Keep border color on hover */
}

@media (max-width: 768px) {
  .size-facet .size-circle .size-label {
    width: 40px;

    height: 40px;

    font-size: 14px;
  }
}

.category-name-frame {
  position: relative;

  width: 100%;

  margin-bottom: 100px;

  color: white; /* Text color */
}

/* @media (max-width: 768px) {

      .category-name-frame {



        }



  } */

.category-name-frame img {
  width: 100%;

  height: 100%;

  object-fit: cover; /* Ensures the image covers the div */

  position: absolute;

  top: 0;

  right: 0;
}

.category-name-frame h1,
.category-name-frame h2,
.category-name-frame .breadcrumb {
  position: relative;

  z-index: 2; /* Ensures text appears above the image */

  margin: 0;
}

.title-container {
  padding: 160px;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;
}

.category-name-frame h2,
.category-name-frame h1 {
  font-family: Jost;

  font-weight: 500;

  font-size: 54px;

  color: #fff;
}

.category-name-frame .breadcrumb {
  font-family: DM Sans;

  font-weight: 500;

  font-size: 24px;

  color: #fff;

  padding: 15px !important;
}

@media (max-width: 768px) {
  .title-container {
    padding: 140px 0px;
  }

  .category-name-frame h2,
  .category-name-frame h1 {
    font-family: DM Sans;

    font-weight: 700;

    font-size: 32px;
  }

  .category-name-frame .breadcrumb {
    font-family: DM Sans;

    font-weight: 500;

    font-size: 14px;
  }
}

.col-md-8.col-lg-9 .listing-products-main-frame {
  margin-top: -70px;
  /*margin-left: -30px;*/
  padding-bottom: 50px;
}
.products-sort-order .btn-order-products {
  background-color: transparent;
}
.products-sort-order .btn-order-products:hover {
  background-color: transparent;
}

/* .product-miniature{
  width: 342px;
} */
.active_filters .active-filter-title {
  padding: 15px 0px;
}

nav.pagination ul {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  nav.pagination ul {
    gap: 12px !important;
  }
  .pagination a.previous,
  .pagination a.next {
    font-size: 16px !important;
  }
  .pagination a:not(.previous):not(.next) {
    height: 45px !important;
    width: 45px !important;
  }
}

@media (max-width: 423px) {
  nav.pagination ul {
    gap: 10px !important;
  }
  .pagination a.previous,
  .pagination a.next {
    font-size: 14px !important;
  }
  .pagination a:not(.previous):not(.next) {
    height: 40px !important;
    width: 40px !important;
  }
}
@media (max-width: 375px) {
  nav.pagination ul {
    gap: 5px !important;
  }
}

#category #products {
  padding: 0 20px;
}