body {
  margin: 0;

  background-color: white;
  color: #ba9544;
}

.fount {
  font-family: 'Marcellus', serif;
}


.category-img {
  width: 100%;
  /* full width of the card */
  height: 250px;
  /* fixed height for all category images */
  object-fit: cover;
  /* crop the image to fill without stretching */
  border-radius: 15px;
}



/* Collection Cards */
.collection-card img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 10px;
}

.custom-img {
  height: 170px;
  object-fit: cover;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.custom-img-large {
  height: 550px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.discount-badge {
  border-radius: 30px;
  color: red;
  border: 1px solid red;
  background: rgb(240, 162, 162);
  padding: 0.3rem 0.9rem;
  font-weight: 500;
  cursor: default;
}

/* Men Section */
.men-section {
  background-color: #f8f8f8;
  padding: 40px 0;
  margin-top: -20px;
}

.men-section .small-images img {
  width: 100%;
  height: auto;
}

/* Newsletter Section */
.litel button {
  border-radius: 30px;
  font-weight: 500;
}

/* Footer */
.footer a {
  color: white !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  .footer .d-flex.justify-content-left {
    justify-content: center !important;
  }
}


.price-slider-container {
  position: relative;
  width: 100%;
}

/* Dual range track */
.dual-range {
  -webkit-appearance: none;
  width: 80%;
  height: 7px;
  border-radius: 5px;
  background: #ba9544;
  outline: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Chrome & Safari thumb */
.dual-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ba9544;
  border: 2px solid #ba9544;
  cursor: pointer;
  margin-top: 0;
  /* already centered by transform */
  position: relative;
  z-index: 2;
}

/* Firefox thumb */
.dual-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ba9544;
  border: 2px solid #ba9544;
  cursor: pointer;
}

.color-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ccc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.color-circle i {
  display: none;
  /* hide check icon by default */
}

.color-circle.selected i {
  display: block;
  /* show check icon for selected */
}


.size-btn {
  border-radius: 30px;
  padding: 6px 16px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}


.apply-btn {
  width: 100%;
  border-radius: 30px;
  padding: 10px 30px;
  border: none;
  background-color: #ba9544;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.apply-btn:hover{
  background-color: #c0a770;
  color: #fff;
}



ul li {
  font-size: 14px;
  /* smaller font size */
  cursor: pointer;
}


.page-link {
  /* rounded pagination buttons */
  min-width: 36px;
  text-align: center;
}

.page-item.active .page-link {
  background-color: #ba9544;
  color: #fff;
  border-color: #ba9544;
}

.page-link:hover {
  background-color: #caae71;
  color: #fff;
}

/* =============================================
   PRODUCT CARD IMAGES - RESPONSIVE & SQUARE
   (Category Page ke liye)
============================================= */
.category-img {
  width: 100%;
  height: 280px;
  /* ← Desktop: Bold & Clear */
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-img:hover {
  transform: scale(1.03);
}

/* Tablet */
@media (max-width: 992px) {
  .category-img {
    height: 200px;
  }
}

/* Mobile Large */
@media (max-width: 768px) {
  .category-img {
    height: 200px;
  }
}

/* Mobile Small (Small Screens) */
@media (max-width: 576px) {
  .category-img {
    height: 160px;
    /* ← SMALL SCREEN: HEIGHT KAM */
    border-radius: 10px;
  }
}

/* Extra Small Mobile */
@media (max-width: 350px) {
  .category-img {
    height: 140px;
  }
}

@media (max-width: 350px) {
  .category-img {
    height: 110px;
  }
}