.bt-selector {
	--bt-accent: #111;
	--bt-border: #d5d7dd;
	--bt-border-width: 1px;
	--bt-bg: #fff;
	--bt-text: inherit;
	--bt-muted: #596070;
	--bt-radius: 4px;
	--bt-gap: 8px;
	--bt-on-accent: #fff;
	border: 0;
	margin: 0 0 1em;
	padding: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	color: var(--bt-text);
	container-type: inline-size;
}

/* Below the add to cart button the cards need air above them. */
.bt-selector.bt-position-after { margin-top: 1.75em; }

.bt-selector .bt-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--bt-gap);
}

.bt-selector .bt-option {
	position: relative;
	display: block;
	cursor: pointer;
}

/* The native radio stays in the page for keyboards and screen readers. */
.bt-selector .bt-radio {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.bt-selector .bt-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	padding: 12px;
	background: var(--bt-bg);
	border: var(--bt-border-width) solid var(--bt-border);
	border-radius: var(--bt-radius);
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}

.bt-selector .bt-option.has-badge .bt-card { padding-top: 22px; }

.bt-selector .bt-radio:checked + .bt-card {
	border-color: var(--bt-accent);
	box-shadow: 0 0 0 1px var(--bt-accent);
}

.bt-selector .bt-radio:focus-visible + .bt-card {
	outline: 2px solid var(--bt-accent);
	outline-offset: 2px;
}

.bt-selector .bt-option.is-disabled { cursor: not-allowed; }
.bt-selector .bt-option.is-disabled .bt-card { opacity: .45; }
.bt-selector .bt-option.is-disabled .bt-radio { cursor: not-allowed; }

.bt-selector .bt-badge {
	position: absolute;
	top: 0;
	left: 12px;
	transform: translateY(-50%);
	padding: 2px 8px;
	background: var(--bt-accent);
	color: var(--bt-on-accent);
	font-size: .75em;
	line-height: 1.4;
	border-radius: 2px;
	white-space: nowrap;
}

.bt-selector .bt-label { font-weight: 600; }
.bt-selector .bt-total { font-size: 1.15em; font-weight: 700; }
.bt-selector .bt-full,
.bt-selector .bt-unit,
.bt-selector .bt-save { font-size: .85em; color: var(--bt-muted); }
.bt-selector .bt-save { color: var(--bt-accent); }
.bt-selector [hidden] { display: none !important; }

/* Colors of the "you save" pill (a soft green, whatever the accent). */
.bt-selector {
	--bt-save-bg: #e1f5ee;
	--bt-save-text: #0f6e56;
}

/* Cards and List share the modern look: a round indicator, a pill for the saving, a tinted selected state. */
.bt-selector.bt-style-cards .bt-card,
.bt-selector.bt-style-list .bt-card {
	position: relative;
	background: var(--bt-bg);
	transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}

.bt-selector.bt-style-cards .bt-card::before,
.bt-selector.bt-style-list .bt-card::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 1.5px solid var(--bt-muted);
	border-radius: 50%;
	background: transparent;
	transition: border .15s;
}

.bt-selector.bt-style-cards .bt-radio:checked + .bt-card,
.bt-selector.bt-style-list .bt-radio:checked + .bt-card {
	background-color: color-mix(in srgb, var(--bt-accent) 7%, var(--bt-bg));
}

.bt-selector.bt-style-cards .bt-radio:checked + .bt-card::before,
.bt-selector.bt-style-list .bt-radio:checked + .bt-card::before {
	border: 5px solid var(--bt-accent);
}

.bt-selector.bt-style-cards .bt-option:hover .bt-radio:not(:checked):not(:disabled) + .bt-card,
.bt-selector.bt-style-list .bt-option:hover .bt-radio:not(:checked):not(:disabled) + .bt-card {
	border-color: var(--bt-muted);
}

.bt-selector.bt-style-cards .bt-save,
.bt-selector.bt-style-list .bt-save {
	align-self: flex-start;
	margin-top: 4px;
	padding: 2px 8px;
	background: var(--bt-save-bg);
	color: var(--bt-save-text);
	font-size: .78em;
	font-weight: 500;
	line-height: 1.5;
	border-radius: 999px;
}

.bt-selector.bt-style-cards .bt-badge,
.bt-selector.bt-style-list .bt-badge {
	border-radius: 999px;
	padding: 2px 10px;
}

/* Cards: tall cards, the indicator on top, the badge centered on the top edge. */
.bt-selector.bt-style-cards .bt-card { gap: 4px; padding: 16px 14px 14px; }
.bt-selector.bt-style-cards .bt-option.has-badge .bt-card { padding-top: 22px; }
.bt-selector.bt-style-cards .bt-card::before { margin-bottom: 4px; }
.bt-selector.bt-style-cards .bt-badge { left: 50%; transform: translate(-50%, -50%); }
.bt-selector.bt-style-cards .bt-total { font-size: 1.35em; }

/* List: one row per tier, indicator on the left, price on the right, the badge on the top edge. */
.bt-selector.bt-style-list .bt-options { display: flex; flex-direction: column; gap: 10px; }
.bt-selector.bt-style-list .bt-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto auto;
	align-items: center;
	column-gap: 14px;
	row-gap: 2px;
	padding: 14px 16px;
}
.bt-selector.bt-style-list .bt-option.has-badge .bt-card { padding-top: 14px; }
.bt-selector.bt-style-list .bt-card::before { grid-column: 1; grid-row: 1 / span 3; width: 20px; height: 20px; }
.bt-selector.bt-style-list .bt-label { grid-column: 2; grid-row: 1; }
.bt-selector.bt-style-list .bt-unit { grid-column: 2; grid-row: 2; }
.bt-selector.bt-style-list .bt-save { grid-column: 2; grid-row: 3; justify-self: start; }
.bt-selector.bt-style-list .bt-total { grid-column: 3; grid-row: 1; text-align: right; }
.bt-selector.bt-style-list .bt-full { grid-column: 3; grid-row: 2; text-align: right; }
.bt-selector.bt-style-list .bt-badge { left: auto; right: 14px; transform: translateY(-50%); }

/* Minimal: the plain bordered card (the base rules above), nothing added. */

/* Narrow places (a side column, a small phone): one tier per row, whatever the style. */
@container (max-width: 460px) {
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-options,
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-options { display: flex; flex-direction: column; gap: 10px; }

	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-card,
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-card {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 12px;
		row-gap: 2px;
		padding: 12px 14px;
		min-height: 0;
	}
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-card { grid-template-columns: auto 1fr auto; }
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-option.has-badge .bt-card,
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-option.has-badge .bt-card { padding-top: 12px; }

	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-card::before { grid-column: 1; grid-row: 1 / span 3; margin: 0; width: 20px; height: 20px; }
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-label { grid-column: 2; grid-row: 1; }
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-unit { grid-column: 2; grid-row: 2; }
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-save { grid-column: 2; grid-row: 3; justify-self: start; }
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-total { grid-column: 3; grid-row: 1; text-align: right; font-size: 1.15em; }
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-full { grid-column: 3; grid-row: 2; text-align: right; }
	.bt-selector:not(.bt-narrow-columns).bt-style-cards .bt-badge { left: auto; right: 14px; transform: translateY(-50%); }

	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-label { grid-column: 1; grid-row: 1; }
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-unit,
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-save { grid-column: 1; }
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-total { grid-column: 2; grid-row: 1; text-align: right; }
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-full { grid-column: 2; grid-row: 2; text-align: right; }
	.bt-selector:not(.bt-narrow-columns).bt-style-minimal .bt-badge { left: auto; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.bt-selector .bt-card { transition: none !important; transform: none !important; }
}

/* Windows high-contrast mode drops colors: keep the selected tier unmistakable. */
@media (forced-colors: active) {
	.bt-selector .bt-card { border: 1px solid CanvasText; }
	.bt-selector .bt-radio:checked + .bt-card { outline: 3px solid Highlight; outline-offset: 1px; }
	.bt-selector .bt-radio:focus-visible + .bt-card { outline: 3px solid Highlight; outline-offset: 3px; }
	.bt-selector .bt-badge { border: 1px solid CanvasText; }
}