@charset "UTF-8";
/*
 * BuyCloudExpress :: Signal Field
 * Part 2 of 2: page-level compositions.
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.bce-hero {
	position: relative;
	padding-top: clamp(46px, 6vw, 84px);
	padding-bottom: clamp(70px, 8vw, 120px);
	overflow: hidden;
}

/* The aurora field: soft washes only, no hard gradient banding, no grid lines.
   It drifts very slowly, which reads as depth rather than as motion. */
.bce-hero__field {
	position: absolute;
	inset: -28% -14% auto -14%;
	height: 168%;
	pointer-events: none;
	background: var(--bce-aurora);
	z-index: 0;
	animation: bce-drift 34s ease-in-out infinite alternate;
}

/* A single luminous seam where the hero meets the page below it. */
.bce-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.32) 30%, rgba(124, 107, 255, 0.3) 70%, transparent);
	pointer-events: none;
}

@keyframes bce-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(-2.5%, 1.5%, 0) scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bce-hero__field {
		animation: none;
	}
}

.bce-hero > .bce-wrap {
	position: relative;
	z-index: 1;
}

.bce-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.bce-hero h1 {
	/* Sized to hold the headline on two lines inside the 7-column hero column. */
	font-size: clamp(2.4rem, 1.3rem + 3.5vw, 4rem);
	line-height: var(--lh-display);
	letter-spacing: -0.032em;
	margin-bottom: var(--s-5);
	max-width: 17ch;
}

.bce-hero h1 span {
	color: var(--bce-accent);
}

.bce-hero__lede {
	font-size: clamp(1.06rem, 1rem + 0.42vw, 1.28rem);
	color: var(--bce-muted);
	max-width: 52ch;
	margin-bottom: var(--s-6);
}

.bce-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

/* The rail is real catalogue data, and it breaks the section boundary below. */
.bce-rail {
	position: relative;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge-hot);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	padding: var(--s-4);
	box-shadow: var(--shadow-float), var(--glow-soft);
	margin-bottom: clamp(-96px, -7vw, -40px);
}

.bce-rail__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3) var(--s-4);
}

.bce-rail__head h2 {
	font-size: var(--fs-sm);
	font-family: var(--bce-font-mono);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bce-muted);
	margin: 0;
}

.bce-rail__head a {
	font-size: var(--fs-xs);
	color: var(--bce-accent);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.bce-rail__list {
	display: grid;
	gap: 2px;
}

.bce-rail__item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 10px var(--s-3);
	border-radius: var(--r-sm);
	text-decoration: none;
	color: var(--bce-ink);
	transition: background-color var(--dur) var(--ease);
}

.bce-rail__item:hover {
	background: color-mix(in srgb, var(--bce-hue) 12%, var(--bce-elevated));
	color: var(--bce-ink);
}

.bce-rail__mark {
	width: 32px;
	height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 9px;
	color: var(--bce-hue);
	background: color-mix(in srgb, var(--bce-hue) 13%, transparent);
	border: 1px solid color-mix(in srgb, var(--bce-hue) 26%, transparent);
}

.bce-rail__mark svg {
	width: 18px;
	height: 18px;
}

.bce-rail__item > span:not([class]) {
	min-width: 0;
	flex: 1;
}

.bce-rail__name {
	display: block;
	font-weight: 600;
	font-size: var(--fs-sm);
	line-height: 1.35;
	min-width: 0;
}

.bce-rail__configs {
	display: block;
	font-family: var(--bce-font-mono);
	font-size: 11.5px;
	color: var(--bce-muted);
	line-height: 1.4;
}

.bce-rail__price {
	margin-left: auto;
	font-family: var(--bce-font-mono);
	font-size: var(--fs-sm);
	color: var(--bce-ink);
	white-space: nowrap;
}

/* Hero collapse: the split stacks at 940px, rail first is not wanted so it stays second. */
@media (max-width: 939px) {
	.bce-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-7);
	}

	.bce-hero h1 {
		max-width: 18ch;
	}

	.bce-rail {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   2. Catalogue grid
   ========================================================================== */

.bce-catalogue {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-4);
}

/* Catalogue collapse: 4 up, 3 at 1120px, 2 at 860px, 1 at 520px. */
@media (max-width: 1120px) {
	.bce-catalogue {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.bce-catalogue {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.bce-catalogue {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bce-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	/* Gradient hairline: the stroke carries cyan and violet without either
	   becoming a fill, and lifts into the provider's own hue on hover. */
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	padding: 0 var(--s-5) var(--s-4);
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--dur) var(--ease), background-image var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

/* Media band. Full-bleed to the card edges, with the mark overlapping its
   lower edge so the two read as one lockup rather than two stacked blocks. */
.bce-card__media {
	display: block;
	position: relative;
	margin: 0 calc(var(--s-5) * -1) 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bce-elevated);
}

.bce-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.bce-card:hover .bce-card__media img {
	transform: scale(1.045);
}

/* Fade the band into the card body so there is no hard seam. */
.bce-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 58%;
	background: linear-gradient(to bottom, transparent, var(--bce-surface));
	pointer-events: none;
	transition: background var(--dur) var(--ease);
}

.bce-card:hover .bce-card__media::after {
	background: linear-gradient(to bottom, transparent, var(--bce-surface-2));
}

/* Cards without a media band keep their original top padding. */
.bce-card:not(:has(.bce-card__media)) {
	padding-top: var(--s-5);
}

/* The provider hue enters as a top edge bar and a hover wash, never as a ground. */
.bce-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--bce-hue), color-mix(in srgb, var(--bce-hue) 40%, transparent));
	opacity: 0.9;
	transition: opacity var(--dur) var(--ease);
}

.bce-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(120% 82% at 50% 0%, color-mix(in srgb, var(--bce-hue) 16%, transparent) 0%, transparent 66%);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.bce-card:hover,
.bce-card:focus-within {
	transform: translateY(-5px);
	background-image: linear-gradient(var(--bce-surface-2), var(--bce-surface-2)),
		linear-gradient(155deg, color-mix(in srgb, var(--bce-hue) 72%, transparent),
			rgba(124, 107, 255, 0.34) 56%, rgba(0, 229, 160, 0.3));
	box-shadow: 0 24px 54px -28px color-mix(in srgb, var(--bce-hue) 78%, transparent);
}

.bce-card:hover::before,
.bce-card:focus-within::before {
	opacity: 1;
}

.bce-card:hover::after,
.bce-card:focus-within::after {
	opacity: 1;
}

.bce-card__mark {
	position: relative;
	z-index: 1;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	color: var(--bce-hue);
	background: radial-gradient(120% 120% at 30% 10%, color-mix(in srgb, var(--bce-hue) 30%, var(--bce-surface)), color-mix(in srgb, var(--bce-hue) 12%, var(--bce-surface)));
	border: 1px solid color-mix(in srgb, var(--bce-hue) 34%, transparent);
	margin-bottom: var(--s-4);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Where a media band is present the mark rides up over its lower edge. */
.bce-card__media + .bce-card__mark {
	margin-top: -30px;
}

.bce-card:hover .bce-card__mark {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--bce-hue) 85%, transparent);
}

.bce-card__mark svg {
	width: 27px;
	height: 27px;
}

.bce-card__mark svg {
	width: 25px;
	height: 25px;
}

.bce-card h3 {
	font-size: 1.16rem;
	margin-bottom: 6px;
	letter-spacing: -0.02em;
}

.bce-card h3 a {
	text-decoration: none;
	color: inherit;
}

/* One stretched link makes the whole card clickable without nesting anchors. */
.bce-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bce-card h3 a:hover {
	color: var(--bce-ink);
}

.bce-card__best {
	font-family: var(--bce-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.03em;
	color: var(--bce-hue);
	margin-bottom: var(--s-3);
}

.bce-card__summary {
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	line-height: 1.58;
	margin-bottom: var(--s-5);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bce-card__foot {
	margin-top: auto;
	padding-top: var(--s-4);
	border-top: 1px solid var(--bce-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.bce-card__configs {
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	color: var(--bce-muted);
}

.bce-card__price {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-family: var(--bce-font-mono);
	font-size: 1.06rem;
	color: var(--bce-ember);
	white-space: nowrap;
	letter-spacing: -0.01em;
}

.bce-card__price span {
	color: var(--bce-muted);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bce-card__price .woocommerce-Price-amount {
	color: inherit;
}

/* ==========================================================================
   3. Comparison table
   ========================================================================== */

.bce-tablewrap {
	overflow-x: auto;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	-webkit-overflow-scrolling: touch;
}

.bce-table {
	width: 100%;
	min-width: 780px;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.bce-table th,
.bce-table td {
	padding: 15px var(--s-5);
	text-align: left;
	border-bottom: 1px solid var(--bce-line);
	vertical-align: middle;
}

.bce-table thead th {
	font-family: var(--bce-font-mono);
	font-weight: 500;
	font-size: var(--fs-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bce-muted);
	background: var(--bce-elevated);
	white-space: nowrap;
}

.bce-table tbody tr:last-child th,
.bce-table tbody tr:last-child td {
	border-bottom: 0;
}

.bce-table tbody tr {
	transition: background-color var(--dur) var(--ease);
}

.bce-table tbody tr:hover {
	background: color-mix(in srgb, var(--bce-hue) 7%, transparent);
}

.bce-table__provider {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-weight: 600;
	color: var(--bce-ink);
	text-decoration: none;
	white-space: nowrap;
}

.bce-table__provider .bce-rail__mark {
	width: 30px;
	height: 30px;
	border-radius: 9px;
}

.bce-table__provider .bce-rail__mark svg {
	width: 17px;
	height: 17px;
}

.bce-table__num {
	font-family: var(--bce-font-mono);
	white-space: nowrap;
}

.bce-table__hint {
	margin: var(--s-3) 0 0;
	font-size: var(--fs-xs);
	color: var(--bce-muted);
}

/* ==========================================================================
   4. Process
   ========================================================================== */

.bce-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-5);
	position: relative;
}

.bce-steps::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 6%;
	right: 6%;
	height: 1px;
	background: linear-gradient(90deg, var(--bce-line), var(--bce-line-strong), var(--bce-line));
}

.bce-step {
	position: relative;
}

.bce-step__dot {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--r-pill);
	background: radial-gradient(120% 120% at 30% 15%, rgba(0, 229, 160, 0.2), var(--bce-bg-lift));
	border: 1px solid rgba(0, 229, 160, 0.45);
	color: var(--bce-accent);
	font-family: var(--bce-font-mono);
	font-size: var(--fs-sm);
	margin-bottom: var(--s-4);
	position: relative;
	z-index: 1;
	box-shadow: var(--glow-accent);
}

.bce-step h3 {
	font-size: 1.06rem;
	margin-bottom: 8px;
}

.bce-step p {
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	margin: 0;
}

/* Steps collapse: 4 across to 2 at 860px, 1 at 560px; the connector is dropped. */
@media (max-width: 860px) {
	.bce-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-6) var(--s-5);
	}

	.bce-steps::before {
		display: none;
	}
}

@media (max-width: 560px) {
	.bce-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   5. Use-case bento
   ========================================================================== */

.bce-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--s-4);
}

.bce-bento__cell {
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 210px;
	position: relative;
	overflow: hidden;
	transition: background-image var(--dur) var(--ease);
}

.bce-bento__cell:hover {
	background-image: linear-gradient(var(--bce-surface-2), var(--bce-surface-2)), var(--bce-edge-hot);
}

/* Cell 1 is the tall feature and carries the aurora; the rest sit plainer so
   the grid keeps a rhythm rather than glowing uniformly. */
.bce-bento__cell--lead {
	grid-column: span 3;
	grid-row: span 2;
	justify-content: space-between;
}

.bce-bento__cell--lead::before {
	content: "";
	position: absolute;
	inset: -30% -20% auto -20%;
	height: 180%;
	background: var(--bce-aurora);
	pointer-events: none;
}

.bce-bento__cell--lead > * {
	position: relative;
	z-index: 1;
}

/* The lead cell spans two rows; without this its lower half sits empty. */
.bce-bento__visual {
	margin: var(--s-5) 0 0;
	border-radius: var(--r-media);
	overflow: hidden;
	flex: 1;
	min-height: 180px;
	border: 1px solid rgba(34, 211, 238, 0.18);
}

.bce-bento__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.bce-bento__visual {
		min-height: 150px;
		max-height: 220px;
	}
}

.bce-bento__cell--wide {
	grid-column: span 3;
}

.bce-bento__cell--half {
	grid-column: span 3;
}

.bce-bento__cell h3 {
	font-size: 1.16rem;
	margin-bottom: 10px;
}

.bce-bento__cell--lead h3 {
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
}

.bce-bento__cell p {
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	margin: 0;
	max-width: 46ch;
}

.bce-bento__cell ul {
	list-style: none;
	margin: var(--s-4) 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.bce-bento__cell li {
	position: relative;
	padding-left: 20px;
	color: var(--bce-muted);
	font-size: var(--fs-sm);
}

.bce-bento__cell li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--bce-accent);
}

/* Bento collapse: 6-col to 3-col at 900px (cells go full width), 1 stack at 620px. */
@media (max-width: 900px) {
	.bce-bento {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bce-bento__cell--lead,
	.bce-bento__cell--wide,
	.bce-bento__cell--half {
		grid-column: span 3;
		grid-row: auto;
	}
}

@media (max-width: 620px) {
	.bce-bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.bce-bento__cell--lead,
	.bce-bento__cell--wide,
	.bce-bento__cell--half {
		grid-column: span 1;
	}

	.bce-bento__cell {
		padding: var(--s-5);
		min-height: 0;
	}
}

/* ==========================================================================
   6. Statement split
   ========================================================================== */

.bce-statement {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

/* The left column carries the heading, a short lede and a visual, so it is a
   composed column rather than a heading floating in empty space. */
.bce-statement__aside {
	position: sticky;
	top: calc(var(--header-total) + 32px);
}

.bce-statement h2 {
	letter-spacing: -0.028em;
	margin-bottom: var(--s-4);
}

.bce-statement__lede {
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	max-width: 34ch;
	margin-bottom: var(--s-6);
}

.bce-statement__visual {
	margin: 0;
	border-radius: var(--r-media);
	overflow: hidden;
	border: 1px solid transparent;
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	aspect-ratio: 4 / 3;
	box-shadow: var(--glow-soft);
}

.bce-statement__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bce-statement__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bce-line);
}

.bce-statement__list li {
	padding: var(--s-5) 0;
	border-bottom: 1px solid var(--bce-line);
}

.bce-statement__list h3 {
	font-size: 1.09rem;
	margin-bottom: 6px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.bce-statement__list h3::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 2px;
	background: var(--bce-accent);
	transform: translateY(-2px);
}

.bce-statement__list p {
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	margin: 0;
	padding-left: 17px;
}

/* Statement collapse: stacks at 860px and the heading stops sticking. */
@media (max-width: 860px) {
	.bce-statement {
		grid-template-columns: minmax(0, 1fr);
	}

	.bce-statement__aside {
		position: static;
	}

	.bce-statement__visual {
		max-width: 460px;
	}
}

/* ==========================================================================
   7. Guides preview and archive
   ========================================================================== */

.bce-guides {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.bce-guides__list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--bce-line);
}

.bce-guides__row {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--bce-line);
	text-decoration: none;
	color: var(--bce-ink);
	transition: padding-left var(--dur) var(--ease);
}

.bce-guides__row:hover {
	padding-left: var(--s-3);
	color: var(--bce-ink);
}

.bce-guides__row h3 {
	font-size: 1.02rem;
	font-weight: 500;
	margin: 0;
	flex: 1;
	min-width: 0;
}

.bce-guides__row:hover h3 {
	color: var(--bce-accent);
}

.bce-guides__tag {
	font-family: var(--bce-font-mono);
	font-size: 11.5px;
	color: var(--bce-hue);
	white-space: nowrap;
	flex: none;
}

/* Guides collapse: stacks at 900px, feature card first. */
@media (max-width: 900px) {
	.bce-guides {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bce-postcard {
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	overflow: hidden;
	text-decoration: none;
	color: var(--bce-ink);
	height: 100%;
	transition: transform var(--dur) var(--ease), background-image var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.bce-postcard:hover {
	transform: translateY(-5px);
	color: var(--bce-ink);
	background-image: linear-gradient(var(--bce-surface-2), var(--bce-surface-2)),
		linear-gradient(155deg, color-mix(in srgb, var(--bce-hue) 66%, transparent), rgba(124, 107, 255, 0.32) 58%, rgba(0, 229, 160, 0.28));
	box-shadow: 0 24px 54px -30px color-mix(in srgb, var(--bce-hue) 76%, transparent);
}

.bce-postcard__media {
	aspect-ratio: 16 / 9;
	background: var(--bce-elevated);
	overflow: hidden;
	position: relative;
}

.bce-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.bce-postcard:hover .bce-postcard__media img {
	transform: scale(1.035);
}

.bce-postcard__body {
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
}

.bce-postcard__body h2,
.bce-postcard__body h3 {
	font-size: 1.14rem;
	margin: 0;
	letter-spacing: -0.018em;
	line-height: 1.28;
}

.bce-postcard:hover .bce-postcard__body h2,
.bce-postcard:hover .bce-postcard__body h3 {
	color: var(--bce-accent);
}

.bce-postcard__body p {
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bce-postcard__meta {
	margin-top: auto;
	padding-top: var(--s-3);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--bce-font-mono);
	font-size: 11.5px;
	color: var(--bce-muted);
}

.bce-postcard__meta .bce-guides__tag {
	color: var(--bce-hue);
}

.bce-postgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);
}

/* Post grid collapse: 3 up, 2 at 900px, 1 at 560px. */
@media (max-width: 900px) {
	.bce-postgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bce-postgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.bce-faq {
	border-top: 1px solid var(--bce-line);
}

.bce-faq__item {
	border-bottom: 1px solid var(--bce-line);
}

.bce-faq__item summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-5);
	padding: var(--s-5) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--bce-font-heading);
	font-weight: 500;
	font-size: 1.06rem;
	line-height: 1.4;
	color: var(--bce-ink);
	transition: color var(--dur) var(--ease);
}

.bce-faq__item summary::-webkit-details-marker {
	display: none;
}

.bce-faq__item summary:hover {
	color: var(--bce-accent);
}

.bce-faq__sign {
	flex: none;
	width: 22px;
	height: 22px;
	position: relative;
	margin-top: 3px;
	color: var(--bce-accent);
}

.bce-faq__sign::before,
.bce-faq__sign::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.bce-faq__sign::before {
	top: 10px;
	left: 3px;
	width: 16px;
	height: 2px;
}

.bce-faq__sign::after {
	left: 10px;
	top: 3px;
	width: 2px;
	height: 16px;
}

.bce-faq__item[open] .bce-faq__sign::after {
	transform: rotate(90deg);
	opacity: 0;
}

.bce-faq__answer {
	padding: 0 0 var(--s-5);
	max-width: 72ch;
}

.bce-faq__answer p:last-child {
	margin-bottom: 0;
}

.bce-faq__answer p {
	color: var(--bce-muted);
}

/* ==========================================================================
   8b. Support band
   ========================================================================== */

.bce-support-band {
	position: relative;
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
}

/* A wide, very soft band behind the support lockup. Decorative, so it is a
   background rather than an image element. */
.bce-support-band::before {
	content: "";
	position: absolute;
	/* Bleeds vertically only. Extending it horizontally past the band pushed
	   the document wider than the viewport on narrow screens, and the section
	   cannot use overflow:hidden without breaking sticky descendants. */
	inset: -60% 0 -40%;
	background-image: url("../img/atmos-support.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.34;
	pointer-events: none;
	/* Clear through the middle so the atmosphere sits around the lockup rather
	   than directly behind the icon and headline. */
	mask-image: radial-gradient(closest-side, transparent 22%, #000 62%, transparent 100%);
	-webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 62%, transparent 100%);
}

.bce-support-band > * {
	position: relative;
	z-index: 1;
}

.bce-support-band__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bce-cyan);
	margin: 0 0 var(--s-3);
}

.bce-support-band__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 auto var(--s-5);
	border-radius: 18px;
	color: var(--bce-accent);
	background: radial-gradient(120% 120% at 30% 10%, rgba(0, 229, 160, 0.22), rgba(34, 211, 238, 0.1));
	border: 1px solid rgba(0, 229, 160, 0.3);
	box-shadow: var(--glow-accent);
}

.bce-support-band h2 {
	margin-bottom: var(--s-3);
}

.bce-support-band p {
	color: var(--bce-muted);
	margin-bottom: var(--s-6);
	font-size: 1.06rem;
}

.bce-support-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: center;
}

/* ==========================================================================
   8c. Support channels (contact page)
   ========================================================================== */

.bce-channels {
	margin: var(--s-8) 0 0;
}

.bce-channels h2 {
	font-size: clamp(1.42rem, 1.2rem + 0.9vw, 1.85rem);
	margin-bottom: var(--s-5);
}

.bce-channels__grid {
	display: grid;
	gap: var(--s-3);
}

.bce-channel {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4);
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	text-decoration: none;
	color: var(--bce-ink);
	transition: transform var(--dur) var(--ease), background-image var(--dur) var(--ease);
}

.bce-channel:hover {
	color: var(--bce-ink);
	transform: translateX(3px);
	background-image: linear-gradient(var(--bce-elevated), var(--bce-elevated)), var(--bce-edge-hot);
}

.bce-channel__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 13px;
	color: var(--bce-cyan);
	background: radial-gradient(120% 120% at 30% 15%, rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.07));
	border: 1px solid rgba(34, 211, 238, 0.26);
}

/* The configured support channel is the one action here, so it takes mint. */
.bce-channel--primary .bce-channel__icon {
	color: var(--bce-accent);
	background: radial-gradient(120% 120% at 30% 15%, rgba(0, 229, 160, 0.24), rgba(0, 229, 160, 0.07));
	border-color: rgba(0, 229, 160, 0.32);
}

.bce-channel__body strong {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.bce-channel__body small {
	display: block;
	font-size: var(--fs-xs);
	color: var(--bce-muted);
	line-height: 1.5;
	margin-top: 2px;
}

/* ==========================================================================
   9. Closing call to action
   ========================================================================== */

.bce-cta {
	position: relative;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	padding: clamp(36px, 5vw, 64px);
	overflow: hidden;
	background-image:
		linear-gradient(var(--bce-surface), var(--bce-surface)),
		var(--bce-edge-hot);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: var(--glow-soft);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s-6);
	align-items: center;
}

/* The aurora sits inside the panel, under the copy. */
.bce-cta::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 200%;
	background: var(--bce-aurora);
	pointer-events: none;
}

.bce-cta > * {
	position: relative;
	z-index: 1;
}

.bce-cta h2 {
	margin-bottom: 10px;
	max-width: 20ch;
}

.bce-cta p {
	color: var(--bce-muted);
	margin: 0;
	max-width: 58ch;
}

.bce-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

/* CTA collapse: the action column drops below the copy at 780px. */
@media (max-width: 780px) {
	.bce-cta {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   10. Page and article shells
   ========================================================================== */

.bce-pagehead {
	padding-top: clamp(40px, 5vw, 70px);
	padding-bottom: clamp(28px, 3.5vw, 44px);
	position: relative;
	overflow: hidden;
}

.bce-pagehead__field {
	position: absolute;
	inset: -70% -14% auto -14%;
	height: 210%;
	pointer-events: none;
	z-index: 0;
	background: var(--bce-aurora);
}

.bce-pagehead::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.26) 30%, rgba(124, 107, 255, 0.24) 70%, transparent);
	pointer-events: none;
}

.bce-pagehead > .bce-wrap {
	position: relative;
	z-index: 1;
}

.bce-pagehead h1 {
	max-width: 22ch;
	margin-bottom: var(--s-4);
}

.bce-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	color: var(--bce-muted);
	margin-bottom: var(--s-5);
	padding: 0;
	list-style: none;
}

.bce-crumbs a {
	color: var(--bce-muted);
	text-decoration: none;
}

.bce-crumbs a:hover {
	color: var(--bce-accent);
}

.bce-crumbs__sep {
	opacity: 0.5;
}

.bce-crumbs [aria-current="page"] {
	color: var(--bce-ink);
}

/* Prose. One 68ch measure, offset left of centre by the contents rail. */
.bce-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: clamp(32px, 5vw, 76px);
	align-items: start;
	padding-bottom: var(--section-y);
}

.bce-prose {
	max-width: 68ch;
	font-size: 1.0625rem;
}

.bce-prose > *:first-child {
	margin-top: 0;
}

.bce-prose h2 {
	font-size: clamp(1.42rem, 1.2rem + 0.9vw, 1.85rem);
	margin-top: var(--s-8);
	margin-bottom: var(--s-4);
	scroll-margin-top: calc(var(--header-total) + 24px);
}

.bce-prose h2:first-child {
	margin-top: 0;
}

.bce-prose h3 {
	font-size: 1.18rem;
	margin-top: var(--s-6);
	margin-bottom: var(--s-3);
	scroll-margin-top: calc(var(--header-total) + 24px);
}

.bce-prose h4 {
	font-size: 1.03rem;
	margin-top: var(--s-5);
	margin-bottom: 10px;
}

.bce-prose p {
	color: color-mix(in srgb, var(--bce-ink) 88%, var(--bce-muted));
	line-height: 1.72;
}

.bce-prose ul,
.bce-prose ol {
	margin: 0 0 var(--s-4);
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.bce-prose ol {
	counter-reset: bce-ol;
}

.bce-prose li {
	position: relative;
	padding-left: 26px;
	color: color-mix(in srgb, var(--bce-ink) 88%, var(--bce-muted));
	line-height: 1.65;
}

.bce-prose ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--bce-accent);
}

.bce-prose ol > li {
	counter-increment: bce-ol;
}

.bce-prose ol > li::before {
	content: counter(bce-ol);
	position: absolute;
	left: 0;
	top: 1px;
	font-family: var(--bce-font-mono);
	font-size: 0.82em;
	color: var(--bce-accent);
}

.bce-prose img {
	border-radius: var(--r-media);
	margin: var(--s-6) 0;
}

.bce-prose figure {
	margin: var(--s-6) 0;
}

.bce-prose figcaption {
	margin-top: 10px;
	font-size: var(--fs-xs);
	color: var(--bce-muted);
}

.bce-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--s-5) 0;
	font-size: var(--fs-sm);
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.bce-prose table th,
.bce-prose table td {
	padding: 11px var(--s-4);
	border-bottom: 1px solid var(--bce-line);
	text-align: left;
}

.bce-prose table th {
	font-family: var(--bce-font-mono);
	font-weight: 500;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bce-muted);
}

.bce-prose hr {
	margin: var(--s-7) 0;
}

/* Contents rail */
.bce-toc {
	position: sticky;
	top: calc(var(--header-total) + 24px);
	border-left: 1px solid var(--bce-line);
	padding-left: var(--s-5);
	max-height: calc(100vh - var(--header-total) - 48px);
	overflow-y: auto;
}

.bce-toc h2 {
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bce-muted);
	margin-bottom: var(--s-4);
}

.bce-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.bce-toc a {
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	text-decoration: none;
	line-height: 1.4;
	display: block;
	transition: color var(--dur) var(--ease);
}

.bce-toc a:hover,
.bce-toc a.is-active {
	color: var(--bce-accent);
}

/* Prose layout collapse: the contents rail moves above the prose at 1000px. */
@media (max-width: 999px) {
	.bce-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.bce-toc {
		position: static;
		max-height: none;
		border-left: 0;
		border-top: 1px solid var(--bce-line);
		padding-left: 0;
		padding-top: var(--s-5);
		order: -1;
	}

	.bce-toc ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		display: grid;
	}
}

@media (max-width: 560px) {
	.bce-toc ol {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Article meta and hero image */
.bce-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	color: var(--bce-muted);
	margin-bottom: var(--s-5);
}

.bce-article__hero {
	border-radius: var(--r-media);
	overflow: hidden;
	border: 1px solid var(--bce-line);
	margin-bottom: clamp(28px, 4vw, 48px);
	aspect-ratio: 21 / 9;
	background: var(--bce-elevated);
}

.bce-article__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* In-article product offer block */
.bce-offer {
	border: 1px solid color-mix(in srgb, var(--bce-hue) 34%, var(--bce-line));
	border-radius: var(--r-md);
	background:
		radial-gradient(80% 120% at 92% 0%, color-mix(in srgb, var(--bce-hue) 11%, transparent) 0%, transparent 64%),
		var(--bce-surface);
	padding: var(--s-6);
	margin: var(--s-8) 0;
}

.bce-offer__head {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
}

.bce-offer__head .bce-card__mark {
	margin-bottom: 0;
	width: 44px;
	height: 44px;
}

.bce-offer__head h2,
.bce-offer__head h3 {
	margin: 0 0 2px;
	font-size: 1.2rem;
}

.bce-offer__head p {
	margin: 0;
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	color: var(--bce-muted);
}

.bce-offer__rows {
	list-style: none;
	margin: 0 0 var(--s-5);
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--bce-line);
}

.bce-offer__rows li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding: 11px 0;
	border-bottom: 1px solid var(--bce-line);
	font-size: var(--fs-sm);
	color: var(--bce-ink);
	padding-left: 0;
}

.bce-offer__rows li::before {
	display: none;
}

.bce-offer__rows .bce-offer__amount {
	font-family: var(--bce-font-mono);
	color: var(--bce-ink);
	white-space: nowrap;
}

.bce-offer__more {
	font-size: var(--fs-xs);
	color: var(--bce-muted);
	margin: 0 0 var(--s-5);
}

/* ==========================================================================
   11. Product page
   ========================================================================== */

.bce-product {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	padding-bottom: clamp(40px, 5vw, 72px);
}

.bce-product__identity {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
}

.bce-product__identity .bce-card__mark {
	margin-bottom: 0;
	width: 56px;
	height: 56px;
	border-radius: 15px;
}

.bce-product__identity .bce-card__mark svg {
	width: 30px;
	height: 30px;
}

.bce-product__provider {
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--bce-hue);
}

.bce-product__region {
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	color: var(--bce-muted);
}

.bce-product h1 {
	margin-bottom: var(--s-4);
	max-width: 18ch;
}

.bce-product__intro {
	color: var(--bce-muted);
	font-size: 1.09rem;
	max-width: 58ch;
	margin-bottom: var(--s-6);
}

/* Product visual: an original abstract illustration in the provider's hue. It
   is a real element in the flow rather than a background, so it stays visible
   and crawlable. */
.bce-product__visual {
	position: relative;
	margin: 0 0 var(--s-6);
	border: 1px solid transparent;
	border-radius: var(--r-media);
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)),
		linear-gradient(155deg, color-mix(in srgb, var(--bce-hue) 60%, transparent), rgba(124, 107, 255, 0.3) 60%, rgba(28, 49, 56, 0.8));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	box-shadow: 0 26px 60px -34px color-mix(in srgb, var(--bce-hue) 80%, transparent);
}

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

.bce-product__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--bce-line);
	border: 1px solid var(--bce-line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.bce-product__fact {
	background: var(--bce-surface);
	padding: var(--s-4) var(--s-5);
}

.bce-product__fact dt {
	font-family: var(--bce-font-mono);
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bce-muted);
	margin-bottom: 5px;
}

.bce-product__fact dd {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--bce-ink);
}

@media (max-width: 480px) {
	.bce-product__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Purchase panel */
.bce-buy {
	position: sticky;
	top: calc(var(--header-total) + 16px);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background-image: linear-gradient(var(--bce-surface), var(--bce-surface)), var(--bce-edge-hot);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: var(--shadow-float), var(--glow-soft);
	padding: var(--s-5);
	/* WooCommerce's add-to-cart form has to be printed early so its variation
	   scripts bind, but it belongs visually after the choice and the total.
	   Flex order puts it where it reads correctly without moving the markup. */
	display: flex;
	flex-direction: column;
}

.bce-buy__label {
	order: 0;
}

.bce-buy .bce-variants {
	order: 1;
}

.bce-buy .bce-buy__total {
	order: 2;
}

.bce-buy form.cart {
	order: 3;
	margin: 0;
}

.bce-buy .bce-buy__note {
	order: 4;
}

.bce-buy .bce-buy__support {
	order: 5;
}

.bce-buy__label {
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bce-muted);
	margin-bottom: var(--s-4);
}

.bce-variants {
	display: grid;
	gap: var(--s-2);
	max-height: 336px;
	overflow-y: auto;
	margin-bottom: var(--s-5);
	padding-right: 4px;
	overscroll-behavior: contain;
}

.bce-variants::-webkit-scrollbar {
	width: 6px;
}

.bce-variants::-webkit-scrollbar-thumb {
	background: var(--bce-line-strong);
	border-radius: 3px;
}

.bce-variant {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 13px var(--s-4);
	border: 1px solid var(--bce-line);
	border-radius: var(--r-sm);
	background: var(--bce-bg);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
	margin: 0;
	font-weight: 400;
}

.bce-variant:hover {
	border-color: var(--bce-line-strong);
	background: var(--bce-elevated);
}

.bce-variant input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.bce-variant__tick {
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: var(--r-pill);
	border: 1px solid var(--bce-line-strong);
	position: relative;
	transition: border-color var(--dur) var(--ease);
}

.bce-variant__tick::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: var(--r-pill);
	background: var(--bce-accent);
	transform: scale(0);
	transition: transform var(--dur) var(--ease);
}

.bce-variant__name {
	flex: 1;
	min-width: 0;
	font-size: var(--fs-sm);
	line-height: 1.35;
	color: var(--bce-ink);
}

/* Carries a supplied note, such as a price given as a range in the source data. */
.bce-variant__note {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--bce-muted);
}

.bce-variant__price {
	font-family: var(--bce-font-mono);
	font-size: var(--fs-sm);
	color: var(--bce-ink);
	white-space: nowrap;
}

.bce-variant.is-selected {
	border-color: var(--bce-accent);
	background: color-mix(in srgb, var(--bce-accent) 8%, var(--bce-bg));
}

.bce-variant.is-selected .bce-variant__tick {
	border-color: var(--bce-accent);
}

.bce-variant.is-selected .bce-variant__tick::after {
	transform: scale(1);
}

.bce-variant:has(input:focus-visible) {
	outline: 2px solid var(--bce-accent);
	outline-offset: 2px;
}

.bce-variant.is-unavailable {
	opacity: 0.42;
	cursor: not-allowed;
}

.bce-buy__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-4) 0;
	border-top: 1px solid var(--bce-line);
	border-bottom: 1px solid var(--bce-line);
	margin-bottom: var(--s-5);
}

.bce-buy__total dt {
	font-size: var(--fs-sm);
	color: var(--bce-muted);
}

.bce-buy__amount {
	font-family: var(--bce-font-mono);
	font-size: 1.72rem;
	font-weight: 500;
	color: var(--bce-ink);
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.1;
}

.bce-buy__amount .woocommerce-Price-amount {
	color: inherit;
}

.bce-buy__note {
	font-size: var(--fs-xs);
	color: var(--bce-muted);
	margin: var(--s-4) 0 0;
	text-align: center;
}

.bce-buy__support {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--s-4);
	padding-top: var(--s-4);
	border-top: 1px solid var(--bce-line);
	font-size: var(--fs-xs);
	color: var(--bce-muted);
}

.bce-buy__support a {
	color: var(--bce-accent);
	text-decoration: none;
	font-weight: 600;
}

/* Product collapse: the purchase panel moves below the intro at 940px and unsticks. */
@media (max-width: 939px) {
	.bce-product {
		grid-template-columns: minmax(0, 1fr);
	}

	.bce-buy {
		position: static;
	}

	.bce-variants {
		max-height: none;
	}
}

/* WooCommerce hooks we keep but restyle or hide */
.bce-buy .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.bce-buy form.cart .quantity {
	flex: none;
	width: 88px;
	float: none;
	margin: 0;
}

.bce-buy form.cart .quantity input.qty {
	width: 100%;
	height: 100%;
	min-height: 52px;
	padding: 0 6px;
	text-align: center;
	font-family: var(--bce-font-mono);
	font-size: 1rem;
	background: var(--bce-elevated);
	border: 1px solid var(--bce-line-strong);
	border-radius: var(--r-pill);
	color: var(--bce-ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

.bce-buy form.cart .quantity input.qty::-webkit-outer-spin-button,
.bce-buy form.cart .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.bce-buy .woocommerce-variation-price,
.bce-buy .woocommerce-variation-description,
.bce-buy .woocommerce-variation-availability {
	display: none !important;
}

.bce-buy .reset_variations {
	display: none !important;
}

.bce-buy table.variations {
	display: none;
}

.bce-buy .woocommerce-variation-add-to-cart {
	display: block;
}

.bce-buy .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	flex: 1;
	width: auto;
	font-family: var(--bce-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	padding: 17px 28px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	background: var(--bce-accent);
	color: var(--bce-accent-ink);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.bce-buy .single_add_to_cart_button:hover {
	background: var(--bce-accent-dim);
}

.bce-buy .single_add_to_cart_button:active {
	transform: translateY(1px);
}

.bce-buy .single_add_to_cart_button.disabled,
.bce-buy .single_add_to_cart_button[disabled] {
	background: var(--bce-elevated);
	color: var(--bce-muted);
	cursor: not-allowed;
}

/* Related products */
.bce-related {
	padding-top: var(--section-y);
	border-top: 1px solid var(--bce-line);
}

/* ==========================================================================
   12. Search results and archives
   ========================================================================== */

.bce-results {
	display: grid;
	gap: var(--s-8);
	padding-bottom: var(--section-y);
}

.bce-results__group h2 {
	font-size: var(--fs-h3);
	margin-bottom: var(--s-5);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--bce-line);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
}

.bce-results__count {
	font-family: var(--bce-font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--bce-muted);
}

.bce-empty {
	border: 1px dashed var(--bce-line-strong);
	border-radius: var(--r-md);
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	background: var(--bce-surface);
}

.bce-empty h2 {
	font-size: var(--fs-h3);
	margin-bottom: 10px;
}

.bce-empty p {
	color: var(--bce-muted);
	max-width: 52ch;
	margin: 0 auto var(--s-5);
}

.bce-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: center;
}

.bce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-7);
	padding-top: var(--s-6);
	border-top: 1px solid var(--bce-line);
}

.bce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	border: 1px solid var(--bce-line);
	color: var(--bce-muted);
	font-family: var(--bce-font-mono);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bce-pagination .page-numbers:hover {
	border-color: var(--bce-accent);
	color: var(--bce-accent);
}

.bce-pagination .page-numbers.current {
	background: var(--bce-accent);
	border-color: var(--bce-accent);
	color: var(--bce-accent-ink);
}

.bce-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Filter bar on the catalogue archive */
.bce-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-6);
}

.bce-filters a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	border: 1px solid var(--bce-line);
	color: var(--bce-muted);
	font-size: var(--fs-xs);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bce-filters a:hover,
.bce-filters a.is-active {
	border-color: var(--bce-accent);
	color: var(--bce-accent);
}

/* ==========================================================================
   13. WooCommerce shells (cart, checkout, account, notices)
   ========================================================================== */

.bce-woo {
	padding-bottom: var(--section-y);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	list-style: none;
	background: var(--bce-surface);
	border: 1px solid var(--bce-line-strong);
	border-left: 3px solid var(--bce-accent);
	border-radius: var(--r-sm);
	padding: var(--s-4) var(--s-5);
	margin: 0 0 var(--s-5);
	color: var(--bce-ink);
	font-size: var(--fs-sm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
}

.woocommerce-error {
	border-left-color: var(--bce-ember);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--bce-line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--bce-surface);
	margin-bottom: var(--s-6);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid var(--bce-line);
	text-align: left;
	font-size: var(--fs-sm);
	color: var(--bce-ink);
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	font-family: var(--bce-font-mono);
	font-weight: 500;
	font-size: var(--fs-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bce-muted);
	background: var(--bce-elevated);
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 54px;
	border-radius: 10px;
}

.woocommerce .cart_item a,
.woocommerce .order_details a {
	text-decoration: none;
	font-weight: 500;
}

.woocommerce .woocommerce-Price-amount,
.woocommerce .amount {
	font-family: var(--bce-font-mono);
	color: var(--bce-ink);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	font-family: var(--bce-font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	padding: 14px 24px;
	border-radius: var(--r-pill);
	border: 1px solid var(--bce-line-strong);
	background: var(--bce-elevated);
	color: var(--bce-ink);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--bce-line);
	color: var(--bce-ink);
	border-color: var(--bce-line-strong);
}

.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .checkout-button {
	background: var(--bce-accent);
	border-color: var(--bce-accent);
	color: var(--bce-accent-ink);
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover {
	background: var(--bce-accent-dim);
	border-color: var(--bce-accent-dim);
	color: var(--bce-accent-ink);
}

.woocommerce .cart-collaterals,
.woocommerce-checkout .col2-set,
.woocommerce .woocommerce-checkout-review-order {
	color: var(--bce-ink);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-account h2 {
	font-size: var(--fs-h3);
	margin-bottom: var(--s-4);
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-6);
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: auto;
	float: none;
}

@media (max-width: 780px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}
}

.woocommerce form .form-row {
	margin-bottom: var(--s-4);
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 6px;
}

.woocommerce .select2-container--default .select2-selection--single {
	background: var(--bce-surface);
	border: 1px solid var(--bce-line);
	border-radius: var(--r-sm);
	height: 46px;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--bce-ink);
	line-height: 44px;
	padding-left: 14px;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--bce-surface);
	border: 1px solid var(--bce-line);
	border-radius: var(--r-md);
	padding: var(--s-5);
}

.woocommerce .cart-collaterals .cart_totals table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
	border: 0;
	background: none;
	margin-bottom: var(--s-4);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--s-5);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	padding: 9px 16px;
	border-radius: var(--r-pill);
	border: 1px solid var(--bce-line);
	color: var(--bce-muted);
	font-size: var(--fs-sm);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	border-color: var(--bce-accent);
	color: var(--bce-accent);
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
}

/* ==========================================================================
   14. 404
   ========================================================================== */

.bce-404 {
	padding-block: clamp(64px, 10vw, 140px);
	text-align: left;
	max-width: 60ch;
}

.bce-404 h1 {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	margin-bottom: var(--s-4);
}

.bce-404 p {
	color: var(--bce-muted);
	font-size: 1.09rem;
	margin-bottom: var(--s-6);
}

/* An inline support link that carries its own icon, so the glyph and the label
   are a single click target rather than a decoration beside a link. */
.bce-inline-channel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bce-accent);
	font-weight: 600;
	text-decoration: none;
}

.bce-inline-channel svg {
	flex: none;
	transition: transform var(--dur) var(--ease);
}

.bce-inline-channel:hover {
	color: var(--bce-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bce-inline-channel:hover svg {
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Hub prose: the catalogue and guides-hub introductory copy. The same prose
   styling as an article, but full width, since there is no contents rail.
   -------------------------------------------------------------------------- */

.bce-prose--hub {
	max-width: 74ch;
	margin-inline: auto;
}

.bce-prose--hub > h2:first-child {
	margin-top: 0;
}