/**
 * BrewHub H3 — the whole visual layer.
 *
 * Tokens first, then primitives (shell, type, buttons, forms), then the
 * home bands in page order, then the inner-page pieces, then the chrome
 * (cart, popup, to-top) and the responsive collapses.
 *
 * Layout follows the reference's third home; palette and pairing follow
 * The Aroma Bistro & Bar brand guide (see the brand layer at the end).
 */

/*
 * The Aroma Bistro & Bar — six colours, no more. Ink holds the ground,
 * cream holds the reading bands, gold draws the rules and eyebrows,
 * oxblood gets one field of its own, terracotta stays a highlight,
 * sand is body text on ink. Deep saffron is the small-text variant of
 * gold the guide specifies for cream grounds.
 */
:root {
	--bh-ink: #16110f;
	--bh-cream: #efe7dd;
	--bh-terracotta: #6e2b2e;
	--bh-gold: #c88a36;
	--bh-gold-deep: #8a5a18;
	--bh-oxblood: #6e2b2e;
	--bh-sand: #d9cfc2;

	--bh-teal: var(--bh-ink);
	--bh-deep: var(--bh-ink);
	--bh-field: rgba(239, 231, 221, 0.06);
	--bh-border: rgba(239, 231, 221, 0.16);
	--bh-gold-soft: rgba(200, 138, 54, 0.4);
	--bh-text: var(--bh-sand);
	--bh-white: var(--bh-cream);
	--bh-display: 'Cormorant Garamond', serif;
	--bh-body: 'Hanken Grotesk', sans-serif;
	--bh-shell: 82rem;
	--bh-ease: all 0.3s ease;
}

/* Primitives ------------------------------------------------------------- */

/*
 * The [hidden] attribute must always win — several hidden-able blocks
 * (tab panels, reviews, the popup) carry their own display values that
 * would otherwise override the UA's [hidden] rule.
 */
body.bh [hidden] {
	display: none !important;
}

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body.bh {
	margin: 0;
	/* The rotated Contact Us wordmark and the raised chef card would
	   otherwise widen the scrollable area on small screens. */
	overflow-x: clip;
	background: var(--bh-ink);
	color: var(--bh-text);
	font-family: var(--bh-body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.bh img {
	max-width: 100%;
	height: auto;
	display: block;
}

.bh a {
	color: var(--bh-white);
	text-decoration: none;
	transition: var(--bh-ease);
}

.bh a:hover {
	color: var(--bh-gold);
}

.bh-shell {
	max-width: var(--bh-shell);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.bh-main {
	display: block;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: fixed;
	inset: 1rem auto auto 1rem;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--bh-gold);
	color: var(--bh-ink);
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
}

/* Type */

.bh h1,
.bh h2,
.bh h3,
.bh h4 {
	font-family: var(--bh-display);
	font-weight: 500;
	color: var(--bh-cream);
	line-height: 1.15;
	margin: 0 0 0.6em;
}

.bh-display {
	font-family: var(--bh-display);
	font-weight: 500;
	color: var(--bh-cream);
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.1;
	margin: 0;
}

.bh-eyebrow {
	font-family: var(--bh-body);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--bh-gold);
	margin: 0 0 1rem;
}

.bh-gold {
	color: var(--bh-gold);
}

.bh-heading {
	margin-bottom: 2.5rem;
}

.bh-heading--center {
	text-align: center;
}

.bh-heading .bh-display {
	margin-top: 0.4rem;
}

/* Buttons */

.bh-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--bh-body);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.55rem 0.9rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--bh-ease);
}

.bh-btn--gold {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-ink);
}

.bh-btn--gold:hover {
	background: transparent;
	color: var(--bh-gold);
}

.bh-btn--ghost {
	background: transparent;
	border-color: var(--bh-border);
	color: var(--bh-cream);
}

.bh-btn--ghost:hover {
	border-color: var(--bh-gold);
	color: var(--bh-gold);
}

.bh-btn--bare {
	background: none;
	border: 0;
	color: var(--bh-gold);
	padding: 0.85rem 0.5rem;
}

.bh-btn--bare:hover {
	color: var(--bh-cream);
}

/* Forms */

.bh-form label {
	display: block;
	margin-bottom: 1rem;
}

.bh-form label > span {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
	color: var(--bh-cream);
}

.bh-form input,
.bh-form select,
.bh-form textarea {
	width: 100%;
	background: var(--bh-field);
	border: 1px solid var(--bh-border);
	border-radius: 8px;
	color: var(--bh-cream);
	font-family: var(--bh-body);
	font-weight: 300;
	font-size: 0.95rem;
	padding: 0.8rem 1rem;
	transition: var(--bh-ease);
}

.bh-form input:focus,
.bh-form textarea:focus {
	outline: none;
	border-color: var(--bh-gold);
}

.bh-form ::placeholder {
	color: rgba(217, 207, 194, 0.6);
}

.bh-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

.bh-form__row--tight {
	grid-template-columns: repeat(3, 1fr);
}

.bh-form__note {
	min-height: 1.4em;
	font-size: 0.9rem;
	margin: 0.6rem 0 0;
}

.bh-form__note.is-ok {
	color: #9fd8a4;
}

.bh-form__note.is-error {
	color: #e79c9c;
}

.bh-form.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.bh-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.bh-form--inline {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	border-bottom: 1px solid var(--bh-border);
}

.bh-form--inline input {
	background: none;
	border: 0;
	border-radius: 0;
	padding-inline: 0;
}

.bh-form--inline input:focus {
	border: 0;
}

.bh-form--inline .bh-form__note {
	grid-column: 1 / -1;
}

/* Topbar ------------------------------------------------------------------ */

.bh-topbar {
	background: var(--bh-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	position: relative;
	z-index: 60;
}

.bh-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.55rem;
	font-size: 0.85rem;
}

.bh-topbar__social {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	color: var(--bh-cream);
	font-family: var(--bh-display);
	font-size: 1rem;
}

.bh-social {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
}

.bh-social a {
	display: inline-flex;
}

.bh-social svg {
	width: 15px;
	height: 15px;
	fill: var(--bh-text);
	transition: var(--bh-ease);
}

.bh-social a:hover svg {
	fill: var(--bh-gold);
}

.bh-topbar__chips {
	display: flex;
	gap: 1.75rem;
}

.bh-chip {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
}

.bh-chip__icon {
	width: 38px;
	height: 38px;
	border: 1px solid var(--bh-gold-soft);
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.bh-chip__icon svg {
	width: 17px;
	height: 17px;
	fill: var(--bh-gold);
}

.bh-chip__body {
	display: grid;
	line-height: 1.35;
}

.bh-chip__body strong {
	color: var(--bh-cream);
	font-weight: 400;
	font-size: 0.85rem;
}

.bh-chip__body span {
	font-size: 0.78rem;
	color: var(--bh-text);
}

/* Header ------------------------------------------------------------------ */

.bh-header {
	position: absolute;
	inset-inline: 0;
	z-index: 50;
	background: transparent;
	transition: background 0.3s ease;
}

/*
 * No scrolled state: the header is the page's opening overlay and leaves
 * with it. Once it has gone, the fixed call / book bar at the foot of the
 * screen carries the actions, and the to-top button brings the menu back.
 * (The .is-scrolled class the script still toggles is intentionally unused.)
 */

.bh-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.1rem;
}

.bh-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.15rem;
	font-family: var(--bh-display);
	font-size: 1.9rem;
	font-weight: 500;
	color: var(--bh-cream);
	letter-spacing: 0.02em;
}

.bh-logo:hover {
	color: var(--bh-cream);
}

.bh-glyph {
	width: 22px;
	height: 22px;
	fill: var(--bh-gold);
	align-self: center;
	transform: translateY(-2px);
}

/* Inline nav with one dropdown level. */

.bh-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.bh-nav__list {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.bh-nav__list a {
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--bh-cream);
	padding-block: 0.5rem;
	display: inline-block;
}

.bh-nav__list a:hover {
	color: var(--bh-gold);
}

.bh-nav__list .current-menu-item > a,
.bh-nav__list .current_page_item > a {
	color: var(--bh-gold);
}

.bh-nav__list li {
	position: relative;
}

.bh-nav__list li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 0.45rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
}

.bh-nav__list .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	min-width: 13rem;
	margin: 0;
	padding: 0.6rem 0;
	background: var(--bh-ink);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--bh-ease);
	z-index: 60;
}

.bh-nav__list li:hover > .sub-menu,
.bh-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bh-nav__list .sub-menu a {
	display: block;
	padding: 0.45rem 1.2rem;
	font-size: 0.9rem;
}

.bh-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.bh-header__cta {
	position: relative;
}

.bh-cart-count {
	position: absolute;
	top: -0.45rem;
	right: -0.45rem;
	background: var(--bh-cream);
	color: var(--bh-ink);
	font-size: 0.7rem;
	min-width: 1.3rem;
	height: 1.3rem;
	border-radius: 999px;
	display: grid;
	place-items: center;
	padding-inline: 0.25rem;
}

.bh-burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.4rem;
}

.bh-burger span {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--bh-cream);
	margin-block: 6px;
	transition: var(--bh-ease);
}

.bh-burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.bh-burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.bh-burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.bh-drawer {
	display: none;
	background: var(--bh-ink);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	/*
	 * The drawer sits inside a sticky header, and a sticky element cannot
	 * scroll its own overflow: anything past the fold would be unreachable.
	 * Cap it to what is left of the viewport under the header row and let it
	 * scroll itself, so the menu survives however many items it is given.
	 */
	max-height: calc(100vh - var(--bh-headrow, 5rem));
	max-height: calc(100dvh - var(--bh-headrow, 5rem));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bh-drawer .bh-nav__list {
	flex-direction: column;
	gap: 0;
	padding: 1rem 1.5rem 1.5rem;
	/* The fixed call/book bar covers the foot of the drawer, so the list is
	   padded past it: without this the last item can be scrolled into view
	   but never tapped. */
	padding-bottom: calc(1.5rem + var(--bh-sticky, 0px));
}

.bh-drawer .bh-nav__list a {
	padding-block: 0.55rem;
	font-size: 1.05rem;
}

.bh-drawer .sub-menu {
	position: static;
	translate: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	background: none;
	padding-left: 1rem;
	list-style: none;
}

/* Hero -------------------------------------------------------------------- */

.bh-hero {
	position: relative;
	min-height: min(92vh, 60rem);
	display: grid;
	align-content: center;
	background-size: cover;
	background-position: center;
	isolation: isolate;
	padding-top: 8rem;
}

/* The hero film sits under the scrim; the background photo doubles as its
   poster and the no-JS / reduced-motion fallback. */
body.bh .bh-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	body.bh .bh-hero__media {
		display: none;
	}
}

.bh-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* The top stop stays light enough that the photograph reads through the
	   transparent header instead of a near-solid ink band; the bottom keeps
	   its weight for the hours strip. */
	background:
		linear-gradient(180deg, rgba(22, 17, 15, 0.38), rgba(22, 17, 15, 0.3) 22%, rgba(22, 17, 15, 0.25) 60%, rgba(22, 17, 15, 0.8)),
		rgba(22, 17, 15, 0.25);
}

.bh-hero__stage {
	width: 100%;
	text-align: center;
	padding-block: 3rem 2rem;
}

.bh-slide .bh-eyebrow {
	color: var(--bh-cream);
	letter-spacing: 0.4em;
}

/*
 * Doubled-up selector so the auto side margins outweigh the `.bh h2`
 * margin shorthand — otherwise the width-capped title box pins left
 * instead of centering in the stage.
 */
.bh .bh-hero__title {
	font-size: clamp(2.7rem, 6.2vw, 4.9rem);
	max-width: 26ch;
	margin: 0 auto 0.5em;
	text-transform: capitalize;
	text-wrap: balance;
}

.bh-hero__text {
	max-width: 78ch;
	margin: 0 auto 1.8rem;
	font-size: 1.1rem;
	text-wrap: balance;
}

.bh-slide.is-active {
	animation: bh-rise 0.7s ease both;
}

@keyframes bh-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.bh-hero__pill {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	background: rgba(22, 17, 15, 0.85);
	border-radius: 999px;
	padding: 0.8rem 1.5rem;
	width: min(30rem, calc(100% - 3rem));
	margin: 1rem auto 3.5rem;
}

.bh-hero__pill button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 0;
	color: var(--bh-cream);
	font-family: var(--bh-body);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: var(--bh-ease);
}

.bh-hero__pill button:hover {
	color: var(--bh-gold);
}

.bh-hero__pill svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.bh-hero__progress {
	flex: 1;
	height: 2px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	overflow: hidden;
}

.bh-hero__progress i {
	display: block;
	height: 100%;
	width: var(--bh-progress, 33%);
	background: var(--bh-gold);
	transition: width 0.4s ease;
}

.bh-hero__strip {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent, rgba(22, 17, 15, 0.85));
	padding-block: 1.1rem;
}

.bh-hero__striprow {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
}

.bh-hero__hours {
	display: flex;
	gap: 2.5rem;
}

.bh-hero__hours p,
.bh-hero__venue {
	margin: 0;
	display: grid;
	line-height: 1.4;
}

.bh-hero__hours strong,
.bh-hero__venue strong {
	font-family: var(--bh-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--bh-cream);
}

.bh-hero__hours span,
.bh-hero__venue span {
	font-size: 0.82rem;
}

.bh-hero__venue {
	text-align: right;
}

/* Word band + counters ---------------------------------------------------- */

.bh-words {
	padding-block: 6rem 5rem;
	text-align: center;
}

.bh-words__eyebrow {
	margin-bottom: 2.5rem;
}

.bh-words__lines {
	margin: 0 0 4rem;
	display: grid;
	gap: 0.6rem;
	justify-items: center;
}

.bh-words__row {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex-wrap: wrap;
	justify-content: center;
	font-family: var(--bh-display);
	font-weight: 500;
	color: var(--bh-white);
	font-size: clamp(2.4rem, 6.5vw, 5.5rem);
	line-height: 1.05;
}

.bh-words__row img {
	width: clamp(7rem, 12vw, 11rem);
	height: clamp(3rem, 5vw, 4.4rem);
	object-fit: cover;
	border-radius: 999px;
}

.bh-counters {
	list-style: none;
	margin: 0 0 3.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.bh-counter {
	padding: 0.5rem 1rem;
	border-left: 1px solid var(--bh-border);
}

.bh-counter:first-child {
	border-left: 0;
}

.bh-counter__value {
	position: relative;
	display: inline-block;
	margin: 0;
	font-family: var(--bh-display);
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	color: var(--bh-white);
	line-height: 1;
}

.bh-counter__value::before {
	content: '';
	position: absolute;
	left: -1.1rem;
	top: 50%;
	translate: 0 -50%;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: var(--bh-gold);
	z-index: -1;
}

.bh-counter__suffix {
	color: var(--bh-cream);
}

.bh-counter__label {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: var(--bh-cream);
}

.bh-words__lede {
	max-width: 72ch;
	margin: 0 auto 2.4rem;
}

.bh-words__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.bh-callchip {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
}

.bh-callchip__icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--bh-cream);
	display: grid;
	place-items: center;
}

.bh-callchip__icon svg {
	width: 20px;
	height: 20px;
	fill: var(--bh-gold);
}

.bh-callchip__body {
	display: grid;
	text-align: left;
	line-height: 1.4;
}

.bh-callchip__body span {
	font-size: 0.8rem;
	color: var(--bh-text);
}

.bh-callchip__body strong {
	font-family: var(--bh-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--bh-cream);
}

/* Products ---------------------------------------------------------------- */

.bh-products {
	background: var(--bh-ink);
	padding-block: 5.5rem;
}

.bh-pills {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}

.bh-pill {
	font-family: var(--bh-body);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--bh-cream);
	background: none;
	border: 1px solid var(--bh-border);
	border-radius: 999px;
	padding: 0.65rem 1.5rem;
	cursor: pointer;
	transition: var(--bh-ease);
}

.bh-pill:hover {
	border-color: var(--bh-gold);
	color: var(--bh-gold);
}

.bh-pill.is-active,
.bh-pill[aria-selected='true'] {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-ink);
}

.bh-pills--ruled {
	position: relative;
	align-items: center;
}

.bh-pills--ruled::before,
.bh-pills--ruled::after {
	content: '';
	flex: 1;
	max-width: 8rem;
	height: 1px;
	background: var(--bh-border);
}

.bh-products__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--bh-border);
}

.bh-product {
	padding: 2.2rem 1.6rem;
	/* The photo is a centred circle, so the name and price sit under its axis
	   rather than against the cell's left edge. */
	text-align: center;
	justify-items: center;
	border-right: 1px solid var(--bh-border);
	border-bottom: 1px solid var(--bh-border);
	display: grid;
	gap: 0.7rem;
	align-content: start;
}

.bh-product:nth-child(4n) {
	border-right: 0;
}

.bh-product:nth-last-child(-n + 4) {
	border-bottom: 0;
}

.bh-product__photo img,
.bh-product__media img {
	width: min(13rem, 70%);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto 0.8rem;
	transition: transform 0.4s ease;
}

.bh-product:hover .bh-product__photo img,
.bh-product:hover .bh-product__media img {
	transform: scale(1.05) rotate(2deg);
}

.bh-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}

.bh-stars svg {
	width: 14px;
	height: 14px;
	fill: rgba(255, 255, 255, 0.25);
}

.bh-stars svg.is-full {
	fill: var(--bh-gold);
}

.bh-stars__value {
	margin-left: 0.4rem;
	font-size: 0.8rem;
}

.bh-product__title {
	font-size: 1.25rem;
	margin: 0;
}

.bh-product__title a {
	color: var(--bh-cream);
}

.bh-product__title a:hover {
	color: var(--bh-gold);
}

.bh-price {
	font-family: var(--bh-body);
	color: var(--bh-cream);
	font-size: 1rem;
}

.bh-price del {
	color: inherit; opacity: 0.55;
	margin-right: 0.4rem;
}

.bh-price ins {
	text-decoration: none;
}

.bh-product .bh-add {
	justify-self: center;
}

.bh-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--bh-gold);
	color: var(--bh-ink);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
}

.bh-product__media {
	position: relative;
}

/* Video band -------------------------------------------------------------- */

.bh-video {
	position: relative;
	isolation: isolate;
	text-align: center;
	padding-block: 7rem;
	overflow: hidden;
}

.bh-video__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-video__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(22, 17, 15, 0.72);
}

.bh-video__play {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: rgba(22, 17, 15, 0.3);
	display: grid;
	place-items: center;
	margin: 0 auto 2rem;
	cursor: pointer;
	transition: var(--bh-ease);
}

.bh-video__play:hover {
	border-color: var(--bh-gold);
	background: rgba(110, 43, 46, 0.35);
}

.bh-video__play svg {
	width: 26px;
	height: 26px;
	fill: var(--bh-cream);
}

.bh-video__play .bh-video__icon-play,
.bh-video__play[aria-pressed='true'] .bh-video__icon-pause {
	display: block;
}

.bh-video__play .bh-video__icon-pause,
.bh-video__play[aria-pressed='true'] .bh-video__icon-play {
	display: none;
}

.bh-video__text {
	max-width: 62ch;
	margin: 1rem auto 2.2rem;
}

.bh-video__tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	margin: 0 0 2.4rem;
	font-family: var(--bh-display);
	font-size: 1.6rem;
	color: var(--bh-cream);
}

.bh-cutlery {
	width: 22px;
	height: 22px;
	fill: var(--bh-gold);
}

/* Clubs ------------------------------------------------------------------- */

.bh-clubs {
	padding-block: 5.5rem;
}

.bh-clubs__grid {
	display: grid;
	grid-template-columns: 1fr 0.9fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.bh-clubs__col {
	display: grid;
	gap: 1rem;
	justify-items: start;
}

.bh-clubs__photo {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
}

.bh-clubs__photo img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.bh-clubs__title {
	font-size: 1.9rem;
	margin: 0;
	text-transform: capitalize;
}

.bh-clubs__col p {
	margin: 0;
}

.bh-clubs__card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 3 / 4.1;
	isolation: isolate;
}

.bh-clubs__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.bh-clubs__script {
	position: absolute;
	inset: 0;
	margin: 0;
	display: grid;
	place-content: center;
	text-align: center;
	background: rgba(22, 17, 15, 0.45);
	color: var(--bh-cream);
	line-height: 1.1;
	padding: 1rem;
}

.bh-clubs__script-top,
.bh-clubs__script-sub {
	font-family: var(--bh-display);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--bh-gold);
}

.bh-clubs__script-big {
	font-family: var(--bh-display);
	font-size: 4.6rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Menu tabs --------------------------------------------------------------- */

.bh-menu {
	background: var(--bh-ink);
	padding-block: 5.5rem;
}

.bh-menu__panel {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 3rem;
	align-items: stretch;
}

.bh-menu__photo {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
}

.bh-menu__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-pricelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
	align-content: center;
}

.bh-pricelist li {
	padding: 1rem 1.2rem;
	border: 1px solid transparent;
	border-radius: 10px;
	transition: var(--bh-ease);
}

.bh-pricelist li:first-child,
.bh-pricelist li:hover {
	border-color: var(--bh-gold-soft);
	background: rgba(255, 255, 255, 0.02);
}

.bh-pricelist__head {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
}

.bh-pricelist__head h3 {
	font-size: 1.35rem;
	margin: 0;
	white-space: nowrap;
}

.bh-pricelist__head h3 a {
	color: var(--bh-cream);
}

.bh-pricelist__dots {
	flex: 1;
	border-bottom: 1px dashed var(--bh-border);
	transform: translateY(-4px);
}

.bh-pricelist__head .bh-price {
	color: var(--bh-gold);
	white-space: nowrap;
}

.bh-pricelist li > p {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
}

/* Chefs ------------------------------------------------------------------- */

.bh-chefs {
	padding-block: 5.5rem;
}

.bh-chefs__grid {
	display: grid;
	grid-template-columns: 0.8fr 2fr;
	gap: 3rem;
	align-items: center;
}

.bh-chefs__intro p {
	margin: 0 0 1.6rem;
}

.bh-chefs__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8rem;
	align-items: start;
}

.bh-chef {
	text-align: center;
}

.bh-chef--raised {
	transform: translateY(-1.6rem);
}

.bh-chef__photo {
	position: relative;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
}

.bh-chef__photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.bh-chef__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.2rem 1rem 1.4rem;
	background: linear-gradient(180deg, transparent, rgba(22, 17, 15, 0.92));
}

.bh-chef__overlay h3 {
	margin: 0 0 0.1rem;
	font-size: 1.4rem;
}

.bh-chef__overlay p {
	margin: 0 0 0.7rem;
	font-size: 0.85rem;
}

.bh-chef__overlay .bh-social a {
	width: 32px;
	height: 32px;
	background: var(--bh-cream);
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
}

.bh-chef__overlay .bh-social svg {
	fill: var(--bh-ink);
	width: 14px;
	height: 14px;
}

.bh-chef__name {
	margin: 1rem 0 0.1rem;
	font-size: 1.4rem;
}

.bh-chef__role {
	margin: 0;
	font-size: 0.85rem;
}

/* FAQ --------------------------------------------------------------------- */

.bh-faq {
	background: var(--bh-ink);
	padding-block: 5.5rem;
}

.bh-faq__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4rem;
	align-items: start;
}

.bh-faq__col {
	display: grid;
	gap: 1.4rem;
}

.bh-faq__item {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--bh-border);
	border-radius: 10px;
	padding: 0 1.4rem;
}

.bh-faq__item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	padding-block: 1.1rem;
	font-family: var(--bh-display);
	font-size: 1.3rem;
	color: var(--bh-cream);
}

.bh-faq__item summary::-webkit-details-marker {
	display: none;
}

.bh-faq__mark {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
}

.bh-faq__mark::before,
.bh-faq__mark::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 0;
	width: 100%;
	height: 1.5px;
	background: var(--bh-cream);
	translate: 0 -50%;
	transition: var(--bh-ease);
}

.bh-faq__mark::after {
	rotate: 90deg;
}

.bh-faq__item[open] .bh-faq__mark::after {
	rotate: 0deg;
	opacity: 0;
}

.bh-faq__item > p {
	margin: 0;
	padding-bottom: 1.2rem;
	font-size: 0.92rem;
}

/* Timeline ---------------------------------------------------------------- */

.bh-timeline {
	padding-block: 5.5rem 6.5rem;
}

.bh-timeline__rail {
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.2rem;
	position: relative;
}

.bh-timeline__rail::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 1px;
	background: var(--bh-border);
}

.bh-stop {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	gap: 1.2rem;
	text-align: left;
	min-height: 24rem;
}

.bh-stop__body {
	align-self: end;
}

.bh-stop--flip .bh-stop__body {
	order: 3;
	align-self: start;
}

.bh-stop__photo {
	margin: 0;
	align-self: start;
	order: 3;
}

.bh-stop--flip .bh-stop__photo {
	order: 1;
	align-self: end;
}

.bh-stop__photo img {
	width: min(9.5rem, 100%);
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 12px;
}

.bh-stop__dot {
	order: 2;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bh-cream);
	border: 3px solid var(--bh-ink);
	box-shadow: 0 0 0 1px var(--bh-border);
	justify-self: start;
	z-index: 1;
}

.bh-stop:first-child .bh-stop__dot {
	background: var(--bh-gold);
}

.bh-stop__year {
	margin: 0 0 0.2rem;
	color: var(--bh-gold);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
}

.bh-stop__body h3 {
	font-size: 1.35rem;
	margin: 0 0 0.4rem;
}

.bh-stop__body p:last-child {
	margin: 0;
	font-size: 0.85rem;
}

/* Reviews ----------------------------------------------------------------- */

.bh-reviews {
	background: var(--bh-ink);
	padding-block: 5.5rem;
}

.bh-reviews__head {
	display: grid;
	grid-template-columns: 1.4fr auto;
	gap: 2rem;
	align-items: center;
	margin-bottom: 3rem;
}

.bh-reviews__head .bh-heading {
	margin-bottom: 0.8rem;
}

.bh-reviews__lede {
	margin: 0;
	max-width: 60ch;
}

.bh-reviews__pill {
	margin: 0;
	width: 19rem;
}

.bh-reviews__stage {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2rem;
	align-items: center;
}

.bh-reviews__mark {
	width: clamp(5rem, 9vw, 8rem);
	height: auto;
	fill: none;
	stroke: var(--bh-cream);
	stroke-width: 0.6;
	opacity: 0.6;
}

.bh-review {
	margin: 0;
	display: grid;
	grid-template-columns: 15rem 1fr;
	background: var(--bh-ink);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	overflow: hidden;
}

.bh-review.is-active {
	animation: bh-rise 0.5s ease both;
}

.bh-review__photo {
	width: 100%;
	height: 100%;
	min-height: 15rem;
	object-fit: cover;
}

.bh-review__body {
	padding: 2rem 2.4rem;
}

.bh-review__body blockquote {
	margin: 0 0 1.2rem;
	font-size: 1rem;
}

.bh-review__name {
	margin: 0;
	font-family: var(--bh-display);
	font-size: 1.3rem;
	color: var(--bh-cream);
}

.bh-review__role {
	margin: 0;
	font-size: 0.82rem;
}

/* Adventure / contact band ------------------------------------------------ */

.bh-adventure {
	padding-block: 5.5rem;
}

.bh-adventure__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

.bh-adventure__lede {
	margin: 0 0 2rem;
	max-width: 58ch;
}

.bh-factgrid {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.8rem 2rem;
}

.bh-factgrid li {
	display: flex;
	gap: 1rem;
	align-items: start;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bh-factgrid__icon {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--bh-gold);
	display: grid;
	place-items: center;
}

.bh-factgrid__icon svg {
	width: 20px;
	height: 20px;
	fill: var(--bh-ink);
}

.bh-factgrid h3 {
	font-size: 1.25rem;
	margin: 0 0 0.3rem;
}

.bh-factgrid p {
	margin: 0;
	font-size: 0.88rem;
}

.bh-adventure__social {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;
	font-family: var(--bh-display);
	font-size: 1.15rem;
	color: var(--bh-cream);
}

.bh-adventure__social .bh-social a {
	width: 34px;
	height: 34px;
	border: 1px solid var(--bh-border);
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
}

.bh-adventure__art {
	position: relative;
	min-height: 30rem;
	padding-right: 4rem;
}

.bh-adventure__photo {
	margin: 0;
	position: absolute;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--bh-gold-soft);
}

.bh-adventure__photo img,
.bh-adventure__photo video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-adventure__photo--back {
	inset: 0 8rem 6rem 0;
}

.bh-adventure__photo--front {
	inset: 8rem 4rem 0 10rem;
}

.bh-adventure__vertical {
	position: absolute;
	right: -1rem;
	top: 50%;
	margin: 0;
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center;
	font-family: var(--bh-display);
	font-size: clamp(2.6rem, 4.5vw, 4rem);
	color: var(--bh-cream);
	white-space: nowrap;
	letter-spacing: 0.05em;
	z-index: 3;
	font-weight: 600;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Social strip ------------------------------------------------------------ */

.bh-socialstrip {
	background: var(--bh-ink);
	padding-block: 5rem 0;
}

.bh-socialstrip__row {
	list-style: none;
	margin: 0;
	padding: 0 1.5rem 5rem;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.1rem;
	max-width: 96rem;
	margin-inline: auto;
}

.bh-socialstrip__row img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 12px;
	width: 100%;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.bh-socialstrip__row a:hover img {
	transform: scale(1.04);
	opacity: 0.85;
}

/* Reservation band -------------------------------------------------------- */

.bh-reservation {
	padding-block: 5.5rem;
}

.bh-reserve {
	max-width: 52rem;
	margin-inline: auto;
	background: var(--bh-ink);
	border: 1px solid var(--bh-border);
	border-radius: 16px;
	padding: 2.4rem 2.6rem;
}

/* Page head + inner pages ------------------------------------------------- */

.bh-pagehead {
	background: var(--bh-ink);
	padding: 8.5rem 0 3.5rem;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bh-pagehead .bh-display {
	text-transform: capitalize;
}

.bh-menupage,
.bh-orderpage,
.bh-archive,
.bh-contact,
.bh-chefpage,
.bh-single {
	padding-block: 4.5rem;
}

.bh-menupage__section {
	margin-top: 3rem;
}

.bh-menupage__section:first-child {
	margin-top: 0;
}

.bh-menupage__desc {
	margin: 0.4rem 0 1.6rem;
}

.bh-menupage .bh-pricelist {
	gap: 0.9rem;
}

.bh-orderpage__section {
	margin: 3rem 0 1.4rem;
	font-size: 1.9rem;
}

.bh-orderpage .bh-products__grid {
	border: 1px solid var(--bh-border);
}

.bh-contact__grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 3rem;
}

.bh-contact__info h2 {
	font-size: 1.5rem;
	margin: 1.8rem 0 0.5rem;
}

.bh-contact__info h2:first-child {
	margin-top: 0;
}

.bh-contact__info address {
	font-style: normal;
}

.bh-chefpage__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.bh-chefcard {
	text-align: center;
}

.bh-chefcard__media {
	margin: 0 0 1rem;
	border-radius: 14px;
	overflow: hidden;
}

.bh-chefcard__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.bh-chefcard h2 {
	font-size: 1.5rem;
	margin: 0 0 0.2rem;
}

.bh-chefcard__role {
	margin: 0 0 0.6rem;
	color: var(--bh-gold);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bh-chefcard > p:last-child {
	font-size: 0.92rem;
	margin: 0;
}

/* Blog cards + archive */

.bh-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.bh-card {
	background: var(--bh-ink);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	overflow: hidden;
	display: grid;
}

.bh-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.bh-card:hover .bh-card__media img {
	transform: scale(1.04);
}

.bh-card__body {
	padding: 1.4rem 1.6rem 1.8rem;
}

.bh-card__date {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.bh-card__title {
	font-size: 1.4rem;
	margin: 0 0 0.5rem;
}

.bh-card__title a {
	color: var(--bh-cream);
}

.bh-card__excerpt {
	margin: 0 0 1rem;
	font-size: 0.92rem;
}

.bh-card__more {
	font-size: 0.85rem;
	color: var(--bh-gold);
}

.bh-pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.bh-pagination .page-numbers {
	border: 1px solid var(--bh-border);
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	font-size: 0.9rem;
}

.bh-pagination .page-numbers.current {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-ink);
}

/* Single ------------------------------------------------------------------ */

.bh-single__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 3rem;
	align-items: start;
}

.bh-single__media img {
	border-radius: 14px;
	width: 100%;
}

.bh-single__buy {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin-top: 1.4rem;
}

.bh-prose {
	max-width: 70ch;
}

.bh-prose a {
	color: var(--bh-gold);
}

.bh-comments {
	margin-top: 3.5rem;
	max-width: 46rem;
}

.bh-comments__list {
	list-style: none;
	padding: 0;
}

/* Footer ------------------------------------------------------------------ */

.bh-footer {
	background: var(--bh-ink);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	margin-top: 0;
}

.bh-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
	gap: 2.5rem;
	padding-block: 4rem 3rem;
}

.bh-footer__col h3 {
	font-size: 1.35rem;
	margin: 0 0 1.1rem;
}

.bh-footer__brand .bh-logo {
	margin-bottom: 0.8rem;
}

.bh-footer__brand p,
.bh-footer__brand address {
	font-style: normal;
	font-size: 0.9rem;
	margin: 0 0 0.8rem;
}

.bh-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.bh-footer__list a {
	font-size: 0.92rem;
	color: var(--bh-text);
}

.bh-footer__list a:hover {
	color: var(--bh-gold);
	padding-left: 0.3rem;
}

.bh-footer__newsletter p {
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

.bh-footer__social {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 1.4rem 0 0;
	font-size: 0.9rem;
	color: var(--bh-cream);
}

.bh-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	padding-block: 1.1rem;
	font-size: 0.82rem;
}

.bh-footer__bottomrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bh-footer__bottomrow p {
	margin: 0;
}

.bh-footer__policies {
	display: flex;
	gap: 1.6rem;
}

.bh-footer__policies a {
	color: var(--bh-text);
}

.bh-footer__policies a:hover {
	color: var(--bh-gold);
}

/* Cart drawer ------------------------------------------------------------- */

.bh-cart {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(0, 0, 0, 0.55);
}

.bh-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(24rem, 92vw);
	background: var(--bh-ink);
	border-left: 1px solid var(--bh-border);
	padding: 1.6rem;
	display: grid;
	grid-template-rows: auto 1fr auto auto auto;
	gap: 1rem;
}

.bh-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bh-cart__head h3 {
	margin: 0;
	font-size: 1.5rem;
}

.bh-cart__close {
	background: none;
	border: 0;
	color: var(--bh-cream);
	font-size: 1.6rem;
	cursor: pointer;
	line-height: 1;
}

.bh-cart__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: auto;
	display: grid;
	gap: 0.8rem;
	align-content: start;
}

.bh-cart__lines li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding-bottom: 0.7rem;
	font-size: 0.92rem;
}

.bh-line__qty {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

.bh-line__qty button {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--bh-border);
	background: none;
	color: var(--bh-cream);
	cursor: pointer;
}

.bh-cart:not(.has-items) .bh-cart__lines,
.bh-cart.has-items .bh-cart__empty {
	display: none;
}

.bh-cart__total {
	display: flex;
	justify-content: space-between;
	font-size: 1.05rem;
	color: var(--bh-cream);
	margin: 0;
}

.bh-checkout__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 3rem;
	align-items: start;
	margin-top: 3rem;
}

.bh-checkout__summary {
	background: var(--bh-ink);
	border: 1px solid var(--bh-border);
	border-radius: 14px;
	padding: 1.6rem;
}

/* Popup ------------------------------------------------------------------- */

.bh-popup {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: rgba(0, 0, 0, 0.6);
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.bh-popup__panel {
	position: relative;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	max-width: 46rem;
	background: var(--bh-ink);
	border: 1px solid var(--bh-border);
	border-radius: 16px;
	overflow: hidden;
}

.bh-popup__media {
	margin: 0;
}

.bh-popup__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-popup__body {
	padding: 2.2rem;
	/* The photo column sets the panel's height, so the text column centres
	   against it and one gap owns the rhythm — no orphaned space under the
	   button, no margin double-ups between the stacked pieces. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.85rem;
}

.bh-popup__body > *,
.bh-popup__body .bh-display {
	margin: 0;
}

.bh-popup__body .bh-form {
	margin-top: 0.35rem;
	display: grid;
	gap: 0.7rem;
	justify-items: start;
}

.bh-popup__body .bh-form__note:empty {
	display: none;
}

.bh-popup__body .bh-display {
	font-size: 1.9rem;
}

.bh-popup__close {
	position: absolute;
	top: 0.7rem;
	right: 0.9rem;
	z-index: 1;
	background: none;
	border: 0;
	color: var(--bh-cream);
	font-size: 1.7rem;
	cursor: pointer;
}

/* To top ------------------------------------------------------------------ */

.bh-totop {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 110;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--bh-gold);
	background: var(--bh-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: var(--bh-ease);
}

.bh-totop:hover {
	background: var(--bh-gold);
}

.bh-totop svg {
	width: 18px;
	height: 18px;
	fill: var(--bh-cream);
}

.bh-totop:hover svg {
	fill: var(--bh-ink);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 72em) {
	.bh-nav__list {
		gap: 1.3rem;
	}

	.bh-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bh-product:nth-child(4n) {
		border-right: 1px solid var(--bh-border);
	}

	.bh-product:nth-child(2n) {
		border-right: 0;
	}

	.bh-product:nth-last-child(-n + 4) {
		border-bottom: 1px solid var(--bh-border);
	}

	.bh-product:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	.bh-timeline__rail {
		grid-template-columns: repeat(3, 1fr);
	}

	.bh-timeline__rail::before {
		display: none;
	}

	.bh-stop {
		min-height: 0;
		grid-template-rows: none;
	}

	.bh-stop__dot {
		display: none;
	}

	.bh-stop__body,
	.bh-stop--flip .bh-stop__body {
		order: 2;
		align-self: start;
	}

	.bh-stop__photo,
	.bh-stop--flip .bh-stop__photo {
		order: 1;
		align-self: start;
	}
}

@media (max-width: 60em) {
	.bh-nav {
		display: none;
	}

	.bh-burger {
		display: block;
	}

	.bh-drawer {
		display: block;
	}

	/*
	 * No header override here any more: every width shares one mechanism —
	 * transparent and absolute over the top of the page, scrolling away with
	 * it. The page-heads' 8.5rem top padding already clears the overlaid row.
	 */

	.bh-topbar__chips .bh-chip:last-child {
		display: none;
	}

	.bh-hero {
		padding-top: 3rem;
	}

	.bh-hero__striprow,
	.bh-footer__bottomrow {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.bh-hero__venue {
		text-align: center;
	}

	.bh-counters {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 0;
	}

	.bh-counter:nth-child(3) {
		border-left: 0;
	}

	.bh-clubs__grid,
	.bh-menu__panel,
	.bh-chefs__grid,
	.bh-faq__columns,
	.bh-reviews__head,
	.bh-adventure__grid,
	.bh-contact__grid,
	.bh-single__grid,
	.bh-checkout__grid {
		grid-template-columns: 1fr;
	}

	.bh-chefs__cards {
		grid-template-columns: 1fr;
		max-width: 22rem;
		margin-inline: auto;
	}

	.bh-chef--raised {
		transform: none;
	}

	.bh-news__grid,
	.bh-chefpage__grid {
		grid-template-columns: 1fr;
		max-width: 26rem;
		margin-inline: auto;
	}

	.bh-socialstrip__row {
		grid-template-columns: repeat(3, 1fr);
	}

	.bh-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.bh-review {
		grid-template-columns: 1fr;
	}

	.bh-review__photo {
		aspect-ratio: 16 / 9;
	}

	.bh-reviews__mark {
		display: none;
	}

	.bh-reviews__stage {
		grid-template-columns: 1fr;
	}

	.bh-adventure__art {
		min-height: 24rem;
		margin-top: 1rem;
		padding-right: 3rem;
	}

	.bh-adventure__vertical {
		right: 0.4rem;
		font-size: 2rem;
	}

	.bh-form__row,
	.bh-form__row--tight {
		grid-template-columns: 1fr;
	}

	.bh-popup__panel {
		grid-template-columns: 1fr;
		max-width: 24rem;
	}

	.bh-popup__media {
		display: none;
	}

	.bh-timeline__rail {
		grid-template-columns: 1fr;
	}

	.bh-words__row {
		gap: 0.8rem;
	}
}

@media (max-width: 40em) {
	.bh-topbar__row {
		justify-content: center;
	}

	.bh-topbar__chips {
		display: none;
	}

	.bh-products__grid,
	.bh-product:nth-child(n) {
		grid-template-columns: 1fr;
		border-right: 0;
	}

	.bh-product {
		border-right: 0 !important;
		border-bottom: 1px solid var(--bh-border) !important;
	}

	.bh-product:last-child {
		border-bottom: 0 !important;
	}

	.bh-socialstrip__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.bh-footer__grid {
		grid-template-columns: 1fr;
	}

	.bh-hero__hours {
		gap: 1.5rem;
	}

	.bh-reserve {
		padding: 1.6rem 1.4rem;
	}
}

/* ==========================================================================
   Brand layer — The Aroma Bistro & Bar.

   Applied over the base sheet the way the guide balances a page: ink holds
   the ground, the reading bands (products, menu, FAQ, social strip,
   reservation) sit on cream, oxblood takes exactly one field (the contact
   band), terracotta marks prices, dots and the primary action, and gold
   never becomes a control.
   ========================================================================== */

/* Type — Hanken Grotesk reads at 400; eyebrows are the third voice. */

body.bh {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
}

.bh-form input,
.bh-form select,
.bh-form textarea {
	font-weight: 400;
}

body.bh .bh-eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.bh-nav__list a {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bh-btn {
	font-weight: 500;
	letter-spacing: 0.06em;
}

.bh-price {
	color: var(--bh-terracotta);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.bh-counter__value::before {
	background: var(--bh-terracotta);
}

.bh-stop__dot,
.bh-stop:first-child .bh-stop__dot {
	background: var(--bh-terracotta);
	border-color: var(--bh-ink);
}

.bh-stop__year {
	color: var(--bh-gold);
}

/* The placed lockup. */

.bh-logo img {
	height: 58px;
	width: auto;
}

.bh-footer__brand .bh-logo img {
	height: 72px;
}

/* Buttons — terracotta ground with ink text for the primary action;
   hover shifts to the evening register. Gold is never a control. */

body.bh .bh-btn--gold {
	background: var(--bh-oxblood);
	border-color: var(--bh-oxblood);
	color: #fff;
}

body.bh .bh-btn--gold:hover {
	background: #5a2224;
	border-color: #5a2224;
	color: #fff;
}

/* On oxblood grounds the primary button inverts to cream so it stays a
   button and not a shadow. */
body.bh :is(.bh-chefs, .bh-adventure, .bh-reservation .bh-reserve, .bh-cart__panel) .bh-btn--gold {
	background: var(--bh-cream);
	border-color: var(--bh-cream);
	color: var(--bh-oxblood);
}

body.bh :is(.bh-chefs, .bh-adventure, .bh-reservation .bh-reserve, .bh-cart__panel) .bh-btn--gold:hover {
	background: transparent;
	color: var(--bh-cream);
}

body.bh .bh-btn--bare {
	color: var(--bh-gold);
}

body.bh .bh-btn--bare:hover {
	color: var(--bh-cream);
}

/* Filter pills and tabs: the active one is the primary action. */

body.bh .bh-pill.is-active,
body.bh .bh-pill[aria-selected='true'] {
	background: var(--bh-terracotta);
	border-color: var(--bh-terracotta);
	color: var(--bh-ink);
}

body.bh .bh-pill:hover {
	border-color: var(--bh-terracotta);
	color: var(--bh-terracotta);
}

/* Cream reading bands ----------------------------------------------------- */

body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) {
	background: var(--bh-cream);
	color: var(--bh-ink);
}

body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) :is(h1, h2, h3, h4, .bh-display) {
	color: var(--bh-ink);
}

body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) a:not(.bh-btn) {
	color: var(--bh-ink);
}

body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) a:not(.bh-btn):hover {
	color: var(--bh-terracotta);
}

/* Deep saffron carries small type on cream — gold alone falls short. */
body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) .bh-eyebrow {
	color: var(--bh-gold-deep);
}

body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) :is(.bh-pill) {
	border-color: rgba(22, 17, 15, 0.25);
	color: var(--bh-ink);
}

body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) .bh-pill.is-active,
body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) .bh-pill[aria-selected='true'] {
	background: var(--bh-terracotta);
	border-color: var(--bh-terracotta);
	color: var(--bh-ink);
}

body.bh .bh-products__grid,
body.bh .bh-product {
	border-color: var(--bh-sand);
}

body.bh .bh-product .bh-add {
	border-color: rgba(22, 17, 15, 0.3);
	color: var(--bh-ink);
}

body.bh .bh-product .bh-add:hover {
	border-color: var(--bh-terracotta);
	color: var(--bh-terracotta);
}

body.bh .bh-stars svg {
	fill: rgba(22, 17, 15, 0.18);
}

body.bh .bh-stars svg.is-full {
	fill: var(--bh-gold);
}

body.bh .bh-reviews .bh-stars svg,
body.bh .bh-chefs .bh-stars svg {
	fill: rgba(239, 231, 221, 0.25);
}

body.bh .bh-pills--ruled::before,
body.bh .bh-pills--ruled::after {
	background: var(--bh-sand);
}

body.bh .bh-pricelist li:first-child,
body.bh .bh-pricelist li:hover {
	border-color: var(--bh-gold-soft);
	background: rgba(22, 17, 15, 0.035);
}

body.bh .bh-pricelist__dots {
	border-color: rgba(22, 17, 15, 0.25);
}

body.bh .bh-pricelist__head .bh-price {
	color: var(--bh-terracotta);
}

body.bh .bh-faq__item {
	background: rgba(22, 17, 15, 0.03);
	border-color: var(--bh-sand);
}

body.bh .bh-faq__item summary {
	color: var(--bh-ink);
}

body.bh .bh-faq__mark::before,
body.bh .bh-faq__mark::after {
	background: var(--bh-ink);
}

/* Reservation band: the form sits as an ink card on the cream field,
   the way the guide's menu specimen sits on the page. */

body.bh .bh-reservation .bh-reserve {
	background: var(--bh-ink);
	border-color: var(--bh-ink);
	color: var(--bh-sand);
}

body.bh .bh-reservation .bh-reserve :is(h3, label > span) {
	color: var(--bh-cream);
}

/* Reviews: quote cards go cream — italic Cormorant, real guest words. */

body.bh .bh-review {
	background: var(--bh-cream);
	border-color: var(--bh-cream);
}

body.bh .bh-review__body blockquote {
	font-family: var(--bh-display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.45;
	color: var(--bh-ink);
}

body.bh .bh-review__name {
	color: var(--bh-ink);
}

body.bh .bh-review__role {
	color: var(--bh-gold-deep);
}

body.bh .bh-reviews__mark {
	stroke: var(--bh-gold);
	opacity: 0.8;
}

/* The one oxblood field: the contact band. Cream on oxblood for anything
   smaller than display size. */

body.bh .bh-adventure {
	background: var(--bh-oxblood);
	color: var(--bh-cream);
}

body.bh .bh-adventure .bh-eyebrow {
	color: var(--bh-cream);
}

body.bh .bh-adventure .bh-factgrid li {
	border-color: rgba(239, 231, 221, 0.25);
}

body.bh .bh-adventure .bh-factgrid__icon {
	background: var(--bh-cream);
}

body.bh .bh-adventure .bh-factgrid__icon svg {
	fill: var(--bh-oxblood);
}

body.bh .bh-adventure .bh-adventure__photo {
	border-color: rgba(239, 231, 221, 0.4);
}

body.bh .bh-adventure .bh-social svg {
	fill: var(--bh-cream);
}

body.bh .bh-adventure .bh-social a:hover svg {
	fill: var(--bh-gold);
}

body.bh .bh-adventure .bh-adventure__social .bh-social a {
	border-color: rgba(239, 231, 221, 0.4);
}

/* Newsletter popup reads on cream. */

body.bh .bh-popup__panel {
	background: var(--bh-cream);
	border-color: var(--bh-sand);
}

body.bh .bh-popup__body,
body.bh .bh-popup__body .bh-display {
	color: var(--bh-ink);
}

body.bh .bh-popup__body .bh-eyebrow {
	color: var(--bh-gold-deep);
}

body.bh .bh-popup__close {
	color: var(--bh-ink);
}

body.bh .bh-popup .bh-form input {
	background: rgba(22, 17, 15, 0.05);
	border-color: var(--bh-sand);
	color: var(--bh-ink);
}

body.bh .bh-popup .bh-form ::placeholder {
	color: rgba(22, 17, 15, 0.5);
}

/* Quotes elsewhere stay the second voice. */

.bh-clubs__script-top,
.bh-clubs__script-sub {
	color: var(--bh-gold);
}

/* Audit fixes — the guide's last word. ------------------------------------ */

/* Cormorant never renders below 20 px: small labels move to the text face. */

body.bh .bh-topbar__social,
body.bh .bh-adventure__social,
body.bh .bh-footer__social {
	font-family: var(--bh-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

body.bh .bh-hero__hours strong,
body.bh .bh-hero__venue strong {
	font-family: var(--bh-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Gold is never a control — every remaining gold-ground control state
   moves to the primary terracotta-with-ink pairing. */

body.bh .bh-totop:hover {
	background: var(--bh-terracotta);
	border-color: var(--bh-terracotta);
}

body.bh .bh-totop:hover svg {
	fill: var(--bh-ink);
}

body.bh .screen-reader-text:focus {
	background: var(--bh-terracotta);
	color: var(--bh-ink);
}

body.bh .bh-pagination .page-numbers.current {
	background: var(--bh-terracotta);
	border-color: var(--bh-terracotta);
	color: var(--bh-ink);
}

body.bh .bh-video__play:hover {
	border-color: var(--bh-terracotta);
}

/* Struck prices inherit their band's ink or sand instead of a foreign grey. */

body.bh .bh-price del {
	color: inherit;
	opacity: 0.55;
}

/* Elementor coexistence ----------------------------------------------------
   Elementor's frontend reset (.elementor img { height: auto; border-radius: 0 })
   ties the base selectors on specificity and loads later, flattening every
   image treatment inside converted pages. These doubled selectors restore
   the theme's word-band chips, circles and radii. */

body.bh .bh-words__row img {
	width: clamp(7rem, 12vw, 11rem);
	height: clamp(3rem, 5vw, 4.4rem);
	object-fit: cover;
	border-radius: 999px;
	flex: none;
}

body.bh .bh-product__photo img,
body.bh .bh-product__media img {
	border-radius: 50%;
}

body.bh .bh-stop__photo img,
body.bh .bh-socialstrip__row img {
	border-radius: 12px;
}

body.bh .bh-single__media img {
	border-radius: 14px;
}

body.bh .bh-review__photo {
	height: 100%;
	min-height: 15rem;
	object-fit: cover;
}

body.bh .bh-adventure__photo img,
body.bh .bh-adventure__photo video,
body.bh .bh-menu__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Word band, organized: tighter rows, and the counters drop their floating
   divider when they stack two-up — a hairline only ever sits between
   side-by-side cells on the wide layout. */

body.bh .bh-words__lines {
	gap: 1rem;
	margin-bottom: 3.5rem;
}

body.bh .bh-words__row {
	row-gap: 0.75rem;
}

@media (max-width: 60em) {
	body.bh .bh-counters {
		gap: 2.5rem 1.5rem;
	}

	body.bh .bh-counter {
		border-left: 0;
		padding: 0;
	}

	body.bh .bh-words__row {
		gap: 0.8rem;
	}

	body.bh .bh-words__row img {
		height: clamp(2.4rem, 8vw, 3.4rem);
		width: clamp(5.5rem, 16vw, 8rem);
	}
}

/* More oxblood — extended at the owner's request beyond the guide's single
   field: the chefs band, inner-page heads, the video wash, the reservation
   card and the cart all take the evening register. Cream carries the small
   type on every oxblood ground. */

body.bh .bh-chefs {
	background: var(--bh-oxblood);
}

body.bh .bh-chefs .bh-eyebrow {
	color: var(--bh-cream);
}

body.bh .bh-chefs .bh-chef__overlay {
	background: linear-gradient(180deg, transparent, rgba(58, 21, 23, 0.95));
}

body.bh .bh-pagehead {
	background: var(--bh-oxblood);
	border-bottom-color: rgba(239, 231, 221, 0.18);
}

body.bh .bh-pagehead .bh-eyebrow {
	color: var(--bh-cream);
}

body.bh .bh-video__scrim {
	background: linear-gradient(180deg, rgba(110, 43, 46, 0.62), rgba(22, 17, 15, 0.78));
}

body.bh .bh-reservation .bh-reserve {
	background: var(--bh-oxblood);
	border-color: var(--bh-oxblood);
	color: var(--bh-cream);
}

body.bh .bh-reservation .bh-reserve input,
body.bh .bh-reservation .bh-reserve textarea {
	background: rgba(239, 231, 221, 0.1);
	border-color: rgba(239, 231, 221, 0.3);
	color: var(--bh-cream);
}

body.bh .bh-reservation .bh-reserve ::placeholder {
	color: rgba(239, 231, 221, 0.55);
}

body.bh .bh-cart__panel,
body.bh .bh-checkout__summary {
	background: var(--bh-oxblood);
	border-color: rgba(239, 231, 221, 0.25);
}

body.bh .bh-cart__lines li {
	border-bottom-color: rgba(239, 231, 221, 0.2);
}

body.bh .bh-line__qty button {
	border-color: rgba(239, 231, 221, 0.35);
}

/* Terracotta retired at the owner's request — the highlight colour is now
   oxblood site-wide (the --bh-terracotta token carries #6e2b2e). The darker
   fill needs light text on every filled control, and prices on dark pages
   move to gold so they stay legible. */

body.bh .bh-pill.is-active,
body.bh .bh-pill[aria-selected='true'],
body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) .bh-pill.is-active,
body.bh :is(.bh-products, .bh-menu, .bh-faq, .bh-socialstrip, .bh-reservation) .bh-pill[aria-selected='true'] {
	color: #fff;
}

body.bh .screen-reader-text:focus,
body.bh .bh-pagination .page-numbers.current {
	color: #fff;
}

body.bh .bh-totop:hover svg {
	fill: var(--bh-cream);
}

body.bh .bh-badge {
	color: #fff;
}

body.bh .bh-menupage .bh-price,
body.bh .bh-orderpage .bh-price,
body.bh .bh-single .bh-price,
body.bh .bh-menupage .bh-pricelist__head .bh-price {
	color: var(--bh-gold);
}

body.bh .bh-counter__value::before {
	background: var(--bh-oxblood);
}

/* Dish links removed: the board is the destination, not the doorway. An
   anchor without an href keeps every selector above matching but must not
   invite a click it cannot answer. */
.bh-product__title a:not([href]),
.bh-pricelist__head a:not([href]),
.bh-dish__name a:not([href]),
.bh-offers__list a:not([href]) {
	cursor: default;
}

.bh-product__title a:not([href]):hover,
.bh-pricelist__head a:not([href]):hover,
.bh-dish__name a:not([href]):hover,
.bh-offers__list a:not([href]):hover {
	color: inherit;
}

/* ==========================================================================
   Signature Plates — photo showcase (homepage "What We're Known For")
   Only dishes carrying their own photograph render here, so every card is a
   real plate. First card is the hero (2x2); the rest tile beside it.
   ========================================================================== */
.bh-plates__grid {
	list-style: none;
	margin: 2.6rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 208px;
	gap: 14px;
}

.bh-plate {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bh-ink);
	box-shadow: 0 10px 30px -18px rgba(22, 17, 15, 0.55);
}

.bh-plate--hero {
	grid-column: span 2;
	grid-row: span 2;
}

.bh-plate__link {
	display: block;
	position: relative;
	height: 100%;
	min-height: 208px;
	color: var(--bh-cream);
	text-decoration: none;
}

.bh-plate--hero .bh-plate__link {
	min-height: 430px;
}

.bh-plate__media {
	position: absolute;
	inset: 0;
	display: block;
}

.bh-plate__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.26rem;
	padding: 1.15rem 1.25rem;
	background: linear-gradient(
		to top,
		rgba(22, 17, 15, 0.9) 0%,
		rgba(22, 17, 15, 0.5) 40%,
		rgba(22, 17, 15, 0) 72%
	);
}

.bh-plate__tag {
	font-family: var(--bh-body);
	font-weight: 600;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bh-gold);
}

.bh-plate__name {
	font-family: var(--bh-display);
	font-size: 1.35rem; /* Cormorant stays >= 20px per the brand guide */
	line-height: 1.12;
	color: var(--bh-cream);
}

.bh-plate--hero .bh-plate__name {
	font-size: 2rem;
}

/* Price sits on dark imagery here, so it reads in gold, not oxblood. */
body.bh .bh-plate .bh-price {
	font-family: var(--bh-body);
	font-weight: 600;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	color: var(--bh-gold);
}

/* Image fills its cell. body.bh keeps this ahead of Elementor's img reset. */
body.bh .bh-plate__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.65s ease;
}

body.bh .bh-plate:hover .bh-plate__media img {
	transform: scale(1.055);
}

.bh-plate::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(239, 231, 221, 0.1);
	pointer-events: none;
}

@media (max-width: 900px) {
	.bh-plates__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bh-plate--hero {
		grid-column: span 2;
		grid-row: span 1;
	}

	.bh-plate--hero .bh-plate__link {
		min-height: 280px;
	}
}

@media (max-width: 560px) {
	.bh-plates__grid {
		grid-template-columns: 1fr;
	}

	.bh-plate--hero {
		grid-column: span 1;
	}

	.bh-plate__link,
	.bh-plate--hero .bh-plate__link {
		min-height: 240px;
	}
}


/* Chef portraits that have not been shot yet show the Aroma lotus, not a
   stand-in photograph of the room or a burger. */
.bh-chef__lotus,
.bh-chefcard__lotus {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--bh-ink);
}

.bh-chef__lotus .bh-lotus,
.bh-chefcard__lotus .bh-lotus {
	width: 44%;
	height: auto;
	opacity: 0.92;
}

/* Blog home as a contents page: each topic is its own titled section, and
   the pills up top jump to them. scroll-margin keeps a jumped-to heading
   clear of the viewport edge. */
.bh-archive__lede {
	max-width: 46rem;
	margin: 0 auto 2rem;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.7;
	opacity: 0.8;
}

.bh-blogtopic {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	scroll-margin-top: 6rem;
}

.bh-blogtopic:first-of-type {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bh-blogtopic__head {
	margin-bottom: 1.6rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bh-border);
}

.bh-blogtopic__head .bh-eyebrow {
	margin-bottom: 0.3rem;
}

.bh-blogtopic__head .bh-display {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

/* Comments: the reply form in the theme's own form language (the same
   tokens as the reservation form), and a quiet list above it. ------------ */
.bh-comments {
	margin-top: 3.5rem;
	padding-top: 2.75rem;
	border-top: 1px solid var(--bh-border);
}

.bh-comments__title,
.comment-reply-title {
	margin: 0 0 0.5rem;
	font-family: var(--bh-display);
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	font-weight: 500;
	color: var(--bh-cream);
}

.comment-reply-title small {
	margin-left: 0.75rem;
	font-family: var(--bh-body);
	font-size: 0.8rem;
}

.comment-reply-title small a {
	color: var(--bh-gold);
	text-decoration: none;
}

.bh-comments .comment-notes,
.bh-comments .logged-in-as {
	margin: 0 0 1.6rem;
	font-size: 0.88rem;
	opacity: 0.65;
}

/* The form as a two-column grid: name and email share a row, everything
   else runs full width. */
.bh-comments .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1.25rem;
}

.bh-comments .comment-form > p {
	margin: 0;
	grid-column: 1 / -1;
}

/* Outranks the full-width `> p` rule above (element + extra class). */
.bh-comments .comment-form > p.comment-form-author {
	grid-column: 1;
}

.bh-comments .comment-form > p.comment-form-email {
	grid-column: 2;
}

.bh-comments .comment-form label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bh-cream);
	opacity: 0.85;
}

.bh-comments .comment-form .required {
	color: var(--bh-gold);
}

.bh-comments .comment-form input[type="text"],
.bh-comments .comment-form input[type="email"],
.bh-comments .comment-form input[type="url"],
.bh-comments .comment-form textarea {
	width: 100%;
	background: var(--bh-field);
	border: 1px solid var(--bh-border);
	border-radius: 8px;
	color: var(--bh-cream);
	font-family: var(--bh-body);
	font-weight: 300;
	font-size: 0.95rem;
	padding: 0.8rem 1rem;
	transition: var(--bh-ease);
}

.bh-comments .comment-form textarea {
	min-height: 9.5rem;
	resize: vertical;
}

.bh-comments .comment-form input:focus,
.bh-comments .comment-form textarea:focus {
	outline: none;
	border-color: var(--bh-gold);
	background: rgba(239, 231, 221, 0.09);
}

.bh-comments .comment-form ::placeholder {
	color: rgba(217, 207, 194, 0.6);
}

/* The consent checkbox as one quiet inline row. */
.bh-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.bh-comments .comment-form-cookies-consent input {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.2rem;
	flex: none;
	accent-color: var(--bh-gold);
}

.bh-comments .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 300;
	font-size: 0.88rem;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.75;
}

.bh-comments .form-submit {
	margin-top: 0.4rem;
}

/* The submit carries .bh-btn--gold from comment_form(); this keeps an
   unstyled fallback honest if those classes are ever filtered away. */
.bh-comments .form-submit input.submit {
	cursor: pointer;
}

/* The list above the form, when there is one. */
.bh-comments__list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.bh-comments__list .comment-body {
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--bh-border);
}

.bh-comments__list .avatar {
	border-radius: 50%;
	margin-right: 0.7rem;
	vertical-align: middle;
}

.bh-comments__list .comment-metadata,
.bh-comments__list .reply {
	font-size: 0.8rem;
}

.bh-comments__list .comment-metadata a,
.bh-comments__list .reply a {
	color: var(--bh-gold);
	text-decoration: none;
}

.bh-comments__list .children {
	list-style: none;
	margin: 0;
	padding-left: 2rem;
}

@media (max-width: 40em) {
	.bh-comments .comment-form {
		grid-template-columns: 1fr;
	}

	.bh-comments .comment-form > p.comment-form-author,
	.bh-comments .comment-form > p.comment-form-email {
		grid-column: 1;
	}
}

/* The article photo keeps the reader company: on two-column widths the
   left figure pins while the longer text column scrolls. Its containing
   block is the grid area (full column height, align-items: start on the
   grid), so it stops exactly when the article ends; below 60em the grid
   stacks and the figure's area is its own row, so this rule is inert. */
@media (min-width: 60.0625em) {
	.bh-single__media {
		position: sticky;
		top: 2rem;
	}
}
