/* ============================================================
   Boqueria — site chrome + page sections
   ============================================================ */

:root { --header-h: 72px; }
html { scroll-padding-top: calc(var(--header-h) + 12px); }
.boq-anchor { display: block; height: 0; }
.boq-anchor.is-preview { height: auto; font: 11px/1.6 sans-serif; color: var(--red); }

/* ---------- Header (Flatsome header builder) ----------
   Layout and elements come from Customize → Header. These rules give it the
   prototype's look. Fonts are forced because Flatsome's typography CSS is inline. */
html body #header .header-nav-main > li > a:not(.btn) {
	font-family: var(--font-nav) !important; font-weight: 400 !important; font-size: 0.82rem; letter-spacing: 0.09em;
	text-transform: uppercase; color: var(--ink); padding: 0.75rem 0; line-height: normal;
}
html body #header .header-nav-main > li { margin: 0 0 0 1.75rem; }
html body #header .header-nav-main > li.html { margin-left: 1.5rem; }
html body #header .header-nav-main .icon-angle-down { display: none; }
html body #header .header-nav-main > li > a:not(.btn):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
html body #header .header-bg-color,
html body #header .header-main { background-color: var(--cream); }
html body #header .header-main { border-bottom: 1px solid var(--paper-line); }
html body #header .html .btn { margin: 0; }
html body #header .header-logo-dark { display: none !important; } /* one logo; recoloured over heroes */

/* Locations dropdown: three city columns, locations under each (prototype submenu) */
html body #header .boq-locations > .nav-dropdown {
	display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 1rem 1.5rem; min-width: 560px;
	background: var(--cream); border: 1px solid var(--paper-line); border-radius: var(--radius);
	box-shadow: 0 14px 34px rgba(23, 21, 21, 0.16); padding: 1.25rem 1.5rem;
}
html body #header .boq-locations > .nav-dropdown::before,
html body #header .boq-locations > .nav-dropdown::after { display: none; } /* Flatsome arrow */
html body #header .boq-locations .nav-dropdown > li { width: auto; margin: 0; padding: 0; border: 0; display: grid; gap: 0.2rem; align-content: start; }
html body #header .boq-locations .nav-dropdown li > ul,
html body #header .boq-locations .nav-dropdown li > .sub-menu {
	position: static !important; display: grid !important; gap: 0.2rem; opacity: 1 !important; visibility: inherit !important;
	transform: none !important; left: auto !important; min-width: 0; width: auto; margin: 0; padding: 0;
	background: none; border: 0; box-shadow: none;
}
html body #header .boq-locations .nav-dropdown a {
	font-family: var(--font-body) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
	font-size: 0.95rem; color: var(--charcoal); padding: 0.3rem 0; margin: 0; border: 0; line-height: 1.3; background: none;
}
html body #header .boq-locations .nav-dropdown a:hover { color: var(--ink); text-decoration: underline; background: none; }
html body #header .boq-locations .nav-dropdown .boq-city > a {
	font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important;
	color: var(--charcoal); pointer-events: none; padding: 0 0 0.15rem;
}
html body #header .boq-locations .nav-dropdown .boq-city > a::after,
html body #header .boq-locations .nav-dropdown .icon-angle-down { display: none; }

/* Pages that open with a full-bleed hero: header over it, transparent until stuck */
html body.boq-has-hero #header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
html body.boq-has-hero #header .header-wrapper:not(.stuck) .header-main { border-color: transparent; }
html body.boq-has-hero #header .header-wrapper:not(.stuck) .header-bg-color,
html body.boq-has-hero #header .header-wrapper:not(.stuck) .header-main { background-color: transparent; }
html body.boq-has-hero #header .header-wrapper:not(.stuck) .header-main .nav > li > a:not(.btn),
html body.boq-has-hero #header .header-wrapper:not(.stuck) .header-main .icon-menu,
html body.boq-has-hero #header .header-wrapper:not(.stuck) .header-main .nav-icon a { color: var(--cream); }
html body.boq-has-hero #header .header-wrapper:not(.stuck) .header-logo { filter: brightness(0) invert(1); }

/* Mobile menu (Flatsome off-canvas) → prototype's full-width cream drawer */
html body .off-canvas .mobile-sidebar,
html body .off-canvas-left .mfp-content,
html body .off-canvas-right .mfp-content { width: 100%; max-width: none; background: var(--cream); }
html body .off-canvas .mobile-sidebar { padding: 1.5rem var(--gutter) 3rem; }
html body .mobile-sidebar .nav-sidebar > li { border-bottom: 1px solid var(--paper-line); }
html body .mobile-sidebar .nav-sidebar > li > a {
	font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 2rem; line-height: 1.1;
	text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); padding: 0.55rem 0;
}
html body .mobile-sidebar .boq-locations > .toggle { display: none; } /* cities always open */
html body .mobile-sidebar .boq-locations > ul.children,
html body .mobile-sidebar .boq-locations > .sub-menu {
	display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1rem 0 1.5rem; margin: 0;
}
html body .mobile-sidebar .boq-locations ul ul { display: grid !important; gap: 0.15rem; padding: 0; margin: 0; }
html body .mobile-sidebar .boq-locations li { border: 0; margin: 0; }
html body .mobile-sidebar .boq-locations li > .toggle { display: none; }
html body .mobile-sidebar .boq-locations ul a {
	font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 1rem; text-transform: none;
	letter-spacing: 0; color: var(--charcoal); padding: 0.35rem 0;
}
html body .mobile-sidebar .boq-locations .boq-city > a {
	font-family: var(--font-display) !important; text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none; padding: 0;
}
html body .mobile-sidebar .html { padding: 0; border: 0; }
html body .mobile-sidebar .boq-offcanvas-book { width: 100%; margin-top: 1.25rem; }

/* ---------- Sticky mobile Book bar ---------- */
.boq-sticky-bar { display: none; }
@media (max-width: 899px) {
	html body { padding-bottom: var(--sticky-h); }
	.boq-sticky-bar {
		display: block; position: fixed; inset: auto 0 0 0; z-index: 998;
		padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
		background: linear-gradient(to top, rgba(14, 13, 13, 0.28), transparent); pointer-events: none;
	}
	html body .boq-sticky-cta { width: 100%; min-height: 52px; pointer-events: auto; box-shadow: 0 8px 22px rgba(23, 21, 21, 0.28); }
	html[data-sheet-open] .boq-sticky-bar, html.has-off-canvas .boq-sticky-bar, body.mfp-active .boq-sticky-bar { display: none; }
}

/* ---------- Sections ----------
   Every layout section carries .boq-pad for the prototype's section rhythm. */
html body .section.boq-pad { padding-top: var(--space-section) !important; padding-bottom: var(--space-section) !important; }
.boq-title { color: var(--ink); }
.dark .boq-title { color: var(--cream); }
.boq-lede { font-size: 1.05rem; max-width: 58ch; margin-bottom: 2.25rem; }

/* Full-bleed hero (homepage + location pages) */
html body .section.boq-hero {
	position: relative; display: flex; align-items: flex-end; min-height: min(92dvh, 860px);
	padding: 0 !important; background-color: var(--charcoal);
}
html body .section.boq-loc-hero { min-height: min(74dvh, 680px); }
html body .boq-hero > .section-content { position: static !important; width: 100%; padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.boq-hero .row { position: relative; z-index: 2; }
.boq-hero .section-bg::after,
.boq-hero-media__scrim {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(to bottom, rgba(14, 13, 13, 0.42), rgba(14, 13, 13, 0) 30%),
		linear-gradient(to top, rgba(14, 13, 13, 0.86), rgba(14, 13, 13, 0.1) 62%);
}
.boq-hero-media { position: absolute; inset: 0; z-index: 0; }
.boq-hero-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html body .boq-hero h1 { color: var(--cream); font-size: clamp(2.6rem, 6vw, 5.25rem); max-width: 18ch; margin-bottom: 0.35em; }
html body .boq-loc-hero h1 { font-size: clamp(2.7rem, 6.5vw, 5.2rem); max-width: none; }
.boq-hero-sub { color: rgba(255, 246, 238, 0.92); font-size: 1.1rem; margin-bottom: 1.5rem; }
html body .boq-loc-hero .boq-hero-sub { color: rgba(255, 246, 238, 0.94); font-size: 1.05rem; margin-bottom: 1.4rem; }
html body .boq-hero .col { padding-bottom: 0; }
/* Text + CTA buttons: the prototype's flex row with a 0.9rem gap */
html body .boq-hero .col-inner { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
html body .boq-hero .col-inner > .text { flex: 0 0 100%; }
html body .boq-hero .col-inner > .btn, html body .boq-hero .col-inner > .button { margin: 0; }
html body .boq-hero .text > :last-child { margin-bottom: 0.6rem; }
html body .boq-home-hero .text > :last-child { margin-bottom: 0.6rem; }
.boq-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.boq-ctas .btn, .boq-ctas .button { margin: 0; }

/* Location: red booking section — prototype grid: text | widget (320–460px) */
html body .boq-book-band .row { display: grid; grid-template-columns: 1fr minmax(320px, 460px); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-inline: 15px; }
html body .boq-book-band .row > .col { max-width: none; flex: none; padding: 0; width: auto; }
@media (max-width: 860px) { html body .boq-book-band .row { grid-template-columns: 1fr; row-gap: 2rem; } }
html body .section.boq-book-band { background: var(--red) !important; }
.boq-book-band h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: var(--cream); }
.boq-book-address { color: var(--cream); font-size: 1.05rem; line-height: 1.7; }
html body .boq-book-band a:not(.btn) { color: var(--cream); }
.boq-book-assure { color: rgba(255, 246, 238, 0.92); font-size: 0.95rem; max-width: 42ch; }
.boq-book-alt { font-size: 0.95rem; }

/* Location: hours + getting here — prototype 1fr 1fr grid */
html body .boq-hours-section .row { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); padding-inline: 15px; }
html body .boq-hours-section .row > .col { max-width: none; flex: none; padding: 0; width: auto; }
@media (max-width: 860px) { html body .boq-hours-section .row { grid-template-columns: 1fr; row-gap: 2rem; } }
html body .boq-hours-section address { font-style: normal; font-size: 1.05rem; line-height: 1.7; margin-bottom: 0.75rem; }
.boq-here-links { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.boq-here-links li { padding-block: 0.25rem; margin: 0; }
.boq-loc-intro { color: var(--charcoal); font-size: 0.98rem; }

/* Location: celebrate box */
html body .row.boq-celebrate { background: var(--churro); border-radius: 8px; padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); align-items: center; }
.boq-celebrate p { max-width: 52ch; margin: 0; }
.boq-celebrate .col:last-child { text-align: right; }
@media (max-width: 849px) { .boq-celebrate .col:last-child { text-align: left; } }

/* Menus block (dark) */
html body .section.boq-menus { background: var(--charcoal) !important; color: var(--churro); position: relative; overflow: hidden; }
.boq-menus::before {
	content: ''; position: absolute; right: clamp(-40px, 2vw, 60px); top: 56px; width: clamp(110px, 12vw, 170px); aspect-ratio: 1;
	background: url('../img/stamp-octopus.png') center / contain no-repeat; opacity: 0.5; pointer-events: none;
}
@media (max-width: 760px) { .boq-menus::before { top: auto; bottom: 12px; opacity: 0.3; } }
html body .boq-menus .boq-menus-title { color: var(--churro); font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.boq-menus-lede { color: rgba(238, 229, 211, 0.85); max-width: 62ch; margin-bottom: 2rem; }
.boq-printed { margin-top: 2rem; font-size: 0.92rem; color: rgba(238, 229, 211, 0.85); }
html body .boq-printed a { color: var(--churro); }
/* Flatsome tabs → prototype menu tabs */
html body .boq-menus .nav { border-bottom: 1px solid rgba(238, 229, 211, 0.28); margin-bottom: 1.6rem; gap: 0.4rem; justify-content: flex-start; }
html body .boq-menus .nav > li { margin: 0; }
html body .boq-menus .nav > li > a {
	font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.2rem; font-weight: 400;
	padding: 0.6rem 1rem 0.5rem; color: rgba(238, 229, 211, 0.72); border-bottom: 3px solid transparent; margin-bottom: -1px; min-height: 44px;
}
html body .boq-menus .nav > li > a::before { display: none; }
html body .boq-menus .nav > li > a:hover { color: var(--churro); }
html body .boq-menus .nav > li.active > a { color: var(--churro); border-bottom-color: var(--churro); }
html body .boq-menus .tab-panels { padding: 0; border: 0; background: none; }
html body .boq-menus .boq-mi__name, html body .boq-menus .boq-mi__price { color: var(--churro); }
html body .boq-menus .boq-mi__desc { color: rgba(238, 229, 211, 0.78); opacity: 1; }

/* Homepage: proof + events */
html body .section.boq-proof { background: var(--churro) !important; }
.boq-shadow-img img { border-radius: 6px; box-shadow: 0 24px 48px rgba(23, 21, 21, 0.22); }
.boq-round-img img { border-radius: 6px; }
.boq-proof-line { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.6rem; line-height: 1.25; color: var(--ink); margin: 1.5rem 0 1rem; max-width: 26ch; }
html body .boq-quiet-link { font-family: var(--font-nav); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; color: var(--charcoal); padding-block: 0.5rem; display: inline-block; }
html body .boq-quiet-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.boq-events-note { font-size: 0.9rem; color: var(--charcoal); margin: 0.75rem 0 0; }
@media (max-width: 849px) { .boq-events-row > .col:last-child { order: -1; } }

/* Reserve + Events pages */
html body .boq-reserve-help { margin-top: 3.5rem; background: var(--churro); border-radius: 6px; padding: 1.5rem 1.75rem; max-width: 640px; }
html body .boq-reserve-help h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.boq-reserve-help ul { margin: 0; padding-left: 1.1rem; }
.boq-reserve-help li { padding-block: 0.2rem; }
.boq-city-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.boq-city-links .btn, .boq-city-links .button { margin: 0; }
.boq-narrow { max-width: 640px; }

/* ---------- Footer (UX Block "site-footer") ---------- */
html body .section.boq-site-footer { background: var(--night) !important; color: var(--churro); padding: var(--space-section) 0 2rem !important; margin-top: var(--space-section); }
.boq-footer-logo { max-width: 150px; }
.boq-footer-thesis { font-family: var(--font-display); text-transform: uppercase; font-size: 1.35rem; line-height: 1.2; margin: 1rem 0; max-width: 16ch; color: var(--churro); }
html body .boq-footer-social { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--churro); text-decoration: none; font-family: var(--font-nav); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding-block: 0.5rem; }
html body .boq-footer-social:hover { color: var(--cream); }
html body .boq-site-footer h2 { font-size: 1.15rem; color: var(--churro); letter-spacing: 0.08em; margin-bottom: 0.9rem; }
html body .boq-footer-links a { display: block; color: rgba(238, 229, 211, 0.82); text-decoration: none; padding: 0.28rem 0; font-size: 0.95rem; }
html body .boq-footer-links a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.boq-footer-news p { color: rgba(238, 229, 211, 0.82); font-size: 0.95rem; }
.boq-footer-bottom { border-top: 1px solid rgba(238, 229, 211, 0.2); margin-top: 3rem !important; padding-top: 1.5rem; font-size: 0.85rem; color: rgba(238, 229, 211, 0.66); }
.boq-footer-bottom__inner { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; justify-content: space-between; }
.boq-footer-bottom p { margin: 0; }
html body .boq-footer-bottom a { color: inherit; }

/* Newsletter (Contact Form 7, html_class="boq-news-form") */
.boq-news-form .boq-news-fields, .boq-news-form .boq-news-fields > p { display: grid; gap: 0.6rem; max-width: 320px; }
.boq-news-form br { display: none; }
.boq-news-form p { margin: 0; }
.boq-news-form .wpcf7-form-control-wrap { display: block; }
html body .boq-news-form input[type='text'],
html body .boq-news-form input[type='email'] {
	background: transparent; border: 1px solid rgba(238, 229, 211, 0.45); border-radius: var(--radius); box-shadow: none;
	color: var(--churro); font-family: var(--font-body); font-size: 1rem; padding: 0.7rem 0.9rem; width: 100%; height: auto; margin: 0;
}
.boq-news-form input::placeholder { color: rgba(238, 229, 211, 0.62); }
html body .boq-news-form input[type='submit'] {
	min-height: 48px; margin: 0; padding: 0.35em 1.7em 0.25em; border-radius: 999px; border: 2px solid var(--churro);
	background: transparent; color: var(--cream); font-family: var(--font-display); font-size: 1.15rem; font-weight: 400;
	letter-spacing: 0.06em; text-transform: uppercase; justify-self: start; cursor: pointer;
}
html body .boq-news-form input[type='submit']:hover { background: var(--cream); color: var(--ink); }
.boq-news-form .wpcf7-response-output { margin: 0.75rem 0 0 !important; color: var(--churro); font-size: 0.9rem; }
.boq-news-form .wpcf7-spinner { display: none; }

/* Flatsome buttons placed side by side in a column */
html body .col-inner > .button.btn-book,
html body .col-inner > .button.btn-outline { margin: 0 0.9rem 0.9rem 0; }
html body p.boq-lede { max-width: 58ch; }
html body p.boq-book-assure { max-width: 42ch; }
html body p.boq-menus-lede { max-width: 62ch; }
html body p.boq-proof-line { max-width: 26ch; }
html body .boq-celebrate p { max-width: 52ch; }

html body .boq-here-links, html body .boq-here-links li { margin-left: 0; }

/* Celebrate box: full container width (1180px), 48px padding, text left / button right */
html body .row.boq-celebrate { max-width: var(--container); width: calc(100% - 2 * var(--gutter)); margin-inline: auto; padding: clamp(1.75rem, 4vw, 3rem); }
html body .row.boq-celebrate > .col { padding: 0; }
html body .row.boq-celebrate h2 { margin-bottom: 0.5em; }
@media (min-width: 850px) { html body .row.boq-celebrate { flex-wrap: nowrap; justify-content: space-between; gap: 1.5rem; } html body .row.boq-celebrate > .col { flex: 0 1 auto; max-width: none; width: auto; } }

/* Footer: prototype grid 1.4fr 1fr 1fr 1.6fr */
html body .boq-site-footer .row:not(.boq-footer-bottom) { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 2.5rem; padding-inline: 15px; }
html body .boq-site-footer .row > .col { max-width: none; flex: none; width: auto; padding: 0; }
html body .boq-site-footer .row.boq-footer-bottom { padding-inline: 15px; }
html body .boq-site-footer .row.boq-footer-bottom > .col { padding: 0; }
@media (max-width: 899px) { html body .boq-site-footer .row:not(.boq-footer-bottom) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { html body .boq-site-footer .row:not(.boq-footer-bottom) { grid-template-columns: 1fr; gap: 2rem; } }
html body .boq-footer-bottom__inner { justify-content: flex-start; }
html body .boq-footer-bottom a { text-decoration: underline; }

/* Flatsome adds 30px under every column; the prototype has none (stacked columns get a row gap instead) */
html body .section.boq-pad .row > .col,
html body .section.boq-hero .row > .col,
html body .section.boq-site-footer .row > .col { padding-bottom: 0; }
html body .section.boq-pad .row { row-gap: 2rem; }

html body .row.boq-celebrate > .col:last-child > .col-inner { display: flex; justify-content: flex-end; }
@media (max-width: 849px) { html body .row.boq-celebrate > .col:last-child > .col-inner { justify-content: flex-start; } }

/* Text colours on dark sections (Flatsome's .dark p / li would win otherwise) */
html body .dark p.boq-menus-lede { color: rgba(238, 229, 211, 0.85); }
html body .dark p.boq-printed { color: rgba(238, 229, 211, 0.85); }
html body .dark .boq-printed a { color: var(--churro); }
html body .dark p.boq-hero-sub { color: rgba(255, 246, 238, 0.92); }
html body .dark .boq-loc-hero p.boq-hero-sub { color: rgba(255, 246, 238, 0.94); }
html body .dark p.boq-book-address { color: var(--cream); }
html body .dark p.boq-book-assure { color: rgba(255, 246, 238, 0.92); }
html body .boq-book-band p.boq-book-alt { color: var(--cream); }
html body .boq-site-footer p, html body .boq-site-footer .boq-footer-news p { color: rgba(238, 229, 211, 0.82); }
html body .boq-site-footer p.boq-footer-thesis { color: var(--churro); }
html body .boq-site-footer .boq-footer-bottom p { color: rgba(238, 229, 211, 0.66); }
/* Flatsome's clearfix pseudo-elements become stray grid items in our grid rows */
html body .boq-book-band .row::before, html body .boq-book-band .row::after,
html body .boq-hours-section .row::before, html body .boq-hours-section .row::after,
html body .boq-site-footer .row::before, html body .boq-site-footer .row::after { content: none; display: none; }
html body .section.boq-pad .row::before, html body .section.boq-pad .row::after,
html body .section.boq-hero .row::before, html body .section.boq-hero .row::after { content: none; display: none; }
html body .boq-news-form form, html body .boq-news-form .wpcf7-form { margin: 0; }
html body .boq-news-form input[type='text'], html body .boq-news-form input[type='email'] { min-height: 0; line-height: 1.6; height: auto; }
html body .boq-news-form input[type='submit'] { width: 100%; justify-self: stretch; line-height: 1.6; }

/* Homepage: "Our roots" 1.1fr | 1fr and "Events" 1fr | 1.1fr grids, as the prototype */
html body .boq-proof .row, html body .row.boq-events-row { display: grid; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-inline: 15px; }
html body .boq-proof .row { grid-template-columns: 1.1fr 1fr; }
html body .row.boq-events-row { grid-template-columns: 1fr 1.1fr; }
html body .boq-proof .row > .col, html body .row.boq-events-row > .col { max-width: none; flex: none; width: auto; padding: 0; }
@media (max-width: 860px) {
	html body .boq-proof .row, html body .row.boq-events-row { grid-template-columns: 1fr; row-gap: 2rem; }
	html body .row.boq-events-row > .col:last-child { order: -1; }
}
html body .boq-proof .row::before, html body .boq-proof .row::after { content: none; display: none; }
html body .boq-shadow-img, html body .boq-round-img { margin: 0; }
html body .boq-shadow-img .img-inner, html body .boq-round-img .img-inner { border-radius: 6px; overflow: hidden; }
html body .boq-shadow-img { box-shadow: 0 24px 48px rgba(23, 21, 21, 0.22); border-radius: 6px; }
html body .boq-hero .col-inner > .button:not(#boq), html body .boq-hero .col-inner > .btn:not(#boq) { margin: 0; }
html body .boq-news-form input[type='text'], html body .boq-news-form input[type='email'] { line-height: 1.2; font-size: 1rem; }
html body .boq-news-form .boq-news-fields > p { gap: 0.6rem; }
/* Flatsome's header divider (container-width line) — the prototype has a full-width bottom border instead */
html body #header .top-divider, html body #header .header-divider { display: none; }

/* Reserve page: city headings + tap-to-call underline, as the prototype */
html body .boq-city-grid.is-full .boq-city-name { font-size: 1.2rem; }
html body .boq-loc-card__extra a { text-decoration: underline; text-underline-offset: 3px; }

/* Events page: 1.1fr | 1fr grid, city buttons with 0.75rem gaps */
html body.boq-page-events .section.boq-pad .row { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-inline: 15px; }
html body.boq-page-events .section.boq-pad .row::before, html body.boq-page-events .section.boq-pad .row::after { content: none; display: none; }
html body.boq-page-events .section.boq-pad .row > .col { max-width: none; flex: none; width: auto; padding: 0; }
html body.boq-page-events .row > .col:first-child > .col-inner { display: flex; flex-wrap: wrap; gap: 0.75rem; align-content: flex-start; }
html body.boq-page-events .row > .col:first-child > .col-inner > .text { flex: 0 0 100%; margin-bottom: calc(1.75rem - 0.75rem); }
html body.boq-page-events .row > .col:first-child .text > :last-child { margin-bottom: 0; }
html body.boq-page-events .col-inner > .button:not(#boq) { margin: 0; }
@media (max-width: 860px) { html body.boq-page-events .section.boq-pad .row { grid-template-columns: 1fr; row-gap: 2rem; } }

/* ---------- Mobile drawer (Flatsome off-canvas) — prototype layout ----------
   Panel opens under the header (which stays as it is) and the menu icon becomes ✕. */
html.has-off-canvas body #header { z-index: 1050; }
html.has-off-canvas body #header .icon-menu::before { content: '\2715'; font-family: Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1; }
html body .mfp-wrap.off-canvas, html body .off-canvas + .mfp-bg, html body .mfp-bg.off-canvas { top: var(--header-h) !important; height: calc(100% - var(--header-h)) !important; }
html body .mfp-bg.off-canvas, html body .mfp-bg.off-canvas-left { background: var(--cream); opacity: 1 !important; }
html body .off-canvas .mfp-close { display: none !important; }
html body .off-canvas .mfp-content { box-shadow: none; top: var(--header-h) !important; height: calc(100% - var(--header-h)) !important; }
.admin-bar .off-canvas .mfp-content { top: calc(var(--header-h) + 46px) !important; }
html body .off-canvas .mobile-sidebar { padding: 1.5rem var(--gutter) 3rem; }
html body .mobile-sidebar .sidebar-menu { padding: 0; }
html body .mobile-sidebar .nav-sidebar { display: flex; flex-direction: column; }
html body .mobile-sidebar .nav-sidebar > li:has(> a[href$="#our-menus"], > a[href="#menus"]) { order: -1; }
html body .mobile-sidebar .nav-sidebar > li { border-bottom: 1px solid var(--paper-line) !important; border-top: 0 !important; }
html body .mobile-sidebar .nav-sidebar > li > a {
	font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 2rem !important; line-height: 1.6;
	letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink) !important; padding: 0.55rem 0 !important;
}
html body .mobile-sidebar .boq-locations > .toggle,
html body .mobile-sidebar .boq-locations > ul { display: none !important; }
html body .mobile-sidebar > .sidebar-menu > ul > li.html { border: 0 !important; padding: 0; }
html body .mobile-sidebar li.html .boq-offcanvas-book:not(#boq) {
	display: flex; width: 100%; margin: 0.5rem 0 0; font-family: var(--font-display) !important; font-size: 1.15rem !important;
	color: var(--cream) !important; padding: 0.35em 1.7em 0.25em !important; line-height: 1.6 !important;
}
.boq-drawer-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-block: 1.5rem; text-transform: none; }
.boq-drawer-city { display: grid; gap: 0.15rem; }
html body .boq-drawer-city__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal); font-size: 0.95rem; margin-bottom: 0.15rem; }
html body .boq-drawer-city a { font-family: var(--font-body); color: var(--charcoal); text-decoration: none; padding: 0.35rem 0; font-size: 1rem; letter-spacing: 0; text-transform: none; }
html body .boq-loc-hero h1 { margin-bottom: 0.3em; }
html.has-off-canvas body #header .current-lightbox-clicked { opacity: 1 !important; } /* Flatsome hides the clicked icon */

/* Below desktop width the prototype insets content by --gutter (20px on phones); Flatsome uses 15px */
@media (max-width: 1179px) {
	html body .section .row > .col { padding-left: var(--gutter); padding-right: var(--gutter); }
	html body .boq-book-band .row, html body .boq-hours-section .row, html body .boq-site-footer .row,
	html body .boq-proof .row, html body .row.boq-events-row, html body.boq-page-events .section.boq-pad .row { padding-inline: var(--gutter); }
	html body .boq-book-band .row > .col, html body .boq-hours-section .row > .col, html body .boq-site-footer .row > .col,
	html body .boq-proof .row > .col, html body .row.boq-events-row > .col, html body.boq-page-events .section.boq-pad .row > .col,
	html body .row.boq-celebrate > .col { padding-left: 0; padding-right: 0; }
	html body #header .header-inner { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (max-width: 560px) { html body .boq-footer-bottom__inner { flex-direction: column; gap: 0.4rem; } }

/* Locations dropdown: centred under the item, prototype line spacing, no Flatsome arrow */
html body #header li.boq-locations > .nav-dropdown { transform: translateX(-50%); margin-top: 0; }
/* Only placed under the item while open; closed, it stays off-screen (Flatsome's left:-99999px) */
html body #header li.boq-locations.current-dropdown > .nav-dropdown,
html body #header li.boq-locations:hover > .nav-dropdown { left: 50% !important; }
html body #header li.boq-locations.has-dropdown::before, html body #header li.boq-locations.has-dropdown::after { display: none !important; }
html body #header .boq-locations .nav-dropdown li:not(.boq-city) > a { line-height: 1.6; padding: 0.3rem 0; }
html body #header .boq-locations .nav-dropdown .boq-city > a { line-height: 1.05; padding: 0 0 0.15rem; margin-bottom: 0.15rem; }

/* Thanks + 404: centred 640px block with extra vertical padding, as the prototype */
html body.boq-page-thanks .section.boq-pad .row,
html body.error404 .section.boq-pad .row { max-width: 640px; padding-block: 3rem; }
html body.boq-page-thanks .section.boq-pad .row > .col,
html body.error404 .section.boq-pad .row > .col { padding-left: var(--gutter); padding-right: var(--gutter); }
html body.boq-page-thanks .boq-narrow, html body.error404 .boq-narrow { max-width: none; }
html body.error404 .col-inner { display: flex; flex-wrap: wrap; gap: 0.9rem; }
html body.error404 .col-inner > .text { flex: 0 0 100%; }
html body.error404 .col-inner > .button:not(#boq), html body.boq-page-thanks .col-inner > .button:not(#boq) { margin: 0; }
html body.error404 .col-inner > .text > :last-child, html body.boq-page-thanks .col-inner > .text { margin-bottom: 0.5rem; }
html body.error404 .col-inner { row-gap: 9px; }
html body.error404 .col-inner > .text p:last-child, html body.error404 .col-inner > .text .boq-narrow > :last-child { margin-bottom: 0 !important; }

/* Hero: every non-button item (Text element, or a heading / paragraph UX Builder saved on its own)
   takes the full row, so the CTA buttons always sit on their own line below — as the prototype */
html body .boq-hero .col-inner > :not(.btn):not(.button) { flex: 0 0 100%; }
html body .boq-hero .col-inner > p { margin-bottom: 0.6rem; }