/* =========================================================================
   The Butcher Shop & Grill — design system
   Ported from the approved prototype. Variable-driven.
   ========================================================================= */

:root {
  /* Palette */
  --bsg-green: #1d4d29;
  --bsg-green-dark: #143a1e;
  --bsg-green-hover: #2a6638;
  --bsg-green-accent: #2f6e3c;
  --bsg-green-deep: #1d2e1d;
  --bsg-gold: #b18a3e;
  --bsg-gold-light: #e9d39a;
  --bsg-cream: #f2ebd7;
  --bsg-parchment: #d9c7a4;
  --bsg-paper: #fbf7ec;
  --bsg-panel: #e7dcc0;
  --bsg-ink: #2c2a22;
  --bsg-ink-soft: #4a463a;
  --bsg-muted: #6b6a52;

  /* Fonts */
  --bsg-font-head: 'Playfair Display', Georgia, serif;
  --bsg-font-body: 'PT Serif', Georgia, 'Times New Roman', serif;

  /* Shape */
  --bsg-radius-pill: 28px;
  --bsg-container: 1340px;
  --bsg-gutter: 28px;

  /* Layout / header / logo / banner — overridable by settings via inline CSS.
     These defaults keep the theme correct even before the dynamic CSS loads. */
  --bsg-header-h: clamp(58px, 7vw, 74px);
  --bsg-header-pos: sticky;
  --bsg-strip-h: 34px;
  --bsg-logo-h: clamp(58px, 9vw, 104px);
  --bsg-logo-top: 7px;
  --bsg-banner-h: clamp(240px, 42vw, 480px);
  --bsg-banner-h-tall: clamp(280px, 50vw, 560px);
  --bsg-hero-h: clamp(360px, 62vh, 640px);

  /* Background texture (overridable by settings via inline CSS) */
  --bsg-bg-texture: url('../images/bg-texture.jpg');
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.butchershop {
  margin: 0;
  font-family: var(--bsg-font-body);
  color: var(--bsg-ink);
  background: var(--bsg-parchment) var(--bsg-bg-texture) top left repeat;
  min-height: 100vh;
  position: relative;
  overflow-x: clip; /* safe last-resort; keeps position:sticky working */
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--bsg-gold); }

/* Visible keyboard focus for accessibility (mouse clicks stay clean). */
:focus-visible { outline: 3px solid var(--bsg-gold); outline-offset: 2px; border-radius: 4px; }
.bsg-header :focus-visible,
.bsg-mobile-menu :focus-visible,
.bsg-footer :focus-visible { outline-color: var(--bsg-gold-light); }
.bsg-btn:focus-visible,
.bsg-filter__pill:focus-visible { outline-offset: 3px; }

img { max-width: 100%; height: auto; }

::selection { background: var(--bsg-green); color: var(--bsg-cream); }

.bsg-container {
  max-width: var(--bsg-container);
  margin: 0 auto;
  padding: 0 var(--bsg-gutter);
}

.bsg-narrow { max-width: 960px; margin: 0 auto; }
.bsg-wide { max-width: 1180px; margin: 0 auto; }

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: var(--bsg-font-head); color: var(--bsg-green); line-height: 1.2; }

.bsg-h1 {
  font-family: var(--bsg-font-head);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 56px);
  color: var(--bsg-green);
  margin: 0 0 18px;
}

.bsg-lead {
  font-family: var(--bsg-font-head);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--bsg-green-accent);
  line-height: 1.45;
}

.bsg-prose { font-size: 19px; }
.bsg-prose p { font-size: 19px; line-height: 1.9; margin: 0 0 28px; }
.bsg-prose p:last-child { margin-bottom: 0; }
.bsg-prose h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin: 40px 0 16px; }
.bsg-prose h3 { font-size: 25px; font-weight: 700; margin: 30px 0 12px; }
.bsg-prose li { font-size: 19px; line-height: 1.85; }
.bsg-prose .bsg-lede { font-size: 21px; line-height: 1.7; color: var(--bsg-ink); font-style: italic; margin: 0 0 26px; }

/* Inline content links stand out (but not links already styled as buttons). */
.bsg-prose a:not(.bsg-btn) {
  color: var(--bsg-green-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.bsg-prose a:not(.bsg-btn):hover,
.bsg-prose a:not(.bsg-btn):focus {
  color: var(--bsg-green-hover);
}

/* =========================================================================
   HEADER
   ========================================================================= */
.bsg-header {
  position: var(--bsg-header-pos, sticky);
  top: 0;
  z-index: 50;
  background: var(--bsg-green);
  border-bottom: 3px solid var(--bsg-green-dark);
  overflow: visible;
}

.bsg-header__inner {
  max-width: var(--bsg-container);
  margin: 0 auto;
  /* Left padding reserves room for the overhanging logo badge (scales with logo size). */
  padding: 0 clamp(16px, 3vw, 28px) 0 calc(var(--bsg-logo-h) * 1.34 + 34px);
  height: var(--bsg-header-h);
  display: flex;
  align-items: center;
  position: relative;
}

.bsg-logo {
  position: absolute;
  left: clamp(14px, 2vw, 26px);
  top: var(--bsg-logo-top, 18px);
  z-index: 60;
  display: block;
}
/* Height scales with the logo var; the white halo keeps the green arc text
   ("The Original and Only") legible when the badge overhangs onto a banner. */
.bsg-logo img {
  height: var(--bsg-logo-h, 104px);
  width: auto;
  display: block;
  /* Crisp white halo makes the green "The Original and Only" arc legible on ANY
     background (green ribbon, dark banner photo, parchment) + a soft drop shadow. */
  filter:
    drop-shadow(0 0 1.5px rgba(255,255,255,.95))
    drop-shadow(0 0 3px rgba(255,255,255,.85))
    drop-shadow(0 3px 8px rgba(0,0,0,.35));
}
.bsg-logo .bsg-logo__text {
  color: var(--bsg-cream);
  font-family: var(--bsg-font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.05;
  display: block;
  padding-top: 16px;
}

.bsg-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.bsg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bsg-nav a {
  cursor: pointer;
  font-family: var(--bsg-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bsg-cream);
  transition: color .2s;
}
.bsg-nav a:hover,
.bsg-nav .current-menu-item > a,
.bsg-nav .current_page_item > a { color: var(--bsg-gold-light); }

/* dropdown */
.bsg-nav li { position: relative; }
.bsg-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--bsg-green-dark);
  border: 1px solid rgba(242,235,215,.14);
  padding: 8px 0;
  display: none;
  flex-direction: column;
  gap: 0;
  z-index: 70;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.bsg-nav li:hover > .sub-menu,
.bsg-nav li:focus-within > .sub-menu { display: flex; }
.bsg-nav .sub-menu a { padding: 9px 18px; font-size: 13px; }

/* header cart button */
.bsg-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bsg-green-dark);
  color: var(--bsg-cream);
  border: 1px solid rgba(242,235,215,.18);
  border-radius: var(--bsg-radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--bsg-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
}
.bsg-cart-btn:hover { background: var(--bsg-green-hover); color: var(--bsg-cream); }
.bsg-cart-btn .bsg-cart-count {
  background: var(--bsg-gold);
  color: var(--bsg-green-dark);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* mobile menu toggle */
.bsg-burger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--bsg-cream);
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

/* Locations bar */
.bsg-locations {
  background: var(--bsg-green-dark);
  color: var(--bsg-gold-light);
  text-align: center;
  font-family: var(--bsg-font-body);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(242,235,215,.12);
}

/* =========================================================================
   HERO SLIDER (home)
   ========================================================================= */
.bsg-hero {
  position: relative;
  height: var(--bsg-hero-h);
  min-height: 340px;
  overflow: hidden;
  background: var(--bsg-green-deep);
}
/* Scroll hint — nudges the eye to the content below the shorter hero. */
.bsg-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 22px 10px;
  border: 1px solid rgba(233,211,154,.5);
  border-radius: var(--bsg-radius-pill);
  background: rgba(20,40,20,.55);
  color: var(--bsg-cream);
  font-family: var(--bsg-font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.bsg-hero__scroll:hover { background: rgba(20,40,20,.78); color: var(--bsg-gold-light); }
.bsg-hero__scroll svg { width: 26px; height: 26px; animation: bsg-bob 1.8s ease-in-out infinite; }
@keyframes bsg-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .bsg-hero__scroll svg { animation: none; } }
.bsg-hero__slide {
  position: absolute;
  inset: 0;
  transition: opacity 1s ease;
  opacity: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--bsg-green-deep);
}
.bsg-hero__slide.is-active { opacity: 1; animation: bsg-kenburns 9s ease-out both; }
@keyframes bsg-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .bsg-hero__slide.is-active { animation: none; } }

.bsg-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(20,40,20,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bsg-cream);
  z-index: 6;
}
.bsg-hero__arrow:hover { background: rgba(20,40,20,.7); }
.bsg-hero__arrow--prev { left: 18px; }
.bsg-hero__arrow--next { right: 18px; }

/* page banner (for inner pages) — responsive height via CSS var (clamp) */
.bsg-banner {
  position: relative;
  height: var(--bsg-banner-h);
  overflow: hidden;
  background: var(--bsg-green-deep);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.bsg-banner--tall { height: var(--bsg-banner-h-tall); }
.bsg-banner__slide {
  position: absolute;
  inset: 0;
  transition: opacity 1s ease;
  opacity: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--bsg-green-deep);
}
.bsg-banner__slide.is-active { opacity: 1; }

/* =========================================================================
   GENERIC SECTIONS
   ========================================================================= */
.bsg-section { max-width: 960px; margin: 0 auto; padding: 74px 24px 80px; }
.bsg-section--center { text-align: center; }
.bsg-section--narrow { max-width: 880px; }
.bsg-quote {
  font-family: var(--bsg-font-head);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.45;
  color: var(--bsg-green-accent);
  margin: 0;
}

/* Buttons */
.bsg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bsg-green);
  color: var(--bsg-cream);
  font-family: var(--bsg-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--bsg-radius-pill);
  border: none;
  cursor: pointer;
  transition: background .2s ease;
}
.bsg-btn:hover { background: var(--bsg-green-hover); color: var(--bsg-cream); }
.bsg-btn--block { display: flex; width: 100%; justify-content: center; }

/* =========================================================================
   KNOW YOUR CUTS interactive
   ========================================================================= */
.bsg-cuts { max-width: 1080px; margin: 0 auto; padding: 30px 24px 20px; }
.bsg-cuts__head {
  border-top: 1px solid var(--bsg-green);
  border-bottom: 1px solid var(--bsg-green);
  padding: 18px 0;
  text-align: center;
}
.bsg-cuts__head h2 { font-weight: 700; font-size: 30px; letter-spacing: .04em; color: var(--bsg-green); margin: 0; }
.bsg-cuts__tabs { display: flex; justify-content: center; gap: 0; margin: 24px 0 30px; }
.bsg-cuts__tab {
  font-family: var(--bsg-font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  padding: 8px 30px;
  cursor: pointer;
  background: transparent;
  color: #8f9781;
  border: 1px solid #b9bda9;
}
.bsg-cuts__tab.is-active { background: var(--bsg-green); color: var(--bsg-gold-light); border-color: var(--bsg-green); }
.bsg-cuts__panel {
  border: 1px solid var(--bsg-gold);
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 24px;
  align-items: center;
}
.bsg-cuts__sel { text-align: center; }
.bsg-cuts__sel-img { height: 200px; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.bsg-cuts__sel-name { border-bottom: 1px solid var(--bsg-green); margin-top: 14px; padding-bottom: 8px; }
.bsg-cuts__sel-name span { font-family: var(--bsg-font-head); font-weight: 700; font-size: 22px; color: var(--bsg-green); }
.bsg-cuts__cook { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--bsg-green); }
.bsg-cuts__cook span {
  font-family: var(--bsg-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--bsg-green);
  background: var(--bsg-panel);
  border: 1px solid var(--bsg-gold);
  border-radius: 20px;
  padding: 4px 14px;
}
.bsg-cuts__diagram { text-align: center; }
.bsg-cuts__kicker { font-family: var(--bsg-font-head); font-size: 14px; letter-spacing: .18em; color: var(--bsg-gold); }
.bsg-cuts__title { font-family: var(--bsg-font-head); font-weight: 800; font-size: 38px; color: var(--bsg-green); margin: 2px 0 12px; }
.bsg-cuts__animal { width: 100%; max-width: 330px; height: 230px; margin: 0 auto; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.bsg-cuts__list { min-width: 0; }
.bsg-cuts__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--bsg-gold);
  padding: 7px 6px;
  cursor: pointer;
  transition: color .15s;
  color: var(--bsg-green);
  width: 100%;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
}
.bsg-cuts__item:hover { color: var(--bsg-gold); }
.bsg-cuts__item.is-active { color: var(--bsg-gold); }
.bsg-cuts__num { font-family: var(--bsg-font-body); font-style: italic; font-weight: 700; font-size: 14px; color: var(--bsg-gold); min-width: 34px; text-align: right; }
.bsg-cuts__label { font-family: var(--bsg-font-head); font-weight: 700; font-size: 16px; }

/* Seafood block */
.bsg-seafood {
  max-width: 1080px;
  margin: 0 auto;
  padding: 50px 24px 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.bsg-seafood h2 { font-weight: 800; font-size: clamp(28px, 3.4vw, 38px); margin: 0 0 18px; }
.bsg-seafood p { font-size: 19px; line-height: 1.9; }

/* =========================================================================
   WINE LIST
   ========================================================================= */
/* Full-width lead paragraph above the two-column intro. */
.bsg-wine-lead { max-width: 900px; margin: 0 auto; padding: 8px 24px 4px; text-align: center; }
/* Full-width wine article + centred cellar image with actions. */
.bsg-wine-figure { max-width: 640px; margin: 22px auto 4px; text-align: center; padding: 0 24px; }
.bsg-wine-figure img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.bsg-wine-figure .bsg-wine-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.bsg-wine-article { max-width: 820px; padding-top: 20px; padding-bottom: 30px; }
/* Award figure inside prose (city pages). */
.bsg-prose .bsg-award { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 28px; padding: 18px 22px; border: 1px solid var(--bsg-gold); border-radius: 14px; background: rgba(255, 255, 255, .4); text-align: left; }
.bsg-award__badge { width: 96px; height: auto; border-radius: 10px; flex: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.bsg-award__text { flex: 1 1 260px; }
.bsg-award__text .bsg-years { margin: 0 0 6px; }
.bsg-award__text p { margin: 0; }
.bsg-wine-lead p { font-size: 21px; line-height: 1.85; margin: 0; color: var(--bsg-ink); }
.bsg-wine-intro {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 20px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: start;
}
.bsg-wine-intro h2 { font-weight: 800; font-size: 28px; margin: 0 0 16px; }
.bsg-wine-intro p { font-size: 18px; line-height: 1.85; margin: 0 0 20px; }
.bsg-wine-aside { display: flex; flex-direction: column; align-items: center; position: sticky; top: calc(var(--bsg-header-h) + 20px); margin-top: 34px; }
.bsg-wine-aside img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.bsg-wine-cta { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; margin: 22px auto 0; }
.bsg-wine-list { max-width: 1180px; margin: 0 auto; padding: 20px 24px 90px; }
.bsg-wine-list__rule { border-top: 1px solid var(--bsg-gold); margin-bottom: 40px; }
.bsg-wine-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; align-items: start; }
.bsg-wine-cols > div { min-width: 0; }
/* While filtering, collapse to one centred column so a few matches don't sit
   awkwardly in a single side column. */
.bsg-wine-cols.is-filtering { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; gap: 0; }
.bsg-wine-cat {
  font-family: var(--bsg-font-head); font-weight: 700; font-size: 24px; color: var(--bsg-green);
  text-align: center; margin: 0 0 20px; padding-bottom: 12px; scroll-margin-top: 90px;
  border-bottom: 2px solid var(--bsg-gold);
}
.bsg-wine-section { break-inside: avoid; margin-bottom: 24px; }
.bsg-wine-cat { scroll-margin-top: 90px; }
.bsg-wine-item { text-align: center; margin: 0 0 20px; }
.bsg-wine-item__n { font-family: var(--bsg-font-head); font-weight: 700; font-size: 20px; color: var(--bsg-green); }
.bsg-wine-item__w { font-family: var(--bsg-font-body); font-weight: 700; font-size: 16px; color: var(--bsg-ink); margin: 3px 0; }
.bsg-wine-item__d { font-family: var(--bsg-font-body); font-style: italic; font-size: 16px; color: var(--bsg-ink-soft); line-height: 1.55; }
.bsg-wine-spacer { height: 16px; }

/* =========================================================================
   MENU (flipbook)
   ========================================================================= */
.bsg-flip-wrap { position: relative; width: 760px; max-width: 100%; min-height: 520px; margin: 0 auto; }
#bsg-magazine { width: 760px; height: 520px; max-width: 100%; }
.bsg-flip-controls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 28px; }
.bsg-flip-nav {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--bsg-green);
  color: var(--bsg-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
  transition: background .2s ease, opacity .2s ease, transform .12s ease;
  cursor: pointer;
}
.bsg-flip-nav:hover { background: var(--bsg-green-hover); }
.bsg-flip-nav:active { transform: scale(.93); }
.bsg-flip-nav[disabled] { opacity: .26; pointer-events: none; cursor: default; }
.bsg-flip-label { font-family: var(--bsg-font-body); font-weight: 700; font-size: 15px; letter-spacing: .05em; color: var(--bsg-green); min-width: 152px; text-align: center; }
.bsg-flip-hint { text-align: center; margin-top: 14px; font-family: var(--bsg-font-body); font-style: italic; font-size: 14px; color: var(--bsg-muted); }

/* =========================================================================
   RESERVATIONS / PRIVATE DINING / CONTACT
   ========================================================================= */
.bsg-card {
  background: var(--bsg-cream);
  border: 1px solid var(--bsg-gold);
  padding: 40px 30px;
  display: inline-block;
  min-width: min(520px, 100%);
}
.bsg-card h3 { font-weight: 700; font-size: 24px; margin: 0 0 8px; }
.bsg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; text-align: center; }
.bsg-info h3 { font-weight: 700; font-size: 20px; margin: 0 0 10px; }
.bsg-info p { font-size: 16px; line-height: 1.9; margin: 0; }

.bsg-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 56px; }
.bsg-contact-loc { border-top: 1px solid var(--bsg-gold); border-bottom: 1px solid var(--bsg-gold); padding: 26px 10px; }
.bsg-contact-loc h3 { cursor: pointer; font-family: var(--bsg-font-head); font-style: italic; font-weight: 700; font-size: 22px; color: var(--bsg-gold); margin: 0 0 14px; }
.bsg-contact-loc h3:hover { color: var(--bsg-green); }
.bsg-contact-loc p { font-family: var(--bsg-font-head); font-size: 17px; line-height: 1.95; color: var(--bsg-green); margin: 0; }
.bsg-contact-addr { margin: 0 0 8px !important; }
.bsg-contact-line { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 4px !important; }
.bsg-contact-line a { color: var(--bsg-green); }
.bsg-contact-line a:hover { color: var(--bsg-gold); }
/* Consistent, aligned phone/mail icons for the contact info. */
.bsg-contact-ico { display: inline-flex; flex: none; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--bsg-gold); }
.bsg-contact-ico svg { width: 16px; height: 16px; display: block; }
.bsg-me-loc__tel .bsg-contact-ico { width: 16px; height: 16px; }
.bsg-contact-line--dir { margin-top: 6px !important; }
.bsg-contact-line--dir a { text-decoration: underline; text-decoration-color: var(--bsg-gold); text-underline-offset: 2px; }
.bsg-me-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 50px; max-width: 760px; margin: 0 auto; }
.bsg-me-loc { cursor: pointer; }
.bsg-me-loc__city { font-family: var(--bsg-font-head); font-style: italic; font-weight: 700; font-size: 19px; color: var(--bsg-green); }
.bsg-me-loc__sub { font-family: var(--bsg-font-head); font-style: italic; font-size: 16px; }
.bsg-me-loc__tel { font-family: var(--bsg-font-head); font-size: 16px; color: var(--bsg-green); }
.bsg-map { width: 100%; height: 358px; border: 0; display: block; }

/* Contact form */
.bsg-form { max-width: 640px; margin: 0 auto; text-align: left; }
.bsg-form .bsg-field { margin: 0 0 18px; }
.bsg-form label { display: block; font-family: var(--bsg-font-head); font-weight: 700; font-size: 15px; color: var(--bsg-green); margin: 0 0 6px; }
.bsg-form__legend { font-size: 14px; color: var(--bsg-muted); margin: 0 0 20px; }
.bsg-required { color: #b23b2e; font-weight: 700; }

/* Cookie consent banner */
.bsg-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--bsg-green-deep); color: var(--bsg-cream);
  border-top: 2px solid var(--bsg-gold); box-shadow: 0 -6px 24px rgba(0,0,0,.3);
}
.bsg-cookie[hidden] { display: none; }
.bsg-cookie__inner {
  max-width: var(--bsg-container); margin: 0 auto; padding: 16px var(--bsg-gutter);
  display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; justify-content: center;
}
.bsg-cookie__text { margin: 0; font-size: 15px; line-height: 1.6; flex: 1 1 420px; }
.bsg-cookie__text a { color: var(--bsg-gold-light); text-decoration: underline; }
.bsg-cookie__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.bsg-cookie .bsg-btn--ghost { color: var(--bsg-cream); border-color: var(--bsg-cream); }
.bsg-cookie .bsg-btn--ghost:hover { background: var(--bsg-cream); color: var(--bsg-green); }
.bsg-footer__cookie {
  background: none; border: 0; color: #9aa890; cursor: pointer;
  font-family: var(--bsg-font-body); font-size: 11.5px; letter-spacing: .02em;
  text-decoration: underline; opacity: .85; padding: 0;
}
.bsg-footer__cookie:hover { opacity: 1; color: var(--bsg-gold-light); }
@media (max-width: 600px) {
  .bsg-cookie__inner { flex-direction: column; gap: 12px; text-align: center; }
  .bsg-cookie__actions { width: 100%; }
  .bsg-cookie__actions .bsg-btn { flex: 1; }
}
/* Highlight required inputs with a subtle left accent. */
.bsg-form input[required], .bsg-form textarea[required], .bsg-form select[required] { border-left: 3px solid var(--bsg-green); }
.bsg-form input, .bsg-form select, .bsg-form textarea {
  width: 100%;
  font-family: var(--bsg-font-body);
  font-size: 16px;
  color: var(--bsg-ink);
  background: var(--bsg-paper);
  border: 1px solid var(--bsg-gold);
  border-radius: 6px;
  padding: 12px 14px;
}
.bsg-form textarea { min-height: 140px; resize: vertical; }
.bsg-form .bsg-hp { position: absolute; left: -9999px; }
.bsg-form__msg { margin: 14px 0 0; font-weight: 700; }
.bsg-form__msg.is-ok { color: var(--bsg-green-accent); }
.bsg-form__msg.is-err { color: #a33; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.bsg-footer {
  background: var(--bsg-green-dark);
  color: #cdd6c8;
  padding: 30px 28px;
}
.bsg-footer__widgets {
  max-width: var(--bsg-container);
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}
.bsg-footer__widgets a { color: var(--bsg-gold-light); }
.bsg-footer__widgets a:hover { color: var(--bsg-cream); }
.bsg-footer__widgets h2, .bsg-footer__widgets .widget-title { color: var(--bsg-gold-light); font-size: 18px; margin: 0 0 12px; }
.bsg-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  text-align: center;
  border-top: 1px solid rgba(242,235,215,.1);
  padding-top: 18px;
}
.bsg-footer__tag { font-family: var(--bsg-font-head); font-style: italic; font-weight: 600; font-size: 15px; color: var(--bsg-gold-light); }
.bsg-footer__dot { color: rgba(242,235,215,.28); font-size: 13px; }
.bsg-footer__copy { font-size: 12.5px; letter-spacing: .02em; color: #9aa890; }
.bsg-social { display: flex; gap: 14px; justify-content: center; }
.bsg-social a { color: var(--bsg-gold-light); }
.bsg-social a:hover { color: var(--bsg-cream); }

/* =========================================================================
   FLOATING BOOK NOW + BOOKING MODAL
   ========================================================================= */
.bsg-book-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 120;
  background: var(--bsg-green);
  color: #fff;
  font-family: var(--bsg-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 14px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.bsg-book-fab:hover { background: var(--bsg-green-hover); color: #fff; }

.bsg-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  overflow-y: auto;
}
.bsg-modal[hidden] { display: none; }
/* overflow visible so the floating close circle (offset outside the corner) is
   never clipped; inner content is short and stays within the rounded panel. */
.bsg-modal__panel { position: relative; background: #fff; width: 100%; max-width: 420px; border-radius: 14px; overflow: visible; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
/* Snug around the DinePlan booking widget — not a huge empty box. */
.bsg-modal__panel--wide { max-width: 640px; height: auto; display: block; overflow: visible; }
/* A hidden panel must always collapse, even against the display rules above. */
.bsg-modal__panel[hidden] { display: none !important; }
.bsg-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--bsg-green);
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  z-index: 10;
  transition: transform .15s, color .15s;
}
.bsg-modal__close:hover { color: var(--bsg-gold); transform: scale(1.08); }
.bsg-modal__head { padding: 20px; text-align: center; border-bottom: 1px solid #eee; }
.bsg-modal__head h3 { margin: 0; font-weight: 700; font-size: 20px; color: var(--bsg-green); }
.bsg-modal__sub { font-size: 13px; color: #666; margin-top: 6px; }
.bsg-modal__choice {
  display: block;
  width: calc(100% - 32px);
  margin: 12px auto;
  padding: 14px;
  background: var(--bsg-green);
  color: #fff;
  text-align: center;
  border-radius: 10px;
  font-family: var(--bsg-font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.bsg-modal__choice:last-child { margin-bottom: 16px; }
.bsg-modal__choice:hover { background: var(--bsg-green-hover); color: #fff; }
.bsg-modal__iframe { width: 100%; height: min(700px, 85vh); border: 0; display: block; background: #fff; border-radius: 14px; }

/* =========================================================================
   BLOG / JOURNAL
   ========================================================================= */
.bsg-journal { max-width: 1080px; margin: 0 auto; padding: 64px 24px 80px; }
.bsg-journal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.bsg-post-card { background: var(--bsg-paper); border: 1px solid var(--bsg-gold); overflow: hidden; min-width: 0; }
.bsg-post-card__thumb { display: block; aspect-ratio: 16 / 9; background: var(--bsg-green-deep); overflow: hidden; }
.bsg-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bsg-post-card__body { padding: 22px 24px 26px; }
.bsg-post-card__meta { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--bsg-gold); margin: 0 0 8px; }
.bsg-post-card__title { font-size: 22px; margin: 0 0 10px; }
.bsg-post-card__excerpt { font-size: 16px; line-height: 1.7; margin: 0 0 14px; }

.bsg-single { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; }
.bsg-single__title { font-size: clamp(30px, 4vw, 46px); margin: 0 0 12px; }
.bsg-single__meta { font-size: 14px; color: var(--bsg-gold); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 30px; }
.bsg-single__content p { font-size: 17px; line-height: 1.85; margin: 0 0 22px; }
.bsg-single__hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 30px; }

.bsg-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 50px; flex-wrap: wrap; }
.bsg-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--bsg-gold);
  color: var(--bsg-green);
  background: var(--bsg-paper);
}
.bsg-pagination .page-numbers.current { background: var(--bsg-green); color: var(--bsg-cream); border-color: var(--bsg-green); }

/* Comments */
.bsg-comments { max-width: 760px; margin: 0 auto; padding: 0 24px 60px; }
.bsg-comments h2 { font-size: 24px; margin: 0 0 20px; }
.bsg-comments ol { list-style: none; padding: 0; margin: 0; }
.bsg-comments .comment-body { background: var(--bsg-paper); border: 1px solid var(--bsg-gold); padding: 18px 20px; margin: 0 0 16px; }

/* 404 / search */
.bsg-utility { max-width: 760px; margin: 0 auto; padding: 90px 24px; text-align: center; }
.bsg-utility h1 { font-size: clamp(40px, 7vw, 90px); margin: 0 0 10px; }

/* =========================================================================
   MOBILE
   ========================================================================= */
.bsg-mobile-menu { display: none; }

@media (max-width: 960px) {
  /* Header height/padding/logo now come from responsive CSS vars — just swap nav for the burger. */
  .bsg-nav { display: none; }
  .bsg-burger { display: inline-flex; }

  /* slide-in mobile nav */
  .bsg-mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .bsg-mobile-menu.is-open { opacity: 1; pointer-events: auto; }
  .bsg-mobile-menu__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(82vw, 340px);
    background: var(--bsg-green);
    transform: translateX(100%);
    transition: transform .28s ease;
    padding: 80px 26px 30px;
    overflow-y: auto;
  }
  .bsg-mobile-menu.is-open .bsg-mobile-menu__panel { transform: translateX(0); }
  .bsg-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
  .bsg-mobile-menu a { display: block; padding: 13px 0; color: var(--bsg-cream); font-family: var(--bsg-font-body); font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid rgba(242,235,215,.12); }
  .bsg-mobile-menu a:hover { color: var(--bsg-gold-light); }
  .bsg-mobile-menu__close { position: absolute; top: 18px; right: 18px; background: transparent; border: 0; color: var(--bsg-cream); font-size: 28px; cursor: pointer; }

  .bsg-cuts__panel { grid-template-columns: 1fr; }
  .bsg-seafood { grid-template-columns: 1fr; }
  .bsg-wine-intro { grid-template-columns: 1fr; gap: 24px; }
  .bsg-wine-cols { grid-template-columns: 1fr; gap: 0; }
  .bsg-contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .bsg-me-grid { grid-template-columns: 1fr; }
  .bsg-pair { grid-template-columns: 1fr; }
  .bsg-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bsg-section { padding: 50px 20px 60px; }
  /* Banner heights are responsive via --bsg-banner-h clamp() — no fixed override needed. */
}

@media (max-width: 560px) {
  .bsg-journal__grid { grid-template-columns: 1fr; }
  .bsg-flip-wrap { min-height: 360px; }
}

/* ---- Mobile polish for the wine & menu pages ---- */
@media (max-width: 760px) {
  /* Wine: image not sticky, sits neatly above the (single-column) list. */
  .bsg-wine-aside { position: static; margin-top: 6px; }
  .bsg-wine-cta { max-width: 100%; }
  .bsg-wine-lead p { font-size: 18px; }
  .bsg-wine-list { padding: 16px 18px 70px; }
  .bsg-wine-cols { max-width: 460px; margin: 0 auto; }
  .bsg-wine-cat { font-size: 21px; }

  /* Filter bar: swipeable single row of pills, saves vertical space. */
  .bsg-filter { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 12px; margin-bottom: 24px; }
  .bsg-filter__label { text-align: center; margin: 0; }
  .bsg-filter__pills {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .bsg-filter__pills::-webkit-scrollbar { display: none; }
  .bsg-filter__pill { flex: 0 0 auto; }

  /* Menu: single column, tighter section boxes and headings. */
  .bsg-menu-section { margin-bottom: 22px; }
  .bsg-menu-section--feature { padding: 20px 16px 6px; }
  .bsg-fullmenu h3, .bsg-prose h3.bsg-menu-cat { font-size: 19px; }
  .bsg-menu-item__name { font-size: 18px; }
  .bsg-menu-item__desc { font-size: 15px; }

  /* Jump-to-section toggle: a touch smaller so it clears the Book Now pill. */
  .bsg-jumpnav { right: 12px; bottom: 12px; }
  .bsg-jumpnav__toggle { padding: 11px 16px; font-size: 13px; }
}

/* ===========================================================================
   WordPress core helper classes (alignment, captions, galleries, a11y, sticky).
   Required for the block/classic editor and standard WP markup to render right.
   =========================================================================== */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignnone { margin: 0 0 1em 0; }

.wp-caption { max-width: 100%; margin-bottom: 1.5em; }
.wp-caption img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.wp-caption-text,
.gallery-caption { font-size: 0.85em; font-style: italic; color: var(--bsg-muted); text-align: center; padding: 0.5em 0; }

.sticky { display: block; }
.bypostauthor { display: block; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--bsg-cream);
  clip: auto !important;
  clip-path: none;
  color: var(--bsg-green-dark);
  display: block;
  font-size: 0.9em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 12px 20px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ===========================================================================
   Store (restaurant) landing pages — /restaurants/<city>/
   =========================================================================== */
.bsg-store__place { font-family: var(--bsg-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--bsg-gold); font-size: 15px; }
/* City location pages: full-width readable article, then a Visit-us band. */
.bsg-store__article { max-width: 820px; margin: 0 auto; }
.bsg-store__visit {
  display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: stretch;
  max-width: 1100px; margin: 54px auto 0;
}
.bsg-store__aside { background: var(--bsg-paper); border: 1px solid var(--bsg-gold); border-radius: 12px; padding: 26px 28px; }
.bsg-store__aside-title { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.bsg-openstate { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bsg-font-head); font-weight: 700; font-size: 14px; margin: 0 0 18px; padding: 5px 12px; border-radius: 999px; }
.bsg-openstate__dot { width: 9px; height: 9px; border-radius: 50%; }
.bsg-openstate.is-open { background: rgba(29,77,41,.12); color: var(--bsg-green); }
.bsg-openstate.is-open .bsg-openstate__dot { background: #2f9e44; box-shadow: 0 0 0 3px rgba(47,158,68,.25); }
.bsg-openstate.is-closed { background: rgba(178,59,46,.10); color: #b23b2e; }
.bsg-openstate.is-closed .bsg-openstate__dot { background: #b23b2e; }
.bsg-store__aside .bsg-btn { margin-top: 20px; }
.bsg-store__nap { list-style: none; margin: 0; padding: 0; }
.bsg-store__nap li { margin: 0 0 16px; }
.bsg-store__nap li:last-child { margin-bottom: 0; }
.bsg-store__nap strong { display: block; font-family: var(--bsg-font-head); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--bsg-green); margin-bottom: 4px; }
.bsg-store__nap span { font-size: 16px; }
.bsg-store__nap a { color: var(--bsg-ink); text-decoration: none; }
.bsg-store__nap a:hover { color: var(--bsg-gold); }
.bsg-store__capacity { font-style: italic; color: var(--bsg-muted); }
.bsg-store__amenities { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(177,138,62,.3); display: flex; flex-wrap: wrap; gap: 8px; }
.bsg-store__amenities li {
  font-family: var(--bsg-font-head); font-weight: 700; font-size: 12.5px; color: var(--bsg-green);
  background: rgba(29,77,41,.08); border: 1px solid rgba(29,77,41,.2);
  border-radius: 999px; padding: 5px 12px;
}
/* Map fills the full row height so its bottom aligns with the Visit-us card;
   the directions link overflows just below (absolute, doesn't shrink the map). */
.bsg-store__map { margin: 0; position: relative; }
.bsg-store__map .bsg-map { width: 100%; height: 100%; min-height: 360px; border: 0; border-radius: 12px; display: block; }
.bsg-store__directions { position: absolute; top: 100%; right: 0; margin: 8px 0 0; text-align: right; }
@media (max-width: 860px) {
  .bsg-store__visit { grid-template-columns: 1fr; align-items: start; gap: 24px; margin-bottom: 0; }
  .bsg-store__map .bsg-map { min-height: 300px; }
  .bsg-store__directions { position: static; text-align: center; }
}

/* Contact form POPIA consent checkbox */
.bsg-field--consent label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--bsg-ink); font-family: var(--bsg-font-body); font-size: 14px; line-height: 1.5; cursor: pointer; }
.bsg-field--consent input[type="checkbox"] { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.bsg-field--consent span { flex: 1 1 auto; }
.bsg-field--consent a { color: var(--bsg-green); text-decoration: underline; }

/* Breadcrumbs */
.bsg-breadcrumbs { max-width: 1100px; margin: 18px auto 0; padding: 0 20px; font-family: var(--bsg-font-head); font-size: 13px; letter-spacing: .04em; }
.bsg-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bsg-breadcrumbs li { color: var(--bsg-muted); }
.bsg-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 8px; color: var(--bsg-gold); }
.bsg-breadcrumbs a { color: var(--bsg-green); text-decoration: none; }
.bsg-breadcrumbs a:hover { color: var(--bsg-gold); }
.bsg-breadcrumbs [aria-current="page"] { color: var(--bsg-ink); }

/* FAQ accordion */
.bsg-faq { max-width: 820px; margin: 0 auto; }
.bsg-faq__item { border-bottom: 1px solid var(--bsg-gold); }
.bsg-faq__item > summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-family: var(--bsg-font-head); font-weight: 700; font-size: 18px; color: var(--bsg-green); }
.bsg-faq__item > summary::-webkit-details-marker { display: none; }
.bsg-faq__item > summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 24px; color: var(--bsg-gold); transition: transform .2s; }
.bsg-faq__item[open] > summary::after { content: "–"; }
.bsg-faq__a { padding: 0 0 20px; color: var(--bsg-ink); line-height: 1.7; }

/* Store highlights + directions */
.bsg-store__highlights { max-width: 1100px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.bsg-store__highlight { text-align: center; padding: 0 6px; }
.bsg-store__highlight h2 { font-family: var(--bsg-font-head); font-size: 19px; color: var(--bsg-green); margin: 0 0 8px; }
.bsg-store__highlight p { font-size: 14px; line-height: 1.6; color: var(--bsg-ink-soft); margin: 0; }
.bsg-store__directions { text-align: right; max-width: 1100px; margin: 10px auto 0; }
.bsg-store__directions a { font-family: var(--bsg-font-head); font-weight: 700; color: var(--bsg-green); }
.bsg-store__directions a:hover { color: var(--bsg-gold); }
@media (max-width: 860px) {
  .bsg-store__highlights { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* Homepage CTA rows + ghost button */
.bsg-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0; }
.bsg-cta-groups { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 26px 0; }
.bsg-cta-group { flex: 1 1 260px; }
.bsg-cta-group .bsg-cta-row { margin: 8px 0 0; }
.bsg-cta-label {
  font-family: var(--bsg-font-head); text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; font-weight: 700;
  color: var(--bsg-gold); margin: 0; padding-bottom: 4px;
  border-bottom: 1px solid rgba(177, 138, 62, .35);
}
/* Inside grouped CTAs, keep every button one consistent green-outline style. */
.bsg-cta-groups .bsg-btn { background: transparent; color: var(--bsg-green); border: 1.5px solid var(--bsg-green); }
.bsg-cta-groups .bsg-btn:hover { background: var(--bsg-green); color: var(--bsg-cream); }
.bsg-btn--ghost { background: transparent; color: var(--bsg-green); border: 1.5px solid var(--bsg-green); }
.bsg-btn--ghost:hover { background: var(--bsg-green); color: var(--bsg-cream); }
.bsg-cta-row--center { justify-content: center; }
/* Book buttons carry a calendar icon (masked SVG, inherits the text colour). */
.bsg-btn--book::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Homepage prose rhythm for the richer content under the hero */
.bsg-prose h2 { font-size: clamp(26px, 3vw, 34px); margin: 44px 0 16px; }

/* ---- Awards / recognition band ---- */
.bsg-accolade {
  background: var(--bsg-green-deep); color: var(--bsg-cream);
  text-align: center; padding: 26px 24px; border-bottom: 2px solid var(--bsg-gold);
}
.bsg-accolade__inner {
  display: flex; align-items: center; justify-content: center; gap: 22px 28px;
  flex-wrap: wrap; max-width: 900px; margin: 0 auto;
}
.bsg-accolade__badge { width: 108px; height: auto; border-radius: 10px; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.bsg-accolade__text { text-align: center; }
.bsg-accolade__kicker {
  font-family: var(--bsg-font-head); text-transform: uppercase; letter-spacing: .22em;
  font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; color: var(--bsg-gold-light);
  margin: 0 0 8px;
}
.bsg-accolade__years {
  font-family: var(--bsg-font-head); font-style: italic; font-weight: 600;
  font-size: clamp(30px, 5vw, 52px); line-height: 1.05; color: #fff; margin: 0;
}
.bsg-accolade__years .bsg-dot { color: var(--bsg-gold); font-style: normal; padding: 0 .12em; }
.bsg-accolade__sub {
  font-family: var(--bsg-font-body); font-size: clamp(14px, 1.6vw, 16px);
  color: var(--bsg-cream); opacity: .92; margin: 10px 0 0;
}
.bsg-accolade__sub strong { color: var(--bsg-gold-light); font-weight: 700; }

/* Inline award years line (used inside prose on the city pages). */
.bsg-prose .bsg-years {
  font-family: var(--bsg-font-head); font-style: italic; font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px); color: var(--bsg-green); margin: 0 0 10px;
}
.bsg-prose .bsg-years .bsg-dot { color: var(--bsg-gold); font-style: normal; padding: 0 .1em; }

/* ---- Related links strip (About etc.): consistent, non-button navigation ---- */
.bsg-related {
  max-width: 900px; margin: 40px auto 0; padding: 26px 28px;
  border: 1px solid var(--bsg-gold); border-radius: 14px; background: rgba(255,255,255,.4);
}
.bsg-related__title {
  font-family: var(--bsg-font-head); text-transform: uppercase; letter-spacing: .12em;
  font-size: 13px; font-weight: 700; color: var(--bsg-gold); text-align: center; margin: 0 0 16px;
}
.bsg-related__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bsg-prose .bsg-related__links a,
.bsg-related__links a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
  border: 1.5px solid var(--bsg-green); border-radius: var(--bsg-radius-pill);
  color: var(--bsg-green); font-family: var(--bsg-font-head); font-weight: 700; font-size: 15px;
  text-decoration: none;
}
.bsg-prose .bsg-related__links a:hover,
.bsg-prose .bsg-related__links a:focus,
.bsg-related__links a:hover,
.bsg-related__links a:focus { background: var(--bsg-green); color: var(--bsg-cream); text-decoration: none; }
.bsg-related__links + .bsg-related__links { margin-top: 14px; }
.bsg-related__break { flex-basis: 100%; height: 0; }
.bsg-related__sep { width: 100%; text-align: center; font-family: var(--bsg-font-head); font-style: italic; color: var(--bsg-muted); font-size: 13px; margin: 4px 0 2px; }

/* ---- Home city cards ---- */
.bsg-citycards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 40px auto; }
.bsg-citycard {
  border: 1px solid var(--bsg-gold); border-radius: 16px; background: rgba(255,255,255,.5);
  padding: 30px 26px; text-align: center; display: flex; flex-direction: column;
}
.bsg-citycard h3 { font-size: 27px; font-weight: 800; margin: 0 0 4px; }
.bsg-citycard__sub { font-family: var(--bsg-font-head); font-style: italic; color: var(--bsg-gold); font-size: 16px; margin: 0 0 14px; }
.bsg-citycard p { font-size: 16.5px; line-height: 1.7; color: var(--bsg-ink-soft); margin: 0 0 22px; }
.bsg-citycard__actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.bsg-citycard { transition: transform .2s ease, box-shadow .2s ease; }
.bsg-citycard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
/* City-card pair flies in from opposite sides on scroll. */
.bsg-citycards .bsg-citycard.bsg-reveal { transform: translateX(-44px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.bsg-citycards .bsg-citycard.bsg-reveal:last-child { transform: translateX(44px); }
.bsg-citycards .bsg-citycard.bsg-reveal.is-visible { transform: none; }
.bsg-citycards .bsg-citycard:hover { transform: translateY(-3px); }

/* ---- Motion & polish ---- */
.bsg-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.bsg-reveal.is-visible { opacity: 1; transform: none; }
.bsg-btn { transition: background-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease; }
.bsg-btn:hover { transform: translateY(-1px); }
.bsg-related__links a { transition: background-color .15s ease, color .15s ease, transform .12s ease; }
.bsg-related__links a:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .bsg-reveal { opacity: 1; transform: none; transition: none; }
  .bsg-btn:hover, .bsg-citycard:hover, .bsg-related__links a:hover { transform: none; }
}

/* ---- Contact form card ---- */
.bsg-form-card {
  max-width: 720px; margin: 0 auto; padding: 34px 34px 38px;
  border: 1px solid var(--bsg-gold); border-radius: 16px; background: rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.06); text-align: left;
}
.bsg-form-card h3 { text-align: center; }

/* ---- Footer quick links ---- */
.bsg-footer__links { max-width: var(--bsg-container); margin: 0 auto; padding: 40px var(--bsg-gutter) 8px; }
.bsg-footer__links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 32px; }
.bsg-footer__links h4 {
  font-family: var(--bsg-font-head); text-transform: uppercase; letter-spacing: .1em;
  font-size: 15px; color: var(--bsg-gold-light); margin: 0 0 14px;
}
.bsg-footer__links ul { list-style: none; margin: 0; padding: 0; }
.bsg-footer__links li { margin: 0 0 10px; }
.bsg-footer__links a { color: var(--bsg-cream); font-size: 16px; opacity: .9; }
.bsg-footer__links a:hover { color: var(--bsg-gold-light); opacity: 1; }
@media (max-width: 860px) {
  .bsg-citycards { grid-template-columns: 1fr; max-width: 440px; }
  .bsg-footer__links-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .bsg-footer__links-grid { grid-template-columns: 1fr; }
}
.bsg-prose h1 { font-size: clamp(28px, 3.6vw, 40px); color: var(--bsg-green); margin: 0 0 24px; line-height: 1.22; max-width: 900px; margin-left: auto; margin-right: auto; }

/* Jump-to-section: brief light highlight so the reader spots where they landed. */
.bsg-flash { animation: bsg-flash 1.9s ease-out; border-radius: 12px; }
@keyframes bsg-flash {
  0%, 22% { background: #ffffff; box-shadow: 0 0 0 10px #ffffff, 0 0 0 11px var(--bsg-gold); }
  100% { background: transparent; box-shadow: 0 0 0 10px transparent, 0 0 0 11px transparent; }
}
@media (prefers-reduced-motion: reduce) { .bsg-flash { animation: none; } }

/* HTML menu (branch menu pages) — two balanced columns that pack tightly with
   no gaps. Each section stays whole; the course dividers span both columns. */
.bsg-fullmenu { columns: 2; column-gap: 56px; }
.bsg-fullmenu > h2,
.bsg-fullmenu > .bsg-menu-note { column-span: all; }
.bsg-menu-section { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 30px; }
/* Signature sections get a standout container for flair. */
.bsg-menu-section--feature {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(242,235,215,.4));
  border: 1px solid var(--bsg-gold); border-radius: 14px;
  padding: 40px 24px 8px; position: relative; box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* Badge sits inside the top edge (not overflowing above into the note). */
.bsg-menu-section--feature::before {
  content: "Signature"; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--bsg-green); color: var(--bsg-gold-light);
  font-family: var(--bsg-font-head); text-transform: uppercase; letter-spacing: .16em;
  font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.bsg-menu-section--feature h3 { border-bottom-color: var(--bsg-green); }
.bsg-menu-section--feature .bsg-menu-list li:last-child { border-bottom: 0; }
/* When a filter leaves just one section, centre it instead of pinning it left. */
.bsg-fullmenu.is-single { columns: 1; max-width: 680px; margin: 0 auto; }
@media (max-width: 680px) { .bsg-fullmenu { columns: 1; } }
.bsg-menu-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.bsg-menu-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px dotted var(--bsg-gold); }
.bsg-menu-item__name { font-family: var(--bsg-font-head); font-weight: 700; font-size: 19px; color: var(--bsg-green); }
.bsg-menu-item__price { font-family: var(--bsg-font-body); font-weight: 700; font-size: 17px; color: var(--bsg-ink); white-space: nowrap; }
.bsg-menu-item__desc { grid-column: 1 / -1; font-size: 15.5px; color: var(--bsg-ink-soft); line-height: 1.55; }
/* Section headings — match the wine list: centered, larger, gold underline. */
.bsg-fullmenu h3, .bsg-prose h3.bsg-menu-cat {
  font-family: var(--bsg-font-head); font-weight: 700; letter-spacing: .04em;
  font-size: 21px; color: var(--bsg-green); text-align: center;
  margin: 6px 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--bsg-gold);
}
.bsg-fullmenu .bsg-menu-list { max-width: none; }
/* Course dividers inside the full menu (Food menu / Drinks) */
.bsg-fullmenu > h2 {
  font-family: var(--bsg-font-head); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px); color: var(--bsg-green);
  text-align: center; margin: 50px 0 26px; letter-spacing: .01em;
}
.bsg-fullmenu > h2::after { content: ""; display: block; width: 72px; height: 3px; background: var(--bsg-gold); margin: 16px auto 0; }
.bsg-fullmenu > h2:first-of-type { margin-top: 12px; }
.bsg-menu-note { font-size: 13px; font-style: italic; color: var(--bsg-muted); text-align: center; }
.bsg-fullmenu > .bsg-menu-note:last-child { margin-top: 44px; font-style: normal; }

/* Cross-pairing hint line (wine on the menu / food on the wine list). */
.bsg-pairing {
  display: block; text-align: center; font-size: 13.5px; line-height: 1.4;
  color: var(--bsg-green-accent); margin: -6px 0 16px;
  padding: 8px 12px; background: rgba(177,138,62,.10);
  border: 1px solid rgba(177,138,62,.28); border-radius: 8px;
}
.bsg-pairing strong { color: var(--bsg-green); font-weight: 700; }
.bsg-pairing__v { font-style: italic; color: var(--bsg-muted); }
.bsg-wine-section .bsg-pairing { margin-top: 4px; }

/* Filter bar (food menu + wine list) */
.bsg-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  justify-content: center; max-width: 1000px; margin: 0 auto 34px; padding: 18px 22px;
  border: 1px solid var(--bsg-gold); border-radius: 14px; background: rgba(255,255,255,.45);
}
.bsg-filter__label {
  font-family: var(--bsg-font-head); text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; font-weight: 700; color: var(--bsg-gold); margin-right: 4px;
}
.bsg-filter__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.bsg-filter__pill {
  padding: 8px 15px; font-family: var(--bsg-font-head); font-weight: 700; font-size: 14px;
  color: var(--bsg-green); background: #fff; border: 1.5px solid var(--bsg-green);
  border-radius: var(--bsg-radius-pill); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.bsg-filter__pill:hover { transform: translateY(-1px); }
.bsg-filter__pill.is-active { background: var(--bsg-green); color: var(--bsg-cream); border-color: var(--bsg-green); }
.bsg-menu-section.is-filtered, .bsg-wine-section.is-filtered { display: none; }

/* Menu section jump navigation (floating button + sheet) */
.bsg-fullmenu h3[id] { scroll-margin-top: 96px; }
.bsg-jumpnav { position: fixed; right: 20px; bottom: 20px; z-index: 900; }
.bsg-jumpnav__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bsg-green); color: var(--bsg-cream);
  border: 1px solid var(--bsg-gold); border-radius: 999px;
  padding: 12px 20px; font-family: var(--bsg-font-head); font-weight: 700;
  font-size: 14px; letter-spacing: .03em; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.bsg-jumpnav__toggle:hover { background: var(--bsg-green-hover); color: var(--bsg-cream); }
.bsg-jumpnav__toggle svg { width: 16px; height: 16px; }
.bsg-jumpnav__panel { position: fixed; inset: 0; z-index: 950; display: none; background: rgba(20, 30, 20, .55); }
.bsg-jumpnav__panel.is-open { display: block; }
.bsg-jumpnav__sheet {
  position: absolute; right: 0; bottom: 0; left: 0;
  max-height: 74vh; overflow-y: auto;
  background: var(--bsg-paper); border-top: 3px solid var(--bsg-gold);
  border-radius: 16px 16px 0 0; padding: 18px 20px 28px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .3);
}
.bsg-jumpnav__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; position: sticky; top: 0; background: var(--bsg-paper); padding-bottom: 8px; }
.bsg-jumpnav__title { font-family: var(--bsg-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--bsg-green); }
.bsg-jumpnav__close { background: none; border: none; font-size: 28px; line-height: 1; color: var(--bsg-green); cursor: pointer; padding: 0 6px; }
.bsg-jumpnav__group {
  font-family: var(--bsg-font-head); text-transform: uppercase; letter-spacing: .2em;
  font-size: 12px; font-weight: 700; color: var(--bsg-gold);
  text-align: center; margin: 26px 0 12px; padding: 0 0 12px;
  border-bottom: 2px solid var(--bsg-gold);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.bsg-jumpnav__group::before,
.bsg-jumpnav__group::after { content: ""; flex: 1; height: 1px; background: rgba(177,138,62,.35); }
.bsg-jumpnav__group:first-child { margin-top: 6px; }
.bsg-jumpnav__links { display: flex; flex-direction: column; gap: 2px; }
.bsg-jumpnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; font-size: 15px; line-height: 1.3;
  background: transparent; border: 0; border-bottom: 1px solid rgba(177,138,62,.22);
  color: var(--bsg-green); font-weight: 700; cursor: pointer; text-align: left;
}
.bsg-jumpnav__link svg { width: 16px; height: 16px; color: var(--bsg-gold); flex: none; }
.bsg-jumpnav__link:hover { background: var(--bsg-cream); color: var(--bsg-green); }
.bsg-jumpnav__link:hover svg { color: var(--bsg-green); }
@media (min-width: 720px) {
  .bsg-jumpnav__sheet {
    right: 20px; left: auto; bottom: 76px; width: 400px;
    max-height: 66vh; border-radius: 14px; border: 1px solid var(--bsg-gold);
  }
}