/* ==========================================================================
   Menu
   Every rule below is a lift of an inline style attribute from the Menu design
   source, or of a rule from its helmet block. Values are unchanged; only
   their location moved. Where the design authored two near-identical
   treatments with different numbers, both numbers survive as modifiers.

   Menu is the LOCKED page (CLAUDE.md). Nothing here may change a size, a
   colour or a wrap that the client signed off.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell
   --bb-anchor is the jump-link offset: 135px normally, 199px below 1180px
   where the main nav wraps to two rows. It gives ~18px of clearance under the
   sticky bar. Both numbers are client-approved — do not "tidy" them.
   -------------------------------------------------------------------------- */
html { --bb-anchor: 135px; }

@media (max-width: 1180px) {
	html { --bb-anchor: 199px; }
}

body { background: #DFD6C8; margin: 0; padding: 0; }

.bb-screen { background: #DFD6C8; }

/* The orange (Brunch/Brew) and cream (Lunch) separator bullets. The character
   is content; only its colour is design, so it lives here. */
.bb-dot { color: #E47245; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bb-menu-hero {
	position: relative;
	z-index: 0;
	background: #DCB99D;
	border-bottom: 1.5px solid #231F20;
	overflow: hidden;
}

.bb-menu-hero__beans {
	position: absolute;
	top: 110px;
	left: 0;
	bottom: 0;
	width: 340px;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

/* Position, size, rotation and the 80ms stagger step are all derived from a
   bean's place in the scatter, so they are nth-child rules rather than fields
   or inline styles. Extra steps are listed so an eighth bean still cascades. */
.bb-menu-hero__bean {
	position: absolute;
	top: var(--bb-bean-top, 0);
	left: var(--bb-bean-left, 0);
	width: var(--bb-bean-w, 80px);
	opacity: 0;
	transform: translateX(-160px) rotate(var(--bb-bean-rot, 0deg));
	transition: opacity 600ms cubic-bezier(.22, .61, .36, 1), transform 600ms cubic-bezier(.22, .61, .36, 1);
	transition-delay: 0ms;
}

.bb-menu-hero__bean.is-in {
	opacity: 1;
	transform: translateX(0) rotate(var(--bb-bean-rot, 0deg));
}

.bb-menu-hero__bean:nth-child(1) { --bb-bean-top: 6%;  --bb-bean-left: 0%;  --bb-bean-w: 84px; --bb-bean-rot: -18deg; transition-delay: 0ms; }
.bb-menu-hero__bean:nth-child(2) { --bb-bean-top: 3%;  --bb-bean-left: 32%; --bb-bean-w: 92px; --bb-bean-rot: 10deg;  transition-delay: 80ms; }
.bb-menu-hero__bean:nth-child(3) { --bb-bean-top: 9%;  --bb-bean-left: 58%; --bb-bean-w: 70px; --bb-bean-rot: -24deg; transition-delay: 160ms; }
.bb-menu-hero__bean:nth-child(4) { --bb-bean-top: 18%; --bb-bean-left: 14%; --bb-bean-w: 64px; --bb-bean-rot: 22deg;  transition-delay: 240ms; }
.bb-menu-hero__bean:nth-child(5) { --bb-bean-top: 16%; --bb-bean-left: 44%; --bb-bean-w: 96px; --bb-bean-rot: -8deg;  transition-delay: 320ms; }
.bb-menu-hero__bean:nth-child(6) { --bb-bean-top: 32%; --bb-bean-left: 66%; --bb-bean-w: 78px; --bb-bean-rot: 28deg;  transition-delay: 400ms; }
.bb-menu-hero__bean:nth-child(7) { --bb-bean-top: 38%; --bb-bean-left: 2%;  --bb-bean-w: 88px; --bb-bean-rot: -2deg;  transition-delay: 480ms; }
.bb-menu-hero__bean:nth-child(8) { transition-delay: 560ms; }

/* Position values come from the source's authoring props (top 96px, right 0,
   width 340px). The drag/resize handler behind them was a design-editor
   affordance, not site behaviour, and is not ported. */
.bb-menu-hero__donut {
	position: absolute;
	top: 96px;
	right: 0;
	width: 340px;
	height: auto;
	z-index: -1;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transform: translateX(220px);
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.bb-menu-hero__donut.is-in { opacity: 1; transform: translateX(0); }

/* Top padding is measured from the LIVE header height, never from a hardcoded
   one: site.js publishes --bb-header-h (~101px desktop, ~89px on phones) and
   the fallback is only what applies before the script runs. The 8px the lockup
   carries as its own margin-top is subtracted here, so the number added to the
   variable plus that margin is the gap the client asked for: 64px desktop. */
.bb-menu-hero__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(var(--bb-header-h, 101px) + 56px) 24px 76px;
}

.bb-menu-hero__lockup {
	width: min(100%, 650px);
	height: auto;
	display: block;
	margin: 8px auto 0;
}

.bb-menu-hero__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 44px;
}

.bb-menu-hero__card { background: #E5E3DA; padding: 34px 34px; }

.bb-menu-hero__eyebrow {
	/* display:block is LOAD-BEARING. This was an <h2> and inherited block from
	   the UA stylesheet; it is a <span> now (it is a category label, not a
	   heading, and as an h2 it sat before the h1 and broke the outline). As an
	   inline span it would run onto the title's line and drop the 8px below. */
	display: block;
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #E47245;
	margin: 0 0 8px;
}

.bb-menu-hero__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.bb-menu-hero__body { margin: 0 0 24px; }
.bb-menu-hero__body p { font-size: 16px; line-height: 1.6; color: #231F20; margin: 0 0 24px; }

/* --------------------------------------------------------------------------
   Sticky jump bar + carousel
   Client-approved at all widths. The bar is pinned with a literal top:102px —
   Catering uses a --bb-bar-top variable instead; the two pages genuinely
   differ, and Menu's is kept as authored. menu.js re-seats the bar under the
   nav as the header shrinks, through --bb-jumpbar-top; the 102px below is the
   value it holds before any script runs and whenever the header is absent.
   -------------------------------------------------------------------------- */
.bb-menu-jumpbar {
	position: sticky;
	top: var(--bb-jumpbar-top, 102px);
	z-index: 50;
	background: #231F20;
	border-bottom: 1.5px solid #231F20;
}

.bb-menu-jumpbar__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
}

/* Chevrons appear only while the row actually overflows; menu.js toggles
   is-on from a scroll listener plus a 250ms poll. */
.bb-menu-jump__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	/* BugHerd #4: "make these slider arrows a little smaller? so theres like
	   2-3px extra gap on top and bottom". The bar is 42px tall, so 38px left
	   2px each side; 32px leaves 5px. Catering's .bb-jump__btn is the same
	   component and is matched. */
	width: 32px;
	height: 32px;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: #DFD6C8;
	color: #231F20;
	border: 1.5px solid #231F20;
	border-radius: 999px;
	cursor: pointer;
	line-height: 0;
}

.bb-menu-jump__btn.is-on { display: flex; }
.bb-menu-jump__btn:hover { background: #E47245; color: #FBF8F1; }

.bb-menu-jump__btn--left { left: 2px; }
.bb-menu-jump__btn--right { right: 2px; }

.bb-menu-jump__icon { width: 16px; height: 16px; display: block; stroke-width: 3.25; }

.bb-menu-jump__track {
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 22px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Smooth scrolling is asked for per-call in scrollTo({behavior:'smooth'}).
	   Declaring it here as well would stall the programmatic scroll. */
	scroll-behavior: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bb-menu-jump__track::-webkit-scrollbar { display: none; height: 0; }

.bb-menu-jump__link {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #DFD6C8;
	text-decoration: none;
	white-space: nowrap;
}

/* site.css sets a{color:#E47245}; the source's inline colour outranked it. */
.bb-menu-jump__link:hover,
.bb-menu-jump__link:visited { color: #DFD6C8; }

.bb-menu-jump__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 200ms ease;
}

.bb-menu-jump__fade.is-on { opacity: 1; }

.bb-menu-jump__fade--left {
	left: 0;
	background: linear-gradient(to right, #231F20 20%, rgba(35, 31, 32, 0));
}

.bb-menu-jump__fade--right {
	right: 0;
	background: linear-gradient(to left, #231F20 20%, rgba(35, 31, 32, 0));
}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.bb-menu-band--brunch { background: #DFD6C8; }

.bb-menu-band--lunch {
	position: relative;
	overflow: visible;
	background: #E47245;
	border-top: 1.5px solid #231F20;
	border-bottom: 1.5px solid #231F20;
}

.bb-menu-band--brew { background: #DFD6C8; color: #231F20; }

.bb-menu-band__trim {
	position: absolute;
	left: 0;
	right: 0;
	height: 39px;
	background-size: auto 39px;
	background-repeat: repeat-x;
	pointer-events: none;
}

.bb-menu-band__trim--top {
	top: -38px;
	background-image: url("../../images/trim-triangles-orange.png");
}

.bb-menu-band__trim--bottom {
	bottom: -38px;
	background-image: url("../../images/trim-triangles-orange-flipped.png");
}

.bb-menu-band__head {
	scroll-margin-top: var(--bb-anchor);
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 24px 0;
}

.bb-menu-band__title {
	width: min(100%, 880px);
	height: auto;
	display: block;
	margin: 0 auto;
}

.bb-menu-band__title--lunch { width: min(100%, 700px); }

/* Source closes the Lunch band with two empty spacers, 56px + 80px. */
.bb-menu-band__tail { height: 136px; }

.bb-menu-band__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 140px 24px 88px;
}

.bb-menu-band__brewhead {
	scroll-margin-top: var(--bb-anchor);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.bb-menu-band__brewtitle { height: 70px; width: auto; display: block; }
/* Five separate badge images in a wrapping, centred row. Was a single flat
   PNG; see the note in page-templates/menu.php. Desktop keeps the authored
   130px badge height and the row's original look. */
.bb-menu-band__brewbadges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	/* 34px reproduces the gutters that were baked into the original single
	   image: 163px between badges at 2877px wide, scaled to the authored 130px
	   badge height (163 * 130/621.5 = 34.1). This keeps the approved desktop
	   row at its original ~600px width - a smaller gap would silently narrow
	   it. */
	gap: 34px;
}

.bb-menu-band__brewbadge { height: 130px; width: auto; display: block; }

/* --------------------------------------------------------------------------
   Section frame
   -------------------------------------------------------------------------- */
.bb-menu-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 24px 0;
}

/* Only the Lunch band opens on a shorter gap. */
.bb-menu-band--lunch .bb-menu-section--first { padding-top: 56px; }

/* Margin longhands: the base rule above sets `margin: 0 auto`, and a
   shorthand here would silently re-centre nothing while zeroing the sides. */
.bb-menu-band--brew .bb-menu-section {
	max-width: none;
	margin-top: 72px;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
}

/* The ids live on these zero-height markers, never on the padded wrapper:
   an id on the wrapper puts a 64px dead gap under the bar on jump. */
.bb-menu-section__marker { scroll-margin-top: var(--bb-anchor); }

/* Espresso's marker is the one that stands alone, above Fresh Brews. */
.bb-menu-section__marker--lead { margin-top: 56px; }

.bb-menu-section__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
}

.bb-menu-section__mark { height: 20px; width: auto; display: block; }

.bb-menu-section__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0;
}

.bb-menu-section__flag {
	font-family: 'Fonseca Script', cursive;
	font-size: 20px;
	text-transform: none;
	color: #E47245;
}

.bb-menu-section__rule {
	flex: 1;
	height: 5px;
	border-top: 1.5px solid #231F20;
	border-bottom: 1.5px solid #231F20;
}

.bb-menu-section__price {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #E47245;
	white-space: nowrap;
	text-transform: uppercase;
}

/* 15px, not 14px: the client's floor allows Menu's condensed in-menu labels
   to sit at 15px and they must not be normalised to a scale. */
.bb-menu-section__sub {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #231F20;
	margin: 0 0 26px;
}

.bb-menu-band--brew .bb-menu-section__sub { margin-bottom: 24px; }

/* Stands in for a subtitle so the run-in to the list keeps its rhythm. */
.bb-menu-section__gap { height: 18px; }
.bb-menu-band--brew .bb-menu-section__gap { height: 16px; }

/* --------------------------------------------------------------------------
   Lunch band: the prices, flags and bullets flip from orange to cream on the
   orange ground. Same markup, one band-scoped override.
   -------------------------------------------------------------------------- */
.bb-menu-band--lunch .bb-dot,
.bb-menu-band--lunch .bb-menu-item__price,
.bb-menu-band--lunch .bb-menu-item__flag,
.bb-menu-band--lunch .bb-menu-item__tnote { color: #FBF8F1; }

.bb-menu-band--lunch .bb-menu-section__price { font-size: 22px; color: #FBF8F1; }

/* --------------------------------------------------------------------------
   Two-column lists
   The left column runs top to bottom and the right column starts again at the
   top, exactly like the PDF. Which entry falls where is computed in the
   template from the row index — never stored on an item.
   -------------------------------------------------------------------------- */
.bb-menu-cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 56px;
}

.bb-menu-cols--single { display: block; max-width: 720px; }

.bb-menu-cols--after-chips { grid-template-columns: 1fr 1fr; margin-top: 28px; }

.bb-menu-item { margin-bottom: 26px; }

.bb-menu-item__row { display: flex; align-items: baseline; gap: 10px; }

.bb-menu-item__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 21px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.bb-menu-item__flag {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	color: #E47245;
}

.bb-menu-item__tnote { font-size: 14px; color: #FBF8F1; }

.bb-menu-item__dots { flex: 1; border-bottom: 1.5px dotted #231F20; }

.bb-menu-item__price {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #E47245;
	white-space: nowrap;
	text-transform: uppercase;
}

.bb-menu-item__desc {
	font-size: 15px;
	line-height: 1.55;
	color: #231F20;
	margin: 6px 0 0;
}

.bb-menu-item__meta {
	font-size: 14px;
	line-height: 1.5;
	color: #231F20;
	margin: 8px 0 0;
}

.bb-menu-item__metalabel {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-right: 6px;
}

/* The bold "add-ons" block that closes several columns. */
.bb-menu-note { margin-bottom: 26px; }

.bb-menu-note__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.bb-menu-note__text {
	font-size: 14px;
	line-height: 1.5;
	color: #231F20;
	margin-top: 6px;
}

.bb-menu-note__text strong { color: #E47245; font-weight: 700; }

/* The condensed orange one-liner the source uses to close a column. */
.bb-menu-flagnote {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #E47245;
	margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Chip grids — Signature Lattes, Boba, Refreshers, Frozen, Mocktails, Tea
   -------------------------------------------------------------------------- */
.bb-menu-chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 24px;
}

.bb-menu-chips--1 { grid-template-columns: repeat(1, 1fr); }
.bb-menu-chips--3 { grid-template-columns: repeat(3, 1fr); }

.bb-menu-chips__col { display: flex; flex-direction: column; gap: 10px; }

.bb-menu-chip {
	border: 1.5px solid #231F20;
	border-radius: 8px;
	padding: 12px 16px;
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
}

.bb-menu-footnote {
	background: #E47245;
	color: #FBF8F1;
	border: 1.5px solid #231F20;
	border-radius: 8px;
	padding: 18px 22px;
	margin-top: 24px;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
}

.bb-menu-footnote .bb-dot { color: #FBF8F1; }

/* --------------------------------------------------------------------------
   Fresh Brews — the Sm/Md/Lg price table and its Dairy & Subs panel
   -------------------------------------------------------------------------- */
.bb-menu-brews {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 56px;
}

.bb-menu-brews__sizes {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #231F20;
	margin-bottom: 10px;
}

.bb-menu-brews__size { width: 56px; text-align: right; }

.bb-menu-brew { padding: 6px 0; }

.bb-menu-brew__row { display: flex; align-items: baseline; gap: 10px; }

.bb-menu-brew__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 19px;
	text-transform: uppercase;
}

.bb-menu-brew__dots { flex: 1; border-bottom: 1.5px dotted #231F20; }

.bb-menu-brew__price {
	width: 56px;
	text-align: right;
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #E47245;
}

/* The em dash that stands in for a size that is not offered is ink, not
   orange, so it does not read as a price. */
.bb-menu-brew__price--none { color: #231F20; }

.bb-menu-brew__desc {
	font-size: 14px;
	line-height: 1.5;
	color: #231F20;
	margin: 4px 0 0;
}

.bb-menu-brews__notice {
	border: 1.5px solid #231F20;
	border-radius: 8px;
	padding: 14px 18px;
	margin-top: 22px;
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #231F20;
	line-height: 1.7;
	text-align: center;
}

/* The panel is the house octagon at the source's own 16px cut, so it drives
   components.css's custom properties rather than adding a shared modifier. */
.bb-menu-brews__panel {
	align-self: start;
	--bb-oct-cut: 16px;
	--bb-oct-cut-in: 15.2px;
	--bb-oct-off: 8px;
}

.bb-menu-panel { background: #E5E3DA; padding: 24px 26px; }

.bb-menu-panel__heading {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #231F20;
	margin: 0 0 10px;
}

.bb-menu-panel__heading + .bb-menu-panel__heading,
.bb-menu-panel__lead + .bb-menu-panel__heading,
.bb-menu-panel__text + .bb-menu-panel__heading { margin-top: 18px; }

.bb-menu-panel__lead {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #E47245;
	margin: 0 0 6px;
}

.bb-menu-panel__text { font-size: 15px; line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   Frozen Drinks
   -------------------------------------------------------------------------- */
.bb-menu-frozen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
}

/* --------------------------------------------------------------------------
   Fried Chicken — the sauce bar above the list and the toppings block below
   -------------------------------------------------------------------------- */
.bb-menu-saucebar {
	background: #DCB99D;
	color: #231F20;
	border: 1.5px solid #231F20;
	border-radius: 8px;
	padding: 16px 22px;
	margin: 0 0 26px;
}

.bb-menu-saucebar__label {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-right: 8px;
}

.bb-menu-saucebar__text { font-size: 15px; line-height: 1.6; }

.bb-menu-tail {
	border-top: 1.5px solid #231F20;
	padding-top: 18px;
	margin-top: 6px;
}

.bb-menu-tail__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 12px;
}

.bb-menu-tail__line {
	font-size: 15px;
	line-height: 1.6;
	color: #231F20;
	margin-top: 0;
	margin-bottom: 10px;
}

.bb-menu-tail__line:last-child { margin-bottom: 0; }

.bb-menu-tail__label {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-right: 8px;
}

/* --------------------------------------------------------------------------
   Allergy notice, closing badges
   -------------------------------------------------------------------------- */
.bb-menu-allergy {
	max-width: 1240px;
	margin: 0 auto;
	padding: 12px 24px 140px;
}

.bb-menu-allergy__box {
	background: #D2C082;
	border: 1.5px solid #231F20;
	border-radius: 8px;
	padding: 16px 20px;
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
}

.bb-menu-closing {
	margin-top: 24px;
	padding-top: 26px;
	border-top: 1.5px solid #231F20;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	align-items: center;
}

.bb-menu-closing__badges { display: flex; gap: 14px; flex-wrap: wrap; }

.bb-menu-badge {
	border: 1.5px solid #231F20;
	border-radius: 8px;
	padding: 12px 18px;
	text-align: center;
}

.bb-menu-badge__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bb-menu-badge__text {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #231F20;
	margin-top: 4px;
}

/* A sixth padding/size pair, authored only here. */
.bb-menu-closing__cta { padding: 15px 32px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Footer
   Menu authors its two footer column headings at 15px where the rest of the
   site uses 14px. site.css holds the 14px base; this keeps Menu's own look.
   -------------------------------------------------------------------------- */
/* Footer column headings are the sitewide 14px. The source authored them
   at 15px on this page only; the client has confirmed that was an oversight,
   not a decision, so it is normalised rather than preserved. */

/* ==========================================================================
   Menu — responsive
   Desktop above 900px is client-approved and untouched. The menu copy, the
   section order and the left-down-then-right column split are LOCKED and are
   not touched here; neither is the jump bar, whose carousel is approved at
   every width. Everything below is layout only — no type is shrunk, so the
   14px floor and Menu's own 15px condensed labels are intact.
   ========================================================================== */

/* ---- Hero decoration ----
   The donut and the bean scatter are absolutely placed against the full-bleed
   hero, but the "Handmade / Fresh Daily in Murfreesboro, TN" lockup is centred
   in the 1240px inner. At 1440 they clear each other; as the viewport narrows
   the lockup grows toward both edges and the ink "MURFREESBORO, TN" ends up
   sitting on the dark side of the donut photograph.

   ROUND 2: the client asked to "keep Donut and Beans just on very sides", so
   they are no longer dropped at the stack point. The collision is solved by
   separating them from the wordmark instead: each is pushed out past the
   viewport edge (the hero's own overflow:hidden crops it) and the lockup takes
   a PERCENTAGE cap below 900 so the clear ground at each side scales with the
   viewport instead of vanishing the moment the lockup goes full width. The
   lockup keeps its 650px desktop size untouched. */
@media (max-width: 1305px) {
	.bb-menu-hero__donut { width: 320px; right: -30px; }
}

@media (max-width: 1200px) {
	.bb-menu-hero__donut { width: 280px; right: -70px; }
	.bb-menu-hero__beans { width: 200px; }
}

/* The brew head's title and badge strip sit side by side until the 40px gutter
   starts crowding them. */
@media (max-width: 1024px) {
	.bb-menu-band__brewhead { gap: 28px; }
	.bb-menu-hero__donut { width: 200px; right: -70px; }
	.bb-menu-hero__beans { width: 160px; }
}

@media (max-width: 900px) {
	/* ---- Hero ----
	   40px + the lockup's own 8px margin-top = the 48px gap under the header
	   the client asked for at this width. The header height still comes from
	   the live variable, so the 89px phone header is handled by the same rule. */
	.bb-menu-hero__inner { padding: calc(var(--bb-header-h, 101px) + 40px) 20px 56px; }

	/* 76% keeps a proportional clear margin at each side for the art below;
	   540px is just under the 560px the 1240px inner would otherwise allow at
	   900, so the wordmark barely changes size at the stack point itself. */
	.bb-menu-hero__lockup { width: min(76%, 540px); }

	/* On the very sides, per the client. Each is pulled out past the edge and
	   cropped by .bb-menu-hero's overflow:hidden, leaving a 74px / 76px sliver
	   against a clear margin of at least 92px at every width in this band.

	   The beans keep their authored sizes and scatter and are cropped from the
	   LEFT rather than scaled down — shrinking the container alone would pile
	   80-96px beans on top of each other.

	   THE BEAN CONTAINER'S HEIGHT IS PART OF ITS REVEAL, NOT DECORATION. The
	   container is what site.js observes (data-reveal sits on it and
	   group-reveals the beans) at a 0.2 threshold, and intersection ratio is
	   AREA: `bottom: 0` made it as tall as the rest of the hero — 1283px at
	   400 against a 900px viewport — so 0.70 of its height multiplied by the
	   0.275 of its width left on screen came to 0.19 and the beans silently
	   stayed at opacity 0. Measured, not guessed. Bounding the height so the
	   whole box fits the viewport takes the height term out of the product and
	   leaves the width fraction alone as the margin: ~0.48 here. If you move
	   these, re-run the reveal check before believing the screenshot. */
	.bb-menu-hero__donut {
		display: block;
		width: 170px;
		right: -96px;
		top: calc(var(--bb-header-h, 101px) + 50px);
	}

	.bb-menu-hero__beans {
		display: block;
		width: 160px;
		left: -84px;
		top: calc(var(--bb-header-h, 101px) + 56px);
		bottom: auto;
		height: 300px;
	}

	.bb-menu-hero__cards { gap: 20px; margin-top: 32px; }

	/* "ALL HEROS center hero text" — the two hero cards are hero content, not
	   menu listing, so they centre. The CTA is an inline-block .bb-btn, so
	   text-align carries it too. */
	.bb-menu-hero__card { padding: 28px 26px; text-align: center; }
	.bb-menu-hero__body p { margin-inline: auto; }

	/* ---- Bands ----
	   Desktop-scale vertical gaps only; the side gutters step 24 -> 20 -> 16. */
	.bb-menu-band__head { padding: 56px 20px 0; }
	.bb-menu-band__inner { padding: 88px 20px 64px; }
	.bb-menu-band__tail { height: 88px; }
	.bb-menu-section { padding: 48px 20px 0; }
	.bb-menu-band--lunch .bb-menu-section--first { padding-top: 40px; }

	/* Both brew-head assets are authored at a fixed height with an auto width,
	   so they stayed 320px / 600px wide inside a 592px, 432px, 352px or 272px
	   row and were the whole page overflow from 480 down. Driving them from
	   width keeps the aspect ratio and renders identically at 900, where each
	   is still under its natural size. */
	.bb-menu-band__brewtitle { height: auto; width: min(320px, 100%); }
	/* Badge size is set once at 1024 (fixed 95px) and not touched again - see
	   the round-3 block lower down. Nothing here overrides it. */
	.bb-menu-band__brewhead { gap: 24px; }

	/* ---- Grids ----
	   site.css already drops .bb-split / .bb-g2 / .bb-g3 to one column here.
	   Their gaps were authored as column gutters; as row gutters they are far
	   too tall, and a one-column track is sized by its widest item's
	   min-content, so the children also have to be allowed to shrink. */
	.bb-menu-brews { gap: 32px; }
	.bb-menu-frozen { gap: 32px; }

	.bb-menu-brews > *,
	.bb-menu-cols > *,
	.bb-menu-chips > *,
	.bb-menu-frozen > * { min-width: 0; }

	.bb-menu-allergy { padding: 12px 20px 88px; }

	/* ---- Brew closing badges ----
	   Client: "these Brew price cards need to wrap to maybe 3 across and then
	   2 across all centered at whatever break is close to 600px."

	   They were three shrink-to-fit flex items totalling ~790px, so from 830
	   down they broke to a ragged 2 + 1 hard against the left edge. As an
	   equal-column grid they hold a real 3-across from here to 641 and drop to
	   2-across at 640 — the breakpoint in this project's set nearest her 600 —
	   with the odd third card centred under the pair. The whole row, and the
	   Order Online pill under it, centre.

	   min-width:0 is required: a grid item's automatic minimum size is its
	   min-content, and without it the longest badge would push the 1fr tracks
	   back out past the container. */
	.bb-menu-closing { justify-content: center; }

	.bb-menu-closing__badges {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		width: 100%;
		justify-content: center;
	}

	.bb-menu-badge { min-width: 0; }
}

@media (max-width: 640px) {
	/* ---- Hero art, second step out ---- */
	.bb-menu-hero__lockup { width: min(72%, 440px); }
	.bb-menu-hero__donut { width: 140px; right: -84px; }
	.bb-menu-hero__beans { width: 160px; left: -104px; height: 260px; }

	/* 3 across -> 2 across, still centred. The third card keeps a pair-sized
	   box rather than stretching to the full row; box-sizing is mandatory
	   because this is the one place a width and padding meet on this page and
	   the site runs on content-box. */
	.bb-menu-closing__badges { grid-template-columns: repeat(2, 1fr); }

	.bb-menu-closing__badges > .bb-menu-badge:nth-child(3):last-child {
		box-sizing: border-box;
		grid-column: 1 / -1;
		width: calc(50% - 6px);
		justify-self: center;
	}

	/* The head keeps [mark] TITLE ——— PRICE on one line for as long as it
	   fits. The price is a nowrap run ("Sm: 5.99 | Md: 6.99 | Lg: 7.99" is
	   178px) and below ~400 it no longer does, so it is allowed to drop to its
	   own line rather than push the head past the right edge. The rule keeps a
	   visible stub on the line above. */
	.bb-menu-section__head { flex-wrap: wrap; }
	.bb-menu-section__rule { min-width: 24px; }

	.bb-menu-band__inner { padding: 72px 20px 56px; }
	.bb-menu-band__tail { height: 64px; }
	.bb-menu-band--brew .bb-menu-section { margin-top: 48px; }
	.bb-menu-allergy { padding: 12px 20px 72px; }
	.bb-menu-closing { gap: 18px; }
}

@media (max-width: 400px) {
	/* 32px + the lockup's 8px margin = the 40px phone gap. The fallback is the
	   89px the header actually measures at this width, for the pre-script
	   paint only. */
	.bb-menu-hero__inner { padding: calc(var(--bb-header-h, 89px) + 32px) 16px 48px; }

	/* ---- Hero art, last step out ---- */
	.bb-menu-hero__lockup { width: min(70%, 300px); }
	.bb-menu-hero__donut { width: 120px; right: -78px; top: calc(var(--bb-header-h, 89px) + 42px); }

	/* Only 42-44px of clear ground is left at each side here, so the container
	   narrows and the beans step down with it rather than being cropped to a
	   sliver — at 160px wide the observed fraction fell to 0.27 and, with the
	   height already bounded, that is a thinner margin over the 0.2 threshold
	   than this is worth. Overriding `width` on the bean works where
	   overriding --bb-bean-w would not: the :nth-child rules set the VARIABLE
	   and outrank a bare class, but they never set `width` itself. */
	.bb-menu-hero__beans {
		width: 96px;
		left: -50px;
		top: calc(var(--bb-header-h, 89px) + 48px);
		height: 200px;
	}

	.bb-menu-hero__bean { width: 54px; }

	/* Two 138px tracks at 320: the inset gives way so "UNLESS OTHERWISE
	   MENTIONED" still sets on two lines rather than forcing the track wider. */
	.bb-menu-badge { padding: 12px 10px; }


	/* 34px a side left the "View Our Brunch Menu" button — 218px and nowrap,
	   from .bb-btn — nowhere to go, so the octagon's min-content came out at
	   290px inside a 272px column. Padding gives way, the button does not. */
	.bb-menu-hero__card { padding: 24px 18px; }

	.bb-menu-band__head { padding: 48px 16px 0; }
	.bb-menu-band__inner { padding: 64px 16px 48px; }
	.bb-menu-section { padding: 40px 16px 0; }
	.bb-menu-allergy { padding: 12px 16px 64px; }

	/* Narrower price columns, not smaller type. The Sm/Md/Lg table is three
	   definite-width columns, and a definite width sets a flex item's
	   min-content contribution outright, so 3 x 56px pinned the Fresh Brews
	   track at 287px inside 272px. The labels and prices keep their sizes. */
	.bb-menu-brews__sizes { gap: 8px; }
	.bb-menu-brews__size,
	.bb-menu-brew__price { width: 44px; }
	.bb-menu-brew__row { gap: 8px; }

	/* Boxed panels: the inset, never the copy. */
	.bb-menu-panel { padding: 20px 18px; }
	.bb-menu-brews__notice { padding: 12px 14px; }
	.bb-menu-saucebar { padding: 14px 16px; }
	.bb-menu-footnote { padding: 16px 16px; }
	.bb-menu-allergy__box { padding: 14px 14px; }
	.bb-menu-closing__cta { padding: 14px 22px; }
}

/* ==========================================================================
   Menu — round 3 (client review)
   ========================================================================== */

/* ---- The bean scatter was being CHOPPED, not cropped ----
   Client: "something goes weird at 1024px, the beans get cut off on the right
   and then at 900 it looks like a different image also cut off."

   Cause, measured: .bb-menu-hero__beans carries its own overflow:hidden, and
   round 2 narrowed that CONTAINER to 160px. The beans inside are placed at a
   percentage of the container plus their own pixel width, so bean 6 (left 66%,
   78px wide) needed 184px in a 160px box - the container was slicing beans in
   half down their right edge. At 900 the same butchered scatter was then
   pushed 84px off-screen, leaving a 76px strip of two overlapping beans, which
   is why it read as a different picture.

   Fix: the container keeps the 340px the scatter was authored against, so
   nothing is ever clipped by it, and the whole group is SCALED instead. The
   only crop is the viewport edge, which is the intended "on the very sides"
   look. transform-origin is top left so `left` still positions the visible
   edge predictably.

   Each step's scale + left is chosen so the scatter's right edge stays clear
   of the "Handmade" lockup's left edge at the narrowest viewport in that band.
   The lockup is min(76%,540) / min(72%,440) / min(70%,300), so the clearance
   tightens faster than the viewport does - that is why there are steps at 480
   and 400 that round 2 did not need.

   REVEAL: site.js observes THIS container at a 0.2 threshold and group-reveals
   the beans, and the ratio is of the TRANSFORMED box. Scaling down raises the
   visible fraction, so this is safer than round 2, not riskier - but it is
   still measured below, not assumed. */
@media (max-width: 1024px) {
	.bb-menu-hero__beans {
		width: 340px;
		height: 420px;
		overflow: visible;
		transform: scale(.62);
		transform-origin: top left;
		left: -30px;
	}
}

@media (max-width: 900px) {
	.bb-menu-hero__beans {
		width: 340px;
		height: 420px;
		overflow: visible;
		transform: scale(.5);
		transform-origin: top left;
		left: -56px;
		top: calc(var(--bb-header-h, 101px) + 56px);
		bottom: auto;
	}
}

@media (max-width: 640px) {
	.bb-menu-hero__beans { transform: scale(.46); left: -52px; }
}

@media (max-width: 480px) {
	.bb-menu-hero__beans { transform: scale(.38); left: -52px; }
}

@media (max-width: 400px) {
	.bb-menu-hero__beans { transform: scale(.36); left: -52px; }
}

@media (max-width: 320px) {
	.bb-menu-hero__beans { transform: scale(.32); left: -54px; }
}

/* ---- Octagon optical gutter ----
   Client: the side spacing was corrected on Catering but not here. These boxes
   sat square in their gutter, so the offset ink plate hung 8px further right
   than the left gap. Pulling the box left by exactly the plate width puts the
   plate on the padding edge and makes the OPTICAL gutters equal. .bb-oct--18
   uses an 8px plate, not 10px. */
@media (max-width: 900px) {
	.bb-menu-hero__cards > .bb-oct--18,
	.bb-menu-brews__panel { margin-right: 8px; }
}

/* ---- Brew price badges: 5 across -> 3 across -> 2 across ----
   Client: "these Brew price cards need to wrap to maybe 3 across and then 2
   across all centered at whatever break is close to 600px."
   They could not wrap before because all five were one flat image; they are
   five images now (see page-templates/menu.php). flex-basis drives the count:
   at each step the basis is just over a third / a half of the row, so the
   fourth and second items are forced onto the next line. The row is centred,
   so a short last line centres under the one above it. */
/* Client: "let's just keep them at max width 95px at 1024 and under."
   So the badge is a fixed 95px from 1024 down and never changes size again -
   no shrinking at 900 (which made them unreadable at 68px) and no growing at
   640 (which had them jump to 124px, larger on a smaller screen).

   With a FIXED badge width the wrap count is set by the row's max-width, not
   by a percentage basis. The row caps below are chosen to sit between the
   width N badges need and the width N+1 would need, so each step wraps where
   it is meant to and nothing drifts if the gap is retuned:
     5 across  5x95 + 4x25 = 575   (fits the 601px content box at 641)
     3 across  3x95 + 2x12 = 309   (4 across would need 416, so cap 330)
     2 across  2x95 + 1x10 = 200   (3 across would need 305, so cap 210) */
@media (max-width: 1024px) {
	.bb-menu-band__brewbadge {
		flex: 0 0 auto;
		height: auto;
		width: 95px;
		max-width: 95px;
	}
}

@media (max-width: 900px) {
	.bb-menu-band__brewbadges { gap: 25px; }
}

@media (max-width: 640px) {
	/* 3 across. */
	.bb-menu-band__brewbadges { gap: 12px; max-width: 330px; margin-inline: auto; }
}

@media (max-width: 480px) {
	/* 2 across, with the fifth centred on its own line. */
	.bb-menu-band__brewbadges { gap: 10px; max-width: 210px; }
}

/* ---- BREW head stacks at 1024 ----
   Client: "at 932px the images go under the word BREW and looks great ... move
   them under BREW and center BREW and the price images at 1024px - i noticed
   then for some reason at 900 they go back up to the right of the word BREW."

   The jump back up was a real side effect of the badge work above: the head is
   a flex ROW with flex-wrap, so it wrapped only when the two items stopped
   fitting. At 932 they did not fit, so the badges dropped under; by 900 the
   new badge row is narrower (443px vs the old 600px image) so it fitted beside
   the title again and popped back up. Wrapping was never a decision - it was
   whatever the arithmetic happened to do at that width.

   Stacking it explicitly at 1024 makes it deterministic: title on top, badges
   under it, both centred, and it stays that way all the way down. */
@media (max-width: 1024px) {
	.bb-menu-band__brewhead {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		flex-wrap: nowrap;
	}

	.bb-menu-band__brewtitle { margin-inline: auto; }
	.bb-menu-band__brewbadges { width: 100%; }
}