/* OB (17/10/2026): the one inner-page opening band (inc/openband.php). Same height on every inner page per
   breakpoint. Owner 17/10: one bagel per opening, never a bagel backdrop; the bagel rests on the band's bottom
   edge (half in, half out) inside a ring in the page colour, a cut-out in the band; the space under the band
   keeps the half-bagel clear of the next section. Compact on phones so product/cart/checkout start high. */
/* The /packages/ proportion (owner 17/10: "the user immediately sees everything"): crumbs, H1, one line, chips. */
:root { --hb-ob-h: 188px; --hb-ob-bagel: 68px; --hb-ob-ring: 7px; }
@media (min-width: 768px) { :root { --hb-ob-h: 204px; --hb-ob-bagel: 84px; --hb-ob-ring: 8px; } }
@media (min-width: 1200px) { :root { --hb-ob-h: 220px; --hb-ob-bagel: 96px; --hb-ob-ring: 10px; } }

.hb-ob { --ob-out: calc(var(--hb-ob-bagel) / 2 + var(--hb-ob-ring));
	position: relative; z-index: 2; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
	height: var(--hb-ob-h); min-height: var(--hb-ob-h); max-height: var(--hb-ob-h); margin: 14px 0 15px; padding: 0 20px;
	border-radius: var(--hb-hero-radius, var(--hb-radius-lg)); overflow-x: clip; overflow-y: visible; color: #fff; text-align: center; }
/* Same distance from the header on every template (measured 17/10: the menu and plain pages sit in other wrappers). */
.hb-ob:has(+ .hb-page) { margin-top: 22px; }
.hb-mnu > .hb-ob { margin-top: -6px; }
@media (min-width: 768px) { .hb-ob:has(+ .hb-page) { margin-top: 34px; } .hb-mnu > .hb-ob { margin-top: 6px; } }
.hb-ob .hb-hero__media { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background: #2b231d; }
.hb-ob .hb-hero__media img.hb-hero__poster { width: 100%; height: 100% !important; max-width: none; object-fit: cover; }
/* No page photo: the site's warm ink tone, no bagel picture. */
.hb-ob .hb-ob__plain { background: radial-gradient(120% 90% at 50% 0%, #4a3c31 0%, #352b24 55%, #2b231d 100%); }
.hb-ob .hb-ob__plain::after { content: none; }
.hb-ob__in { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 860px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 10px 0 calc(var(--hb-ob-bagel) / 2 + var(--hb-ob-ring) + 6px); }
.hb-ob__crumbs { max-width: 100%; }
.hb-ob__crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
/* Whole crumbs only: a crumb wraps to the next line as a unit, never cut mid-word. */
.hb-ob .hb-ob__crumbs li { white-space: nowrap; }
.hb-ob__crumbs li + li::before { content: "›"; margin-inline-end: 6px; opacity: .7; }
.hb-ob__crumbs a { color: inherit; text-decoration: none; }
.hb-ob__crumbs a:hover { text-decoration: underline; }
.hb-ob__crumbs [aria-current] { color: #fff; font-weight: 700; }
.hb-ob .hb-ob__title { margin: 0; max-width: 100%; color: #fff; font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; text-wrap: balance;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hb-ob__intro { margin: 4px 0 0; max-width: 680px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; color: rgba(255, 255, 255, .9);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* CJ 17/10: was 1 line, cut long intros mid-word */
/* The cut-out: a disc in the page colour on the band's bottom edge; the bagel rolls in and rests inside it. */
.hb-ob__ring { position: absolute; z-index: 2; left: 50%; bottom: calc(-1 * var(--ob-out)); width: calc(var(--hb-ob-bagel) + 2 * var(--hb-ob-ring)); aspect-ratio: 1;
	margin-left: calc(-.5 * (var(--hb-ob-bagel) + 2 * var(--hb-ob-ring))); border-radius: 50%; background: var(--hb-cream, #eae0d9); pointer-events: none; }
.hb-ob__bagel { position: absolute; z-index: 3; left: 50%; bottom: calc(-.5 * var(--hb-ob-bagel)); width: var(--hb-ob-bagel); height: var(--hb-ob-bagel);
	margin-left: calc(-.5 * var(--hb-ob-bagel)); pointer-events: none; filter: none !important; }
@media (max-width: 767px) {
	.hb-ob { margin-top: 10px; padding-inline: 14px; }
	.hb-ob .hb-ob__title { font-size: 23px; }
	.hb-ob__intro { font-size: 14px; -webkit-line-clamp: 2; }
	.hb-ob__intro-more { display: none; } /* CJ 17/10: first sentence only on phones (was cut mid-word) */
	.hb-ob__crumbs ol { font-size: 12.5px; }
	/* Long trails on a phone: home, the nearest parent and the page; the top family is one tap up anyway. */
	.hb-ob__crumbs li:not(:first-child):not(:last-child):not(:nth-last-child(2)) { display: none; }
}
/* The next section starts below the half-bagel: whatever top margin it had is replaced by the band's own gap. */
.hb-ob + * { margin-top: 0 !important; }
/* The facts row / one small action, inside the band: one row; a chip that does not fit moves to a hidden 2nd row. */
.hb-ob__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 30px; overflow: hidden; margin: 8px 0 0; padding: 0; list-style: none; }
.hb-ob__chips > li { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13.5px; line-height: 1; white-space: nowrap; }
.hb-ob__chips > li:has(.hb-ob__cta) { padding: 0; background: none; }
.hb-ob__chips a { color: inherit; }
.hb-ob .hb-ob__cta { display: inline-flex; align-items: center; height: 28px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--hb-sage, #8da28b); color: #fff; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.hb-ob .hb-ob__cta:hover { background: var(--hb-sage-dark, #768c74); }
/* What used to live in the old hero (a CTA, the business facts) now sits right under the band. */
.hb-ob-after { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin: 0 var(--hb-gutter) 0; padding-top: 4px; text-align: center; }
.hb-ob-after > * { margin: 0; }
.hb-ob-after, .hb-ob-after * { color: var(--hb-ink-warm); }
/* About (owner 17/10): the story photo IS the band, so the story section below shows its text only. */
.hb-about:has(.hb-ob--story) .hb-about__story-media { display: none; }
.hb-about:has(.hb-ob--story) .hb-about__story-grid { grid-template-columns: 1fr; }

/* Owner 17/10: nothing may run over the bagel. Whatever follows the band (shop toolbar, FAQ search, gallery chips,
   the menu builder title) starts below the half-bagel that hangs out of the band, plus a small breath. */
.hb-ob { margin-bottom: calc(var(--ob-out) + 12px) !important; }

/* Owner 17/10: on computers the openings are taller (the photo carries the page), and the first section after the
   band does not add its own big top padding on top of the bagel clearance. */
@media (min-width: 768px) { :root { --hb-ob-h: 364px; } }   /* owner 17/10: +30% on computers */
@media (min-width: 1200px) { :root { --hb-ob-h: 442px; } }
.hb-ob + .hb-cp__sec, .hb-ob + .hb-about__story, .hb-ob + section.hb-cp__sec { padding-top: 12px !important; }
/* Clean openings (owner 17/10): title + one line only. Fact chips (company, ID, year, phone, counts) go; a single
   action chip stays where a page has one. */
.hb-ob__chips > li:not(:has(.hb-ob__cta)) { display: none !important; }
.hb-ob__chips:not(:has(.hb-ob__cta)) { display: none !important; }

/* Owner 17/10: the opening band always has exactly the header's side margins, whatever wrapper a template puts it in
   (the menu builder's narrow column, the shop's edge-to-edge phone layout). It breaks out to the viewport and keeps
   the header gutter; --hb-sbw (set in polish-nav.js) takes the desktop scrollbar out of 100vw. */
.hb-ob { width: auto !important; max-width: none !important;
	margin-inline: calc(var(--hb-gutter) - (100vw - var(--hb-sbw, 0px) - 100%) / 2) !important; }