body {
      font-family: 'Montserrat', sans-serif !important;
    }

    .product-gallery {
      display: flex;
      gap: 15px;
    }

    /* Thumbnails */
    .thumbnail-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .thumbnail-list img {
      width: 70px;
      height: auto;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 4px;
      transition: 0.3s;
    }
    .thumbnail-list img.active {
      border: 2px solid #000;
    }
    .thumbnail-list img:hover {
      border-color: #555;
    }

    /* Main Image */
    .main-image img {
      width: 100%;
      max-width: 500px;
      height: auto;
      object-fit: cover;
      border-radius: 6px;
      display: block;
      margin: 0 auto;
    }

    /* Size buttons */
    .size-btn {
      margin: 5px 5px 10px 0;
    }

    
    /* Custom Enquiry Button */
    

   
    
/* Product Card */
.item-card {
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
}

/* Image Wrapper */
.item-img-box {
  position: relative;
  overflow: hidden;
}

.item-img-box img {
  width: 100%;
  display: block;
  transition: opacity 0.3s ease-in-out;
  max-width: 100%;
  max-height: 100%;
    height: 350px;
    object-fit: cover;
}

/* Hover Effect */
.item-img-box .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.item-img-box:hover .img-main {
  opacity: 0;
}
.item-img-box:hover .img-hover {
  opacity: 1;
}

/* Quick View Button */
.btn-quick {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding:2px;
  background: #000;
  color: #fff;
  border: none;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s ease-in-out;
  width: 100%;
}

.item-img-box:hover .btn-quick {
  opacity: 1;
}

/* Product Details */
.item-name {
  font-size: 14px;
  font-weight: 400;
  margin: 10px 0 5px;
}

.item-price {
  font-size: 13px;
  color: #555;
}
/* Equal card layout */
.style-card {
  width: 250px;              /* fixed width */
  margin: 15px;
  text-align: center;
  transition: transform 0.3s ease;
}

.style-card:hover {
  transform: translateY(-5px);
}

/* Image wrapper with fixed height */
.style-img-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 320px;             /* fixed height for all cards */
}

.style-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* crop image to fit equal size */
  transition: opacity 0.3s ease;
}

/* Hover image effect */
.style-img-wrapper img.style-hover-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.style-img-wrapper:hover img.style-main-img {
  opacity: 0;
}

.style-img-wrapper:hover img.style-hover-img {
  opacity: 1;
}

/* Quick view button */
.style-quick-view {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.style-img-wrapper:hover .style-quick-view {
  opacity: 1;
}

/* Product text */
.style-name {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
}

.style-price {
  font-size: 13px;
  color: gray;
}

/* Row alignment for multiple cards */
.styles-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.modal-backdrop.show {
  background-color: rgba(255, 255, 255, 0.2); /* light transparent overlay */
  backdrop-filter: blur(6px); /* blur effect */
}

    .thumbnail-list img {
      width: 70px;
      margin: 5px;
      cursor: pointer;
      border: 2px solid transparent;
    }
    .thumbnail-list img.active {
      border: 2px solid #000;
    }
    .main-image img {
      width: 100%;
      border-radius: 5px;
    }
    .share-icons a,
    .share-icons button {
      font-size: 24px;
      color: #333;
      background: none;
      border: none;
      cursor: pointer;
    }
    .share-icons a:hover,
    .share-icons button:hover {
      color: #007bff;
    }
  
    .thumbnail-list img {
      width: 70px;
      margin: 5px;
      cursor: pointer;
      border: 2px solid transparent;
    }
    .thumbnail-list img.active {
      border: 2px solid #000;
    }
    .main-image img {
      width: 100%;
      border-radius: 5px;
    }
    /* Share Dropdown Style */
    #shareDropdown {
      display: none;
      border-radius: 8px;
    }
    #shareDropdown h6 {
      font-weight: 400;
    }
    .share-icons a, 
.share-icons button {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 5px;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}

.share-icons a:hover, 
.share-icons button:hover {
  background: #e0e0e0;
  transform: scale(1.1);
}

.share-icons i {
  font-size: 20px;
  color: #6c6c6c;
}

/* Specific colors for each platform */
.share-icons a[href*="whatsapp"] i { color: #000; }
.share-icons a[href*="facebook"] i { color: #000;; }
.share-icons a[href*="instagram"] i { color: #050505; }
.share-icons button i { color: #333; } /* Copy link */

.size-btn {
  position: relative;
  border: 1px solid #494848;
  background: transparent;
  color: #000;
  font-weight: 400;
  padding: 10px 18px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s ease;
  margin: 4px;
}

/* ------------------------------
   UNIVERSAL BUTTON BASE
------------------------------ */
button,
.btn-enquiry,
.btn-size-chart,
.slide-up-btn,
#shareBtn,
#wishlistBtn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.4s ease, border-color 0.4s ease;
  z-index: 1;
}

/* ------------------------------
   FILL ANIMATION EFFECT
------------------------------ */
button::before,
.btn-enquiry::before,
.btn-size-chart::before,
.slide-up-btn::before,
#shareBtn::before,
#wishlistBtn::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1; /* keeps text above */
  transition: top 0.4s ease;
}

/* Hover = Fill slides up */
button:hover::before,
.btn-enquiry:hover::before,
.btn-size-chart:hover::before,
.slide-up-btn:hover::before,
#shareBtn:hover::before,
#wishlistBtn:hover::before {
  top: 0;
}

/* Hover = Text turns white */
button:hover,
.btn-enquiry:hover,
.btn-size-chart:hover,
.slide-up-btn:hover,
#shareBtn:hover,
#wishlistBtn:hover {
  color: #fff;
}

/* ------------------------------
   SPECIAL BUTTONS
------------------------------ */
.buy-now {
  border-color: #000;
  background: transparent;
  color: #000;
}

.buy-now::before {
  background: #000; /* default black */
}

.buy-now:hover {
  color: #fff;
}

/* If you want BUY NOW to invert (white fill, black text) */
.buy-now.invert::before {
  background: #fff;
}

.buy-now.invert:hover {
  color: #000;
}

/* ------------------------------
   SHARE & WISHLIST LAYOUT FIXES
------------------------------ */
#shareBtn {
  width: 100px;
  font-size: 14px;
  padding: 10px 5px;
}

#wishlistBtn {
  width: 220px;
  font-size: 14px;
  padding: 10px 5px;
}

/* ------------------------------
   RESPONSIVE FIX
------------------------------ */
@media (max-width: 576px) {
  .share-section {
    flex-wrap: nowrap;
    justify-content: center;
  }

  #shareBtn {
    width: 100px;
    height: 35px;
  }

  #wishlistBtn {
    width: 170px;
    height: 35px;
  }
}
/* ------------------------------
   UNIVERSAL SHOP BUTTONS (BOXED)
------------------------------ */
/* ------------------------------
   ADD TO CART (solid black)
------------------------------ */
.btn-cart {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 400;
  border: 1px solid #000;
  border-radius: 5px;
  background: #fff;
  color: #000;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cart:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

/* ------------------------------
   ORDER NOW (outlined white box)
------------------------------ */
.btn-order {
   width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 400;
  border: none;
  border-radius: 5px;
  background: #000;
   color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-order:hover {
background: transparent;
  color: #000000;
  border: 1px solid #000;
  transform: translateY(-2px);
}
.col-md-6 {
  margin-bottom: 40px; /* pushes the next section down */
}


/* ------------------------------
   Spinner Alignment Fix
------------------------------ */
.spinner-border {
  vertical-align: middle;
}



/* ------------------------------
   Responsive Adjustment
------------------------------ */
@media (max-width: 576px) {
  .btn-cart, .btn-order {
    font-size: 14px;
    padding: 6px 10px;
  }
}
/* ------------------------------
   Header icon: disable button hover/fill only
   (keeps other buttons unchanged)
------------------------------ */

/* Hide the ::before fill for header icon buttons */
.hamburger-btn::before,
.close-drawer::before,
#accountMenuDesktop::before,
#accountMenuDesktop.btn::before {
  display: none !important;
  content: none !important;
}

/* Prevent hover transform / color / background on header icons */
.hamburger-btn,
.close-drawer,
#accountMenuDesktop,
#accountMenuDesktop img,
.hamburger-btn img {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  color: inherit !important;
  transform: none !important;
}

/* Ensure hover won't slide the ::before into view */
.hamburger-btn:hover::before,
.close-drawer:hover::before,
#accountMenuDesktop:hover::before {
  top: 100% !important;
  opacity: 0 !important;
}
/* ============================
   FIX SIZE BUTTON SELECTION
============================ */

/* Disable universal fill animation for size buttons */
.size-btn::before {
  display: none !important;
  content: none !important;
}

/* Prevent hover from changing selected state */
.size-btn:hover {
  color: #000;
  background: #fff;
}

/* Active (selected) size */
.size-btn.active {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
/* ==============================
   PRODUCT DETAILS IMAGE FIX
   (RECTANGLE – NOT SQUARE)
============================== */

/* Main product image */
.product-gallery .main-image img {
  width: 100%;
  max-width:520px;
  height:auto;              /* 🔥 KEY */
  aspect-ratio: 2 / 3;       /* 🔥 PORTRAIT */
  object-fit: cover;
  border-radius: 6px;
}

/* Thumbnail images */
.product-gallery .thumbnail-list img {
  width: 70px;
  height: 100px;             /* 🔥 NOT square */
  object-fit: cover;
}
/* ==============================
   REMOVE CURVE FROM PRODUCT IMAGE
============================== */

.product-gallery .main-image img {
  border-radius: 0 !important;
}

/* Optional: thumbnails also sharp */
.product-gallery .thumbnail-list img {
  border-radius: 0 !important;
}
/* ===============================
   PRODUCT DESCRIPTION – CLEAN & PREMIUM
=============================== */

/* Section heading */
.product-page h5 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: #111;
  margin-top: 48px;
  margin-bottom: 14px;
  position: relative;
}

/* Elegant underline */
.product-page h5::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background-color: #000;
  margin-top: 8px;
}

/* Description paragraph */
.product-page p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #555;
  max-width: 640px;
  margin-bottom: 18px;
}

/* Description list */
.product-page ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 640px;
}

/* List items */
.product-page ul li {
  font-size: 14px;
  color: #444;
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
  display: flex;
  align-items: center;
}

/* Minimal bullet */
.product-page ul li::before {
  content: "—";
  font-size: 16px;
  color: #000;
  margin-right: 10px;
}

/* Remove divider from last item */
.product-page ul li:last-child {
  border-bottom: none;
}
/* ===============================
   QUICK VIEW BUTTON
================================ */
.quick-view {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  border: none;
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 25px;
  opacity: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 2;
}

.category-img-wrapper {
  position: relative;
  overflow: hidden;
}

.category-img-wrapper:hover .quick-view {
  opacity: 1;
  bottom: 20px;
}

/* ===============================
   QUICK VIEW MODAL
================================ */
#quickViewModal .modal-content {
  border-radius: 16px;
  border: none;
  padding: 20px;
}

#quickViewModal .modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

#quickViewModal .modal-title {
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#quickViewModal .btn-close {
  box-shadow: none;
}

/* ===============================
   QUICK VIEW IMAGE
================================ */
#quickViewModal img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
}

/* ===============================
   QUICK VIEW CONTENT
================================ */
#quickViewModal h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

#quickViewModal .fw-bold {
  font-size: 18px;
  margin-bottom: 12px;
}

#quickViewModal .fw-description {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ===============================
   QUICK VIEW CTA BUTTON
================================ */
#quickViewModal .btn-dark {
  border-radius: 30px;
  padding: 12px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 767px) {
  #quickViewModal img {
    height: 300px;
  }

  #quickViewModal .modal-content {
    padding: 15px;
  }

  #quickViewModal h5 {
    font-size: 18px;
  }
}
/* ==============================
   FIX: Order Now hover issue
   (Disable global fill animation)
============================== */

.btn-order::before {
    display: none !important;
    content: none !important;
}

.btn-order {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.btn-order:hover {
 background: #000;
color: #fff !important;
}
/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* Product card */
.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Image wrapper – FIXED HEIGHT */
.item-img-box {
  width: 100%;
  height: 420px;              /* 🔑 KEY FIX */
  overflow: hidden;
  position: relative;
}

/* Images */
.item-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 🔑 MOST IMPORTANT */
  transition: transform 0.4s ease;
}

/* Hover zoom */
.item-img-box:hover img {
  transform: scale(1.05);
}

/* Product name */
.item-name {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
}

/* Product price */
.item-price {
  font-size: 13px;
  color: #666;
}