/* ===== MOBILE BASELINE SAFETY ===== */
html, body { width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
* { box-sizing: border-box; }
/* ===== END MOBILE BASELINE ===== */

/* ===== Brand Variables ===== */
:root{
  --gold:#B8860B;
  --gold-2:#d19a0f;
  --bg:#0a0a0a;
  --ink:#f8f8f8;
  --muted:#bfbfbf
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6
}

a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-2)}
img{max-width:100%;height:auto;display:block}

.wrap{
  max-width:1100px;
  margin:auto;
  padding:0 20px
}

/* ===== Header ===== */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  background:rgba(10,10,10,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #1a1a1a;
}

/* Page offset for fixed header */
.page{ padding-top:96px; }

/* --- Header brand alignment fix --- */
.brand a{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  display:inline-block;   /* overrides global img{display:block} */
  height:40px;
  width:auto;
}

.brand .brand-name{
  display:inline-block;
  font-weight:800;
  letter-spacing:.3px;
  line-height:1;
}

/* Force header brand text color */
header .brand,
header .brand a,
header .brand span{
  color:#fff;
}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:40px}
.brand h1{margin:0;font:800 18px/1 Montserrat, sans-serif;letter-spacing:.3px}

.navlinks{display:flex;gap:14px;align-items:center}
.navlinks a{
  font:600 13px/1 Montserrat;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#ddd
}
.navlinks a.active{color:var(--gold)}

.cta{
  display:inline-block;
  background:var(--gold);
  color:#111;
  font-weight:700;
  border-radius:10px;
  padding:10px 16px
}
.cta:hover{background:var(--gold-2)}

/* (legacy) cartbox/count used on some pages */
.cartbox{display:flex;align-items:center;gap:10px}
.count{
  background:var(--gold);
  color:#111;
  font:800 12px/1 Montserrat;
  min-width:22px;
  height:22px;
  border-radius:11px;
  display:inline-grid;
  place-items:center;
  padding:0 6px
}
.cartbox:hover,
.cartbox button:hover,
#cart-count:hover { cursor:pointer; }

/* ===== Hero ===== */
.hero{position:relative;isolation:isolate;min-height:70vh;display:flex;align-items:center;border-top:1px solid #141414;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(184,134,11,.28), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.65));
  z-index:-1
}
.hero__content{width:100%;padding:56px 0}
.hero__grid{display:grid;gap:28px}
.hero__logoWrap{display:grid;place-items:center}
.hero__logo{width:min(632px, 99%);filter:drop-shadow(0 10px 20px rgba(0,0,0,.6))}
.hero__glow{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:560px;
  height:560px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(184,134,11,.25), rgba(184,134,11,0) 60%);
  z-index:-1;
  pointer-events:none
}

.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font:70 12px/1 Montserrat;margin-bottom:8px}
.hero h2{font:800 clamp(34px,6vw,56px)/1.05 Montserrat, sans-serif;margin:0 0 12px}
.hero p{max-width:720px;color:var(--muted);margin:0 0 18px}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.badge{border:1px solid #222;border-radius:999px;padding:8px 12px;color:#ddd;background:rgba(15,15,15,.6)}

@media (min-width:960px){
  .hero__grid{grid-template-columns:1fr 1.2fr;align-items:center}
  .hero__logoWrap{justify-items:start}
}

/* ===== Layout ===== */
section{padding:48px 0;border-top:1px solid #141414}
h3{font:800 26px/1.2 Montserrat, sans-serif;margin:0 0 10px;color:var(--ink)}

.grid{display:grid;gap:18px}
@media (min-width:900px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
}

.card{background:#0f0f0f;border:1px solid #1f1f1f;border-radius:16px;padding:18px}
.card h4{margin:0 0 6px;font:700 18px/1.2 Montserrat,sans-serif;color:var(--gold)}
.price{font:800 28px/1 Montserrat,sans-serif;color:#fff}
.pill{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:4px 10px;border-radius:999px;font:600 12px/1 Montserrat,sans-serif;margin-left:8px}

ul{padding-left:18px;margin:8px 0}
li{margin:6px 0;color:#dcdcdc}

.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-block;background:var(--gold);color:#111;font-weight:700;border-radius:10px;padding:8px 14px}
.btn.outline{background:transparent;color:var(--gold);border:1px solid var(--gold)}

.table{width:100%;border-collapse:collapse;border:1px solid #232323;border-radius:12px;overflow:hidden}
.table th,.table td{border-bottom:1px solid #232323;padding:12px}
.table thead th{background:var(--gold);color:#111;text-align:left;font:700 13px/1 Montserrat}
.table tbody td{color:#eee}
.note{color:#bfbfbf;font-size:14px}

footer{padding:32px 0;border-top:1px solid #141414;color:#bdbdbd}
.small{font-size:12px;color:#9b9b9b}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ===== Mobile hard overrides (put near bottom) ===== */
@media (max-width:768px){
  header{
    position:fixed;
    top:0;left:0;right:0;
    background:rgba(10,10,10,0.92);
    backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid #1a1a1a;
    z-index:9999;
  }

  main{ padding-top:88px; }

  .nav{flex-wrap:wrap;gap:10px}
  .navlinks{width:100%;flex-wrap:wrap;gap:10px}

  .table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:720px}
}

.scroll-hint{
  margin:8px 0 12px;
  font-size:14px;
  color:#bfbfbf;
  text-align:center
}
@media (min-width:769px){
  .scroll-hint{display:none}
}

/* ===== Cart Drawer ===== */
.cart-drawer{
  position:fixed;
  top:0;
  right:-420px;
  width:360px;
  max-width:90vw;
  height:100vh;
  background:#0a0a0a;
  color:#fff;
  z-index:10000;
  display:flex;
  flex-direction:column;
  transition:right 0.3s ease;
}
.cart-drawer.open{ right:0; }

.cart-header,
.cart-footer{
  padding:16px;
  border-bottom:1px solid #1a1a1a;
}
.cart-footer{
  border-top:1px solid #1a1a1a;
  margin-top:auto;
}
.cart-items{
  flex:1;
  overflow-y:auto;
  padding:16px;
}

/* Overlay: must NOT block clicks when hidden */
#cart-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
  z-index:9998;  /* below header (9999), below drawer (10000) */
}
#cart-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.cart-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #1a1a1a;
}
.cart-row__title{font-weight:700}
.cart-row__meta{opacity:.8;font-size:12px}
.cart-remove{padding:8px 10px}

/* ===== Global Hover + Click Polish ===== */
a, button, .btn, [role="button"], input[type="submit"]{ cursor:pointer; }

a, button, .btn, .card, .plan, .tile, .faq-item, .navlinks a, .cta, .btn.outline{
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

a:hover{ opacity:0.92; transform:translateY(-1px); }

button:hover, .btn:hover, .cta:hover, .btn.outline:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}

button:active, .btn:active, .cta:active, .btn.outline:active{
  transform:translateY(0px) scale(0.98);
  box-shadow:none;
}

.card:hover, .plan:hover, .tile:hover, .faq-item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,0.28);
}

a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid rgba(255, 215, 0, 0.85);
  outline-offset:3px;
}

@media (hover:none){
  a:hover, button:hover, .btn:hover, .cta:hover,
  .card:hover, .plan:hover, .tile:hover, .faq-item:hover{
    transform:none;
    box-shadow:none;
    filter:none;
  }
}

/* ===== Add-to-cart micro feedback ===== */
@keyframes cart-bump{
  0%{transform:scale(1)}
  30%{transform:scale(1.25)}
  60%{transform:scale(0.95)}
  100%{transform:scale(1)}
}
.cart-bump{ animation:cart-bump 420ms ease; }

/* ===== Shopping Cart Button styles (keep compatibility) ===== */
/* If your HTML uses class="cart-btn" */
.cart-btn{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
  padding:10px 14px;
  border-radius:999px;
  background:#111;
  color:#fff;
  border:1px solid #333;
}

/* If your HTML uses class="cart-button" */
.cart-button{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  padding:8px 14px;
  border-radius:999px;
  background:#111;
  color:#fff;
  border:1px solid #333;
}

/* Count badge compatibility:
   supports .cartcount OR .cart-count OR .cart-number */
.cartcount,
.cart-count,
.cart-number{
  background:gold;
  color:#000;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  min-width:22px;
  text-align:center;
}