/* =============================================
 * Product Modifiers — Accordion + grid layout
 * ============================================= */

.wb-product-modifiers {
	--wb-modifier-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--wb-modifier-required: var(--wp--preset--color--vivid-red, #dc2626);
	--wb-modifier-good: var(--wp--preset--color--vivid-green-cyan, #16a34a);

	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	/* WooCommerce wraps the modifiers inside <form class="cart"> which
	 * is display: grid. Without this, the summary's white-space: nowrap
	 * text propagates up as max-content and expands the form's grid
	 * track past the visible column width (verified at 1740px vs the
	 * 700px container). contain: inline-size tells the browser to
	 * size this element from its parent only, not its descendants. */
	contain: inline-size;
}

.wb-product-modifiers__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =============================================
 * Group
 * ============================================= */

.wb-product-modifiers__group {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	min-width: 0;
	width: 100%;
}

/* =============================================
 * Group Toggle (accordion header)
 * ============================================= */

.wb-product-modifiers__group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 1rem 0.25rem;
	background: transparent;
	border: 0;
	border-radius: 0.375rem;
	color: inherit;
	cursor: pointer;
	text-align: left;
	transition: background 100ms ease;
	box-sizing: border-box;
}

/* Hover: just the background. Earlier negative-margin trick caused a
 * sub-pixel jiggle on the chevron; flat background change avoids it. */
.wb-product-modifiers__group-toggle:hover {
	background: var(--wp--preset--color--base-2, #f4f4f5);
}

.wb-product-modifiers__group-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2271b1);
	outline-offset: 2px;
}

.wb-product-modifiers__group-toggle-main {
	display: block;
	min-width: 0;
	/* flex-basis: 0 — start from zero and only grow into available
	 * space, otherwise the summary's nowrap intrinsic width would
	 * become the basis and balloon toggle-main past the row width. */
	flex: 1 1 0;
}

.wb-product-modifiers__group-toggle-aside {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.wb-product-modifiers__group-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	white-space: nowrap;
}

.wb-product-modifiers__group-label {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #18181b);
}

/* Collapsed-state summary: mono uppercase like the design's "VANILLA + CARAMEL". */
.wb-product-modifiers__group-summary {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--wb-modifier-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2, #71717a);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* SET pill — selection differs from default. */
.wb-product-modifiers__set-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--wb-modifier-mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #18181b);
	color: var(--wp--preset--color--base, #ffffff);
	text-transform: uppercase;
	line-height: 1;
}

/* Required pill — required group with no selection. */
.wb-product-modifiers__required-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--wb-modifier-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: rgba(220, 38, 38, 0.1);
	color: var(--wb-modifier-required);
	text-transform: uppercase;
	line-height: 1;
}

/* Green check — group has at least one selection. */
.wb-product-modifiers__check {
	display: inline-flex;
	align-items: center;
	color: var(--wb-modifier-good);
}

/* Restore [hidden] over the explicit display:s above. */
.wb-product-modifiers__set-pill[hidden],
.wb-product-modifiers__required-pill[hidden],
.wb-product-modifiers__check[hidden] {
	display: none;
}

.wb-product-modifiers__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast-2, #71717a);
	transition: transform 200ms ease;
}

.wb-product-modifiers__group[data-expanded="1"] .wb-product-modifiers__chevron {
	transform: rotate(180deg);
}

/* =============================================
 * Options Wrap (collapses with accordion)
 * ============================================= */

.wb-product-modifiers__options-wrap {
	overflow: hidden;
	max-height: 4000px;
	transition: max-height 250ms ease;
}

.wb-product-modifiers__group[data-expanded="0"]
	.wb-product-modifiers__options-wrap {
	max-height: 0;
}

/* Eyebrow above the option grid: "REQUIRED · CHOOSE 1". */
.wb-product-modifiers__group-eyebrow {
	margin: 0;
	padding: 0.5rem 0 0.25rem;
	font-family: var(--wb-modifier-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2, #71717a);
}

/* =============================================
 * Options Grid (cards)
 * ============================================= */

.wb-product-modifiers__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	padding: 0.375rem 0 0.5rem;
}

@media (min-width: 480px) {
	.wb-product-modifiers__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.wb-product-modifiers__options {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =============================================
 * Custom-text Input
 * — span the full grid row so it always lands BELOW the option it pairs
 *   with, never beside it as another column.
 * ============================================= */

.wb-product-modifiers__text-input-wrap {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.25rem 0 0.5rem;
}

.wb-product-modifiers__text-input-wrap[hidden] {
	display: none;
}

.wb-product-modifiers__text-input-label {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast, #1c1c1c);
}

.wb-product-modifiers__text-input {
	width: 100%;
	max-width: 28rem;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	border: 1px solid var(--wp--preset--color--contrast, #c8c8c8);
	border-radius: 0.375rem;
	background: #fff;
}

.wb-product-modifiers__text-input:focus {
	outline: 2px solid var(--wp--preset--color--accent, #6b1b3b);
	outline-offset: 1px;
}

.wb-product-modifiers__text-input-help {
	font-size: 0.75rem;
	opacity: 0.7;
}

/* =============================================
 * Option Card
 * ============================================= */

.wb-product-modifiers__option {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	width: 100%;
	min-width: 0;
	min-height: 50px;
	padding: 0.6875rem 0.8125rem;
	border: 1.5px solid var(--wp--preset--color--contrast-3, #e4e4e7);
	border-radius: 0.625rem;
	background: var(--wp--preset--color--base, #ffffff);
	color: var(--wp--preset--color--contrast, #18181b);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	transition:
		border-color 120ms ease,
		background 120ms ease;
}

.wb-product-modifiers__option:hover {
	border-color: var(--wp--preset--color--contrast-3, #d4d4d8);
	background: var(--wp--preset--color--base-2, #f4f4f5);
}

.wb-product-modifiers__option.is-selected {
	border-color: var(--wp--preset--color--primary, #18181b);
	background: var(--wp--preset--color--base, #ffffff);
}

.wb-product-modifiers__quantity-option {
	align-items: center;
	cursor: default;
}

.wb-product-modifiers__option:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2271b1);
	outline-offset: 2px;
}

/* =============================================
 * Option Content (label + optional price stacked)
 * ============================================= */

.wb-product-modifiers__option-content {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex: 1 1 auto;
	min-width: 0;
}

.wb-product-modifiers__option-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast, #18181b);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wb-product-modifiers__option-price {
	flex: 0 0 auto;
	font-family: var(--wb-modifier-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2, #71717a);
	white-space: nowrap;
}

.wb-product-modifiers__option-hint {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast-2, #71717a);
}

/* =============================================
 * Selection Indicator (radio / checkbox) — left of content
 * ============================================= */

.wb-product-modifiers__option-indicator {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--wp--preset--color--contrast-3, #d4d4d8);
	background: var(--wp--preset--color--base, #ffffff);
	display: grid;
	place-items: center;
	transition:
		border-color 140ms ease,
		background 140ms ease;
}

[data-selection-type="single"] .wb-product-modifiers__option-indicator {
	border-radius: 50%;
}

[data-selection-type="multi"] .wb-product-modifiers__option-indicator {
	border-radius: 4px;
}

[data-selection-type="single"]
	.wb-product-modifiers__option.is-selected
	.wb-product-modifiers__option-indicator {
	border-color: var(--wp--preset--color--primary, #18181b);
	box-shadow: inset 0 0 0 5px var(--wp--preset--color--primary, #18181b);
}

[data-selection-type="multi"]
	.wb-product-modifiers__option.is-selected
	.wb-product-modifiers__option-indicator {
	border-color: var(--wp--preset--color--primary, #18181b);
	background: var(--wp--preset--color--primary, #18181b);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 3.5L5.25 10L2.5 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}

.wb-product-modifiers__quantity-stepper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--contrast-3, #d4d4d8);
	border-radius: 999px;
	overflow: hidden;
	background: var(--wp--preset--color--base, #ffffff);
}

.wb-product-modifiers__quantity-button {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast, #18181b);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.wb-product-modifiers__quantity-button:hover {
	background: var(--wp--preset--color--base-2, #f4f4f5);
}

.wb-product-modifiers__quantity-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2271b1);
	outline-offset: -2px;
}

.wb-product-modifiers__quantity-value {
	min-width: 1.75rem;
	text-align: center;
	font-family: var(--wb-modifier-mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast, #18181b);
}

/* =============================================
 * Error
 * ============================================= */

.wb-product-modifiers__error {
	margin: 0;
	padding: 0.25rem 0;
	font-size: 0.75rem;
	color: var(--wb-modifier-required);
}

.wb-product-modifiers__count {
	margin: 0.25rem 0 0;
	font-family: var(--wb-modifier-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2, #71717a);
}

/* =============================================
 * Disabled add-to-cart (when required groups not met)
 * ============================================= */

.single_add_to_cart_button[aria-disabled="true"],
.single_add_to_cart_button.is-required-unmet {
	opacity: 0.4;
	cursor: not-allowed;
}

/* =============================================
 * Phase 2 — favourites chip rail + save row (#1902)
 * ============================================= */

.wb-product-modifiers__favourites {
	display: flex;
	margin: 0 0 0.75rem;
	padding: 0;
}

.wb-product-modifiers__favourites[hidden] {
	display: none;
}

.wb-product-modifiers__favourites-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
}

.wb-product-modifiers__favourite {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--contrast-3, rgba(0, 0, 0, 0.16));
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		opacity 0.15s ease;
	flex: 0 0 auto;
}

.wb-product-modifiers__favourite.is-active {
	background: var(--wp--preset--color--accent, #6b1b3b);
	border-color: var(--wp--preset--color--accent, #6b1b3b);
	color: var(--wp--preset--color--base, #fff);
}

/* Venue preset (#1903) — subtle leading marker so the customer can tell
 * a venue-authored quick-pick apart from one of their saved favourites. */
.wb-product-modifiers__favourite.is-preset {
	border-style: dashed;
}

/* My Usual (#1904) — leading slot, accent border so it reads as the
 * customer's own historical preference at a glance. */
.wb-product-modifiers__favourite.is-my-usual {
	border-color: var(--wp--preset--color--accent, #6b1b3b);
}

.wb-product-modifiers__favourite.is-my-usual.is-active {
	background: var(--wp--preset--color--accent, #6b1b3b);
	color: var(--wp--preset--color--base, #fff);
}

.wb-product-modifiers__favourite.is-preset
	.wb-product-modifiers__favourite-apply {
	padding-right: 0.875rem;
}

.wb-product-modifiers__favourite.is-removing {
	opacity: 0;
}

.wb-product-modifiers__favourite-apply,
.wb-product-modifiers__favourite-remove {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
	font: inherit;
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
}

.wb-product-modifiers__favourite-apply {
	padding: 0 0.5rem 0 0.875rem;
	font-weight: 500;
}

.wb-product-modifiers__favourite-remove {
	padding: 0 0.625rem;
	color: var(--wp--preset--color--contrast-2, #71717a);
	border-radius: 0 999px 999px 0;
}

.wb-product-modifiers__favourite.is-active
	.wb-product-modifiers__favourite-remove {
	color: inherit;
}

.wb-product-modifiers__favourite-remove:hover,
.wb-product-modifiers__favourite-remove:focus-visible {
	color: var(--wb-modifier-required);
}

/*
 * Product favourites + save-order modal.
 */
.wb-product-modifiers__title-host {
	position: relative;
}

.wb-product-modifiers__title-host > :first-child {
	padding-right: 3.5rem;
}

.wb-product-modifiers__product-favourite {
	position: absolute;
	top: 0.125rem;
	right: 0;
	z-index: 1;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--accent, #6b1b3b);
	cursor: pointer;
	transition:
		background-color 120ms ease,
		border-color 120ms ease,
		color 120ms ease,
		transform 120ms ease;
}

.wb-product-modifiers__product-favourite:hover,
.wb-product-modifiers__product-favourite:focus-visible {
	outline: none;
	background: rgba(107, 27, 59, 0.08);
	border-color: rgba(107, 27, 59, 0.22);
}

.wb-product-modifiers__product-favourite.is-saved
	.wb-product-modifiers__product-favourite-icon {
	fill: currentColor;
}

.wb-product-modifiers__product-favourite.is-saving {
	cursor: progress;
	opacity: 0.7;
	transform: scale(0.96);
}

.wb-product-modifiers__product-favourite[hidden] {
	display: none;
}

.wb-product-modifiers__save-modal[hidden] {
	display: none;
}

.wb-product-modifiers__save-modal {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: grid;
	place-items: center;
	padding: 1.25rem;
}

.wb-product-modifiers__save-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.52);
}

.wb-product-modifiers__save-dialog {
	position: relative;
	width: min(100%, 30rem);
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
	border-radius: 12px;
	background: var(--wp--preset--color--base, #fff);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
	color: var(--wp--preset--color--contrast, #1f1f1f);
}

.wb-product-modifiers__save-close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.wb-product-modifiers__save-close:hover,
.wb-product-modifiers__save-close:focus-visible {
	outline: none;
	background: rgba(0, 0, 0, 0.06);
}

.wb-product-modifiers__save-title {
	margin: 0 2rem 0.5rem 0;
	font-size: 1.35rem;
	line-height: 1.2;
}

.wb-product-modifiers__save-copy {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--contrast-2, #525252);
}

.wb-product-modifiers__save-label {
	display: grid;
	gap: 0.375rem;
	font-weight: 600;
}

.wb-product-modifiers__save-input {
	width: 100%;
	box-sizing: border-box;
	height: 2.5rem;
	padding: 0 0.875rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--contrast-3, rgba(0, 0, 0, 0.2));
	background: var(--wp--preset--color--base, #fff);
	font: inherit;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, #1f1f1f);
	transition:
		border-color 120ms ease,
		box-shadow 120ms ease;
}

.wb-product-modifiers__save-input:hover {
	border-color: var(--wp--preset--color--contrast-2, rgba(0, 0, 0, 0.35));
}

.wb-product-modifiers__save-input:focus,
.wb-product-modifiers__save-input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent, #6b1b3b);
	box-shadow: 0 0 0 3px rgba(107, 27, 59, 0.15);
}

.wb-product-modifiers__save-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.625rem;
	margin-top: 1.125rem;
}

.wb-product-modifiers__save-cancel,
.wb-product-modifiers__save-submit {
	flex: none;
	height: 2.5rem;
	min-width: 5rem;
	padding: 0 1.25rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--accent, #6b1b3b);
	background: transparent;
	color: var(--wp--preset--color--accent, #6b1b3b);
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 120ms ease,
		color 120ms ease,
		box-shadow 120ms ease;
}

.wb-product-modifiers__save-cancel {
	border-color: transparent;
	color: var(--wp--preset--color--contrast-2, #525252);
}

.wb-product-modifiers__save-cancel:hover,
.wb-product-modifiers__save-cancel:focus-visible {
	outline: none;
	background: rgba(0, 0, 0, 0.06);
	color: var(--wp--preset--color--contrast, #1f1f1f);
}

.wb-product-modifiers__save-submit:hover,
.wb-product-modifiers__save-submit:focus-visible {
	outline: none;
	background: var(--wp--preset--color--accent, #6b1b3b);
	color: var(--wp--preset--color--base, #fff);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.wb-product-modifiers__save-submit:disabled,
.wb-product-modifiers__save-dialog.is-saving
	.wb-product-modifiers__save-submit {
	opacity: 0.6;
	cursor: progress;
	background: transparent;
	color: var(--wp--preset--color--accent, #6b1b3b);
	box-shadow: none;
}

.wb-product-modifiers__save-error {
	margin: 0.625rem 0 0;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--wb-modifier-required);
}

/* =============================================
 * Linear-length modifier (cut-to-measure)
 *
 * Matches Multifors' sq.m / pack calculator pattern:
 * single card with description, stepper input, helper, summary.
 * ============================================= */

/* Hide the standalone group header (chevron / REQUIRED pill / SET pill /
 * summary line / eyebrow) for groups whose only option is linear-length —
 * the customer should see one tidy card with the heading inside it. */
.wb-product-modifiers__group:has(.wb-product-modifiers__linear-option)
	.wb-product-modifiers__group-toggle {
	display: none !important;
}

.wb-product-modifiers__group:has(.wb-product-modifiers__linear-option)
	.wb-product-modifiers__group-eyebrow {
	display: none !important;
}

/* The IPF block re-echoes the variation/parent price between the
 * variation pills and the actions row. With a per-metre linear modifier
 * attached the headline price already says "$X / m" and the modifier card
 * shows the live total, so the echo is just noise. */
.wb-add-to-cart:has(.wb-product-modifiers__linear-option) .wb-atc__price {
	display: none !important;
}

/* Let the modifier root and option card occupy the full width of the
 * column rather than shrinking to the size of the stepper. */
.wb-add-to-cart .wb-product-modifiers,
.wb-add-to-cart .wb-product-modifiers__group,
.wb-add-to-cart .wb-product-modifiers__options-wrap,
.wb-add-to-cart .wb-product-modifiers__options {
	width: 100%;
}

.wb-product-modifiers__linear-option {
	/* Parent `.wb-product-modifiers__options` is a CSS grid sized for
	 * choice options. `grid-column: 1 / -1` makes the linear card span
	 * the entire row regardless of the parent's track definition. */
	grid-column: 1 / -1;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: var(--wp--preset--color--base, #fff);
}

.wb-product-modifiers__linear-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1f1f1f);
	line-height: 1.3;
}

.wb-product-modifiers__linear-description {
	margin: 0;
	font-size: 0.9375rem;
	color: #666;
	line-height: 1.45;
}

/* Stepper: [-] [input m] [+] */
.wb-product-modifiers__length-stepper {
	display: inline-flex;
	align-items: stretch;
	max-width: 300px;
}

.wb-product-modifiers__length-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	border: 1px solid #ddd;
	background: #fff;
	font-size: 1.2em;
	line-height: 1;
	color: #333;
	cursor: pointer;
	flex-shrink: 0;
	user-select: none;
	transition: background 0.15s ease;
}

.wb-product-modifiers__length-step:hover {
	background: #f5f5f5;
}

.wb-product-modifiers__length-step:active {
	background: #eee;
}

.wb-product-modifiers__length-step--minus {
	border-radius: 4px 0 0 4px;
	border-right: none;
}

.wb-product-modifiers__length-step--plus {
	border-radius: 0 4px 4px 0;
	border-left: none;
}

.wb-product-modifiers__length-input-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 1;
}

.wb-product-modifiers__length-input {
	padding: 0.5em 3em 0.5em 0.8em;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 0;
	font: inherit;
	text-align: left;
	-moz-appearance: textfield;
}

.wb-product-modifiers__length-input::-webkit-outer-spin-button,
.wb-product-modifiers__length-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wb-product-modifiers__length-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary, #2563eb);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary, #2563eb);
}

.wb-product-modifiers__length-suffix {
	position: absolute;
	right: 0.6em;
	color: #999;
	pointer-events: none;
	font-size: 0.85em;
}

.wb-product-modifiers__length-help {
	margin: 0;
	font-size: 0.875rem;
	color: #666;
}

.wb-product-modifiers__length-error {
	margin: 0;
	color: var(--wb-modifier-required, #b60205);
	font-size: 0.875rem;
}

/* Live summary panel is hidden — the calculated line total now appears
 * inside the Add to cart button instead (per Tony's feedback). The
 * markup stays in the DOM so we can re-enable it later if needed. */
.wb-product-modifiers__length-summary {
	display: none !important;
}

/* "/m" suffix on the headline product price */
.wb-product-modifiers__price-unit {
	font-size: 0.875em;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.55);
	margin-left: 0.125rem;
}

.wb-atc__error {
	margin: 0.5rem 0 0;
	padding: 0.625rem 0.875rem;
	background: rgba(220, 38, 38, 0.08);
	color: var(--wb-modifier-required, #b91c1c);
	border-radius: 6px;
	font-size: 0.875rem;
	line-height: 1.4;
}