/* ============================================================
   BLOW'N SMOKE — Hazel Crest
   Design tokens derived from the actual storefront sign:
   ink black + signal blue neon + haze-blue ambient + gold trim
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --ink: #050506;
  --charcoal: #19191a;
  --charcoal-2: #232324;
  --line: #333335;
  --signal-blue: #1583d5;
  --signal-blue-glow: #4db1f2;
  --haze-blue: #6cc0ee;
  --gold: #eef1f4;
  --gold-dim: #9aa0a6;
  --paper: #f5f5f5;
  --paper-dim: #a5a6a8;
  --danger: #ff5a4e;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 4px;
  --container: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
h1,h2,h3,h4{ font-family: var(--font-display); letter-spacing: .02em; font-weight:400; margin: 0 0 .3em; text-transform: uppercase; }
h1{ font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .95; }
h2{ font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; color: var(--paper-dim); }
::selection{ background: var(--signal-blue); color:#fff; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--gold); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding: .85em 1.6em;
  font-family: var(--font-display); letter-spacing:.04em; font-size: 1.05rem;
  border-radius: var(--radius); border: 1px solid transparent; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-blue{ background: var(--signal-blue); color:#fff; box-shadow: 0 0 0 rgba(28,77,255,0); }
.btn-blue:hover{ box-shadow: 0 6px 24px rgba(28,77,255,.45); }
.btn-gold{ background: var(--gold); color:#171400; }
.btn-gold:hover{ box-shadow: 0 6px 24px rgba(242,183,5,.35); }
.btn-outline{ background: transparent; color: var(--paper); border-color: var(--line); }
.btn-outline:hover{ border-color: var(--haze-blue); color: var(--haze-blue); }
.btn-sm{ padding:.55em 1.1em; font-size:.9rem; }

/* ---------------- Nav ---------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(13,13,16,.88); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width: var(--container); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.6em; font-family: var(--font-display); font-size: 1.5rem; letter-spacing:.03em; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background: var(--signal-blue); box-shadow: 0 0 10px 2px var(--signal-blue-glow); }
.nav-links{ display:flex; align-items:center; gap: 1.6em; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:.92rem; letter-spacing:.03em; text-transform:uppercase; color: var(--paper-dim); }
.nav-links a:hover, .nav-links a.active{ color: var(--haze-blue); }
.nav-cta{ display:flex; gap:.6em; align-items:center; }
.nav-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:1.6rem; cursor:pointer; }

@media (max-width: 880px){
  .nav-links{ position:fixed; inset: 62px 0 0 0; background: var(--ink); flex-direction:column; padding: 2em; gap:1.4em;
    transform: translateY(-110%); transition: transform .25s ease; border-top:1px solid var(--line); }
  .nav-links.open{ transform: translateY(0); }
  .nav-toggle{ display:block; }
  .nav-cta .btn-outline{ display:none; }
}

/* ---------------- Age Gate ---------------- */
.age-gate{
  position: fixed; inset:0; z-index: 999; background: rgba(6,6,8,.97);
  display:flex; align-items:center; justify-content:center; padding: 24px;
}
.age-gate[hidden]{ display:none; }
.age-card{ max-width: 420px; text-align:center; border:1px solid var(--line); background: var(--charcoal); padding: 2.4em 2em; border-radius: 8px; }
.age-card h2{ color: var(--haze-blue); }
.age-card p{ font-size:.95rem; }
.age-actions{ display:flex; gap: .8em; justify-content:center; margin-top: 1.4em; flex-wrap:wrap; }

/* ---------------- Ambient smoke signature ---------------- */
.smoke-layer{ position:absolute; inset:-20%; pointer-events:none; z-index:1; opacity:.35;
  background:
    radial-gradient(ellipse 40% 60% at 20% 30%, rgba(200,205,210,.10), transparent 60%),
    radial-gradient(ellipse 35% 55% at 75% 60%, rgba(21,131,213,.10), transparent 60%),
    radial-gradient(ellipse 45% 40% at 55% 15%, rgba(200,205,210,.07), transparent 60%);
  filter: blur(18px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(3%, -4%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){ .smoke-layer{ animation:none; } }

/* ---------------- Hero ---------------- */
.hero{ position:relative; overflow:hidden; border-bottom: 1px solid var(--line); }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit: cover; filter: blur(2px) brightness(.55) saturate(1.15); transform: scale(1.08); }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,13,16,.55) 0%, rgba(13,13,16,.75) 55%, var(--ink) 100%);
}
.hero-inner{ position:relative; z-index:2; padding: 8em 0 5em; }
.eyebrow{ display:inline-block; font-family: var(--font-mono); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color: var(--gold); border:1px solid var(--gold-dim); padding: .3em .8em; border-radius: 100px; margin-bottom: 1.2em; }
.hero h1 span{ color: var(--haze-blue); }
.hero-sub{ max-width: 520px; font-size: 1.1rem; }
.hero-ctas{ display:flex; gap: 1em; flex-wrap:wrap; margin-top: 1.6em; }
.hero-meta{ display:flex; gap:2em; margin-top:2.6em; flex-wrap:wrap; font-family: var(--font-mono); font-size:.85rem; color: var(--paper-dim); }
.hero-meta strong{ color:var(--paper); display:block; font-family:var(--font-body); font-size:1rem; }

/* ---------------- Sections ---------------- */
section{ padding: 5em 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2em; margin-bottom: 2.2em; flex-wrap:wrap; }
.section-head p{ max-width: 480px; margin:0; }
.divider{ height:1px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); border:none; margin: 0; }
.tag{ font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color: var(--haze-blue); }

/* ---------------- Category / product grid ---------------- */
.cat-nav{ display:flex; gap:.6em; flex-wrap:wrap; margin-bottom: 2.4em; }
.cat-chip{ font-family: var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; padding:.5em 1em; border:1px solid var(--line); border-radius: 100px; color: var(--paper-dim); }
.cat-chip:hover{ border-color: var(--haze-blue); color: var(--haze-blue); }

.category-block{ margin-bottom: 3.6em; scroll-margin-top: 90px; }
.category-title{ display:flex; align-items:baseline; gap:1em; border-bottom: 2px solid var(--signal-blue); padding-bottom:.3em; margin-bottom: 1.6em; }
.category-title h2{ margin:0; }
.category-title span{ font-family: var(--font-mono); font-size:.8rem; color: var(--paper-dim); text-transform:none; letter-spacing:0; }

.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.4em; }
.product-card{ background: var(--charcoal); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: border-color .2s ease, transform .2s ease; }
.product-card:hover{ border-color: var(--signal-blue); transform: translateY(-3px); }
.product-photo{ aspect-ratio: 4/3; background: var(--charcoal-2); overflow:hidden; position:relative; }
.product-photo img{ width:100%; height:100%; object-fit:cover; }
.product-photo .ph-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.75rem; color: var(--paper-dim); text-align:center; padding:1em; }
.product-body{ padding: 1em 1.1em 1.2em; display:flex; flex-direction:column; gap:.4em; flex:1; }
.product-name{ font-weight:700; font-size: .98rem; }
.product-desc{ font-size:.84rem; color: var(--paper-dim); margin:0; }
.product-price-row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:.6em; }
.product-price{ font-family: var(--font-mono); font-weight:700; font-size: 1.15rem; color: var(--gold); text-shadow: 0 0 14px rgba(242,183,5,.35); }
.product-badge{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; padding:.2em .6em; border-radius:3px; background: rgba(28,77,255,.15); color: var(--haze-blue); border:1px solid rgba(108,192,238,.35); }

/* ---------------- LED price-board strip (specials) ---------------- */
.board{ background: var(--charcoal); border:1px solid var(--line); border-radius: 8px; padding: 1.6em 1.8em; }
.board-row{ display:flex; align-items:center; justify-content:space-between; padding: .85em 0; border-bottom: 1px dashed var(--line); gap:1em; }
.board-row:last-child{ border-bottom:none; }
.board-name{ font-weight:600; }
.board-name small{ display:block; color:var(--paper-dim); font-weight:400; font-size:.8rem; margin-top:.1em; }
.board-price{ font-family: var(--font-mono); font-size:1.3rem; color: var(--signal-blue-glow); text-shadow: 0 0 10px rgba(77,116,255,.6); white-space:nowrap; }

.specials-tabs{ display:flex; gap:.5em; margin-bottom: 1.6em; }
.specials-tab{ font-family: var(--font-display); font-size:1.1rem; letter-spacing:.03em; padding:.5em 1.3em; border:1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; color: var(--paper-dim); cursor:pointer; background:transparent; }
.specials-tab.active{ color: var(--ink); background: var(--haze-blue); border-color: var(--haze-blue); }
.specials-panel{ display:none; }
.specials-panel.active{ display:block; }

/* ---------------- Cards / features ---------------- */
.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.4em; }
.feature-card{ background: var(--charcoal); border:1px solid var(--line); border-radius: var(--radius); padding: 1.6em; }
.feature-card .num{ font-family: var(--font-mono); color: var(--gold); font-size:.85rem; }

/* ---------------- Gallery ---------------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; }
.gallery-item{ aspect-ratio: 1; overflow:hidden; border-radius: var(--radius); background: var(--charcoal); position:relative; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-cap{ position:absolute; left:0; right:0; bottom:0; padding:.5em .7em; font-size:.72rem; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); }

/* ---------------- Rewards / points ---------------- */
.rewards-hero{ background: radial-gradient(ellipse at top left, rgba(28,77,255,.18), transparent 60%), var(--charcoal); border:1px solid var(--line); border-radius: 10px; padding: 2.6em; }
.points-steps{ display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:1.4em; margin-top:2em; }
.points-step{ border:1px solid var(--line); border-radius: var(--radius); padding:1.4em; background: var(--ink); }
.points-step .step-num{ font-family: var(--font-display); font-size:2rem; color: var(--signal-blue-glow); }

form.rewards-form{ background: var(--charcoal); border:1px solid var(--line); border-radius: 8px; padding: 2em; display:grid; gap:1.1em; }
form.rewards-form label{ font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color: var(--paper-dim); display:block; margin-bottom:.4em; }
form.rewards-form input, form.rewards-form textarea, form.rewards-form select{
  width:100%; background: var(--ink); border:1px solid var(--line); border-radius: var(--radius); color: var(--paper); padding:.75em .9em; font-family: var(--font-body); font-size:.95rem;
}
form.rewards-form input:focus, form.rewards-form textarea:focus{ border-color: var(--signal-blue); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1em; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.78rem; color: var(--paper-dim); }

/* ---------------- Fivestars callout ---------------- */
.fivestars-card{ display:flex; align-items:center; justify-content:space-between; gap:1.6em; flex-wrap:wrap; background: linear-gradient(135deg, rgba(28,77,255,.14), rgba(242,183,5,.06)); border:1px solid var(--line); border-radius: 10px; padding: 1.8em 2em; }
.fivestars-card .fs-actions{ display:flex; gap:.8em; flex-wrap:wrap; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--line); padding: 3.4em 0 2em; background: #0a0a0c; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2em; margin-bottom: 2.4em; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ color: var(--paper-dim); font-size:.85rem; letter-spacing:.08em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6em; }
.footer-grid a{ color: var(--paper-dim); font-size:.92rem; }
.footer-grid a:hover{ color: var(--haze-blue); }
.footer-legal{ border-top:1px solid var(--line); padding-top:1.6em; font-size:.78rem; color: var(--paper-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em; }
.footer-legal .compliance{ max-width: 700px; }

/* ---------------- Utility ---------------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.pill{ display:inline-block; padding:.3em .9em; border-radius:100px; border:1px solid var(--line); font-family:var(--font-mono); font-size:.75rem; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:#171400; padding:.6em 1em; z-index:1000; }
.skip-link:focus{ left: 12px; top: 12px; }