/* ===== Decoluxe — Luxury Dark Theme (Black & Gold) ===== */
/* ===== Decoluxe — Venicasa palette ===== */
:root{
  /* blacks */
  --bg-root:#0a0a0b;     /* page background (near-black) */
  --bg-1:#131315;        /* cards / surfaces */
  --bg-2:#1a1b1f;        /* deeper surface */

  /* text */
  --ink:#f4f4f6;
  --ink-dim:#b9bdc6;

  /* “true gold” (richer & less yellow) */
  --gold:#d4af37;        /* base gold */
  --gold-2:#8c6b17;      /* deep shadow gold for gradients & borders */

  /* beige family (background washes & light sections) */
  --beige:#f6f2ea;
  --beige-2:#f3efe7;

  /* other tokens */
  --border:rgba(255,255,255,.06);
  --ring:rgba(212,175,55,.35);
  --shadow:0 10px 28px rgba(0,0,0,.5);
  --r-xl:18px; --r-lg:14px; --r-md:12px;
  --dur:.35s;
}

/* Optional helpers */
.bg-cream{ background:linear-gradient(180deg,var(--beige),var(--beige-2)); }
.text-gold{ color:var(--gold); }


html,body{background:var(--bg-root);color:var(--ink);}

a{color:var(--gold);text-decoration:none}
a:hover{color:#e2c766}  

/* Layout helpers */
/* Cards / surfaces */
.surface-1{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow)}
.surface-2{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.section-title{font-weight:800;letter-spacing:.2px}

/* Navbar */
.bg-nav{background:linear-gradient(180deg,#0e0e10,#0b0b0c)!important;border-bottom:1px solid var(--border)}
.brand-badge{height:32px;width:32px;border-radius:8px;background:radial-gradient(120% 120% at 20% 20%,var(--gold),#8b6b17);box-shadow:0 6px 18px rgba(212,175,55,.45)}
.navbar .nav-link{color:var(--ink-dim);font-weight:600}
.navbar .nav-link:hover{color:var(--ink)}

/* Hero */
.hero.card{background:linear-gradient(180deg,#111214,#0c0c0d);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow)}
.hero h1{font-weight:800}
.hero p{color:var(--ink-dim)}

/* Buttons */
.btn{border-radius:999px;font-weight:700;letter-spacing:.2px;transition:transform var(--dur) ease,box-shadow var(--dur) ease,filter var(--dur) ease}
.btn:focus{box-shadow:0 0 0 3px var(--ring)}
.btn-primary{
  color:#0b0b0c;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-2) 100%);
  border-color:var(--gold-2);
  box-shadow:0 10px 22px rgba(212,175,55,.25);
}
.btn-primary:hover{filter:brightness(.98);transform:translateY(-1px)}
.btn-outline-primary{color:var(--gold);border-color:var(--gold)}
.btn-outline-primary:hover{color:#0b0b0c;background:var(--gold);border-color:var(--gold)}

/* Product cards */
.card-product{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:transform var(--dur) cubic-bezier(.2,.8,.2,1),box-shadow var(--dur)}
.card-product:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.6)}
.card-product .ratio{background:#0f1012}
.card-product img{object-fit:cover;width:100%;height:100%;transition:transform .7s ease}
.card-product:hover img{transform:scale(1.04)}
.card-product .price{color:#e2c766;font-weight:800}

/* Utilities */
.text-dim{color:var(--ink-dim)}
.hr-soft{border-color:var(--border);opacity:.7}
.ratio-4x3{aspect-ratio:4/3}

/* Footer */
.footer{background:linear-gradient(180deg,#0b0b0c,#0a0a0a);border-top:1px solid var(--border);color:var(--ink-dim)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* Scrollbar */
::-webkit-scrollbar{height:12px;width:12px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--gold-2));border-radius:999px;border:3px solid var(--bg-root)}
::-webkit-scrollbar-track{background:var(--bg-root)}






/* === Hero Slider === */
.hero-slider{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(180deg,#111214,#0c0c0d); border:1px solid var(--border); box-shadow:var(--shadow);
  margin-bottom:1.5rem;
}
.hero-track{display:flex; width:100%; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hero-slide{
  position:relative; min-width:100%;
  background-image:var(--bg);
  background-size:cover; background-position:center;
  height:56vh; max-height:720px; min-height:320px;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
   radial-gradient(120% 120% at 20% 20%, rgba(212,175,55,.12), transparent 40%),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
  display:flex; align-items:center; justify-content:center; padding:2rem;
}
.hero-copy{max-width:960px}
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); color:#fff; border:1px solid var(--border);
  height:44px; width:44px; border-radius:999px; display:grid; place-items:center;
  backdrop-filter: blur(4px);
}
.hero-nav:hover{background:rgba(0,0,0,.55)}
.hero-nav.prev{left:12px}
.hero-nav.next{right:12px}
.hero-dots{
  position:absolute; left:0; right:0; bottom:14px; display:flex; gap:8px;
  justify-content:center; align-items:center;
}
.hero-dots .dot{
  width:10px; height:10px; border-radius:999px; border:1px solid var(--gold); background:transparent; opacity:.7;
}
.hero-dots .dot.active{background:var(--gold); opacity:1}

/* Responsive heights */
@media (max-width: 576px){
  .hero-slide{height:48vh; min-height:280px}
  .hero-copy h1{font-size:1.75rem}
  .hero-copy .lead{font-size:1rem}
}
@media (min-width: 577px) and (max-width: 992px){
  .hero-slide{height:52vh}
}
@media (min-width: 1400px){
  .hero-slide{height:60vh}
}

/* === Admin helpers (kept minimal to avoid leaking to public) === */
@media (prefers-reduced-motion:no-preference){
  .drag-item{transition:transform .12s ease, box-shadow .12s ease}
  .drag-item.ghost{box-shadow:0 12px 34px rgba(0,0,0,.45)}
}