:root{
  --brand:#7b1180;
  --brand-600:#690e6c;
  --accent:#F4B400;          /* Reels gold */
  --accent-600:#D99A00;      /* hover/darker */
  --accent-50:#FFF8DD;       /* super light gold, for subtle fills */
  --text:#222;
  --muted:#666;
  --bg:#fff;
  --bg-alt:#faf7fc;
  --card:#fff;
  --radius:18px;
  --header-offset:96px; /* JS keeps this updated */
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:clip }
@supports not (overflow-x:clip){ html,body{ overflow-x:hidden } }
body{ font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.6 }
img{ max-width:100%; height:auto; display:block }
/* smooth anchor offset */
[id]{ scroll-margin-top:var(--header-offset) }

/* ===== Utilities ===== */
.container{ width:min(1200px,92%); margin-inline:auto }
.flex{ display:flex; gap:1rem }
.between{ justify-content:space-between }
.center{ align-items:center }
.grid-2{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:2rem }
@media (max-width:980px){ .grid-2{ grid-template-columns:1fr } }

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem 1rem; border-radius:8px }

.inline{ color:var(--brand); text-decoration:none }
.inline:hover{ text-decoration:underline }

/* ===== Buttons ===== */
.btn{ display:inline-block; border-radius:999px; padding:.85rem 1.2rem; font-weight:700; text-decoration:none; border:2px solid transparent; line-height:1 }
.btn.primary{ background:var(--brand); color:#fff }
.btn.primary:hover{ background:var(--brand-600) }
.btn.accent{ background:var(--accent); color:#000 }
.btn.accent:hover{ background: var(--accent-600); }
.btn.ghost{ background:transparent; border-color:var(--brand); color:var(--brand) }
.btn.ghost:hover{ background:var(--bg-alt) }
.btn.btn-sm{ padding:.55rem .9rem; font-weight:700; border-width:1.5px }

/* sheen effect (safe, no overflow) */
.btn.sheen{ position:relative; overflow:hidden; isolation:isolate }
.btn.sheen::after{
  content:""; position:absolute; inset:-25% -55%; width:55%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.92) 52%,transparent 100%);
  transform:translateX(-120%) rotate(12deg); filter:blur(1.5px); opacity:0; pointer-events:none;
}
@media (hover:hover){
  .btn.sheen:hover::after,.btn.sheen:focus-visible::after{ animation:sheen-slide 1.1s ease forwards; opacity:1 }
}
@media (prefers-reduced-motion:reduce){
  .btn.sheen:hover::after,.btn.sheen:focus-visible::after{ animation:none; opacity:.28 }
}
@keyframes sheen-slide{
  0%{ transform:translateX(-120%) rotate(12deg); opacity:.28 }
  60%{ opacity:.6 }
  100%{ transform:translateX(145%) rotate(12deg); opacity:0 }
}

/* ===== Header ===== */
.site-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:1000 }
.site-header .container{ padding-block:10px }
.site-header .brand{ display:inline-flex; align-items:center; padding:4px 10px; margin-left:2px; border-radius:12px }
.site-header .brand img{ width:108px; height:auto }
@media (max-width:980px){
  .site-header .container{ padding-block:8px }
  .site-header .brand{ padding:3px 8px }
  .site-header .brand img{ width:80px }
}
.nav-toggle{ display:none; background:#fff; border:1px solid #ddd; padding:.5rem .75rem; border-radius:10px }
.nav-list{ display:flex; gap:1rem; list-style:none; margin:0; padding:0 }
.nav-list a{ color:var(--text); text-decoration:none; font-weight:700 }
.nav-list a:hover{ color:var(--brand) }
.cta-wrap{ display:flex; gap:.8rem }

@media (max-width:980px){
  /* lock body + backdrop when open */
  body.nav-open{ overflow:hidden }
  body.nav-open::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.20); backdrop-filter:blur(2px); z-index:999 }

  .cta-wrap{ display:none !important }
  .nav-toggle{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; margin-left:.4rem; padding:0; border:1px solid #ddd; border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:pointer }

  /* floating sheet */
  .nav-list{
    display:block; position:fixed; right:12px; top:calc(var(--header-offset) + 8px);
    width:min(88vw,340px); background:#fff; border:1px solid #eee; border-radius:20px; padding:.5rem;
    box-shadow:0 20px 60px rgba(0,0,0,.18); z-index:1000;
    transform-origin:90% 0; transform:translateY(-6px) scale(.98); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    max-height:calc(100vh - var(--header-offset) - 24px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:max(.5rem, env(safe-area-inset-bottom));
  }
  .nav-list.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
  .nav-list a{
    display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; font-size:1.05rem; font-weight:700; color:var(--text);
    text-decoration:none; border-radius:12px;
  }
  .nav-list a:hover,.nav-list a:focus-visible{ background:#faf7fc; color:var(--brand); outline:none }
  .nav-list li+li{ border-top:1px dashed #f0e6f3 }
}
/* tiny bullet on mobile menu items */
.nav-list a::before{ content:""; width:8px; height:8px; border-radius:50%; background:#e9d6f0; flex:none }
.nav-list a:hover::before{ background:var(--brand) }

/* ===== Hero ===== */
.hero{ padding:clamp(2rem,4vw,4rem) 0; position:relative; isolation:isolate }
.hero::before{
  content:""; position:absolute; inset:-6rem -2rem -3rem; z-index:-1; pointer-events:none;
  background:
    radial-gradient(600px 260px at 20% 25%, rgba(123,17,128,.10), transparent 60%),
    radial-gradient(480px 220px at 85% 35%, rgba(255,122,0,.10), transparent 60%);
  filter:saturate(105%);
}
.display{ font-family:'Reikna','Lato',sans-serif; font-weight:700; letter-spacing:.5px; font-size:clamp(40px,5vw,64px); margin:0 0 .5rem }
.lead{ font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:62ch }
.btn-row{ margin-top:1rem; display:flex; gap:.75rem; flex-wrap:wrap }
.trust-bullets{ list-style:none; padding:0; margin:1rem 0 0; color:var(--muted) }
.hero-media img{ border-radius:var(--radius); box-shadow:0 10px 40px rgba(0,0,0,.08) }

/* curved divider under hero */
.wave-divider{ line-height:0; margin-top:-2px; margin-bottom: -2px; position:relative; z-index:0; isolation:isolate;  }
.wave-divider svg{ display:block; width:100%; height:80px }
.wave-divider { box-shadow: inset 0 -10px 30px rgba(0,0,0,.035); }

/* quick chips */
.quick-picks{ margin-top:.5rem; display:flex; gap:.5rem; flex-wrap:wrap }

/* ===== Chips ===== */
.chip{
  display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .8rem;
  border-radius:999px; font-weight:700; font-size:.95rem; color:var(--brand);
  background:#fff; border:1px solid #eadcf0; text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; white-space:nowrap; cursor:pointer;
}
.chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9 }
.chip:hover,.chip:focus-visible{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.08); border-color:var(--brand); outline:none }

/* ===== Sections ===== */
.section{ padding:clamp(2rem,4vw,4rem) 0; background:var(--bg) }
.section.alt{ background:var(--bg-alt) }
.section + .section.alt{ border-top:1px solid #f3eef5 }
.h2{ font-family:'Reikna','Lato',sans-serif; font-size:clamp(28px,3.6vw,40px); margin:0 0 .75rem }
.section-lead{ color:var(--muted); margin:0 0 1rem }

/* ===== Cards ===== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.card{ background:var(--card); border-radius:var(--radius); padding:1rem; border:1px solid #eee }
.card h3{ margin:.5rem 0 }
.card p{ color:var(--muted); margin:0 }
@media (max-width:980px){ .cards{ grid-template-columns:1fr } }

/* ===== PRINTABLE MENU (image gallery) ===== */
/* Stack the two menu pages vertically, centered */
.menu-gallery{
  display: grid;
  grid-template-columns: 1fr;   /* always stacked */
  gap: .5rem;                   /* tight spacing */
  width: 100%;
  max-width: min(1040px, 96vw);            /* remove 960px cap */
  margin: .5rem auto 0;           /* align with container edges */
  justify-content: center;
  justify-items: center;
  align-items: start;
}
.menu-page{
  margin: 0;
  width: 100%;
  max-width: 1000px;             /* let image fill container */
}
.menu-page img{
  width:100%; height:auto; border-radius:var(--radius); border:1px solid #eee;
  cursor:zoom-in; box-shadow:0 6px 20px rgba(0,0,0,.05);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.menu-page img:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.12); border-color:#eadcf0 }
.menu-page figcaption{ color:var(--muted); font-size:.92rem; margin-top:.4rem; text-align:center }

/* lightbox */
.lightbox{ border:none; border-radius:16px; padding:0; max-width:min(1200px,96vw) }
.lightbox::backdrop{ background:rgba(0,0,0,.6) }
.lightbox img{ display:block; max-width:96vw; max-height:80vh; border-radius:12px }
.lightbox-close{ position:absolute; right:.5rem; top:.25rem; font-size:2rem; background:#fff; border:none; border-radius:10px; cursor:pointer; padding:.25rem .6rem }

/* ===== SEARCHABLE MENU (accordion) ===== */
.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media (max-width:980px){ .menu-grid{ grid-template-columns:1fr } }

.menu-grid--cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media (max-width:980px){ .menu-grid--cards{ grid-template-columns:1fr } }

.menu-cat{
  background:#fff; border:1px solid #eee; border-radius:18px; padding:.25rem 1rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.05); overflow:hidden;
}
.menu-cat summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0 .4rem; font-weight:800;
}
.menu-cat summary::-webkit-details-marker{ display:none }
.menu-cat[open] summary{ color:var(--brand) }
.menu-items{ margin:.2rem 0 0; padding-left:1rem }
.menu-items li{ margin:.28rem 0 }
.menu-items.subnote{ border-top:1px dashed #f0e6f3; margin-top:.6rem; padding-top:.6rem }
.menu-note{ margin-top:1rem; color:var(--muted) }
/* Make the two menu buttons stretch full width */
.menu-downloads{
  display: grid;
  grid-template-columns: 1fr;   /* stack on small screens */
  gap: .5rem;
  width: 100%;
}

/* side-by-side (each 50% width) on wider screens */
@media (min-width: 720px){
  .menu-downloads{ grid-template-columns: 1fr 1fr; }
}

/* make anchors stretch inside their grid cells */
.menu-downloads .btn{
  width: 100%;
  justify-content: center;      /* centers the label inside the pill */
  padding: 1rem 1.25rem;        /* a bit taller = nicer tap target */
  font-size: 1rem;
}


/* search state helpers */
.menu-cat.is-hidden{ display:none }
.menu-items li.is-hidden{ display:none }
.menu-empty{ display:none; margin-top:.5rem; color:var(--muted) }
.menu-empty.show{ display:block }

/* arrow buttons */
.tabs-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent;
  background:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.10); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, filter .12s ease, box-shadow .12s ease; cursor:pointer;
}
.tabs-arrow.left{ left:4px } .tabs-arrow.right{ right:4px }
.tabs-arrow.is-visible{ opacity:1; pointer-events:auto }
.tabs-arrow:hover{ filter:brightness(.96); box-shadow:0 6px 18px rgba(0,0,0,.14) }
.tabs-arrow:active{ transform:translateY(-50%) scale(.98) }
.tabs-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* highlight active chip while scrolling */
.menu-tabs .chip.is-active{ outline:2px solid rgba(123,17,128,.18) }

/* ===== Hours table + status card ===== */
.hours{ border-collapse:collapse; width:auto; margin-inline:auto 0 }
.hours th,.hours td{ border:1px solid #eee; padding:.6rem 1rem; vertical-align:middle; white-space:nowrap }
.muted{ color:var(--muted) }

/* zebra + today */
.hours tr.is-today th,.hours tr.is-today td{ background:#fbf7fd; border-color:#eadcf0; box-shadow:inset 0 0 0 1px #eadcf0 }
.hours tbody tr:nth-child(odd):not(.is-today) th, .hours tbody tr:nth-child(odd):not(.is-today) td{ background:#fff }
.hours tbody tr:nth-child(even):not(.is-today) th, .hours tbody tr:nth-child(even):not(.is-today) td{ background:#fdfdfd }

/* tiny clock bullet */
.hours th{ position:relative; padding-left:2.2rem }
.hours th::before{
  content:""; width:18px; height:18px; position:absolute; left:.8rem; top:50%;
  transform:translateY(-50%); background:currentColor; opacity:.85; color:var(--brand);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.75A10.25 10.25 0 1 0 22.25 12 10.26 10.26 0 0 0 12 1.75Zm0 18.5A8.25 8.25 0 1 1 20.25 12 8.26 8.26 0 0 1 12 20.25Zm.75-12.5a.75.75 0 0 0-1.5 0v4.25a.75.75 0 0 0 .22.53l2.75 2.75a.75.75 0 0 0 1.06-1.06l-2.53-2.53Z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.75A10.25 10.25 0 1 0 22.25 12 10.26 10.26 0 0 0 12 1.75Zm0 18.5A8.25 8.25 0 1 1 20.25 12 8.26 8.26 0 0 1 12 20.25Zm.75-12.5a.75.75 0 0 0-1.5 0v4.25a.75.75 0 0 0 .22.53l2.75 2.75a.75.75 0 0 0 1.06-1.06l-2.53-2.53Z"/></svg>') center/contain no-repeat;
}

/* layout with status card */
.hours-grid{
  display:grid;
  grid-template-columns:minmax(320px,520px) 1fr;
  grid-template-areas:"title title" "table card" "note card";
  gap:1rem 2rem; align-items:start; margin-top:.75rem;
}
.hours-title{ grid-area:title; margin:0 0 .5rem; text-align:left }
.hours-wrap{ grid-area:table }
.status-card{ grid-area:card }
.hours-note{ grid-area:note; margin-top:.25rem; max-width:520px }
.hours-wrap .hours{ width:100%; margin:0 }
@media (min-width:981px){
  .status-card{ position:relative }
  .status-card::before{ content:""; position:absolute; left:-1rem; top:0; bottom:0; width:1px; background:#f0e6f3 }
}
@media (max-width:980px){
  .hours-grid{ grid-template-columns:1fr; grid-template-areas:"title" "table" "card" "note"; gap:1rem }
  .hours-note{ max-width:none }
}

/* Hours table caption: align left + comfy spacing */
.hours caption{
  caption-side: top;          /* keep it above the table */
  text-align: left;
  padding: .35rem .75rem .5rem; /* top | sides | bottom */
  padding-left: 1rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--muted);        /* or try var(--brand-600) for a bolder look */
}


/* status card */
.status-card{
  background:#fff; border:1px solid #eee; border-radius:18px; padding:1rem 1.1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  position:sticky; top:calc(var(--header-offset) + 12px); z-index:3; align-self:start;
}
@media (max-width:980px){ .status-card{ position:static; top:auto } }
.status-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem }
.status-icon{ width:22px; height:22px; fill:var(--brand) }
.badge{ display:inline-block; font-weight:700; border-radius:999px; padding:.35rem .7rem; border:2px solid transparent }
.badge.open{ background:#eaf7ef; color:#136d2a; border-color:#cde8d5 }
.badge.closed{ background:#fff0f0; color:#8b1a1a; border-color:#f0caca }

/* subtle pulse ring that never affects layout */
.badge.open{ position:relative; overflow:clip; contain:layout paint }
.badge.open::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(19,109,42,.28); animation:badge-ring 2.6s ease-out infinite;
}
@keyframes badge-ring{
  0%{ box-shadow:0 0 0 0 rgba(19,109,42,.28) }
  70%{ box-shadow:0 0 0 10px rgba(19,109,42,0) }
  100%{ box-shadow:0 0 0 0 rgba(19,109,42,0) }
}
@media (prefers-reduced-motion:reduce){ .badge.open::after{ animation:none } }
.status-text{ margin:.25rem 0 1rem; color:var(--muted); line-height:1.5 }

/* ===== Map ===== */
.map-wrap{ aspect-ratio:16/10; background:#f2eef6; border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.06) }
.map-wrap iframe{ width:100%; height:100%; border:0 }

/* ===== Social ===== */
.social{ list-style:none; display:flex; gap:.8rem; padding:0; margin:0; flex-wrap:wrap }
.social li{ margin:0 }
.social-btn{
  width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#fff; border:1px solid #eee; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.social-btn svg{ width:22px; height:22px; fill:currentColor; color:var(--brand) }
.social-btn:hover,.social-btn:focus-visible{ border-color:var(--brand); background:#faf7fc; transform:translateY(-1px); outline:none }
@media (prefers-reduced-motion:reduce){ .social-btn{ transition:none } }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid #eee; padding:1rem 0; color:var(--muted) }

/* tidy roundness everywhere */
.btn,.card,.menu-cat,.status-card,.map-wrap{ border-radius:var(--radius) }

/* ===== Print menu block title center ===== */
.menu-print{ text-align:center; margin-top:.5rem }
.menu-print .h2{ margin:0 0 .35rem }
.menu-print .section-lead{ max-width:60ch; margin:0 auto 1rem }

/* ===== Footer v2 ===== */
.site-footer.v2{
  background:
    linear-gradient(180deg, #faf7fc 0%, #fff 40%); /* soft brand vibe */
  border-top: 1px solid #eee;
  margin-top: 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr 1fr;
  gap: 2rem;
  padding-block: 2rem;
}
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr; gap: 1.25rem; }
}
.footer-col .brand img{ width: 96px; height:auto; }
.footer-blurb{ margin:.5rem 0 1rem; max-width: 36ch; }
.footer-ctas{ display:flex; gap:.5rem; flex-wrap:wrap; }

.footer-title{
  font-weight:800;
  margin:.2rem 0 .25rem;
  font-size:1rem;
  color: var(--brand-600);
}
.footer-links{
  list-style:none; margin:0 0 .5rem; padding:0;
  columns: 2; column-gap: 1.25rem;   /* compact list on desktop */
}
.footer-links li{ break-inside: avoid; }
.footer-links a{ color: var(--text); text-decoration:none; }
.footer-links a:hover{ color: var(--brand); text-decoration:underline; }

.footer-address a{ text-decoration:none }
.footer-address a:hover{ text-decoration:underline }

.footer-social{ margin-top:.6rem }

/* bottom bar + back-to-top bubble */
.footer-bar{
  border-top:1px dashed #f0e6f3;
  padding:.65rem 0;
  background:#fff;
}
.to-top{
  appearance:none; border:none;
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  cursor:pointer; transform: translateY(4px);
  transition: transform .15s ease, box-shadow .15s ease, filter .12s ease;
}
.to-top:hover{ transform: translateY(2px); filter: brightness(.96); }
.to-top:active{ transform: translateY(4px) scale(.98); }

/* ===== Social hub ===== */
/* Social hub — container-sized, clipped glow */
.social-hub{
  position: relative;
  overflow: hidden;                 /* clip any overspill */
}

/* desktop/tablet */
.social-hub::before{
  content:"";
  position:absolute;
  top:-28px;                        /* lift glow a bit */
  left:50%;
  transform:translateX(-50%);       /* center to container */
  width:min(1200px, 92vw);          /* match .container width */
  height:140px;
  pointer-events:none;
  /* blobs live inside the container, not the full viewport */
  background:
    radial-gradient(420px 160px at 22% 60%, rgba(123,17,128,.06), transparent 66%),
    radial-gradient(420px 160px at 78% 36%, rgba(255,122,0,.06), transparent 66%);
}

/* very wide screens: move inward & soften */
@media (min-width:1400px){
  .social-hub::before{
    top:-34px;
    background:
      radial-gradient(480px 170px at 26% 56%, rgba(123,17,128,.06), transparent 68%),
      radial-gradient(480px 170px at 74% 32%, rgba(255,122,0,.06), transparent 68%);
  }
}

/* phones: lighter or hide if you prefer */
@media (max-width:980px){
  .social-hub::before{
    top:-20px;
    width:92vw;
    height:110px;
    background:
      radial-gradient(320px 130px at 24% 62%, rgba(123,17,128,.05), transparent 65%),
      radial-gradient(300px 120px at 82% 34%, rgba(255,122,0,.05), transparent 65%);
  }
  /* To remove glow on mobile completely, uncomment:
  .social-hub::before{ display:none; }
  */
}

.social-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem;
}
@media (max-width:980px){ .social-cards{ grid-template-columns:1fr; } }

.social-card{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.1rem; border:1px solid #eee; border-radius:18px; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  text-decoration:none; color:var(--text);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.social-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.08); border-color:#eadcf0; }
.sc-icon svg{ width:28px; height:28px; fill:#7b1180; }
.sc-title{ font-weight:800; display:block; }
.sc-cta{ font-weight:700; color:var(--brand); font-size:.95rem; }

.social-card.ig .sc-icon svg{ fill:#C13584; }
.social-card.tt .sc-icon svg{ fill:#000; }
.social-card.fb .sc-icon svg{ fill:#1877F2; }

.ugc-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }

/* ===== Contact cards ===== */
.contact-cards { position: relative; }
.cc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem;
}
@media (max-width:980px){ .cc-grid{ grid-template-columns:1fr; } }

.cc-card{
  background:#fff; border:1px solid #eee; border-radius:18px; padding:1rem 1.1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.cc-card h3{ margin:.15rem 0 .25rem; }
.cc-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }

/* toast */
.toast{
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(16px);
  background:#111; color:#fff; padding:.55rem .8rem; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  font-weight:700; opacity:0; pointer-events:none; transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ---- Fix social-hub background glow bleed ---- */
.social-hub{
  position: relative;
  overflow: hidden;                /* clip any glow that escapes */
}

/* default desktop/tablet */
.social-hub::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-28px;                       /* lifts the glow a bit */
  height:140px;
  pointer-events:none;
  /* slightly smaller, centered blobs so they don't touch edges */
  background:
    radial-gradient(420px 160px at 22% 60%, rgba(123,17,128,.06), transparent 66%),
    radial-gradient(420px 160px at 78% 36%, rgba(255,122,0,.06),  transparent 66%);
}

/* very wide screens: move blobs inward & up a touch */
@media (min-width: 1400px){
  .social-hub::before{
    top:-36px;
    background:
      radial-gradient(520px 180px at 26% 56%, rgba(123,17,128,.06), transparent 68%),
      radial-gradient(520px 180px at 74% 32%, rgba(255,122,0,.06),  transparent 68%);
  }
}

/* phones: soften or hide if you prefer */
@media (max-width: 980px){
  .social-hub::before{
    top:-20px;
    height:110px;
    background:
      radial-gradient(340px 130px at 24% 62%, rgba(123,17,128,.05), transparent 65%),
      radial-gradient(320px 120px at 82% 34%, rgba(255,122,0,.05),  transparent 65%);
    opacity:.8;                    /* reduce intensity on small screens */
  }
  /* If you decide it’s too much on mobile, uncomment to hide it:
  .social-hub::before{ display:none; }
  */
}

/* Tiny info dot + tooltip (no JS) */
.info-tip{
  margin-left:.5rem;
  width:18px; height:18px;
  border:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 55%, transparent 56%),
    var(--brand);                   /* purple ring */
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  cursor:help;
  position:relative;
}
.info-tip::before{                 /* “i” */
  content:"i";
  position:absolute; inset:0;
  font:700 11px/18px system-ui, sans-serif;
  color:var(--brand);
  text-align:center;
  transform:scale(.92);
  mix-blend-mode:multiply;
}
.info-tip::after{
  content:attr(aria-label);
  position:absolute;
  left:50%; top:calc(100% + 8px);
  transform:translateX(-50%) translateY(6px);
  white-space:nowrap;
  background:#111; color:#fff;
  font-weight:700; font-size:.78rem;
  padding:.45rem .6rem;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:2;
}
.info-tip:hover::after,
.info-tip:focus-visible::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}


/* Make active menu chips outline reflect gold subtly */
.menu-tabs .chip.is-active{
  outline:2px solid color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Social buttons hover: faint gold surface instead of gray */
.social-btn:hover,
.social-btn:focus-visible{
  background: var(--accent-50);
  border-color: color-mix(in oklab, var(--accent), #eadcf0 60%);
}

/* Compact purple info dot with a CSS-only tooltip */
.info-dot{
  margin-left:.45rem;
  width:22px; height:22px;
  border-radius:999px;
  border:1.5px solid var(--brand);
  background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:help;
  position:relative;
}
.info-dot::before{
  content:"i";
  font-weight:900;
  font-size:.82rem;
  line-height:1;
  color:var(--brand);
}

/* Tooltip bubble (hidden by default) */
.info-dot::after{
  content: attr(data-tip);
  position:absolute;
  left:50%; bottom:125%;
  transform: translateX(-50%) translateY(6px);
  background:#111;
  color:#fff;
  padding:.4rem .6rem;
  border-radius:8px;
  font-size:.85rem;
  white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:0; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
}

/* Small arrow under the bubble */
.info-dot:hover::after,
.info-dot:focus-visible::after{ opacity:1; transform: translateX(-50%) translateY(0) }
.info-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }


/* --- Map card (lazy) --- */
.map-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  background: #f5eff8; /* soft brand backdrop until map loads */
  min-height: 300px;
}

.map-card iframe{
  width:100%; height:100%; border:0;
}

/* Placeholder button that loads the map */
.map-lazy{
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  background:
    radial-gradient(520px 220px at 20% 25%, rgba(123,17,128,.10), transparent 60%),
    radial-gradient(420px 200px at 85% 35%, rgba(255,122,0,.10), transparent 60%),
    #fbf7fd;
}

/* subtle pin glyph */
.map-lazy::before{
  content:"";
  width:56px; height:56px;
  border-radius: 16px;
  background: var(--brand);
  opacity:.9;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 6.1 12.3 6.36 12.58a.9.9 0 0 0 1.28 0C12.9 21.3 19 14.25 19 9a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z"/></svg>') center/28px 28px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 6.1 12.3 6.36 12.58a.9.9 0 0 0 1.28 0C12.9 21.3 19 14.25 19 9a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z"/></svg>') center/28px 28px no-repeat;
  box-shadow: 0 10px 30px rgba(123,17,128,.22);
}

/* “Load map” label */
.map-lazy__label{
  margin-top:.6rem;
  padding: .55rem .9rem;
  background:#fff;
  border:1px solid #eadcf0;
  border-radius: 999px;
  font-weight: 800;
  color: var(--brand);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.map-lazy:hover .map-lazy__label,
.map-lazy:focus-visible .map-lazy__label{
  transform: translateY(-1px);
  border-color: var(--brand);
}
.map-lazy:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* Responsive min height tweak */
@media (max-width: 980px){
  .map-card{ min-height: 260px; }
}


/* Review card container */
.review-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  max-width:560px;
}

/* Friendly wiggle on the question mark */
.wiggle{ display:inline-block }
@media (hover:hover){
  .wiggle:hover{ animation:wiggle .7s ease }
}
@keyframes wiggle{
  0%{ transform:rotate(0) }
  25%{ transform:rotate(8deg) }
  50%{ transform:rotate(-6deg) }
  75%{ transform:rotate(4deg) }
  100%{ transform:rotate(0) }
}

/* Star picker */
.star-picker{
  display:flex; gap:.25rem; margin:.25rem 0 .75rem;
}
.star{
  appearance:none; border:none; background:transparent; cursor:pointer;
  font-size:1.75rem; line-height:1; padding:.15rem .2rem; border-radius:8px;
  color:#d9d9d9;                          /* empty star */
  transition:transform .12s ease, color .12s ease, background .12s ease;
}
.star:hover{ transform:translateY(-1px) }
.star.is-on{ color:#ffb400 }               /* filled star */
.star:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Make the review CTA look extra tappable on mobile */
@media (max-width:980px){
  .review-card{ padding: .9rem 1rem }
  .star{ font-size:1.6rem }
}


.menu-toolbar{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.75rem 0 1rem; }
.menu-search{ position:relative; flex:1 1 320px; max-width:560px; }
.menu-search input{
  width:100%; border:1px solid #eadcf0; background:#fff;
  padding:.8rem 2.6rem .8rem 1rem; border-radius:14px; font-size:1rem;
  box-shadow:0 4px 16px rgba(123,17,128,.06);
}
.menu-search svg{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  width:20px; height:20px; fill:#7b1180; opacity:.8; pointer-events:none;
}
/* clear button */
.menu-clear{
  position:absolute; right:2.1rem; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:999px; border:0; background:transparent; cursor:pointer;
  color:#7b1180; opacity:.75;
}
.menu-clear:hover{ opacity:1; background:#f7f1fa; }

/* results counter */
.menu-count{ color:var(--muted); font-weight:700; min-width:8ch; }

/* hit highlighting (soft gold) */
mark.hit{
  background: var(--accent-50);
  color: inherit;
  padding: 0 .15em;
  border-radius: 4px;
}

/* little count pill per category */
.menu-cat .pill{
  display:inline-block; margin-left:.5rem; font-size:.75rem; font-weight:800;
  padding:.12rem .45rem; border-radius:999px; background:#faf7fc; border:1px solid #eadcf0; color:var(--brand-600);
}

/* Reviews: two-column band that fills the space */
.review-cta .review-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.5rem 2rem;
  align-items: start;
}

@media (max-width: 980px){
  .review-cta .review-grid{ grid-template-columns: 1fr; }
}

/* Make the existing review-card breathe a bit */
.review-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Larger, tappable stars */
.review-card .star-picker .star{
  font-size: 28px;               /* bigger than default */
  line-height: 1;
  width: 40px; height: 40px;
  display: inline-flex; align-items:center; justify-content:center;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
}
.review-card .star-picker .star:hover{ background: #faf7fc; }
.review-card .btn-row{ margin-top: .75rem; }

/* Right-side "snapshot" panel */
.snapshot-card{
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #faf7fc 100%);
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 1.25rem 1.1rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.snapshot-stars{
  font-size: 34px;
  letter-spacing: 2px;
  color: #FDBA15;                /* star gold */
  margin-bottom: .35rem;
}

.snapshot-title{
  font-weight: 800;
  margin-bottom: .2rem;
}

.snapshot-copy{
  color: var(--muted);
  margin: 0 0 .75rem;
}

.snapshot-cta .btn{ width: 100%; justify-content:center; }

.qr-box{
  margin-top: .9rem;
  display: grid; place-items: center;
}
.qr-faux{
  width: 96px; height: 96px;
  border-radius: 12px;
  background:
    conic-gradient(#000 0 25%, #fff 0 50%, #000 0 75%, #fff 0) center/12px 12px,
    repeating-linear-gradient(90deg,#000 0 6px,#fff 0 12px) center/100% 2px no-repeat,
    #fff;
  border: 2px solid #111;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

.snapshot-title {
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: .4rem;
}

.snapshot-copy {
  font-size: .95rem;
  color: var(--muted);
  margin: 0 0 1rem;
}


/* Best Sellers — product tiles */
.bestsellers-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin-top: .75rem;
}
@media (max-width: 980px){
  .bestsellers-grid{ grid-template-columns: 1fr; }
}

/* Tile */
.bs-card{
  background:#fff; border:1px solid #eee; border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bs-card:hover{ transform: translateY(-2px); box-shadow:0 16px 44px rgba(0,0,0,.09); border-color:#eadcf0; }

/* Media: consistent row height */
.bs-media{
  position:relative;
  aspect-ratio: 5/4;
  display:grid; place-items:center;
  background: linear-gradient(180deg, #fff 0%, #faf7fc 100%);
}
.bs-media img{
  max-width: 72%; max-height: 88%;
  object-fit: contain; display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.10));
}

/* Badge */
.bs-badge{
  position:absolute; left:.75rem; top:.75rem;
  background: var(--accent); color:#111; font-weight:900;
  border-radius:999px; padding:.28rem .55rem; font-size:.8rem;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}

/* Body */
.bs-body{ padding: .85rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem }
.bs-title{ margin:.1rem 0 .1rem; font-size:1.05rem }
.bs-copy{ color:var(--muted); margin:0 }

/* Actions */
.bs-actions{
  margin-top:.35rem; display:flex; align-items:center; gap:.5rem;
}
.bs-actions .btn{ flex:1; justify-content:center }
.price-pill{
  display:inline-block; min-width:44px; text-align:center;
  padding:.42rem .55rem; border-radius:10px; font-weight:800;
  border:1px solid #eee; background:#fff;
}


/* Specials: compact 3-up cards */
#specials .card{
  padding: .9rem 1rem;
}
#specials .card img{
  aspect-ratio: 4 / 3;        /* consistent height across cards */
  object-fit: contain;
  max-height: 200px;          /* dial this up/down to taste */
  margin-inline: auto;
}
#specials .card h3{
  margin: .6rem 0 .25rem;
  font-size: 1rem;
}
#specials .card p{
  font-size: .95rem;
  line-height: 1.45;
}


/* Hero CTAs: tidy row */
.hero-cta{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

/* Trust tagline: compact, high-signal, on-brand */
.hero-trustline{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:.6rem;
  padding:.45rem .75rem;
  font-weight:800;
  color: var(--brand-600);
  background:#fff;
  border:1px solid #eadcf0;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.hero-trustline::before{
  content:"★";
  color: var(--accent);
  font-size:1.05rem;
  line-height:1;
}

/* Optional: tighten hero lead for nicer rhythm */
.hero .lead{ max-width:60ch; }


/* Lightbox: fit by default */
.lightbox{
  overflow: hidden;
  overscroll-behavior: contain;   /* keep page from scrolling while panning */
}

/* Image defaults (fit view) */
.lightbox img{
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform .12s ease;
  -webkit-user-drag: none;        /* prevent ghost drag image */
}

/* Zoomed state: allow panning */
.lightbox.is-zoom{
  overflow: auto;                  /* enable scroll/pan */
}

/* Zoomed image: remove fit constraints + grab to pan */
.lightbox.is-zoom img{
  max-width: none;
  max-height: none;
  cursor: grab;
  touch-action: none;              /* smoother touch-drag on mobile */
}

/* While dragging */
.lightbox.is-zoom.is-dragging img{
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}


/* ---------------------------
   Searchable Menu toolbar
----------------------------*/
.menu-toolbar{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .65rem;
  margin: .25rem 0 1rem;
}

/* Search row */
.menu-search label{
  display:block;
  font-weight:700;
  font-size:.95rem;
  margin-bottom:.35rem;
}
.menu-search input{
  width:100%;
  padding:.9rem 1rem;
  border:1px solid #eadcf0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.04) inset, 0 6px 20px rgba(0,0,0,.03);
}

/* Row 2: chips scroller + actions */
.menu-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:.5rem;
  align-items:center;
}

/* Smooth horizontal scroller for chips */
.chip-scroller{
  display:flex;
  gap:.5rem;
  overflow:auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: .25rem .35rem;
  border-radius: 999px;
  background: #fff;
  border:1px solid #eadcf0;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  position: relative;
}

/* Fade edges on the chip scroller */
.chip-scroller::before,
.chip-scroller::after{
  content:"";
  position:absolute;
  top:0; bottom:0; width:36px;
  pointer-events:none;
}
.chip-scroller::before{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
  border-top-left-radius:999px; border-bottom-left-radius:999px;
}
.chip-scroller::after{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
  border-top-right-radius:999px; border-bottom-right-radius:999px;
}

/* Chip look (keeps your brand vibe) */
.chip-scroller .chip{
  scroll-snap-align: start;
  white-space:nowrap;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid #eadcf0;
  background:#faf7fc;
  color:#4b1450;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.chip-scroller .chip:hover{ background:#f4ebf6; }

/* Hide ugly scrollbars while keeping scroll */
.chip-scroller{ scrollbar-width: none; }
.chip-scroller::-webkit-scrollbar{ display:none; }

/* Right action buttons */
.menu-actions-right{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.menu-actions-right .btn{
  padding:.6rem .85rem;
  border-radius:999px;
}

/* Responsive: stack actions under the chips when tight */
@media (max-width: 720px){
  .menu-row{
    grid-template-columns: 1fr;
    gap:.4rem;
  }
  .menu-actions-right{ justify-content: flex-start; }
}


/* ---------- Toolbar layout ---------- */
.menu-controls{ display:grid; gap:.6rem; margin:.25rem 0 1rem; }

.menu-toolbar-row{
  display:grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap:.6rem 1rem; align-items:center;
}
.menu-toolbar-row > label{ font-weight:700; font-size:.95rem; }

/* Search input with leading icon */
.search-wrap{
  position:relative;
  display:flex; align-items:center;
  background:#fff; border:1px solid #eadcf0; border-radius:999px;
  box-shadow:0 4px 16px rgba(0,0,0,.04) inset, 0 6px 20px rgba(0,0,0,.03);
}
.search-wrap .search-icn{ position:absolute; left:.9rem; font-size:1rem; opacity:.7; }
.search-wrap input{
  width:100%; padding:.85rem 1rem .85rem 2.2rem; border:0; outline:none; background:transparent;
  border-radius:999px; font-size:1rem;
}

/* Segmented actions */
.seg{
  display:inline-flex; border:1px solid #eadcf0; border-radius:999px; overflow:hidden;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.seg-btn{
  padding:.55rem .9rem; border:0; background:transparent; font-weight:800; color:#4b1450; cursor:pointer;
}
.seg-btn + .seg-btn{ border-left:1px solid #eadcf0; }
.seg-btn:hover{ background:#faf7fc; }

/* ---------- Chip scroller with nudge arrows ---------- */
.tabs-wrap{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:.3rem; align-items:center;
}
.chip-scroller.menu-tabs{
  display:flex; gap:.5rem; overflow:auto; padding:.35rem .5rem; scroll-snap-type:x proximity;
  border:1px solid #eadcf0; border-radius:999px; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  scrollbar-width:none;
}
.chip-scroller.menu-tabs::-webkit-scrollbar{ display:none; }

/* fade edges */
.chip-scroller.menu-tabs::before,
.chip-scroller.menu-tabs::after{
  content:""; position:sticky; top:0; bottom:0; width:24px; pointer-events:none; z-index:1;
}
.chip-scroller.menu-tabs::before{
  left:0; background:linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.chip-scroller.menu-tabs::after{
  margin-left:auto; right:0; background:linear-gradient(270deg, #fff, rgba(255,255,255,0));
}

/* Chips */
.menu-tabs .chip{
  scroll-snap-align:start;
  white-space:nowrap;
  padding:.5rem .75rem; border-radius:999px;
  border:1px solid #eadcf0; background:#faf7fc; color:#4b1450;
  font-weight:800; display:inline-flex; align-items:center; gap:.35rem;
}
.menu-tabs .chip:hover{ background:#f4ebf6; }
.menu-tabs .chip.is-active{ background:#4b1450; color:#fff; border-color:#4b1450; }

/* Nudge arrows */
.tabs-nav{
  width:36px; height:36px; border-radius:999px; border:1px solid #eadcf0; background:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.tabs-nav:hover{ background:#faf7fc; }

@media (max-width:720px){
  .menu-toolbar-row{ grid-template-columns: minmax(0,1fr) auto; }
  .menu-toolbar-row > label{ display:none; }  /* keep it for a11y but hide visually */
}

/* Ensure the toolbar can paint above adjacent elements */
.menu-controls{ position: relative; z-index: 2; }

/* Chip scroller: never clip vertically */
.chip-scroller.menu-tabs{
  overflow-x: auto;
  overflow-y: visible;           /* <— prevents the top/bottom cut */
  padding: .35rem .75rem;
  border: 1px solid #eadcf0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  position: relative;            /* for absolute fades */
  scrollbar-width: none;
}
.chip-scroller.menu-tabs::-webkit-scrollbar{ display: none; }

/* Fade edges — use absolute instead of sticky so they don't get clipped */
.chip-scroller.menu-tabs::before,
.chip-scroller.menu-tabs::after{
  content: "";
  position: absolute;            /* <— was sticky */
  top: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}
.chip-scroller.menu-tabs::before{
  left: 0;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.chip-scroller.menu-tabs::after{
  right: 0;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
}

/* Keep arrows above the fades */
.tabs-wrap{ position: relative; }
.tabs-wrap .tabs-nav{ position: relative; z-index: 2; }

/* ——— Kill legacy scroller that’s clipping the chip row ——— */
.menu-tabs-scroller{
  overflow: visible !important;      /* was: hidden */
  padding-inline: 0 !important;      /* remove old side padding for fades */
}

/* remove the old fade overlays that sit on top */
.menu-tabs-scroller::before,
.menu-tabs-scroller::after{
  display: none !important;
}

/* if old arrow buttons were used with that scroller, hide them too */
.tabs-arrow{ display: none !important; }

/* make sure the new scroller paints freely */
.menu-controls{ position: relative; z-index: 2; }
.chip-scroller.menu-tabs{
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}