/**
 * BioMyst front page.
 * Transcribed from design-reference/homepage-desktop.html (+ homepage-mobile.html below 700px).
 */

/* ------------------------------------------------------------------ *
 * Section rhythm
 * ------------------------------------------------------------------ */

.bm-home-section {
	padding: var(--bm-section-y) 0 0;
}

.bm-home-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.bm-home-section__link {
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.bm-hero {
	position: relative;
	background: var(--bm-ink);
	overflow: hidden;
}

.bm-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.bm-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 28, 40, 0.94) 0%, rgba(9, 28, 40, 0.8) 34%, rgba(9, 28, 40, 0.25) 60%, rgba(9, 28, 40, 0) 78%);
}

.bm-hero__inner {
	position: relative;
	padding-top: clamp(56px, 9vw, 116px);
	padding-bottom: clamp(56px, 9vw, 116px);
}

.bm-hero__content {
	max-width: 560px;
}

.bm-hero__kicker {
	font-size: 12px;
	letter-spacing: 0.16em;
	margin-bottom: 18px;
}

.bm-hero__title {
	font-size: clamp(38px, 6vw, 62px);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0 0 20px;
	color: #fff;
}

.bm-hero__body {
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: var(--bm-on-dark-soft);
	margin: 0 0 32px;
	max-width: 460px;
}

.bm-hero__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------ *
 * Trust bar
 * ------------------------------------------------------------------ */

.bm-trustbar {
	background: var(--bm-ink);
	border-top: 1px solid var(--bm-on-dark-line-soft);
}

.bm-trustbar__inner {
	max-width: var(--bm-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	list-style: none;
	padding: 0;
}

.bm-trustbar__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 18px clamp(16px, 3vw, 28px);
	border-right: 1px solid var(--bm-on-dark-line-soft);
}

/* The shared .bm-check chip is teal-tinted for light surfaces; on the dark bar it is cyan. */
.bm-trustbar__check {
	background: var(--bm-cyan-tint);
}

.bm-trustbar__label {
	font-family: var(--bm-mono);
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--bm-on-dark);
}

/* ------------------------------------------------------------------ *
 * Categories
 * ------------------------------------------------------------------ */

.bm-cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.bm-cats__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--bm-r-3xl);
	border: 1px solid var(--bm-border);
	background: var(--bm-ink);
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	transition: border-color var(--bm-t);
}

.bm-cats__card:hover {
	border-color: var(--bm-teal);
}

.bm-cats__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 70% 30%, rgba(18, 175, 203, 0.4), rgba(12, 34, 48, 0) 60%);
}

.bm-cats__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(63, 208, 230, 0.16) 1px, transparent 1.5px);
	background-size: 22px 22px;
}

.bm-cats__text {
	position: relative;
}

.bm-cats__name {
	display: block;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 4px;
}

.bm-cats__count {
	display: block;
	font-size: 12.5px;
	color: var(--bm-on-dark-muted);
}

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

/* Keep the arrow nav + "view all" vertically centred against the heading block. */
.bm-best .bm-home-section__head {
	align-items: center;
}

.bm-best__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

/* Horizontal, scroll-snapping rail. min-width:0 / max-width:100% guarantee the
 * track can never widen the page — it scrolls inside its own box instead. */
.bm-best__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	min-width: 0;
	max-width: 100%;
	/* Hidden scrollbar. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Vertical room so card hover shadows aren't clipped by the overflow box. */
	padding: 6px 0 14px;
	-webkit-overflow-scrolling: touch;
}

.bm-best__track::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.bm-best__track > .bm-best__card {
	flex: 0 0 auto;
	width: 248px;
	scroll-snap-align: start;
}

/* Carousel navigation (desktop only; the rail is swipe/scroll on touch). */
.bm-carousel__nav {
	display: flex;
	gap: 8px;
}

.bm-carousel__arrow {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--bm-border-strong);
	background: var(--bm-surface);
	color: var(--bm-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--bm-t), border-color var(--bm-t), color var(--bm-t), opacity var(--bm-t);
}

.bm-carousel__arrow:hover {
	background: var(--bm-teal);
	border-color: var(--bm-teal);
	color: #fff;
}

.bm-carousel__arrow:focus-visible {
	outline: none;
	box-shadow: var(--bm-focus-ring);
}

.bm-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
	background: var(--bm-surface);
	border-color: var(--bm-border-strong);
	color: var(--bm-ink);
}

/* The shared chevron icon points down; rotate it for horizontal navigation. */
.bm-carousel__arrow--prev svg {
	transform: rotate(90deg);
}

.bm-carousel__arrow--next svg {
	transform: rotate(-90deg);
}

/* When JS finds the rail can't scroll, it hides the nav entirely.
 * The scrollable flag is toggled on the [data-bm-carousel] root (.bm-best),
 * so scope the hide to that element rather than a non-existent .bm-carousel. */
.bm-best.is-not-scrollable .bm-carousel__nav {
	display: none;
}

.bm-best__card {
	display: flex;
	flex-direction: column;
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: var(--bm-r-3xl);
	overflow: hidden;
	color: inherit;
	transition: box-shadow var(--bm-t), border-color var(--bm-t);
}

.bm-best__card:hover {
	box-shadow: var(--bm-shadow-card);
	border-color: #D6E1E6;
	color: inherit;
}

.bm-best__media {
	aspect-ratio: 1;
}

.bm-best__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bm-best__name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.bm-best__meta {
	font-family: var(--bm-mono);
	font-size: 11px;
	color: var(--bm-text-muted);
	margin-top: 2px;
}

.bm-best__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 2px;
}

.bm-best__price {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bm-best__view {
	height: 34px;
	padding: 0 16px;
	background: var(--bm-ink);
	color: #fff;
	border-radius: var(--bm-r-md);
	font-weight: 600;
	font-size: 12.5px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

/* ------------------------------------------------------------------ *
 * Vials grid
 * ------------------------------------------------------------------ */

.bm-vials__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Science band
 * ------------------------------------------------------------------ */

.bm-science {
	margin-top: var(--bm-section-y);
}

.bm-science__inner {
	padding-top: clamp(48px, 6vw, 80px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

.bm-science__inner .bm-kicker {
	margin-bottom: 12px;
}

.bm-science__title {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 40px;
	color: #fff;
	max-width: 620px;
}

.bm-science__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
}

.bm-science__stat {
	font-family: var(--bm-mono);
	font-size: 34px;
	font-weight: 500;
	color: var(--bm-cyan);
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}

.bm-science__item-title {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 6px;
}

.bm-science__item-text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bm-on-dark-muted);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * How it works
 * ------------------------------------------------------------------ */

.bm-steps__head {
	text-align: center;
	margin-bottom: 40px;
}

.bm-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.bm-steps__card {
	padding: 24px;
}

.bm-steps__num {
	width: 42px;
	height: 42px;
	border-radius: var(--bm-r-xl);
	background: var(--bm-teal-tint);
	color: var(--bm-teal-hover);
	font-family: var(--bm-mono);
	font-weight: 600;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	flex: none;
}

.bm-steps__title {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 6px;
}

.bm-steps__text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bm-text-soft);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Featured spotlight
 * ------------------------------------------------------------------ */

.bm-spot {
	margin-top: var(--bm-section-y);
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: var(--bm-r-5xl);
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}

.bm-spot__media {
	position: relative;
	flex: 1 1 320px;
	min-height: 300px;
}

/* The shared image frame is normally in flow; here it fills the media column. */
.bm-spot__frame {
	position: absolute;
	inset: 0;
}

/* Mobile-only marker — the desktop layout uses the "// Featured" kicker instead. */
.bm-spot__badge {
	display: none;
}

.bm-spot__panel {
	flex: 1 1 360px;
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bm-spot__kicker {
	margin-bottom: 12px;
}

.bm-spot__title {
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 0 0 12px;
}

.bm-spot__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bm-text-soft);
	margin: 0 0 24px;
	max-width: 400px;
}

.bm-spot__text p {
	margin: 0;
}

.bm-spot__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.bm-spot__cta {
	height: 50px;
	padding: 0 26px;
}

.bm-spot__price {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ *
 * Newsletter
 * ------------------------------------------------------------------ */

.bm-news {
	padding-top: var(--bm-section-y);
	padding-bottom: var(--bm-section-y);
}

.bm-news__card {
	border-radius: var(--bm-r-5xl);
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.bm-news__copy {
	flex: 1 1 320px;
}

.bm-news__title {
	font-size: clamp(22px, 2.8vw, 28px);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

.bm-news__text {
	font-size: 14.5px;
	color: var(--bm-text-soft);
	margin: 0;
	max-width: 420px;
}

.bm-news__form {
	flex: 1 1 300px;
	min-width: 280px;
}

.bm-news__fields {
	display: flex;
	gap: 10px;
}

/* base.css styles inputs via input[type="email"] (0,1,1), so scope these to out-specify it. */
.bm-news__card .bm-news__input {
	flex: 1;
	height: 50px;
	border-radius: var(--bm-r-xl);
	padding: 0 16px;
	background: var(--bm-surface-muted);
}

.bm-news__card .bm-news__input:focus {
	background: var(--bm-surface);
}

.bm-news__submit {
	height: 50px;
	padding: 0 24px;
	font-size: 14px;
	flex: none;
}

/* The AJAX handler swaps this element's class wholesale, so hook the styling to the data attribute. */
.bm-news__form [data-bm-newsletter-note] {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
}

.bm-news__form [data-bm-newsletter-note].is-ok {
	color: var(--bm-in-stock);
}

.bm-news__form [data-bm-newsletter-note][hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Mobile (homepage-mobile.html)
 * ------------------------------------------------------------------ */

@media (max-width: 700px) {

	.bm-home-section {
		padding-top: 24px;
	}

	.bm-home-section .bm-section-title {
		font-size: 21px;
	}

	.bm-home-section .bm-kicker,
	.bm-science__inner .bm-kicker {
		font-size: 10px;
	}

	/* Hero */

	.bm-hero__bg {
		object-position: 72% center;
	}

	.bm-hero__scrim {
		background: linear-gradient(180deg, rgba(9, 28, 40, 0.5) 0%, rgba(9, 28, 40, 0.15) 34%, rgba(9, 28, 40, 0.72) 78%, rgba(9, 28, 40, 0.95) 100%);
	}

	.bm-hero__inner {
		min-height: 440px;
		display: flex;
		align-items: flex-end;
		padding: 40px 20px 26px;
	}

	.bm-hero__content {
		max-width: none;
		width: 100%;
	}

	.bm-hero__kicker {
		font-size: 10px;
		margin-bottom: 10px;
	}

	.bm-hero__title {
		font-size: 32px;
		line-height: 1.04;
		margin-bottom: 10px;
	}

	.bm-hero__body {
		font-size: 13.5px;
		line-height: 1.55;
		margin-bottom: 18px;
	}

	.bm-hero__ctas {
		gap: 10px;
	}

	.bm-hero__cta {
		width: 100%;
		height: 48px;
		font-size: 14.5px;
	}

	/* Trust ticker */

	.bm-trustbar__inner {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding: 12px var(--bm-gutter);
		scrollbar-width: none;
	}

	.bm-trustbar__inner::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.bm-trustbar__item {
		flex: none;
		gap: 7px;
		padding: 7px 13px;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 20px;
	}

	/* The pill drops the chip and keeps the bare check mark. */
	.bm-trustbar__check {
		width: auto;
		height: auto;
		background: none;
		border-radius: 0;
	}

	.bm-trustbar__label {
		font-size: 11px;
		white-space: nowrap;
	}

	/* Categories */

	.bm-cats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.bm-cats__card {
		min-height: 96px;
		border-radius: var(--bm-r-2xl);
		padding: 14px;
	}

	.bm-cats__glow {
		background: radial-gradient(circle at 72% 26%, rgba(18, 175, 203, 0.4), rgba(12, 34, 48, 0) 60%);
	}

	.bm-cats__dots {
		background-size: 20px 20px;
	}

	.bm-cats__name {
		font-size: 15px;
		margin-bottom: 2px;
	}

	.bm-cats__count {
		font-size: 11px;
	}

	/* Carousel arrows are desktop-only; touch uses native swipe/scroll. */

	.bm-carousel__nav {
		display: none;
	}

	/* Bestsellers — horizontal rail bleeding to the screen edge, ~1.3-card peek. */

	.bm-best__track {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		min-width: 0;
		margin-left: calc(var(--bm-gutter) * -1);
		margin-right: calc(var(--bm-gutter) * -1);
		padding: 4px var(--bm-gutter) 12px;
		-webkit-overflow-scrolling: touch;
	}

	.bm-best__track::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.bm-best__track > .bm-best__card {
		width: min(70vw, 252px);
		scroll-snap-align: start;
	}

	.bm-best__card {
		flex: none;
		box-shadow: var(--bm-shadow-mobile-card);
	}

	.bm-best__media .bm-purity-badge {
		top: 10px;
		left: 10px;
		font-size: 9px;
		padding: 3px 8px;
	}

	.bm-best__body {
		padding: 12px;
	}

	.bm-best__name {
		font-size: 14.5px;
	}

	.bm-best__meta {
		font-size: 10px;
	}

	.bm-best__price {
		font-size: 16px;
	}

	.bm-best__view {
		width: 30px;
		height: 30px;
		padding: 0;
		border-radius: 8px;
		justify-content: center;
	}

	.bm-best__view-label {
		display: none;
	}

	/* Vials — two columns on phones. */

	.bm-vials__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* Science band */

	.bm-science {
		margin-top: 24px;
	}

	.bm-science__inner {
		padding-top: 26px;
		padding-bottom: 26px;
	}

	.bm-science__title {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.bm-science__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.bm-science__item {
		display: flex;
		align-items: flex-start;
		gap: 14px;
	}

	.bm-science__stat {
		font-size: 24px;
		min-width: 56px;
		margin-bottom: 0;
		flex: none;
	}

	.bm-science__item-title {
		font-size: 14.5px;
	}

	.bm-science__item-text {
		font-size: 12.5px;
	}

	/* How it works */

	.bm-steps__head {
		text-align: left;
		margin-bottom: 16px;
	}

	.bm-steps__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.bm-steps__card {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 16px;
		border-radius: var(--bm-r-2xl);
	}

	.bm-steps__num {
		width: 38px;
		height: 38px;
		border-radius: var(--bm-r-lg);
		font-size: 15px;
		margin-bottom: 0;
	}

	.bm-steps__title {
		font-size: 15px;
	}

	.bm-steps__text {
		font-size: 12.5px;
	}

	/* Featured spotlight */

	.bm-spot {
		margin-top: 24px;
		border-radius: var(--bm-r-4xl);
	}

	.bm-spot__media {
		flex: 1 1 100%;
		min-height: 0;
		height: 200px;
	}

	.bm-spot__badge {
		display: block;
		position: absolute;
		top: 12px;
		left: 12px;
		z-index: 2;
		font-family: var(--bm-mono);
		font-size: 9px;
		letter-spacing: 0.08em;
		background: var(--bm-ink);
		color: #fff;
		padding: 4px 9px;
		border-radius: var(--bm-r-sm);
	}

	.bm-spot__panel {
		flex: 1 1 100%;
		padding: 18px;
	}

	.bm-spot__kicker {
		display: none;
	}

	.bm-spot__title {
		font-size: 24px;
	}

	.bm-spot__text {
		font-size: 13px;
		margin-bottom: 18px;
	}

	.bm-spot__row {
		justify-content: space-between;
		gap: 12px;
	}

	/* The mobile layout leads with the price, then the action. */
	.bm-spot__price {
		order: -1;
		font-size: 18px;
	}

	.bm-spot__cta {
		height: 44px;
		padding: 0 20px;
		font-size: 14px;
	}

	/* Newsletter */

	.bm-news {
		padding-top: 24px;
		padding-bottom: 30px;
	}

	.bm-news__card {
		border-radius: var(--bm-r-4xl);
		padding: 20px;
		gap: 16px;
	}

	.bm-news__title {
		font-size: 18px;
	}

	.bm-news__text {
		font-size: 12.5px;
	}

	.bm-news__card .bm-news__input,
	.bm-news__card .bm-news__submit {
		height: 46px;
		border-radius: var(--bm-r-lg);
	}

	.bm-news__card .bm-news__submit {
		padding: 0 20px;
	}
}

/* Buy One Get One hero (hero_banner switch): live HTML over a text-free plate. */
.bm-bogo-hero {
	position: relative;
	overflow: hidden;
	background: #070a08;
	color: #fff;
}
.bm-bogo-hero__plate img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 50%;
}
.bm-bogo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(6, 9, 7, .88) 0%, rgba(6, 9, 7, .55) 40%, rgba(6, 9, 7, 0) 62%);
	pointer-events: none;
}
.bm-bogo-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: clamp(540px, 37.5vw, 720px);
	padding-top: 56px;
	padding-bottom: 56px;
}
.bm-bogo-hero__copy {
	max-width: 560px;
}
.bm-bogo-hero__title {
	margin: 0 0 24px;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	font-size: clamp(48px, 5vw, 78px);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.045em;
	color: #fff;
}
.bm-bogo-hero__title span {
	display: block;
}
.bm-bogo-hero__muted {
	background: linear-gradient(100deg, #9fb3bd 0%, #5f7480 70%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: .08em;
}
.bm-bogo-hero__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.bm-bogo-hero__tiles li {
	min-width: 104px;
	margin: 0;
	padding: 13px 14px 11px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	background: rgba(255, 255, 255, .045);
	text-align: center;
}
.bm-bogo-hero__tiles b {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
}
.bm-bogo-hero__tiles small {
	display: block;
	margin-top: 7px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8ea4ae;
}
.bm-bogo-hero__body {
	max-width: 460px;
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.55;
	color: #b9c8cf;
}
.bm-bogo-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.bm-bogo-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: #fff;
	color: #071016;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease;
}
.bm-bogo-hero__btn:hover,
.bm-bogo-hero__btn:focus-visible {
	background: #dff3f7;
	color: #071016;
}
.bm-bogo-hero__btn span {
	font-size: 1.15em;
}
.bm-bogo-hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 20px;
	border: 1px dashed rgba(255, 255, 255, .4);
	border-radius: 10px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #e4eef2;
}
.bm-bogo-hero__tag span {
	color: #22c3d8;
}
.bm-bogo-hero__fine {
	margin: 20px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #7f949d;
}
.bm-bogo-hero__fine a {
	color: #dfe9ee;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tablet + phone: copy first, vials below. */
@media (max-width: 1023px) {
	.bm-bogo-hero {
		display: flex;
		flex-direction: column;
		background: #171f17;
	}
	.bm-bogo-hero::before {
		display: none;
	}
	.bm-bogo-hero__inner {
		order: 1;
		min-height: 0;
		padding-top: 40px;
		padding-bottom: 0;
	}
	.bm-bogo-hero__plate {
		order: 2;
		display: block;
		margin-top: 18px;
	}
	.bm-bogo-hero__plate img {
		position: static;
		display: block;
		width: 100%;
		max-width: 620px;
		height: auto;
		margin: 0 auto;
	}
	.bm-bogo-hero__title {
		font-size: clamp(44px, 12.5vw, 64px);
		margin-bottom: 18px;
	}
	.bm-bogo-hero__tiles li {
		flex: 1 1 0;
		min-width: 0;
		padding: 11px 6px 9px;
	}
	.bm-bogo-hero__tiles b {
		font-size: 21px;
	}
	.bm-bogo-hero__tiles small {
		font-size: 9px;
		letter-spacing: .1em;
	}
	.bm-bogo-hero__body {
		font-size: 15px;
		margin-bottom: 20px;
	}
	.bm-bogo-hero__btn,
	.bm-bogo-hero__tag {
		height: 46px;
	}
}
@media (max-width: 420px) {
	.bm-bogo-hero__btn,
	.bm-bogo-hero__tag {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* Phones + tablets: simple stacked hero — vials, headline, short copy, one button. */
@media (max-width: 1023px) {
	.bm-bogo-hero__plate {
		order: 1;
		margin-top: 0;
	}
	.bm-bogo-hero__inner {
		order: 2;
		justify-content: center;
		padding-top: 6px;
		padding-bottom: 44px;
	}
	.bm-bogo-hero__copy {
		max-width: 520px;
		margin: 0 auto;
		text-align: center;
	}
	.bm-bogo-hero__title {
		font-size: clamp(40px, 11vw, 60px);
		margin-bottom: 16px;
	}
	.bm-bogo-hero__body {
		max-width: 400px;
		margin: 0 auto 26px;
		font-size: 15px;
	}
	.bm-bogo-hero__tiles,
	.bm-bogo-hero__tag,
	.bm-bogo-hero__fine,
	.bm-bogo-hero .bm-fx-herobadge {
		display: none;
	}
	.bm-bogo-hero__ctas {
		justify-content: center;
	}
	.bm-bogo-hero__btn,
	.bm-bogo-hero__btn:hover {
		flex: 0 0 auto;
		justify-content: center;
		height: 52px;
		padding: 0 30px;
	}
}

/* Light hero (bm-bogo-hero--light): clean studio plate with the vials on a shelf, dark ink. */
.bm-bogo-hero--light {
	background: #c9dbe7;
	color: #0a2238;
}
.bm-bogo-hero--light::before {
	background: linear-gradient(90deg, rgba(226, 238, 246, .6) 0%, rgba(226, 238, 246, .3) 36%, rgba(226, 238, 246, 0) 54%);
}
.bm-bogo-hero--light .bm-bogo-hero__plate img {
	object-position: 50% 55%;
}
.bm-bogo-hero--light .bm-bogo-hero__title {
	color: #0a2238;
}
/* Desktop: the copy stays on the wall, above the shelf line (88% down the photo). */
@media (min-width: 1024px) {
	.bm-bogo-hero--light .bm-bogo-hero__inner {
		min-height: clamp(540px, 37.5vw, 820px);
		padding-bottom: 100px;
	}
	.bm-bogo-hero--light .bm-bogo-hero__title {
		font-size: clamp(48px, 5vw, 74px);
	}
	.bm-bogo-hero--light .bm-bogo-hero__title span {
		width: max-content;
		white-space: nowrap;
	}
}
.bm-bogo-hero--light .bm-bogo-hero__muted {
	background-image: linear-gradient(100deg, #1668b0 0%, #0f9bb5 80%);
}
.bm-bogo-hero--light .bm-bogo-hero__tiles li {
	border-color: rgba(10, 34, 56, .14);
	background: rgba(255, 255, 255, .6);
}
.bm-bogo-hero--light .bm-bogo-hero__tiles b {
	color: #0a2238;
}
.bm-bogo-hero--light .bm-bogo-hero__tiles small {
	color: #3f566b;
}
.bm-bogo-hero--light .bm-bogo-hero__body {
	color: #2a4257;
}
.bm-bogo-hero--light .bm-bogo-hero__btn {
	background: #0a2238;
	color: #fff;
}
.bm-bogo-hero--light .bm-bogo-hero__btn:hover,
.bm-bogo-hero--light .bm-bogo-hero__btn:focus-visible {
	background: #14395a;
	color: #fff;
}
.bm-bogo-hero--light .bm-bogo-hero__tag {
	border-color: rgba(10, 34, 56, .42);
	color: #0a2238;
}
.bm-bogo-hero--light .bm-bogo-hero__tag span {
	color: #0b7f95;
}
.bm-bogo-hero--light .bm-bogo-hero__fine {
	color: #3f566b;
}
.bm-bogo-hero--light .bm-bogo-hero__fine a {
	color: #0a2238;
}
/* Narrow desktops: keep the vials clear of the copy and inside the frame. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.bm-bogo-hero--light .bm-bogo-hero__plate img {
		object-position: 62.5% 55%;
	}
	.bm-bogo-hero--light .bm-bogo-hero__copy {
		max-width: 430px;
	}
}
/* Smallest desktops: the photo sits a little lower and smaller, its top edge melting into the wall colour. */
@media (min-width: 1024px) and (max-width: 1099px) {
	.bm-bogo-hero--light .bm-bogo-hero__plate img {
		top: 14%;
		height: 86%;
		object-position: 57% 100%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
		mask-image: linear-gradient(180deg, transparent 0, #000 12%);
	}
}
/* Phones + tablets: the copy sits on the shelf colour, so the photo runs straight into it. */
@media (max-width: 1023px) {
	.bm-bogo-hero--light {
		background: #a1c9e6;
	}
	.bm-bogo-hero--light .bm-bogo-hero__inner {
		padding-top: 26px;
	}
	.bm-bogo-hero--light .bm-bogo-hero__plate img {
		width: 100%;
		max-width: none;
	}
}
/* Tablets: the wide photo, full width, so the wall and shelf run edge to edge. */
@media (min-width: 621px) and (max-width: 1023px) {
	.bm-bogo-hero--light .bm-bogo-hero__plate img {
		height: clamp(380px, 54vw, 540px);
		object-fit: cover;
		object-position: 100% 50%;
	}
}