/*
Theme Name: Broken G WP Style
Theme URI: https://area-51.undeadtanktech.com/broken-g/
Author: UndeadTankTech
Description: Broken G BBQ WordPress theme rebuilt from the provided static assets. Reads manifest.json and mirrors index.html, about.html, and gallery.html.
Version: 2.0.5
Text Domain: broken-g-wp-style
*/

:root {
  --bg: #050505;
  --bg-soft: #0b0907;
  --panel: rgba(8, 8, 8, 0.94);
  --panel-strong: rgba(5, 5, 5, 0.98);
  --text: #f4eee5;
  --muted: #c8bbaa;
  --accent: #d86f0c;
  --accent-bright: #ff9d2e;
  --accent-deep: #7b3200;
  --line: rgba(217, 103, 12, 0.72);
  --line-soft: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #050505; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(205, 89, 8, .16), transparent 34%),
    linear-gradient(180deg, #080706 0%, #050505 35%, #030303 100%);
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"),
    radial-gradient(circle at 8% 12%, rgba(255, 91, 0, .18), transparent 16%),
    radial-gradient(circle at 92% 9%, rgba(255, 91, 0, .12), transparent 16%);
  opacity: .58;
  mix-blend-mode: screen;
}
body::after {
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.68) 100%);
  opacity: .75;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: none; margin-inline: 0; }
.site-shell { position: relative; z-index: 1; padding: 0 0 28px; }

.panel,
.menu-card,
.topbar {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(11, 11, 10, .95), rgba(4, 4, 4, .98)),
    radial-gradient(circle at top right, rgba(217, 100, 15, .10), transparent 32%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.panel::after,
.menu-card::after,
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%);
  opacity: .45;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  min-height: 116px;
  padding: 18px clamp(24px, 5vw, 72px);
  background: rgba(3, 4, 4, .94);
  border-width: 0 0 1px;
  backdrop-filter: blur(10px);
}
.brand img {
  width: clamp(220px, 17.2vw, 286px);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.52));
}
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.2vw, 48px);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(1.02rem, 1.05vw, 1.45rem);
}
.nav a { position: relative; padding: 15px 0 13px; color: #f4eee6; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.nav a:hover::after,
.nav a.active::after { transform: scaleX(1); }
.top-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  min-width: 226px;
  padding: 0 24px;
  border: 1px solid rgba(255, 172, 87, .74);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(224, 111, 20, .98), rgba(148, 57, 0, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 14px 32px rgba(94,31,0,.45);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(1rem, 1vw, 1.35rem);
  overflow: hidden;
}
.top-cta img { width: 28px; height: 28px; object-fit: contain; }
.top-cta::before,
.image-button::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.33) 43%, transparent 58%);
  transform: translateX(-90%) rotate(10deg);
  transition: transform .28s ease;
}
.top-cta:hover::before,
.image-button:hover::before { transform: translateX(84%) rotate(10deg); }
.top-cta:hover,
.image-button:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.08); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px, 44vw) 1fr;
  min-height: clamp(560px, 54vw, 790px);
  border-bottom: 1px solid rgba(217, 103, 12, .45);
  background:
    linear-gradient(90deg, rgba(4,4,4,.98) 0%, rgba(4,4,4,.88) 34%, rgba(4,4,4,.28) 61%, rgba(4,4,4,.80) 100%),
    radial-gradient(circle at 44% 30%, rgba(255, 84, 0, .18), transparent 26%),
    #030303;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 0 45%, rgba(0,0,0,.45) 80%);
  pointer-events: none;
  z-index: 2;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(3, 3, 3, .48) 50%, rgba(3, 3, 3, .9) 100%),
    radial-gradient(circle at 30% 0%, rgba(216, 111, 12, .16), transparent 40%);
  pointer-events: none;
  z-index: 3;
}
.hero-copy {
  z-index: 4;
  align-self: center;
  padding: clamp(42px, 6vw, 86px) clamp(28px, 5vw, 82px);
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.hero-copy::after { display: none; }
.hero-copy::before {
  content: "";
  position: absolute;
  top: 7%;
  right: -18%;
  width: 50%;
  height: 86%;
  background: linear-gradient(90deg, transparent 0%, rgba(4, 4, 4, .84) 70%, rgba(4, 4, 4, .08) 100%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}
.eyebrow {
  margin: 0 0 24px;
  color: var(--accent-bright);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .08em;
  font-size: clamp(1.25rem, 1.65vw, 2.2rem);
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0,0,0,.85);
}
.eyebrow::before,
.eyebrow::after { content: "★"; color: var(--accent); margin-inline: .45rem; }
.hero-title {
  margin: 0;
  display: grid;
  gap: 5px;
  font-family: Rockwell, Georgia, serif;
  font-size: clamp(5rem, 8.6vw, 10.8rem);
  line-height: .82;
  text-transform: uppercase;
  letter-spacing: .012em;
  text-shadow: 0 11px 24px rgba(0,0,0,.82);
}
.hero-title span:first-child { color: #f3eee7; }
.hero-title .accent { color: var(--accent); }
.hero-text {
  max-width: 620px;
  margin: 30px 0 0;
  color: #f3e9dd;
  font-size: clamp(1.25rem, 1.58vw, 2.1rem);
  line-height: 1.28;
  text-shadow: 0 4px 16px #000;
}
.hero-actions,
.visit-actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 32px; }
.image-button { position: relative; display: block; width: clamp(200px, 15vw, 260px); filter: drop-shadow(0 14px 26px rgba(0,0,0,.52)); transition: transform .18s ease, filter .18s ease; overflow: hidden; }
.image-button img { width: 100%; height: auto; }
.image-button-small { width: clamp(180px, 13vw, 230px); }
.hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(70vw, 1380px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  z-index: 1;
  overflow: hidden;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,4,4,.9) 0%, transparent 28%, rgba(0,0,0,.34) 100%),
    radial-gradient(circle at 86% 20%, rgba(0,0,0,.54), transparent 24%);
  z-index: 2;
}
.hero-photo {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  border: 0;
  border-radius: 0;
  filter: contrast(1.07) saturate(1.1) brightness(.9);
}
.hero-badge {
  position: absolute;
  top: clamp(54px, 7vw, 114px);
  right: clamp(64px, 6vw, 130px);
  width: clamp(170px, 13.2vw, 238px);
  opacity: .78;
  mix-blend-mode: screen;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.76));
  z-index: 4;
}

.meta-strip {
  width: min(1780px, calc(100% - 110px));
  margin: -52px auto 32px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-radius: 9px;
  z-index: 8;
  background: rgba(5,5,5,.95);
  backdrop-filter: blur(10px);
}
.meta-item { position: relative; display: flex; align-items: center; gap: 16px; min-height: 102px; padding: 20px 24px; border-right: 1px solid var(--line); }
.meta-item:last-child { border-right: 0; }
.meta-icon { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.meta-copy { display: grid; gap: 4px; }
.meta-copy strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(1.05rem, 1.15vw, 1.55rem); letter-spacing: .05em; text-transform: uppercase; }
.meta-copy small { color: var(--muted); font-size: .9rem; line-height: 1.22; text-transform: uppercase; }

.section-art { width: min(960px, 100% - 48px); margin: 10px auto 8px; text-align: center; }
.section-art img { width: min(100%, 840px); margin-inline: auto; }
.menu-jump { display: none; }
.menu-grid {
  width: min(1840px, calc(100% - 46px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.menu-card {
  min-height: 360px;
  padding: 22px 20px 24px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(11, 12, 12, .96), rgba(3, 3, 3, .98)),
    radial-gradient(circle at top center, rgba(217, 105, 13, .13), transparent 36%);
}
.menu-card.compact { min-height: 230px; }
.menu-card.highlight-card { grid-row: span 2; min-height: 718px; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; padding: 24px 24px 22px; }
.card-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}
.card-title { display: flex; align-items: center; justify-content: flex-start; gap: 6px; color: var(--accent); width: 100%; min-width: 0; }
.title-flare { font-size: .82rem; color: var(--accent); opacity: .9; }
.card-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255, 157, 46, .34);
  background: linear-gradient(180deg, rgba(18, 15, 12, .95), rgba(9, 9, 9, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.22);
}
.card-icon-badge img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.card-icon-badge-lg {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  border-radius: 24px;
}
.card-icon-badge-lg img {
  width: 60px;
  height: 60px;
}
.menu-card h3 { margin: 0; min-width: 0; color: #f1ece5; font-family: Rockwell, Georgia, serif; font-size: clamp(1.34rem, 1.18vw, 1.95rem); line-height: 1.02; text-align: left; text-transform: uppercase; letter-spacing: .04em; word-break: normal; overflow-wrap: normal; }
.section-subtitle,
.pricing-inline { margin: 0 0 12px; color: var(--accent-bright); text-align: center; font-size: .96rem; line-height: 1.3; }
.pricing-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pricing-inline span { opacity: .75; }
.menu-list,
.item-notes,
.visit-info ul { margin: 0; padding: 0; list-style: none; }
.menu-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.menu-item:last-child { border-bottom: 0; }
.item-row { display: flex; align-items: baseline; gap: 8px; font-size: clamp(.96rem, .85vw, 1.12rem); }
.item-name { color: #f5ede2; font-weight: 500; }
.item-dots { flex: 1 1 auto; min-width: 18px; border-bottom: 2px dotted rgba(255,255,255,.32); transform: translateY(-3px); }
.item-price { font-weight: 700; white-space: nowrap; }
.item-notes { margin-top: 6px; color: var(--accent-bright); font-size: .91rem; line-height: 1.25; }
.item-notes li { margin-top: 3px; }
.item-notes li::before,
.menu-item.footnote::before,
.price-notes::before { content: "•"; margin-right: 6px; color: var(--accent); }
.footnote { color: var(--accent-bright); font-size: .92rem; }
.two-col-head,
.two-col-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 58px; gap: 10px; }
.two-col-head { margin-bottom: 8px; color: var(--accent-bright); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .96rem; letter-spacing: .06em; }
.two-col-row { align-items: start; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .98rem; }
.two-col-row:last-child { border-bottom: 0; }
.two-col-row .name { color: #f5ede2; }
.two-col-row .price { text-align: right; font-weight: 700; }
.price-notes { grid-column: 1 / -1; color: var(--accent-bright); font-size: .86rem; margin-top: 4px; }
.highlight-copy {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
}
.highlight-card h3 { color: var(--accent); font-size: clamp(2.2rem, 2.8vw, 4rem); text-align: center; max-width: 11.5rem; }
.serves { margin-top: 18px; color: var(--accent-bright); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(1.55rem, 1.8vw, 2.25rem); letter-spacing: .05em; text-transform: uppercase; }
.big-price { margin: 16px 0 12px; font-family: Rockwell, Georgia, serif; font-size: clamp(3.1rem, 4vw, 5rem); color: #f6f0e7; }
.highlight-card p { margin: 0 auto 10px; max-width: 15rem; font-size: 1.15rem; line-height: 1.35; }
.fine { color: var(--muted); }
.highlight-card .image-button { margin-inline: auto; margin-top: auto; }

.visit-section {
  width: 100%;
  margin-top: 28px;
  padding: 0 clamp(28px, 5vw, 72px) 34px;
  display: grid;
  grid-template-columns: minmax(290px, .75fr) minmax(280px, .65fr) minmax(460px, 1.5fr);
  gap: 28px;
  align-items: stretch;
  border-width: 1px 0 0;
  background: linear-gradient(180deg, rgba(5,5,5,.92), rgba(3,3,3,.98));
}
.visit-copy { padding-top: 30px; }
.visit-heading { width: min(100%, 420px); }
.visit-text { margin: 18px 0 0; max-width: 460px; color: #efe4d7; font-size: clamp(1.12rem, 1.25vw, 1.65rem); line-height: 1.34; }
.visit-info { display: flex; align-items: center; padding-top: 28px; }
.visit-info ul { display: grid; gap: 18px; width: 100%; }
.visit-info li { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.visit-info li:last-child { border-bottom: 0; padding-bottom: 0; }
.visit-icon { width: 30px; height: 30px; margin-top: 4px; object-fit: contain; flex: 0 0 auto; }
.visit-info strong { display: block; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(1.1rem, 1.18vw, 1.55rem); letter-spacing: .05em; }
.visit-info small { color: var(--muted); font-size: .95rem; }
.visit-photo-wrap { min-height: 270px; margin-top: 22px; }
.visit-photo { width: 100%; height: 100%; min-height: 270px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255, 179, 100, .22); }
.footer {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px clamp(24px, 5vw, 72px) 8px;
  color: var(--muted);
}
.footer-logo { width: clamp(190px, 16vw, 310px); }
.footer-note { margin: 0; text-align: center; font-size: 1rem; }
.socials { display: flex; flex-wrap: wrap; gap: 14px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 999px; border: 1px solid rgba(217, 115, 17, .62); background: rgba(8,8,8,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.social-link img { width: 36px; height: 36px; object-fit: contain; }
.social-link:hover { transform: translateY(-3px); border-color: rgba(255,172,92,.72); box-shadow: 0 0 18px rgba(217,115,17,.22); }

@media (max-width: 1280px) {
  .topbar { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 16px 22px; }
  .nav { gap: 24px; }
  .top-cta { min-height: 54px; }
  .hero { grid-template-columns: 1fr; min-height: 620px; }
  .hero-copy { max-width: 720px; }
  .hero-media { width: 100%; opacity: .78; }
  .meta-strip { width: calc(100% - 40px); grid-template-columns: repeat(3, 1fr); margin-top: -30px; }
  .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-card.highlight-card { grid-column: span 2; grid-row: span 1; min-height: 390px; }
  .visit-section { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .nav { gap: 16px; font-size: .95rem; }
  .hero-copy { padding: 42px 24px; }
  .hero-title { font-size: clamp(4.2rem, 17vw, 8rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .meta-strip { grid-template-columns: repeat(2, 1fr); }
  .meta-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .menu-grid { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .menu-card.highlight-card { grid-column: auto; min-height: auto; }
  .footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .topbar { position: relative; }
  .brand img { width: 220px; }
  .nav { width: 100%; justify-content: center; gap: 14px; font-size: .86rem; }
  .top-cta { min-width: 100%; }
  .hero { min-height: 620px; }
  .eyebrow { font-size: 1rem; }
  .hero-text { font-size: 1.08rem; }
  .meta-strip { grid-template-columns: 1fr; width: calc(100% - 24px); margin-top: 14px; }
  .meta-item:last-child { border-bottom: 0; }
  .visit-section { padding-inline: 16px; }
  .image-button, .image-button-small { width: 100%; max-width: 280px; }
}


/* User-requested polish pass: keep the hero logo readable, make menu text less cramped, and show full business hours. */
.hero {
  grid-template-columns: minmax(520px, 40vw) 1fr;
  min-height: clamp(620px, 51vw, 850px);
}
.hero-media {
  width: min(64vw, 1280px);
}
.hero-media::after {
  background:
    linear-gradient(90deg, rgba(4,4,4,.94) 0%, rgba(4,4,4,.2) 34%, rgba(0,0,0,.42) 100%),
    radial-gradient(circle at 84% 24%, rgba(0,0,0,.86), rgba(0,0,0,.42) 16%, transparent 32%);
}
.hero-photo {
  object-position: 58% center;
  filter: contrast(1.04) saturate(1.04) brightness(.82);
}
.hero-badge {
  top: clamp(60px, 8vw, 118px);
  right: clamp(74px, 6vw, 136px);
  width: clamp(148px, 11vw, 188px);
  opacity: .56;
  mix-blend-mode: screen;
  background: none;
  border-radius: 0;
  padding: 0;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.86)) drop-shadow(0 0 10px rgba(216,111,12,.12));
}

/* More legible menu panels. */
.menu-grid {
  width: min(1880px, calc(100% - 24px));
  gap: 16px;
}
.menu-card {
  padding: 24px 24px 28px;
  min-height: 386px;
}
.menu-card.compact { min-height: 250px; }
.menu-card h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: clamp(1.72rem, 1.55vw, 2.45rem);
  letter-spacing: .025em;
  text-shadow: 0 3px 0 rgba(0,0,0,.75);
}
.section-subtitle,
.pricing-inline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.98rem, .86vw, 1.08rem);
  font-weight: 700;
  line-height: 1.38;
}
.item-row,
.two-col-row {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.02rem, .92vw, 1.18rem);
  line-height: 1.32;
}
.item-name,
.two-col-row .name { font-weight: 700; }
.item-price,
.two-col-row .price { font-weight: 800; }
.item-notes,
.price-notes,
.footnote {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.92rem, .78vw, 1rem);
  line-height: 1.38;
  font-weight: 700;
}
.two-col-head {
  grid-template-columns: minmax(0, 1fr) 68px 68px;
}
.two-col-row {
  grid-template-columns: minmax(0, 1fr) 68px 68px;
}
.highlight-card h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
}

/* Full, readable business hours. */
.visit-section {
  grid-template-columns: minmax(330px, .68fr) minmax(380px, .78fr) minmax(520px, 1.35fr);
}
.visit-info ul { gap: 14px; }
.visit-info li { gap: 16px; padding-bottom: 14px; }
.visit-info li.hours-item { align-items: flex-start; }
.visit-info strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  letter-spacing: .01em;
  font-size: clamp(1.22rem, 1.15vw, 1.6rem);
}
.visit-info small {
  font-family: Arial, Helvetica, sans-serif;
  color: #eee1d3;
  font-size: clamp(.98rem, .9vw, 1.08rem);
  line-height: 1.34;
}
.hours-list {
  display: grid;
  gap: 3px;
  margin-top: 7px;
}
.hours-list span {
  display: block;
}

@media (min-width: 1600px) {
  .menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(330px, .95fr);
  }
  .menu-card.highlight-card { min-height: 742px; }
}

@media (max-width: 1280px) {
  .hero-media { width: 100%; }
  .hero-badge { right: clamp(28px, 5vw, 76px); width: clamp(132px, 18vw, 174px); }
  .visit-section { grid-template-columns: 1fr; }
}

/* Wide-menu/logo/social/button adjustments requested 2026-06-12. */
.topbar {
  grid-template-columns: minmax(260px, 390px) 1fr auto;
}
.brand img {
  width: clamp(280px, 21vw, 390px) !important;
}
.top-cta img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.35));
  opacity: .98;
}
.top-cta span {
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
}
.menu-grid.container,
.menu-grid {
  width: min(1840px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(300px, .9fr) !important;
  gap: 18px !important;
}
.menu-card {
  padding: 26px 26px 30px;
}
.card-header {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
}
.card-icon-badge {
  width: 74px;
  height: 74px;
  border-radius: 18px;
}
.card-icon-badge img {
  width: 46px;
  height: 46px;
}
.card-icon-badge-lg {
  width: 112px;
  height: 112px;
}
.card-icon-badge-lg img {
  width: 72px;
  height: 72px;
}
.footer {
  width: min(1840px, calc(100vw - 48px));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.socials {
  gap: 22px;
}
.social-link {
  width: 90px;
  height: 90px;
}
.social-link img {
  width: 48px;
  height: 48px;
}

@media (max-width: 1280px) {
  .topbar { grid-template-columns: 1fr; }
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 32px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .menu-card.highlight-card { grid-column: span 2; }
}

@media (max-width: 880px) {
  .brand img { width: min(78vw, 320px) !important; }
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 24px) !important;
    grid-template-columns: 1fr !important;
  }
  .menu-card.highlight-card { grid-column: auto; }
  .footer { width: calc(100vw - 28px); }
  .social-link { width: 76px; height: 76px; }
  .social-link img { width: 40px; height: 40px; }
}


/* 2026-06-12 revision: match menu/social layout closer to the provided reference. */
.socials {
  gap: 14px !important;
  align-items: center;
}
.social-link {
  width: 82px !important;
  height: 82px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.social-link img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain;
}
.social-link:hover {
  transform: translateY(-2px);
  border-color: transparent !important;
  box-shadow: none !important;
  filter: brightness(1.06);
}

.menu-grid.container,
.menu-grid {
  width: min(1680px, calc(100vw - 40px)) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, .9fr) !important;
  gap: 16px !important;
}
.menu-card {
  min-height: 322px !important;
  padding: 18px 18px 20px !important;
}
.menu-card.compact {
  min-height: 170px !important;
}
.menu-card.highlight-card {
  min-height: 510px !important;
  padding: 18px 20px 18px !important;
}
.card-header {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.card-icon-badge,
.card-icon-badge-lg {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.card-icon-badge img {
  width: auto !important;
  height: 58px !important;
  max-width: 88px !important;
  object-fit: contain;
}
.card-icon-badge-lg {
  margin: 0 auto 8px !important;
  justify-content: center;
}
.card-icon-badge-lg img {
  width: auto !important;
  height: 98px !important;
  max-width: 136px !important;
}
.menu-card h3 {
  font-size: clamp(1.08rem, 1.02vw, 1.62rem) !important;
  line-height: 1.06 !important;
  letter-spacing: .02em !important;
  text-wrap: balance;
}
.highlight-card h3 {
  font-size: clamp(1.95rem, 2.3vw, 3rem) !important;
  max-width: 10.5rem !important;
}
.highlight-copy { gap: 6px !important; }
.serves {
  margin-top: 8px !important;
  font-size: clamp(1.25rem, 1.4vw, 1.85rem) !important;
}
.big-price {
  font-size: clamp(2.5rem, 3.1vw, 3.8rem) !important;
  margin: 8px 0 8px !important;
}
.highlight-card p {
  font-size: 1rem !important;
}
.section-subtitle,
.pricing-inline {
  margin-bottom: 8px !important;
  font-size: clamp(.82rem, .78vw, .98rem) !important;
}
.item-row,
.two-col-row {
  font-size: clamp(.9rem, .82vw, 1.05rem) !important;
}
.item-notes,
.price-notes,
.footnote {
  font-size: clamp(.82rem, .72vw, .94rem) !important;
}
.two-col-head,
.two-col-row {
  grid-template-columns: minmax(0, 1fr) 56px 56px !important;
  gap: 8px !important;
}
@media (min-width: 1600px) {
  .menu-card.highlight-card { min-height: 560px !important; }
}
@media (max-width: 1280px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 32px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .menu-card.highlight-card { grid-column: span 2; min-height: 360px !important; }
}
@media (max-width: 880px) {
  .social-link {
    width: 72px !important;
    height: 72px !important;
  }
  .social-link img {
    width: 64px !important;
    height: 64px !important;
  }
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 24px) !important;
    grid-template-columns: 1fr !important;
  }
  .menu-card.highlight-card { grid-column: auto; min-height: auto !important; }
}

/* 2026-06-12 v3: wider menu cards, centered sides list, aligned headers, and Whole Smoke icon placement. */
.menu-grid.container,
.menu-grid {
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns:
    minmax(240px, 1.05fr)
    minmax(250px, 1.08fr)
    minmax(245px, 1fr)
    minmax(280px, 1.12fr)
    minmax(245px, .95fr) !important;
  gap: 14px !important;
}
.menu-card {
  padding: 20px 22px 22px !important;
}
.card-header {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 62px;
}
.card-title {
  align-items: center !important;
  min-height: 62px;
}
.card-title h3,
.menu-card h3 {
  display: block;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.card-icon-badge {
  align-items: center !important;
  justify-content: center !important;
}
.card-icon-badge img {
  height: 58px !important;
  max-width: 88px !important;
}

.menu-card[data-section="sides"] {
  text-align: center;
}
.menu-card[data-section="sides"] .menu-list {
  margin-top: 14px;
}
.menu-card[data-section="sides"] .item-row {
  justify-content: center;
  text-align: center;
}
.menu-card[data-section="sides"] .item-name {
  width: 100%;
  text-align: center;
}
.menu-card[data-section="sides"] .menu-item.footnote {
  text-align: center;
}
.menu-card[data-section="sides"] .item-notes {
  text-align: center;
}

.highlight-card .highlight-copy {
  align-content: start;
  justify-items: center;
}
.highlight-card .highlight-icon-under {
  margin: 12px auto 14px !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
}
.highlight-card .highlight-icon-under img {
  height: 92px !important;
  max-width: 140px !important;
}
.highlight-card h3 {
  margin-top: 16px !important;
}
.highlight-card .fine {
  margin-bottom: 0 !important;
}

@media (min-width: 1500px) {
  .menu-grid.container,
  .menu-grid {
    width: min(1760px, calc(100vw - 32px)) !important;
    grid-template-columns: repeat(4, minmax(270px, 1fr)) minmax(270px, .95fr) !important;
  }
}

@media (max-width: 1360px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 16px) !important;
    grid-template-columns:
      minmax(232px, 1.02fr)
      minmax(242px, 1.05fr)
      minmax(236px, 1fr)
      minmax(266px, 1.1fr)
      minmax(232px, .92fr) !important;
    gap: 12px !important;
  }
  .menu-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 1280px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 32px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .menu-card.highlight-card { grid-column: span 2; }
}

@media (max-width: 880px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 20px) !important;
    grid-template-columns: 1fr !important;
  }
  .menu-card.highlight-card { grid-column: auto; }
  .card-header,
  .card-title {
    min-height: 54px;
  }
}

/* 2026-06-12 v4: truly full-bleed menu grid and more breathing room. */
.section-art.container,
.section-art {
  width: min(980px, calc(100vw - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Break the menu grid out of any centered/max-width parent so it uses the page width. */
.menu-grid.container,
.menu-grid {
  box-sizing: border-box !important;
  width: calc(100vw - 28px) !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw + 14px) !important;
  margin-right: calc(50% - 50vw + 14px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(300px, 1.05fr)
    minmax(320px, 1.12fr)
    minmax(305px, 1fr)
    minmax(320px, 1.08fr)
    minmax(285px, .86fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.menu-card {
  min-width: 0 !important;
  padding: 20px 24px 24px !important;
}

/* Keep the icon and title on the same vertical centerline. */
.card-header {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 68px !important;
  margin-bottom: 12px !important;
}
.card-icon-badge {
  align-self: center !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}
.card-icon-badge img {
  display: block !important;
  height: 60px !important;
  width: auto !important;
  max-width: 92px !important;
}
.card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-height: 68px !important;
  line-height: 1 !important;
}
.card-title h3,
.menu-card h3 {
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  line-height: .98 !important;
}

/* Give names/prices more separation instead of letting columns crush together. */
.item-row {
  gap: 10px !important;
}
.item-dots {
  min-width: 36px !important;
}
.item-price {
  min-width: max-content !important;
  padding-left: 2px !important;
}
.two-col-head,
.two-col-row {
  grid-template-columns: minmax(125px, 1fr) minmax(62px, max-content) minmax(62px, max-content) !important;
  column-gap: 14px !important;
}
.two-col-row .price,
.two-col-head span:nth-child(2),
.two-col-head span:nth-child(3) {
  text-align: right !important;
  white-space: nowrap !important;
}

/* Sides card: centered list, centered rule lines, no left-biased item layout. */
.menu-card[data-section="sides"] {
  text-align: center !important;
}
.menu-card[data-section="sides"] .card-title {
  justify-content: flex-start !important;
}
.menu-card[data-section="sides"] .pricing-inline,
.menu-card[data-section="sides"] .menu-list,
.menu-card[data-section="sides"] .item-notes,
.menu-card[data-section="sides"] .menu-item.footnote {
  text-align: center !important;
}
.menu-card[data-section="sides"] .menu-list {
  display: grid !important;
  justify-items: center !important;
  margin-top: 16px !important;
}
.menu-card[data-section="sides"] .menu-item {
  width: 92% !important;
}
.menu-card[data-section="sides"] .item-row {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}
.menu-card[data-section="sides"] .item-name {
  width: auto !important;
  text-align: center !important;
}

/* Whole Smoke: icon stays below the final detail copy. */
.highlight-card .highlight-copy {
  justify-items: center !important;
  text-align: center !important;
}
.highlight-card .highlight-icon-under {
  order: 20 !important;
  margin-top: 16px !important;
  margin-bottom: 18px !important;
}
.highlight-card .highlight-icon-under img {
  height: 96px !important;
  max-width: 150px !important;
}

/* Large desktops: use almost the whole viewport. */
@media (min-width: 1700px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 32px) !important;
    margin-left: calc(50% - 50vw + 16px) !important;
    margin-right: calc(50% - 50vw + 16px) !important;
    grid-template-columns:
      minmax(330px, 1.05fr)
      minmax(350px, 1.12fr)
      minmax(330px, 1fr)
      minmax(350px, 1.08fr)
      minmax(305px, .86fr) !important;
    gap: 20px !important;
  }
}

/* Standard desktop: still five columns, but slightly tighter so it fits without crushing. */
@media (max-width: 1499px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 20px) !important;
    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
    grid-template-columns:
      minmax(230px, 1.05fr)
      minmax(246px, 1.1fr)
      minmax(238px, 1fr)
      minmax(250px, 1.08fr)
      minmax(232px, .92fr) !important;
    gap: 12px !important;
  }
  .menu-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .card-icon-badge img {
    height: 52px !important;
    max-width: 82px !important;
  }
  .card-header,
  .card-title {
    min-height: 58px !important;
  }
  .menu-card h3 {
    font-size: clamp(1.05rem, 1.08vw, 1.42rem) !important;
  }
  .two-col-head,
  .two-col-row {
    column-gap: 10px !important;
  }
}

/* Tablet and smaller: fewer columns so the text can breathe. */
@media (max-width: 1180px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 28px) !important;
    margin-left: calc(50% - 50vw + 14px) !important;
    margin-right: calc(50% - 50vw + 14px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .menu-card.highlight-card {
    grid-column: span 2 !important;
    min-height: 390px !important;
  }
}

@media (max-width: 720px) {
  .menu-grid.container,
  .menu-grid {
    width: calc(100vw - 20px) !important;
    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
    grid-template-columns: 1fr !important;
  }
  .menu-card.highlight-card {
    grid-column: auto !important;
  }
}

/* =========================================================
   Professional hero + menu redesign pass
   Keeps existing assets/content, but rebuilds the composition.
   ========================================================= */
:root {
  --professional-max: 1760px;
  --card-radius-pro: 14px;
  --hairline: rgba(255, 143, 45, .36);
  --hairline-soft: rgba(255, 255, 255, .095);
}

.site-shell {
  padding-bottom: 36px;
}

/* Header feels more like a website nav and less like a poster strip. */
.topbar.container {
  min-height: 88px !important;
  padding: 12px clamp(22px, 4vw, 64px) !important;
  grid-template-columns: minmax(230px, 320px) 1fr auto !important;
  background: rgba(4, 4, 4, .86) !important;
  border-color: rgba(255, 120, 28, .28) !important;
}
.brand img {
  width: clamp(220px, 16vw, 306px) !important;
}
.nav {
  gap: clamp(20px, 2.8vw, 42px) !important;
  font-size: clamp(.92rem, .9vw, 1.08rem) !important;
  letter-spacing: .12em !important;
}
.top-cta {
  min-height: 50px !important;
  min-width: 176px !important;
  padding: 0 20px !important;
  font-size: .95rem !important;
  border-radius: 8px !important;
}
.top-cta img { width: 24px !important; height: 24px !important; }

/* HERO: one cinematic section, not a split text panel and image panel. */
.hero.container {
  width: 100% !important;
  min-height: clamp(650px, 47vw, 860px) !important;
  display: block !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255, 116, 24, .34) !important;
  background:
    linear-gradient(90deg, #030303 0%, rgba(3,3,3,.98) 27%, rgba(3,3,3,.74) 46%, rgba(3,3,3,.08) 67%, rgba(3,3,3,.54) 100%),
    radial-gradient(circle at 24% 82%, rgba(210, 93, 15, .18), transparent 28%),
    #030303 !important;
}
.hero.container::before {
  z-index: 3 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.74) 37%, rgba(0,0,0,.1) 67%, rgba(0,0,0,.45) 100%),
    radial-gradient(circle at 75% 15%, rgba(255,127,36,.16), transparent 30%) !important;
}
.hero.container::after {
  height: 210px !important;
  background:
    linear-gradient(180deg, transparent 0%, rgba(2,2,2,.58) 52%, rgba(2,2,2,.96) 100%),
    radial-gradient(ellipse at 22% 20%, rgba(226, 109, 18, .19), transparent 52%) !important;
}
.hero-media.panel {
  inset: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}
.hero-media.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.76) 34%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.50) 100%),
    radial-gradient(circle at 77% 42%, transparent 0 20%, rgba(0,0,0,.30) 54%, rgba(0,0,0,.70) 100%);
  pointer-events: none;
}
.hero-media.panel::after {
  background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.58) 30%, transparent 52%, rgba(0,0,0,.48) 100%) !important;
}
.hero-photo {
  object-position: 70% center !important;
  filter: contrast(1.08) saturate(1.06) brightness(.86) !important;
  transform: scale(1.02);
}
.hero-badge {
  top: clamp(80px, 8vw, 140px) !important;
  right: clamp(70px, 8vw, 150px) !important;
  width: clamp(130px, 10vw, 190px) !important;
  opacity: .48 !important;
}
.hero-copy.panel {
  position: relative !important;
  z-index: 5 !important;
  width: min(760px, 47vw) !important;
  min-height: clamp(650px, 47vw, 860px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(58px, 6vw, 106px) clamp(34px, 5vw, 90px) clamp(52px, 5vw, 86px) !important;
}
.hero-copy.panel::before {
  display: none !important;
}
.hero-brand-mark {
  width: clamp(210px, 17vw, 320px);
  margin: 0 0 clamp(24px, 2.2vw, 36px);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.78));
}
.eyebrow {
  margin: 0 0 18px !important;
  color: var(--accent-bright) !important;
  font-size: clamp(.98rem, 1.06vw, 1.34rem) !important;
  letter-spacing: .15em !important;
  text-shadow: 0 4px 18px #000 !important;
}
.eyebrow::before { margin-left: 0 !important; }
.hero-title {
  display: block !important;
  font-family: Rockwell, Georgia, serif !important;
  font-size: clamp(4.45rem, 6.1vw, 8.55rem) !important;
  line-height: .88 !important;
  letter-spacing: -.015em !important;
  max-width: 720px !important;
}
.hero-title span {
  display: block !important;
  white-space: nowrap !important;
}
.hero-title .accent {
  color: var(--accent) !important;
}
.hero-text {
  max-width: 540px !important;
  margin-top: 28px !important;
  color: #f4eadf !important;
  font-size: clamp(1.08rem, 1.25vw, 1.42rem) !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}
.hero-actions,
.visit-actions {
  gap: 14px !important;
  margin-top: 30px !important;
}
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 9px;
  border: 1px solid rgba(255, 171, 89, .62);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .98rem;
  box-shadow: 0 16px 34px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.17);
  overflow: hidden;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); border-color: rgba(255, 183, 104, .9); }
.btn::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  transform: translateX(-90%) rotate(12deg);
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.24) 46%, transparent 62%);
  transition: transform .28s ease;
}
.btn:hover::before { transform: translateX(90%) rotate(12deg); }
.btn img { width: 23px; height: 23px; object-fit: contain; filter: brightness(0) invert(1); }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.btn-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-primary { background: linear-gradient(180deg, #c96b19, #8b3902); color: #fff; }
.btn-secondary { background: rgba(8,8,8,.62); color: #fff; }
.btn-map {
  background: linear-gradient(180deg, #2a6fbe, #123f77);
  border-color: rgba(138, 201, 255, .72);
  color: #f4fbff;
  box-shadow: 0 16px 34px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(40, 111, 190, .12);
}
.btn-map:hover {
  border-color: rgba(176, 221, 255, .92);
}
.hero-cta {
  width: clamp(200px, 15vw, 260px);
  min-height: clamp(64px, 4.9vw, 88px);
  justify-content: flex-start;
  padding-inline: 22px;
}
.visit-cta {
  width: clamp(180px, 13vw, 230px);
  min-height: clamp(58px, 4.2vw, 76px);
  justify-content: flex-start;
  padding-inline: 20px;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  color: #e9dccd;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-proof span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(0,0,0,.34);
}

/* Business highlight strip: tighter, more premium. */
.meta-strip.container {
  width: min(var(--professional-max), calc(100% - 64px)) !important;
  margin: -42px auto 46px !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  border: 1px solid rgba(255, 133, 38, .32) !important;
  border-radius: 12px !important;
  background: rgba(5,5,5,.90) !important;
}
.meta-item {
  min-height: 90px !important;
  padding: 18px 20px !important;
  border-color: rgba(255, 133, 38, .25) !important;
}
.meta-icon { width: 30px !important; height: 30px !important; }
.meta-copy strong { font-size: clamp(.95rem, .9vw, 1.18rem) !important; }
.meta-copy small { font-size: .82rem !important; color: #bfb2a3 !important; }

/* Menu intro. */
.section-art.container {
  width: min(760px, calc(100% - 48px)) !important;
  margin: 0 auto 18px !important;
}
.section-art img { width: min(100%, 650px) !important; }

/* MENU: 4-column professional grid, featured item is a menu card again. */
.menu-grid.container,
.menu-grid {
  width: min(var(--professional-max), calc(100vw - 56px)) !important;
  max-width: var(--professional-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.menu-card {
  min-width: 0 !important;
  min-height: 420px !important;
  padding: 24px 25px 28px !important;
  border-radius: var(--card-radius-pro) !important;
  border-color: var(--hairline) !important;
  background:
    linear-gradient(180deg, rgba(13,13,12,.96), rgba(2,2,2,.985)),
    radial-gradient(circle at 18% 0%, rgba(255, 126, 31, .11), transparent 34%) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04) !important;
}
.menu-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 10px;
  pointer-events: none;
}
.menu-card.compact { min-height: 246px !important; }
.menu-card[data-section="snacks"] { grid-column: 1; grid-row: 1; }
.menu-card[data-section="plates"] { grid-column: 2; grid-row: 1; }
.menu-card[data-section="byTheLb"] { grid-column: 3; grid-row: 1; }
.menu-card[data-section="sides"] { grid-column: 4; grid-row: 1; }
.menu-card[data-section="spuds"] { grid-column: 1; grid-row: 2; }
.menu-card[data-section="desserts"] { grid-column: 2; grid-row: 2; }
.menu-card[data-section="drinks"] { grid-column: 3; grid-row: 2; }
.menu-card.highlight-card,
.menu-card[data-section="wholeSmoke"] {
  grid-column: 4 !important;
  grid-row: 2 !important;
  min-height: 246px !important;
  display: block !important;
  padding: 24px 25px 26px !important;
  text-align: left !important;
  background:
    linear-gradient(135deg, rgba(38,18,4,.98), rgba(6,6,6,.985) 42%, rgba(6,6,6,.98)),
    radial-gradient(circle at 100% 0%, rgba(255, 126, 31, .20), transparent 36%) !important;
}
.card-header {
  min-height: 54px !important;
  margin-bottom: 14px !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 12px !important;
}
.card-icon-badge {
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.card-icon-badge img {
  height: 46px !important;
  width: auto !important;
  max-width: 62px !important;
  filter: drop-shadow(0 7px 10px rgba(0,0,0,.55));
}
.card-title {
  min-height: 54px !important;
  gap: 7px !important;
}
.menu-card h3,
.card-title h3 {
  font-family: Rockwell, Georgia, serif !important;
  color: #f4eee6 !important;
  font-size: clamp(1.34rem, 1.2vw, 1.72rem) !important;
  letter-spacing: .035em !important;
  line-height: .98 !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.76) !important;
}
.title-flare { color: var(--accent-bright) !important; opacity: .92 !important; }
.section-subtitle,
.pricing-inline {
  margin-bottom: 12px !important;
  color: #ffad57 !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
.menu-item { padding: 8px 0 !important; border-color: var(--hairline-soft) !important; }
.item-row,
.two-col-row {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(.88rem, .82vw, 1rem) !important;
  line-height: 1.28 !important;
}
.item-name,
.two-col-row .name { color: #f5ede4 !important; font-weight: 800 !important; }
.item-dots { border-bottom-color: rgba(255,255,255,.27) !important; border-bottom-width: 1px !important; }
.item-price,
.two-col-row .price { font-weight: 900 !important; color: #fff5ea !important; }
.item-notes,
.price-notes,
.footnote {
  color: #ff9f3d !important;
  font-size: .80rem !important;
  line-height: 1.34 !important;
  font-weight: 800 !important;
}
.two-col-head,
.two-col-row {
  grid-template-columns: minmax(112px, 1fr) minmax(56px, max-content) minmax(56px, max-content) !important;
  column-gap: 12px !important;
}
.two-col-head {
  color: #ffad57 !important;
  font-size: .83rem !important;
}
.two-col-row { padding: 7px 0 !important; border-color: var(--hairline-soft) !important; }
.menu-card[data-section="sides"] .menu-list {
  margin-top: 12px !important;
  gap: 0 !important;
}
.menu-card[data-section="sides"] .menu-item { width: 94% !important; }

/* Featured Whole Smoke card, integrated with the menu grid. */
.feature-ribbon {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 7px 10px 6px;
  border-radius: 999px;
  background: rgba(216,111,12,.18);
  border: 1px solid rgba(255,157,46,.34);
  color: #ffad57;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.highlight-card .highlight-copy,
.menu-card[data-section="wholeSmoke"] .highlight-copy {
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr) !important;
  grid-template-areas:
    "icon title"
    "meta meta"
    "desc desc"
    "fine fine" !important;
  align-items: center !important;
  justify-items: stretch !important;
  text-align: left !important;
  gap: 8px 14px !important;
}
.feature-icon { grid-area: icon; width: 54px; height: 54px; display: grid; place-items: center; }
.feature-icon img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
.highlight-card h3,
.menu-card[data-section="wholeSmoke"] h3 {
  grid-area: title;
  max-width: none !important;
  color: #ff8f2f !important;
  font-size: clamp(1.42rem, 1.45vw, 2.1rem) !important;
  line-height: .95 !important;
  text-align: left !important;
}
.feature-meta {
  grid-area: meta;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.feature-meta span {
  color: #ffad57;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.feature-meta strong {
  color: #fff6ec;
  font-family: Rockwell, Georgia, serif;
  font-size: clamp(1.75rem, 1.8vw, 2.4rem);
  white-space: nowrap;
}
.highlight-card p,
.menu-card[data-section="wholeSmoke"] p {
  max-width: none !important;
  margin: 2px 0 0 !important;
  font-size: .93rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
}
.highlight-card .fine { color: #cdbfaf !important; }

/* Visit/footer polish. */
.visit-section.container {
  width: min(var(--professional-max), calc(100% - 56px)) !important;
  margin: 44px auto 0 !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 133, 38, .28) !important;
  border-radius: 14px !important;
  grid-template-columns: minmax(290px, .75fr) minmax(330px, .75fr) minmax(460px, 1.35fr) !important;
  gap: 26px !important;
}
.visit-copy { padding-top: 4px !important; }
.visit-heading { width: min(100%, 360px) !important; }
.visit-photo-wrap { margin-top: 0 !important; }
.footer.container {
  width: min(var(--professional-max), calc(100% - 56px)) !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.footer-logo { width: clamp(170px, 13vw, 250px) !important; }
.social-link { width: 52px !important; height: 52px !important; }
.social-link img { width: 28px !important; height: 28px !important; }

@media (min-width: 1500px) {
  .menu-card[data-section="snacks"],
  .menu-card[data-section="plates"],
  .menu-card[data-section="byTheLb"],
  .menu-card[data-section="sides"] { min-height: 455px !important; }
  .menu-card.compact,
  .menu-card.highlight-card { min-height: 258px !important; }
}

@media (max-width: 1320px) {
  .topbar.container { grid-template-columns: 1fr !important; justify-items: center !important; }
  .hero-copy.panel { width: min(720px, 78vw) !important; }
  .hero-title { font-size: clamp(4rem, 9vw, 7rem) !important; }
  .meta-strip.container { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .menu-grid.container,
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: calc(100vw - 36px) !important; }
  .menu-card[data-section] { grid-column: auto !important; grid-row: auto !important; }
  .menu-card.highlight-card,
  .menu-card[data-section="wholeSmoke"] { grid-column: span 2 !important; }
  .visit-section.container { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .topbar.container { position: relative !important; }
  .nav { flex-wrap: wrap !important; gap: 12px 18px !important; }
  .hero.container { min-height: 680px !important; }
  .hero-copy.panel { width: 100% !important; min-height: 680px !important; padding: 42px 22px !important; }
  .hero-brand-mark { width: 210px; }
  .hero-title { font-size: clamp(3.4rem, 16vw, 5.2rem) !important; }
  .hero-title span { white-space: normal !important; }
  .hero-text { font-size: 1.05rem !important; }
  .hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .btn { width: 100%; }
  .hero-proof { display: none; }
  .meta-strip.container { width: calc(100% - 24px) !important; grid-template-columns: 1fr !important; margin-top: 18px !important; }
  .menu-grid.container,
  .menu-grid { width: calc(100vw - 22px) !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .menu-card.highlight-card,
  .menu-card[data-section="wholeSmoke"] { grid-column: auto !important; }
  .visit-section.container,
  .footer.container { width: calc(100% - 24px) !important; }
  .footer.container { grid-template-columns: 1fr !important; justify-items: center !important; text-align: center !important; }
}

/* 2026-06-13 professional recovery pass: replace the cramped 5-column menu with a clean 4-column restaurant grid. */
:root {
  --pro-max: 1760px;
  --pro-card-border: rgba(214, 111, 22, .46);
  --pro-card-border-soft: rgba(214, 111, 22, .24);
  --pro-card-bg: linear-gradient(180deg, rgba(12,12,12,.985), rgba(2,2,2,.992));
  --pro-line: rgba(255,255,255,.105);
}

.hero.container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: minmax(460px, 42vw) 1fr !important;
  min-height: clamp(620px, 50vw, 760px) !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(3,3,3,1) 0%, rgba(3,3,3,.98) 30%, rgba(3,3,3,.66) 49%, rgba(3,3,3,.20) 68%, rgba(3,3,3,.76) 100%),
    radial-gradient(circle at 44% 70%, rgba(198,91,16,.16), transparent 34%),
    #030303 !important;
}
.hero-copy.panel {
  width: min(680px, 43vw) !important;
  padding: clamp(54px, 6vw, 92px) clamp(34px, 5vw, 76px) !important;
  align-self: center !important;
}
.hero-brand-mark {
  width: clamp(210px, 17vw, 315px) !important;
  margin: 0 0 28px !important;
  display: block !important;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.7)) !important;
}
.eyebrow {
  margin-bottom: 18px !important;
  font-size: clamp(1rem, 1.15vw, 1.55rem) !important;
  letter-spacing: .13em !important;
}
.hero-title {
  display: block !important;
  font-size: clamp(5.1rem, 7.2vw, 9.2rem) !important;
  line-height: .86 !important;
  max-width: 7.1em !important;
}
.hero-title span {
  display: block !important;
  white-space: nowrap !important;
}
.hero-text {
  max-width: 560px !important;
  margin-top: 28px !important;
  font-size: clamp(1.12rem, 1.25vw, 1.55rem) !important;
  line-height: 1.42 !important;
}
.hero-actions { margin-top: 30px !important; }
.hero-media {
  width: min(70vw, 1320px) !important;
  right: 0 !important;
}
.hero-media::after {
  background:
    linear-gradient(90deg, rgba(3,3,3,.96) 0%, rgba(3,3,3,.58) 23%, rgba(3,3,3,.06) 48%, rgba(0,0,0,.34) 100%),
    radial-gradient(circle at 86% 22%, rgba(0,0,0,.82), transparent 32%) !important;
}
.hero-photo {
  object-position: 58% center !important;
  filter: contrast(1.06) saturate(1.05) brightness(.84) !important;
}
.hero-badge {
  top: clamp(74px, 7vw, 116px) !important;
  right: clamp(72px, 7vw, 138px) !important;
  width: clamp(140px, 10vw, 188px) !important;
  opacity: .42 !important;
}

.section-art.container,
.section-art {
  width: min(900px, calc(100vw - 48px)) !important;
  margin: 24px auto 16px !important;
}

.menu-grid.container,
.menu-grid {
  width: min(var(--pro-max), calc(100vw - 48px)) !important;
  max-width: var(--pro-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.menu-card[data-section] {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  min-height: 426px !important;
  padding: 24px 26px 26px !important;
  border: 1px solid var(--pro-card-border) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(220,108,19,.10), transparent 36%),
    var(--pro-card-bg) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.36) !important;
  overflow: hidden !important;
  text-align: left !important;
}
.menu-card.compact,
.menu-card[data-section="spuds"],
.menu-card[data-section="desserts"],
.menu-card[data-section="drinks"],
.menu-card[data-section="wholeSmoke"] {
  min-height: 250px !important;
}
.card-header {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 58px !important;
  margin-bottom: 16px !important;
}
.card-icon-badge {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.card-icon-badge img {
  width: auto !important;
  height: 50px !important;
  max-width: 70px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)) !important;
}
.card-title {
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  line-height: 1 !important;
}
.menu-card h3,
.card-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Rockwell, Georgia, serif !important;
  color: #f5efe8 !important;
  font-size: clamp(1.42rem, 1.22vw, 1.86rem) !important;
  line-height: .98 !important;
  letter-spacing: .035em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-wrap: balance !important;
  word-break: normal !important;
}
.title-flare {
  color: #e17a20 !important;
  opacity: .95 !important;
  font-size: .84rem !important;
}
.section-subtitle,
.pricing-inline {
  margin: 2px 0 15px !important;
  color: #ffad5a !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(.82rem, .78vw, .96rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}
.menu-list { display: block !important; }
.menu-item {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--pro-line) !important;
}
.item-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(.93rem, .84vw, 1.05rem) !important;
  line-height: 1.25 !important;
}
.item-name {
  color: #f5eee6 !important;
  font-weight: 800 !important;
}
.item-dots {
  flex: 1 1 auto !important;
  min-width: 42px !important;
  border-bottom: 1px dotted rgba(255,255,255,.31) !important;
  transform: translateY(-4px) !important;
}
.item-price {
  color: #fff6ed !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
.item-notes,
.price-notes,
.footnote {
  color: #ff9d38 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(.79rem, .72vw, .91rem) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}
.two-col-head,
.two-col-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 68px 68px !important;
  gap: 12px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.two-col-head {
  margin-bottom: 8px !important;
  color: #ffad5a !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}
.two-col-row {
  align-items: start !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--pro-line) !important;
  color: #f5eee6 !important;
  font-size: clamp(.92rem, .82vw, 1.02rem) !important;
  line-height: 1.25 !important;
}
.two-col-row .name { font-weight: 800 !important; }
.two-col-row .price { text-align: right !important; font-weight: 900 !important; color: #fff6ed !important; }
.price-notes { grid-column: 1 / -1 !important; margin-top: 3px !important; }

.menu-card[data-section="sides"] { text-align: left !important; }
.menu-card[data-section="sides"] .pricing-inline { text-align: center !important; }
.menu-card[data-section="sides"] .menu-list {
  margin: 14px auto 0 !important;
  width: min(92%, 320px) !important;
}
.menu-card[data-section="sides"] .menu-item { width: 100% !important; }
.menu-card[data-section="sides"] .item-row { justify-content: center !important; text-align: center !important; }
.menu-card[data-section="sides"] .item-name { width: 100% !important; text-align: center !important; }

.menu-card[data-section="wholeSmoke"] {
  background:
    linear-gradient(135deg, rgba(40,18,5,.98), rgba(7,7,7,.99) 44%, rgba(6,6,6,.99)),
    radial-gradient(circle at 100% 0%, rgba(255,128,31,.20), transparent 38%) !important;
}
.feature-ribbon {
  margin: 0 0 12px !important;
  padding: 6px 10px !important;
  font-size: .72rem !important;
  letter-spacing: .12em !important;
  color: #ffb364 !important;
}
.highlight-card .highlight-copy,
.menu-card[data-section="wholeSmoke"] .highlight-copy {
  display: block !important;
  text-align: left !important;
}
.feature-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}
.feature-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  display: grid !important;
  place-items: center !important;
}
.feature-icon img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 9px 13px rgba(0,0,0,.55)) !important;
}
.menu-card[data-section="wholeSmoke"] h3,
.highlight-card h3 {
  max-width: none !important;
  color: #ff8d2b !important;
  font-size: clamp(1.45rem, 1.35vw, 2.05rem) !important;
  line-height: .96 !important;
  text-align: left !important;
}
.feature-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 12px !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255,255,255,.11) !important;
  border-bottom: 1px solid rgba(255,255,255,.11) !important;
}
.feature-meta span {
  color: #ffad5a !important;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
  font-size: 1.12rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.feature-meta strong {
  color: #fff6ed !important;
  font-family: Rockwell, Georgia, serif !important;
  font-size: clamp(1.85rem, 1.85vw, 2.65rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.menu-card[data-section="wholeSmoke"] p,
.highlight-card p {
  max-width: none !important;
  margin: 0 0 7px !important;
  color: #f7ecdf !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: .95rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
}
.menu-card[data-section="wholeSmoke"] .fine,
.highlight-card .fine { color: #d1c2b3 !important; }

@media (max-width: 1320px) {
  .hero.container { grid-template-columns: 1fr !important; min-height: 660px !important; }
  .hero-copy.panel { width: min(760px, 88vw) !important; }
  .hero-media { width: 100% !important; }
  .menu-grid.container,
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: calc(100vw - 36px) !important; }
  .menu-card[data-section] { min-height: auto !important; }
}
@media (max-width: 760px) {
  .hero.container { min-height: 720px !important; }
  .hero-copy.panel { width: 100% !important; padding: 42px 22px !important; }
  .hero-title { font-size: clamp(3.3rem, 15vw, 5.1rem) !important; }
  .hero-title span { white-space: normal !important; }
  .menu-grid.container,
  .menu-grid { grid-template-columns: 1fr !important; width: calc(100vw - 22px) !important; gap: 14px !important; }
  .feature-meta { align-items: flex-start !important; flex-direction: column !important; gap: 6px !important; }
}


/* 2026-06-13 requested fixes: cleaner readable fonts, centered menu headers, one-line long titles, centered special card, and call button. */
.meta-copy strong {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .015em !important;
  line-height: 1.18 !important;
}
.meta-copy small {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}

.menu-card h3,
.card-title h3 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .025em !important;
  line-height: 1.05 !important;
}
.item-name,
.item-price,
.two-col-row .name,
.two-col-row .price,
.item-notes,
.price-notes,
.footnote,
.section-subtitle,
.pricing-inline {
  font-weight: 600 !important;
}
.item-price,
.two-col-row .price { font-weight: 700 !important; }

.menu-card[data-section="snacks"] .card-header,
.menu-card[data-section="byTheLb"] .card-header,
.menu-card[data-section="sides"] .card-header,
.menu-card[data-section="desserts"] .card-header,
.menu-card[data-section="drinks"] .card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
}
.menu-card[data-section="snacks"] .card-title,
.menu-card[data-section="byTheLb"] .card-title,
.menu-card[data-section="sides"] .card-title,
.menu-card[data-section="desserts"] .card-title,
.menu-card[data-section="drinks"] .card-title {
  justify-content: center !important;
  text-align: center !important;
  flex: 0 1 auto !important;
}
.menu-card[data-section="snacks"] h3,
.menu-card[data-section="byTheLb"] h3,
.menu-card[data-section="sides"] h3,
.menu-card[data-section="desserts"] h3,
.menu-card[data-section="drinks"] h3 {
  text-align: center !important;
}

.menu-card[data-section="spuds"] .card-title,
.menu-card[data-section="plates"] .card-title {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.menu-card[data-section="spuds"] h3,
.menu-card[data-section="plates"] h3 {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  font-size: clamp(1.1rem, 1.05vw, 1.55rem) !important;
}

.feature-ribbon {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto 16px !important;
  text-align: center !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(.95rem, .9vw, 1.18rem) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}
.highlight-card .highlight-copy,
.menu-card[data-section="wholeSmoke"] .highlight-copy {
  text-align: center !important;
}
.feature-head {
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
}
.menu-card[data-section="wholeSmoke"] h3,
.highlight-card h3 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.85rem, 1.75vw, 2.65rem) !important;
  line-height: 1.02 !important;
  text-align: center !important;
}
.menu-card[data-section="wholeSmoke"] p,
.highlight-card p {
  text-align: center !important;
}
.feature-meta {
  justify-content: center !important;
  text-align: center !important;
}

.call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 72px;
  padding: 0 30px;
  border: 1px solid rgba(255, 186, 110, .84);
  border-radius: 10px;
  color: #fff6ed;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #c8732b 0%, #a55016 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 26px rgba(0,0,0,.28);
  transition: transform .18s ease, filter .18s ease;
}
.call-button img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.call-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.hero-actions,
.visit-actions {
  align-items: center !important;
  gap: 16px !important;
}
@media (max-width: 760px) {
  .menu-card[data-section="spuds"] h3,
  .menu-card[data-section="plates"] h3 {
    font-size: clamp(.98rem, 5vw, 1.28rem) !important;
  }
  .call-button {
    width: 100%;
    max-width: 280px;
    min-height: 64px;
    padding: 0 18px;
    font-size: .92rem;
  }
}

/* Final 2026-06-13 correction: keep header to one CTA and keep call button beside Order Online in hero/visit actions. */
.topbar.container {
  grid-template-columns: minmax(230px, 320px) 1fr auto !important;
}
.topbar.container > .top-cta[data-link="phoneUrl"] {
  display: none !important;
}
.hero-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
.hero-actions .image-button[data-link="orderUrl"],
.hero-actions .call-button,
.visit-actions .call-button {
  flex: 0 0 auto !important;
}
.hero-actions .call-button {
  min-height: clamp(68px, 5.1vw, 88px) !important;
  padding: 0 clamp(22px, 2vw, 34px) !important;
  font-size: clamp(1rem, 1vw, 1.22rem) !important;
}
@media (max-width: 760px) {
  .hero-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Final placement correction: phone CTA belongs in the header beside Order Online, not in the hero buttons. */
.topbar.container {
  grid-template-columns: minmax(230px, 320px) 1fr auto !important;
}
.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}
.topbar.container > .top-cta[data-link="phoneUrl"] {
  display: inline-flex !important;
}
.topbar .top-phone-cta {
  display: inline-flex !important;
  min-width: 226px !important;
}
.hero-actions .call-button {
  display: none !important;
}
.hero-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
@media (max-width: 980px) {
  .header-actions {
    gap: 10px !important;
  }
  .topbar .top-cta {
    min-width: auto !important;
    padding-inline: 16px !important;
  }
}
@media (max-width: 760px) {
  .header-actions {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .topbar .top-cta {
    min-height: 54px !important;
  }
}

/* 2026-06-13 v4: enlarge footer social icons per client request. */
.socials {
  gap: 18px !important;
}
.footer .social-link {
  width: 72px !important;
  height: 72px !important;
}
.footer .social-link img {
  width: 38px !important;
  height: 38px !important;
}
@media (max-width: 760px) {
  .footer .social-link {
    width: 64px !important;
    height: 64px !important;
  }
  .footer .social-link img {
    width: 34px !important;
    height: 34px !important;
  }
}

/* 2026-06-13 v5: menu header alignment cleanup and Whole D*mn Smoke balance fix. */
.menu-card .card-header {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 58px !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: 100% !important;
}
.menu-card .card-header::after {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
}
.menu-card .card-icon-badge {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
}
.menu-card .card-icon-badge img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
}
.menu-card .card-title {
  grid-column: 2 !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-align: center !important;
}
.menu-card h3,
.menu-card .card-title h3 {
  margin: 0 !important;
  text-align: center !important;
}
.menu-card .title-flare {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.menu-card[data-section="plates"] h3,
.menu-card[data-section="spuds"] h3 {
  white-space: nowrap !important;
  font-size: clamp(1.02rem, 1vw, 1.2rem) !important;
  letter-spacing: .02em !important;
}
.menu-card[data-section="snacks"] .card-title,
.menu-card[data-section="plates"] .card-title,
.menu-card[data-section="byTheLb"] .card-title,
.menu-card[data-section="sides"] .card-title,
.menu-card[data-section="spuds"] .card-title,
.menu-card[data-section="desserts"] .card-title,
.menu-card[data-section="drinks"] .card-title {
  max-width: 100% !important;
}

.menu-card[data-section="wholeSmoke"],
.highlight-card {
  text-align: center !important;
}
.menu-card[data-section="wholeSmoke"] .feature-ribbon,
.highlight-card .feature-ribbon {
  margin: 0 auto 18px !important;
  padding-inline: 18px !important;
}
.menu-card[data-section="wholeSmoke"] .highlight-copy,
.highlight-card .highlight-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}
.menu-card[data-section="wholeSmoke"] .feature-head,
.highlight-card .feature-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
}
.menu-card[data-section="wholeSmoke"] .feature-icon,
.highlight-card .feature-icon {
  width: 72px !important;
  height: 72px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto !important;
}
.menu-card[data-section="wholeSmoke"] .feature-icon img,
.highlight-card .feature-icon img {
  width: 54px !important;
  height: 54px !important;
}
.menu-card[data-section="wholeSmoke"] h3,
.highlight-card h3 {
  max-width: none !important;
  width: 100% !important;
  font-size: clamp(2rem, 1.9vw, 2.9rem) !important;
  line-height: 1.02 !important;
  letter-spacing: .025em !important;
}
.menu-card[data-section="wholeSmoke"] .feature-meta,
.highlight-card .feature-meta {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 2px !important;
}
.menu-card[data-section="wholeSmoke"] .feature-meta span,
.highlight-card .feature-meta span {
  text-align: left !important;
}
.menu-card[data-section="wholeSmoke"] .feature-meta strong,
.highlight-card .feature-meta strong {
  text-align: right !important;
}
.menu-card[data-section="wholeSmoke"] p,
.highlight-card p {
  width: 100% !important;
  max-width: 18rem !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .menu-card .card-header {
    grid-template-columns: 50px minmax(0, 1fr) 50px !important;
    column-gap: 10px !important;
  }
  .menu-card .card-header::after {
    width: 50px;
    height: 50px;
  }
  .menu-card .card-icon-badge {
    width: 50px !important;
    height: 50px !important;
  }
  .menu-card .card-icon-badge img {
    width: 42px !important;
    height: 42px !important;
  }
  .menu-card[data-section="plates"] h3,
  .menu-card[data-section="spuds"] h3 {
    white-space: normal !important;
    font-size: clamp(1rem, 4.4vw, 1.22rem) !important;
  }
  .menu-card[data-section="wholeSmoke"] .feature-meta,
  .highlight-card .feature-meta {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* 2026-06-13 zoom stability pass:
   keep the same layout, but avoid raster/filter issues and compensate for low browser zoom. */
.topbar.container {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: paint;
}
.brand,
.top-cta,
.image-button {
  contain: paint;
}
.brand {
  display: block;
  line-height: 0;
}
.image-button img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
  transform: translateZ(0);
}
.hero-photo,
.visit-photo {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  image-rendering: auto;
}
.brand img {
  filter: none !important;
  height: auto;
  image-rendering: auto;
  object-fit: contain;
}
.meta-icon,
.visit-icon {
  filter: none !important;
}
.top-cta {
  filter: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 10px 22px rgba(67, 23, 0, .32) !important;
}
.topbar .top-phone-cta {
  background: linear-gradient(180deg, #b5483d, #751913) !important;
  border-color: rgba(255, 182, 169, .74) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 10px 22px rgba(63, 8, 8, .34) !important;
}
.topbar .top-phone-cta:hover {
  border-color: rgba(255, 205, 197, .92) !important;
}
.top-cta:hover,
.image-button:hover {
  filter: none !important;
}
.btn:hover {
  filter: none !important;
}
.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff8f0;
  flex: 0 0 24px;
}
.cta-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 2400px) {
  .topbar.container,
  .meta-strip.container,
  .section-art.container,
  .menu-grid.container,
  .visit-section.container,
  .footer.container {
    width: min(2400px, calc(100vw - 72px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero.container {
    width: min(3200px, calc(100vw - 72px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .topbar.container {
    grid-template-columns: minmax(320px, 520px) 1fr auto !important;
  }

  .brand img {
    width: clamp(320px, 11vw, 480px) !important;
  }

  .topbar.container {
    min-height: 104px !important;
    padding-inline: clamp(32px, 2.2vw, 64px) !important;
  }

  .hero-copy.panel {
    width: min(980px, 41vw) !important;
    min-height: clamp(760px, 40vw, 1040px) !important;
  }

  .hero-photo {
    transform: none !important;
  }

  .hero-title {
    font-size: clamp(5.8rem, 5.1vw, 10.6rem) !important;
  }

  .hero-text {
    max-width: 620px !important;
    font-size: clamp(1.18rem, .95vw, 1.62rem) !important;
  }

  .image-button {
    width: clamp(250px, 8vw, 350px) !important;
  }

  .image-button-small {
    width: clamp(210px, 6.8vw, 290px) !important;
  }

  .hero-cta {
    width: clamp(250px, 8vw, 350px) !important;
  }

  .visit-cta {
    width: clamp(210px, 6.8vw, 290px) !important;
  }
}

@media (min-width: 4200px) {
  .topbar.container,
  .meta-strip.container,
  .section-art.container,
  .menu-grid.container,
  .visit-section.container,
  .footer.container {
    width: min(3600px, calc(100vw - 96px)) !important;
  }

  .hero.container {
    width: min(4200px, calc(100vw - 96px)) !important;
  }

  .topbar.container {
    grid-template-columns: minmax(460px, 760px) 1fr auto !important;
  }

  .brand img {
    width: clamp(420px, 9vw, 660px) !important;
  }

  .topbar .nav {
    font-size: clamp(1rem, .7vw, 1.3rem) !important;
  }

  .topbar .top-cta {
    min-height: 66px !important;
    min-width: 240px !important;
    padding-inline: 24px !important;
    font-size: clamp(1rem, .72vw, 1.26rem) !important;
  }

  .hero-copy.panel {
    width: min(1440px, 38vw) !important;
    min-height: clamp(920px, 37vw, 1320px) !important;
  }

  .hero-photo {
    transform: none !important;
  }

  .hero-title {
    font-size: clamp(7.2rem, 4.7vw, 13.8rem) !important;
  }

  .hero-text {
    max-width: 760px !important;
    font-size: clamp(1.35rem, .84vw, 1.92rem) !important;
  }

  .image-button {
    width: clamp(320px, 7vw, 460px) !important;
  }

  .image-button-small {
    width: clamp(260px, 5.8vw, 360px) !important;
  }

  .hero-cta {
    width: clamp(320px, 7vw, 460px) !important;
  }

  .visit-cta {
    width: clamp(260px, 5.8vw, 360px) !important;
  }
}

@media (min-width: 3000px) {
  .topbar.container,
  .menu-grid.container,
  .visit-section.container,
  .footer.container {
    width: min(92vw, 4200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .meta-strip.container {
    width: min(94vw, 5000px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section-art.container,
  .section-art {
    width: min(92vw, 2200px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero.container {
    width: min(94vw, 5200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .menu-grid.container,
  .menu-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(92vw, 4200px) !important;
    max-width: none !important;
    gap: 20px !important;
  }

  .menu-card.compact {
    min-height: 360px !important;
  }

  .menu-card.highlight-card {
    min-height: 740px !important;
  }
}

@media (min-width: 5000px) {
  .topbar.container,
  .menu-grid.container,
  .visit-section.container,
  .footer.container {
    width: min(94vw, 6200px) !important;
  }

  .meta-strip.container {
    width: min(96vw, 7000px) !important;
  }

  .section-art.container,
  .section-art {
    width: min(94vw, 3000px) !important;
    max-width: none !important;
  }

  .hero.container {
    width: min(96vw, 7200px) !important;
    min-height: min(78vw, 1800px) !important;
  }

  .hero-copy.panel {
    width: min(1800px, 42vw) !important;
    min-height: min(78vw, 1800px) !important;
    padding: clamp(64px, 4vw, 118px) clamp(48px, 4vw, 108px) !important;
  }

  .hero-title {
    font-size: clamp(8rem, 4.7vw, 18rem) !important;
    max-width: 1500px !important;
  }

  .hero-text {
    max-width: 920px !important;
    font-size: clamp(1.45rem, .9vw, 2.2rem) !important;
  }

  .nav {
    font-size: clamp(1.08rem, .72vw, 1.5rem) !important;
    gap: clamp(22px, 1.6vw, 54px) !important;
  }

  .brand img {
    width: clamp(520px, 8vw, 820px) !important;
  }

  .topbar .top-cta {
    min-width: 260px !important;
    min-height: 70px !important;
    font-size: clamp(1.02rem, .7vw, 1.34rem) !important;
  }

  .hero-cta {
    width: clamp(340px, 6vw, 480px) !important;
    min-height: 92px !important;
    font-size: clamp(1.12rem, .82vw, 1.5rem) !important;
  }

  .visit-cta {
    width: clamp(300px, 5vw, 420px) !important;
    min-height: 80px !important;
    font-size: clamp(1rem, .7vw, 1.26rem) !important;
  }

  .section-art.container img {
    width: min(1500px, 42vw) !important;
  }

  .menu-grid.container,
  .menu-grid {
    width: min(94vw, 6200px) !important;
    max-width: none !important;
    gap: 28px !important;
  }

  .menu-card {
    min-height: 520px !important;
  }

  .menu-card.compact {
    min-height: 440px !important;
  }

  .menu-card.highlight-card {
    min-height: 920px !important;
  }

  .menu-card h3 {
    font-size: clamp(1.8rem, .95vw, 2.5rem) !important;
  }

  .item-row,
  .two-col-row {
    font-size: clamp(1.1rem, .64vw, 1.46rem) !important;
  }

  .item-notes,
  .price-notes,
  .footnote,
  .section-subtitle,
  .pricing-inline {
    font-size: clamp(.96rem, .52vw, 1.2rem) !important;
  }

  .visit-section.container {
    grid-template-columns: minmax(520px, .9fr) minmax(520px, .95fr) minmax(900px, 1.45fr) !important;
  }

  .visit-text,
  .visit-info li small {
    font-size: clamp(1.12rem, .66vw, 1.5rem) !important;
  }
}

/* Manifest-driven menu notice and footer design credit. */
.menu-notice {
  margin: 12px auto 0;
  max-width: 820px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .01em;
}

.pitmaster-special-note {
  margin: 22px auto 42px;
  text-align: center;
  color: var(--accent-bright);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .01em;
}

.footer-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.footer-credit {
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

.footer-credit a {
  color: var(--accent-bright);
  text-decoration: none;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  text-decoration: underline;
}


/* Welcome price notice popup. Shows on every page load. */
body.modal-open {
  overflow: hidden;
}

.welcome-modal[hidden] {
  display: none;
}

.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.welcome-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.welcome-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(4px);
}

.welcome-modal-panel {
  position: relative;
  width: min(92vw, 620px);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(39, 24, 12, .96), rgba(10, 8, 6, .98)),
    var(--panel);
  border: 1px solid rgba(198, 111, 28, .55);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .04);
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;
}

.welcome-modal.is-open .welcome-modal-panel {
  transform: translateY(0) scale(1);
}

.welcome-modal-logo {
  display: block;
  width: min(420px, 86%);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .42));
}

.welcome-modal-panel h2 {
  margin: 0 0 16px;
  color: var(--accent-bright);
  font-family: var(--display-font, inherit);
  font-size: clamp(2rem, 6vw, 3.25rem);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.welcome-modal-panel p {
  margin: 0 auto 16px;
  max-width: 520px;
  color: var(--muted);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.55;
}

.welcome-modal-thanks {
  margin-top: 24px !important;
  margin-bottom: 4px !important;
}

.welcome-modal-signature {
  color: var(--text) !important;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.welcome-modal-button {
  margin: 12px auto 0;
  min-width: 180px;
}

.welcome-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, .08);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.welcome-modal-close:hover,
.welcome-modal-close:focus-visible {
  background: rgba(198, 111, 28, .32);
  outline: 2px solid rgba(198, 111, 28, .7);
  outline-offset: 2px;
}

/* 2026-06-14 mobile header fix: prevent desktop nav/actions from overflowing on phones. */
@media (max-width: 760px) {
  .topbar.container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 14px 14px 16px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .topbar .brand {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .topbar .brand img {
    width: min(260px, 74vw) !important;
    height: auto !important;
  }

  .topbar .nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    font-size: .78rem !important;
    letter-spacing: .12em !important;
  }

  .topbar .nav a {
    display: block !important;
    width: 100% !important;
    padding: 7px 2px 9px !important;
    white-space: nowrap !important;
  }

  .topbar .header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 360px !important;
    gap: 10px !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .topbar .top-cta {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 10px !important;
    justify-content: center !important;
    font-size: .72rem !important;
    line-height: 1.05 !important;
    letter-spacing: .06em !important;
    white-space: normal !important;
  }

  .topbar .top-cta .cta-icon,
  .topbar .top-cta svg {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }
}

@media (max-width: 380px) {
  .topbar .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .topbar .header-actions {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-14 about page addition */
.about-hero.container,
.about-story.container,
.about-cta.container {
  width: min(var(--professional-max, 1280px), calc(100vw - 56px));
  margin-left: auto;
  margin-right: auto;
}

.about-hero {
  margin-top: 34px;
  padding: clamp(40px, 6vw, 86px) clamp(24px, 5vw, 72px);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(8,8,8,.92), rgba(3,3,3,.98)),
    radial-gradient(circle at 50% 0%, rgba(217, 105, 13, .22), transparent 45%);
  border: 1px solid rgba(255, 133, 38, .30);
}

.about-kicker {
  color: var(--accent, #f28a16);
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.about-hero h1,
.about-story h2,
.about-cta h2 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: .035em;
  line-height: .95;
  color: #fff7ed;
}

.about-hero h1 {
  font-size: clamp(3rem, 8vw, 7.4rem);
  max-width: 980px;
  margin: 0 auto 20px;
}

.about-hero p,
.about-story p,
.about-cta p,
.timeline-card p {
  color: #e8ded2;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.7;
}

.about-hero p {
  max-width: 820px;
  margin: 0 auto;
}

.about-story {
  margin-top: 28px;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
  border: 1px solid rgba(255, 133, 38, .25);
}

.about-story h2,
.about-cta h2 {
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
  margin-bottom: 18px;
}

.about-story-copy p {
  margin: 0 0 18px;
}

.about-timeline {
  display: grid;
  gap: 16px;
}

.timeline-card {
  position: relative;
  padding: 22px 22px 22px 82px;
  min-height: 150px;
  border: 1px solid rgba(255, 133, 38, .24);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 15, 15, .95), rgba(4, 4, 4, .96)),
    radial-gradient(circle at 100% 0%, rgba(217, 105, 13, .13), transparent 42%);
}

.timeline-label {
  position: absolute;
  left: 22px;
  top: 24px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 133, 38, .55);
  color: var(--accent, #f28a16);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .06em;
}

.timeline-card h3 {
  margin: 0 0 8px;
  color: #fff7ed;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.timeline-card p {
  margin: 0;
  font-size: 1rem;
}

.about-cta {
  margin-top: 28px;
  margin-bottom: 42px;
  padding: clamp(28px, 4vw, 52px);
  text-align: center;
  border: 1px solid rgba(255, 133, 38, .28);
  background:
    linear-gradient(180deg, rgba(8,8,8,.94), rgba(2,2,2,.98)),
    radial-gradient(circle at 50% 100%, rgba(217, 105, 13, .18), transparent 42%);
}

.about-cta p {
  max-width: 720px;
  margin: 0 auto 24px;
}

.about-actions {
  justify-content: center;
}

@media (max-width: 920px) {
  .about-story {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .about-hero.container,
  .about-story.container,
  .about-cta.container {
    width: calc(100vw - 24px);
  }

  .about-hero {
    margin-top: 18px;
    padding: 34px 18px;
  }

  .about-story,
  .about-cta {
    padding: 22px 16px;
  }

  .timeline-card {
    padding: 74px 18px 20px;
  }

  .timeline-label {
    left: 18px;
    top: 18px;
  }
}


/* Review CTA buttons inside the business highlight strip */
.meta-review-actions .meta-copy {
  gap: 10px;
}

.meta-review-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.meta-review-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 137, 21, 0.72);
  border-radius: 999px;
  color: #fff7ed;
  background: linear-gradient(135deg, rgba(199, 83, 0, 0.88), rgba(87, 20, 10, 0.94));
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.meta-review-button:hover,
.meta-review-button:focus-visible {
  border-color: rgba(255, 191, 95, 0.95);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .meta-review-actions {
    align-items: flex-start;
  }

  .meta-review-buttons {
    width: 100%;
  }

  .meta-review-button {
    flex: 1 1 100%;
  }
}


/* Gallery page */
.gallery-hero {
  margin-top: 26px;
  padding: clamp(40px, 7vw, 92px) clamp(22px, 7vw, 86px);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(6,6,6,.90), rgba(2,2,2,.98)),
    radial-gradient(circle at 50% 22%, rgba(255, 128, 20, .20), transparent 38%),
    url("assets/hero-brisket.png") center/cover no-repeat;
}

.gallery-kicker,
.gallery-section-heading span {
  display: inline-block;
  color: var(--accent-bright);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.gallery-hero h1,
.gallery-section-heading h2,
.gallery-cta h2 {
  margin: 0;
  color: #fff7ed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 9vw, 8.5rem);
  line-height: .86;
  text-transform: uppercase;
  text-shadow: 0 12px 28px rgba(0,0,0,.75);
}

.gallery-hero p {
  max-width: 820px;
  margin: 26px auto 0;
  color: #f5eadd;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.65;
}

.gallery-showcase {
  max-width: 1180px;
  margin: 24px auto 0;
  padding: clamp(10px, 1.5vw, 18px);
  border-color: rgba(255, 137, 38, .45);
  background:
    linear-gradient(180deg, rgba(8,8,8,.96), rgba(2,2,2,.99)),
    radial-gradient(circle at 15% 10%, rgba(255, 133, 38, .16), transparent 38%);
}

.gallery-carousel {
  position: relative;
}

.gallery-stage {
  position: relative;
  min-height: clamp(310px, 50vw, 620px);
  overflow: hidden;
  border: 1px solid rgba(255, 137, 38, .42);
  border-radius: 18px;
  background: #030303;
  box-shadow: 0 24px 80px rgba(0,0,0,.58);
}

.gallery-track,
.gallery-slide {
  position: absolute;
  inset: 0;
}

.gallery-slide {
  margin: 0;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .65s ease, transform 1.2s ease;
}

.gallery-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66), transparent 32%, rgba(0,0,0,.28)),
    linear-gradient(0deg, rgba(0,0,0,.58), transparent 38%);
  pointer-events: none;
}

.gallery-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: clamp(44px, 5vw, 66px);
  height: clamp(44px, 5vw, 66px);
  border-radius: 999px;
  border: 1px solid rgba(255, 153, 48, .62);
  color: #fff7ed;
  background: rgba(10, 8, 6, .78);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .5;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.gallery-arrow:hover,
.gallery-arrow:focus-visible {
  transform: translateY(-50%) scale(1.07);
  border-color: var(--accent-bright);
  background: rgba(217, 105, 13, .85);
}

.gallery-arrow-prev { left: clamp(12px, 2vw, 26px); }
.gallery-arrow-next { right: clamp(12px, 2vw, 26px); }

.gallery-caption-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-top: 16px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(255, 137, 38, .28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(14, 12, 10, .92), rgba(5,5,5,.98)),
    radial-gradient(circle at 100% 0%, rgba(255, 122, 18, .18), transparent 32%);
}

.gallery-counter {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent-bright);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .14em;
}

.gallery-caption-bar h2 {
  margin: 0 0 8px;
  color: #fff7ed;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(1.8rem, 4vw, 4.2rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gallery-caption-bar p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

.gallery-play {
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 44px;
  border: 1px solid rgba(255, 137, 38, .58);
  border-radius: 999px;
  color: #fff7ed;
  background: rgba(217, 105, 13, .22);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.gallery-play:hover,
.gallery-play:focus-visible {
  background: rgba(217, 105, 13, .62);
}

.gallery-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.gallery-dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 153, 48, .75);
  background: rgba(255,255,255,.12);
  cursor: pointer;
}

.gallery-dot.is-active {
  width: 36px;
  background: var(--accent-bright);
  box-shadow: 0 0 20px rgba(255, 153, 48, .55);
}

.gallery-grid-section {
  padding: clamp(30px, 5vw, 62px) clamp(14px, 4vw, 54px);
}

.gallery-section-heading {
  text-align: center;
  margin-bottom: 28px;
}

.gallery-section-heading h2 {
  font-size: clamp(2.4rem, 6vw, 5.8rem);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.gallery-thumb {
  position: relative;
  min-height: clamp(190px, 22vw, 310px);
  padding: 0;
  border: 1px solid rgba(255, 137, 38, .32);
  border-radius: 16px;
  overflow: hidden;
  background: #050505;
  cursor: pointer;
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
}

.gallery-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.82), transparent 54%);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

.gallery-thumb span {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  color: #fff7ed;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.55rem);
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 4px 14px rgba(0,0,0,.9);
}

.gallery-thumb:hover img,
.gallery-thumb:focus-visible img,
.gallery-thumb.is-active img {
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.06);
}

.gallery-thumb.is-active {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 2px rgba(255, 153, 48, .22), 0 18px 46px rgba(0,0,0,.42);
}

.gallery-cta {
  margin-top: 6px;
  margin-bottom: 42px;
  padding: clamp(30px, 5vw, 58px);
  text-align: center;
  border: 1px solid rgba(255, 133, 38, .28);
  background:
    linear-gradient(180deg, rgba(8,8,8,.94), rgba(2,2,2,.98)),
    radial-gradient(circle at 50% 100%, rgba(217, 105, 13, .20), transparent 42%);
}

.gallery-cta h2 {
  font-size: clamp(2.7rem, 7vw, 6.8rem);
}

.gallery-cta p {
  max-width: 720px;
  margin: 18px auto 24px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .gallery-hero.container,
  .gallery-showcase.container,
  .gallery-grid-section.container,
  .gallery-cta.container {
    width: calc(100vw - 24px);
  }

  .gallery-hero {
    margin-top: 18px;
    padding: 38px 18px;
  }

  .gallery-stage {
    min-height: 310px;
    border-radius: 14px;
  }

  .gallery-caption-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .gallery-play {
    width: 100%;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-thumb {
    min-height: 180px;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-stage {
    min-height: 310px;
  }

  .gallery-arrow {
    top: auto;
    bottom: 16px;
    transform: none;
  }

  .gallery-arrow:hover,
  .gallery-arrow:focus-visible {
    transform: scale(1.07);
  }
}


/* 2026-06-14: make the Our Menu art behave like a polished menu jump link. */
.menu-heading-link {
  display: block;
  line-height: 0;
  border-radius: 18px;
  transition: transform .22s ease, filter .22s ease;
}
.menu-heading-link:hover,
.menu-heading-link:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 18px rgba(215, 107, 5, .28));
  outline: none;
}
.menu-heading-link img {
  display: block;
  width: 100%;
}
#menu {
  scroll-margin-top: 110px;
}

@media (max-width: 768px) {
  .visit-section,
  .visit-section .panel,
  .visit-card,
  .visit-content {
    overflow: visible;
    height: auto;
    max-height: none;
  }

  .visit-section img,
  .visit-card img,
  .storefront-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .visit-section p,
  .visit-card p,
  .storefront-note {
    font-size: 18px;
    line-height: 1.35;
    margin-top: 12px;
    margin-bottom: 0;
    overflow: visible;
  }
}
/* 2026-06-14 mobile visit/footer bottom fix: stop storefront note from being clipped. */
@media (max-width: 760px) {
  .visit-section.container,
  .visit-section.container.panel {
    display: block !important;
    width: calc(100vw - 24px) !important;
    margin: 28px auto 0 !important;
    padding: 18px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .visit-section.container::after,
  .visit-section.container.panel::after {
    display: none !important;
  }

  .visit-copy,
  .visit-info,
  .visit-photo-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .visit-info {
    margin-top: 22px !important;
    padding-top: 0 !important;
  }

  .visit-photo-wrap {
    display: block !important;
    margin-top: 24px !important;
  }

  .visit-photo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  .visit-photo-wrap > span {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #f4eee5 !important;
    font-size: clamp(1rem, 4.6vw, 1.25rem) !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .footer.container {
    width: calc(100vw - 24px) !important;
    margin: 28px auto 0 !important;
    padding: 24px 0 32px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 22px !important;
  }

  .footer-logo {
    width: min(280px, 78vw) !important;
    margin: 0 auto !important;
  }

  .footer-copy {
    width: 100% !important;
  }

  .footer-note,
  .footer-credit {
    font-size: clamp(1rem, 4.2vw, 1.18rem) !important;
    line-height: 1.45 !important;
  }

  .socials {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(44px, 1fr)) !important;
    gap: 14px !important;
    justify-items: center !important;
    align-items: center !important;
  }

  .footer .social-link {
    width: 58px !important;
    height: 58px !important;
  }

  .footer .social-link img {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 380px) {
  .socials {
    grid-template-columns: repeat(3, minmax(44px, 1fr)) !important;
  }
}


/* =========================================================
   2026-06-17 mobile repair pass
   WordPress does not automatically make a custom static build responsive;
   these rules override the old full-width desktop poster layout on phones.
   ========================================================= */
html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

.btn,
.top-cta,
.hero-cta,
.visit-cta,
.welcome-modal-button {
  touch-action: manipulation;
}

.cta-icon,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cta-icon svg,
.btn-icon svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  body::after {
    opacity: .42;
  }

  .site-shell {
    padding-bottom: 18px !important;
  }

  .topbar,
  .topbar.container {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 10px !important;
    padding: 10px 12px 12px !important;
    background: rgba(3, 3, 3, .96) !important;
    backdrop-filter: blur(10px) !important;
  }

  .brand {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .brand img {
    width: min(270px, 76vw) !important;
    height: auto !important;
  }

  .nav {
    width: 100% !important;
    max-width: 420px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: clamp(.74rem, 3.2vw, .92rem) !important;
    letter-spacing: .07em !important;
    line-height: 1 !important;
  }

  .nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 9px 4px !important;
    border: 1px solid rgba(255, 139, 41, .25) !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, .36) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .nav a::after {
    left: 12% !important;
    right: 12% !important;
    bottom: 5px !important;
    height: 2px !important;
  }

  .header-actions {
    width: 100% !important;
    max-width: 420px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .top-cta,
  .top-phone-cta {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: clamp(.72rem, 3.15vw, .88rem) !important;
    letter-spacing: .045em !important;
    gap: 7px !important;
  }

  .top-phone-cta span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .hero,
  .hero.container {
    width: 100% !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .hero::before,
  .hero.container::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 42%, rgba(0,0,0,.92) 100%),
      radial-gradient(circle at 50% 10%, rgba(255, 110, 22, .20), transparent 34%) !important;
  }

  .hero-copy,
  .hero-copy.panel {
    width: 100% !important;
    min-height: 0 !important;
    order: 2 !important;
    padding: 24px 18px 34px !important;
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .hero-media,
  .hero-media.panel {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    width: 100% !important;
    height: clamp(240px, 70vw, 380px) !important;
    min-height: 0 !important;
    opacity: 1 !important;
  }

  .hero-media.panel::before,
  .hero-media.panel::after,
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.62)),
      radial-gradient(circle at 50% 10%, transparent 0 44%, rgba(0,0,0,.45) 100%) !important;
  }

  .hero-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  .hero-badge {
    display: none !important;
  }

  .hero-brand-mark {
    width: min(280px, 76vw) !important;
    margin: 0 auto 16px !important;
  }

  .eyebrow {
    margin: 0 0 12px !important;
    font-size: clamp(.92rem, 4vw, 1.1rem) !important;
    line-height: 1.25 !important;
  }

  .hero-title {
    width: 100% !important;
    font-size: clamp(3.15rem, 16vw, 5.9rem) !important;
    line-height: .86 !important;
    text-align: center !important;
  }

  .hero-text {
    max-width: 36rem !important;
    margin: 18px auto 0 !important;
    font-size: clamp(1.02rem, 4.25vw, 1.28rem) !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }

  .hero-actions,
  .visit-actions {
    width: 100% !important;
    max-width: 390px !important;
    margin: 22px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .btn,
  .hero-cta,
  .visit-cta {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    text-align: center !important;
    font-size: clamp(.86rem, 3.45vw, 1rem) !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
  }

  .meta-strip,
  .meta-strip.container {
    width: calc(100vw - 24px) !important;
    margin: 18px auto 24px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .meta-item {
    min-height: 86px !important;
    gap: 10px !important;
    padding: 14px 12px !important;
    border-right: 1px solid rgba(217, 103, 12, .42) !important;
    border-bottom: 1px solid rgba(217, 103, 12, .42) !important;
  }

  .meta-item:nth-child(2n) {
    border-right: 0 !important;
  }

  .meta-item:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  .meta-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .meta-copy strong {
    font-size: clamp(.82rem, 3.35vw, .98rem) !important;
    line-height: 1.08 !important;
  }

  .meta-copy small,
  .meta-review-button {
    font-size: clamp(.68rem, 2.9vw, .78rem) !important;
    line-height: 1.22 !important;
  }

  .meta-review-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .section-art,
  .section-art.container {
    width: calc(100vw - 24px) !important;
    margin: 10px auto 14px !important;
  }

  .section-art img {
    width: 100% !important;
    height: auto !important;
  }

  #menu {
    scroll-margin-top: 150px !important;
  }

  .menu-grid,
  .menu-grid.container {
    width: calc(100vw - 24px) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .menu-card,
  .menu-card.compact,
  .menu-card.highlight-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 16px 20px !important;
    border-radius: 13px !important;
  }

  .menu-card.highlight-card {
    grid-column: auto !important;
  }

  .card-header,
  .card-title {
    min-height: 0 !important;
  }

  .card-header {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }

  .card-icon-badge img {
    width: auto !important;
    height: 46px !important;
    max-width: 52px !important;
  }

  .card-title {
    justify-content: flex-start !important;
  }

  .menu-card h3,
  .card-title h3 {
    font-size: clamp(1.18rem, 6vw, 1.72rem) !important;
    line-height: 1.05 !important;
    text-align: left !important;
  }

  .section-subtitle,
  .pricing-inline {
    font-size: clamp(.88rem, 3.8vw, 1rem) !important;
    line-height: 1.35 !important;
  }

  .item-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: baseline !important;
    font-size: clamp(.95rem, 4.1vw, 1.08rem) !important;
  }

  .item-dots {
    display: none !important;
  }

  .item-name {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .item-price {
    white-space: nowrap !important;
    text-align: right !important;
  }

  .item-notes,
  .price-notes,
  .footnote {
    font-size: clamp(.84rem, 3.55vw, .95rem) !important;
    line-height: 1.38 !important;
  }

  .two-col-head,
  .two-col-row {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 10px !important;
    font-size: clamp(.9rem, 3.8vw, 1rem) !important;
  }

  .highlight-card h3 {
    max-width: 100% !important;
    font-size: clamp(2rem, 10vw, 3.4rem) !important;
    text-align: center !important;
  }

  .highlight-card .highlight-icon-under img,
  .card-icon-badge-lg img {
    height: 76px !important;
    max-width: 112px !important;
  }

  .big-price {
    font-size: clamp(2.55rem, 12vw, 4rem) !important;
  }

  .pitmaster-special-note.container {
    width: calc(100vw - 28px) !important;
    margin: 20px auto 0 !important;
    font-size: clamp(.94rem, 3.9vw, 1.08rem) !important;
    line-height: 1.42 !important;
  }

  .visit-section,
  .visit-section.container,
  .visit-section.container.panel {
    width: calc(100vw - 24px) !important;
    margin: 28px auto 0 !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    overflow: visible !important;
  }

  .visit-copy,
  .visit-info,
  .visit-photo-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }

  .visit-heading {
    width: min(320px, 100%) !important;
    margin: 0 auto !important;
  }

  .visit-text {
    margin: 16px auto 0 !important;
    max-width: 36rem !important;
    font-size: clamp(1rem, 4.1vw, 1.18rem) !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  .visit-info ul {
    gap: 0 !important;
  }

  .visit-info li {
    gap: 12px !important;
    padding: 14px 0 !important;
  }

  .visit-info strong {
    font-size: clamp(1.02rem, 4.3vw, 1.22rem) !important;
    line-height: 1.18 !important;
  }

  .visit-info small {
    font-size: clamp(.88rem, 3.6vw, 1rem) !important;
  }

  .visit-photo {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  .visit-photo-wrap > span {
    display: block !important;
    margin-top: 10px !important;
    font-size: clamp(.84rem, 3.55vw, .98rem) !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }

  .footer,
  .footer.container {
    width: calc(100vw - 24px) !important;
    margin: 26px auto 0 !important;
    padding: 22px 0 30px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    text-align: center !important;
  }

  .footer-logo {
    width: min(260px, 75vw) !important;
  }

  .footer-note,
  .footer-credit {
    font-size: clamp(.88rem, 3.7vw, 1rem) !important;
    line-height: 1.45 !important;
  }

  .socials {
    width: 100% !important;
    max-width: 360px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .social-link,
  .footer .social-link {
    width: 54px !important;
    height: 54px !important;
  }

  .social-link img,
  .footer .social-link img {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 560px) {
  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 330px !important;
  }

  .header-actions {
    grid-template-columns: 1fr !important;
    max-width: 330px !important;
  }

  .top-phone-cta {
    display: none !important;
  }

  .hero-actions,
  .visit-actions {
    grid-template-columns: 1fr !important;
    max-width: 330px !important;
  }

  .meta-strip,
  .meta-strip.container {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }

  .meta-item,
  .meta-item:nth-child(2n),
  .meta-item:nth-last-child(-n+2) {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(217, 103, 12, .42) !important;
  }

  .meta-item:last-child {
    border-bottom: 0 !important;
  }

  .menu-card[data-section="sides"] .menu-item {
    width: 100% !important;
  }

  .two-col-head,
  .two-col-row {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 8px !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .topbar,
  .topbar.container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .brand img {
    width: min(240px, 82vw) !important;
  }

  .hero-title {
    font-size: clamp(2.75rem, 17vw, 4.5rem) !important;
  }

  .card-header {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .card-icon-badge img {
    height: 40px !important;
    max-width: 44px !important;
  }
}

/* About and gallery mobile pages. */
@media (max-width: 760px) {
  .about-hero.container,
  .about-story.container,
  .about-visit.container,
  .gallery-hero.container,
  .gallery-showcase.container,
  .gallery-grid-section.container,
  .gallery-cta.container {
    width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .about-hero,
  .gallery-hero,
  .gallery-cta {
    padding: 34px 18px !important;
    text-align: center !important;
  }

  .about-story,
  .about-visit,
  .gallery-showcase,
  .gallery-grid-section {
    padding: 18px !important;
  }

  .about-hero h1,
  .gallery-hero h1,
  .gallery-cta h2 {
    font-size: clamp(2.7rem, 13vw, 4.8rem) !important;
    line-height: .95 !important;
  }

  .about-hero p,
  .gallery-hero p,
  .gallery-cta p {
    font-size: clamp(1rem, 4vw, 1.14rem) !important;
    line-height: 1.45 !important;
  }

  .gallery-stage {
    min-height: 260px !important;
  }

  .gallery-caption-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .gallery-arrow {
    width: 42px !important;
    height: 42px !important;
  }

  .gallery-thumb {
    min-height: 180px !important;
  }
}

/* Popup mobile sizing. */
@media (max-width: 640px) {
  body.modal-open {
    overflow: hidden !important;
  }

  .welcome-modal-panel {
    width: calc(100vw - 28px) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    padding: 24px 18px 20px !important;
    border-radius: 16px !important;
  }

  .welcome-modal-logo {
    width: min(240px, 78vw) !important;
    margin-inline: auto !important;
  }

  .welcome-modal-panel h2 {
    font-size: clamp(1.65rem, 7vw, 2.25rem) !important;
    line-height: 1.05 !important;
  }

  .welcome-modal-panel p {
    font-size: clamp(.96rem, 3.8vw, 1.05rem) !important;
    line-height: 1.45 !important;
  }

  .welcome-modal-close {
    width: 42px !important;
    height: 42px !important;
    top: 8px !important;
    right: 8px !important;
  }
}

/*
 * 2026-06-17 hard mobile overflow fix.
 * The desktop-exact asset theme uses large image/icon slices. On phones those
 * must be constrained aggressively so the page never becomes wider than the viewport.
 */
@media (max-width: 860px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.modal-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .site-shell,
  .container,
  .topbar,
  .hero,
  .hero.container,
  .meta-strip,
  .section-art,
  .menu-grid,
  .visit-section,
  .footer,
  main,
  section,
  article,
  div {
    max-width: 100% !important;
  }

  .container,
  .topbar.container,
  .hero.container,
  .meta-strip.container,
  .section-art.container,
  .menu-grid.container,
  .visit-section.container,
  .footer.container,
  .about-hero.container,
  .about-story.container,
  .about-visit.container,
  .gallery-hero.container,
  .gallery-showcase.container,
  .gallery-grid-section.container,
  .gallery-cta.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .topbar,
  .topbar.container {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 16px 14px 18px !important;
    overflow: hidden !important;
  }

  .brand,
  .brand img {
    max-width: 100% !important;
  }

  .brand img {
    width: min(300px, 82vw) !important;
    height: auto !important;
  }

  .nav {
    width: 100% !important;
    max-width: 360px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    justify-content: center !important;
    justify-items: center !important;
    font-size: clamp(1.05rem, 5.2vw, 1.45rem) !important;
    line-height: 1 !important;
  }

  .nav a {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 4px 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .top-cta,
  .btn,
  .hero-cta,
  .visit-cta,
  .welcome-modal-button {
    width: 100% !important;
    max-width: 330px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  .hero,
  .hero.container {
    display: block !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .hero-copy,
  .hero-copy.panel {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 32px 18px 28px !important;
    text-align: center !important;
  }

  .hero-copy::before,
  .hero::before,
  .hero::after {
    max-width: 100% !important;
  }

  .hero-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(3rem, 16vw, 5.1rem) !important;
    line-height: .9 !important;
    overflow-wrap: anywhere !important;
  }

  .hero-text,
  .eyebrow {
    max-width: 100% !important;
    text-align: center !important;
  }

  .hero-media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .hero-photo {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .hero-actions,
  .visit-actions,
  .header-actions {
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .meta-strip,
  .meta-strip.container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .meta-item,
  .meta-item:nth-child(n) {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 16px 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(217, 103, 12, .34) !important;
    text-align: left !important;
  }

  .meta-item:last-child {
    border-bottom: 0 !important;
  }

  .meta-icon {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    flex: 0 0 42px !important;
  }

  .meta-copy,
  .meta-copy strong,
  .meta-copy small {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .section-art,
  .section-art.container {
    padding: 22px 16px !important;
    overflow: hidden !important;
  }

  .menu-grid,
  .menu-grid.container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  .menu-card,
  .menu-card[data-section],
  .menu-card.highlight-card,
  .menu-card[data-section="wholeSmoke"] {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    overflow: hidden !important;
  }

  .item-row,
  .two-col-row,
  .two-col-head,
  .feature-meta {
    min-width: 0 !important;
  }

  .item-name,
  .two-col-row .name,
  .item-notes,
  .price-notes,
  .footnote {
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }

  .visit-section,
  .visit-section.container,
  .visit-section.container.panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 22px 14px !important;
    overflow: hidden !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  .visit-copy,
  .visit-info,
  .visit-photo-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  .visit-heading {
    width: min(320px, 90vw) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .visit-text {
    max-width: 100% !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
    font-size: clamp(1rem, 4.4vw, 1.18rem) !important;
    line-height: 1.45 !important;
  }

  .visit-info {
    display: block !important;
  }

  .visit-info ul {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .visit-info li,
  .visit-info li.hours-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 16px 4px !important;
    overflow: hidden !important;
  }

  .visit-info li > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .visit-icon,
  .visit-info img.visit-icon {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    min-width: 0 !important;
    object-fit: contain !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
  }

  .visit-info strong,
  .visit-info small,
  .hours-list,
  .hours-list span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .visit-info strong {
    font-size: clamp(1.06rem, 5vw, 1.32rem) !important;
    line-height: 1.12 !important;
  }

  .visit-info small {
    display: block !important;
    font-size: clamp(.92rem, 4.2vw, 1.04rem) !important;
    line-height: 1.35 !important;
  }

  .visit-photo-wrap {
    min-height: 0 !important;
    text-align: center !important;
  }

  .visit-photo {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .visit-photo-wrap > span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .footer,
  .footer.container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 14px 34px !important;
    margin: 0 !important;
    gap: 16px !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .socials {
    max-width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  .welcome-modal {
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  .welcome-modal-panel {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    padding: 22px 16px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
  }

  .welcome-modal.is-open .welcome-modal-panel {
    transform: none !important;
  }

  .welcome-modal-logo {
    width: min(250px, 76vw) !important;
    max-width: 100% !important;
  }

  .welcome-modal-panel h2 {
    font-size: clamp(1.68rem, 8.5vw, 2.35rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .welcome-modal-panel p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(.94rem, 4.3vw, 1.08rem) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  .welcome-modal-button {
    width: 100% !important;
    max-width: 300px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 380px) {
  .nav {
    max-width: 300px !important;
    font-size: 1rem !important;
  }

  .visit-info li,
  .visit-info li.hours-item,
  .meta-item,
  .meta-item:nth-child(n) {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .visit-icon,
  .visit-info img.visit-icon,
  .meta-icon {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
}

/* 2026-06-18 mobile menu icon placement update.
   Anchor the food icons into the top-left corner on phone/tablet views so
   title alignment stays consistent even when headings wrap across lines. */
@media (max-width: 760px) {
  .menu-card .card-header,
  .menu-card[data-section] .card-header {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 0 12px !important;
    padding: 0 52px !important;
    text-align: center !important;
  }

  .menu-card .card-header::after,
  .menu-card[data-section] .card-header::after {
    content: none !important;
    display: none !important;
  }

  .menu-card .card-icon-badge,
  .menu-card[data-section] .card-icon-badge {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    line-height: 0 !important;
    z-index: 1 !important;
  }

  .menu-card .card-icon-badge img,
  .menu-card[data-section] .card-icon-badge img {
    display: block !important;
    width: auto !important;
    height: 42px !important;
    max-width: 50px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  .menu-card .card-title,
  .menu-card[data-section] .card-title {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .menu-card .card-title h3,
  .menu-card[data-section] .card-title h3,
  .menu-card h3 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.05 !important;
  }

  .menu-card .title-flare,
  .menu-card[data-section] .title-flare {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
}

@media (max-width: 420px) {
  .menu-card .card-header,
  .menu-card[data-section] .card-header {
    min-height: 44px !important;
    padding: 0 44px !important;
  }

  .menu-card .card-icon-badge,
  .menu-card[data-section] .card-icon-badge {
    width: 38px !important;
    height: 38px !important;
  }

  .menu-card .card-icon-badge img,
  .menu-card[data-section] .card-icon-badge img {
    height: 36px !important;
    max-width: 42px !important;
    max-height: 36px !important;
  }

  .menu-card .card-title,
  .menu-card[data-section] .card-title {
    min-height: 44px !important;
    gap: 6px !important;
  }
}

/* 2026-06-18 v2.0.4: force mobile menu icons into the card's top-left corner.
   This uses the card as the positioning container instead of the header/title row,
   so previous centering/grid rules cannot pull the icons back toward the title. */
@media (max-width: 760px) {
  .menu-card,
  .menu-card[data-section] {
    position: relative !important;
  }

  .menu-card .card-header,
  .menu-card[data-section] .card-header {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .menu-card .card-header::after,
  .menu-card[data-section] .card-header::after {
    content: none !important;
    display: none !important;
  }

  .menu-card .card-icon-badge,
  .menu-card[data-section] .card-icon-badge {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    transform: none !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .menu-card .card-icon-badge img,
  .menu-card[data-section] .card-icon-badge img {
    display: block !important;
    width: auto !important;
    height: 46px !important;
    max-width: 52px !important;
    max-height: 46px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  .menu-card .card-title,
  .menu-card[data-section] .card-title {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .menu-card .card-title h3,
  .menu-card[data-section] .card-title h3,
  .menu-card h3 {
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .menu-card .card-icon-badge,
  .menu-card[data-section] .card-icon-badge {
    top: 16px !important;
    left: 16px !important;
    width: 46px !important;
    height: 46px !important;
  }

  .menu-card .card-icon-badge img,
  .menu-card[data-section] .card-icon-badge img {
    height: 40px !important;
    max-width: 46px !important;
    max-height: 40px !important;
  }
}


/* 2026-06-18 v2.0.5: mobile icons use a two-column header.
   This keeps icons pinned to the left edge of the header instead of participating
   in the centered title group. Also emitted inline in wp_head to beat cache/order. */
@media (max-width: 760px) {
  body .menu-card[data-section] .card-header,
  body .menu-card .card-header {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-areas: "bgicon bgtitle" !important;
    align-items: start !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
  }
  body .menu-card[data-section] .card-header::after,
  body .menu-card .card-header::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body .menu-card[data-section] .card-icon-badge,
  body .menu-card .card-icon-badge {
    grid-area: bgicon !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    align-self: start !important;
    line-height: 0 !important;
    float: none !important;
    pointer-events: none !important;
  }
  body .menu-card[data-section] .card-icon-badge img,
  body .menu-card .card-icon-badge img {
    width: auto !important;
    height: 46px !important;
    max-width: 54px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }
  body .menu-card[data-section] .card-title,
  body .menu-card .card-title {
    grid-area: bgtitle !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }
  body .menu-card[data-section] .card-title h3,
  body .menu-card .card-title h3,
  body .menu-card h3 {
    text-align: center !important;
    margin: 0 !important;
  }
}
@media (max-width: 420px) {
  body .menu-card[data-section] .card-header,
  body .menu-card .card-header {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    min-height: 46px !important;
  }
  body .menu-card[data-section] .card-icon-badge,
  body .menu-card .card-icon-badge {
    width: 46px !important;
    height: 46px !important;
  }
  body .menu-card[data-section] .card-icon-badge img,
  body .menu-card .card-icon-badge img {
    height: 40px !important;
    max-width: 46px !important;
    max-height: 40px !important;
  }
  body .menu-card[data-section] .card-title,
  body .menu-card .card-title {
    min-height: 46px !important;
    gap: 6px !important;
  }
}