/*
 * BeddyByes — theme stylesheet
 *
 * Design tokens (colour, type, spacing, radii, shadows) live in theme.json and are
 * consumed here as --wp--preset--* / --wp--custom--* custom properties.
 *
 * Contents
 *   1.  Base & document            9.  About page
 *   2.  Typography helpers        10.  Watch page
 *   3.  Buttons                   11.  Activities page
 *   4.  Header & navigation       12.  Pages, posts & footer
 *   5.  Section shells            13.  Parallax
 *   6.  Cards (shared)            14.  Interaction states
 *   7.  Home sections             15.  Editor
 *   8.  Character bands (Meet)    16.  Responsive & motion preferences
 *
 *
 * Responsive overrides are deliberately grouped at the end, largest breakpoint
 * first, so a narrow-screen rule always wins over the equivalent base rule.
 */

/* ==========================================================================
   1. Base & document
   ========================================================================== */

:root {
	--bb-nav-height: 100px;
}

/* No stray gaps between header / main / footer or between full-width sections */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + * {
	margin-block-start: 0 !important;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* Full-width sections butt up against each other — no global block gap between them */
.bb-main > .wp-block-post-content > .alignfull,
.bb-main > .wp-block-post-content > .wp-block-group.alignfull + .wp-block-group.alignfull,
.bb-main > .wp-block-post-content > * + .alignfull {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.bb-main > .wp-block-post-content {
	margin-block: 0 !important;
}

.bb-main > .wp-block-post-content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ==========================================================================
   2. Typography helpers
   ========================================================================== */

/* Section caption — "ABOUT", "MEET", "WATCH" … */
.is-style-caption,
.bb-caption {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--caption);
	line-height: 1;
	text-transform: uppercase;
}

.is-style-caption.wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

/* Headings keep a tiny bit of paragraph spacing like the design */
h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
.wp-block-post-title {
	text-wrap: balance;
}

.bb-card__body > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--10);
}

.bb-card .wp-block-heading a,
.bb-post-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.bb-page-hero .wp-block-post-title,
.bb-page-hero .wp-block-query-title {
	color: var(--wp--preset--color--white);
}

.bb-page-hero .wp-block-post-title {
	max-width: 18ch;
	margin-inline: auto;
}

/* 5-up routine cards: slightly smaller titles so "YummyTime" never breaks */
.bb-cards--5 .bb-card__body > .wp-block-heading {
	font-size: min(2rem, calc(0.35rem + 1.85vw));
	line-height: 1.25; /* DynaPuff's descenders were being clipped at 1.1 */
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Copy block per the keyframe: Heading/1 54px, caption 20px 8px below, Body/L 18px 24px below */
.bb-band__copy > .wp-block-heading {
	font-size: var(--wp--preset--font-size--gigantic);
}

/* The card must be the containing block for the stretched link: core's group
   styles make the inner body position:relative, which would trap the hit area. */
.bb-card .bb-card__body,
.bb-card .bb-card__actions,
.bb-card .wp-block-button,
.bb-card .bb-card__title {
	position: static;
}

/* Stretch the card's single link across the card. The arrow-link style already
   uses ::after for its arrow, so the hit area lives on ::before. */
.bb-card .bb-card__actions .wp-block-button__link::before,
.bb-video-card .bb-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* A transform or filter on the link makes the LINK the containing block of its
   stretched hit area. The generic pressed state (.wp-block-button__link:active)
   sets both, so at mouse-down the hit area collapsed back to the "Learn more"
   text, the pointer was no longer over the link, and the click never fired.
   Card links therefore never take a transform or filter in any state; the
   pressed feedback goes on the card instead. */
.bb-card .bb-card__actions .wp-block-button__link,
.bb-card .bb-card__actions .wp-block-button__link:hover,
.bb-card .bb-card__actions .wp-block-button__link:focus,
.bb-card .bb-card__actions .wp-block-button__link:active,
.bb-video-card .bb-card__title a,
.bb-video-card .bb-card__title a:active {
	transform: none;
	filter: none;
	will-change: auto;
}

.bb-card:has(a:active) {
	filter: brightness(.97);
}

.bb-video-card .bb-card__title a,
.bb-video-card .bb-card__title a:hover,
.bb-video-card .bb-card__title a:focus {
	color: inherit;
	text-decoration: none;
}

/* --- Focus: a brand ring that survives the photographic backgrounds ------ */
.wp-block-button__link:focus-visible,
.bb-nav .wp-block-navigation-item__content:focus-visible,
.bb-footer-nav .wp-block-navigation-item__content:focus-visible,
.bb-social .wp-block-social-link a:focus-visible,
.bb-logos__item a:focus-visible,
.bb-partner-logos__item a:focus-visible,
.bb-logo a:focus-visible,
.bb-card__title a:focus-visible,
.bb-routine-details > summary:focus-visible,
.wp-block-post-title a:focus-visible {
	outline: 3px solid var(--wp--preset--color--sunshine);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-block-button__link {
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Yellow "Sunshine" button (Meet all the Characters) — midnight text, the
   same blue as the menu and the default button. */
.wp-block-button.is-style-sunshine .wp-block-button__link {
	background-color: var(--wp--preset--color--sunshine);
	color: var(--wp--preset--color--midnight);
}

.wp-block-button.is-style-sunshine .wp-block-button__link:hover,
.wp-block-button.is-style-sunshine .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--midnight);
}

/* White button */
.wp-block-button.is-style-white .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--midnight);
}

.wp-block-button.is-style-white .wp-block-button__link:hover,
.wp-block-button.is-style-white .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--sunshine);
	color: var(--wp--preset--color--plum);
}

/* Text link with arrow (card "More Info →") */
.wp-block-button.is-style-arrow-link .wp-block-button__link {
	background: transparent;
	border-radius: 0;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: .75em;
	padding: 0;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") no-repeat center / contain;
	transition: transform .2s ease;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link:hover {
	transform: none;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link:hover::after {
	transform: translateX(.25em);
}

/* Country selector + partner logos ----------------------------------- */
.bb-select .wp-block-button {
	width: min(420px, 100%);
}

.bb-select .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--huge);
	padding-block: 6px;
	border-radius: 16px;
	position: relative;
	line-height: 1.1;
	min-height: 60px;
}

.bb-select .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 32px;
	height: 32px;
	transform: translateY(-50%);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='10'/><path d='M12 7v9M8.5 12.5 12 16l3.5-3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='10'/><path d='M12 7v9M8.5 12.5 12 16l3.5-3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

.bb-youtube-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .6em;
}

.bb-youtube-button .wp-block-button__link::after {
	content: "";
	width: 1.2em;
	height: 1.2em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12 31 31 0 0 0 1 16.8a3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.8 15.5v-7l6 3.5-6 3.5z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12 31 31 0 0 0 1 16.8a3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.8 15.5v-7l6 3.5-6 3.5z'/></svg>") no-repeat center / contain;
}

/* Download link variant of the arrow link */
.wp-block-button.is-style-arrow-link.bb-download .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--caption);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-button.is-style-arrow-link.bb-download .wp-block-button__link::after {
	width: 1.1em;
	height: 1.1em;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12M7 10l5 5 5-5M4 20h16'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12M7 10l5 5 5-5M4 20h16'/></svg>");
}

.wp-block-button.is-style-arrow-link.bb-download .wp-block-button__link:hover::after {
	transform: translateY(.15em);
}

.bb-routine-row .wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	color: inherit;
	background: transparent;
	padding: 16px 24px;
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
}

.bb-routine-row .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .18);
}

.bb-select .wp-block-button,
.bb-select .wp-block-button.has-custom-width {
	width: min(710px, 100%) !important;
	flex-basis: min(710px, 100%) !important;
}

.bb-cards--5 .bb-card__actions .wp-block-button__link,
.bb-cards--3 .bb-card__actions .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium);
}

/* --- Pressed ------------------------------------------------------------- */
.wp-block-button__link:active {
	transform: translateY(0);
	filter: brightness(.94);
}

/* ==========================================================================
   4. Header & navigation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	min-height: var(--bb-nav-height);
	background-color: var(--wp--preset--color--white);
	background-image: url("../images/nav-tile-felt.webp");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 0 0;
	box-shadow: var(--wp--preset--shadow--header);
}

.admin-bar .bb-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.bb-header__inner {
	min-height: 40px;
}

.bb-logo img {
	display: block;
	height: auto;
	max-width: 269px;
	width: 100%;
}

/* Doubled class: core sets the link colour to "inherit" with a three-class
   selector, which outranked this rule and left the menu in ink. */
.bb-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-block;
	border-radius: var(--wp--custom--radius--nav);
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--large);
	padding: 12px 19px;
	transition: background-color .2s ease, color .2s ease;
}

.bb-nav .wp-block-navigation-item__content:hover,
.bb-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--plum);
	background-color: rgba(52, 70, 147, .08);
}

.bb-nav .current-menu-item > .wp-block-navigation-item__content,
.bb-nav .current-menu-item > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--sunshine);
	color: var(--wp--preset--color--plum);
}

/* Mobile: round yellow hamburger + midnight overlay */
/* The icon is centred by positioning rather than flex: core uses `display` both
   to lay these buttons out AND to hide the open button above its overlay
   breakpoint, so overriding display here would reveal the hamburger on desktop. */
.bb-nav .wp-block-navigation__responsive-container-open,
.bb-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--sunshine);
	color: var(--wp--preset--color--midnight);
	padding: 0;
}

.bb-nav .wp-block-navigation__responsive-container-open {
	position: relative;
}

.bb-nav .wp-block-navigation__responsive-container-open svg,
.bb-nav .wp-block-navigation__responsive-container-close svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 32px;
	height: 32px;
}

/* While the overlay is open, paint the document itself the same colour. iOS
   Safari samples the page background behind its toolbars (and shows it in the
   rubber-band area), so the bars blend with the menu instead of showing white. */
html.bb-menu-open,
html.bb-menu-open body {
	background-color: var(--wp--preset--color--midnight);
}

.bb-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* iOS sizes a fixed inset:0 box to the layout viewport, which leaves a strip
	   under Safari's toolbar. lvh is the largest the viewport gets, so the
	   overlay runs beneath the bar; the safe-area padding keeps the links
	   clear of the home indicator (needs viewport-fit=cover, set in functions.php). */
	min-height: 100vh;
	min-height: 100lvh;
	box-sizing: border-box;

	/* colour comes from the block's overlay setting; we only add the scenery */
	background-image: url("../images/clouds-bg.webp");
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: cover;
	background-blend-mode: multiply;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	padding-bottom: calc(var(--wp--preset--spacing--40) + env(safe-area-inset-bottom, 0px));
}

.bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	justify-content: center;
	width: 100%;
}

.bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	gap: var(--wp--preset--spacing--20);
}

.bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--white);
	padding: 14px 28px;
}

/* ==========================================================================
   5. Section shells
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.bb-section__intro > * {
	margin-left: auto;
	margin-right: auto;
}

/* Paper-textured section (tile carries the orange rope along its bottom edge) */
/* The tile carries the paper grain and the orange stitch along its bottom edge.
   Sized in pixels, not as a percentage of the section: at "auto 100%" a tall
   section blew the grain and the stitch up to twice their size. The background
   colour is the tile's own paper so the top edge of the tile never shows as a
   seam on sections taller than the tile. */
.wp-block-group.is-style-paper {
	background-color: #efeae3;
	background-image: url("../images/paper-tile.webp");
	background-repeat: repeat-x;
	background-position: 50% 100%;
	background-size: 208px auto;
	border-top: 1px solid var(--wp--preset--color--cool-gray-20);
}

/* Stitched white dashed bottom edge (like the nav bar) */
.wp-block-group.is-style-stitched {
	position: relative;
}

.wp-block-group.is-style-stitched::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	border-bottom: 3px dashed rgba(255, 255, 255, .85);
}

/* Image breaker ------------------------------------------------------ */
.bb-breaker {
	min-height: 571px;
}

/* Background video --------------------------------------------------- */
/* The layer sits at z-index -1 inside the section's own stacking context, so it
   covers the section's background image but stays behind anything written on top.
   The background image is the poster: it is what shows before the video loads,
   when motion is reduced, and if the file cannot be played. */
.bb-has-video-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bb-video-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	overflow: hidden;
	pointer-events: none;
}

/* Sized to cover the section, however tall it is. An uploaded file fits the box;
   a YouTube frame keeps 16:9 and overflows the short side, which the layer crops. */
.bb-video-bg iframe,
.bb-video-bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.bb-video-bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No zoom: every scale-up stretches YouTube's 1080p stream and softens it.
   Raise this only for footage with something burned into a corner (a
   broadcaster watermark) that needs pushing off the page. */
.bb-video-bg iframe {
	--bb-video-zoom: 1;

	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%) scale(var(--bb-video-zoom));
	opacity: 0;
	transition: opacity .7s ease;
}

/* The frame is only shown once the player has put its own furniture away —
   see assets/js/video-bg.js. Until then the background image stands in. */
.bb-video-bg.is-ready iframe {
	opacity: 1;
}

/* A character cut-out in a hero is the still-frame stand-in: it shows over the
   poster (and stays under reduced motion, or if the clip never plays) and hands
   over to the video once that is running — the clip carries the characters
   itself. Same rule on phones. The space is kept so nothing jumps. */
.bb-hero .bb-hero__cutout {
	transition: opacity .7s ease;
}

.bb-video-bg.is-ready ~ .wp-block-columns .bb-hero__cutout {
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility 0s linear .7s;
}

/* ==========================================================================
   6. Cards (shared)
   ========================================================================== */

/* Meet cards sit in a 1110px row in the design (3 × 354 + 2 × 24) */
.bb-cards--3 {
	max-width: 1110px;
}

/* Cards -------------------------------------------------------------- */
.wp-block-group.is-style-card,
.bb-card {
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-group.is-style-card > *,
.bb-card > * {
	margin-block: 0;
}

.bb-card__media {
	margin: 0;
}

.bb-card__media figure {
	background-color: #344693;
}

.bb-card__media img,
.bb-card__media .wp-block-post-featured-image__wrapper img,
.wp-block-post-featured-image.bb-card__media img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	display: block;
}

.bb-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.bb-card__body > .bb-card__actions,
.bb-card__body > .wp-block-post-date {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.bb-cards .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Card grids (grid layout groups) ------------------------------------ */
.bb-card-grid > .wp-block-group,
.bb-video-grid > .wp-block-group {
	height: 100%;
}

/* A grid holding exactly two cards: keep the cards the size they are three-up
   and centre the pair, rather than leaving an empty third slot on the right.
   Counted from the markup, so adding (or un-hiding) a third card returns the
   grid to three across with nothing else to change. Only where three would fit;
   narrower than that the grid is already two-up or stacked. */
@media (min-width: 1264px) {
	.bb-card-grid:has(> :nth-child(2):last-child) {
		--bb-grid-gap: var(--wp--style--block-gap, 24px);

		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		max-width: calc((100% - 2 * var(--bb-grid-gap)) / 3 * 2 + var(--bb-grid-gap));
		margin-inline: auto !important;
	}
}

/* Placeholder media block (until real artwork is uploaded) */
.bb-placeholder {
	aspect-ratio: 16 / 10;
	position: relative;
	width: 100%;
	flex: 0 0 auto;
	min-height: 150px;
}

.bb-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border: 3px solid rgba(255, 255, 255, .9);
	background:
		linear-gradient(to top right, transparent calc(50% - 1.5px), rgba(255,255,255,.9) calc(50% - 1.5px), rgba(255,255,255,.9) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
		linear-gradient(to top left, transparent calc(50% - 1.5px), rgba(255,255,255,.9) calc(50% - 1.5px), rgba(255,255,255,.9) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

.bb-activity-card .bb-card__body p {
	font-size: var(--wp--preset--font-size--x-small);
}

/* Video cards: 416×220 thumbs, 24/16/16 body padding, 16px rhythm */
.bb-video-card .bb-card__media img {
	aspect-ratio: 416 / 220;
}

.bb-video-card .bb-card__body {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) !important;
}

/* Keyframe card: text block padding 24/16/16/16, 16px gap, Heading/3 32px at
   110%, Body/M 16px at 140%. Every card in the grid is the same height (the
   keyframe fixes it at 377px) so the space under the copy matches across all
   six, whether or not a title wraps. */
.bb-video-card .bb-card__body > * + * {
	margin-block-start: 16px !important;
}

.bb-video-card .bb-card__title {
	font-size: 32px !important; /* core's .has-*-font-size presets are !important */
	line-height: 1.1;
	margin-bottom: 0 !important; /* the body is a flex column, so this would add to the 16px gap */
}

.bb-video-card .bb-card__body p {
	font-size: 16px !important;
	line-height: 1.4;
}

.bb-video-grid,
.bb-card-grid:has(> .bb-video-card) {
	grid-auto-rows: 1fr;
}

/* Title and copy run from the left edge, as in the keyframes (the constrained
   layout would otherwise shrink the heading to its text and centre it). */
/* The card is a flex column that centres its children, so a body with short
   text shrank to fit and sat centred ("Messy Fun") while a long title filled
   the card. The body always spans the card. */
.bb-video-card .bb-card__body {
	width: 100%;
	max-width: none;
	align-self: stretch;
	margin-inline: 0 !important;
}

.bb-video-card .bb-card__body > * {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
	text-align: left;
}

/* Card copy is a flex column, so a heading or line that is narrower than the
   card shrank to its text and floated to the centre while wrapping lines sat
   left. Copy always fills the card and reads left; the download link keeps
   its centred slot. */
.bb-activity-card .bb-card__body > :not(.bb-card__actions) {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
	text-align: left;
}

/* Activity / product placeholders are taller in the keyframes — and a real
   picture dropped into the same slot keeps those proportions. */
.bb-activity-card .bb-placeholder,
.bb-activity-card .bb-card__media img {
	aspect-ratio: 410 / 220;
}

.bb-product-card .bb-placeholder,
.bb-product-card .bb-card__media img {
	aspect-ratio: 243 / 218;
}

.bb-product-card .bb-card__body {
	padding: var(--wp--preset--spacing--20) !important;
}

/* Routine cards: 243×222 stills, 16px body, Heading/3 32px titles, 18px link */
.bb-cards--5 .bb-card__media img {
	aspect-ratio: 243 / 222;
}

/* --- Cards: one link, whole card clickable ------------------------------ */
.bb-card,
.wp-block-group.is-style-card {
	position: relative;
	transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.bb-card .bb-card__media img {
	transition: transform .35s ease-out;
}

/* keyboard users get the same emphasis as pointer users */
.bb-card:focus-within,
.wp-block-group.is-style-card:focus-within {
	box-shadow: var(--wp--preset--shadow--lift);
}

.bb-card:active,
.wp-block-group.is-style-card:active {
	transition-duration: .08s;
}

/* ==========================================================================
   7. Home sections
   ========================================================================== */

/* Hero --------------------------------------------------------------- */
.bb-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* flex + auto side margins would shrink-wrap the columns: pin them to the content width */
.bb-hero > .wp-block-columns {
	width: 100%;
	margin-block: 0;
}

.bb-hero__content > * {
	max-width: 600px;
}

/* About features ----------------------------------------------------- */
.bb-feature__icon {
	font-size: 44px;
	line-height: 1;
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Icons are the studio's 3D renders (routine clock, cloud, book, flower) */
.bb-feature__icon.wp-block-image {
	display: flex;
	justify-content: center; /* the copy beneath is centred */
}

.bb-feature__icon img {
	width: 160px;
	height: 160px;
	object-fit: contain;
}

/* Watch logos -------------------------------------------------------- */
.bb-logos__item {
	margin: 0;
}

/* Follow / social ---------------------------------------------------- */
.bb-social.wp-block-social-links.has-huge-icon-size {
	font-size: 64px;
}

.bb-social .wp-block-social-link a {
	transition: transform .2s ease, opacity .2s ease;
}

.bb-social .wp-block-social-link a:hover {
	transform: translateY(-3px);
	opacity: .85;
}

/* --------------------------------------------------------------------------
   Editor niceties
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .bb-hero__art {
	min-height: 40px;
}

/* Hero with character cut-out ---------------------------------------- */
.bb-hero--art .bb-hero__cutout {
	margin: 0;
	/* The keyframes clip the character to its 600px column (a wide pair loses a
	   little of each outer hand, exactly as in Figma). Clipping here means the
	   art can never run under the copy, whatever the viewport. */
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

/* Hero cut-out box is 600×574 in the keyframes */
.bb-hero--art .bb-hero__cutout img {
	display: block;
	width: auto;
	max-width: none; /* may be wider than the column; the figure clips it */
	max-height: none; /* height comes from the Image block, per character */
	flex: none;
}

/* The character stands on the content baseline, as in the keyframes. */
@media (min-width: 782px) {
	.bb-hero--art .bb-hero__art {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
	}

	/* Home: the keyframe is one flattened picture, so the pair is placed where
	   it sits in that picture (measured: 625px wide, left edge 23px past the
	   column's, top 255px into the hero). Anchored from the top so the copy's
	   height can't move it; the negative bottom margin keeps the hero at 814px. */
	.bb-hero--home .bb-hero__art {
		justify-content: flex-start;
	}

	.bb-hero--home .bb-hero__cutout {
		overflow: visible;
		justify-content: flex-start;
		margin: 84px 0 -60px -23px;
	}
}

/* The design's fixed heights assume the full 600px art column, which only
   exists once the content box reaches 1280px (a 1440px viewport). Below that
   the column is narrower, so the column width drives the size instead —
   otherwise the figure clips the character's hands between 1200 and 1440. */
@media (min-width: 782px) and (max-width: 1439px) {
	.bb-hero--art .bb-hero__cutout img {
		height: auto !important;
		max-width: 100%;
		max-height: 574px;
	}
}

.bb-hero--art .bb-hero__content {
	text-shadow: 0 1px 3px rgba(20, 20, 60, .35);
}

/* Routine intro */
.bb-routine-intro__clock {
	margin-inline: auto;
}

/* About: clock is 364px in the keyframe; experts cloud sits in a 518px-tall box */
.bb-routine-intro__clock img {
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .18));
	width: 364px !important;
	max-width: 100%;
}

/* Routine accordion rows (title, caption, intro always visible; chevron = details summary) */
.bb-routine-row {
	position: relative;
	box-shadow: var(--wp--preset--shadow--card);
}

.bb-routine-row__title {
	font-size: var(--wp--preset--font-size--gigantic);
	padding-right: 96px;
	text-wrap: balance;
}

.bb-routine-row__caption {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: var(--wp--custom--letter-spacing--caption);
	text-transform: uppercase;
	line-height: 1;
	margin-top: var(--wp--preset--spacing--10) !important;
}

.bb-routine-row__intro {
	font-size: var(--wp--preset--font-size--medium);
	max-width: 1100px;
	margin-top: var(--wp--preset--spacing--30) !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.bb-routine-details {
	margin: 0 !important;
	position: static;
}

/* the summary is the whole row, the chevron is just its visible affordance */
.bb-routine-details > summary {
	list-style: none;
	cursor: pointer;
	position: absolute;
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
	width: auto;
	height: auto;
	border-radius: inherit;
	color: transparent;
	font-size: 0;
	background: transparent;
	overflow: hidden;
	transition: background-color .2s ease;
	inset: 0;
	transform: none;
}

.bb-routine-details > summary::-webkit-details-marker {
	display: none;
}

.bb-routine-details > summary::after {
	content: "";
	position: absolute;
	inset: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) auto auto;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='black' stroke-width='2'><circle cx='28' cy='28' r='27'/><path d='M18 24l10 10 10-10' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='black' stroke-width='2'><circle cx='28' cy='28' r='27'/><path d='M18 24l10 10 10-10' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	width: 56px;
	height: 56px;
	transition: transform .25s ease;
}

.bb-routine-details > summary:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .7);
	outline-offset: 2px;
}

.bb-routine-details[open] > summary {
	transform: none;
}

.bb-routine-row__sub {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: var(--wp--custom--letter-spacing--caption);
	text-transform: uppercase;
	line-height: 1.2;
}

.bb-routine-row__image {
	margin: 0;
}

.bb-routine-row__image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.bb-experts-yellow .bb-band__image img {
	max-height: 518px;
}

/* Experts band is 788px in the keyframe (60px padding, 668px content box) */
.bb-experts {
	min-height: 788px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bb-experts > .wp-block-columns {
	width: 100%;
}

.bb-routine-details[open] > summary::after {
	transform: rotate(180deg);
}

/* the revealed content (image, Activity button) must sit above the full-row summary */
.bb-routine-details > *:not(summary) {
	position: relative;
	z-index: 1;
}

/* Accordion panel — the element the open/close animation drives (see assets/js/accordion.js) */
.bb-routine-row__detail {
	overflow: hidden;
}

/* Experts ------------------------------------------------------------ */
.bb-experts__art img {
	max-width: 520px;
	width: 100%;
	margin-inline: auto;
	display: block;
}

/* ==========================================================================
   8. Character bands (Meet)
   ========================================================================== */

/* Character bands ---------------------------------------------------- */
.bb-band {
	min-height: 626px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* keep the two 600px columns at the full 1280px content width (flex + auto margins would shrink-wrap) */
.bb-band > .wp-block-columns {
	width: 100%;
}

.bb-band__copy > p:not(.bb-band__subtitle) {
	font-size: var(--wp--preset--font-size--medium);
	margin-top: var(--wp--preset--spacing--30) !important;
}

.bb-band__image {
	margin: 0;
}

.bb-band__image img {
	display: block;
	max-height: 466px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	object-fit: contain;
}

.bb-band__copy > * {
	max-width: 600px;
}

.bb-band--image-left .bb-band__copy > * {
	margin-right: auto;
}

.bb-band--image-right .bb-band__copy > * {
	margin-left: auto;
}

.bb-band__subtitle {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: var(--wp--custom--letter-spacing--caption);
	text-transform: uppercase;
	line-height: 1;
	margin-top: var(--wp--preset--spacing--10) !important;
}

.bb-band--clock .bb-band__image img {
	max-height: 420px;
}

/* ==========================================================================
   9. About page
   ========================================================================== */

/* Awards band */
.bb-award__logo {
	margin: 0;
}

.bb-award__logo img {
	opacity: .85;
}

.bb-award__label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: var(--wp--custom--letter-spacing--caption);
	text-transform: uppercase;
	margin: 0;
}

/* Rows are link targets (/about/#storytime): land with a little air above.
   (The header scrolls away with the page, so it needs no allowance.) */
.bb-routine-row[id] {
	scroll-margin-top: 24px;
}

/* Testimonial */
.bb-testimonial__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin-inline: auto;
	position: relative;
	overflow: hidden;
}

.bb-testimonial__avatar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: .35;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><circle cx='48' cy='36' r='16'/><path d='M16 92c4-20 18-30 32-30s28 10 32 30z'/></svg>") no-repeat center / 60%;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><circle cx='48' cy='36' r='16'/><path d='M16 92c4-20 18-30 32-30s28 10 32 30z'/></svg>") no-repeat center / 60%;
}

/* With a real photo (an Image block) the placeholder silhouette steps aside. */
.bb-testimonial__avatar.wp-block-image {
	margin-block: 0;
}

.bb-testimonial__avatar.wp-block-image::after {
	display: none;
}

.bb-testimonial__avatar.wp-block-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 50%;
}

.bb-testimonial__quote {
	font-weight: 400;
}

/* ==========================================================================
   10. Watch page
   ========================================================================== */

.bb-partner-logos__item {
	margin: 0;
	justify-self: center;
}

.bb-partner-logos__item img {
	opacity: .85;
	transition: opacity .2s ease, transform .2s ease;
	width: 200px !important;
	height: 140px;
	object-fit: contain;
}

.bb-partner-logos__item a:hover img {
	opacity: 1;
	transform: translateY(-2px);
}

/* The play badge is decorative — the whole card is one link (see Interaction states). */
.bb-video-card__media {
	position: relative;
}

.bb-video-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	background: var(--wp--preset--color--white);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='3'><circle cx='32' cy='32' r='29'/><path d='M26 21v22l18-11z' fill='black'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='3'><circle cx='32' cy='32' r='29'/><path d='M26 21v22l18-11z' fill='black'/></svg>") no-repeat center / contain;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
	transition: transform .2s ease;
	pointer-events: none;
}

/* "Choose your country" band: 26px rhythm, 710×60 pill with Heading/2 text, logos in three equal slots */
.bb-country > * + * {
	margin-block-start: 26px !important;
}

.bb-partner-logos {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	padding: var(--wp--preset--spacing--20) 0;
}

/* ==========================================================================
   11. Activities page
   ========================================================================== */

/* Retailers band: 60px vertical padding */
.bb-retailers {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ==========================================================================
   12. Pages, posts & footer
   ========================================================================== */

/* Footer ------------------------------------------------------------- */
.bb-footer-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.bb-footer-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.bb-footer-nav .wp-block-navigation-item:not(:last-child)::after {
	content: "|";
	margin-left: var(--wp--preset--spacing--20);
	opacity: .8;
}

/* Inner-page hero (clouds) ------------------------------------------- */
.bb-page-hero {
	background: var(--wp--preset--color--dusk-blue) url("../images/clouds-bg.webp") no-repeat 50% 100% / cover;
}

/* Post grid cards */
.bb-post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Content defaults inside pages/posts
   -------------------------------------------------------------------------- */
.bb-page-body .wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.bb-page-body .wp-block-post-content > h2,
.bb-page-body .wp-block-post-content > h3 {
	margin-top: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--midnight);
}

.bb-page-body .wp-block-post-content > .alignfull,
.bb-page-body .wp-block-post-content > .alignwide {
	margin-top: var(--wp--preset--spacing--70);
	margin-bottom: var(--wp--preset--spacing--70);
}

/* ==========================================================================
   13. Responsive & motion preferences
   Largest breakpoint first; narrow-screen rules win over the base rules above.
   ========================================================================== */

@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	/* Parallax paints the section's own background on a layer that overhangs the
	   section top and bottom, and moves that. Shifting background-position instead
	   (the old approach) slid the image off its box wherever "cover" left no
	   vertical slack — which is what exposed a strip of the section behind. The
	   overhang is always larger than the travel, so no edge can come into view. */
	.bb-parallax {
		/* Kept small on purpose: "cover" on the overhung layer scales the picture
		   up, and at 140px the Home hero was zoomed ~12% with BaBa cropped off
		   the left. 60px keeps the framing the designer set. */
		--bb-parallax-overscan: 60px;

		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.bb-parallax::before {
		content: "";
		position: absolute;
		inset: calc(-1 * var(--bb-parallax-overscan)) 0;
		z-index: -1;
		background-image: inherit;
		background-position: inherit;
		/* inherit, not cover: a block can carry a designed crop (the Watch hero is
		   269% wide, anchored bottom-left). Everything else still says cover. */
		background-size: inherit;
		background-repeat: no-repeat;
		transform: translate3d(0, var(--bb-parallax-y, 0px), 0);
		will-change: transform;
	}

	/* A video layer drifts with the poster. It gets the same overhang so a
	   fitted <video> never shows an edge; a YouTube frame is zoomed anyway. */
	.bb-parallax .bb-video-bg {
		inset: calc(-1 * var(--bb-parallax-overscan)) 0;
		transform: translate3d(0, var(--bb-parallax-y, 0px), 0);
		will-change: transform;
	}
}

@media (max-width: 1280px) {
	.bb-cards--5 .bb-card__body {
		padding: var(--wp--preset--spacing--20) !important;
	}
}

@media (max-width: 1223px) and (min-width: 782px) {
	/* --------------------------------------------------------------------------
	   Responsive
	   -------------------------------------------------------------------------- */
	/* Five across needs ~200px a card; below that the copy overflows and the card
	   clips it. Core keeps columns on one line, so wrapping has to be asked for. */
	.bb-cards--5 {
		flex-wrap: wrap !important;
		justify-content: center;
	}

	.bb-cards--5 > .wp-block-column {
		flex-basis: calc(33.333% - var(--wp--preset--spacing--20)) !important;
		flex-grow: 0;
	}
}

@media (max-width: 781px) {
	:root {
		--bb-nav-height: 80px;
	}

	/* Header: 80px tall, 16px padding, 40px round menu button */
	.bb-header {
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
		padding-top: var(--wp--preset--spacing--20) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
		min-height: 80px;
	}

	.bb-logo img {
		max-width: 160px;
	}

	/* Inner-page heroes on phones: scene at the top (full width), copy below on green */
	.bb-hero {
		background-size: cover !important;
		background-position: 50% 50% !important;
		background-repeat: no-repeat !important;
		background-color: #7EB35A; /* only ever seen if the picture fails to load */
		padding: 0 0 var(--wp--preset--spacing--50) !important;
		min-height: 0 !important;
	}

	.bb-hero > .wp-block-columns {
		gap: 0;
	}

	.bb-hero__art {
		display: block;
		width: 100%;
		aspect-ratio: 1440 / 814;
		height: auto;
		margin-bottom: var(--wp--preset--spacing--40) !important;
	}

	/* Home hero = the mobile keyframe: zoomed meadow + MeMo & BaBa cut-out (361×298 inset 16/48) + white copy */
	.bb-hero:not(.bb-hero--page) {
		background-image: url("../images/mobile-hero-bg-v3.webp") !important;
		background-size: cover !important;
		background-position: 50% 50% !important;
		background-color: #9cc24e;
	}

	.bb-hero:not(.bb-hero--page) .bb-hero__art {
		aspect-ratio: auto;
		height: auto;
		margin-top: 5vw; /* + the 8vw art padding ≈ the keyframe's 48px inset */
		/* the pair is the Image block in this column now (it stays over the video) */
	}

	.bb-hero__content {
		text-align: center;
		color: var(--wp--preset--color--white) !important;
		padding: 0 var(--wp--preset--spacing--20);
		text-shadow: 0 1px 2px rgba(40, 60, 20, .25);
	}

	/* Page headlines set smaller on a phone: at 40px a long one ran to eight
	   lines and left the hero mostly flat colour. */
	.bb-hero__content > .wp-block-heading {
		font-size: 32px !important;
		line-height: 1.15;
	}

	.bb-hero__content > * {
		margin-inline: auto;
	}

	.bb-hero__content .wp-block-buttons {
		justify-content: center;
	}

	/* Home hero on a phone (Mobile keyframe): a square picture panel (393×394,
	   pair inset 16/48) followed by a sky-blue block carrying the stacked copy —
	   48px top/bottom, 16px sides, white text. The block sits over the video
	   layer, so on a phone the clip only shows behind the picture panel. */
	/* (doubled selector: outranks the generic phone hero rules below) */
	.bb-hero.bb-hero--home {
		padding-bottom: 0 !important;
	}

	.bb-hero.bb-hero--home .bb-hero__art {
		box-sizing: border-box;
		height: 100vw !important;
		padding: 48px 16px 0;
		margin: 0 !important;
	}

	.bb-hero.bb-hero--home .bb-hero__cutout img {
		max-height: none;
		width: 100%;
	}

	/* The clip belongs to the picture panel only, not the copy block below it,
	   so the frame is fitted to the square panel rather than the whole hero
	   (which showed just the middle quarter of it through the panel). */
	.bb-hero.bb-hero--home .bb-video-bg {
		top: 0;
		bottom: auto;
		height: 100vw;
		transform: none;
	}

	.bb-hero.bb-hero--home .bb-hero__content {
		background: var(--wp--preset--color--sky-blue);
		padding: 48px 16px;
		text-shadow: none;
	}

	.bb-hero.bb-hero--home .bb-hero__content > .wp-block-heading {
		font-size: 44px !important;
		line-height: 1.1;
	}

	.bb-section {
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
	}

	.bb-cards--5 .wp-block-column,
	.bb-cards--3 .wp-block-column {
		flex-basis: 100% !important;
	}

	.bb-features .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
	}

	.bb-experts .wp-block-columns {
		text-align: center;
	}

	.bb-experts .wp-block-buttons {
		justify-content: center;
	}

	.bb-experts__art img {
		max-width: 320px;
	}

	/* The country name is centred in the pill and the arrow is pinned to its right
	   edge, so on a narrow phone the two nearly touched. Centre the name in the
	   space left of the arrow instead, and draw the arrow a little smaller. */
	.bb-select .wp-block-button__link {
		padding-inline: 24px 48px;
	}

	.bb-select .wp-block-button__link::after {
		right: 12px;
		width: 26px;
		height: 26px;
	}

	/* Buttons under centred band copy were still left-aligned. */
	.bb-band__copy .wp-block-buttons {
		justify-content: center;
	}

	/* Half the desktop size on a phone, and a tighter gap so all five stay on one
	   row rather than leaving a single icon stranded underneath. */
	.bb-social.wp-block-social-links.has-huge-icon-size {
		font-size: 40px;
		gap: 16px 28px !important;
	}

	.bb-footer-nav .wp-block-navigation-item:not(:last-child)::after {
		margin-left: var(--wp--preset--spacing--10);
	}

	.bb-page-hero,
	.bb-page-body {
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
	}

	.bb-band {
		min-height: 0;
	}

	.bb-band .wp-block-columns {
		flex-direction: column !important;
	}

	.bb-band__art {
		order: -1;
	}

	.bb-band__image img {
		max-height: 300px;
	}

	.bb-band__copy {
		text-align: center;
	}

	.bb-band__copy > .wp-block-heading {
		font-size: var(--wp--preset--font-size--huge);
	}

	.bb-band__copy > * {
		margin-inline: auto !important;
	}

	/* The block carries the desktop height inline (571px from the design); on a
	   phone that would show a narrow vertical slice of a 16:9 picture. */
	.bb-breaker {
		min-height: 260px !important;
	}

	.bb-hero--art .bb-hero__art {
		aspect-ratio: auto;
		height: auto;
		padding: 8vw var(--wp--preset--spacing--20) 0;
		margin-bottom: var(--wp--preset--spacing--20) !important;
	}

	.bb-hero--art .bb-hero__cutout img {
		height: auto !important; /* the block's desktop height must not apply here */
		max-width: 100%;
		max-height: 300px;
	}

	/* The cut-outs keep their drop shadow in the alpha, so the image box is wider
	   than the character and centring the box puts the body off-centre. Shift each
	   by the measured difference (a % of its own width) so the character, not the
	   box, sits on the centre line. Values measured from the artwork. */
	.bb-hero--art .bb-hero__cutout .wp-image-139 { transform: translateX(10.4%); }
	.bb-hero--art .bb-hero__cutout .wp-image-135 { transform: translateX(1.1%); }

	/* White copy over open scenery needs a footing: a gentle darkening towards
	   the bottom of the hero, under the words, over the picture. */
	.bb-hero--page {
		position: relative;
		isolation: isolate;
	}

	.bb-hero--page::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to bottom, rgba(10, 25, 15, 0) 38%, rgba(10, 25, 15, .58) 100%);
		pointer-events: none;
	}

	.bb-routine-row__title,
	.bb-routine-row__caption {
		padding-right: 64px;
	}

	.bb-routine-row__title {
		font-size: var(--wp--preset--font-size--huge);
	}

	.bb-routine-row {
		padding: var(--wp--preset--spacing--30) !important;
	}

	.bb-experts-yellow .wp-block-columns,
	.bb-science .wp-block-columns {
		flex-direction: column !important;
		text-align: center;
	}

	.bb-experts-yellow .bb-band__image img,
	.bb-science .bb-band__image img {
		max-height: 300px;
	}

	.bb-award {
		flex-direction: column;
		text-align: center;
	}

	/* About hero still: keep the 16:9 crop on phones instead of a 734px tall slice */
	.bb-breaker--hero {
		min-height: 62vw !important;
	}

	.bb-header__inner {
		min-height: 48px;
	}

	.bb-nav .wp-block-navigation__responsive-container-open,
	.bb-nav .wp-block-navigation__responsive-container-close {
		width: 40px;
		height: 40px;
	}

	.bb-nav .wp-block-navigation__responsive-container-open svg,
	.bb-nav .wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
	}

	.bb-hero__content .wp-block-heading {
		font-size: 2.5rem;
	}

	/* Routine cards: 2-up grid, BeddyByes full width (design) */
	.wp-block-columns.bb-cards--5:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--10)) !important;
	}

	.wp-block-columns.bb-cards--5:not(.is-not-stacked-on-mobile) > .wp-block-column:last-child {
		flex-basis: 100% !important;
	}

	.wp-block-columns.bb-cards--5 {
		gap: var(--wp--preset--spacing--20) !important;
	}

	.bb-cards--5 .bb-card__body {
		padding: 12px !important;
	}

	.bb-cards--5 .bb-card__body > .wp-block-heading {
		font-size: 1.25rem;
	}

	.bb-cards--5 .bb-card__body p {
		font-size: 0.8125rem;
	}

	.bb-cards--5 .bb-card__actions .wp-block-button__link {
		font-size: 0.8125rem;
	}

	/* Broadcaster logos + social icons are larger on the phone keyframe */
	.bb-logos .bb-logos__item img {
		width: min(256px, 70vw) !important;
	}

	.bb-experts .bb-hero__content,
	.bb-experts .wp-block-column {
		text-align: center;
	}

	.bb-partner-logos {
		grid-template-columns: 1fr;
	}

	.bb-select .wp-block-button__link {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.bb-experts {
		min-height: 0;
	}

	/* sits in the corner with its right edge on the content edge, clear of the caption */
	.bb-routine-details > summary::after {
		inset: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) auto auto;
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 480px) {
	.bb-features .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	/* --- Motion: lifts and zooms -------------------------------------------- */
	.bb-card:hover,
	.wp-block-group.is-style-card:hover {
		transform: translateY(-6px) scale(1.02);
	}

	.bb-video-card:hover .bb-video-card__media::after {
		transform: scale(1.08);
	}

	.bb-routine-details > summary:hover::after {
		transform: scale(1.06);
	}

	.bb-routine-details[open] > summary:hover::after {
		transform: rotate(180deg) scale(1.06);
	}

	.bb-logos__item a:hover img {
		transform: translateY(-2px);
	}

	.bb-logo a {
		display: inline-block;
		transition: transform .2s ease;
	}

	.bb-logo a:hover {
		transform: scale(1.03);
	}

	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

@media (hover: hover) and (pointer: fine) {
	/* --- Colour / shadow hovers (no motion required) ------------------------- */
	.bb-card:hover,
	.wp-block-group.is-style-card:hover {
		box-shadow: var(--wp--preset--shadow--lift);
		z-index: 1;
	}

	.bb-card:hover .bb-card__actions .wp-block-button__link {
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	.bb-routine-details > summary:hover {
		background-color: rgba(255, 255, 255, .08);
	}

	/* broadcaster + retailer logos, matching the country-band treatment */
	.bb-logos__item img {
		opacity: .85;
		transition: opacity .2s ease, transform .2s ease;
	}

	.bb-logos__item a:hover img {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* --- Reduced motion: keep the feedback, drop the movement ---------------- */
	/* No moving background video — the section's background image shows instead. */
	.bb-video-bg {
		display: none;
	}

	.bb-card,
	.wp-block-group.is-style-card,
	.bb-card .bb-card__media img,
	.wp-block-button__link,
	.bb-social .wp-block-social-link a,
	.bb-partner-logos__item img,
	.bb-logos__item img,
	.bb-routine-details > summary::after,
	.bb-video-card__media::after {
		transition-duration: .01ms;
	}

	.wp-block-button__link:hover,
	.wp-block-button.is-style-arrow-link .wp-block-button__link:hover::after {
		transform: none;
	}
}