/*
 * Belles Boutique — shared theme styles.
 *
 * Section-specific rules live in assets/css/page-{slug}.css, scoped under their section
 * class. Everything here is either a design token, a base element, or a component used
 * on every page (header, footer, hero, CTA band, buttons, carousel, forms).
 *
 * Colours come from theme.json (--wp--preset--color--bb-*). The extra tokens below are
 * the values the Figma file uses that have no palette slug: the hero tints and the
 * hairline on dark backgrounds.
 */

/* ------------------------------------------------------------------------------------
 * Design tokens — the canonical system (docs/design-system.md).
 *
 * Every value here is a Figma value. Where the Figma file used several near-identical
 * values for one role (five golds for a 1px card border, six inks for body copy, section
 * headings at 60/56/34/32/31px) the canonical one is recorded in docs/design-system.md
 * with the variants it replaced. Page CSS must use these tokens, never a raw hex or a
 * one-off font size.
 * ---------------------------------------------------------------------------------- */

:root {
	/* -- palette (theme.json) -- */
	--bb-burgundy: var( --wp--preset--color--bb-burgundy, #440e1f );
	--bb-cream: var( --wp--preset--color--bb-cream, #faf7f3 );
	--bb-pink-light: var( --wp--preset--color--bb-pink-light, #f1dbda );
	--bb-pink: var( --wp--preset--color--bb-pink, #dda6a3 );
	--bb-pink-dark: var( --wp--preset--color--bb-pink-dark, #584241 );
	--bb-gold: var( --wp--preset--color--bb-gold, #ebd2a7 );
	--bb-gold-light: var( --wp--preset--color--bb-gold-light, #efdbb9 );
	--bb-white: #fff;

	/* -- colour roles -- */
	--bb-bg: var( --bb-cream );              /* page background */
	--bb-bg-alt: var( --bb-pink-light );     /* alternate band, pink cards */
	--bb-bg-dark: var( --bb-burgundy );      /* dark band, footer, header */
	--bb-surface: var( --bb-white );         /* card fill on a light band */
	--bb-ink: var( --bb-burgundy );          /* headings and body copy */
	--bb-ink-muted: var( --bb-pink-dark );   /* secondary text */
	--bb-ink-on-dark: var( --bb-cream );     /* body copy on burgundy */
	--bb-accent: var( --bb-pink );           /* eyebrows, rules, hairlines on pink */
	--bb-accent-gold: var( --bb-gold );      /* headings and labels on burgundy */

	/* -- borders: one width, four roles -- */
	--bb-border-w: 1px;
	--bb-border-card: var( --bb-gold );      /* every card, input and accordion hairline */
	--bb-border-soft: var( --bb-pink );      /* rules and borders on a pink surface */
	--bb-border-ink: var( --bb-burgundy );   /* outline buttons, carousel arrows */
	--bb-border-dark: #ffffff33;             /* hairline on burgundy */
	--bb-border-photo: #000;                 /* the 1px photo outline (About / Home splits) */
	--bb-border: var( --bb-border-dark );    /* legacy alias */

	/* -- form fields -- */
	--bb-field-bg: var( --bb-surface ); /* white fields on the cream page (Figma #fffdfc, 11217:4483) */
	--bb-field-border: var( --bb-border-card );
	--bb-focus: var( --bb-burgundy );
	--bb-focus-w: 2px;
	--bb-focus-offset: 2px;

	/* Hero tints (Figma 11131:689, 11161:417). */
	--bb-hero-tint: rgba( 68, 14, 31, 0.5 );
	--bb-hero-gradient: linear-gradient( 90deg, #440e1f 0%, #dda6a3 100% );

	/* -- type: families -- */
	--bb-font-display: var( --wp--preset--font-family--display );
	--bb-font-body: var( --wp--preset--font-family--body );

	/* -- type: sizes (exact at 1440, fluid below) -- */
	--bb-fs-display: clamp( 2.5rem, 6.528vw, 94px );   /* hero H1 */
	--bb-fs-h2: clamp( 2.125rem, 4.167vw, 60px );      /* every section heading */
	--bb-fs-h3: clamp( 1.25rem, 1.667vw, 24px );       /* card heading (Figma style "H4") */
	--bb-fs-h4: clamp( 1.125rem, 1.389vw, 20px );      /* compact card heading */
	--bb-fs-eyebrow: clamp( 1.25rem, 1.766vw, 25.43px );
	--bb-fs-quote: clamp( 1.5rem, 2.778vw, 40px );
	--bb-fs-lead: 18px;
	--bb-fs-body: 16px;                                /* Figma style "body" 16/24 */
	--bb-fs-small: 14px;                               /* Figma style "desc text" 14/18 */
	--bb-fs-micro: 12px;                               /* compact card meta */
	--bb-fs-btn: 16px;
	--bb-fs-btn-sm: 12px;

	/* -- type: line heights -- */
	--bb-lh-display: 0.87;
	--bb-lh-h2: 0.9667;   /* 58 / 60 */
	--bb-lh-h3: 1.1667;   /* 28 / 24 */
	--bb-lh-h4: 1.1;
	--bb-lh-eyebrow: 1.0833; /* 27.549 / 25.43 */
	--bb-lh-lead: 1.4444; /* 26 / 18 */
	--bb-lh-body: 1.5;    /* 24 / 16 */
	--bb-lh-small: 1.2857; /* 18 / 14 */
	--bb-lh-micro: 1.3333; /* 16 / 12 */
	--bb-lh-quote: 1.225; /* 49 / 40 */

	/* -- type: tracking -- */
	--bb-ls-display: -0.07em;
	--bb-ls-h2: -0.04em;
	--bb-ls-h3: -0.02em;
	--bb-ls-eyebrow: -0.04em;
	--bb-ls-menu: 0.1875em; /* Figma style "Menu text": 16px, +3 */
	--bb-ls-label: 0.08em;
	--bb-ls-btn: 0.03em;

	/* -- spacing scale (Figma 1440 values) -- */
	--bb-space-band: clamp( 3rem, 8.334vw, 120px ); /* section block padding */
	--bb-space-lg: clamp( 2.5rem, 5.56vw, 80px );
	--bb-space-md: clamp( 2rem, 4.17vw, 60px );
	--bb-space-intro: 45px;   /* intro -> content */
	--bb-space-head: 20px;    /* heading -> intro */
	--bb-card-pad: 32px;      /* card padding */
	--bb-card-pad-lg: clamp( 2rem, 4.17vw, 60px );
	--bb-card-pad-sm: 22px;   /* compact card / accordion row */
	--bb-band-space: var( --bb-space-band ); /* legacy alias */

	/* -- container -- */
	--bb-container: 1240px;
	--bb-container-wide: 1355px;
	--bb-gutter: clamp( 1rem, 4.93vw, 71px );     /* hero text inset */
	--bb-bar-gutter: clamp( 1rem, 2.8vw, 40px );  /* header / footer bar inset */
	--bb-header-h: 119px;

	/* -- radii -- */
	--bb-radius-pill: 30px;
	--bb-radius-lg: 30px;   /* large cards and media */
	--bb-radius-md: 20px;   /* compact cards */
	--bb-radius-sm: 4px;    /* controls and inputs */
	--bb-radius: var( --bb-radius-pill ); /* legacy alias */

	/* -- shadow -- */
	--bb-shadow-header: 0 2px 24px rgba( 68, 14, 31, 0.25 );

	/* -- icons and arrows -- */
	--bb-arrow-btn: 44px;
	--bb-icon: 24px;
	--bb-icon-sm: 13px;
	--bb-stroke: 1.5px;

	/* Section grid (see "Layout grid" below). */
	--bb-grid-gap: 60px;
	--bb-grid-gap-tablet: 32px;
	--bb-grid-gap-phone: 16px;
}

/* ------------------------------------------------------------------------------------
 * Layout grid
 *
 * Every section lays its content out on this 12-column grid so the responsive collapse
 * is shared. At >= 1280px a section sets its own tracks to the exact Figma widths
 * (e.g. `grid-template-columns: 592px 1fr 494px`) inside its page CSS, so 1440 stays
 * pixel-exact; below that the utilities take over: tablet spans (782-1024px) and a single
 * stacked column on phones (<= 781px). The Figma frames are not on one grid (margins of
 * 71 / 100 / 123px occur), so the container width is set per section with
 * `--bb-content-w` and the grid only owns columns and gaps.
 *
 *   <div class="bb-grid">
 *     <div class="bb-col bb-span-6 bb-md-span-12">…</div>
 *     <div class="bb-col bb-span-6 bb-md-span-12">…</div>
 *   </div>
 *
 * Columns flow in document order, so `bb-start-N` is only needed to indent a row that
 * does not fill all twelve columns.
 * ---------------------------------------------------------------------------------- */
.bb-grid {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	column-gap: var( --bb-grid-gap );
	row-gap: var( --bb-grid-row-gap, var( --bb-grid-gap ) );
	align-items: var( --bb-grid-align, start );
	width: 100%;
	max-width: var( --bb-content-w, none );
	margin-inline: auto !important; /* core's constrained layout sets margin auto !important on children */
}
/* At >= 1025px a column is placed by its own `bb-span-N` (auto / span N), so no
   `bb-start-N` is needed; below that every column is full width. */
.bb-col { min-width: 0; }
@media ( max-width: 1024px ) {
	.bb-col { grid-column: 1 / -1; }
}
.bb-grid > .wp-block-image,
.bb-grid > .wp-block-group,
.bb-grid > figure { margin-block: 0; }

@media ( min-width: 1025px ) {
	.bb-span-1 { grid-column: auto / span 1; } .bb-span-2 { grid-column: auto / span 2; }
	.bb-span-3 { grid-column: auto / span 3; } .bb-span-4 { grid-column: auto / span 4; }
	.bb-span-5 { grid-column: auto / span 5; } .bb-span-6 { grid-column: auto / span 6; }
	.bb-span-7 { grid-column: auto / span 7; } .bb-span-8 { grid-column: auto / span 8; }
	.bb-span-9 { grid-column: auto / span 9; } .bb-span-10 { grid-column: auto / span 10; }
	.bb-span-11 { grid-column: auto / span 11; } .bb-span-12 { grid-column: auto / span 12; }
	.bb-start-1 { grid-column-start: 1; } .bb-start-2 { grid-column-start: 2; }
	.bb-start-3 { grid-column-start: 3; } .bb-start-4 { grid-column-start: 4; }
	.bb-start-5 { grid-column-start: 5; } .bb-start-6 { grid-column-start: 6; }
	.bb-start-7 { grid-column-start: 7; } .bb-start-8 { grid-column-start: 8; }
	.bb-start-9 { grid-column-start: 9; } .bb-start-10 { grid-column-start: 10; }
	.bb-start-11 { grid-column-start: 11; } .bb-start-12 { grid-column-start: 12; }
	.bb-order-first { order: -1; }
	.bb-order-last { order: 1; }
}
@media ( min-width: 782px ) and ( max-width: 1024px ) {
	.bb-grid { column-gap: var( --bb-grid-gap-tablet ); row-gap: var( --bb-grid-row-gap-tablet, var( --bb-grid-gap-tablet ) ); }
	.bb-md-span-3 { grid-column: span 3; } .bb-md-span-4 { grid-column: span 4; }
	.bb-md-span-5 { grid-column: span 5; } .bb-md-span-6 { grid-column: span 6; }
	.bb-md-span-7 { grid-column: span 7; } .bb-md-span-8 { grid-column: span 8; }
	.bb-md-span-12 { grid-column: 1 / -1; }
	.bb-md-order-first { order: -1; }
}
@media ( max-width: 781px ) {
	.bb-grid { column-gap: var( --bb-grid-gap-phone ); row-gap: var( --bb-grid-row-gap-phone, 24px ); }
	.bb-sm-span-6 { grid-column: span 6; }
	.bb-sm-order-first { order: -1; }
}


/* ---------------------------------------------------------------- base ---- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.bb-main {
	overflow-x: clip;
}

/* Sections butt up against each other; each one owns its own vertical padding. */
.wp-site-blocks > *,
.bb-main .entry-content > * {
	margin-block: 0;
}

/* The header is fixed, so pages that do not open with a hero need the space back —
   both the section pages (.entry-content) and the Simple page template (.bb-page). */
body.bb-header--solid .bb-main:not( .bb-page ) > .entry-content > *:first-child {
	padding-top: var( --bb-header-h );
}

/* The Simple page never opens with a hero, so it always clears the fixed header. */
.bb-main.bb-page {
	padding-top: calc( var( --bb-header-h ) + var( --bb-space-md ) );
}

img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	position: absolute !important;
	clip-path: inset( 50% );
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.bb-main .skip-link:focus,
.wp-site-blocks > .skip-link:focus,
/* Core adds its own block-template skip link ahead of ours; give both the same chip so
   the first Tab on a page is never an unstyled browser default. */
.bb-skip-link:focus,
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 200;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 12px 20px;
	border-radius: var( --bb-radius-pill );
	background: var( --bb-cream );
	color: var( --bb-burgundy );
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-small );
	font-weight: 600;
	letter-spacing: var( --bb-ls-btn );
	text-decoration: none;
	text-transform: uppercase;
}

.skip-link.screen-reader-text:focus {
	outline: var( --bb-focus-w ) solid var( --bb-focus );
	outline-offset: var( --bb-focus-offset );
}

/* Body copy inside dark sections. */
.has-bb-burgundy-background-color {
	color: var( --bb-cream );
}

.has-bb-burgundy-background-color :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --bb-gold );
}

/* ----------------------------------------------------- typography roles ---- */

/*
 * One rule per role, listing every block class that plays that role. Scoped under
 * .bb-main so the role beats theme.json's element styles, and so the header and footer
 * (their own roles) are untouched. Page CSS sets position and colour, never the face.
 */

/* Section heading (H2). Figma variants: 60/58/-2.4 (Home 11131:721, 11131:760,
   11131:809, 11131:755), 56/60/-2.24 (About 11161:412), 40/50 (11131:880),
   34 (11204:2126, 11204:1968), 32/39 (11217:3811, 11217:4471). Canonical: Home. */
.bb-main :is(
	.bb-h2,
	.bb-card-grid__heading,
	.bb-instagram__heading,
	.bb-testimonials__heading,
	.bb-split__heading,
	.bb-packages__heading,
	.bb-add-ons__heading,
	.bb-faq__title,
	.bb-contact__title,
	.bb-location--wide .bb-location__heading,
	.bb-cta-band:not( .bb-cta-band--card ) .bb-cta-band__heading
) {
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-h2 );
	font-weight: 600;
	line-height: var( --bb-lh-h2 );
	letter-spacing: var( --bb-ls-h2 );
	text-transform: uppercase;
	color: var( --bb-ink );
}

/* Card heading (H3) — Figma text style "H4": Cormorant SemiBold 24/28, -2%
   (11131:727). Variants: 25.43/27.549 (11131:819), 31 (11217:4527, 11217:4226),
   24 bold (11217:4196, 11217:4492), 22 (11217:3684). */
.bb-main :is(
	.bb-h3,
	.bb-cta-band--card .bb-cta-band__heading,
	.bb-card__title,
	.bb-faq__group-title,
	.bb-contact__form-title,
	.bb-location--card .bb-location__heading,
	.bb-packages__promo-heading
) {
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-h3 );
	font-weight: 600;
	line-height: var( --bb-lh-h3 );
	letter-spacing: var( --bb-ls-h3 );
	text-transform: uppercase;
	color: var( --bb-ink );
}

/* Compact card heading (H4) — the 200px package cards (11204:1984). */
.bb-main :is( .bb-h4, .bb-packages__title ) {
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-h4 );
	font-weight: 600;
	line-height: var( --bb-lh-h4 );
	letter-spacing: var( --bb-ls-h3 );
	text-transform: uppercase;
	color: var( --bb-ink );
}

/* Eyebrow — Cormorant Medium 25.43/27.549, -4%, uppercase, pink (11166:60,
   11131:819). Variants: 24px, and the founder row's 14px Work Sans (11168:171). */
.bb-main :is( .bb-eyebrow, .bb-split__eyebrow ) {
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-eyebrow );
	font-weight: 500;
	line-height: var( --bb-lh-eyebrow );
	letter-spacing: var( --bb-ls-eyebrow );
	text-transform: uppercase;
	color: var( --bb-accent );
}

/* Pink on pink has no contrast, so on the alternate band the eyebrow and the accent
   line keep the ink colour. */
.bb-main .has-bb-pink-light-background-color :is( .bb-eyebrow, .bb-split__eyebrow, .bb-split__accent ),
.bb-main .bb-split--founder :is( .bb-split__eyebrow, .bb-split__accent ) {
	color: var( --bb-ink );
}

/* Lead / section intro — Work Sans 18/26 (11131:811, 11131:686). Variants: 14/16
   (11217:3810, 11217:4470, 11204:2127, 11204:1969). */
.bb-main :is(
	.bb-lead,
	.bb-card-grid__intro,
	.bb-packages__intro,
	.bb-add-ons__intro,
	.bb-faq__intro,
	.bb-contact__intro,
	.bb-cta-band__body,
	.bb-hero__tagline
) {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-lead );
	font-weight: 500;
	line-height: var( --bb-lh-lead );
	letter-spacing: 0;
}

/* Body — Figma text style "body": Work Sans 16/24. */
.bb-main :is( .bb-body, .bb-split__body, .bb-location__text ) {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-body );
	font-weight: 400;
	line-height: var( --bb-lh-body );
	color: var( --bb-ink );
}

/* Small — Figma text style "desc text": Work Sans 14/18. Variants: 11.5 (11217:4200),
   12 (11217:4417). */
.bb-main :is( .bb-small, .bb-card-grid--tiles .bb-card__text, .bb-faq__answer p, .bb-contact__value ) {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-small );
	font-weight: 400;
	line-height: var( --bb-lh-small );
	color: var( --bb-ink-muted );
}

/* Micro — the compact package cards and add-on lists. Variants: 10 (11204:1992),
   10.5 (11217:4253), 11 (11217:4416), 12 (11217:4417). */
.bb-main :is(
	.bb-micro,
	.bb-packages__meta,
	.bb-packages__text,
	.bb-packages__promo-text,
	.bb-packages__promo-items li,
	.bb-add-ons__items,
	.bb-add-ons__footnote,
	.bb-add-ons__download
) {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-micro );
	font-weight: 400;
	line-height: var( --bb-lh-micro );
	color: var( --bb-ink-muted );
}

/* Label — Work Sans SemiBold 14, +8%, uppercase (11217:4416, 11204:1944). */
.bb-main :is( .bb-label, .bb-contact__label, .bb-add-ons__group-title, .bb-faq__nav-link ),
.bb-main .wpcf7 label {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-small );
	font-weight: 600;
	line-height: var( --bb-lh-small );
	letter-spacing: var( --bb-ls-label );
	text-transform: uppercase;
	color: var( --bb-ink );
}

/* Menu / strip — Figma text style "Menu text": Work Sans 16, +3. */
.bb-menu-text,
.bb-hero__eyebrow,
.bb-hero__strip,
.bb-header__menu a {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-body );
	font-weight: 400;
	letter-spacing: var( --bb-ls-menu );
	text-transform: uppercase;
}

/*
 * The two places that carry the "Menu text" face but not its +3 tracking. Every header
 * menu instance in the file (11131:692, 11161:420, 11217:3845) is 744px wide across six
 * items at 16px, which only measures out at +0.48; the hero strip (11217:3862) is
 * Medium with no tracking at all. The +3 style is kept above for .bb-menu-text.
 */
.bb-header__menu a {
	letter-spacing: var( --bb-ls-btn );
}

.bb-hero__strip {
	font-weight: 500;
	letter-spacing: 0;
	line-height: 22px;
}

/* Quote — Cormorant Light 40/49, -4% (11131:881). */
.bb-main :is( .bb-quote, .bb-review__quote p ) {
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-quote );
	font-weight: 300;
	line-height: var( --bb-lh-quote );
	letter-spacing: var( --bb-ls-h2 );
	text-transform: none;
	color: var( --bb-ink );
}

/* --------------------------------------------------------- component roles ---- */

/* Card: white, one 1px gold hairline, one radius. Figma variants: 0.942px #efdbb9
   (11131:815), 1px #ebd2a7 (11204:1979, 11217:4252, 11217:4473), 1px #d9bc9e
   (11217:4256, 11204:2130), square vs 30.139 vs 20 corners. */
.bb-card-grid--feature .bb-card,
.bb-packages__card,
.bb-add-ons__card,
.bb-faq__nav,
.bb-faq__list,
.bb-contact__card {
	border: var( --bb-border-w ) solid var( --bb-border-card );
	border-radius: var( --bb-radius-md );
	background: var( --bb-surface );
}

/* The large cards and standalone media use the 30px radius. */
.bb-card-grid--feature .bb-card {
	border-radius: var( --bb-radius-lg );
}

/* Focus ring: one value everywhere. */
.bb-main :focus-visible,
.bb-site-header :focus-visible,
.bb-site-footer :focus-visible {
	outline: var( --bb-focus-w ) solid var( --bb-focus );
	outline-offset: var( --bb-focus-offset );
}

.bb-site-header :focus-visible,
.has-bb-burgundy-background-color :focus-visible {
	outline-color: var( --bb-accent-gold );
}

/* ------------------------------------------------------------- buttons ---- */

.wp-block-button__link,
.bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px; /* Figma's pill is 43; 44 is the touch-target floor (design-system 6) */
	padding: 12px 24px;
	border: 0;
	border-radius: var( --bb-radius-pill );
	background: var( --bb-bg-dark );
	color: var( --bb-gold ); /* client: burgundy pill, gold label (Figma 11131:707) */
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-btn );
	font-weight: 600;
	line-height: 1.1875; /* 19 / 16 — Figma 11217:3853 is a 19px label in a 43px pill */
	letter-spacing: var( --bb-ls-btn );
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.wp-block-button__link:hover,
.bb-btn:hover {
	background: var( --bb-pink );
	color: var( --bb-burgundy );
}

.is-style-light .wp-block-button__link {
	background: var( --bb-white ); /* client: white pill, burgundy label */
	color: var( --bb-burgundy );
}

.is-style-light .wp-block-button__link:hover {
	background: var( --bb-gold );
}

.is-style-gold .wp-block-button__link {
	background: var( --bb-gold );
	color: var( --bb-burgundy );
	backdrop-filter: blur( 10px );
}

.is-style-gold .wp-block-button__link:hover {
	background: var( --bb-gold-light );
	color: var( --bb-burgundy );
}

/* "outline" is core's own button style, so these selectors match its specificity. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 11px 23px; /* + the 1px border = the same 43px pill box */
	border: var( --bb-border-w ) solid currentcolor;
	background: transparent;
	color: var( --bb-burgundy );
	font-weight: 400;
	opacity: 0.7;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var( --bb-burgundy );
	border-color: var( --bb-burgundy );
	color: var( --bb-cream );
	opacity: 1;
}

.has-bb-burgundy-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var( --bb-gold );
}

.has-bb-burgundy-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var( --bb-gold );
	border-color: var( --bb-gold );
	color: var( --bb-burgundy );
}

/* Figma 11131:703 / 11217:3856: 27px between pills. The extra class beats core's
   own `.wp-block-buttons.is-layout-flex` gap from theme.json's blockGap. */
.wp-block-buttons,
.bb-main .wp-block-buttons.is-layout-flex,
.bb-hero .wp-block-buttons.is-layout-flex {
	gap: 27px;
}

/*
 * The compact control button: the one small rectangular button in the design (package
 * cards 11204:2002, the contact form's submit 11217:4594, the location card's buttons
 * 11217:4529). Figma variants: 132x32 r5, 165x42 r4 #5f122a, 150x40 r4 — one size here.
 */
.bb-btn--control,
.bb-main .wpcf7 input[type="submit"],
.bb-location--card .bb-location__buttons .wp-block-button__link,
.bb-cta-band--card .bb-cta-band__buttons .wp-block-button__link,
.bb-packages__button {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 6px 16px;
	border: var( --bb-border-w ) solid var( --bb-border-ink );
	border-radius: var( --bb-radius-sm );
	background: var( --bb-bg-dark );
	color: var( --bb-ink-on-dark );
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-btn-sm );
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var( --bb-ls-btn );
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bb-btn--control:hover,
.bb-main .wpcf7 input[type="submit"]:hover,
.bb-location--card .bb-location__buttons .wp-block-button__link:hover,
.bb-cta-band--card .bb-cta-band__buttons .wp-block-button__link:hover,
.bb-packages__button:hover {
	background: var( --bb-bg-alt );
	color: var( --bb-ink );
}

/* Figma 11217:4230 / 11217:4530: the control is 150px wide inside a card. */
.bb-main :is( .bb-cta-band--card .bb-cta-band__buttons, .bb-location--card .bb-location__buttons ) .wp-block-button__link {
	min-width: 150px;
}

/* The same control in gold ("Get directions"). */
.bb-location--card .bb-location__buttons .is-style-gold .wp-block-button__link {
	background: var( --bb-gold );
	color: var( --bb-ink );
}

/* --------------------------------------------------------------- cards ---- */

.is-style-bb-card {
	padding: var( --bb-card-pad-lg );
	border: var( --bb-border-w ) solid var( --bb-border-soft );
	border-radius: var( --bb-radius-md );
	background: var( --bb-bg-alt );
}

.is-style-bb-framed img {
	border-radius: var( --bb-radius-lg );
}

/* -------------------------------------------------------------- header ---- */

.bb-site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
}

.bb-header {
	padding: 34px var( --bb-bar-gutter ); /* Figma 11217:3843: the logo sits 34.07px down */
	background: transparent;
	transition: background-color 0.25s ease, padding 0.25s ease;
}

/* `.bb-header--solid` is also the body class, so this must not match the body. */
.bb-header.bb-header--solid,
.bb-header.is-scrolled {
	padding-block: 14px;
	background: var( --bb-bg-dark );
	box-shadow: var( --bb-shadow-header );
}

.bb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 auto;
	max-width: 1358px;
}

.bb-header__logo {
	flex: none;
	line-height: 0;
}

.bb-header__logo img {
	width: clamp( 160px, 17.4vw, 250px );
	height: auto;
}

.bb-header__panel {
	display: contents;
}

.bb-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The menu label's box is 19px tall inside a 119px bar. The padding makes each item a
   45px target and the negative margin keeps the row — and the bar — on their Figma
   heights (11131:692 sits at y50 in a 50.95px header row). */
.bb-header__menu a {
	display: inline-block;
	margin-block: -13px;
	padding-block: 13px;
	color: var( --bb-ink-on-dark );
	text-decoration: none;
	white-space: nowrap;
}

.bb-header__menu a:hover,
.bb-header__item.is-current a {
	color: var( --bb-accent-gold );
}

.bb-header__cta {
	flex: none;
	backdrop-filter: blur( 10px );
}

/*
 * On the photo the pill is burgundy with a gold label (11131:699). Once the bar itself
 * is burgundy — the solid header and the scrolled state — that pill disappears into it,
 * so it takes the outline-on-burgundy treatment the design system defines (and the one
 * the mobile panel already uses).
 */
.bb-header--solid .bb-header__cta,
.is-scrolled .bb-header__cta {
	padding: 11px 23px; /* + the 1px border = the same pill box */
	border: var( --bb-border-w ) solid var( --bb-accent-gold );
	background: transparent;
	color: var( --bb-accent-gold );
}

.bb-header--solid .bb-header__cta:hover,
.is-scrolled .bb-header__cta:hover {
	background: var( --bb-accent-gold );
	color: var( --bb-bg-dark );
}

.bb-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --bb-cream );
	cursor: pointer;
}

.bb-header__toggle-bars,
.bb-header__toggle-bars::before,
.bb-header__toggle-bars::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	background: currentcolor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.bb-header__toggle-bars {
	top: 21px;
}

.bb-header__toggle-bars::before,
.bb-header__toggle-bars::after {
	content: "";
	left: 0;
}

.bb-header__toggle-bars::before {
	top: -7px;
}

.bb-header__toggle-bars::after {
	top: 7px;
}

.bb-header__toggle[aria-expanded="true"] .bb-header__toggle-bars {
	background: transparent;
}

.bb-header__toggle[aria-expanded="true"] .bb-header__toggle-bars::before {
	transform: translateY( 7px ) rotate( 45deg );
}

.bb-header__toggle[aria-expanded="true"] .bb-header__toggle-bars::after {
	transform: translateY( -7px ) rotate( -45deg );
}

/* ---------------------------------------------------------------- hero ---- */

/*
 * Figma 11131:687 / 11161:415 / 11217:3840 / 11217:4532 all place the hero on the same
 * 822px grid: the strip's text sits at y 747-769, the button row's bottom edge at 603,
 * the title's box at 279. The padding below reproduces those three numbers exactly.
 */
.bb-hero.wp-block-cover {
	align-items: stretch;
	min-height: min( 822px, 100svh );
	padding: 0 0 53px;
}

/* The cover's inner container is a constrained layout, which would centre the content
   at the 1240px content width; the design pins it to the 71px gutter instead. */
.bb-hero .wp-block-cover__inner-container {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	max-width: none;
	padding-inline: var( --bb-gutter );
}

/* Core's constrained layout centres children with !important, so unpick it here. */
.bb-hero .wp-block-cover__inner-container > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* …without losing the content column's own width (11131:701 is a 728px box). */
.bb-hero .wp-block-cover__inner-container > .bb-hero__content {
	max-width: 760px;
}

.bb-hero__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
	padding: 279px 0 144px;
	max-width: 760px;
	color: var( --bb-cream );
}

.bb-hero__eyebrow {
	margin-bottom: 6px; /* 11154:422 ends at 273, 11131:702 starts at 279 */
	color: var( --bb-accent-gold );
}

.bb-hero__title.wp-block-heading {
	margin: 0;
	color: var( --bb-white );
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-display );
	font-weight: 600;
	letter-spacing: var( --bb-ls-display );
	line-height: var( --bb-lh-display );
	text-transform: uppercase;
}

/* The tagline hugs the button row: 11217:3861 ends at 538 and 11161:676 at 316.93,
   both 22px above the pills. The pills themselves are bottom-anchored. */
/* The extra class beats core's blockGap rule on the group's children. */
.bb-hero .bb-hero__tagline {
	margin-top: auto;
	margin-bottom: 22px;
	max-width: 470px;
}

.bb-hero .bb-hero__buttons {
	margin-top: auto;
}

.bb-hero .bb-hero__tagline + .bb-hero__buttons {
	margin-top: 0;
}

.bb-hero .bb-hero__strip {
	margin-top: 0; /* core's blockGap would push the strip off its 747px line */
}

.bb-hero__strip {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var( --bb-white );
}

/* The separator sits in the middle of a 27px gap (dots at 193.5 / 337.5 / 514.5). */
.bb-hero__strip li + li::before {
	content: "·";
	margin-inline: 11px;
	font-size: 32px;
	line-height: 0;
	vertical-align: -0.2em;
}

/*
 * The strip's text box is 22px tall (11131:710), well under the 44px touch target, so
 * the links take the padding and give it straight back as negative margin: the hit area
 * is 44px while the strip still sits on the design's 747px line.
 */
.bb-hero__strip a {
	display: inline-block;
	margin-block: -11px;
	padding-block: 11px;
	color: inherit;
	text-decoration: none;
}

.bb-hero__strip a:hover {
	color: var( --bb-accent-gold );
}

/* ------------------------------------------------------------ cta band ---- */

.bb-cta-band {
	position: relative;
	overflow: hidden;
	padding: var( --bb-space-band );
}

/* The section is a constrained layout, which would centre each child; the band is
   left-aligned (the card style re-centres below). */
.bb-cta-band > * {
	position: relative;
	z-index: 1;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * The script wordmark behind the band (11131:750 burgundy, 11168:164 cream, both built
 * the same way): the artwork is 1315.7 x 267.7 with its left edge at x282 and its top
 * 318.7px below the section's top edge, and the section clips whatever runs past its
 * bottom. 11131:751 carries the fade as a 10% fill, not as part of the asset.
 */
.bb-cta-band__watermark {
	position: absolute;
	top: 318.7px;
	left: 19.583%;  /* 282 / 1440 */
	z-index: 0;
	width: 91.368%; /* 1315.7 / 1440 */
	opacity: 0.1;
	pointer-events: none;
}

.bb-cta-band__watermark img {
	display: block;
	width: 100%;
	height: auto;
}

/* Figma 11131:744: the band heading is one line, so it is not capped. */
.bb-cta-band__heading.wp-block-heading {
	margin: 0;
	max-width: none;
}

.bb-cta-band--burgundy .bb-cta-band__heading.wp-block-heading {
	color: var( --bb-accent-gold );
}

.bb-cta-band__body {
	margin-top: 32px;
	max-width: 956px;
	opacity: 0.6;
}

.bb-cta-band--burgundy .bb-cta-band__body {
	color: var( --bb-accent );
}

.bb-cta-band__buttons {
	margin-top: 60px;
}

.bb-cta-band--card {
	padding-inline: var( --bb-bar-gutter );
}

.bb-cta-band--card > * {
	max-width: var( --bb-container );
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Figma 11217:4263 / 11217:4524: the card is 220px tall with a 32px inset, its heading
   sits over the text by 16px and the control button 30px under it — the same rhythm as
   the location card next to it. */
.bb-cta-band--card .bb-cta-band__card {
	position: relative;
	overflow: hidden;
	padding: var( --bb-card-pad );
	text-align: left;
}

.bb-cta-band--card .bb-cta-band__body {
	margin-top: 16px;
	max-width: 70ch;
}

.bb-cta-band--card .bb-cta-band__buttons {
	margin-top: 30px;
}

/* -------------------------------------------------------------- footer ---- */

.bb-footer {
	padding: var( --bb-space-band ) var( --bb-bar-gutter ) 0;
	background: var( --bb-bg-dark );
	color: var( --bb-ink-on-dark );
}

.bb-footer__inner {
	margin: 0 auto;
	max-width: 1360px;
}

.bb-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 40px;
}

.bb-footer__logo {
	flex: none;
	line-height: 0;
}

.bb-footer__logo img {
	width: clamp( 260px, 34.8vw, 501px );
	height: auto;
}

.bb-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 60px;
}

.bb-footer__label {
	margin: 0 0 16px;
	color: var( --bb-accent-gold );
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-body );
	font-weight: 500;
	line-height: 1.6;
	text-transform: uppercase;
}

.bb-footer__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-body );
	font-weight: 500;
	line-height: 1.6;
	text-transform: uppercase;
}

/* The 25.6px line box plus the column's 8px gap, taken as padding and given back as
   margin: a 33.6px target that never overlaps the link above it. */
.bb-footer__list a {
	display: inline-block;
	margin-block: -4px;
	padding-block: 4px;
	color: inherit;
	text-decoration: none;
}

.bb-footer__list a:hover {
	color: var( --bb-accent-gold );
}

.bb-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 25px;
	padding: 40px 0;
	border-top: var( --bb-border-w ) solid var( --bb-border-soft );
	color: var( --bb-accent-gold );
	font-size: var( --bb-fs-small );
	line-height: 1.5; /* Figma 11217:3903 */
	text-transform: uppercase;
}

.bb-footer__copyright {
	margin: 0;
}

.bb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-footer__legal a {
	display: inline-block;
	margin-block: -4px;
	padding-block: 4px;
	color: inherit;
	text-decoration: none;
}

.bb-footer__legal a:hover {
	color: var( --bb-ink-on-dark );
}

/* ------------------------------------------------------------ carousel ---- */

.bb-carousel {
	position: relative;
}

.bb-carousel__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.bb-carousel__track::-webkit-scrollbar {
	display: none;
}

.bb-carousel__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.bb-carousel__nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

.bb-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --bb-arrow-btn );
	height: var( --bb-arrow-btn );
	border: var( --bb-border-w ) solid var( --bb-border-ink );
	border-radius: 50%;
	background: transparent;
	color: var( --bb-burgundy );
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bb-carousel__button:hover:not( [disabled] ) {
	background: var( --bb-bg-dark );
	color: var( --bb-ink-on-dark );
}

/* Figma 11131:770 / 11131:877: a 24px glyph with a 1.5px stroke. */
.bb-carousel__button svg {
	width: var( --bb-icon );
	height: var( --bb-icon );
}

.bb-carousel__button[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ---------------------------------------------------------------- form ---- */

.wpcf7 label {
	display: block;
	margin-bottom: 8px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 14px 16px;
	border: var( --bb-border-w ) solid var( --bb-field-border );
	border-radius: var( --bb-radius-sm );
	background: var( --bb-field-bg );
	color: var( --bb-ink );
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-small );
	line-height: var( --bb-lh-body );
}

.wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7 select {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, var( --bb-burgundy ) 50% ), linear-gradient( 135deg, var( --bb-burgundy ) 50%, transparent 50% );
	background-position: calc( 100% - 22px ) 50%, calc( 100% - 16px ) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}

.wpcf7 :is( input, select, textarea ):focus-visible {
	border-color: var( --bb-focus );
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var( --bb-ink-muted );
	opacity: 1;
}

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	width: auto;
	cursor: pointer;
}

/*
 * Form states. Contact Form 7 ships its own yellow / green / red banners; these put them
 * back on the palette. The extra classes beat CF7's own `.wpcf7 form .wpcf7-…` rules.
 */
.wpcf7 .wpcf7-response-output,
.bb-main .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 16px;
	border: var( --bb-border-w ) solid var( --bb-border-card );
	border-radius: var( --bb-radius-sm );
	background: var( --bb-bg-alt );
	color: var( --bb-ink );
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-small );
	line-height: var( --bb-lh-body );
}

.bb-main .wpcf7 form:is( .invalid, .unaccepted, .spam, .failed, .aborted ) .wpcf7-response-output {
	border-color: var( --bb-border-ink );
}

.bb-main .wpcf7 form.sent .wpcf7-response-output {
	border-color: var( --bb-border-card );
}

/* The field that failed carries the same 1px ink border as the message above it. */
.bb-main .wpcf7 :is( input, select, textarea ).wpcf7-not-valid {
	border-color: var( --bb-border-ink );
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var( --bb-burgundy );
	font-size: var( --bb-fs-small );
	line-height: var( --bb-lh-small );
	text-transform: none;
}

/* --------------------------------------------------- simple page (block) ---- */

/*
 * The "Simple page" template (Terms and Conditions) keeps the block editor, so its
 * content is plain core blocks. They are set in the same type system as the sections.
 */

.bb-page .wp-block-post-title,
.bb-page .entry-content :is( h1, h2, h3, h4, h5, h6 ) {
	font-family: var( --bb-font-display );
	font-weight: 600;
	letter-spacing: var( --bb-ls-h2 );
	text-transform: uppercase;
	color: var( --bb-ink );
}

.bb-page .wp-block-post-title {
	margin: 0 0 var( --bb-space-intro );
	font-size: var( --bb-fs-h2 );
	line-height: var( --bb-lh-h2 );
}

.bb-page .entry-content h2 {
	margin: var( --bb-space-md ) 0 var( --bb-space-head );
	font-size: var( --bb-fs-h3 );
	line-height: var( --bb-lh-h3 );
	letter-spacing: var( --bb-ls-h3 );
}

.bb-page .entry-content :is( h3, h4 ) {
	margin: var( --bb-card-pad ) 0 var( --bb-space-head );
	font-size: var( --bb-fs-h4 );
	line-height: var( --bb-lh-h4 );
	letter-spacing: var( --bb-ls-h3 );
}

/* The Simple page is long-form reading, and the 1240px content column is far too wide a
   measure for it, so its blocks keep a reading width (core centres them, so unpick it). */
.bb-page .entry-content > * {
	max-width: 80ch;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.bb-page .entry-content :is( p, li ) {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-body );
	line-height: var( --bb-lh-body );
	color: var( --bb-ink );
}

.bb-page .entry-content p {
	margin-block: 0 var( --bb-space-head );
}

.bb-page .entry-content :is( ul, ol ) {
	margin-block: 0 var( --bb-space-head );
	padding-left: 1.2em;
}

.bb-page .entry-content li + li {
	margin-top: 8px;
}

.bb-page .entry-content li::marker {
	color: var( --bb-accent );
}

.bb-page .entry-content a {
	color: var( --bb-ink );
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------- responsive ---- */

/*
 * The full menu at the Figma size (16px, +3 tracking) only fits the 1440 frame, so it
 * steps down at 1280-1439 and becomes the panel below that.
 */
/*
 * At its Figma size the menu row is 744px wide, which with the 250px wordmark and the
 * 169px pill needs 1211px of bar; 1280 is the last width where that fits, and only with
 * a tighter item gap. Below 1280 it becomes the panel.
 */
@media ( min-width: 1280px ) and ( max-width: 1439px ) {
	.bb-header__menu {
		gap: 24px;
	}

	.bb-header__inner {
		gap: 20px;
	}
}

@media ( max-width: 1279px ) {
	.bb-header__toggle {
		display: block;
	}

	.bb-header__panel {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: -1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		padding: var( --bb-header-h ) 24px 48px;
		background: var( --bb-bg-dark );
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	.bb-header__panel.is-open {
		opacity: 1;
		visibility: visible;
	}

	.bb-header__menu {
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}

	.bb-header__menu a {
		display: block;
		padding: 11px 16px; /* 44px+ tap target inside the panel */
		font-size: 1.25rem;
		letter-spacing: 0.1em;
	}

	/* The pill is burgundy on burgundy inside the overlay, so outline it. */
	.bb-header__panel .bb-header__cta {
		border: var( --bb-border-w ) solid var( --bb-accent-gold );
		background: transparent;
		color: var( --bb-accent-gold );
	}

	.bb-header__panel .bb-header__cta:hover {
		background: var( --bb-accent-gold );
		color: var( --bb-bg-dark );
	}
}

@media ( max-width: 781px ) {
	:root {
		--bb-header-h: 84px;
	}

	.bb-hero.wp-block-cover {
		min-height: 0;
		padding: 0 0 40px;
	}

	.bb-hero__content {
		padding: calc( var( --bb-header-h ) + 40px ) 0 56px;
		max-width: none;
	}

	.bb-hero .bb-hero__tagline {
		margin-top: 24px;
	}

	.bb-hero__strip {
		padding-top: 32px;
		/* 12px rows: the wrapped strip's 30px targets abut instead of overlapping. */
		gap: 12px 16px;
		font-size: var( --bb-fs-micro );
	}

	.bb-hero__strip a {
		margin-block: -6px;
		padding-block: 6px;
	}

	.bb-hero__strip li + li::before {
		margin-right: 16px;
	}

	.bb-footer {
		padding-top: 64px;
	}

	.bb-footer__top {
		align-items: flex-start;
		gap: 32px;
	}

	.bb-footer__cols {
		gap: 32px 40px;
	}

	.bb-footer__bar {
		padding: 24px 0;
	}

	.wp-block-buttons,
	.bb-main .wp-block-buttons.is-layout-flex,
	.bb-hero .wp-block-buttons.is-layout-flex {
		gap: 16px;
	}
}