/* =====================================================
   PRODUCT PAGE – EXACT MATCH (HOME PAGE PRODUCTS)
   No Navbar / No Footer / No Top Bar
===================================================== */

/* ========== BASE ========== */
body{
  font-family: 'Montserrat', sans-serif;
  background:#ffffff;
  color:#111;
}

/* remove link underline */
a{
  text-decoration:none;
  color:inherit;
}

/* =====================================================
   PRODUCT CARD
===================================================== */

.category-card{
  position:relative;
  width:100%;
  background:transparent;
  overflow:hidden;
}

/* IMAGE WRAPPER – EKADI EXACT RATIO */
/* PRODUCT IMAGE SIZE – SHORTER & CLEAN */
.category-img-wrapper{
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background: #f3f3f3;
}

/* Images */
.category-img-wrapper img{
  width:100%;
  height:100%;
  object-fit: cover;          /* fills nicely */
  display:block;
  transition:transform .45s ease;
}


/* hover zoom */
.category-card:hover img{
  transform:scale(1.05);
}

/* =====================================================
   HOVER IMAGE SWAP
===================================================== */

.hover-img{
  position:absolute;
  inset:0;
  opacity:0;
  transition:.3s ease;
}

.category-card:hover .hover-img{
  opacity:1;
}

.category-card:hover .main-img{
  opacity:0;
}

/* =====================================================
   QUICK VIEW BUTTON – EXACT MATCH
===================================================== */

.quick-view{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  background:#000;
  color:#fff;
  border:none;
  padding:8px 16px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:0;
  transition:.3s ease;
  cursor:pointer;
  z-index:3;
}

.category-card:hover .quick-view{
  opacity:1;
}

/* =====================================================
   PRODUCT TEXT
===================================================== */

.category-name{
  padding:14px 16px 4px;
  font-size:14px;
  letter-spacing:1px;
  font-weight:500;
  text-transform:uppercase;
  color:#333;
}

.category-price{
  padding:0 16px 16px;
  font-size:14px;
  font-weight:600;
  color:#888;
}


/* =====================================================
   QUICK VIEW MODAL (OPTIONAL POLISH)
===================================================== */

.modal-content{
  border-radius:0;
}

.modal-body img{
  width:100%;
  object-fit:cover;
}

.modal-body h5{
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}
/* =====================================================
   PRODUCT PAGE – ALIGNMENT FIX (MATCH HOMEPAGE)
===================================================== */

/* Match homepage container width */
.product-container{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* Fix Bootstrap row overflow */
.product-container .row{
  margin-left: -14px;
  margin-right: -14px;
}

/* Control column spacing (same as homepage) */
.product-container [class*="col-"]{
  padding-left: 14px;
  padding-right: 14px;
}
/* ===============================
   FILTER DROPDOWNS – LUXURY STYLE
   =============================== */

/* Wrapper spacing fix */
.container-fluid.my-4 .form-select {
  height: 44px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111;

  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0;              /* sharp edges */
  box-shadow: none;

  padding: 0 42px 0 16px;        /* space for arrow */
}

/* Remove Bootstrap blue focus */
.container-fluid.my-4 .form-select:focus {
  border-color: #111;
  box-shadow: none;
}

/* Custom dropdown arrow */
.container-fluid.my-4 .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}

/* Align left & right selects evenly */
.container-fluid.my-4 .col-12 {
  gap: 24px;
}



/* =====================================================
   FILTER ALIGNMENT FIX – MATCH PRODUCT GRID EDGES
   ONLY ALIGNMENT (NO STYLE CHANGE)
===================================================== */

/* Wrap filter row to same inner width as product grid */
.container-fluid.my-4 > .row{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;   /* same as product columns */
  padding-right: 0px;
}

/* Ensure selects do not stretch */
.container-fluid.my-4 .form-select{
  width: 100%;
  max-width: 260px;   /* same visual width as product card */
}

/* Left dropdown sticks to left product edge */
.container-fluid.my-4 .col-12{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* =====================================================
   RESPONSIVE SYSTEM – PRODUCT PAGE ONLY
   (NO DESIGN CHANGE, ONLY RESPONSIVE BEHAVIOR)
===================================================== */

/* ================= TABLET ≤ 992px ================= */
@media (max-width: 992px){

  /* Filter row stays aligned */
  .container-fluid.my-4 > .row{
    padding-left:14px;
    padding-right:14px;
  }

  .container-fluid.my-4 .form-select{
    max-width:220px;
    height:42px;
    font-size:13px;
  }

  .category-name,
  .category-price{
    font-size:13px;
  }
}

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

  /* Stack filters vertically */
  .container-fluid.my-4 .col-12{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

  /* Full-width dropdowns */
  .container-fluid.my-4 .form-select{
    max-width:100%;
  }

  /* Center title */
  .our-collection-title{
    text-align:center;
    order:-1;
    font-size:18px;
    letter-spacing:2.5px;
  }

  /* Reduce image height slightly */
  .category-img-wrapper{
    aspect-ratio:2 / 3.2;
  }
}

/* ================= SMALL MOBILE ≤ 480px ================= */
@media (max-width: 480px){

  .container-fluid.my-4 .form-select{
    height:40px;
    font-size:12px;
  }

  .our-collection-title{
    font-size:16px;
    letter-spacing:2px;
  }

  .category-name,
  .category-price{
    font-size:12.5px;
  }

  /* Reduce quick view size */
  .quick-view{
    font-size:11px;
    padding:6px 12px;
  }
}
/* =====================================================
   FIX: FILTER → PRODUCT GAP (MATCH PRODUCT SPACING)
===================================================== */

/* Reduce bottom gap after filter row */
.container-fluid.my-4{
  margin-bottom: 0 !important;
}

/* Pull product grid slightly upward */
.container-fluid.my-4 + .container-fluid{
  margin-top: 14px;   /* SAME as product column padding */
}