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

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

/* ========== PAGE SECTION ========== */
.earrings-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 (KEY FIX) ========== */
.earrings-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:40px;
  width:100%;
}

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

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

.fade-img img{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:opacity .6s ease;
}

.img-front{
  opacity:1;
  z-index:2;
}

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

.product-card:hover .img-front{
  opacity:0;
}

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

/* ========== 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;
  height:260px;
  border-radius:16px;
  background:linear-gradient(135deg,#f6eadf,#fff7ee);
  display:flex;
  align-items:center;
  padding-left:50px;
}

.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){
  .earrings-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .banner-card{
    grid-column: span 2;
  }
}

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