/* BBCO Phase 2 commerce surfaces. */

/* Shared cart-to-confirmation progress indicator. */
.bbco-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbco-gap-inline) var(--bbco-gap-stack);
	margin: var(--bbco-gap-card) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: bbco-step;
}

.bbco-steps__item {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-gap-inline);
	color: var(--bbco-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-sm);
	font-weight: var(--bbco-weight-semibold);
}

.bbco-steps__item:not(:last-child)::after {
	content: "";
	width: clamp(16px, 4vw, 40px);
	height: 2px;
	margin-left: var(--bbco-space-8);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-border);
}

.bbco-steps__dot {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--bbco-radius-pill);
	border: 2px solid var(--bbco-border);
	background: transparent;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
	font-weight: var(--bbco-weight-bold);
	font-variant-numeric: tabular-nums;
}

.bbco-steps__dot svg {
	width: 16px;
	height: 16px;
	color: inherit;
}

.bbco-steps__item.is-active {
	color: var(--bbco-text);
}

.bbco-steps__item.is-active .bbco-steps__dot,
.bbco-steps__item.is-complete .bbco-steps__dot {
	border-color: var(--bbco-primary);
	background: var(--bbco-primary);
	color: var(--bbco-surface);
}

.bbco-steps__item.is-complete:not(:last-child)::after {
	background: var(--bbco-primary);
}

/* Shared trust / reassurance list. */
.bbco-trust {
	display: grid;
	gap: var(--bbco-gap-text);
	margin: var(--bbco-gap-component) 0 0;
	padding: var(--bbco-gap-component) 0 0;
	border-top: 1px solid var(--bbco-border);
	list-style: none;
}

.bbco-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--bbco-gap-text);
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
	line-height: 1.5;
}

.bbco-trust__icon {
	flex: 0 0 22px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-trusted-badge);
	color: var(--bbco-trusted-text);
}

.bbco-trust__icon::before {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--bbco-check-mask) center / contain no-repeat;
	mask: var(--bbco-check-mask) center / contain no-repeat;
}

/* Shared cart / checkout / confirmation hero. */
.bbco-commerce-hero {
	padding: var(--bbco-pad-commerce-hero-y) 0;
	background: var(--bbco-soft);
	text-align: center;
}

.bbco-commerce-hero.is-cart,
.bbco-commerce-hero.is-checkout {
	padding-bottom: var(--bbco-gap-title-content);
}

.bbco-commerce-hero .bbco-breadcrumbs {
	justify-content: flex-start;
	margin-bottom: var(--bbco-gap-card);
	text-align: left;
}

.bbco-commerce-hero .bbco-steps {
	justify-content: center;
	margin: 0 0 var(--bbco-gap-card);
}

.bbco-commerce-hero.is-cart .bbco-steps,
.bbco-commerce-hero.is-checkout .bbco-steps {
	margin-bottom: var(--bbco-gap-component);
}

.bbco-commerce-hero__head {
	display: grid;
	justify-items: center;
	gap: var(--bbco-gap-text);
}

.bbco-commerce-hero__head h1 {
	margin: 0;
}

.bbco-commerce-hero__head p {
	margin: 0;
	max-width: 600px;
	color: var(--bbco-muted);
}

.bbco-commerce-hero__meta {
	margin-left: var(--bbco-space-12);
	color: var(--bbco-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-md);
	font-weight: var(--bbco-weight-medium);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bbco-commerce-hero__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--bbco-space-4);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-control-bg);
	color: var(--bbco-muted);
}

.bbco-commerce-hero__icon::before {
	content: "";
	width: 32px;
	height: 32px;
	background: currentColor;
	-webkit-mask: var(--bbco-check-mask) center / contain no-repeat;
	mask: var(--bbco-check-mask) center / contain no-repeat;
}

.bbco-commerce-hero.is-paid .bbco-commerce-hero__icon {
	background: var(--bbco-primary);
	color: var(--bbco-on-dark-strong);
}

.bbco-commerce-hero.is-pending .bbco-commerce-hero__icon {
	background: color-mix(in srgb, var(--bbco-accent) 90%, white);
	color: var(--bbco-ink);
}

.bbco-commerce-hero.is-pending .bbco-commerce-hero__icon::before {
	-webkit-mask: var(--bbco-clock-mask) center / contain no-repeat;
	mask: var(--bbco-clock-mask) center / contain no-repeat;
}

.bbco-commerce-hero.is-refunded .bbco-commerce-hero__icon {
	background: color-mix(in srgb, var(--bbco-warning) 90%, white);
	color: var(--bbco-on-dark-strong);
}

/* Inline icon masks for commerce surfaces (recolored via currentColor). */
:root {
	--bbco-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--bbco-cart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4' fill='%23000'/%3E%3Ccircle cx='18' cy='20' r='1.4' fill='%23000'/%3E%3C/svg%3E");
	--bbco-clock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bbco-chev-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

.bbco-cart-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-space-8);
	min-height: 44px;
	padding: 0 var(--bbco-space-4);
	border: 0;
	background: transparent;
	color: var(--bbco-text);
	font-family: var(--bbco-font-body);
	font-weight: var(--bbco-weight-semibold);
	line-height: 1.1;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-cart-trigger:hover,
.bbco-cart-trigger:focus-visible {
	color: var(--bbco-primary);
}

.bbco-cart-trigger__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--bbco-space-4);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-primary);
	color: var(--bbco-surface);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	font-variant-numeric: tabular-nums;
}

.bbco-action-stack > .bbco-btn .bbco-icon {
	width: 18px;
	height: 18px;
}

.bbco-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--bbco-z-toast) + 1);
	background: color-mix(in srgb, var(--bbco-ink) 48%, transparent);
	backdrop-filter: blur(2px);
}

.bbco-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: calc(var(--bbco-z-toast) + 2);
	display: flex;
	flex-direction: column;
	width: min(440px, 100%);
	height: 100dvh;
	visibility: hidden;
	pointer-events: none;
	background: var(--bbco-surface);
	box-shadow: -24px 0 60px transparent;
	transform: translateX(102%);
	transition:
		transform var(--bbco-dur-base) var(--bbco-ease),
		box-shadow var(--bbco-dur-base) var(--bbco-ease),
		visibility 0s linear var(--bbco-dur-base);
}

.bbco-cart-drawer[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
	box-shadow: -24px 0 60px color-mix(in srgb, var(--bbco-ink) 18%, transparent);
	transform: translateX(0);
	transition-delay: 0s, 0s, 0s;
}

.bbco-cart-is-open {
	overflow: hidden;
}

.bbco-cart-drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bbco-gap-stack);
	padding: var(--bbco-pad-card-compact);
	border-bottom: 1px solid var(--bbco-border);
}

.bbco-cart-drawer__head h2 {
	margin: var(--bbco-space-4) 0 0;
	font-size: var(--bbco-text-xl);
}

.bbco-cart-drawer__close {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-surface);
	color: var(--bbco-text);
	font-size: var(--bbco-text-xl);
	line-height: 1;
	cursor: pointer;
}

.bbco-cart-drawer__body {
	flex: 1;
	padding: var(--bbco-pad-card-dense) var(--bbco-gap-component) var(--bbco-gap-card);
	overflow-y: auto;
}

.bbco-cart-drawer__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bbco-gap-inline);
	margin-top: var(--bbco-gap-stack);
}

.bbco-commerce-loading,
.bbco-cart-empty,
.bbco-commerce-gate {
	padding: var(--bbco-pad-card);
	border: 1px dashed var(--bbco-border);
	border-radius: var(--bbco-radius);
	background: var(--bbco-surface);
	text-align: center;
}

.bbco-cart-empty h3,
.bbco-commerce-gate h2 {
	margin: 0 0 var(--bbco-gap-inline);
}

.bbco-cart-empty p,
.bbco-commerce-gate p {
	margin: 0 0 var(--bbco-gap-component);
	color: var(--bbco-muted);
}

.bbco-commerce-error,
.bbco-commerce-errors {
	margin: 0 0 var(--bbco-gap-stack);
	padding: var(--bbco-pad-field);
	border: 1px solid color-mix(in srgb, var(--bbco-primary) 35%, var(--bbco-border));
	border-radius: var(--bbco-radius);
	background: color-mix(in srgb, var(--bbco-primary) 7%, var(--bbco-surface));
	color: var(--bbco-primary);
}

.bbco-commerce-errors {
	padding-left: var(--bbco-space-32);
}

.bbco-checkout-alert {
	display: flex;
	align-items: center;
	gap: var(--bbco-gap-text);
	margin: 0 0 var(--bbco-gap-component);
	padding: var(--bbco-pad-field);
	border: 1px solid color-mix(in srgb, var(--bbco-secondary) 26%, var(--bbco-border));
	border-radius: var(--bbco-radius);
	background: color-mix(in srgb, var(--bbco-secondary) 7%, var(--bbco-surface));
	color: var(--bbco-text);
	font-weight: 600;
}

.bbco-checkout-alert.is-error {
	border-color: color-mix(in srgb, var(--bbco-danger) 40%, var(--bbco-border));
	background: color-mix(in srgb, var(--bbco-danger) 8%, var(--bbco-surface));
	color: var(--bbco-danger);
}

.bbco-cart-vendor {
	margin-bottom: var(--bbco-gap-stack);
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius);
	background: var(--bbco-surface);
	overflow: hidden;
}

.bbco-cart-vendor__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-gap-text);
	padding: var(--bbco-pad-field);
	border-bottom: 1px solid var(--bbco-border);
	background: color-mix(in srgb, var(--bbco-secondary) 5%, var(--bbco-surface));
}

.bbco-cart-vendor__head span,.bbco-cart-vendor__head strong {
	color: var(--bbco-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	text-transform: uppercase;
}

.bbco-cart-item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: var(--bbco-gap-text);
	align-items: start;
	padding: var(--bbco-pad-card-dense);
	border-bottom: 1px solid var(--bbco-border);
}

.bbco-cart-item.is-compact {
	grid-template-columns: 56px minmax(0, 1fr) auto;
	padding: var(--bbco-gap-text);
}

.bbco-cart-item:last-child {
	border-bottom: 0;
}

.bbco-cart-item__image {
	width: 72px;
	height: 72px;
	border-radius: calc(var(--bbco-radius) - 2px);
	background: color-mix(in srgb, var(--bbco-secondary) 7%, var(--bbco-surface));
	object-fit: cover;
}

.bbco-cart-item.is-compact .bbco-cart-item__image {
	width: 56px;
	height: 56px;
}

.bbco-cart-item__body {
	display: grid;
	gap: var(--bbco-space-4);
}

.bbco-cart-item__title {
	color: var(--bbco-text);
	font-family: var(--bbco-font-display);
	font-weight: var(--bbco-weight-bold);
	line-height: 1.3;
}

.bbco-cart-item__meta {
	color: var(--bbco-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
}

.bbco-cart-item__price {
	color: var(--bbco-primary);
	font-family: var(--bbco-font-display);
	font-weight: var(--bbco-weight-bold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bbco-cart-item__controls {
	display: flex;
	align-items: center;
	gap: var(--bbco-gap-text);
	margin-top: var(--bbco-space-4);
}

.bbco-cart-quantity input {
	width: 68px;
	min-height: 36px;
	padding: var(--bbco-pad-badge);
	font-family: var(--bbco-font-mono);
	font-variant-numeric: tabular-nums;
}

.bbco-cart-vendor__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-gap-text);
	padding: var(--bbco-pad-field);
	background: color-mix(in srgb, var(--bbco-secondary) 4%, var(--bbco-surface));
	font-size: var(--bbco-text-sm);
}

.bbco-cart-totals {
	display: grid;
	gap: var(--bbco-gap-inline);
}

.bbco-cart-totals > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-gap-text);
}

.bbco-cart-totals strong,
.bbco-cart-review-totals strong,
.bbco-cart-vendor__total strong {
	font-family: var(--bbco-font-display);
	font-weight: var(--bbco-weight-bold);
	font-variant-numeric: tabular-nums;
}

.bbco-cart-coupon__applied strong {
	font-family: var(--bbco-font-mono);
}

.bbco-cart-totals .is-total {
	margin-top: var(--bbco-space-4);
	padding-top: var(--bbco-space-12);
	border-top: 1px solid var(--bbco-border);
	font-size: var(--bbco-text-lg);
}

.bbco-cart-totals .is-discount strong {
	color: var(--bbco-success);
}

.bbco-cart-coupon__fields,
.bbco-cart-coupon__applied {
	display: flex;
	gap: var(--bbco-gap-text);
	align-items: center;
}

.bbco-cart-coupon__fields input {
	flex: 1;
	min-width: 0;
}

.bbco-cart-coupon__applied {
	justify-content: space-between;
}

.bbco-cart-review-totals {
	display: grid;
	gap: var(--bbco-gap-text);
}

.bbco-cart-review-totals > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-gap-stack);
	font-size: var(--bbco-text-lg);
}

.bbco-commerce-error {
	margin: var(--bbco-gap-text) 0 0;
	color: var(--bbco-danger);
	font-size: var(--bbco-text-sm);
}

.bbco-commerce-note {
	margin: var(--bbco-gap-text) 0 0;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
	line-height: 1.5;
}

.bbco-cart-page__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	gap: var(--bbco-gap-grid);
	align-items: start;
}

.bbco-cart-section {
	padding: var(--bbco-gap-title-content) 0 var(--bbco-gap-section);
}

.bbco-cart-page__back {
	margin-top: var(--bbco-space-16);
	padding: 0;
}

.bbco-cart-page__checkout {
	width: 100%;
	margin-top: var(--bbco-space-20);
}

.bbco-cart-empty__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--bbco-space-16);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-control-bg);
	color: var(--bbco-muted);
}

.bbco-cart-empty__icon::before {
	content: "";
	width: 30px;
	height: 30px;
	background: currentColor;
	-webkit-mask: var(--bbco-cart-mask) center / contain no-repeat;
	mask: var(--bbco-cart-mask) center / contain no-repeat;
}

.bbco-commerce-card {
	padding: var(--bbco-pad-card-compact);
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius);
	background: var(--bbco-surface);
	box-shadow: var(--bbco-shadow-sm);
}

.bbco-commerce-card h2 {
	margin: 0 0 var(--bbco-gap-component);
}

.bbco-cart-page__summary,
.bbco-checkout__summary {
	position: sticky;
	top: var(--bbco-sticky-top);
}

body.bbco-checkout-shell {
	background: var(--bbco-soft);
}

.bbco-checkout-topbar {
	border-bottom: 1px solid var(--bbco-border);
	background: var(--bbco-surface);
}

.bbco-checkout-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-gap-component);
	min-height: 76px;
}

.bbco-checkout-content {
	padding: var(--bbco-gap-title-content) 0 var(--bbco-gap-section);
}

.bbco-checkout-secure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bbco-gap-text) var(--bbco-gap-card);
	margin: var(--bbco-gap-component) 0 0;
	padding: 0;
	list-style: none;
}

.bbco-checkout-secure li {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-gap-inline);
	color: var(--bbco-muted);
	font-family: var(--bbco-font-body);
	font-size: var(--bbco-text-sm);
	font-weight: var(--bbco-weight-semibold);
}

.bbco-checkout-footnote p {
	margin: 0;
	color: var(--bbco-muted);
	font-family: var(--bbco-font-body);
}

.bbco-checkout-footnote {
	padding: var(--bbco-gap-component) 0;
	border-top: 1px solid var(--bbco-border);
	background: var(--bbco-surface);
	text-align: center;
}

.bbco-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: var(--bbco-gap-grid);
	align-items: start;
}

.bbco-checkout__main {
	display: grid;
	gap: var(--bbco-gap-component);
}

.bbco-checkout__summary {
	display: grid;
	gap: var(--bbco-gap-text);
}

.bbco-checkout-section__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bbco-gap-component);
	margin-bottom: var(--bbco-gap-text);
}

.bbco-checkout-section__head h2 {
	margin: var(--bbco-space-4) 0 0;
}

.bbco-checkout-login,
.bbco-checkout-account {
	flex: 0 0 auto;
	margin: var(--bbco-space-4) 0 0;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
}

.bbco-checkout-login a {
	color: var(--bbco-primary);
	font-weight: var(--bbco-weight-bold);
}

.bbco-checkout-section__head + .bbco-commerce-note {
	margin: 0 0 var(--bbco-gap-component);
}

.bbco-checkout-coupon {
	margin: var(--bbco-gap-component) 0;
	padding: var(--bbco-gap-component) 0;
	border-top: 1px solid var(--bbco-border);
	border-bottom: 1px solid var(--bbco-border);
}

.bbco-checkout-coupon h3 {
	margin: 0 0 var(--bbco-gap-text);
	font-size: var(--bbco-text-base);
}

.bbco-checkout__submit {
	width: 100%;
}

.bbco-checkout__submit:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.bbco-checkout__terms {
	margin: 0;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-xs);
	line-height: 1.5;
	text-align: center;
	font-family: var(--bbco-font-mono);
}

.bbco-commerce-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bbco-gap-stack);
}

.bbco-commerce-fields > label {
	color: var(--bbco-muted);
	display: block;
	font-size: var(--bbco-text-sm);
	font-weight: var(--bbco-weight-medium);
	position: relative;
	width: 100%;
}

.bbco-commerce-fields > label > span {
	background: var(--bbco-surface);
	color: var(--bbco-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-sm);
	font-weight: var(--bbco-weight-regular);
	left: var(--bbco-space-12);
	line-height: 1.1;
	padding: 0 var(--bbco-space-4);
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	z-index: 1;
}

.bbco-commerce-fields .is-wide {
	grid-column: 1 / -1;
}

.bbco-commerce-fields input,
.bbco-commerce-fields select,
.bbco-commerce-fields textarea {
	width: 100%;
}

.bbco-commerce-fields input:focus,
.bbco-commerce-fields select:focus,
.bbco-commerce-fields textarea:focus {
	border-color: var(--bbco-secondary);
	box-shadow: none;
}

.bbco-commerce-check {
	display: flex;
	align-items: center;
	gap: var(--bbco-gap-inline);
	margin-top: var(--bbco-space-16);
	color: var(--bbco-text);
	font-size: var(--bbco-text-sm);
	line-height: 1.45;
	cursor: pointer;
}

.bbco-commerce-check input {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	box-shadow: none;
}

.bbco-commerce-check input:focus-visible {
	box-shadow: var(--bbco-focus);
}

.bbco-payment-methods {
	display: grid;
	gap: var(--bbco-gap-text);
}

.bbco-payment-method {
	display: flex;
	align-items: center;
	gap: var(--bbco-gap-stack);
	min-height: 88px;
	padding: var(--bbco-gap-stack) var(--bbco-gap-component);
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius);
	background: var(--bbco-surface);
	cursor: pointer;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease;
}

.bbco-payment-method:hover {
	border-color: color-mix(in srgb, var(--bbco-secondary) 45%, var(--bbco-border));
	background: var(--bbco-soft);
}

.bbco-payment-method:focus-within {
	border-color: var(--bbco-secondary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbco-secondary) 14%, transparent);
}

.bbco-payment-method:has(input:checked) {
	border-color: var(--bbco-primary);
	background: color-mix(in srgb, var(--bbco-primary) 5%, var(--bbco-surface));
}

.bbco-payment-method input {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	min-height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	accent-color: var(--bbco-primary);
}

.bbco-payment-method input:focus {
	box-shadow: none;
}

.bbco-payment-method span {
	display: grid;
	gap: var(--bbco-space-4);
	flex: 1;
	min-width: 0;
}

.bbco-payment-method strong {
	line-height: 1.4;
}

.bbco-payment-method small {
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
	line-height: 1.5;
}

.bbco-commerce-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.bbco-order-received__body {
	display: grid;
	gap: var(--bbco-gap-component);
	max-width: 900px;
	margin: 0 auto;
}

/* "What happens next" dark card. */
.bbco-order-next {
	padding: var(--bbco-pad-card);
	border-radius: var(--bbco-radius-md);
	background: var(--bbco-ink);
	color: var(--bbco-on-dark-strong);
}

.bbco-order-next__eyebrow {
	margin: 0 0 var(--bbco-gap-card);
	color: var(--bbco-on-dark-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	letter-spacing: 0;
	text-transform: uppercase;
}

.bbco-order-next__list {
	display: grid;
	gap: var(--bbco-gap-component);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bbco-next;
}

.bbco-order-next__list li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: var(--bbco-space-4) var(--bbco-gap-stack);
	align-items: start;
}

.bbco-order-next__list li::before {
	counter-increment: bbco-next;
	content: counter(bbco-next, decimal-leading-zero);
	grid-row: 1 / span 2;
	color: var(--bbco-primary);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-md);
	font-weight: var(--bbco-weight-bold);
	font-variant-numeric: tabular-nums;
}

.bbco-order-next__list strong {
	color: var(--bbco-on-dark-strong);
}

.bbco-order-next__list span {
	color: var(--bbco-on-dark-muted);
	font-size: var(--bbco-text-sm);
	line-height: 1.55;
}

/* Confirmation actions, centred and outside the card. */
.bbco-order-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bbco-gap-text) var(--bbco-gap-stack);
}

.bbco-order-invoice {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bbco-gap-inline) var(--bbco-gap-component);
	margin: 0;
}

/* Order-number pill in the confirmation hero. */
.bbco-order-ref {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-gap-text);
	margin-top: var(--bbco-space-20);
	padding: var(--bbco-pad-button);
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius);
	background: var(--bbco-surface);
	font-family: var(--bbco-font-mono);
}

.bbco-order-ref span {
	color: var(--bbco-muted);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	letter-spacing: 0;
	text-transform: uppercase;
}

.bbco-order-ref strong {
	font-size: var(--bbco-text-md);
	letter-spacing: 0;
}

.bbco-order-summary__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bbco-gap-stack);
	margin-bottom: var(--bbco-space-20);
}

.bbco-order-summary__head > div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbco-gap-inline);
}

.bbco-order-status {
	display: inline-flex;
	padding: var(--bbco-pad-badge);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-featured-badge);
	color: var(--bbco-text);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
}

.bbco-order-status.is-completed,
.bbco-order-status.is-confirmed,
.bbco-order-status.is-paid,
.bbco-order-status.is-pay-paid,
.bbco-order-status.is-pay-partially_refunded {
	background: var(--bbco-trusted-badge);
	color: var(--bbco-trusted-text);
}

.bbco-order-status.is-processing,
.bbco-order-status.is-awaiting_payment,
.bbco-order-status.is-pay-pending,
.bbco-order-status.is-pay-unpaid {
	background: var(--bbco-featured-badge);
	color: var(--bbco-featured-text);
}

.bbco-order-status.is-cancelled,
.bbco-order-status.is-pay-failed,
.bbco-order-status.is-pay-refunded {
	background: color-mix(in srgb, var(--bbco-danger) 14%, var(--bbco-surface));
	color: var(--bbco-danger);
}

/* Compact buyer orders list. */
.bbco-orders-list {
	display: grid;
	gap: var(--bbco-gap-text);
}

.bbco-order-row {
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius);
	background: var(--bbco-surface);
	box-shadow: var(--bbco-shadow-sm);
}

.bbco-order-row__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-gap-text) var(--bbco-gap-stack);
	padding: var(--bbco-gap-stack) var(--bbco-gap-component);
	cursor: pointer;
	list-style: none;
}

.bbco-order-row__head::-webkit-details-marker {
	display: none;
}

.bbco-order-row__head:focus-visible {
	outline: none;
	box-shadow: var(--bbco-focus);
	border-radius: var(--bbco-radius);
}

.bbco-order-row__id {
	display: grid;
	gap: var(--bbco-space-2);
	font-family: var(--bbco-font-mono);
}

.bbco-order-row__id strong {
	font-size: var(--bbco-text-base);
}

.bbco-order-row__id span {
	color: var(--bbco-muted);
	font-size: var(--bbco-text-xs);
}

.bbco-order-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bbco-gap-inline) var(--bbco-gap-text);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-sm);
}

.bbco-order-row__total {
	font-family: var(--bbco-font-display);
	font-weight: var(--bbco-weight-bold);
	font-size: var(--bbco-text-base);
	font-variant-numeric: tabular-nums;
}

.bbco-order-row__toggle {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--bbco-muted);
	transition: transform var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-order-row__toggle::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--bbco-chev-mask) center / contain no-repeat;
	mask: var(--bbco-chev-mask) center / contain no-repeat;
}

.bbco-order-row[open] .bbco-order-row__toggle {
	transform: rotate(90deg);
}

.bbco-order-row__body {
	padding: 0 var(--bbco-gap-card) var(--bbco-gap-card);
}

.bbco-order-row__body .bbco-commerce-card {
	border: 0;
	padding: var(--bbco-gap-stack) 0 0;
	box-shadow: none;
	border-top: 1px solid var(--bbco-border);
}

.bbco-order-lines {
	border-top: 1px solid var(--bbco-border);
}

.bbco-order-line {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bbco-gap-stack);
	padding: var(--bbco-gap-text) 0;
	border-bottom: 1px solid var(--bbco-border);
}

.bbco-order-line > div {
	display: grid;
	gap: var(--bbco-space-4);
}

.bbco-order-line span {
	color: var(--bbco-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-sm);
}

.bbco-order-totals {
	display: grid;
	gap: var(--bbco-gap-inline);
	margin-top: var(--bbco-gap-stack);
	margin-left: auto;
	max-width: 360px;
}

.bbco-order-totals > div {
	display: flex;
	justify-content: space-between;
	gap: var(--bbco-gap-card);
}

.bbco-order-totals strong {
	font-family: var(--bbco-font-display);
	font-weight: var(--bbco-weight-bold);
	font-variant-numeric: tabular-nums;
}

.bbco-order-totals .is-total {
	padding-top: var(--bbco-gap-text);
	border-top: 1px solid var(--bbco-border);
	font-size: var(--bbco-text-lg);
}

.bbco-order-address,
.bbco-vendor-order__customer {
	margin-top: var(--bbco-space-20);
	padding-top: var(--bbco-space-20);
	border-top: 1px solid var(--bbco-border);
}

.bbco-order-address h3 {
	margin: 0 0 var(--bbco-gap-inline);
}

.bbco-order-address p {
	margin: 0;
	color: var(--bbco-muted);
	line-height: 1.6;
}

.bbco-vendor-order {
	margin-bottom: var(--bbco-space-16);
}

.bbco-vendor-order__customer {
	display: grid;
	gap: var(--bbco-space-4);
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
}

.bbco-vendor-order .bbco-core-inline-form {
	margin-top: var(--bbco-space-16);
}