:root {
  --off-white: #faf7f2;
  --quartz: #f3d9df;
  --quartz-dark: #e8b4c0;
  --black: #0b0b0b;
  --gold: #c9a24b;
  --gold-light: #e4cd93;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  background: var(--off-white);
  color: var(--black);
}

.font-display {
  font-family: "Playfair Display", Georgia, serif;
}

.text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.border-gold { border-color: var(--gold); }
.bg-quartz { background-color: var(--quartz); }
.bg-quartz-dark { background-color: var(--quartz-dark); }

.btn-primary {
  background: var(--black);
  color: var(--off-white);
  transition: all .25s ease;
  letter-spacing: .05em;
}
.btn-primary:hover { background: var(--gold); color: var(--black); }

.btn-gold {
  background: var(--gold);
  color: var(--black);
  transition: all .25s ease;
}
.btn-gold:hover { background: var(--gold-light); }

.chip {
  border: 1px solid var(--black);
  transition: all .2s ease;
}
.chip.active, .chip:hover {
  background: var(--black);
  color: var(--off-white);
}

.product-card { transition: transform .3s ease, box-shadow .3s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

.zoom-wrap { overflow: hidden; }
.zoom-wrap img { transition: transform .4s ease; }
.zoom-wrap:hover img { transform: scale(1.15); }

.wishlist-heart { transition: transform .2s ease, color .2s ease; }
.wishlist-heart.active { color: #e0295e; transform: scale(1.15); }

#cart-drawer, #cart-overlay { transition: all .35s ease; }

.discount-badge {
  background: var(--black);
  color: var(--gold);
  font-size: .7rem;
  letter-spacing: .05em;
}

.matrix-slot {
  border: 2px dashed var(--quartz-dark);
  transition: all .2s ease;
}
.matrix-slot.filled { border-style: solid; border-color: var(--gold); }

.combo-card {
  animation: fadeIn .4s ease forwards;
  opacity: 0;
}
@keyframes fadeIn { to { opacity: 1; } }

.ad-slot {
  background: repeating-linear-gradient(45deg, #f0ece4, #f0ece4 10px, #e9e2d6 10px, #e9e2d6 20px);
  border: 1px dashed #c9a24b88;
  color: #8a7a52;
}

.star { color: #d8d8d8; }
.star.filled { color: var(--gold); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,75,.15);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--quartz-dark); border-radius: 4px; }