/* ===== Brand tokens ===== */
:root{
  --bs-body-bg:    #0b0b0b;
  --bs-body-color: #EEEEEE;
  --bs-primary:    #D4AF37;
  --bs-secondary:  #BBBBBB;
  --bs-dark:       #000000;
  --bs-light:      #444444;

  --gold:          #D4AF37;
  --gold-2:        #b8962c;
  --ink:           #e8e8e8;
  --muted:         #bdbdbd;
  --glass:         rgba(10,10,10,.55);
  --hairline:      rgba(255,255,255,.06);
  --radius:        .9rem;
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }
body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
a { color: var(--bs-secondary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--bs-primary); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Skip link */
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus {
  position: fixed; left: 12px; top: 12px; padding: .5rem .75rem;
  background: #111; color: #fff; border: 1px solid var(--gold); border-radius: .5rem; z-index: 9999;
}

/* ===== Top Bar ===== */
.top-bar { background: rgba(0,0,0,0.2); }

/* ===== Header (glassy sticky) ===== */
.header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
}
.header.scrolled { background: rgba(10,10,10,.75); }

/* Brand logo sizes */
.brand-logo { height: 64px; }
@media (min-width: 992px){ .brand-logo { height: 80px; } }

/* Desktop navbar */
.navbar-nav { gap: 1.1rem; }
.navbar .nav-link { color: var(--ink) !important; position: relative; padding: .5rem .25rem; }
.navbar .nav-link::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:0; height:2px;
  background: var(--gold); border-radius:2px; transition: width .25s ease, left .25s ease;
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width:100%; left:0; }

/* CTA buttons */
.btn-signup{
  background: var(--gold); color:#111; border:1px solid var(--gold-2);
  padding:.45rem .9rem; border-radius:.6rem; font-weight:700;
}
.btn-signup:hover{ filter:brightness(1.05); color:#111; }
.btn-login{
  background:transparent; color:var(--ink); border:1px solid var(--hairline);
  padding:.45rem .9rem; border-radius:.6rem; font-weight:600;
}
.btn-login:hover{ color:var(--ink); border-color:rgba(255,255,255,.22); }

/* Cart badge */
.cart-link { position: relative; }
.cart-badge{
  position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; padding:0 4px;
  background:var(--gold); color:#111; font-size:11px; border-radius:999px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--gold-2);
}

/* ===== Mobile drawer (overlay) ===== */
@media (max-width: 991.98px){
  .navbar-toggler{
    border:1px solid var(--hairline); border-radius:1rem; padding:.35rem .6rem;
    background: rgba(255,255,255,.02);
  }

  .mobile-drawer{
    position: fixed; inset: 0; display: none; z-index: 1050; /* higher than sticky header */
  }
  .mobile-drawer.show{ display:block; }

  .drawer-scrim{
    position:absolute; inset:0; background:rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
  }

  .drawer-panel{
    position:absolute; right:0; top:0; height:100vh; width:86vw; max-width:420px;
    background: rgba(20,20,20,.96);
    border-left: 1px solid var(--hairline);
    box-shadow: -12px 0 30px rgba(0,0,0,.45);
    transform: translateX(100%);
    transition: transform .3s ease;
    display:flex; flex-direction:column;
  }
  .mobile-drawer.show .drawer-panel{ transform: translateX(0); }

  .drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1rem; border-bottom:1px solid var(--hairline);
  }
  .drawer-logo{ height:40px; }
  .drawer-close{
    width:40px; height:40px; border-radius:.75rem; border:1px solid var(--hairline);
    background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center;
  }
  .drawer-close:hover{ border-color: rgba(255,255,255,.22); }

  .drawer-body{
    flex: 1 1 auto;           /* make body fill and scroll */
    padding:.75rem 1rem 1rem;
    overflow:auto;
  }
  .drawer-list{ list-style:none; padding:0; margin:.25rem 0 1rem; display:flex; flex-direction:column; }
  .drawer-link{
    display:block; padding:.9rem 0; color:var(--ink);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .drawer-link.active{ color:var(--gold); }

  .drawer-cart{ padding: .9rem 0; border-top:1px solid rgba(255,255,255,.06); }
  .drawer-cta .btn{ width:100%; }
  .drawer-cta .btn + .btn{ margin-top:.6rem; }

  .drawer-foot{
    padding:.75rem 1rem 1rem; border-top:1px solid var(--hairline);
    color:var(--muted); font-size:.85rem;
  }
}

/* ===== Buttons override (global) ===== */
.btn-primary, .btn-warning{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-dark) !important;
}
.btn-primary:hover, .btn-warning:hover{
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: var(--bs-dark) !important;
}

/* ===== Footer (top) ===== */
.footer-top h6{
  color: var(--bs-primary);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing:.05em; margin-bottom:1rem;
}
.footer-top p{ color:var(--bs-secondary); line-height:1.65; }
.footer-links li, .contact-list li{ margin-bottom:.5rem; list-style:none; }

/* Footer button */
.footer-btn{ display:inline-block; margin-top:.75rem; color:var(--bs-primary); font-weight:500; }
.footer-btn:hover{ color:var(--bs-secondary); }

/* Social Icons */
.social-row .social-icon{
  width:48px; height:48px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.25rem; background:rgba(255,255,255,.08); color:var(--ink); border:1px solid var(--hairline);
  transition:background .2s, transform .2s, color .2s; box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.social-row .social-icon:hover{ transform:translateY(-3px); }
.social-row .social-icon.instagram:hover{ background:#E1306C; color:#fff; }
.social-row .social-icon.facebook:hover{  background:#3b5998; color:#fff; }
.social-row .social-icon.tiktok:hover{    background:#000;    color:#fff; }

/* Newsletter */
.newsletter input{ background:transparent; border:1px solid var(--bs-secondary); color:var(--bs-body-color); }
.newsletter input::placeholder{ color:var(--bs-secondary); }
.btn-gold.btn-subscribe{
  background:var(--gold); color:#111; border:1px solid var(--gold-2);
  padding:.6rem 1rem; border-radius:.6rem; font-weight:700;
}
.btn-gold.btn-subscribe:hover{ filter:brightness(1.05); color:#111; }

/* ===== Footer Bottom (clean, balanced) ===== */
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding:1.15rem 0; color:var(--bs-secondary); }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; color:var(--bs-secondary); font-size:1rem; }
.footer-brand .legal-symbol{ opacity:.9; }
.footer-brand .legal-name{ letter-spacing:.02em; }

.footer-powered{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.powered-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.powered-badge{ padding:.25rem .6rem; border:1px solid var(--hairline); border-radius:999px; color:var(--ink); }
.powered-badge:hover{ color:#111; background:var(--gold); border-color:var(--gold-2); }

@media (max-width: 767.98px){
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
}

/* Floating Back-to-Top (kept) */
.backtotop-float{
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--hairline);
  display: none; align-items: center; justify-content: center;
  color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.backtotop-float.show{ display: flex; }
.backtotop-float:hover{ transform: translateY(-2px); }