.store-pg-cont {
  display: flex;
  max-width: 97rem;
  margin: 2rem auto;
  /* background-color: blueviolet; */
  padding: 0rem 8.2rem;
}

.filters-cont {
  height: 100%;
  width: 25%;
  border-right: 2px solid #183d9e;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 0rem 0rem;
  gap: 1rem;
}

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 2px solid rgba(0, 0, 0, 0.121);
  padding-bottom: 1rem;
}

.f-head-text {
  display: flex;
  gap: 1rem;
}

.f-head-text h3 {
  font-size: 1.4rem;
}

.f-clear p {
  text-decoration: underline;
  font-size: 0.8rem;
  margin-top: 5px;
  transition: all 0.3s;
  cursor: pointer;
  font-weight: 500;
}

.filter-type {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.121);
  padding-bottom: 1.2rem;
}

.filter-type h5 {
  color: black;
  font-size: 0.9rem;
  opacity: 0.8;
}

.filter-type ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-type: none;
}

.filter-type ul li {
  font-size: 1rem;
  font-weight: 500;
  /* opacity: 0.6; */
  display: flex;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}
.filter-type ul li span {
  opacity: 0.6;
}
.filter-type ul li:hover span {
  opacity: 0.8;
}

.filter-type ul li label {
  display: flex;
  gap: 0.5rem;
  cursor: pointer;
}

.filter-type input[type='checkbox'] {
  accent-color: #183d9e;
  opacity: 1 !important;
}

/* * PRODUCTS GRID */
.products-grid {
  /* background-color: red; */
  padding: 2rem;
  height: 100%;
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.product {
  display: flex;
  flex-direction: column;
  padding: 0rem 1rem;
  padding-top: 1rem;
}

.prod-img-cont {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
}

.product .prod-img {
  align-self: center;
  margin-bottom: 0.5rem;
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.free-del {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.prod-details {
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.prod-details h5 {
  font-size: 1rem;
}

.prod-pricing {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.rating img {
  height: 1rem;
}

.rating span {
  height: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.free-del p {
  font-weight: 600;
  font-size: 0.9rem;
}

.del-icon {
  height: 1.2rem;
  filter: grayscale(30%);
}

.discounted-price {
  font-weight: 700;
}
.original-price {
  text-decoration: line-through;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.8;
}

.fil-sort {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 1rem;
  padding-top: 0rem;
}

.fil-sort .f-head-text {
  display: none;
}

/* .fil-sort select {
  font-size: 1rem;
  border-radius: 10px;
} */

.fil-sort select {
  font-size: 1rem;
  width: 12rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  /* Custom arrow */
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1rem;
}

/* Hover state */
.fil-sort select:hover {
  border-color: #888;
}

/* Focus state */
.fil-sort select:focus {
  outline: none;
}

.fil-sort select option {
  font-size: 0.9rem;
}

.empty-text-filler {
  grid-column-start: 1;
  grid-column-end: -1;
  text-align: center;
  height: 100%;
  margin-top: 2.2rem;
}

.empty-text-filler h2 {
  opacity: 0.8;
  font-style: italic;
  font-size: 1.3rem;
}

/* RESPONSIVE GRID */
@media (max-width: 1300px) {
  .prod-img-cont {
    height: 15rem;
  }
}
@media (max-width: 1275px) {
  .free-del p {
    font-size: 0.8rem;
  }
  .f-head-text h3 {
    font-size: 1.2rem;
  }
  .f-clear p {
    font-size: 0.6rem;
  }
}

@media (max-width: 1250px) {
  .prod-img-cont {
    height: 13rem;
  }
}

@media (max-width: 1210px) {
  .free-del p {
    font-size: 0.7rem;
  }
  .del-icon {
    height: 1rem;
  }
}
@media (max-width: 1160px) {
  .store-pg-cont {
    padding: 0rem 4.2rem;
  }
}

@media (max-width: 950px) {
  .store-pg-cont {
    padding: 0rem 2.2rem;
  }
}

@media (max-width: 900px) {
  .store-pg-cont .filters-cont {
    display: none;
  }
  .products-grid {
    padding: 0rem;
  }
  .fil-sort .f-head-text {
    display: flex;
  }
  .fil-sort {
    padding: 0rem 1.3rem 1rem 1.3rem;
  }
  .f-head-text {
    gap: 0.5rem;
  }
  .store-pg-cont {
    margin: 0rem auto;
  }
}

@media (max-width: 850px) {
  .product {
    padding: 0rem 0.6rem;
  }
  .products-grid {
    row-gap: 0.8rem;
  }
}

@media (max-width: 650px) {
  .products-grid {
    row-gap: 0.8rem;
    grid-template-columns: 1fr 1fr;
  }
  .store-pg-cont {
    padding: 0rem 1.2rem;
  }
  .prod-img-cont {
    height: 15rem;
  }
}

@media (max-width: 580px) {
  .prod-img-cont {
    height: 14rem;
  }
}

@media (max-width: 550px) {
  .prod-img-cont {
    height: 13rem;
  }
}

@media (max-width: 490px) {
  .fil-sort select {
    font-size: 0.9rem;
  }
  .fil-sort select {
    width: 11rem;
  }
}

@media (max-width: 470px) {
  .fil-sort select {
    font-size: 0.9rem;
  }
}

@media (max-width: 433px) {
  .products-grid {
    row-gap: 0.2rem;
  }
  .product {
    padding: 0rem 0.5rem;
  }
  .prod-img-cont {
    height: 12rem;
  }
  .prod-details h5 {
    font-size: 0.8rem;
  }
  .prod-pricing {
    gap: 0.3rem;
  }
  .discounted-price {
    font-size: 0.8rem;
  }
  .original-price {
    font-size: 0.7rem;
  }
  .rating img {
    height: 0.8rem;
  }
  .rating span {
    font-size: 0.8rem;
  }
  .free-del {
    gap: 0.4rem;
  }
  .fil-sort select {
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    width: 10.5rem;
  }
}

@media (max-width: 400px) {
  .prod-img-cont {
    height: 11rem;
  }
}

.mob-filters {
  width: 100vw;
  background-color: white;
  position: absolute;
  left: -100%;
  /* top: 0; */
  z-index: 99999;
  height: 100vh;
  display: none;
}

@media (max-width: 900px) {
  .mob-filters {
    display: flex;
  }
}

.mob-filters .filters-cont {
  width: 100%;
  padding: 1.4rem;
  padding-top: 0rem;
}

.filter-apply {
  outline: none;
  padding: 0.4rem;
  font-size: 0.8rem;
  border-radius: 10px;
  background-color: #1946b7;
  color: white;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
}

.f-close p {
  text-decoration: underline;
  font-size: 0.8rem;
  margin-top: 5px;
  transition: all 0.3s;
  cursor: pointer;
  font-weight: 500;
}

.prod-link:link,
.prod-link:visited,
.prod-link:hover,
.prod-link:active {
  text-decoration: none;
  color: inherit;
}