/* ================= RESET ================= */
*{
  box-sizing: border-box;
}

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#fffdf9;
  color:#2b2b2b;
}

/* ================= PAGE SECTION ================= */
.rings-category{
  padding:70px 6%;
}

/* ================= HEADING ================= */
.category-head{
  margin-bottom:30px;
}

.category-head h2{
  font-size:28px;
  font-weight:500;
  margin:0 0 6px;
}

.category-head span{
  font-size:14px;
  color:#6b7280;
}

/* ================= GRID (MOST IMPORTANT) ================= */
.rings-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 🔥 FIX */
  gap:40px;
  width:100%;
}

/* ================= PRODUCT CARD ================= */
.product-card{
  width:100%;              /* 🔥 FIX */
  max-width:100%;
  cursor:pointer;
}

/* ================= IMAGE BOX ================= */
.fade-img{
  position:relative;
  width:100%;
  height:260px;
  max-width:100%;          /* 🔥 FIX */
  background:#f3f3f3;
  border-radius:14px;
  overflow:hidden;
}

/* IMAGES */
.fade-img img{
  display:block;           /* 🔥 FIX */
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:opacity 0.6s ease;
}

/* DEFAULT STATES */
.fade-img .img-front{
  opacity:1;
  z-index:2;
}

.fade-img .img-back{
  opacity:0;
  z-index:1;
}

/* HOVER FADE */
.product-card:hover .img-front{
  opacity:0;
}

.product-card:hover .img-back{
  opacity:1;
}

/* PRODUCT TEXT */
.product-card h4{
  font-size:16px;
  font-weight:400;
  margin:10px 0 6px;
}

.product-card p{
  font-size:14px;
  color:#7a5c28;
  margin:0;
}

/* ================= HALF BANNER ================= */
.banner-card{
  grid-column: span 2;     /* half width */
  height:260px;
  border-radius:16px;
  background:linear-gradient(135deg,#f5ead7,#fff7e6);
  display:flex;
  align-items:center;
  padding-left:50px;
  width:100%;
}

.banner-text h3{
  font-size:32px;
  margin:0 0 10px;
}

.banner-text button{
  padding:10px 28px;
  border-radius:30px;
  border:none;
  background:#111;
  color:#fff;
  cursor:pointer;
}

/* ================= CTA ================= */
.take-look-wrap{
  text-align:center;
  margin-top:50px;
}

.take-look{
  padding:14px 42px;
  border-radius:30px;
  border:1px solid #c9a23f;
  background:#fff;
  font-size:15px;
  cursor:pointer;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .rings-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .banner-card{
    grid-column: span 2;
  }
}

@media(max-width:600px){
  .rings-grid{
    grid-template-columns:1fr;
  }
}