/* =====================================================================
   ZULI — Luxe layer (purely visual, additive, non-breaking).
   Loaded LAST so it enhances existing classes without changing any logic.
   Palette harmonises the site's gold+cream tokens with the rose-gold brand.
   ===================================================================== */
:root{
  --luxe-rose:#c98a6e;
  --luxe-rose-deep:#a8664e;
  --luxe-gold:#C08A4A;
  --luxe-gold-lt:#E3BE86;
  --luxe-gold-dk:#7A5323;
  --luxe-shadow:0 18px 44px rgba(43,36,28,.16);
  --luxe-shadow-soft:0 10px 26px rgba(43,36,28,.10);
  --luxe-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- global polish ---------- */
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:rgba(200,160,74,.28); color:#2b241c; }

/* ---------- navbar: glassy + refined ---------- */
.navbar{
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 6px 22px rgba(43,36,28,.07);
  transition:box-shadow .35s var(--luxe-ease), background .35s var(--luxe-ease);
}
.nav-links a{ position:relative; transition:color .25s var(--luxe-ease); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:linear-gradient(90deg,var(--luxe-gold),var(--luxe-gold-lt));
  transition:width .3s var(--luxe-ease);
}
.nav-links a:hover::after{ width:100%; }

/* ---------- hero: cinematic depth + refined type ---------- */
.hero-content h1{ letter-spacing:.4px; text-shadow:0 2px 18px rgba(0,0,0,.18); }
.hero-tag{
  display:inline-block; letter-spacing:3px;
  padding:6px 16px; border-radius:999px;
  border:1px solid rgba(230,200,119,.55);
  background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
}
.hero-trust span{ position:relative; padding-left:20px; }
.hero-trust span::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--luxe-gold-lt); font-weight:700;
}

/* ---------- premium buttons (gold gradient + shine sweep + lift) ---------- */
.hero-btn, .btn{
  position:relative; overflow:hidden;
  transition:transform .28s var(--luxe-ease), box-shadow .28s var(--luxe-ease), filter .28s var(--luxe-ease);
  will-change:transform;
}
.hero-btn{
  background:linear-gradient(100deg,var(--luxe-gold-dk),var(--luxe-gold),var(--luxe-gold-lt));
  box-shadow:0 10px 26px rgba(168,127,46,.30);
  border:none;
}
.hero-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(168,127,46,.42); }
.hero-btn-ghost{ transition:all .28s var(--luxe-ease); }
.hero-btn-ghost:hover{ transform:translateY(-3px); border-color:var(--luxe-gold); color:var(--luxe-gold-dk); }

/* shine sweep */
.hero-btn::after, .btn::after{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); transition:left .6s var(--luxe-ease); pointer-events:none;
}
.hero-btn:hover::after, .btn:hover::after{ left:140%; }

/* ---------- product cards: premium lift + image zoom ---------- */
.card{
  border-radius:16px !important;
  overflow:hidden;
  box-shadow:var(--luxe-shadow-soft);
  border:1px solid rgba(236,227,215,.9);
  transition:transform .35s var(--luxe-ease), box-shadow .35s var(--luxe-ease), border-color .35s var(--luxe-ease);
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--luxe-shadow);
  border-color:rgba(200,160,74,.55);
}
.card img{
  transition:transform .6s var(--luxe-ease);
  border-radius:12px;
}
.card:hover img{ transform:scale(1.06); }
.card h3{ letter-spacing:.2px; }

/* card action buttons: filled Add-to-Cart, outlined Buy-Now for hierarchy */
.card .btn{
  background:linear-gradient(100deg,var(--luxe-gold-dk),var(--luxe-gold),var(--luxe-gold-lt));
  color:#fff; border:1px solid transparent; border-radius:10px;
  font-weight:600; letter-spacing:.3px;
}
.card .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(168,127,46,.32); }
.card .btn:last-of-type{
  background:#fff; color:var(--luxe-gold-dk);
  border:1.5px solid var(--luxe-gold);
}
.card .btn:last-of-type:hover{ background:#fffaf0; }

/* ---------- section rhythm + headings ---------- */
.products, .trending, .under-99, .trust-section{ position:relative; }
.products h2, .trending h2, .under-99 h2{
  letter-spacing:.4px;
}
.products h2::after, .trending h2::after{
  content:""; display:block; width:56px; height:3px; margin:12px auto 0;
  background:linear-gradient(90deg,var(--luxe-gold),var(--luxe-rose));
  border-radius:3px;
}

/* ---------- trust boxes: elevated cards ---------- */
.trust-box{
  transition:transform .3s var(--luxe-ease), box-shadow .3s var(--luxe-ease);
  border-radius:14px;
}
.trust-box:hover{ transform:translateY(-5px); box-shadow:var(--luxe-shadow-soft); }

/* ---------- under-99 & trending cards ---------- */
.under-99-card, .trending-container .card{
  transition:transform .35s var(--luxe-ease), box-shadow .35s var(--luxe-ease);
}
.under-99-card:hover{ transform:translateY(-6px); box-shadow:var(--luxe-shadow-soft); }

/* ---------- offer bar subtle shimmer ---------- */
.offer-bar{ background-size:200% 100%; animation:luxeShimmer 8s linear infinite; }
@keyframes luxeShimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

/* ---------- footer polish ---------- */
.footer{ position:relative; }
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--luxe-gold),var(--luxe-rose),transparent);
}
.footer-col a{ transition:color .25s var(--luxe-ease), padding-left .25s var(--luxe-ease); }
.footer-col a:hover{ color:var(--luxe-gold-lt); padding-left:4px; }

/* ---------- whatsapp float gentle pulse ---------- */
.whatsapp-float, .whatsapp-tooltip{ transition:transform .3s var(--luxe-ease); }

/* ---------- accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- tiny screens: ease the lift so nothing feels jumpy ---------- */
@media (max-width:600px){
  .card:hover{ transform:translateY(-4px); }
  .card:hover img{ transform:scale(1.03); }
}