/*
 * OSB Product Options — the topping picker.
 * Tokens follow the Ocean Sushi kit; override on :root to retheme.
 */
.osbpo {
	--osbpo-brand: #FF567B;
	--osbpo-ink: #1E355E;
	--osbpo-ink-2: #45566F;
	--osbpo-line: #D9D3DC;
	--osbpo-check: #2563EB;

	margin: 12px 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.osbpo__legend {
	padding: 0;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--osbpo-ink-2);
}

.osbpo__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.osbpo__row {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The exclusive choice reads as a separate decision, not one more topping. */
.osbpo__row--exclusive {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--osbpo-line);
}

/*
 * The Elementor kit styles every input on the site:
 *   .elementor-kit-49 input:not([type="button"]):not([type="submit"]) { padding: 14px 0 10px }
 * That is (0,3,1) against our (0,2,0), so it wins and inflates the box to
 * 18x27 — padding + border exceeds the height, and border-box then grows to
 * fit. Raising specificity further would be an arms race with a global rule
 * we do not own, so the box-metric properties are forced here and nothing else.
 */
.osbpo .osbpo__input {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box !important;
	width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
	max-height: 18px !important;
	min-width: 18px !important;
	flex: none;
	margin: 0 !important;
	padding: 0 !important;
	border: 1.5px solid var(--osbpo-line);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background .12s ease, border-color .12s ease;
}

.osbpo .osbpo__input::after {
	content: "";
	width: 10px;
	height: 10px;
	transform: scale(0);
	transition: transform .12s ease;
	background: #fff;
	clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 22%, 84% 6%, 39% 68%);
}

.osbpo .osbpo__input:checked {
	background: var(--osbpo-check);
	border-color: var(--osbpo-check);
}

.osbpo .osbpo__input:checked::after {
	transform: scale(1);
}

.osbpo .osbpo__input:focus-visible {
	outline: 2px solid var(--osbpo-brand);
	outline-offset: 2px;
}

.osbpo__label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--osbpo-ink);
	cursor: pointer;
	min-width: 0;
}

.osbpo__input:checked + .osbpo__label {
	font-weight: 700;
}

.osbpo__price {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--osbpo-ink-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.osbpo__input:checked ~ .osbpo__price {
	color: var(--osbpo-ink);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.osbpo__input,
	.osbpo .osbpo__input::after {
		transition: none;
	}
}

@media (max-width: 767px) {
	.osbpo__label {
		font-size: 13px;
	}
	.osbpo__price {
		font-size: 12.5px;
	}
}