/* Fowler MTO Configurator v2 — pill rows matching legacy .fowler-po__segments.
 *
 * IMPORTANT-NOTE: Elementor's add-to-cart widget injects a rule at specificity
 * (0,4,1) that forces background-color on every <button> inside form.cart, and
 * Hello Elementor's reset.css colors [type="button"] fuchsia #c36. The legacy
 * .fowler-po__segment-btn rules in frontend.css already win via !important,
 * which is reused here unchanged. Per CLAUDE.md: !important allowed when
 * overriding WC/Elementor defaults. */

.fowler-po-mto[hidden] {
	display: none !important;
}

.fowler-po-mto {
	margin: 0 !important;
	font-family: "Barlow Semi Condensed", "Helvetica Neue", sans-serif;
	color: #2D2D2D;
	/* form.cart is display:flex (Elementor) — claim our own row. */
	flex-basis: 100% !important;
	width: 100%;
	min-width: 100%;
}

/* Group section card — Porsche-style contained module per codex review
 * 2026-05-19. Each major group (Finishes / Grip / Optics / Components)
 * gets a soft container with inset padding so it reads as a distinct
 * configurator surface rather than a flat form section.
 *
 * Round 4 Cycle 25 — operator-direct: 20px border-radius added to the
 * group card and the other right-column cards (in frontend.css). The
 * original Round-1 brief was sharp corners ("Fowler hard-edge brand")
 * but the operator pivoted toward Porsche-style soft elevation in this
 * cycle. Shadows kept (operator override on the codex flatten note). */
.fowler-po-mto__group,
.fowler-po-mto__block {
	margin-bottom: 1.5rem;
	padding: 1rem 1rem 1.25rem;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 20px;
	/* Elevation per codex Pass-2 (Cycle 30), deepened Cycle 44, deepened
	 * again in operator-direct edit 2026-05-19 to make cards genuinely
	 * "float" on the page. The negative-spread second shadow concentrates
	 * depth directly beneath each card and gives clear visual separation
	 * even on white-on-white. */
	box-shadow:
		0 2px 8px -2px rgba(10, 10, 10, 0.08),
		0 20px 48px -12px rgba(10, 10, 10, 0.18);
	transition: box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fowler-po-mto__group:hover,
.fowler-po-mto__group:focus-within,
.fowler-po-mto__block:hover,
.fowler-po-mto__block:focus-within {
	box-shadow:
		0 4px 14px -3px rgba(10, 10, 10, 0.12),
		0 32px 64px -16px rgba(10, 10, 10, 0.24);
}

/* Cycle 56 — :focus-within bumps the border-color too so the active
 * card is visually distinct during keyboard navigation. Pairs with the
 * existing tile focus-visible outline (Cycle 14). */
.fowler-po-mto__group:focus-within,
.fowler-po-mto__block:focus-within {
	border-color: #0A0A0A;
}

@media (prefers-reduced-motion: reduce) {
	.fowler-po-mto__group,
	.fowler-po-mto__block { transition: none; }
	/* Cycle 98 — removed the `:hover` override that was lightening the shadow
	 * below the base resting state on hover (backwards visual signal). The
	 * standard deeper hover shadow still applies, just without the transition
	 * — accessible hover feedback without animation. */
}

/* Cycle 85 — removed `.fowler-po-mto__group:last-of-type { margin-bottom: 0 }`.
 * Was paired with Cycle-84's now-removed wrapper padding. Without it the last
 * group card sat flush against the Extras card; restoring the standard 1.5rem
 * margin-bottom matches the rhythm everywhere else in the card stack. */

/* Static group header (Finishes, Grip, Optics) — label on its own line, full-width
 * hairline rule beneath. Porsche-style block heading vs. legacy inline-trailing rule.
 * Inside the card the header has a half-width inset rule so it doesn't fight the
 * outer border. */
.fowler-po-mto__group-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.125rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #E5E7EB;
}

/* Cycle 48 Conductor Round 2 — accent bar removed from group headers. */

/* Collapsible group toggle (Components) — block heading with rule beneath label.
 * Typography matches the static .fowler-po-mto__group-label below — sentence case
 * at 1.125rem so section headers visibly outrank the uppercase field labels.
 *
 * When the group is collapsed (no body visible), drop the trailing rule so the
 * toggle reads as a single-row header inside its card; expanded, the rule
 * separates header from body. */
/* Round 7 — collapsible group title 16px / 700 per codex section C
 * (section/card title spec). Matches `.fowler-po__section-label` so the
 * static-group and collapsible-group titles read at the same rank. */
/* Round 92 — the collapsible "More finishes" toggle now wears a real button skin
 * (bordered, filled, hover-lit, count badge + round chevron chip) so it reads as a
 * pressable control instead of just another section heading. Beta users weren't
 * recognizing it as expandable. */
.fowler-po-mto .fowler-po-mto__group-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem !important;
	width: 100% !important;
	background: #F5F5F5 !important;
	background-color: #F5F5F5 !important;
	border: 1px solid #D8D8D8 !important;
	border-radius: 10px !important;
	padding: 0.7rem 0.9rem !important;
	margin: 0 !important;
	font: inherit;
	font-weight: 700 !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #0A0A0A !important;
	cursor: pointer !important;
	text-align: left !important;
	transition: background-color 180ms ease, border-color 180ms ease !important;
}

.fowler-po-mto .fowler-po-mto__group-toggle:hover {
	background: #ECECEC !important;
	background-color: #ECECEC !important;
	border-color: #0A0A0A !important;
}

.fowler-po-mto .fowler-po-mto__group-toggle[aria-expanded="true"] {
	background: #fff !important;
	background-color: #fff !important;
	border-color: #0A0A0A !important;
	margin-bottom: 0.875rem !important;
}

/* Cycle 87 — removed `.fowler-po-mto__group-toggle:hover { color: #2D2D2D }`.
 * Base text is full black; the rule was DIMMING on hover (backwards signal).
 * The chev color change below (#6B6B6B → #0A0A0A) is the active hover cue. */

/* Cycle 88 — keyboard focus indicator matching the rest of the system
 * (1.5px solid #0A0A0A, 2px offset). Replaces browser default outline. */
.fowler-po-mto .fowler-po-mto__group-toggle:focus-visible {
	outline: 1.5px solid #0A0A0A !important;
	outline-offset: 2px !important;
}

/* Cycle 57 — chevron darkens on toggle hover, not just on aria-expanded.
 * Makes the toggle feel clickable at a glance. Smooth via existing 220ms
 * color transition on the chev. */
.fowler-po-mto .fowler-po-mto__group-toggle:hover .fowler-po-mto__group-chev {
	color: #0A0A0A;
}

/* Round 7 — static group title matches the collapsible toggle: 16/700. */
.fowler-po-mto__group-label {
	font-family: "Barlow Semi Condensed", "Helvetica Neue", sans-serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: #0A0A0A;
	margin: 0;
}

/* Left cluster inside the toggle: label + count badge sit together; the chevron
 * floats right via the button's space-between. */
.fowler-po-mto__group-toggle-main {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

/* Count of component finishes folded behind the toggle — a visible promise of
 * content. JS (mto-configurator.js updateDetailCounts) rewrites it to the number
 * of detail fields actually visible for the current build, so it never overstates. */
.fowler-po-mto__group-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: #0A0A0A;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}
.fowler-po-mto__group-count[hidden] { display: none; }

/* Chevron as a round chip so the toggle reads as a pressable control. The "+"
 * rotates 45deg to an "x" when expanded. */
.fowler-po-mto__group-chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	margin-left: auto;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid #C8C8C8;
	border-radius: 50%;
	background: #fff;
	font-size: 1rem;
	color: #0A0A0A;
	font-weight: 400;
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
		color 220ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fowler-po-mto__group-toggle:hover .fowler-po-mto__group-chev {
	border-color: #0A0A0A;
}

.fowler-po-mto__group-toggle[aria-expanded="true"] .fowler-po-mto__group-chev {
	transform: rotate(45deg);
	color: #0A0A0A;
	border-color: #0A0A0A;
}

.fowler-po-mto__group-body[hidden] {
	display: none;
}

/* MTO fields sit inside groups with the new 2rem inter-group spacing — give
 * each field within a group enough breathing room that the section reads as
 * a rhythm rather than a stack. Matches the legacy 1.5rem post-Cycle-4. */
.fowler-po-mto__field {
	margin-bottom: 1.25rem !important;
}

.fowler-po-mto__field:last-child {
	margin-bottom: 0 !important;
}

.fowler-po-mto__number-wrap {
	display: grid;
	grid-template-columns: minmax(6rem, 8rem) auto;
	align-items: center;
	gap: 0.5rem;
	max-width: 12rem;
}

.fowler-po-mto .fowler-po-mto__number {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid #0A0A0A;
	border-radius: 999px;
	background: #FFFFFF;
	color: #0A0A0A;
	font-family: "Barlow Semi Condensed", "Helvetica Neue", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

.fowler-po-mto .fowler-po-mto__number:focus {
	outline: 1.5px solid #0A0A0A;
	outline-offset: 2px;
}

.fowler-po-mto__unit {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: #4A4A4A;
	text-transform: uppercase;
}

/* Trigger Weight checkbox row (sub-2lb competition request). Reuses the
 * shared .fowler-po__checkbox visuals; this just sets the row off from the
 * "TRIGGER WEIGHT - Default 2.5lbs" label above it. */
.fowler-po-mto__checkbox-wrap {
	margin-top: 0.5rem;
}

.fowler-po-mto__field-note {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: #6B6B6B;
}

.fowler-po-mto__btn-label {
	vertical-align: middle;
}

.fowler-po-mto__field:not(.fowler-po-mto__field--color) .fowler-po__segment-btn .fowler-po__segment-price {
	display: inline-block !important;
	margin-top: 0 !important;
	margin-left: 0.375rem !important;
	vertical-align: baseline !important;
}

/* Cycle 49 Polish D — selected-name subline renders ABOVE the color tile
 * grid. JS updates it live on selection. Replaces the per-tile labels
 * now hidden inside tile bottoms. */
/* Selected finish name above swatches. Raised from 12px so values like
 * "DLC (Black)" read clearly beside the Porsche-style square tiles. */
.fowler-po-mto__selected-name {
	display: block;
	margin: -0.125rem 0 0.5rem;
	font-family: "Barlow Semi Condensed", "Helvetica Neue", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: #4A4A4A;
	letter-spacing: 0;
	line-height: 1.3;
}

/* Cycle 83 — removed legacy `.fowler-po__field--text { margin-top: 1.25rem }`.
 * The rule predated the Cycle-71 Extras card wrapper; with the card the
 * padding-top: 1rem already provides the right gap to Custom Serial. */

/* --- Color fields render as swatch-tile grid (Porsche-style) ---
 * Override the legacy pill row for color-marked fields. Each finish renders
 * as a square tile where the finish color fills the upper area and a white
 * label strip sits below. Selected state = dark frame + inverted strip.
 *
 * Scope: only color fields (.fowler-po-mto__field--color). Non-color fields
 * keep the legacy segmented pill row. The .fowler-po-mto__color-btn class
 * is also applied to color-typed addons in product-options.php (Color row
 * above the MTO checkbox) so those convert to tiles too. */
.fowler-po-mto__field--color .fowler-po-mto__segments,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__segments,
.elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__segments,
.fowler-po__field[data-color-addon="1"] .fowler-po__segments,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
.elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 0.75rem !important;
	background: transparent !important;
	border: 0 !important;
}

@media (min-width: 700px) {
	.fowler-po-mto__field--color .fowler-po-mto__segments,
	.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__segments,
	.elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__segments,
	.fowler-po__field[data-color-addon="1"] .fowler-po__segments,
	.elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
	.elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* Color rows with 4 OR FEWER options drop back to 2-col so the last
	 * row doesn't leave a single tile dangling. The legacy COLOR row has 4
	 * (DLC/FDE/CRN/Suede) — 3-col grid orphans Suede. 2-col balances 4
	 * into two even rows. Selector uses :has() with nth-of-type which is
	 * more compatible across :has() implementations than :not(:has()). */
	.fowler-po-mto__field--color .fowler-po-mto__segments:has(.fowler-po__segment-btn:nth-of-type(4)):not(:has(.fowler-po__segment-btn:nth-of-type(5))),
	.fowler-po__field[data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)):not(:has(.fowler-po__segment-btn:nth-of-type(5))) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Non-color rows with 5+ options (Optic Plate has 6, Components-color
 * fields may have 8+) render as a uniform 3-column grid so the last
 * row doesn't go ragged. Cycle 20 (Round 3) — gap bumped to 0.5rem so
 * the pill aesthetic (8px between pills) carries through; the 1px
 * hairline-divider trick was for the old connected-segmented look.
 * Pills get their border + 999px radius from the base rules. */
.fowler-po__field:not([data-color-addon="1"]) .fowler-po__segments:has(.fowler-po__segment-btn:nth-child(5)),
.fowler-po-mto__field:not(.fowler-po-mto__field--color) .fowler-po-mto__segments:has(.fowler-po__segment-btn:nth-child(5)),
.elementor-widget-woocommerce-product-add-to-cart .fowler-po__field:not([data-color-addon="1"]) .fowler-po__segments:has(.fowler-po__segment-btn:nth-child(5)),
.elementor form.cart .fowler-po__field:not([data-color-addon="1"]) .fowler-po__segments:has(.fowler-po__segment-btn:nth-child(5)) {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 0.5rem !important;
}

/* Reset flex-basis so grid cell sizing wins on the 5+ case. */
.fowler-po__field:not([data-color-addon="1"]) .fowler-po__segments:has(.fowler-po__segment-btn:nth-child(5)) .fowler-po__segment-btn,
.fowler-po-mto__field:not(.fowler-po-mto__field--color) .fowler-po-mto__segments:has(.fowler-po__segment-btn:nth-child(5)) .fowler-po__segment-btn {
	flex: initial !important;
	min-width: 0 !important;
}

/* Cycle 13 — Porsche-style swatch tile. Soft 6px corners, subtle
 * inner-highlight gradient gives the "glossy" depth (top sheen on
 * darker fills, harmless on lights). Selection rings via box-shadow
 * so the tile face remains the full color block. */
.fowler-po-mto__field--color .fowler-po-mto__color-btn,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__color-btn,
.elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__color-btn,
.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
.elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn {
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-end !important;
	padding: 0 !important;
	height: 5.5rem !important;
	min-width: 0 !important;
	border: 1px solid rgba(10, 10, 10, 0.08) !important;
	border-radius: 4px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.06) 100%),
		var(--fpo-fin, #FFFFFF) !important;
	background-color: var(--fpo-fin, #FFFFFF) !important;
	position: relative !important;
	overflow: hidden !important;
	white-space: normal !important;
	transition: border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fowler-po-mto__field--color .fowler-po-mto__color-btn .fowler-po-mto__btn-label,
.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn .fowler-po-mto__btn-label,
.fowler-po-mto__field--color .fowler-po-mto__color-btn .fowler-po__segment-price,
.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn .fowler-po__segment-price {
	transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
		color 220ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cycle 49 Polish D — labels INSIDE color tiles are now hidden. The
 * field renders a "selected-name" subline above the tile grid that
 * updates on click; the customer reads the active selection there
 * instead of inside the tile. This lets the tile fill the visual
 * footprint with finish color, which is the actual differentiator. */
.fowler-po-mto__field--color .fowler-po-mto__color-btn .fowler-po-mto__btn-label,
.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn .fowler-po-mto__btn-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Price annotation is a small PILL in the TOP-RIGHT corner of the tile (was a
 * full-width bottom strip). Keeps the colored fill area dominant and reads as a
 * compact secondary chip. The selection checkmark (::before) also lives
 * top-right, so on the SELECTED tile the pill is hidden and the check owns the
 * corner (rule below) — unselected non-black tiles keep showing +$500. */
.fowler-po-mto__field--color .fowler-po-mto__color-btn .fowler-po__segment-price,
.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn .fowler-po__segment-price {
	position: absolute !important;
	top: 0.4rem !important;
	right: 0.4rem !important;
	z-index: 1 !important;
	display: inline-block !important;
	width: auto !important;
	padding: 0.1rem 0.4rem !important;
	margin: 0 !important;
	min-height: 0 !important;
	font-size: 0.625rem !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: #0A0A0A !important;
	text-align: center !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
	backdrop-filter: blur(2px) !important;
}

/* Selected tile: the checkmark takes the top-right corner, so hide the pill. */
.fowler-po .fowler-po-mto__color-btn.fowler-po__segment-btn--active .fowler-po__segment-price,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__color-btn.fowler-po__segment-btn--active .fowler-po__segment-price,
.elementor form.cart .fowler-po-mto__color-btn.fowler-po__segment-btn--active .fowler-po__segment-price {
	display: none !important;
}

/* Round 3 Cycle 19 — bottom-strip ::after spacer removed. The spacer
 * was originally reserving space for a price chip; Cycle 11 stripped
 * price chips from color swatches plugin-wide so the spacer is dead
 * space. Operator: animated checkmark on the tile face is the only
 * selection feedback we need. */

/* Cycle 13 — Porsche-style checkmark. White circle, dark check, soft
 * elevated shadow for depth on the dark fills. Polished/refined from
 * the cycle-1 version: slightly larger, better contrast, drop-shadow
 * not a 1px ring outline. */
.fowler-po .fowler-po-mto__color-btn::before,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__color-btn::before,
.elementor form.cart .fowler-po-mto__color-btn::before {
	content: "✓";
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: #FFFFFF;
	color: #0A0A0A;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	box-shadow:
		0 1px 2px 0 rgba(0, 0, 0, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.6);
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

/* Light-fill swatches (FDE, TiBn, Suede, Stainless, etc.) flip the
 * check colors so the affordance reads against a near-white background.
 * --light variant set by PHP via the self_finish_is_light() luminance
 * helper. */
.fowler-po .fowler-po-mto__color-btn--light::before,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__color-btn--light::before,
.elementor form.cart .fowler-po-mto__color-btn--light::before {
	background: #0A0A0A;
	color: #FFFFFF;
	box-shadow:
		0 1px 2px 0 rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Round 4 Cycle 25 — swatch hover preserves color.
 *
 * The base `.fowler-po__segment-btn:hover` rule in frontend.css sets
 * `background: #F4F5F7 !important` to give the non-color pills a light
 * grey hover wash; that rule was bleeding through onto color swatches
 * and scrubbing the finish color off the tile face on hover. Operator-
 * direct: color MUST stay visible (the color IS the control).
 *
 * Fix: re-apply the same gradient+var stack used by the swatch base
 * rule so the finish color wins on hover. Pick ONE affordance to
 * signal interactivity (operator: "Subtle is the bar. Don't stack
 * three"). The previous rule stacked transform + 1.5px ring + 16px
 * shadow — three signals. Reduced to the subtle Porsche-style lift
 * alone; ring + dropped shadow removed. Lift works on every fill
 * (dark / mid / light) because it's positional, not contrast-based. */
.fowler-po-mto__field--color .fowler-po-mto__color-btn:hover:not(.fowler-po__segment-btn--active),
.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn:hover:not(.fowler-po__segment-btn--active) {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.06) 100%),
		var(--fpo-fin, #FFFFFF) !important;
	background-color: var(--fpo-fin, #FFFFFF) !important;
	transform: translateY(-2px) !important;
}

/* Focus-visible: a 1.5px dark ring offset 2px outside the tile reads
 * cleanly against the colored fill without conflicting with the dark
 * selection frame. */
.fowler-po-mto__field--color .fowler-po-mto__color-btn:focus-visible,
.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn:focus-visible {
	outline: 1.5px solid #0A0A0A !important;
	outline-offset: 2px !important;
	z-index: 2 !important;
}

/* Cycle 13 — Selected tile: Porsche-style 2px dark selection ring offset
 * 2px outside the tile face (via box-shadow). Keeps the entire tile
 * face the finish color; the ring frames it cleanly. */
.fowler-po .fowler-po-mto__color-btn.fowler-po__segment-btn--active,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__color-btn.fowler-po__segment-btn--active,
.elementor form.cart .fowler-po-mto__color-btn.fowler-po__segment-btn--active {
	border-color: transparent !important;
	box-shadow:
		0 0 0 2px #0A0A0A,
		0 4px 12px -6px rgba(0, 0, 0, 0.30) !important;
	transform: translateY(-1px) !important;
}

.fowler-po .fowler-po-mto__color-btn.fowler-po__segment-btn--active::before,
.elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__color-btn.fowler-po__segment-btn--active::before,
.elementor form.cart .fowler-po-mto__color-btn.fowler-po__segment-btn--active::before {
	opacity: 1;
	transform: scale(1);
}

/* Round 3 Cycle 19 — Active-state black-bar bottom chrome removed.
 * The label strip + price strip + ::after spacer all inverted to
 * #0A0A0A on selection in earlier cycles, creating a black bar across
 * the bottom of the selected tile. Operator: the animated checkmark on
 * the tile face is sufficient feedback; the black bar reads as
 * decorative clutter. The label is hidden anyway (Cycle 49) and the
 * price chip + spacer are both gone (Cycle 11 / Cycle 19), so no
 * further inversion rules are needed. */

/* The "None" button on optional color fields has no --fpo-fin var; render as
 * a plain white tile with a diagonal slash icon overlay so it reads as "none
 * selected" rather than just "white." */
.fowler-po-mto__field--color .fowler-po__segment-btn[data-value=""] {
	background: #F6F6F6 !important;
	background-image: linear-gradient(135deg, transparent calc(50% - 1px), #DCDCDC calc(50% - 1px), #DCDCDC calc(50% + 1px), transparent calc(50% + 1px)) !important;
}

/* --- Legacy active-fill (light-luminance helper) kept for any color buttons
 * that aren't inside a .fowler-po-mto__field--color or data-color-addon
 * container — fallback to the old behavior. */
.fowler-po .fowler-po-mto__color-btn--light.fowler-po__segment-btn--active {
	color: #0A0A0A !important;
}

/* Disabled pill (e.g., Ported on non-P barrel) — show but unselectable.
 * frontend.js already has rules for .fowler-po__segment-btn--disabled (opacity
 * 0.35, cursor not-allowed, pointer-events: none); MTO inherits them. */

/* Cycle 118 — `.fowler-po-sticky-photo` rule REMOVED. Cycle 17's
 * element-ID-based layout (.single-product .elementor-element-ee87da9)
 * has higher specificity AND !important on all sticky-related properties,
 * so it always won the cascade. The sticky-photo class was dead at every
 * viewport. Companion JS class-injection in frontend.js also removed. */

/* Cycle 123 — removed `@media (max-width: 479px) { .fowler-po-mto__group
 * { padding: 0; border: 0 } }`. The override pre-dated the operator's
 * 2026-05-19 shadow deepening (commit 85b9c9a / Cycle 122 propagation).
 * With the deeper rgba(10,10,10,0.18) shadow, stripping border+padding on
 * tiny phones left a floating shadow with nothing to anchor it visually.
 * Restoring the standard 1rem 1rem 1.25rem padding + 1px border at every
 * viewport keeps cards visually coherent. Trade-off: ~32px less content
 * width at <=479px in exchange for visual integrity of the card system. */

@media (prefers-reduced-motion: reduce) {
	.fowler-po-mto__group-body,
	.fowler-po-mto__group-chev,
	.fowler-po-mto__field--color .fowler-po-mto__color-btn,
	.fowler-po-mto__field--color .fowler-po-mto__color-btn::before,
	.fowler-po-mto__field--color .fowler-po-mto__color-btn .fowler-po-mto__btn-label,
	.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
	.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn::before,
	.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn .fowler-po-mto__btn-label {
		transition: none !important;
	}
	.fowler-po-mto__field--color .fowler-po-mto__color-btn:hover:not(.fowler-po__segment-btn--active),
	.fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn:hover:not(.fowler-po__segment-btn--active) {
		transform: none !important;
		box-shadow: none !important;
	}
}

/* Porsche reference parity pass — square finish tiles. The visual reference
 * uses compact square swatches with an 8px radius, not wide two-column panels. */
.single-product .fowler-po-mto__field--color .fowler-po-mto__segments,
.single-product .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__segments,
.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
.single-product .elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__segments,
.single-product .elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(72px, 88px)) !important;
	gap: 12px !important;
	justify-content: start !important;
	align-items: start !important;
}

.single-product .fowler-po-mto__field--color .fowler-po-mto__color-btn,
.single-product .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__color-btn,
.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
.single-product .elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__color-btn,
.single-product .elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn {
	width: 88px !important;
	height: 88px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 8px !important;
}

@media (max-width: 390px) {
	.single-product .fowler-po-mto__field--color .fowler-po-mto__segments,
	.single-product .fowler-po__field[data-color-addon="1"] .fowler-po__segments {
		grid-template-columns: repeat(auto-fill, minmax(68px, 80px)) !important;
		gap: 10px !important;
	}

	.single-product .fowler-po-mto__field--color .fowler-po-mto__color-btn,
	.single-product .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn {
		width: 80px !important;
		height: 80px !important;
	}
}

body.single-product .fowler-po .fowler-po-mto__field--color .fowler-po-mto__segments,
body.single-product .fowler-po .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
body.single-product .fowler-po .fowler-po__field[data-addon-index][data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)):not(:has(.fowler-po__segment-btn:nth-of-type(5))),
body.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__segments,
body.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
body.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)):not(:has(.fowler-po__segment-btn:nth-of-type(5))),
body.single-product .elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__segments,
body.single-product .elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
body.single-product .elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)):not(:has(.fowler-po__segment-btn:nth-of-type(5))) {
	grid-template-columns: repeat(auto-fit, 88px) !important;
	justify-content: start !important;
	column-gap: 12px !important;
	row-gap: 12px !important;
}

body.single-product .fowler-po-mto__field--color .fowler-po-mto__segments {
	grid-template-columns: repeat(auto-fit, 88px) !important;
	gap: 12px !important;
	justify-content: start !important;
	justify-items: start !important;
	align-items: start !important;
}

.fowler-po .fowler-po__segment-btn[hidden],
.elementor-widget-woocommerce-product-add-to-cart .fowler-po__segment-btn[hidden],
.elementor form.cart .fowler-po__segment-btn[hidden] {
	display: none !important;
}

.fowler-po-mto-conflict-modal[hidden] {
	display: none !important;
}

.fowler-po-mto-conflict-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	font-family: "Barlow Semi Condensed", "Helvetica Neue", sans-serif;
}

.fowler-po-mto-conflict-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.58);
}

.fowler-po-mto-conflict-modal__panel {
	position: relative;
	z-index: 1;
	width: min(100%, 26rem);
	padding: 1.5rem;
	background: #FFFFFF;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	box-shadow: 0 24px 64px -24px rgba(10, 10, 10, 0.45);
	color: #0A0A0A;
}

.fowler-po-mto-conflict-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	border: 0 !important;
	border-radius: 999px !important;
	background: #F3F4F6 !important;
	color: #0A0A0A !important;
	font-size: 1.25rem !important;
	line-height: 1 !important;
	cursor: pointer;
}

.fowler-po-mto-conflict-modal__title {
	margin: 0 2rem 0.75rem 0;
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: #0A0A0A;
}

.fowler-po-mto-conflict-modal__copy {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.45;
	color: #2D2D2D;
}

.fowler-po-mto-conflict-modal__action {
	min-height: 2.5rem;
	padding: 0.625rem 1rem !important;
	border: 1px solid #0A0A0A !important;
	border-radius: 999px !important;
	background: #0A0A0A !important;
	color: #FFFFFF !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
}

.fowler-po-mto-conflict-modal__close:focus-visible,
.fowler-po-mto-conflict-modal__action:focus-visible {
	outline: 1.5px solid #0A0A0A !important;
	outline-offset: 2px !important;
}

/* Mobile swatch density -- final cascade owner for MTO color grids. */
@media (max-width: 767px) {
	body.single-product .fowler-po .fowler-po-mto__field--color .fowler-po-mto__segments,
	body.single-product .fowler-po .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
	body.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__segments,
	body.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
	body.single-product .elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__segments,
	body.single-product .elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po__segments {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 10px !important;
		justify-content: stretch !important;
		justify-items: stretch !important;
		align-items: stretch !important;
	}

	body.single-product .fowler-po .fowler-po-mto__field--color .fowler-po-mto__color-btn,
	body.single-product .fowler-po .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
	body.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po-mto__field--color .fowler-po-mto__color-btn,
	body.single-product .elementor-widget-woocommerce-product-add-to-cart .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
	body.single-product .elementor form.cart .fowler-po-mto__field--color .fowler-po-mto__color-btn,
	body.single-product .elementor form.cart .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
	}

	body.single-product.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart .fowler-po .fowler-po-mto__field.fowler-po-mto__field--color .fowler-po-mto__segments,
	body.single-product.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart .fowler-po .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
	body.single-product.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart .fowler-po .fowler-po__field[data-addon-index][data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)),
	body.single-product.single-product .elementor form.cart .fowler-po .fowler-po-mto__field.fowler-po-mto__field--color .fowler-po-mto__segments,
	body.single-product.single-product .elementor form.cart .fowler-po .fowler-po__field[data-color-addon="1"] .fowler-po__segments,
	body.single-product.single-product .elementor form.cart .fowler-po .fowler-po__field[data-addon-index][data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 10px !important;
		justify-content: stretch !important;
		justify-items: stretch !important;
		align-items: stretch !important;
	}

	body.single-product.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart .fowler-po .fowler-po-mto__field.fowler-po-mto__field--color .fowler-po-mto__color-btn,
	body.single-product.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart .fowler-po .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
	body.single-product.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart .fowler-po .fowler-po__field[data-addon-index][data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)) .fowler-po-mto__color-btn,
	body.single-product.single-product .elementor form.cart .fowler-po .fowler-po-mto__field.fowler-po-mto__field--color .fowler-po-mto__color-btn,
	body.single-product.single-product .elementor form.cart .fowler-po .fowler-po__field[data-color-addon="1"] .fowler-po-mto__color-btn,
	body.single-product.single-product .elementor form.cart .fowler-po .fowler-po__field[data-addon-index][data-color-addon="1"] .fowler-po__segments:has(.fowler-po__segment-btn:nth-of-type(4)) .fowler-po-mto__color-btn {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
	}
}

/* ── Hero-block ordering (2026-06-17) ───────────────────────────────── */
/* .fowler-po-mto__block carries the floating-card treatment via the shared
   card rule above (merged with the legacy .fowler-po-mto__group selector). */
.fowler-po-mto__block-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fowler-po-mto__block-head > .fowler-po-mto__group-label {
	margin: 0 0 2px;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}
/* Relocated legacy controls sit flush in the headline like native fields. */
.fowler-po-mto__legacy-slot[hidden] { display: none; }
.fowler-po-mto__legacy-slot .fowler-po__field { margin: 0; }

/* Breathing room between the headline swatches and the "More details" toggle
   (the toggle base rule sets margin:0 !important; #fowler-po anchor wins). */
#fowler-po .fowler-po-mto__block .fowler-po-mto__group-toggle {
	margin-top: 1rem !important;
}
/* Inside the headline, the block-head flex gap is the only spacing. The base
   `.fowler-po-mto__field { margin-bottom: 1.25rem }` predates the flex gap and
   doubles up on NON-last fields (e.g. Slide color above the Optic Plate), so
   the Slide gap read 32px vs 12px elsewhere. Zero it so every card matches. */
#fowler-po .fowler-po-mto__block-head .fowler-po-mto__field {
	margin-bottom: 0 !important;
}

/* Compact swatches inside the collapsed details expander (~25% footprint),
   one field per row so each fits on a single line. Tune sizes during QA. */
.fowler-po-mto__group-body {
	/* Smooth accordion via grid-template-rows 0fr -> 1fr (no JS height measuring).
	   The body is the animation wrapper; .group-body-inner is the overflow clipper
	   that carries the visible box (border/padding/flex), so a collapsed body shows
	   no sliver. JS toggles .is-open (not the `hidden` attr, which is display:none
	   and would kill the transition). */
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 260ms cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fowler-po-mto__group-body.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}
.fowler-po-mto__group-body-inner {
	/* Pure overflow clipper. Carries NO padding/border so a collapsed body
	   (grid row 0fr) is a true 0px -- padding/border on the clipper itself
	   can't be clipped by its own overflow and would leave a sliver. */
	overflow: hidden;
	min-height: 0;
}
.fowler-po-mto__group-body-content {
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fowler-po-mto__group-body .fowler-po-mto__field {
	display: grid;
	grid-template-columns: minmax(96px, 34%) 1fr;
	align-items: center;
	gap: 8px;
	margin: 0;
}
/* The grid `display` above (0,2,0) beats the UA `[hidden]{display:none}`, so a
   JS-hidden detail field (e.g. Magwell on a Kurz grip, or the slick-top
   optic-plate / front-sight toggles) would stay visible. Restore the
   attribute's intent explicitly — same pattern as
   `.fowler-po-mto__group-body[hidden]` above. */
.fowler-po-mto__group-body .fowler-po-mto__field[hidden] {
	display: none !important;
}
.fowler-po-mto__group-body .fowler-po__label-row { margin: 0; }
/* Compact detail-label size. Anchor on #fowler-po (1,2,0) + !important so it wins
   the broad `.single-product .fowler-po__label { font-size: … !important }` rule
   (frontend.css ~3952). Without this the detail labels render at the ~15px headline
   size, and the two longest ("Main Spring Housing", "Front Strut Screws") wrap to two
   lines inside the narrow 34% label column of the details grid — which floats the info
   button off the text and over against the swatch column (reported 2026-07-01). At
   0.8rem every detail label fits one line, so the button stays beside the text. */
#fowler-po .fowler-po-mto__group-body .fowler-po__label,
.fowler-po-mto__group-body .fowler-po__label { font-size: 0.8rem !important; }
.fowler-po-mto__group-body .fowler-po-mto__selected-name { display: none; }
/* Beat the plugin's existing color-grid + swatch sizing, which use
   `grid-template-columns: repeat(2,1fr) !important` on the segments and
   `height: 5.5rem !important` on the color tile (incl. .elementor-* variants
   at 0,3,0). We match that specificity (group-body + field--color + target)
   AND, being appended later, win at equal specificity. Scoped to COLOR fields
   so labeled non-color pills (e.g. Custom Pattern) keep their text. */
/* The plugin's color-grid + tile-size rules pile up specificity via Elementor
   context prefixes (`.elementor form.cart …` = 0,4,1) AND `:has()/:not()`
   responsive variants, so class-only overrides keep losing. Anchor on the
   configurator's `#fowler-po` ID (1,x,x) to win decisively over every
   class-level rule. Scoped to COLOR fields so labeled non-color pills keep
   their text. */
#fowler-po .fowler-po-mto__group-body .fowler-po-mto__field--color .fowler-po-mto__segments {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: wrap;
	gap: 5px;
}
#fowler-po .fowler-po-mto__group-body .fowler-po-mto__field--color .fowler-po-mto__color-btn {
	height: 2.75rem !important;      /* 44px: WCAG/Apple touch-target floor, half the 5.5rem headline swatch */
	width: 2.75rem !important;
	min-width: 0 !important;
	min-height: 0 !important;        /* override the plugin's stacked min-height rules; 44px height is set explicitly above */
	aspect-ratio: auto !important;   /* don't re-derive height from width */
	flex: 0 0 auto !important;
	align-self: center !important;   /* don't stretch to the row height */
}
/* No ✓ badge on the mini swatch (deliberate — reads as junk in the corner).
   The dark selection ring (box-shadow) already marks the active swatch. */
#fowler-po .fowler-po-mto__group-body .fowler-po-mto__field--color .fowler-po-mto__color-btn::before {
	display: none !important;
}
/* Thinner selection ring on the mini swatch. The shared active rule uses a 2px
   box-shadow ring, which reads proportionally heavy on the 44px tile (vs the
   88px headline). Drop it to 1px here; keep the soft drop shadow. */
#fowler-po .fowler-po-mto__group-body .fowler-po-mto__field--color .fowler-po-mto__color-btn.fowler-po__segment-btn--active {
	box-shadow:
		0 0 0 1px #0A0A0A,
		0 4px 12px -6px rgba(0, 0, 0, 0.30) !important;
}
/* Non-color detail pills (Custom Pattern) stay readable — just flow in a row. */
.fowler-po-mto__group-body .fowler-po-mto__field:not(.fowler-po-mto__field--color) .fowler-po__segments {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
/* Color swatches carry no inline text (name lives in the hidden subline). */
.fowler-po-mto__group-body .fowler-po-mto__color-btn .fowler-po-mto__btn-label,
.fowler-po-mto__group-body .fowler-po-mto__color-btn .fowler-po__segment-price { display: none !important; }
@media (max-width: 600px) {
	.fowler-po-mto__group-body .fowler-po-mto__field {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}