/* Happy PML — styles */
:root{
  --bg: #0b0a08;
  --bg-alt: #141210;
  --surface: #1b1815;
  --surface-2: #221e19;
  --border: #322c24;
  --text: #f3efe4;
  --text-dim: #b8b0a0;
  --gold: #fab218;
  --gold-soft: #ffd97a;
  --accent-text: #ffd97a;
  --warn-text: #ff9a68;
  --rust: #c85a2b;
  --radius: 14px;
  --wrap: 1180px;
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

/* main site body runs light; header/footer keep the dark brand theme below */
body{
  --bg: #faf7f0;
  --bg-alt: #f1ebdc;
  --surface: #ffffff;
  --surface-2: #f8f3e7;
  --border: #e6ddc9;
  --text: #201c15;
  --text-dim: #6a6355;
  --accent-text: #a3690a;
  --warn-text: #c1490f;
}

.site-header, .site-footer{
  --bg: #0b0a08;
  --bg-alt: #141210;
  --surface: #1b1815;
  --surface-2: #221e19;
  --border: #322c24;
  --text: #f3efe4;
  --text-dim: #b8b0a0;
  --accent-text: #ffd97a;
  --warn-text: #ff9a68;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  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; }
h1,h2,h3{ font-family: var(--font-head); line-height:1.12; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color: var(--text-dim); }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width: var(--wrap); margin:0 auto; padding: 0 20px; }

.eyebrow{
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0 0 .8em;
}

.accent{ color: var(--accent-text); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .85em 1.5em;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-head);
  font-size: .95rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--gold); color: #1a1305; }
.btn-primary:hover{ background: var(--gold-soft); }
.btn-outline{ border-color: var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--gold); }
.btn-ghost{ color: var(--text-dim); border-color: var(--border); }
.btn-green{ border-color: #3fae59; color: #6fe08c; background: rgba(63,174,89,.12); }
.btn-green:hover{ background: rgba(63,174,89,.22); border-color: #6fe08c; }
.btn-lg{ padding: 1em 1.8em; font-size: 1rem; }
.btn-nav{ margin-left: 8px; }

/* header */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,10,8,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 20px; gap: 16px; }
.brand-logo{ height: 38px; width:auto; }
.site-nav{ display:flex; align-items:center; gap: 22px; }
.nav-link{ font-weight:600; color: var(--text-dim); font-size:.95rem; }
.nav-link:hover, .nav-link.active{ color: var(--text); }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:36px; height:30px; flex-direction:column; justify-content:space-between; padding:0;
}
.nav-toggle span{ display:block; height:2px; background: var(--text); border-radius:2px; }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch;
    padding: 12px 20px 20px;
    gap: 4px;
    display:none;
  }
  .site-nav.open{ display:flex; }
  .nav-link{ padding: 12px 0; border-bottom:1px solid var(--border); }
  .btn-nav{ margin: 14px 0 0; }
}

/* header subnav — quick city links */
.subnav{ border-top:1px solid var(--border); }
.subnav-inner{
  display:flex; align-items:center; gap: 18px;
  padding: 9px 20px; overflow-x:auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar{ display:none; }
.subnav-label{ color: var(--text-dim); font-weight:700; text-transform:uppercase; font-size:.68rem; letter-spacing:.08em; white-space:nowrap; flex-shrink:0; }
.subnav-link{ color: var(--text-dim); font-size:.85rem; white-space:nowrap; flex-shrink:0; }
.subnav-link:hover, .subnav-link.active{ color: var(--accent-text); }

/* hero */
.hero{ padding: 64px 0 40px; overflow: hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap: 40px; }
.hero h1{ font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: .4em; }
.hero-lead{ font-size: 1.1rem; max-width: 46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 14px; margin: 1.6em 0 .8em; }
.hero-note{ font-size:.85rem; color: var(--text-dim); }
.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-drop{ width: 100%; max-width: 420px; filter: drop-shadow(0 30px 60px rgba(250,178,24,.15)); }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; max-width: 220px; margin: 0 auto; }
}

/* sections */
.section{ padding: 64px 0; }
.section-alt{ background: var(--bg-alt); }
.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-page-head{ padding: 48px 0 8px; }
.section-page-head h1{ font-size: clamp(2rem, 4vw, 3rem); }
.section-page-head .lead{ font-size: 1.1rem; max-width: 62ch; color: var(--text-dim); }

.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.feature{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.feature h3{ color: var(--accent-text); font-size: 1.1rem; }
@media (max-width: 860px){ .feature-grid{ grid-template-columns: 1fr; } }

/* store grid */
.store-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 960px){ .store-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .store-grid{ grid-template-columns: 1fr; } }

.store-card{
  display:block; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .15s ease, transform .15s ease;
}
.store-card:hover{ border-color: var(--gold); transform: translateY(-3px); }
.store-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:.5em; }
.store-card-top h3{ margin:0; font-size:1.25rem; }
.store-card-addr{ font-size:.92rem; margin-bottom: .3em; min-height: 2.6em; }
.store-card-hours{ font-size:.82rem; color: var(--accent-text); font-weight:600; margin-bottom: 1em; }
.store-card-link{ font-weight:700; color: var(--accent-text); font-size:.9rem; }

.store-card-badges{ display:flex; gap: 6px; flex-shrink:0; }
.chip{ font-size:.7rem; font-weight:700; padding: 4px 10px; border-radius: 999px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.chip-open{ background: rgba(250,178,24,.18); color: var(--accent-text); }
.chip-soon{ background: rgba(200,90,43,.18); color: var(--warn-text); }
.chip-18{ background: #1a1712; color: #fff; }

/* faq */
.faq-list{ max-width: 760px; display:flex; flex-direction:column; gap: 10px; }
.faq-item{ background: var(--surface); border:1px solid var(--border); border-radius: 12px; padding: 6px 20px; }
.faq-item summary{ cursor:pointer; padding: 14px 0; font-family: var(--font-head); font-weight:700; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color: var(--gold); font-size:1.3rem; margin-left: 12px; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding-bottom: 16px; margin:0; font-size:.92rem; }
.faq-item a{ color: var(--accent-text); font-weight:600; }

/* cta */
.section-cta{ text-align:center; }
.cta-inner{ max-width: 640px; }
.cta-inner .hero-actions{ justify-content:center; }

/* breadcrumb */
.breadcrumb{ padding: 18px 20px 0; font-size:.85rem; color: var(--text-dim); }
.breadcrumb a{ color: var(--text-dim); }
.breadcrumb a:hover{ color: var(--accent-text); }
.breadcrumb span{ margin: 0 6px; }

/* store detail */
.store-detail-grid{ display:grid; grid-template-columns: 1.5fr .9fr; gap: 36px; align-items:start; }
@media (max-width: 900px){ .store-detail-grid{ grid-template-columns: 1fr; } }
.branch-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom: 22px; }
.branch-card h3{ font-size:1.15rem; }
.branch-landmark{ font-size:.82rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.2em; }
.branch-address{ font-weight:600; color: var(--text); }
.branch-hours{ margin-top: 10px; }
.branch-hours .hours-table{ font-size:.85rem; }
.branch-map iframe{ width:100%; height: 280px; border:0; border-radius: 10px; margin-top: 12px; filter: grayscale(.15) contrast(1.05); }
.branch-pending{ border-color: var(--rust); }
.branch-note{ font-size:.9rem; }

.store-detail-side{ display:flex; flex-direction:column; gap: 18px; }
.side-card{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.side-card h3{ font-size: .95rem; text-transform: uppercase; letter-spacing:.06em; color: var(--accent-text); margin-bottom:.6em; }
.side-card p{ margin: 0 0 .3em; }
.side-card a{ font-weight:600; }

.hours-table{ width:100%; border-collapse: collapse; font-size:.92rem; }
.hours-table td{ padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.hours-table td:last-child{ text-align:right; color: var(--text); font-weight:600; }
.hours-unknown{ font-size:.9rem; }

.check-list li{ position:relative; padding-left: 1.4em; margin-bottom:.5em; font-size:.92rem; color: var(--text-dim); }
.check-list li::before{ content:"✓"; position:absolute; left:0; color: var(--gold); font-weight:700; }

.legal-note{ max-width: 72ch; font-size: .92rem; }

.other-stores{ display:flex; flex-wrap:wrap; gap: 10px; }
.other-stores li a{
  display:inline-block; padding: 10px 18px; border:1px solid var(--border);
  border-radius: 999px; font-weight:600; font-size:.9rem;
}
.other-stores li a:hover{ border-color: var(--gold); color: var(--accent-text); }

/* simple text pages */
.text-block{ max-width: 72ch; }
.text-block h2{ font-size:1.3rem; margin-top: 1.6em; color: var(--accent-text); }
.text-block p{ font-size: .97rem; }

.contact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 46px; }
@media (max-width:760px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-stores-title{ font-size:1.2rem; margin-bottom: .8em; }

/* age gate */
.agegate{
  position: fixed; inset:0; z-index: 100;
  background: rgba(6,5,4,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.agegate[hidden]{ display:none; }
.agegate-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: 20px; padding: 40px 32px; max-width: 420px; text-align:center;
}
.agegate-logo{ height: 46px; margin: 0 auto 18px; }
.agegate-card h2{ font-size:1.4rem; }
.agegate-card p{ font-size:.92rem; }
.agegate-actions{ display:flex; flex-direction:column; gap: 10px; margin: 1.4em 0 1em; }
.agegate-fineprint{ font-size:.75rem; color: var(--text-dim); margin:0; }
.agegate-fineprint a{ color: var(--accent-text); }

/* footer */
.site-footer{ border-top:1px solid var(--border); background: var(--bg-alt); padding-top: 56px; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
@media (max-width: 860px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-inner{ grid-template-columns: 1fr; } }
.footer-logo{ height: 32px; margin-bottom: 14px; }
.footer-brand p{ font-size: .88rem; max-width: 34ch; }
.footer-col h3{ font-family: var(--font-head); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color: var(--gold); margin-bottom: 1em; }
.footer-col li{ margin-bottom:.6em; }
.footer-col a{ font-size:.9rem; color: var(--text-dim); }
.footer-col a:hover{ color: var(--gold); }
.footer-legal{ font-size:.82rem; margin-top: 14px; color: var(--text-dim); }
.footer-bottom{
  border-top: 1px solid var(--border);
  padding: 18px 20px 30px;
  display:flex; flex-wrap:wrap; gap: 8px 24px; justify-content:space-between;
  font-size:.78rem; color: var(--text-dim);
}
.footer-warning{ max-width: 60ch; }

/* cookie banner */
.cookiebar{
  position: fixed; bottom: 16px; left:16px; right:16px; z-index: 90;
  max-width: 560px; margin: 0 auto;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap: 14px;
}
.cookiebar[hidden]{ display:none; }
.cookiebar p{ font-size:.85rem; margin:0; }
.cookiebar-actions{ display:flex; gap: 10px; flex-wrap:wrap; }
.cookiebar .btn{ padding:.6em 1.2em; font-size:.85rem; }