/*
 * Packages pages — the `packages` and `add-ons` sections.
 *
 * Used by Pricing, Kids / Teen / Adult party packages and Special Events. Everything is
 * scoped under .bb-packages or .bb-add-ons, so this file is safe to load everywhere.
 *
 * Every size, colour, border and radius below is the value read from the Figma nodes
 * (packages 11204:1976 / 11201:1326 / 11204:2737 / 11205:3149, add-ons 11204:1938,
 * promo strip 11217:4250) at the 1440px frame width. The colours the design uses that
 * have no theme.json palette slug are declared once here with the node they came from.
 */

/*
 * The off-palette colours these frames use (#4d2330 and #7a626a text, #fffdfc and
 * #d9bc9e tab bar, #e7d7d3 dividers, #f4dedf promo fill, #8d4b60 rule, #6c585c
 * footnote) resolve onto the canonical palette; see docs/design-system.md.
 */

/* ------------------------------------------------------------- packages ---- */

/* The tab bar sits 41px under the hero (Figma 11204:2130); the section closes on the
   shared band rhythm. */
.bb-packages {
	padding-block: 41px var( --bb-space-band );
}

/* -- the tab bar (links between the package pages, not client-side tabs) -- */

/*
 * 1296px wide and inset 5% of the frame either side (Figma 11204:2130) — wider than the
 * 1240px content width, so it steps back out of the section's root padding.
 */
.bb-packages > .bb-packages__tabs {
	width: min( 90vw, 1296px );
	max-width: none;
	margin-block-end: 58px;
	/* Core's constrained layout centres children with margin auto !important. */
	margin-left: calc( ( 100% - min( 90vw, 1296px ) ) / 2 ) !important;
	margin-right: calc( ( 100% - min( 90vw, 1296px ) ) / 2 ) !important;
}

/*
 * On a tabbed page the bar belongs to the page, not to one Packages section, so it sits
 * beside the panels and takes over the 41px under the hero and the 58px above the
 * heading that .bb-packages used to provide.
 */
.bb-tabs.bb-packages__tabs {
	width: min( 90vw, 1296px );
	max-width: none;
	margin: 41px auto 58px;
}

.bb-tabpanel > .bb-packages {
	padding-block-start: 0;
}

/* The header is fixed, so a tab that scrolls to an anchor inside its panel (Private
   hire) has to stop below it — the same offset the FAQ topics use. */
.bb-tabpanel [id] {
	scroll-margin-top: calc( var( --bb-header-h ) + 24px );
}

.bb-packages__tablist {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 0;
	padding: 0;
	border: var( --bb-border-w ) solid var( --bb-border-card );
	background: var( --bb-surface );
	list-style: none;
}

.bb-packages__tab + .bb-packages__tab {
	border-left: var( --bb-border-w ) solid var( --bb-border-card );
}

.bb-packages__tab > * {
	display: flex;
	box-sizing: border-box;
	position: relative;
	align-items: center;
	justify-content: center;
	height: 68px;
	padding: 4px 8px;
	color: var( --bb-ink );
	font-family: var( --bb-font-body );
	/* 24px at 1440px (Figma 11204:2131); scaled down on narrower screens. */
	font-size: clamp( 0.875rem, 1.667vw, 1.5rem );
	font-weight: 600;
	/* Figma 11204:2131 sets no tracking on the tab labels. */
	letter-spacing: 0;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.bb-packages__tab a:hover {
	color: var( --bb-burgundy );
}

/* The current tab's rule: 7px of pink across the bottom of the bar (Figma 11204:2140). */
.bb-packages__tab.is-current > *::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 7px;
	background: var( --bb-accent );
}

/* -- heading -- */

.bb-packages__head {
	margin-bottom: var( --bb-space-intro );
}

/* Nodes 11204:2126 / 11204:1968 are 34px in Figma; both converge on the H2 role. */
.bb-packages__heading.wp-block-heading,
.bb-add-ons__heading.wp-block-heading {
	margin: 0;
}

.bb-packages__intro {
	margin: var( --bb-space-head ) 0 0;
	color: var( --bb-ink-muted );
}

/* -- the card row -- */

/*
 * The cards sit on the shared 12-column grid (theme.css): five cards span 2 columns each
 * and start at column 2 so the row is centred, four span 3 each. At 1280px and up the
 * exact Figma tracks take over — 200px cards, 50px gutters (Figma 11204:1979 …).
 */
.bb-packages__grid {
	--bb-content-w: 1200px;
	--bb-grid-gap: 24px;
	/* The only row gap at 1440 is the card row to the promo strip: Figma 11205:3149 has
	   the cards ending at 1560 and the strip starting at 1611. */
	--bb-grid-row-gap: 51px;
	--bb-grid-gap-tablet: 24px;
	--bb-grid-row-gap-tablet: 32px;
	--bb-grid-row-gap-phone: 24px;
	--bb-grid-align: stretch;
	justify-items: center;
}

.bb-packages__card {
	display: flex;
	box-sizing: border-box;
	/* Below 1280 the cards share the 12-column tracks; cap them near their Figma size. */
	width: 100%;
	max-width: 320px;
	flex-direction: column;
	overflow: hidden;
	text-align: center;
}

/* 200 × 180 photo, square-cropped by the card's own radius. */
.bb-packages__media {
	aspect-ratio: 200 / 180;
	/* A portrait photo would otherwise grow the box past the ratio: the automatic
	   minimum height of an aspect-ratio box is its content height. */
	min-height: 0;
	overflow: hidden;
	border-bottom: var( --bb-border-w ) solid var( --bb-border-card );
}

.bb-packages__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text inset 22px; photo bottom 469 → title top 484; card bottom 748 → button 728. */
.bb-packages__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 15px var( --bb-card-pad-sm ) var( --bb-space-head );
}

/* Type: the shared compact card-heading role (node 11204:1984). */
.bb-packages__title.bb-packages__title {
	/* The design reserves 53px so "FROM" lines up on one- and two-line names. */
	min-height: 53px;
	/*
	 * 190px, the widest title box in the design (Figma 11204:2098, 11205:3243): the
	 * canonical uppercase H4 needs it to keep a long name on two lines like the frame.
	 * Plus 1px a side: "DREAMS COME TRUE" measures 190.4px and would wrap otherwise.
	 */
	margin: 0 -19px;
}

.bb-packages__from {
	margin: 5px 0 0;
	color: var( --bb-ink );
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-micro );
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * The price is the one display number in the design (node 11204:1986). Figma reserves
 * the 547 -> 601 band (54px) for it whether it is one line or two, so the meta rows line
 * up across a row of cards.
 */
.bb-packages__price {
	min-height: 54px;
	margin: 5px 0 0;
	color: var( --bb-ink );
	font-family: var( --bb-font-display );
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: var( --bb-ls-h3 );
	line-height: 1.1;
	/* Cormorant Garamond defaults to old-style figures, so "$1,699" came out with
	   descending digits; every price in the design is lining (11204:1985, 11204:2101,
	   11205:3157). */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}

/*
 * Two-part prices ("$90pp / $40 child") run to two lines (Figma 11205:3158). They step
 * down to 26px so the pair still fits the 54px the design reserves for the price.
 */
.bb-packages__price--long {
	font-size: 1.625rem;
	line-height: 1.04;
}

/* Rows 17px apart (Figma 11204:1992–1994): a 16px micro line box plus 1px. */
.bb-packages__meta {
	display: grid;
	gap: 1px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* Icon column 13px, text 21px from the icon's left edge. */
.bb-packages__meta li {
	display: grid;
	grid-template-columns: var( --bb-icon-sm ) 1fr;
	align-items: center;
	gap: 8px;
}

.bb-packages__icon {
	display: block;
	width: var( --bb-icon-sm );
	height: 11px;
}

.bb-packages__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bb-packages__text {
	margin: 13px 0 0;
	max-width: 154px;
}

/* Node 11204:2002 is the shared compact control button (theme.css). */
.bb-packages__button {
	width: 132px;
	max-width: 100%;
	margin-top: auto;
}

/*
 * The button keeps its 12px gap (Figma: text bottom 684 → button top 696) and
 * `margin-top: auto` still drops it to the foot of a card shorter than its neighbours.
 */
.bb-packages__meta:has( + .bb-packages__button ),
.bb-packages__text:has( + .bb-packages__button ) {
	margin-bottom: 12px;
}

/* -- the promo strip (Special Events, Figma 11217:4250) -- */

.bb-packages__promo {
	display: block;
	/* The grid centres its items; the strip runs the full width of the card row. */
	justify-self: stretch;
	min-height: 125px;
	border: var( --bb-border-w ) solid var( --bb-border-soft );
	border-radius: var( --bb-radius-md );
	background: var( --bb-bg-alt );
}

.bb-packages__promo-grid {
	--bb-grid-gap: 0px;
	--bb-grid-gap-tablet: 0px;
	--bb-grid-row-gap-tablet: 20px;
	--bb-grid-row-gap-phone: 20px;
	--bb-grid-align: stretch;
}

.bb-packages__promo-intro {
	position: relative;
	/* 23px from the top of the strip (Figma 11217:3684 at y=813 in a box at y=790). */
	padding: 23px 24px 23px 80px;
}

/* The rule between the two halves is 97px tall, not the full box (Figma 11217:3691). */
.bb-packages__promo-intro::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 0;
	width: var( --bb-border-w );
	height: 97px;
	background: var( --bb-border-soft );
}

/* Type: the shared card-heading role (node 11217:3684). */
.bb-packages__promo-heading {
	margin: 0;
}

.bb-packages__promo-text {
	margin: 14px 0 0;
}

.bb-packages__promo-items {
	display: grid;
	flex: 1;
	grid-template-columns: repeat( 4, 1fr );
	align-content: start;
	margin: 0;
	padding: 24px 62px 23px 35px;
	list-style: none;
}

.bb-packages__promo-items li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 64px box; each icon PNG is padded so it keeps its own Figma size inside it. */
.bb-packages__promo-icon {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.bb-packages__promo-items li span {
	margin-top: -6px;
}

/* -------------------------------------------------------------- add-ons ---- */

.bb-add-ons {
	padding-block: var( --bb-space-band );
}

/* Collage 511px, gutter 99px, text column 465px (Figma 11204:1971 / 11204:1942). */
.bb-add-ons__inner {
	--bb-content-w: 1075px;
	--bb-grid-row-gap: 48px;
}

.bb-add-ons__collage {
	--bb-grid-gap: 11px;
	--bb-grid-row-gap: 13px;
	--bb-grid-gap-tablet: 11px;
	--bb-grid-row-gap-tablet: 13px;
	--bb-grid-gap-phone: 11px;
	--bb-grid-row-gap-phone: 13px;
	align-content: start;
}

.bb-add-ons__tile {
	overflow: hidden;
	aspect-ratio: 1;
	margin: 0;
}

/* The collage keeps the 1px black photo outline the other collages use; Figma draws it
   on all four tiles (11204:1971, sampled at x192 / x441 in the 1440 frame). */
.bb-add-ons__tile img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: var( --bb-border-w ) solid var( --bb-border-photo );
	object-fit: cover;
}

.bb-add-ons__intro {
	margin: var( --bb-space-head ) 0 0;
	color: var( --bb-ink-muted );
}

/* Two 219px cards, 27px apart, starting 32px under the intro (Figma has 56px;
   tightened 2026-09-22 to match the footnote gap below the cards). */
.bb-add-ons__cards {
	--bb-grid-gap: 27px;
	--bb-grid-gap-tablet: 27px;
	--bb-grid-row-gap-phone: 20px;
	--bb-grid-align: stretch;
	margin-top: 32px;
}

.bb-add-ons__card {
	/* A 219px card is a compact card: the wider role padding wraps the list items. */
	padding: var( --bb-card-pad-sm );
}

.bb-add-ons__group + .bb-add-ons__group {
	margin-top: 15px;
}

/* Type: the shared label role (node 11204:1944). */
.bb-add-ons__group-title.bb-add-ons__group-title {
	margin: 0;
}

/* Items 18px apart (Figma 11204:1945–1950): a 16px micro line box plus 2px. */
.bb-add-ons__items {
	display: grid;
	gap: 2px;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}

.bb-add-ons__items li::before {
	content: "• ";
}

/* Figma has 56px above the footnote; tightened to 32px (2026-09-22) so the footnote and
   download link sit with the cards; matches the mobile spacing below. */
.bb-add-ons__footnote {
	margin: 32px 0 0;
}

/* The optional download link sits right under the footnote, in the same micro type,
   2px apart like the add-on items. */
.bb-add-ons__download {
	margin: 2px 0 0;
}

.bb-add-ons__download a {
	color: var( --bb-ink );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bb-add-ons__download a:hover,
.bb-add-ons__download a:focus-visible {
	text-decoration-thickness: 2px;
}

/* ------------------------------------------- private hire (Special Events) ---- */

/*
 * The "Private event space hire" split at the foot of Special Events (Figma 11205:3111).
 * The split block and page-about.css belong to another component, so everything here is
 * scoped to the section class the seed sets on that one row.
 */

/*
 * Figma puts "PRICE ON REQUEST" (11207:3624) between the heading and the body, and sets
 * it as a Work Sans label rather than the pink Cormorant accent About uses. The text
 * column is a block-layout group, so ordering it needs a flex context.
 */
.bb-split--private-hire .bb-split__text {
	display: flex;
	flex-direction: column;
}

.bb-split--private-hire .bb-split__heading {
	order: 1;
}

/* The text block (242–591) is centred on the 600px photo (117–717), 11207:3651. */
.bb-split--private-hire .bb-split__text {
	justify-content: center;
}

.bb-split--private-hire .bb-split__accent {
	order: 2;
	margin: 18px 0 0;
	color: var( --bb-ink );
	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 );
}

.bb-split--private-hire .bb-split__body {
	order: 3;
}

.bb-split--private-hire .bb-split__bullets {
	order: 4;
}

.bb-split--private-hire .bb-split__buttons {
	order: 5;
}

/* Two bullet columns 280px apart, rows 26px apart (Figma 11207:3631 / 11207:3637). */
@media ( min-width: 1025px ) {
	.bb-split--private-hire .bb-split__bullets {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: 280px minmax( 0, 1fr );
		grid-template-rows: repeat( 3, auto );
		column-gap: 0;
		row-gap: 2px;
	}
}

/*
 * The row is its own geometry, not the shared 494 / 60 / 592 split: a 600 x 600 photo at
 * x120 and a 603px text column at x821 (11207:3622 / 11207:3651), so the band is 1304
 * wide and sits 120 from the left edge and 16 from the right rather than centred.
 * The bow (11207:3655) runs 75px past the text column and off the frame, which the
 * section clips exactly as the Figma frame does.
 */
.wp-block-group.bb-split--private-hire {
	position: relative;
	overflow: hidden;
}

/* The bow is pinned to the band (the grid is the containing block), not to the text
   column, because 11207:3655 sits 25px below the band top regardless of the text. The
   bow is decorative line art and sits behind the text: the grid is a stacking context
   (z-index 0) so the figure's negative z-index paints under the copy but still above the
   section's pink background. */
.bb-split--private-hire .bb-split__text {
	position: static;
}

.bb-split.bb-split--private-hire .bb-split__inner.bb-grid {
	position: relative;
	z-index: 0;
}

.bb-split--private-hire .bb-split__figure--inline {
	z-index: -1;
}

/* The block passes 1146px as the section's contentSize, and core prints that container
   rule after the stylesheets, so the width has to be set here and not through
   --bb-content-w alone. */
.bb-split.bb-split--private-hire .bb-split__inner.bb-grid {
	--bb-content-w: 1304px;

	max-width: min( 1304px, 100% );
}

/* 11207:3622 is a 600 x 600 square with a 1px gold hairline, not the cream-band photo
   outline; --bb-split-photo-ar is the hook page-about.css exposes for the crop. */
.bb-split--private-hire .bb-split__photo img {
	--bb-split-photo-ar: 1;

	border-color: var( --bb-border-card );
}

/* 11207:3625 is 431px wide; the bullets sit 16px under it and the button 27px under
   them (11207:3631 at y460 against the body's 444, 11207:3650 at y555 against 528). */
.bb-split--private-hire .bb-split__body {
	max-width: 431px;
}

.bb-split--private-hire .bb-split__bullets {
	margin-top: 16px;
}

.bb-split--private-hire .bb-split__buttons {
	margin-top: 27px;
}

/*
 * The bow (11207:3655): its box is inset 3.02% / 1.1% / 60.18% / 76.46% in the 1440 x 834
 * frame, i.e. 323 x 307 with its top-left at x1101, y25 and its right edge on the band's
 * right edge (1424). It sits fully inside the frame.
 */
.bb-split--private-hire .bb-split__figure--inline {
	top: -94.854px; /* 25.146 in the frame, against the band's 120px top padding */
	right: 0;       /* right edge 1424 = the 1304 band's right edge */
	width: 323.215px;
	max-width: none;
}

/* Inside that box the vector itself is 261.864 x 236.16, centred and rotated 18.48deg
   (11207:3655). The box is a flex centre so the same rule holds when the box scales. */
.bb-split--private-hire .bb-split__figure--inline {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 306.983px;
}

.bb-split--private-hire .bb-split__figure--inline img {
	width: 81.019%; /* 261.864 / 323.215 */
	height: auto;
	max-width: none;
	transform: rotate( 18.48deg );
	transform-origin: center;
}

@media ( min-width: 1280px ) {
	/* The band is 1304 wide at x120, not centred (11207:3622 / 11207:3651). */
	.wp-block-group.bb-split--private-hire {
		padding-inline: 120px 16px;
	}

	.bb-split.bb-split--private-hire .bb-split__inner.bb-grid {
		--bb-grid-gap: 101px;

		grid-template-columns: minmax( 0, 600fr ) minmax( 0, 101fr ) minmax( 0, 603fr );
		column-gap: 0;
	}

	.bb-split--private-hire .bb-split__media {
		grid-column: 1;
	}

	.bb-split--private-hire .bb-split__text {
		grid-column: 3;
	}
}

/* Below the exact tracks the bow would sit over the heading, so it scales with the
   column and stays inside it. */
/* Between the exact tracks and the stacked layout the bow scales with the section and
   stays inside it. */
@media ( max-width: 1279px ) {
	.bb-split--private-hire .bb-split__figure--inline {
		top: 8px;
		right: 8px;
		width: 22%;
		height: auto; /* the box follows the (rotated, proportional) image */
	}
}

/* The columns have stacked, so the photo fills the top of the section and there is
   nowhere for the bow to sit; it is decorative (aria-hidden) line art. */
@media ( max-width: 1024px ) {
	.bb-split--private-hire .bb-split__figure--inline {
		display: none;
	}
}

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

/*
 * Column collapse is the shared grid's job (bb-span-* / bb-md-span-* / stacked), so the
 * only rules here are the exact Figma tracks at 1280px and up, the section padding, and
 * the two things that are not content columns: the tab bar and the promo rule.
 */

@media ( min-width: 1280px ) {
	/* One 200px track per card (the count comes from the template), centred. */
	.bb-packages__grid {
		grid-template-columns: repeat( var( --bb-pkg-cols, 4 ), 200px );
		justify-content: center;
		column-gap: 50px;
	}

	.bb-packages__grid > .bb-col {
		grid-column: auto;
	}

	.bb-packages__grid > .bb-packages__promo {
		grid-column: 1 / -1;
	}

	.bb-packages__promo-grid {
		grid-template-columns: 407px minmax( 0, 1fr );
	}

	.bb-packages__promo-grid > .bb-col {
		grid-column: auto;
	}

	.bb-add-ons__inner {
		grid-template-columns: 511px 465px;
		justify-content: center;
		column-gap: 99px;
	}

	.bb-add-ons__inner > .bb-col {
		grid-column: auto;
	}

	.bb-add-ons__collage {
		grid-template-columns: 250px 250px;
		justify-content: center;
	}

	.bb-add-ons__collage > .bb-col {
		grid-column: auto;
	}

	.bb-add-ons__cards {
		grid-template-columns: 219px 219px;
	}

	.bb-add-ons__cards > .bb-col {
		grid-column: auto;
	}
}

@media ( max-width: 1279px ) {
	.bb-packages {
		padding-block: 32px var( --bb-space-band );
	}

	.bb-packages > .bb-packages__tabs {
		margin-bottom: 40px;
	}

	.bb-tabs.bb-packages__tabs {
		margin: 32px auto 40px;
	}

	.bb-packages__head {
		margin-bottom: 36px;
	}

	.bb-add-ons__cards,
	.bb-add-ons__footnote {
		margin-top: 32px;
	}

	.bb-packages__promo-intro {
		padding: 24px 24px 0;
	}

	.bb-packages__promo-items {
		padding: 24px;
	}
}

/*
 * Touch: the 40px control grows to the 44px minimum target everywhere below the 1440
 * frame the design is drawn at, so 1280 is covered too.
 */
@media ( max-width: 1439px ) {
	.bb-packages__button {
		min-height: 44px;
	}
}

/* The rule only makes sense while the two halves sit side by side. */
@media ( max-width: 1024px ) {
	.bb-packages__promo-intro::after {
		display: none;
	}

	.bb-packages__promo-intro {
		padding-bottom: 20px;
		border-bottom: var( --bb-border-w ) solid var( --bb-border-soft );
		text-align: center;
	}

	.bb-packages__promo-items li span {
		margin-top: 0;
	}
}

/* Small tablets: a 200px card is far too narrow to own a whole row. */
@media ( min-width: 560px ) and ( max-width: 781px ) {
	.bb-packages__grid,
	.bb-add-ons__cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bb-packages__grid > .bb-col,
	.bb-add-ons__cards > .bb-col {
		grid-column: auto;
	}

	.bb-packages__grid > .bb-packages__promo {
		grid-column: 1 / -1;
	}
}

/* The tab bar is a five-item control, not a content column layout. */
@media ( max-width: 781px ) {
	.bb-packages__tablist {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat( 2, 1fr );
	}

	.bb-packages__tab {
		border-top: var( --bb-border-w ) solid var( --bb-border-card );
	}

	.bb-packages__tab:nth-child( -n+2 ) {
		border-top: 0;
	}

	.bb-packages__tab:nth-child( odd ) {
		border-left: 0;
	}

	/* Five items in two columns: the last one fills its row. */
	.bb-packages__tab:last-child:nth-child( odd ) {
		grid-column: 1 / -1;
	}

	.bb-packages__tab > * {
		min-height: 56px;
	}

	.bb-packages__promo-items {
		grid-template-columns: repeat( 2, 1fr );
		gap: 20px 16px;
	}
}

/* ------------------------------------------------------- the tab panels ---- */

/*
 * Each Packages row and the rows under it are one panel (inc/sections.php); the tab bar
 * shows one at a time (assets/js/packages-tabs.js). Without JS a <noscript> rule undoes
 * `hidden` and the page reads as one long list.
 */
.bb-tabpanel[hidden] {
	display: none;
}

.bb-tabpanel {
	transition: opacity 0.2s ease;
}

.bb-tabpanel.is-entering {
	opacity: 0;
	transition: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.bb-tabpanel {
		transition: none;
	}
}