:root{
  --black: #111111;
  --gold: #C8A96B;
  --cream: #F7F3EE;
  --deep-green: #18392B;
  --burgundy: #6E1E2A;
}

html,body{height:100%}
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--black);
  background: var(--cream);
}

.brand-title{font-family: 'Playfair Display', serif; font-size:1.15rem; color:var(--black); font-weight:700}
.brand-sub{color:rgba(17,17,17,0.6)}

.site-header{background:transparent;border-bottom:0;padding-top:18px;padding-bottom:6px}
.navbar .nav-link{color:var(--black);font-weight:500;padding:0.6rem 0.9rem}
.navbar .nav-link:hover{color:var(--burgundy)}

.hero{
  position:relative;
  min-height:72vh;
  display:flex;align-items:center;
  background:linear-gradient(180deg, rgba(17,17,17,0.04), rgba(17,17,17,0));
}
.hero .display-5{font-family:'Playfair Display', serif; font-size:3.2rem; color:var(--black); font-weight:700}
.hero .lead{color:rgba(17,17,17,0.8);font-size:1.125rem}

.hero .swiper{height:420px;border-radius:14px;overflow:hidden}

.card{border:0;background:white;border-radius:12px;box-shadow:0 8px 24px rgba(17,17,17,0.06)}

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

.btn-dark{background:linear-gradient(180deg,var(--black),#0b0b0b);border:none;color:var(--gold);padding:0.65rem 1rem;font-weight:600}
.btn-dark:hover{background:linear-gradient(180deg,#0f0f0f,var(--burgundy));color:#fff}

.badge-sale{position:absolute;right:12px;top:12px;background:var(--gold);color:var(--black);padding:6px 10px;border-radius:20px;font-weight:700;font-size:.85rem}

.site-footer{background:var(--black);color:var(--cream);padding:48px 0}
.site-footer a{color:var(--cream)}

.newsletter{background:linear-gradient(90deg, rgba(200,169,107,0.06), rgba(24,57,43,0.03));padding:36px;border-radius:10px}

.small-muted{color:rgba(17,17,17,0.6)}

.swiper-slide img{object-fit:cover;width:100%;height:100%}

@media (max-width:768px){
  .hero .display-5{font-size:2rem}
  .hero .swiper{height:220px}
}