/* ========== Light theme with soft "deals" hue + gold accents ========== */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --line:#e7e8ec;
  --ink:#111315;
  --muted:#667085;
  --gold:#D47B19;
  --deal-hue:#FFF9E6;
  --radius:14px;
  --container:1080px;

  /* Brand + nav */
  --gold-tint: rgba(212,123,25,.08);
  --nav-h: 60px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans;
  color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 16px}
.section-sub{color:var(--muted);margin:0 0 18px}
.center{text-align:center}

/* Buttons */
.btn{
  display:inline-block;padding:12px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-weight:700; transition:transform .06s ease, box-shadow .15s ease;
}
.btn.small{padding:8px 12px;font-size:.9rem}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.btn.gold{background:var(--gold);color:#111315;border-color:var(--gold)}
.btn.outline{background:#fff;border-color:var(--line)}
.btn-order{font-weight:800;padding:8px 12px;font-size:14px;line-height:1.1;border-radius:12px;white-space:nowrap}

/* ========== Header (Logo-free parchment + foil) ========== */
.brand-banner{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:96px; padding:18px 20px;
  background:
    radial-gradient(140% 160% at 50% -20%, rgba(0,0,0,.12), transparent 60%),
    radial-gradient(160% 140% at 50% 120%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, rgba(212,123,25,.06), rgba(212,123,25,.00)),
    #F1E1BE;
  border-bottom:none;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
}
.brand-title{ display:inline-block; padding:2px 6px; }

/* Paper grain (optional – add /img/paper-noise.png) */
.brand-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("img/paper-noise.png");
  background-size:280px 280px; opacity:.08; mix-blend-mode:multiply;
}

/* ========= SVG foil logos ========= */
.foil-svg,
.foil-svg-large{
  display:block; width:100%; max-width:980px; height:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25))
          drop-shadow(0 2px 8px rgba(0,0,0,.15));
}

/* Gold foil text fallback */
.brand-title .foil{
  font-family:"Cinzel","UnifrakturCook",serif;
  font-weight:900;
  font-size:clamp(36px, 7vw, 72px);
  letter-spacing:.3px; line-height:1;
  background-image:linear-gradient(92deg,#9C6B1A 0%,#F2C14E 22%,#FFE27A 45%,#F2C14E 62%,#9C6B1A 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:0 transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
  animation:foilShine 12s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .brand-title .foil{ animation:none; }
}
@keyframes foilShine{
  from{ background-position:-40% 0; }
  to  { background-position:180% 0; }
}

/* Desktop banner padding bump */
@media (min-width:768px){
  .brand-banner{ padding:18px 24px; }
}

/* Desktop-only: hide black fallback text in banner */
@media (min-width:900px){
  .brand-title .logo-text{ display:none !important; }
}

/* ========== Sticky  (opaque) ========== */
.sticky-nav {
  position: sticky; 
  top: 0; 
  z-index: 60;
  background: #F1E9DC;              /* darker, reads well */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(16,24,40,.10);
}

/* keep the polish if the browser supports blur, but stay opaque */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .sticky-nav {
    background: #F1E9DC;            /* NOT rgba — stays opaque */
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
  }
}

/* nav inner wrapper */
.sticky-nav__inner {
  display: flex; 
  align-items: center; 
  height: var(--nav-h);
  gap: 12px;
}

/* ===== Logo ===== */
.sticky-logo {
  display: inline-flex; 
  align-items: center; 
  gap: 10px;
  height: 100%; 
  padding: 0; 
  border: 0; 
  background: transparent; 
  border-radius: 0;

  margin-right: auto;   /* push links away */
  margin-left: 8px;     /* hug left but with soft padding */
}
.sticky-logo .brand-lion {
  display: block;
  height: 48px;   /* adjust to taste */
  width: auto;
}

/* optional brand text */
.sticky-brand-name {
  font-family: "Cinzel", serif;  /* drop old Unifraktur for consistency */
  font-size: 1.05rem; 
  letter-spacing: .3px; 
  color: var(--ink);
}

/* ===== Tabs (center text links) ===== */
.sticky-tabs {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex: 1;
  gap: 32px;   /* wider spacing between text links */
}
.sticky-tabs .stab {
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #475467;
  white-space: nowrap;
}
.sticky-tabs .stab:hover { color: var(--ink); }

/* Kill bullets/dots everywhere */
.sticky-tabs,
.sticky-tabs li,
.sticky-tabs .stab { list-style: none !important; }
.sticky-tabs .stab::before,
.sticky-tabs .stab::after { content: none !important; }

/* ===== Actions (icons/buttons on right) ===== */
.sticky-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 40px;   /* clear space between text links & icons */
}
.sticky-actions .icon-btn,
.btn-order { color: #1f2937; }

/* ===== Mobile nav tweaks ===== */
@media (max-width:900px) {
  .sticky-brand-name { display: none !important; }  /* no double logos */
  .sticky-tabs { justify-content: center; gap: 10px !important; }
  .sticky-tabs .stab { font-size: 13px; flex-shrink: 1; }
  .sticky-tabs { 
    overflow-x: auto; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
  }
  .sticky-tabs::-webkit-scrollbar { display: none; }
  .sticky-nav__inner { gap: 16px !important; }
  .stab { font-size: 14px !important; }
}


/* ===== Mobile nav tweaks ===== */
@media (max-width:900px){
  .sticky-brand-name{ display:none !important; }       /* no double logos */
  .sticky-tabs{ justify-content:center; gap:10px !important; }
  .sticky-tabs .stab{ font-size:13px; flex-shrink:1; }
  .sticky-tabs{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sticky-tabs::-webkit-scrollbar{ display:none; }
  .sticky-nav__inner{ gap:16px !important; }
  .stab{ font-size:14px !important; }
}

/* ===== Desktop nav polish ===== */
@media (min-width:901px){
  :root{ --nav-h:76px; }               /* taller bar */
  .sticky-brand-name{ font-size:1.42rem; letter-spacing:.4px; }
  .sticky-logo .brand-lion{ height:calc(var(--nav-h) - 8px); }
  .sticky-tabs{ display:flex !important; align-items:center; gap:20px; white-space:nowrap; overflow:visible; }
  .sticky-tabs .stab{ display:inline-flex; align-items:center; padding:0; border:0; background:transparent; }
}

/* Actions (right side) */
.sticky-actions{display:flex; align-items:center; gap:8px; position:relative}
.sticky-actions > *{height:32px; display:inline-flex; align-items:center; justify-content:center}

/* Search/Hamburger buttons */
.icon-btn{
  width:38px;height:32px;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-weight:700;color:var(--ink)
}

/* ===== Order button (blends with icon buttons) ===== */
.btn-order{
  height:32px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:800; box-shadow:none;
}
.btn-order:hover{ transform:none; box-shadow:0 8px 24px rgba(16,24,40,.08); }

/* Remove old gold fill anywhere it sneaks in */
.btn-order.btn.gold{
  background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important;
}

/* Desktop label override: “Order Online”; Mobile: “Order” */
@media (min-width:901px){
  .btn-order{ color:transparent; position:relative; }
  .btn-order::after{
    content:"Order Online";
    position:relative; color:var(--ink);
  }
}

/* OPEN/CLOSE pill */
.pill{
  padding:4px 10px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-weight:800; min-width:72px; text-align:center; font-size:12px; line-height:1;
}
.pill.state-open{ color:#047857; background:#ECFDF3; border-color:#D1FADF }
.pill.state-soon{ color:#B45309; background:#FFF7ED; border-color:#FED7AA }
.pill.state-closed{ color:#B91C1C; background:#FEF2F2; border-color:#FECACA }
StatusDot{ display:none }

/* Hours tooltip */
.tooltip{
  position:absolute; z-index:70; padding:6px 8px; font-size:12px; font-weight:700; color:#111315;
  background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.08);
}
.tooltip[hidden]{display:none}
#hoursTip{ right:88px; top:42px }
@media (max-width:480px){ #hoursTip{ right:72px; top:38px } }

/* ===== Popover menu (anchored under Hours pill) ===== */
.sticky-actions { position: relative; }  /* make button container the anchor */

.menu-popover{
  position: absolute;        /* was: fixed */
  top: calc(100% + 8px);     /* appear just below the pill */
  right: 0;                  /* line up with right edge of pill */
  left: auto;

  width: min(92vw, 320px);   /* same size, but anchored */
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,.12);
  padding: 10px;
}

/* --- Menu / overlay offsets for both page states --- */
:root{
  --banner-h: 96px;   /* .brand-banner min-height */
  --strip-h: 0px;     /* 32px on mobile */
  --menu-top: var(--nav-h);
}
body:not(.show-sticky){
  --menu-top: calc(var(--nav-h) + var(--banner-h));
}
@media (max-width:900px){
  :root{ --strip-h: 32px; }
}
.menu-overlay{ top: var(--menu-top); }

.visually-hidden{position:absolute!important;clip:rect(0 0 1px 1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* ========== Today’s Deals ========== */
.deals-section{margin:18px 0}
.deal-card{
  background:#fff; border:2px solid #000; border-radius:16px;
  overflow:hidden; cursor:pointer;
  transition: box-shadow .22s ease, transform .22s ease;
}
.deal-card[aria-expanded="true"]{
  position:relative; z-index:2; transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.18);
}
.deal-head{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  padding:12px 16px; background:var(--deal-hue, #FFF9E6); border-bottom:1px solid var(--line)
}
.deal-title{justify-self:center;font-weight:900;color:#2B2F33}
.chev{transition:transform .2s ease;color:#6b7280}
.deal-card[aria-expanded="true"] .chev{transform:rotate(180deg)}
.deal-body{
  padding:12px 16px;background:var(--deal-hue, #FFF9E6);position:relative; transition:max-height .25s ease;
  border-top:2px solid #000;
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
}
.deal-body.collapsed{max-height:168px;overflow:hidden}
.deal-body.collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:28px;
  background:linear-gradient(to bottom, rgba(255,249,230,0), var(--deal-hue, #FFF9E6));
}
/* Today's Deals header */
.deal-title{
  justify-self: center;
  color: #2B2F33;
  font-family: 'Cinzel', serif;   /* only header in Cinzel */
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Category wrapper (spacing + line only) */
.deal-cat{
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
  /* no font-family here so items stay in body font */
}

/* Visible category title chip */
.deal-cat-title{
  font-family: 'Cinzel', serif;   /* Cinzel only on the pill */
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1.02rem;
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
  color: var(--ink);
  border: 1px solid var(--line);
}

.deal-subgroup{margin:8px 0 12px}
.deal-subtitle{
  font-weight:700; font-size:.96rem; color:var(--ink);
  margin:6px 0 4px;
}
.deal-items{margin:0; padding-left:18px; color:var(--ink)}
.deal-items li{margin:4px 0; line-height:1.45}
.deal-note{margin-top:10px;font-size:.85rem;color:var(--muted)}
.deal-actions{text-align:center;margin-top:10px}

/* ===== Categories ===== */
.categories{ margin:24px 0; }

/* ===== Categories grid ===== */
.cat-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:900px){
  .cat-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Image tile with overlaid label */
.cat-card{
  position:relative;
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:2px solid #dcdfe6;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  background:#f3f4f6;                 /* fallback if image fails */
  min-height:140px;                    /* stable height */
}
.cat-card:hover{
  transform:translateY(-1px);
  border-color:var(--gold);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.cat-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio: 16 / 10;               /* keeps consistent card height */
}

/* Overlaid title — doesn’t affect layout */
.cat-title{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:block;
  padding:8px 12px;
  border-radius:12px;
  font-weight:900;
  font-size:1.06rem;
  background:rgba(255,255,255,.92);
  color:#111315;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;                   /* stays on one line; no layout shift */
  backdrop-filter: blur(2px);
}

/* Safety: prevent any accidental horizontal scroll */
html, body { overflow-x: clip; }


/* add space before the View All button */
.view-all-btn{
  display:inline-block;
  margin-top:20px;
}

/* optional: circular badge for SVG icons */
.cat-badge {
  width:112px; height:112px; flex:0 0 112px;
  border-radius:999px;
  background:var(--deal-hue, #FFF9E6);
  border:2px solid rgba(212,123,25,.28);  /* gold-tinted ring */
  display:grid; place-items:center;
}
.cat-badge svg {
  width:72px; height:72px; display:block;
}
/* ========== Dutch Touch Genetics ========== */
.dtg{margin:16px 0 28px}
.dtg-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.dtg-card{border:1px solid var(--line);border-radius:16px;padding:10px;background:#fff}
.dtg-card img{width:100%;height:120px;object-fit:cover;border-radius:10px}
.dtg-title{font-weight:800;font-size:1rem;line-height:1.25;margin:8px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dtg-meta{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted)}
.badge{background:#fff;color:var(--ink);padding:4px 8px;border-radius:999px;font-weight:700;border:1px solid var(--line)}
.dtg-link{display:inline-block;margin-top:8px;font-weight:800;color:#111315;border-bottom:2px solid var(--gold)}

/* prevent long labels from spilling out of the card */
.tile .title,
.category-card .title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Section title polish */
.section-title{
  font-family:"Cinzel",serif;
  font-weight:900;
  font-size:1.7rem;
  margin:0 0 12px;
  letter-spacing:.3px;
}
.section-title::after{
  content:""; display:block; width:44px; height:3px;
  background:var(--gold); border-radius:2px; margin-top:6px;
}

/* ========== Hours popover & Contact ========== */
.hours-overlay{position:fixed;inset:0;z-index:60;background:transparent}
.hours-popover{
  position:fixed; z-index:61; right:16px;            /* fixed typo */
  width:280px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 18px 40px rgba(16,24,40,.12);
  padding:12px;
}
.hours-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.status-dot{width:10px;height:10px;border-radius:999px;background:#aaa;display:inline-block}
.status-dot.is-open{background:#16a34a}
.status-dot.is-soon{background:#f59e0b}
.status-dot.is-closed{background:#ef4444}
.hours-list{list-style:none;margin:0;padding:0}
.hours-list li{display:flex;justify-content:space-between;padding:6px 2px;font-weight:600}
.hours-list li.is-today{color:#111315}
.hours-note{color:var(--muted);font-size:.9rem;margin-top:6px}

/* Address link in Hours popover */
.hours-note .note-address{
  display:inline-block; font-weight:600; font-size:.82rem;
  color:#2563eb; text-decoration:underline; border-bottom:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hours-note .note-address:hover{ color:#1e40af; }

/* Contact */
.contact{padding:28px 0;border-top:1px solid var(--line);background:#fff}
.contact-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact--gold{background:var(--deal-hue); border-top:1px solid var(--line); padding:28px 0}
.contact-wrap{display:grid; gap:20px; grid-template-columns:1fr}
@media (min-width:900px){ .contact-wrap{grid-template-columns:1fr 1fr} }
.contact-col .section-title{margin-bottom:10px}

/* Map card */
.map-card{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.map-link{position:relative; display:block; line-height:0}
.map-link img{width:100%; height:220px; object-fit:cover}
.map-pin{position:absolute; right:10px; bottom:10px; background:#111315; color:#fff; padding:6px 8px; border-radius:999px; font-weight:800}
.map-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px}
.map-actions .addr{font-weight:700}
.map-buttons{display:flex; gap:8px}

/* Contact list */
.contact-list{list-style:none; padding:0; margin:14px 0 0}
.contact-list li{margin:8px 0}
.socials a{font-weight:800}

/* Loyalty */
.loyalty-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px}
.loy-row{display:flex; gap:8px; align-items:center}
.loy-inline input{flex:1; height:44px; border:1px solid var(--line); border-radius:12px; padding:0 12px; font-weight:600}
.loy-body{margin-top:10px}
.loy-grid{display:grid; gap:10px; grid-template-columns:1fr}
.loy-grid input{height:44px; border:1px solid var(--line); border-radius:12px; padding:0 12px; font-weight:600}
@media (min-width:600px){ .loy-grid{grid-template-columns:1fr 1fr} }
.loy-blurb{margin:8px 0; color:var(--muted)}
.loy-agree{display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:#344054; margin:8px 0}
.loy-actions{display:flex; gap:10px; margin-top:6px}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:20px 0;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
.footer-inner nav a{color:var(--muted);margin-left:14px;font-size:.95rem}

/* ===== Responsive tweaks ===== */
@media (max-width:480px){
  :root{ --nav-h:54px; }
  .sticky-actions > *{height:28px}
  .icon-btn{width:34px;height:28px}
  .pill{padding:3px 8px;min-width:64px;font-size:11px}
  .btn-order{padding:0 10px;font-size:13px;border-radius:10px}
}

/* ===== Anchor offset: land below sticky nav + mobile status strip ===== */
#deals, #contact, #shop, #dtg, #loyalty{
  scroll-margin-top: calc(var(--nav-h) + var(--strip-h) + 8px);
}
:target{ scroll-margin-top: calc(var(--nav-h) + var(--strip-h) + 16px); }

/* --- GOLD FOIL SAFETY --- */
.brand-banner .brand-title .foil{
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-background-clip:text; background-clip:text;
}

/* ========== Clean foil wordmarks (no SVG stroke) ========== */
.brand-title .logo-text{
  position:relative; display:inline-block;
  font-family:"Cinzel","UnifrakturCook",serif;
  font-weight:900; font-size:clamp(36px, 7vw, 72px); letter-spacing:.3px; line-height:1;
  background-image:linear-gradient(92deg,#9C6B1A 0%,#F2C14E 22%,#FFE27A 45%,#F2C14E 62%,#9C6B1A 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
  animation:foilShine 12s linear infinite;
}
.brand-title .logo-text::before{
  content:attr(data-text);
  position:absolute; inset:0; z-index:-1; color:transparent;
  text-shadow:
    1px 0   #26231C, -1px 0   #26231C,
    0   1px #26231C,  0  -1px #26231C,
    1px 1px #26231C, -1px -1px #26231C,
   -1px 1px #26231C,  1px -1px #26231C;
  filter:blur(.2px);
}

/* Compact nav size wordmark */
.sticky-brand-name .logo-text-small{
  position:relative; display:block;
  font-family:"Cinzel","UnifrakturCook",serif;
  font-weight:900; font-size:1.05rem; line-height:1; letter-spacing:.3px;
  background-image:linear-gradient(92deg,#9C6B1A 0%,#F2C14E 22%,#FFE27A 45%,#F2C14E 62%,#9C6B1A 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.12);
  animation:foilShine 12s linear infinite;
}
.sticky-brand-name .logo-text-small::before{
  content:attr(data-text);
  position:absolute; inset:0; z-index:-1; color:transparent;
  text-shadow:
    .8px 0   #26231C, -.8px 0   #26231C,
    0   .8px #26231C,  0   -.8px #26231C,
    .8px .8px #26231C, -.8px -.8px #26231C,
   -.8px .8px #26231C,  .8px -.8px #26231C;
  filter:blur(.15px);
}

/* Kill any leftover strokes on old text */
.brand-title .foil{ -webkit-text-stroke:0 transparent; }

/* ===== 0905 banner solid black (kept) ===== */
.brand-banner{
  background:#000 !important;
  border-bottom:6px solid #D47B19 !important;
  box-shadow:0 10px 24px rgba(16,24,40,.06) !important;
}
.brand-banner::after{ display:none !important; }
@media (min-width:900px){
  .brand-title .logo-text{ display:none !important; }
}

/* Mobile status strip (JS populates) */
@media (max-width:900px){
  .status-strip{
    position: sticky; top: var(--nav-h); z-index: 59;
    display: flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 10px; background: #fff;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 10px rgba(16,24,40,.06); color: #1f2937; font-weight: 800;
  }
  .status-dot{ width:12px; height:12px; border-radius:999px; background:#a3a3a3; border:1px solid rgba(0,0,0,.18); flex:0 0 auto; }
  .status-dot.is-open{   background:#16a34a; border-color:#0f622f; }
  .status-dot.is-soon{   background:#f59e0b; border-color:#b45309; }
  .status-dot.is-closed{ background:#ef4444; border-color:#991b1b; }
  .status-text{ font-size:13px; line-height:1; font-weight:700; }
  .status-addr{
    margin-left:6px; font-size:13px; font-weight:700; text-decoration:none; color:inherit;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #hoursBtn{ display:none !important; }
}

/* Desktop: hide the mobile strip */
@media (min-width:901px){
  .status-strip{ display:none; }
}
/* Fix duplicate label issue */
.label-desktop { display: none; }
.label-mobile { display: inline; }

@media (min-width: 901px) {
  .label-desktop { display: inline; }
  .label-mobile { display: none; }
}

/* Desktop Order Online button polish */
@media (min-width: 901px) {
  .btn-order.btn.gold {
    background: #fff;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 10px;               /* match search + menu corner radius */
    font-weight: 700;
    font-size: 14px;                   /* smaller, matches icons */
    line-height: 1.1;
    padding: 6px 12px;                 /* same vertical height as icons */
    height: 32px;                      /* lock to same height as .icon-btn */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);  /* subtle */
    transition: background .2s, color .2s, box-shadow .2s;
  }
  .btn-order.btn.gold:hover {
    background: var(--gold);
    color: #111315;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
  }
}

/* Mobile: keep it minimal "Order" pill */
@media (max-width: 900px) {
  .btn-order.btn.gold {
    background: #fff;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 999px;
    font-weight: 800;
    padding: 6px 14px;
    box-shadow: none;
  }
  .btn-order.btn.gold:hover {
    background: var(--gold);
    color: #111315;
  }
}

/* ===== DESKTOP POLISH (place at the very end) ===== */

/* Remove the orange divider between banner and nav on desktop */
@media (min-width:901px){
  .brand-banner{ border-bottom:0 !important; }
}

/* Order button: neutral style, centered label, subtle elevation */
.btn-order{
  display:inline-flex;                 /* centers label vertically */
  align-items:center;
  justify-content:center;
  height:40px;                         /* even vertical rhythm */
  padding:0 16px;                      /* width scales with text */
  font-weight:800;
  background:#fff;                     /* match search/hamburger */
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  line-height:1;                       /* remove extra line height */
  box-shadow:0 4px 10px rgba(16,24,40,.10);
  transition:transform .06s ease, box-shadow .15s ease;
}
.btn-order:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(16,24,40,.14);
}

/* Label swap: desktop shows “Order Online”, mobile shows “Order” */
.label-desktop{ display:none; }
.label-mobile{ display:inline; }
@media (min-width:901px){
  .label-desktop{ display:inline; }
  .label-mobile{ display:none;   }
}

/* Keep nav links bullet-free everywhere (belts & suspenders) */
.sticky-tabs,
.sticky-tabs li,
.sticky-tabs .stab{ list-style:none !important; }
.sticky-tabs .stab::before,
.sticky-tabs .stab::after{ content:none !important; }

/* === FINAL OVERRIDES (paste at end) === */

/* 1) Kill the orange divider on ALL viewports */
.brand-banner{ border-bottom:0 !important; }

/* 2) Order button = same height as icon buttons (32px), centered label */
.btn-order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;              /* match .icon-btn */
  padding:0 12px;           /* width fits text */
  border:1px solid var(--line);
  border-radius:10px;       /* match icon buttons */
  background:#fff;
  color:var(--ink);
  font-weight:800;
  line-height:1;
  box-shadow:none;
  transform:none;
}

/* Nuke any older desktop pseudo-label hack */
.btn-order::after{ content:none !important; }

/* 3) Label swap: desktop shows “Order Online”, mobile shows “Order” */
.btn-order .label-desktop{ display:none; }
.btn-order .label-mobile{ display:inline; }
@media (min-width:901px){
  .btn-order .label-desktop{ display:inline; }
  .btn-order .label-mobile{ display:none; }
}

/* 4) Subtle elevation ONLY on desktop so it doesn't blend in */
@media (min-width:901px){
  .btn-order{ box-shadow:0 2px 6px rgba(0,0,0,.08); }
  .btn-order:hover{ box-shadow:0 6px 14px rgba(0,0,0,.14); }
}

/* 5) Clean up: don't force gold style anywhere for .btn-order */
.btn-order.btn.gold{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
}

/* 6) Safety: remove list bullets in the nav (belt & suspenders) */
.sticky-tabs,
.sticky-tabs li,
.sticky-tabs .stab{ list-style:none !important; }
.sticky-tabs .stab::before,
.sticky-tabs .stab::after{ content:none !important; }

/* MOBILE: hide any "Home" in the sticky header */
@media (max-width:900px){
  /* 1) Hide the lion/logo link */
  .sticky-logo{ display:none !important; }

  /* 2) Hide a Home tab by href, class, or id */
  .sticky-tabs .stab[href="#home"],
  .sticky-tabs a[href="#home"],
  .sticky-tabs .stab.home,
  .sticky-tabs li.home,
  .sticky-tabs #home-link,
  .sticky-tabs a[aria-label="Home"]{
    display:none !important;
  }
}
/* Re-show the lion logo on mobile */
@media (max-width:900px){
  .sticky-logo{ display:inline-flex !important; }  /* undo earlier display:none */
}

/* Keep ONLY a text "Home" tab hidden on mobile (if present) */
@media (max-width:900px){
  .sticky-tabs .stab[href="#home"],
  .sticky-tabs a[href="#home"],
  .sticky-tabs .stab.home,
  .sticky-tabs li.home,
  .sticky-tabs #home-link,
  .sticky-tabs a[aria-label="Home"]{
    display:none !important;
  }
}

/* Mobile: hide specific text links, keep Order/search/menu */
@media (max-width: 820px){
  /* If your nav wrapper is .site-nav, adjust if different */
  .site-nav a[href*="dutch"],
  .site-nav a[href*="contact"]{
    display: none !important;
  }

  /* Optional: tighten gaps if those links were in a flex row */
  .site-nav { gap: 10px; }
}

/* --- Mobile-only nav tweaks --- */
@media (max-width: 820px){
  /* hide text links like "Deals", "Dutch Touch" */
  .site-header .nav .nav-text-links{ display:none; }

  /* icon + order/search/hamburger look clickable */
  .site-header .nav .icon-btn,
  .site-header .nav .order-pill,
  .site-header .nav .search-btn,
  .site-header .nav .menu-btn{
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transform: translateZ(0);           /* crisper on iOS */
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .site-header .nav .icon-btn:active,
  .site-header .nav .order-pill:active,
  .site-header .nav .search-btn:active,
  .site-header .nav .menu-btn:active{
    transform: translateY(1px);
    box-shadow: 0 1px 5px rgba(0,0,0,.18);
  }
}

/* === Mobile header: icons only, no text tabs === */
@media (max-width: 900px){
  .sticky-tabs{ display:none !important; }          /* hides Deals / Dutch Touch / etc */

  /* make right-side controls look tap-able */
  .sticky-actions > *,
  .btn-order,
  .icon-btn,
  .search-btn,
  .menu-btn{
    box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .sticky-actions > *:active{ 
    transform: translateY(1px);
    box-shadow: 0 1px 5px rgba(0,0,0,.18) !important;
  }
}

/* Same height/shape as the icon buttons */
.btn-order{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 12px; border-radius:10px;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); font-weight:800; line-height:1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Label swap */
.btn-order .label-desktop{ display:none; }
.btn-order .label-mobile{ display:inline; }
@media (min-width:901px){
  .btn-order .label-desktop{ display:inline; }
  .btn-order .label-mobile{ display:none; }
}

/* Tap feedback (desktop gets a slightly higher lift on hover) */
.btn-order:hover{ box-shadow:0 6px 14px rgba(0,0,0,.14); }
@media (max-width:900px){
  .btn-order:hover{ box-shadow:0 4px 10px rgba(0,0,0,.12); }
}

/* === Contact card overrides (adds padding + styled icon row) === */
.contact-list{
  padding-left: 8px;   /* cushion for whole list */
  margin: 14px 0 0;
  list-style: none;
}
.contact-item{
  margin: 6px 0;
  padding-left: 4px;   /* same left cushion as socials */
}
.icon-row{
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 4px;   /* keeps icons off the left edge */
}
.icon-row a{
  font-size: 1.4rem;
  line-height: 1;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* space between icon and text */
  transition: color .25s ease, transform .1s ease;
}
.icon-row a:hover{ color: var(--gold, #D47B19); }
.icon-row a:active{ transform: scale(.96); }
.icon-row span{ font-size: .9rem; }

/* Optional: center the whole block under the map */
 /* .contact-list{ text-align:center; }
    .icon-row{ justify-content:center; } */

/* === Awards Rail (uniform small cards, horizontal scroll) === */
.awards-sub{
  text-align:center;
  color:var(--muted);
  margin:0 0 12px;
  font-size:1.05rem;
  font-weight:500;
}

.rail-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  margin: 4px 0 10px;
}
.rail-title{ font-weight:900; margin:0; }
.rail-btn{
  height:32px; width:32px; border-radius:10px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.rail-btn:hover{ box-shadow:0 4px 10px rgba(0,0,0,.10); }

/* horizontal rail */
.rail--awards{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 2px 12px;      /* bottom pad leaves room for scrollbar */
}
.rail--awards::-webkit-scrollbar{ height:10px; }
.rail--awards::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.25);
  border-radius:999px;
  border:2px solid transparent;
  background-clip: padding-box;
}
.rail--awards{ scrollbar-color: rgba(0,0,0,.25) transparent; }

/* uniform small cards */
.award-card{
  position:relative;
  flex: 0 0 260px;           /* fixed width so every card matches */
  max-width:260px;
  height: 340px;             /* fixed height for uniform grid feel */
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  scroll-snap-align:start;
  transition:transform .15s ease, box-shadow .15s ease;
}
.award-card:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.award-card img{
  width:100%;
  height:140px;              /* keeps images consistent */
  object-fit:cover;
}

.award-tag{
  position:absolute;
  top:10px; left:10px;
  background:var(--gold);
  color:#111315;
  font-weight:800;
  padding:3px 8px;
  border-radius:10px;
  font-size:.8rem;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.award-body{
  display:flex; flex-direction:column;
  gap:6px;
  padding:10px 12px 12px;
  min-height: 0;             /* safe flex sizing */
}
.award-title{
  font-weight:900; margin:0; font-size:1.02rem;
}
.award-meta-line{
  margin:0; color:var(--muted); font-size:.86rem; font-weight:700;
}
.award-blurb{
  margin:0; font-size:.90rem; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.award-link{
  margin-top:auto;           /* push link to bottom for consistent layout */
  align-self:flex-start;
  font-weight:800;
  border-bottom:2px solid var(--gold);
  padding-bottom:1px;
}

/* small screens can use slightly wider cards for readability */
@media (max-width:420px){
  .award-card{ flex-basis: 280px; max-width:280px; }
}

/* === Desktop: let JS place the panels next to their triggers === */
@media (min-width:901px){
  #hoursTip{ right:88px !important; left:auto !important; }
}

/* ===== Loyalty Section Polish ===== */
.loyalty-section{
  background:var(--deal-hue, #FFF9E6);
  padding:28px 0;
}

.loyalty-card{
  background:#fff;
  border:2px solid var(--gold, #D47B19);
  border-radius:16px;
  padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.loy-inline input{
  flex:1;
  height:44px;
  border:2px solid var(--line);
  border-radius:12px;
  padding:0 12px;
  font-weight:600;
}

.loy-actions .btn.gold{
  background:var(--gold);
  border-color:var(--gold);
  color:#111315;
}

.loy-actions .btn.outline{
  background:#fff;
  border:2px solid var(--line);
  color:var(--ink);
}

/* === 1) Sticky nav: force fully opaque, no transparency anywhere === */
.site-header.sticky-nav{
  background:#ffffff !important;        /* solid */
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 6px 18px rgba(16,24,40,.08) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* (Optional) bring back the subtle gold haze from before without alpha) */
.site-header.sticky-nav::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(212,123,25,.06), rgba(212,123,25,.06));
  pointer-events:none;
}

.loyalty-card{
  background:#fff !important;
  border:2px solid var(--loyal-ring) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.08) !important;
  border-radius:16px !important;
  padding:16px !important;
}

/* input + “Continue” row */
.loy-inline input{
  height:48px !important;
  border:2px solid var(--line) !important;
  border-radius:12px !important;
  background:#fff;
}
.loy-inline input::placeholder{ color:#9aa3ae; }

/* the small “terms” checkbox text */
.loy-agree{ color:#344054; }

/* buttons */
#loyalty .btn.gold{
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:#111315 !important;
}
#loyalty .btn.outline{
  background:#fff !important;
  border:2px solid var(--line) !important;
  color:var(--ink) !important;
}

/* spacing above Contact so the two tinted sections don't touch */
#contact{ margin-top:18px; }

/* === FINAL OVERRIDES: navbar + reverse Contact shading === */

/* 1) Sticky nav: parchment tint + blur (looks solid on iOS) */
.sticky-nav{
  background:
    linear-gradient(var(--gold-tint), var(--gold-tint)),
    #ffffff !important;
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
}

/* 2) Contact section: reverse the shading from screenshot #2  */
#contact.contact--gold{                /* section background now white */
  background: #fff !important;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

/* Make the whole card the pale-gold panel */
#contact .map-card{
  background: var(--deal-hue, #FFF9E6) !important;
  border: 1px solid #eadfcb !important;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  padding: 10px;                       /* little breathing room around iframe */
}

/* Keep the iframe nicely rounded inside the gold panel */
#contact .map-link{
  border-radius: 12px;
  overflow: hidden;
}

/* White content band inside the gold card (like your screenshot),
   so text/buttons remain crisp */
#contact .map-actions{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0 0;
}

/* Social/contact row also sits on white for readability */
#contact .contact-list{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
}

/* Optional: match the "Open in Maps" button tone to brand gold */
#contact .map-buttons .btn.gold{
  background: var(--gold);
  border-color: var(--gold);
  color: #111315;
}

/* ========== DESKTOP-ONLY NAV POLISH (safe drop-in) ========== */
@media (min-width:901px){
  /* 1) Slightly darker parchment so icons don’t blend in */
  .site-header.sticky-nav{
    background:#EDE4D3 !important;            /* a notch darker than #F1E9DC */
    border-bottom:1px solid #d7cdbb;
    box-shadow:0 8px 18px rgba(16,24,40,.10);
  }

  /* 2) Make text links larger + more spaced */
  .sticky-tabs{ gap:36px; }                    /* was ~20px */
  .sticky-tabs .stab{
    font-size:24px;                            /* up from ~14–15 */
    letter-spacing:.2px;
  }

  /* 3) Give Order/Open/Search/Menu a darker ring so they pop */
  .sticky-actions .icon-btn,
  .sticky-actions .pill,
  .sticky-actions .btn-order{
    border:2px solid #bfb6a5;                  /* deeper border */
    box-shadow:0 2px 6px rgba(0,0,0,.08);
  }

  /* 4) Keep icons/text a touch darker for contrast */
  .sticky-tabs .stab,
  .sticky-actions .icon-btn,
  .btn-order{
    color:#1f2937;                             /* readable charcoal */
  }

  /* 5) Hover feedback (subtle) */
  .sticky-tabs .stab:hover{ color:#111315; }
  .sticky-actions .icon-btn:hover,
  .sticky-actions .btn-order:hover,
  .sticky-actions .pill:hover{
    box-shadow:0 6px 14px rgba(0,0,0,.14);
    transform:translateY(-1px);
  }
}

/* MOBILE: keep layout the same, just nudge the shade a hair darker */
@media (max-width:900px){
  .site-header.sticky-nav{ background:#F0E7D7 !important; } /* very gentle */
}

/* Loyalty form input styling */
.loyalty-card input[type="text"],
.loyalty-card input[type="email"],
.loyalty-card input[type="tel"] {
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;  /* black line under each field */
  padding: 8px 4px;
  font-size: 1rem;
  background: transparent;
  outline: none;
}

.loyalty-card input[type="text"]:focus,
.loyalty-card input[type="email"]:focus,
.loyalty-card input[type="tel"]:focus {
  border-bottom-color: var(--gold, #D47B19);  /* gold line highlight on focus */
}

/* === Giant Shop Online CTA + Deals title bump (white background) === */

/* Section: keep page background white */
.cta-shop{
  padding: 24px 0 10px;
  background: #fff;       /* white background */
  text-align: center;
}

.btn-giant{
  display: inline-block;
  padding: 22px 44px;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: .02em;
  border-radius: 16px;

  /* button: pale-gold like Deals/DTG with black outline */
  background: var(--deal-hue, #FFF9E6);
  color: #111315;
  border: 3px solid #000;

  /* lift + shadow */
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-giant:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
  filter: brightness(1.05);
}
.btn-giant:active{ transform: translateY(0); }

/* Mobile: wide tappable target */
@media (max-width: 520px){
  .btn-giant{ width: 96%; padding: 20px 18px; }
}

/* Desktop: bump Today’s Deals title and subtle card lift */
@media (min-width: 900px){
  .deal-title{
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .deal-card{
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
  }
}

/* Giant CTA — keep white section, pale-gold pill with black outline */
.cta-shop{
  padding:24px 0 10px;
  background:#fff;
  text-align:center;
}

.btn-giant,
.btn-giant:link,
.btn-giant:visited{
  display:inline-block;
  padding:22px 44px;
  font-size:clamp(1.25rem,2.5vw,2rem);
  font-weight:900;
  letter-spacing:.02em;
  border-radius:16px;
  background: #fff;
  color:#111315;                 /* default text */
  border:3px solid #000;         /* black outline */
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, color .12s ease;
}

.btn-giant:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
  filter:saturate(1.05);
  color:var(--gold,#D47B19);     /* text turns gold on hover */
}

.btn-giant:active{ transform:translateY(0); }

@media (max-width:520px){
  .btn-giant{ width:96%; padding:20px 18px; }
}

/* Prevent long addresses/links from overflowing rounded cards/bubbles */
.hours-popover,
.map-card,
.status-strip {
  box-sizing: border-box;
}

/* Let long strings wrap inside the bubble */
.hours-popover a,
.hours-popover .hours-note,
.status-addr,
.map-card .addr,
.map-card .map-buttons a {
  overflow-wrap: anywhere;   /* modern wrap */
  word-break: break-word;    /* older fall-back */
  white-space: normal;       /* in case something forced nowrap */
}

/* In flex rows, allow children to actually shrink so they don't overflow */
.hours-popover *,
.map-card *,
.status-strip * {
  min-width: 0;
}

/* Optional: cap the bubble width on desktop so lines wrap sooner */
@media (min-width: 901px){
  .hours-popover { max-width: 420px; }
}

/* === Step One: Fix hours popover + address bubble === */

/* Prevent the status strip text from spilling */
.status-strip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 12px;
  font-size: 0.95rem;
}

/* Hours popover consistent spacing */
.hours-popover {
  padding: 12px 16px;
  border: 1px solid var(--line, #e7e8ec);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
  background: #fff;
}

/* Keep map-card content inside bubble */
.map-card .addr {
  word-wrap: break-word;
  line-height: 1.4;
}

/* iOS: prevent smart address popover + keep single-line */
.status-addr{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-touch-callout: none;  /* no long-press bubble */
  user-select: none;
  pointer-events: none;         /* taps go to the strip, not the text */
}

/* Stop iOS data detectors + keep the strip tidy */
.status-addr{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: none; /* so taps hit the strip, not the text */
}
.status-addr .zwsp{ display:inline-block; width:0; overflow:hidden; }

/* Status strip address — force single line + block iOS bubbles */
.status-addr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: none; /* prevents accidental tap opening */
}
.status-addr .zwsp { 
  display: inline-block; 
  width: 0; 
  overflow: hidden; 
}

.status-addr .sep {
  display:inline-block;
  width:0;
  overflow:hidden;
}
.status-addr .sep::after {
  content: ",";
  display:inline;
}

.sticky-tabs .stab{
  position:relative;
  transition: color .15s ease;
}

@media (hover:hover){
  .sticky-tabs .stab:hover,
  .sticky-tabs .stab:focus{
    color: transparent; /* reveal the gradient */
    background-image: linear-gradient(92deg,#9C6B1A 0%,#F2C14E 22%,#FFE27A 45%,#F2C14E 62%,#9C6B1A 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: foilShine 3s linear infinite;
    text-shadow: 0 1px 0 rgba(0,0,0,.20);
  }
}

/* --- Gold foil only-on-hover text effect (matches nav) --- */
.foil-hover {
  color: #111315;                  /* black by default */
  font-family: "Luminari", "Cinzel", serif;
  font-weight: 900;
  letter-spacing: .02em;
  transition: color .15s ease;
}

@keyframes foilShine { from{background-position:-40% 0} to{background-position:180% 0} }

@media (hover:hover){
  .foil-hover:hover,
  .foil-hover:focus-visible {
    color: transparent;            /* hide the black so the gradient shows */
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(92deg,#9C6B1A 0%,#F2C14E 22%,#FFE27A 45%,#F2C14E 62%,#9C6B1A 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: foilShine 3s linear infinite;
    text-shadow: 0 1px 0 rgba(0,0,0,.20);
  }
}

/* Gold foil only-on-hover text (black by default, foil on hover) */
.foil-hover{
  color:#111315;                       /* default: black */
  font-family:"Luminari","Cinzel",serif;
  font-weight:900;
  letter-spacing:.02em;
  transition:color .15s ease, background-position .15s linear;
}

/* Reveal foil gradient on hover/focus (desktop hover-capable only) */
@media (hover:hover){
  .foil-hover:hover,
  .foil-hover:focus-visible{
    color:transparent;                 /* hide black text */
    -webkit-text-fill-color:transparent;
    background-image:linear-gradient(92deg,#9C6B1A 0%,#F2C14E 22%,#FFE27A 45%,#F2C14E 62%,#9C6B1A 100%);
    background-size:220% auto;
    -webkit-background-clip:text;
    background-clip:text;
    text-shadow:0 1px 0 rgba(0,0,0,.20);
  }
}

/* Default: hide on desktop */
#statusStrip{ display:none !important; }

/* Show on mobile (all mobile browsers) */
@media (max-width:900px){
  #statusStrip{ display:flex !important; }
}

/* ========== AGE GATE ========== */
.agegate{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:#000;
}
.agegate[aria-hidden="false"]{ display:flex; }
body.agegate--lock{ overflow:hidden; }

.agegate__box{
  width:min(92vw, 640px);
  background: rgba(0,0,0,.55);
  border:2px solid var(--gold, #D47B19);
  border-radius:16px;
  padding:28px 22px;
  text-align:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  color:#fff;
}

.agegate__crest{ font-size:2rem; margin-bottom:10px; opacity:.9; }

.agegate__title{
  margin:0 0 6px;
  font-family: "Cinzel","UnifrakturCook", serif;
  font-weight:900;
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing:.3px;
  line-height:1.1;

  /* Dutch Touch foil effect */
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-image: linear-gradient(92deg,#9C6B1A 0%,#F2C14E 22%,#FFE27A 45%,#F2C14E 62%,#9C6B1A 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  animation: foilShine 8s linear infinite;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

.agegate__sub{
  margin:0 0 16px; color:#EAEAEA; font-weight:600;
}

.agegate__actions{
  display:flex; gap:10px; justify-content:center; margin:10px 0 8px;
}
.agegate__btn{ min-width:160px; font-weight:900; }

.agegate__remember{
  display:inline-flex; gap:8px; align-items:center; margin:6px 0 6px;
  color:#d7d7d7; font-weight:600; user-select:none;
}
.agegate__legal{
  margin:6px 0 0; color:#bcbcbc; font-size:.9rem;
}

/* Buttons look crisp on black */
.agegate .btn.gold{ background:var(--gold); border-color:var(--gold); color:#111315; }
.agegate .btn.outline{ background:transparent; border:2px solid #fff; color:#fff; }
.agegate .btn.outline:hover{ background:#111; }

@keyframes foilShine{ from{background-position:-40% 0} to{background-position:180% 0} }

/* Accessibility: better focus on black */
.agegate button:focus-visible,
.agegate input:focus-visible{
  outline:2px solid #fff; outline-offset:2px; border-radius:6px;
}

/* Ensure the Order button is always visible in the header */
.sticky-actions .btn-order { 
  display: inline-flex !important; 
  align-items: center; 
  justify-content: center; 
}

/* Label swap already present, but keep a tiny guard */
.btn-order .label-desktop{ display:none; }
.btn-order .label-mobile{ display:inline; }
@media (min-width:901px){
  .btn-order .label-desktop{ display:inline; }
  .btn-order .label-mobile{ display:none; }
}

/* Force the same label on all viewports */
.btn-order .label-desktop{ display:inline !important; }
.btn-order .label-mobile{ display:none !important; }

/* Tooltip should never block clicks on the pill */
#hoursTip { pointer-events: none; }

/* HOURS: keep everything inside the rounded box */
.hours-popover{
  overflow: hidden;           /* clips long links/text to the bubble */
  max-width: 340px;           /* optional cap so lines wrap sooner */
}

/* Wrap long lines/links inside the popover */
.hours-popover .hours-note,
.hours-popover .hours-note a{
  white-space: normal !important;
  overflow-wrap: anywhere;    /* modern */
  word-break: break-word;     /* fallback */
}

/* belt & suspenders so children don’t force overflow */
.hours-popover *{ min-width:0; }

/* When visible, nudge it a bit: left 12px, up 6px */
.hours-popover:not([hidden]){
  transform: translate(-12px, -6px);
}

/* DESKTOP: always show the lion crest */
@media (min-width:901px){
  .sticky-logo{ display:inline-flex !important; }       /* ensure visible */
  .sticky-logo .brand-lion{
    height: calc(var(--nav-h) - 8px);                   /* keep sized */
    width: auto;
  }
}

/* DESKTOP: breathing room between links and action buttons */
@media (min-width:901px){
  .sticky-tabs{ margin-right: 20px; }   /* tweak 12–28px to taste */
}
/* Desktop: make sure the lion crest is visible and sized */
@media (min-width:901px){
  header.site-header.sticky-nav .sticky-logo{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  header.site-header.sticky-nav .sticky-logo .brand-lion{
    height: calc(var(--nav-h) - 8px) !important;
    width: auto !important;
  }
}
  
header.site-header {
  position: sticky; 
  top: 0;
  z-index: 60; /* keeps nav above embeds */
}

/* Leafly: keep its surface topmost & isolated so clicks reach it */
.embed-shell,
#leafly-embed-wrapper{
  position: relative;
  z-index: 1;
  isolation: isolate;      /* starts a new stacking context */
}

.leafly-overlay{ pointer-events:none; }   /* if you ever use one */
.leafly-overlay .panel{ pointer-events:auto; }

/* ===== Sticky logo: production-safe overrides ===== */
:root { --nav-h: 60px; }  /* fallback in case it's not set somewhere */

/* Layout + stacking so it always occupies space and sits above overlays */
.sticky-nav__inner{ display:flex; align-items:center; gap:12px; }
.sticky-logo{ display:flex; align-items:center; flex:0 0 auto; position:relative; z-index:2; }

/* The crest image itself – fixed, visible, with a safe fallback */
.sticky-logo .brand-lion{
  display:block;
  height:48px;                            /* hard size that always shows */
  width:auto;
  max-height:calc(var(--nav-h,60px) - 8px); /* still respects your nav height */
  min-height:32px;                        /* prevents collapse */
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  transition:none !important;             /* avoids flash-then-hide animations */
}

/* Ensure no sticky state hides it */
.site-header.sticky-nav .sticky-logo,
.site-header.sticky-nav.is-scrolled .sticky-logo{
  opacity:1 !important;
  visibility:visible !important;
}

/* Optional: keep mobile clean (show crest, hide big wordmark if needed) */
@media (max-width:900px){
  .sticky-brand-name{ display:none; }
}

/* ===== Sticky nav balanced layout (refined) ===== */
.sticky-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* spread items across the bar */
  padding:0 24px;                  /* left/right breathing room */
}

/* Logo left with a little cushion */
.sticky-logo{
  flex:0 0 auto;
  margin-right:24px;               /* space before tabs */
}

/* Tabs centered */
.sticky-tabs{
  flex:1;
  display:flex;
  justify-content:center;
  gap:20px;                        /* adjust for how airy you want */
}

/* Actions right */
.sticky-actions{
  flex:0 0 auto;
  margin-left:24px;
  display:flex;
  align-items:center;
  gap:12px;
}

/* ===== Sticky nav balanced layout (refined) ===== */
.sticky-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* spread items across the bar */
  padding:0 24px;                  /* left/right breathing room */
}

/* Logo left with a little cushion */
.sticky-logo{
  flex:0 0 auto;
  margin-right:24px;               /* space before tabs */
}

/* Tabs centered */
.sticky-tabs{
  flex:1;
  display:flex;
  justify-content:center;
  gap:20px;                        /* adjust for how airy you want */
}

/* --- Nav above Leafly embed --- */
.sticky-nav {
  z-index: 9999; /* ensures nav/menu is always on top */
}

/* Leafly iframe stays behind */
.leafly-embed,
.leafly-embed iframe {
  position: relative;
  z-index: 1;
}

/* When hamburger menu is open, prevent clicks from leaking into iframe */
body.menu-open .leafly-embed iframe {
  pointer-events: none;
}

/* Actions right */
.sticky-actions{
  flex:0 0 auto;
  margin-left:24px;
  display:flex;
  align-items:center;
  gap:12px;
}

/* --- Force typography to Cinzel where needed --- */
:root{
  --display-font: "Cinzel", Georgia, serif;
  --ui-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
}

body{ font-family: var(--ui-font); }

/* Wordmark / big headings (what you want in the screenshot) */
.site-title,
.brand,
.wordmark,
h1,h2,h3{
  font-family: var(--display-font);
  font-weight: 900;
  letter-spacing:.02em;
}

/* NAV + pills + buttons */
nav a,
nav button,
.nav a,
.nav__link,
.btn,
.button,
.cta,
.pill,
.shop-online,
.shop-online a{
  font-family: var(--display-font) !important;
  font-weight: 700;
}

/* Nuke any leftover old-English assignment */
*[style*="UnifrakturCook"],
.old-english{
  font-family: var(--display-font) !important;
}

/* === Visually center the nav as one group (desktop only) === */
@media (min-width: 901px){
  .sticky-nav__inner{
    display: flex;
    align-items: center;
    justify-content: center;   /* center the trio as a pack */
    gap: 28px;                 /* space between: [logo] – [links] – [icons] */
    height: var(--nav-h);
  }

  /* stop the old edge pushers */
  .sticky-logo{ margin-right: 0; margin-left: 8px; }
  .sticky-actions{ margin-left: 0; }

  /* prevent the center links from stretching the row */
  .sticky-tabs{
    flex: 0 0 auto;            /* remove flex:1 stretch */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;                 /* space between the text links */
    white-space: nowrap;
  }
}

/* ===== Footer (centered like Green Labs) ===== */
.site-footer{
  border-top: 1px solid var(--line);
  background: #fff;
  margin-top: 40px;
}
.footer-row{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.footer-copy{
  color: var(--muted);
  font-size: .95rem;
}
.footer-links{
}
/* ===================== HERO CAROUSEL (final, all-in-one) ===================== */

/* Base hero wrapper */
.hero{ position:relative; background:#000; }

/* Core slider container */
.hero .slides{
  position:relative;
  display:block;               /* ensure no old grid/flex scroller survives */
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  background:#000;
  aspect-ratio:16/7;           /* mobile/tablet height; tweak to taste */
}

/* Slides: stacked + fade */
.hero .slide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
  will-change:opacity;
}
.hero .slide.is-active{ opacity:1; pointer-events:auto; }

/* Images */
.hero .slide img{
  width:100%; height:100%; display:block;
  object-fit:cover;
}

/* Dots (JS toggles [aria-current="true"]) */
.hero .dots{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:5; margin:0;
}
.hero .dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.35); opacity:.75; cursor:pointer;
}
.hero .dots button[aria-current="true"]{
  background:#fff; border-color:#fff; opacity:1;
}

/* Invisible side-click areas (no visible arrows) */
.hero .edge{
  position:absolute; top:0; bottom:0; width:12%;
  border:0; padding:0; background:transparent; cursor:pointer;
  z-index:6; opacity:0; -webkit-user-select:none; user-select:none;
}
.hero .edge.edge--prev{ left:0; }
.hero .edge.edge--next{ right:0; }

@media (hover:hover){
  .hero .slides:hover .edge.edge--prev{
    opacity:.08; background:linear-gradient(to right, rgba(0,0,0,.25), rgba(0,0,0,0));
  }
  .hero .slides:hover .edge.edge--next{
    opacity:.08; background:linear-gradient(to left, rgba(0,0,0,.25), rgba(0,0,0,0));
  }
}

/* Kill any old visible arrow styles */
.hero .nav-arrow, .hero .arrow, .hero .prev, .hero .next, .c-arrow{ display:none !important; }

/* ===================== Desktop: contained “card” look ===================== */
@media (min-width:900px){
  .hero{ padding:24px 0; background:transparent; }

  /* white card wrapper (this is your <div class="hero-container" id="hero-container">) */
  .hero-container{
    max-width:1200px;           /* 1100/1000px if you want narrower */
    margin:0 auto;
    padding:20px;
    background:transparent;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(16,24,40,.12);
  }

  /* slideshow inside the card */
  #hero-slides{
    border-radius:14px;
    overflow:hidden;
    background:#000;
    aspect-ratio:16/6;          /* desktop height feel; tweak to 16/5 or 16/7 */
    max-height:560px;           /* safety cap */
    width:100%;
  }

  .hero .dots{ bottom:18px; }
  .hero .edge{ width:8%; border-radius:14px; }
}

/* Shift logo left on mobile only */
@media (max-width: 900px) {
  .sticky-logo {
    margin-left: 8px;   /* adjust this number until it looks right */
  }
}

/* ==== About & Trophy (scoped, minimal) ==== */
.about-section, .trophy-section{
  padding: 56px 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--line, #e7e8ec);
}

.section-title{
  margin: 0 0 16px 0;
  font-family: Cinzel, ui-serif, Georgia, serif;
  font-weight: 900;
  letter-spacing: .3px;
  font-size: clamp(22px, 2.6vw, 32px);
}

.about-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;   /* copy heavier than visual */
  gap: 24px;
}

.about-copy p{ margin: 0 0 14px 0; }
.about-copy .about-awards{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: var(--gold-tint, rgba(212,123,25,.08));
  border:1px solid var(--line, #e7e8ec);
  font-size: 12px; font-weight: 600;
}

.about-visual .video-wrapper{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
}
.about-visual .video-wrapper iframe,
.about-visual video{ width:100%; height:100%; border:0; border-radius: var(--radius, 14px); }

.about-card{
  border:1px solid var(--line, #e7e8ec);
  border-radius: var(--radius, 14px);
  box-shadow: 0 8px 20px rgba(16,24,40,.06);
  background: #fff;
}
.about-card-body{ padding:16px; }

.trophy-section .comingsoon-card{
  margin-top: 12px;
  border:1px dashed var(--line, #e7e8ec);
  border-radius: var(--radius, 14px);
  padding:16px;
  background: var(--deal-hue, #FFF9E6);
}

.muted{ color: var(--muted, #667085); }

/* Mobile first */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
}

/* ==== About & Trophy (simple, centered) ==== */
.about-section,
.trophy-section{
  padding: 56px 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--line, #e7e8ec);
}

/* Heading style matches your theme */
.section-title{
  margin: 0 0 16px 0;
  text-align: center;
  font-family: Cinzel, ui-serif, Georgia, serif;
  font-weight: 900;
  letter-spacing: .3px;
  font-size: clamp(22px, 2.6vw, 32px);
}

/* Centered, readable paragraphs */
.about-section p,
.trophy-section p{
  max-width: 72ch;          /* comfortable reading width */
  margin: 0 auto 14px;      /* center + spacing underneath */
  line-height: 1.6;
}

/* Award pills row, centered */
.about-awards{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

/* Pill chip style */
.pill{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--gold-tint, rgba(212,123,25,.08));
  border: 1px solid var(--line, #e7e8ec);
  font-size: 12px;
  font-weight: 600;
}

/* Trophy case coming-soon card */
.trophy-section .comingsoon-card{
  max-width: 72ch;
  margin: 12px auto 0;
  border: 1px dashed var(--line, #e7e8ec);
  border-radius: var(--radius, 14px);
  padding: 16px;
  background: var(--deal-hue, #FFF9E6);
}

.muted{ color: var(--muted, #667085); }

/* Make hash-targets land nicely below your sticky nav */
.hash-offset, .hash-anchor { scroll-margin-top: var(--nav-h, 60px); }
.hash-anchor { height: 0; line-height: 0; }

/* === Today’s Deals — MOBILE-ONLY content alignment (not the title) === */
@media (max-width: 900px){
  /* Left-align the deal content */
  .deals-section .deal-body,
  .deals-section .deal-items,
  .deals-section .deal-items li,
  .deals-section .deal-subtitle,
  .deals-section .deal-cat,
  .deals-section .deal-note,
  .deals-section .deal-actions {
    text-align: left !important;
  }

  /* Remove the orange left rule (dashes) on mobile only */
  .deals-section .deal-subtitle{
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Tidy list indent so bullets look normal */
  .deals-section .deal-items{
    margin: 0 0 0 1rem;
    padding-left: 0;
  }
}
/* (Intentionally not touching .deal-title, so the header stays as-is) */

/* === Today’s Deals — remove orange dash on ALL screens (content only) === */
.deals-section .deal-subtitle{
  border-left: 0 !important;
  padding-left: 0 !important;
  box-shadow: none !important;         /* in case it was an inset shadow */
  background-image: none !important;   /* in case someone used a gradient strip */
}

/* In case the dash was drawn with a pseudo-element */
.deals-section .deal-subtitle::before,
.deals-section .deal-subtitle::after{
  content: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* If an <hr> was styled as an orange dashed line inside the block */
.deals-section hr{
  border: 0 !important;
  height: 0 !important;
}

/* === Remove the orange dash next to section headers everywhere === */
.section-title{
  border: 0 !important;              /* in case a border was used */
  background: none !important;        /* in case a gradient was used */
  position: static !important;        /* prevents absolutely-positioned lines from sticking out */
}

/* Kill any decorative pseudo-elements that draw the gold dash */
.section-title::before,
.section-title::after{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ================================
   About + Trophy — White Background
   (with restored gold underline)
   ================================ */

/* White background across the page */
#about,
#trophy{
  background: #fff;
  padding: 40px 0;                 /* space inside the band */
  margin: 40px 0;                  /* space before/after band */
}

/* Keep the container transparent in band mode */
#about .container,
#trophy .container{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Strong, centered titles for these sections */
#about .section-title,
#trophy .section-title{
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin-bottom: 12px;
  font-size: 2rem;
}

/* Re-enable an underline just for About + Trophy (beats the global dash-killer) */
#about .section-title::after,
#trophy .section-title::after{
  content: "" !important;
  display: block !important;
  width: 80px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--gold, #D47B19);
  border-radius: 2px;
  opacity: .9;
}

/* Tidy body copy width for polish */
#about p,
#trophy p{
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* Video: larger, centered, responsive (click-to-play; no autoplay) */
.video-embed{
  position: relative;
  max-width: min(980px, 92vw);
  margin: 24px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
  background: #000;
}
.video-embed::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}
.video-embed iframe,
.video-embed video{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.video-disclaimer{
  max-width: min(980px, 92vw);
  margin: 8px auto 0;
  font-size: 0.92rem;
  color: var(--muted, #667085);
  text-align: center;
}

/* Slightly scale up headings on larger screens */
@media (min-width: 900px){
  #about .section-title,
  #trophy .section-title{ font-size: 2.25rem; }
}

/* Remove accidental border/outline around the hero wordmark (no bg changes here) */
.brand-banner,
.brand-banner .brand-title,
.brand-banner .foil-svg-large {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  /* background: transparent !important;  <-- DELETE this line */
  border-radius: 0 !important;
}

/* Keep the hero banner solid black behind the SVG wordmark */
.brand-banner { background: #000 !important; }

/* Also kill focus rings on the wordmark link */
.brand-banner .brand-title:focus,
.brand-banner .brand-title:focus-visible,
.brand-banner .brand-title:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Reset sticky nav background to the lighter beige */
.sticky-nav {
  background: #EBDCC7 !important;  /* pick your original hex if different */
}

/* Leave the inner container transparent so the bar color shows through */
.sticky-nav .container { background: transparent !important; }

/* ===== Terms page watermark ===== */
#legal{
  position: relative;
  z-index: 0;                 /* create a stacking context */
  background: #fff;
}

/* Gold lion watermark, centered and faint */
#legal::after{
  content: "";
  position: absolute;
  inset: 0;                   /* cover the whole container */
  background: url("img/lion-solid-gold.svg") no-repeat center 35%;
  background-size: min(60vw, 520px);
  opacity: .06;               /* subtle! adjust 0.04–0.10 to taste */
  pointer-events: none;       /* clicks pass through */
  z-index: 0;
}

/* Keep the actual text above the watermark */
#legal > *{
  position: relative;
  z-index: 1;
}

/* Don’t print the watermark */
@media print{
  #legal::after{ display: none; }
}

#navDrawer[hidden]{ display:none; }

/* Clean stacked list */
#navDrawer .menu-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  padding: 0;
  margin: 0;
}
#navDrawer .menu-list li{ list-style: none; margin:0; padding:0; }

/* Neutral, readable links (no orange boxes) */
#navDrawer .menu-list .drawer-link{
  display:block !important;
  padding:12px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);

  transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
}
#navDrawer .menu-list .drawer-link:hover{
  background:#f8f8f8;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

/* Overlay starts just under the sticky header; keeps pointer travel short */
:root{ --strip-h: 0px; }            /* mobile status strip height if you use one */
@media (max-width:900px){ :root{ --strip-h: 32px; } }

#menuOverlay.menu-overlay{
  position: fixed;
  top: calc(var(--nav-h, 60px) + var(--strip-h, 0px));
  left: 0; right: 0; bottom: 0;
  z-index: 59;
  background: transparent;
}
#menuOverlay[hidden]{ display:none; }

/* === Simple Leafly embed (no crop, no full-bleed tricks) === */
#menu { 
  padding: 24px 0; 
  /* land below sticky header when you click a #menu link */
  scroll-margin-top: calc(var(--nav-h, 60px) + 8px);
}

#menu > .container { 
  padding: 0 16px;            /* normal container padding for the heading */
}

#menu .leafly-embed { 
  width: 100%; 
  max-width: var(--container, 1080px); 
  margin: 0 auto;             /* keep it centered like the rest of the site */
  padding: 0;
}

#leaflyFrame {
  display: block;
  width: 100%;
  height: 80vh;               /* nice tall view without taking the whole page */
  min-height: 800px;          /* safety for short viewports */
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ===== SAFE OVERRIDES: keep hamburger/menu above carousel & anchor Hours ===== */

/* 1) Header stays above page content */
.sticky-nav{ position: sticky; top:0; z-index:3000 !important; overflow:visible; }
.sticky-nav__inner, .sticky-actions{ overflow:visible; }

/* 2) Your hamburger/menu panel sits above everything */
#menu,
.menu-popover,
.nav-drawer,
.hamburger-menu,
.menu-panel{
  z-index:4000 !important;   /* keep existing position: fixed/absolute as-is */
}

/* 3) Overlay sits just under the panel, above page content */
.menu-overlay{
  position: fixed;
  inset: 0;
  z-index:3990 !important;
}

/* 4) Anything that used to cover the menu goes below it */
.hero,
.slides,
.embed-shell,
#leafly-embed-wrapper,
#leafly-embed-wrapper iframe,
iframe[src*="leafly.com"]{
  position: relative;
  z-index:0 !important;
}

/* 5) Desktop-only: drop the Hours popover directly under the Hours pill */
@media (min-width:901px){
  .sticky-actions{ position:relative; } /* anchor for absolute child */

  /* If your Hours popover uses a different class/id, add it here */
  .sticky-actions .menu-popover{
    position: absolute;         /* override any fixed */
    top: calc(100% + 8px);      /* directly below the pill row */
    right: 0;                   /* align with right edge of actions row */
    left: auto;
  }
}

/* ================================
 🎃 HALLOWEEN PROMO STYLES (TEMPORARY)
 👻 Floating Ghost Animation Included
================================ */

.deals-category[data-category="🎃 HALLOWEEN GRAND OPENING"] {
  background: linear-gradient(135deg, #ff7b00 0%, #ffb733 100%);
  color: #000;
  border: 2px solid #000;
  padding: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.deals-category[data-category="🎃 HALLOWEEN GRAND OPENING"] h2 {
  font-family: "Cinzel", Georgia, serif;
  color: #fff;
  text-shadow: 2px 2px 4px #000;
}

.deals-category[data-category="🎃 HALLOWEEN GRAND OPENING"] .deals-group-title {
  font-weight: bold;
  color: #000;
}

.deals-category[data-category="🎃 HALLOWEEN GRAND OPENING"] li::before {
  content: "🎃";
  margin-right: 0.4rem;
}

/* 👻 Floating ghosts */
.ghost {
  position: absolute;
  top: -50px;
  width: 40px;
  height: 40px;
  background: url('https://cdn.jsdelivr.net/gh/greenlabsmj/Dutch-Republic/assets/ghost.png') no-repeat center/contain;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  animation: floatGhost 12s linear infinite, fadeGhost 12s ease-in-out infinite;
}

.ghost:nth-child(1) { left: 20%; animation-delay: 0s; }
.ghost:nth-child(2) { left: 50%; animation-delay: 3s; }
.ghost:nth-child(3) { left: 80%; animation-delay: 6s; }

@keyframes floatGhost {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(200px) rotate(5deg); }
  100% { transform: translateY(400px) rotate(-5deg); }
}

@keyframes fadeGhost {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 0.8; }
}

/* ================================ */