.ezp-addons-field,
.ezp-addon-group {
	margin: 14px 0;
}
.ezp-addons-title {
	margin-bottom: 6px;
}
.ezp-addon-required {
	font-size: 12px;
	font-weight: normal;
	color: #a00;
}
.ezp-addon-option {
	display: block;
	margin: 4px 0;
	font-weight: normal;
}
.ezp-addon-price {
	color: #50575e;
	font-size: 13px;
}
.ezp-addon-required-note {
	font-size: 12px;
	color: #a00;
	margin: 2px 0 0;
}

/* Typed add-on options (text / textarea / number / quantity). */
.ezp-addon-input-option { margin: 8px 0; }
.ezp-addon-input-label { display: block; margin-bottom: 3px; }
.ezp-addon-text,
.ezp-addon-textarea { width: 100%; max-width: 320px; }
.ezp-addon-number { width: 90px; }
.ezp-addon-open-price { width: 90px; margin-left: 6px; }
.ezp-addon-select { max-width: 320px; }

/* ── Half & half ─────────────────────────────────────────────────────────
   The side selector sits under the topping it belongs to and appears only
   while that topping is chosen, so an unticked list stays a plain list. */
.ezp-addon-portions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 2px 0 8px 24px;
	padding: 5px 10px;
	border-left: 3px solid currentColor;
	font-size: .85em;
	opacity: .85;
}
.ezp-addon-portions[hidden] { display: none; }
.ezp-portion-pick { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ezp-portion-pick input { margin: 0; }

/* The same two hues the register uses, so "1st half" looks like the same
   thing whether it was chosen online or at the counter. */
.ezp-portion-pick { --pl: #0f7c8c; --pr: #7c3fbf; }
.ezp-portion-pick:has(input[value="left"]:checked)  { color: var(--pl); font-weight: 600; }
.ezp-portion-pick:has(input[value="right"]:checked) { color: var(--pr); font-weight: 600; }
.ezp-portion-pick input[value="left"]  { accent-color: #0f7c8c; }
.ezp-portion-pick input[value="right"] { accent-color: #7c3fbf; }