.bbco-container {
	width: min(calc(100% - var(--bbco-space-32)), var(--bbco-container));
	margin-inline: auto;
}

.bbco-narrow {
	max-width: 820px;
}

.bbco-section {
	padding: var(--bbco-space-72) 0;
}

.bbco-section--muted {
	background: var(--bbco-soft);
}

.bbco-section--surface {
	background: var(--bbco-surface);
}

.bbco-section--accent {
	padding: var(--bbco-space-80) 0;
	background: var(--bbco-primary);
	color: var(--bbco-surface);
}

.bbco-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-space-24);
	margin-bottom: var(--bbco-space-40);
}

.bbco-section__header h2 {
	max-width: 760px;
	margin-bottom: 0;
	color: var(--bbco-ink);
	font-size: 2.25rem;
	line-height: 1.15;
}

.bbco-section__header h2 mark {
	position: relative;
	z-index: 0;
	display: inline-grid;
	place-items: center;
	min-width: 1.78em;
	min-height: 1.78em;
	*margin-inline: -0.12em -0.04em;
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-primary);
	color: var(--bbco-surface);
	font: inherit;
}

.bbco-section__header p {
	max-width: 620px;
	margin-top: var(--bbco-space-16);
	margin-bottom: 0;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-base);
}

.bbco-section--accent .bbco-section__header h2,
.bbco-section--accent .bbco-section__header p {
	color: var(--bbco-surface);
}

.bbco-section--accent .bbco-section__header h2 mark {
	background: var(--bbco-surface);
	color: var(--bbco-primary);
}

.bbco-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-space-8);
	margin-bottom: var(--bbco-space-8);
	color: var(--bbco-secondary);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	letter-spacing: 0;
	text-transform: uppercase;
}

.bbco-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--bbco-accent);
}

.bbco-muted {
	color: var(--bbco-muted);
}

.bbco-link {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-space-8);
	color: var(--bbco-primary);
	font-weight: var(--bbco-weight-bold);
}

.bbco-link::after {
	content: "";
	width: 18px;
	height: 2px;
	background: currentColor;
}

.bbco-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bbco-space-8);
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: var(--bbco-radius);
	padding: var(--bbco-space-12) var(--bbco-space-20);
	font-weight: var(--bbco-weight-semibold);
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;
	transition: background-color var(--bbco-dur-base) var(--bbco-ease), background-size var(--bbco-dur-slow) var(--bbco-ease), border-color var(--bbco-dur-base) var(--bbco-ease), box-shadow var(--bbco-dur-base) var(--bbco-ease), color var(--bbco-dur-base) var(--bbco-ease), transform var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	transition: transform var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-btn:hover svg {
	transform: translateX(2px);
}

.bbco-btn--primary {
	background-color: var(--bbco-primary);
	background-image: linear-gradient(var(--bbco-surface), var(--bbco-surface));
	background-position: top;
	background-repeat: no-repeat;
	background-size: 100% 0;
	color: var(--bbco-surface);
}

.bbco-btn--primary:hover {
	background-color: var(--bbco-primary);
	background-size: 100% 100%;
	color: var(--bbco-primary);
	border-color: var(--bbco-primary);
}

.bbco-btn--ghost {
	border-color: var(--bbco-primary);
	background-color: var(--bbco-surface);
	background-image: linear-gradient(var(--bbco-primary-hover), var(--bbco-primary-hover));
	background-position: top;
	background-repeat: no-repeat;
	background-size: 100% 0;
	color: var(--bbco-primary);
}

.bbco-btn--ghost:hover {
	border-color: var(--bbco-primary-hover);
	background-color: var(--bbco-surface);
	background-size: 100% 100%;
	color: var(--bbco-surface);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--bbco-primary) 22%, transparent);
}

.bbco-section--accent .bbco-btn--ghost {
	border-color: var(--bbco-on-dark);
	background-color: transparent;
	background-image: linear-gradient(var(--bbco-surface), var(--bbco-surface));
	color: var(--bbco-surface);
}

.bbco-section--accent .bbco-btn--ghost:hover {
	border-color: var(--bbco-surface);
	background-color: transparent;
	background-size: 100% 100%;
	color: var(--bbco-primary);
	box-shadow: 0 16px 32px color-mix(in srgb, var(--bbco-ink) 16%, transparent);
}

.bbco-btn--light {
	background: var(--bbco-surface);
	color: var(--bbco-secondary);
}

.bbco-btn--small {
	min-height: 38px;
	padding: var(--bbco-space-8) var(--bbco-space-12);
	font-size: var(--bbco-text-sm);
}

/* Floating CTA: borderless, ink-shadow, flips to primary on hover.
   Use inside cards (vendor-card, seller-card) where the button is the
   only chrome on a flat surface. */
.bbco-btn--floating {
	border-color: transparent;
	background: var(--bbco-surface);
	color: var(--bbco-ink);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--bbco-ink) 8%, transparent);
}

.bbco-btn--floating:hover {
	background: var(--bbco-primary);
	color: var(--bbco-surface);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--bbco-primary) 20%, transparent);
}

.bbco-badge,
.bbco-chip {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-on-dark-muted);
	color: var(--bbco-muted);
	padding: var(--bbco-space-4) var(--bbco-space-8);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	line-height: 1;
}

.bbco-badge--featured {
	border-color: transparent;
	background: var(--bbco-featured-badge);
	color: var(--bbco-featured-text);
}

.bbco-badge--trusted {
	border-color: transparent;
	background: var(--bbco-trusted-badge);
	color: var(--bbco-trusted-text);
}

.bbco-card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbco-space-8);
	min-height: 26px;
}

.bbco-empty {
	display: grid;
	place-items: center;
	min-height: 260px;
	border: 1px dashed var(--bbco-border);
	border-radius: var(--bbco-radius);
	background: var(--bbco-on-dark-muted);
	padding: var(--bbco-space-32);
	text-align: center;
}

.bbco-empty__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background:
		linear-gradient(135deg, var(--bbco-primary), var(--bbco-accent));
	margin-bottom: var(--bbco-space-16);
}

.bbco-empty h2 {
	margin-bottom: var(--bbco-space-8);
}

.bbco-empty p {
	max-width: 480px;
	margin-bottom: 0;
	color: var(--bbco-muted);
}

.bbco-media-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 240px;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--bbco-secondary) 12%, transparent), color-mix(in srgb, var(--bbco-accent) 20%, transparent)),
		var(--bbco-surface);
	color: var(--bbco-muted);
	font-weight: var(--bbco-weight-bold);
}

.bbco-rich-text {
	color: var(--bbco-text);
}

.bbco-rich-text > *:last-child {
	margin-bottom: 0;
}

.bbco-rich-text a {
	color: var(--bbco-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bbco-form label {
	display: grid;
	gap: var(--bbco-space-8);
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
}

.bbco-field {
	position: relative;
	gap: 0;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-sm);
	font-weight: var(--bbco-weight-medium);
}

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

.bbco-form {
	display: grid;
	gap: var(--bbco-space-16);
}

.bbco-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: var(--bbco-z-toast);
	transform: translateY(-160%);
	background: var(--bbco-text);
	color: var(--bbco-surface);
	padding: var(--bbco-space-8) var(--bbco-space-12);
	border-radius: var(--bbco-radius);
}

.bbco-skip-link:focus {
	transform: translateY(0);
}