/**
 * Guided configurator — atelier restyle (plan items 14 and 14a).
 *
 * Item 14 built the structure: one decision per page, a labelled step tracker,
 * a live order summary. Item 14a makes it read as a private atelier rather than
 * a form: an engraved index rule for the tracker, whole-card selection with an
 * oxblood ring and a check indicator, colour-led swatches with larger shade
 * names, and instructional copy raised to body size.
 *
 * ---------------------------------------------------------------------------
 * STYLING CONSTRAINT — the audit for this file (see the plan's own section).
 *
 * 1. Cascade order was the real hazard here, not specificity. This stylesheet
 *    used to print BEFORE `gravity-forms-theme-framework.min.css`, so every
 *    equal-specificity override of a Gravity Forms choice rule lost silently.
 *    `Longing_Configurator::enqueue_assets()` now declares the sheets this file
 *    contests (`generate-child`, `wc-gravityforms-product-addons` and the four
 *    Gravity Forms theme handles) as dependencies, so WordPress prints it last.
 *    Verify with the <link> order in the head, not by reading the rules.
 *
 * 2. Gravity Forms' framework theme is a token system: nearly everything it
 *    paints resolves through `--gf-*` custom properties declared on
 *    `.gform-theme--api,.gform-theme--framework` (0,1,0). Retinting through
 *    those properties from `.longing-configurator-product .gform-theme--framework`
 *    (0,2,0) is therefore the cheapest correct override in the whole file — it
 *    wins by one class and needs no per-rule duel. Where a *rule* still has to
 *    be beaten, the competitor and its specificity are named inline.
 *
 * 3. The add-ons plugin's `frontend.css` (v3.7.9) carries exactly one selector
 *    this file touches — `form.cart .product_totals` (0,3,1), with border-top
 *    and border-bottom LONGHANDS. Item 1's rule already beats it by doubling
 *    the class; the rule below adds the summary class on top (0,4,1) and sets
 *    longhands against longhands, never a `border:` shorthand.
 *
 * 4. `grep -n "longing-" ` over the add-ons stylesheet and all four Gravity
 *    Forms stylesheets returns nothing, so no `.longing-*` class is contested.
 *
 * 5. No `!important` anywhere in this file. The one place a plugin `!important`
 *    blocked the design — the child theme's legacy `.woocommerce-page .button`
 *    rule — was resolved by scoping that rule out of configurator pages in the
 *    child theme, not by escalating here.
 *
 * @package longing-core
 */

/* ---------------------------------------------------------------------------
 * Palette and rhythm
 *
 * Mirrors the block the child theme declares on `.longing-configurator-product`
 * so the two halves of item 14a share one set of values; declared again here
 * because the configurator markup can also render inside the mobile summary bar
 * which is position:fixed and therefore outside the product subtree.
 * ------------------------------------------------------------------------ */

.longing-configurator-product,
.longing-tracker,
.longing-summary {
	--longing-ink: var(--contrast, #1b1b1b);
	--longing-ink-soft: #3a342e;
	--longing-oxblood: var(--accent, #5c2030);
	--longing-gold: var(--contrast-2, #b89968);
	--longing-card: #fbf6ec;
	--longing-card-raised: #fffcf6;
	--longing-rule: #ded2bc;
	--longing-rule-fine: #e9dfcc;
	--longing-meta: #6f6257;
}

/* ---------------------------------------------------------------------------
 * Gravity Forms token retint
 *
 * Two competing declarations, and the second is why this block targets a
 * descendant rather than the wrapper:
 *   1. `.gform-theme--api,.gform-theme--framework` (0,1,0) in the framework
 *      sheet sets --gf-color-primary to #204ce5.
 *   2. Gravity Forms also prints a per-form inline <style> —
 *      `#gform_wrapper_6[data-form-index="0"].gform-theme` (1,2,0) — carrying
 *      the form's own theme colour, #4f46e5. That ID beats any class selector
 *      on the same element, which is what left every checked control and the
 *      Continue button indigo after the first pass.
 * Custom properties inherit, so the fix is proximity rather than specificity:
 * declaring them on `form.cart` — a descendant of the wrapper that contains
 * every control, the page footer and the price block — means the inner
 * declaration simply wins for everything inside, with no ID and no form number
 * hardcoded into CSS. The wrapper-level rule stays for the handful of Gravity
 * Forms surfaces that render outside `form.cart`.
 * ------------------------------------------------------------------------ */

.longing-configurator-product .gform-theme--framework,
.longing-configurator-product .gform_wrapper form.cart {
	--gf-color-primary: var(--longing-oxblood);
	--gf-color-primary-rgb: 92, 32, 48;
	--gf-color-primary-contrast: var(--base-2, #f4ecdf);
	--gf-color-in-ctrl-primary: var(--longing-oxblood);
	--gf-color-in-ctrl-primary-contrast: var(--base-2, #f4ecdf);
	--gf-ctrl-choice-check-color: var(--longing-oxblood);
	--gf-ctrl-accent-color: var(--longing-oxblood);
	--gf-ctrl-border-color-focus: var(--longing-oxblood);
	--gf-ctrl-outline-color-focus: rgba(92, 32, 48, 0.55);

	/* Fine borders, not soft ones — the brief keeps the gothic character on the
	   frame while the controls stay clean. */
	--gf-radius: 2px;
	--gf-ctrl-radius: 2px;

	/* Swatches are the colour-led part of the experience, so they get their own
	   grid below; releasing the fixed 200px track is what lets them fill the
	   step column instead of sitting in a ragged 200px row. */
	--gf-field-img-choice-size: auto;
	--gf-field-img-choice-gap: 20px;
	--gf-field-img-choice-card-space: 10px;
	--gf-field-img-choice-margin-y-end: 12px;
	--gf-field-img-choice-shadow: none;
	--gf-field-img-choice-shadow-hover: none;

	/* The check indicator: GF composes it from an icon-font glyph. Swapping the
	   font to `inherit` and the glyph to a literal ✓ keeps its geometry and its
	   `:has(input:checked)` trigger while removing the dependency on the icon
	   font rendering — and it is a pure custom-property override, so it beats
	   the plugin's `font-family: var(--gf-icon-font-family) !important` without
	   an `!important` of its own. */
	--gf-icon-font-family: inherit;
	--gf-icon-ctrl-checkbox: "\2713";
	--gf-field-img-choice-check-ind-icon: "\2713";
	--gf-field-img-choice-check-ind-icon-size: 18px;
	--gf-field-img-choice-check-ind-size: 32px;
	--gf-field-img-choice-check-ind-size-md: 32px;
	--gf-field-img-choice-check-ind-icon-size-md: 17px;
	--gf-field-img-choice-check-ind-shadow: none;
	--gf-field-img-choice-card-check-ind-bg-color: var(--longing-oxblood);
	--gf-field-img-choice-card-check-ind-icon-color: var(--base-2, #f4ecdf);

	/* Continue / Back. Gravity Forms paints its buttons entirely from these
	   tokens — height, padding, radius, type and colour all come through
	   --gf-ctrl-btn-*, which is why writing `background-color` and
	   `border-radius` straight onto `.gform_next_button` changed nothing that
	   the tokens also control (measured: the button kept its 38px token height
	   and 6px token radius while the same rule's `order` landed). Driving the
	   tokens instead is both the mechanism the theme intends and the only route
	   that survives the per-form inline <style>, which sets these very tokens on
	   the wrapper and is therefore beaten here by proximity. The result is the
	   site's own pill: filled oxblood primary, gold on hover (item 4's pairing),
	   ghost secondary. */
	--gf-ctrl-btn-radius: 50px;
	--gf-ctrl-btn-size: 56px;
	--gf-ctrl-btn-padding-x: 34px;
	--gf-ctrl-btn-font-size: 15px;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-letter-spacing: 0.13em;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-border-width-primary: 2px;
	--gf-ctrl-btn-border-width-secondary: 2px;
	--gf-ctrl-btn-border-style-primary: solid;
	--gf-ctrl-btn-border-style-secondary: solid;

	--gf-ctrl-btn-bg-color-primary: var(--longing-oxblood);
	--gf-ctrl-btn-color-primary: var(--base-2, #f4ecdf);
	--gf-ctrl-btn-border-color-primary: var(--longing-oxblood);
	--gf-ctrl-btn-bg-color-hover-primary: var(--longing-gold);
	--gf-ctrl-btn-color-hover-primary: var(--longing-ink);
	--gf-ctrl-btn-border-color-hover-primary: var(--longing-gold);
	--gf-ctrl-btn-bg-color-focus-primary: var(--longing-oxblood);
	--gf-ctrl-btn-color-focus-primary: var(--base-2, #f4ecdf);
	--gf-ctrl-btn-border-color-focus-primary: var(--longing-oxblood);

	--gf-ctrl-btn-bg-color-secondary: transparent;
	--gf-ctrl-btn-color-secondary: var(--longing-oxblood);
	--gf-ctrl-btn-border-color-secondary: var(--longing-rule);
	--gf-ctrl-btn-bg-color-hover-secondary: transparent;
	--gf-ctrl-btn-color-hover-secondary: var(--longing-oxblood);
	--gf-ctrl-btn-border-color-hover-secondary: var(--longing-oxblood);
	--gf-ctrl-btn-bg-color-focus-secondary: transparent;
	--gf-ctrl-btn-color-focus-secondary: var(--longing-oxblood);
	--gf-ctrl-btn-border-color-focus-secondary: var(--longing-oxblood);

	/* Keyboard focus ring for the Gravity Forms buttons. Measured: the theme
	   resolves --gf-local-outline-width to 3px on focus but the used outline
	   width stays 0, so an `outline` declaration on the button never paints —
	   the ring the theme actually renders is this shadow token. Oxblood halo at
	   3px, which reads against both the filled and the ghost pill. */
	--gf-ctrl-btn-shadow-focus: 0 0 0 3px rgba(92, 32, 48, 0.55);
	--gf-ctrl-btn-shadow-focus-simple: 0 0 0 3px rgba(92, 32, 48, 0.55);
}

/* ---------------------------------------------------------------------------
 * The step tracker — an engraved index
 *
 * The signature element. A single hairline runs the width of the layout with
 * every step's name hung beneath its own segment; the segment inks itself
 * oxblood as the shopper advances, so progress is drawn by the rule rather than
 * by a bar sitting on top of it. Numbering is kept because the content really
 * is an ordered sequence — the shopper is told where they are in it.
 *
 * Nine steps (the blend path) fit on one line because the tracker is rendered
 * as a child of `div.product` and spans both columns of the split.
 * ------------------------------------------------------------------------ */

.longing-tracker {
	margin: 0 0 40px;
	padding: 0;
}

.longing-tracker__list {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: longing-step;
}

.longing-tracker__item {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--longing-rule);
	counter-increment: longing-step;
}

/* The marker that sits on the rule. Hollow for a step not yet reached, filled
   oxblood for the step in hand — a shape difference, so the state is never
   carried by colour alone. */
.longing-tracker__step::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border: 1px solid var(--longing-rule);
	background-color: var(--base-2, #f4ecdf);
	transform: rotate(45deg);
}

/* Doubled class: GeneratePress's own button base rule —
   `button:not(.menu-toggle), html input[type="button"], …` — carries a class
   in its `:not()` argument, so it resolves to (0,1,1) and beats a plain
   `.longing-tracker__step` (0,1,0) for every JS-rendered step that renders as
   a real `<button>` (any completed, non-current step). Measured: those steps
   computed at 19px/Cormorant Garamond/1.5 line-height from that rule instead
   of this one's 12px/inherit/1.25 — the entry step and the upcoming `<span>`
   steps were never a `<button>`, so they were never touched and read smaller
   by comparison. Doubling the class here is (0,2,0), which wins outright with
   no `!important`. */
.longing-tracker__step.longing-tracker__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	width: 100%;
	margin: 0;
	padding: 19px 16px 17px 0;
	border: 0;
	background: none;
	color: var(--longing-meta);
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
}

/* The step number, set as a small tabular figure above the name. */
.longing-tracker__name::before {
	content: counter(longing-step, decimal-leading-zero) " ";
	margin-right: 6px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	opacity: 0.55;
}

.longing-tracker__item--entry {
	counter-increment: none;
}

.longing-tracker__item--entry .longing-tracker__name::before {
	content: "\2713 ";
	color: var(--longing-gold);
	opacity: 1;
}

.longing-tracker__name {
	display: block;
	overflow: visible;
	max-width: 100%;
	text-overflow: clip;
	white-space: normal;
}

/* Kelly's manual-review consolidation: this used to truncate with an
   ellipsis, which cut off longer shade names ("Yours, Forevermore",
   "Burning Devotion") outright — wraps to a second line instead. The
   tracker still holds one row of *steps* at ~1440 with the 9-step blend
   path: `.longing-tracker__list` never sets `flex-wrap` (default `nowrap`),
   so a step growing taller from a wrapped value cannot push a step onto a
   new row — only its own item gets taller, which `align-items: stretch`
   on the list then matches across the row. */
.longing-tracker__value {
	display: block;
	max-width: 100%;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	color: var(--longing-ink);
}

button.longing-tracker__step,
a.longing-tracker__step {
	cursor: pointer;
}

button.longing-tracker__step:hover,
a.longing-tracker__step:hover {
	color: var(--longing-oxblood);
}

.longing-tracker__step:focus-visible {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: -2px;
}

/* Completed: the rule is inked, the marker becomes a gold check. */
.longing-tracker__item.is-complete {
	border-top-color: var(--longing-oxblood);
}

.longing-tracker__item.is-complete .longing-tracker__step::before {
	border-color: var(--longing-gold);
	background-color: var(--longing-gold);
}

.longing-tracker__item.is-complete .longing-tracker__name::before {
	content: "\2713 ";
	color: var(--longing-gold);
	opacity: 1;
}

.longing-tracker__item--entry {
	border-top-color: var(--longing-oxblood);
}

.longing-tracker__item--entry .longing-tracker__step::before {
	border-color: var(--longing-gold);
	background-color: var(--longing-gold);
}

/* Current: filled oxblood marker, oxblood name, a thicker inked segment. */
.longing-tracker__item.is-current {
	border-top-color: var(--longing-oxblood);
	box-shadow: inset 0 1px 0 0 var(--longing-oxblood);
}

.longing-tracker__item.is-current .longing-tracker__step {
	color: var(--longing-oxblood);
	font-weight: 700;
}

.longing-tracker__item.is-current .longing-tracker__step::before {
	border-color: var(--longing-oxblood);
	background-color: var(--longing-oxblood);
}

.longing-tracker__item.is-upcoming .longing-tracker__step {
	color: #9c8f80;
}

/* ---------------------------------------------------------------------------
 * The step column — hierarchy
 * ------------------------------------------------------------------------ */

/* Active step title. Competing rule: the framework's own label rule sets
   `--gf-local-color` / `--gf-local-font-size` at (0,2,0) via
   `.gform-theme--framework .gform-field-label`; this is (0,5,0) and sets the
   real properties rather than the local variables, so it lands regardless of
   how the framework resolves them. Restricted to top-level field labels — the
   inline (choice) and sub labels keep their own treatment below. */
.longing-configurator-product .gform_wrapper .gform_page .gfield > .gfield_label:not(.gform-field-label--type-inline):not(.gform-field-label--type-sub),
.longing-configurator-product .gform_wrapper .gform_page .gsection .gsection_title,
.longing-configurator-product .gform_wrapper .longing-step-frame__title {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.12;
	color: var(--longing-oxblood);
}

/* Instructional and supporting copy, raised to the site's own body size (22px)
   and to near-ink contrast. This is the "nothing smaller or fainter than body
   copy without a reason" clause: it used to render at 13px in #6b7280, which is
   both smaller and fainter than everything around it. */
.longing-configurator-product .gform_wrapper .gform_page .gfield_description,
.longing-configurator-product .gform_wrapper .gform_page .gsection_description,
.longing-configurator-product .gform_wrapper .longing-form-note,
.longing-configurator-product .gform_wrapper .longing-blend-leadtime,
.longing-configurator-product .gform_wrapper .longing-review__intro {
	max-width: 60ch;
	margin: 0 0 26px;
	padding: 0 0 22px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--longing-rule-fine);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	color: var(--longing-ink-soft);
	opacity: 1;
}

/* The product name has already done its work in the tracker and the running
   selections summary. Repeating it above every classic GF page displaced the
   decision at hand, so the step label is now the first visible heading. */
.longing-configurator-product .summary h1.product_title.entry-title {
	display: none;
}

/* Form 6's old standalone fullness note preceded its Set Weight heading. Its
   equivalent now sits below the heading as that field's translated description,
   keeping every page in the same heading → instruction → divider → options
   order without changing form data or behaviour. */
.longing-configurator-product #field_6_60 {
	display: none;
}

/* A4: italics are reserved for deliberately small accents such as the price
   anchor's “per pack”; decision copy and choice labels remain upright. */
.longing-configurator-product .gform_wrapper .gform_page .gfield_label,
.longing-configurator-product .gform_wrapper .gform_page .gfield_description,
.longing-configurator-product .gform_wrapper .gform_page .gsection_title,
.longing-configurator-product .gform_wrapper .gform_page .gsection_description,
.longing-configurator-product .gform_wrapper .gform_page .gchoice .gform-field-label,
.longing-configurator-product .gform_wrapper .gform_page .longing-form-note,
.longing-configurator-product .gform_wrapper .gform_page .longing-review__intro {
	font-style: normal;
}

/* The one deliberate exception to the size floor: field-level metadata that
   labels rather than instructs — the required marker, the summary's row labels
   and the tracker's step names. Small, letterspaced and uppercase is what makes
   them read as apparatus instead of as copy. */
.longing-configurator-product .gform_wrapper .gfield_required_text.gfield_required_text {
	margin-left: 8px;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--longing-meta);
	vertical-align: middle;
}

.longing-configurator-product .gform_wrapper .gform_page_fields > .gform_fields {
	row-gap: 34px;
}

/* ---------------------------------------------------------------------------
 * Selection surfaces — plain choice fields become cards
 *
 * Competing rules, all in gravity-forms-theme-framework.min.css:
 *   `.gform-theme--framework .gfield--type-choice .gchoice` (0,2,0) sets
 *   `display:inline-grid` with a `minmax(--gf-ctrl-choice-size, max-content)`
 *   first column — the column that holds the bare radio circle;
 *   `.gform-theme--framework .gfield--type-choice .gfield_radio` (0,2,0) sets
 *   the flex column.
 * The selectors below are (0,4,0) plus the `:not()` argument, so they win by
 * two classes, and each sets the same longhand the framework sets.
 *
 * The native control is not removed — it is laid over the whole card at zero
 * opacity, so the card *is* the radio: pointer target, keyboard target, arrow
 * navigation and `:checked` all continue to come from the real input.
 * ------------------------------------------------------------------------ */

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gfield_radio,
.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	flex-direction: row;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice {
	position: relative;
	display: block;
	grid-template-columns: none;
	margin: 0;
	padding: 16px 52px 16px 20px;
	border: 1px solid var(--longing-rule);
	border-radius: 2px;
	background-color: var(--longing-card);
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice:hover {
	border-color: var(--longing-gold);
	background-color: var(--longing-card-raised);
}

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice .gfield-choice-input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: none;
	opacity: 0;
	appearance: none;
	cursor: pointer;
}

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice .gform-field-label {
	display: block;
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--longing-ink);
	cursor: pointer;
}

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice .ginput_price {
	display: block;
	margin-top: 4px;
	font-size: 17px;
	font-weight: 500;
	color: var(--longing-meta);
}

/* Selected: an oxblood ring AND a check mark. Two independent signals, so the
   state survives greyscale, colour-blindness and a printed page. */
.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice:has(.gfield-choice-input:checked) {
	border-color: var(--longing-oxblood);
	background-color: var(--longing-card-raised);
	box-shadow: inset 0 0 0 1px var(--longing-oxblood);
}

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice:has(.gfield-choice-input:checked)::after {
	content: "\2713";
	position: absolute;
	top: 50%;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--longing-oxblood);
	color: var(--base-2, #f4ecdf);
	font-size: 13px;
	line-height: 1;
	transform: translateY(-50%);
}

.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice:has(.gfield-choice-input:focus-visible) {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 3px;
}

/* Colour path is an immediate decision: its two real radio controls are
   intentionally more prominent than ordinary options, with the blend fee as
   supporting (not mandatory-looking) information. The native input remains
   over the complete card; this rule only changes the visual card surface. */
.longing-configurator-product .gform_wrapper .gfield.longing-colour-path-cards .gfield_radio {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.longing-configurator-product .gform_wrapper .gfield.longing-colour-path-cards .gchoice {
	min-height: 136px;
	padding: 28px 56px 28px 24px;
	border-top-color: var(--longing-rule);
	border-right-color: var(--longing-rule);
	border-bottom-color: var(--longing-rule);
	border-left-color: var(--longing-rule);
	background-color: var(--longing-card-raised);
}

.longing-configurator-product .gform_wrapper .gfield.longing-colour-path-cards .gchoice:hover {
	border-top-color: var(--longing-gold);
	border-right-color: var(--longing-gold);
	border-bottom-color: var(--longing-gold);
	border-left-color: var(--longing-gold);
}

/*
 * Keyboard focus. The card's radio is stretched across the whole card at
 * opacity 0, so its own outline is invisible by construction — the ring has to
 * be drawn on the .gchoice instead. Without this rule a keyboard user gets no
 * focus indicator at all, and item 41 requires these cards to be operable by
 * keyboard, not only pointer. Same `:has(... :focus-visible)` pattern the
 * image-choice cards already use further down this file, so the two card
 * families focus identically. `:focus-visible` rather than `:focus` keeps the
 * ring off pointer clicks.
 */
.longing-configurator-product .gform_wrapper .gfield.longing-colour-path-cards .gchoice:has(input:focus-visible) {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 3px;
}

.longing-configurator-product .gform_wrapper .gfield.longing-colour-path-cards .longing-colour-path-card__fee {
	display: block;
	margin-top: 10px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--longing-meta);
}

/* Field 22 itself advances immediately. Preserve the normal Back control on
   this page, but remove the now-redundant Next/Continue control. */
.longing-configurator-product .gform_wrapper #gform_page_3_3 .gform_next_button {
	display: none;
}

/* Field 11's section description holds two paragraphs: this eligibility note
   and the limits note beside it. The limits note carries no rule of its own and
   so inherits the shared instructional treatment above (22px / 1.5 /
   --longing-ink-soft); this one was set 19px / 1.45 / --longing-ink, so the two
   sat side by side in visibly different type. They are the same kind of copy
   and now read as one voice. Longhands, and the values restated rather than
   left to inheritance, per this file's override discipline. The bottom margin
   is the paragraph gap its sibling gets from the theme's own `p` rule. */
.longing-configurator-product .gform_wrapper .longing-blend-eligibility {
	margin: 0 0 33px;
	font-size: 22px;
	font-style: normal;
	line-height: 1.5;
	color: var(--longing-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Colour swatches
 *
 * The image-choice field already renders a card and a `:has(input:checked)`
 * check indicator; item 14a releases its fixed 200px track so the swatches fill
 * the step column, hides the bare radio that sat beside each shade name, and
 * doubles the shade name's size — the brief's "larger shade names".
 * ------------------------------------------------------------------------ */

.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gfield_radio,
.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}

/* Base, hover and selected card. Scoped through the three appearance classes the
   field carries (0,6,0 / 0,8,0 with :has) rather than the one that names the
   field type: at (0,4,0)/(0,6,0) the selected ring measured as not applied while
   the check badge from the same rule set did, so the margin was taken clear of
   the framework's own card rules rather than left level with them. */
.longing-configurator-product .gform_wrapper .gfield--type-image_choice.gfield--image-choice-appearance-card.gfield--image-choice-style-square .gchoice {
	inline-size: auto;
	min-inline-size: 0;
	max-inline-size: none;
	border-color: var(--longing-rule);
	background-color: var(--longing-card);
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.longing-configurator-product .gform_wrapper .gfield--type-image_choice.gfield--image-choice-appearance-card.gfield--image-choice-style-square .gchoice:hover {
	border-color: var(--longing-gold);
	background-color: var(--longing-card-raised);
}

/* The bare radio circle beside the shade name — the exact thing the brief
   forbids. The input is kept and laid over the whole card instead. */
.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-inner {
	display: block;
	grid-template-columns: none;
}

.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gchoice .gfield-choice-input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	opacity: 0;
	appearance: none;
	cursor: pointer;
}

.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gchoice .gform-field-label {
	display: block;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--longing-ink);
	cursor: pointer;
}

/* Gravity Forms prints the choice label inside the same card as its invisible
   full-card radio. The descriptor is inserted there through its
   `gform_field_choice_markup_pre_render` hook, preserving the click target and
   focus ring while keeping the client-supplied Level & Tone text legible. */
.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gchoice .longing-shade-descriptor {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	color: var(--longing-meta);
}

.longing-configurator-product .gform_wrapper .gfield--type-image_choice.gfield--image-choice-appearance-card.gfield--image-choice-style-square .gchoice:has(.gfield-choice-input:checked) {
	border-top-color: var(--longing-oxblood);
	border-right-color: var(--longing-oxblood);
	border-bottom-color: var(--longing-oxblood);
	border-left-color: var(--longing-oxblood);
	background-color: var(--longing-card-raised);
	box-shadow: inset 0 0 0 1px var(--longing-oxblood);
}

.longing-configurator-product .gform_wrapper .gfield--type-image_choice.gfield--image-choice-appearance-card.gfield--image-choice-style-square .gchoice:has(.gfield-choice-input:focus-visible) {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Finished-shade collection disclosure (plan item 42)
 *
 * Collection choices remain their original Gravity Forms radio/select inputs.
 * The added arrow, “on this page” hint and expanded state make their in-place
 * behaviour explicit, while the full-size native control (or a real enhanced
 * button for form 6's select) preserves touch and keyboard parity.
 * ------------------------------------------------------------------------ */

.longing-configurator-product .gform_wrapper .longing-collection-selector.longing-collection-selector .gchoice,
.longing-configurator-product .gform_wrapper .longing-collection-buttons .longing-collection-button.longing-collection-button {
	position: relative;
	min-height: 104px;
	padding-top: 18px;
	padding-right: 58px;
	padding-bottom: 18px;
	padding-left: 20px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: var(--longing-rule);
	border-right-color: var(--longing-rule);
	border-bottom-color: var(--longing-rule);
	border-left-color: var(--longing-rule);
	border-radius: 2px;
	background-color: var(--longing-card);
	color: var(--longing-ink);
	text-align: left;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.longing-configurator-product .gform_wrapper .longing-collection-selector.longing-collection-selector .gchoice::before,
.longing-configurator-product .gform_wrapper .longing-collection-buttons .longing-collection-button.longing-collection-button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 23px;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-68%) rotate(45deg);
}

.longing-configurator-product .gform_wrapper .longing-collection-selector.longing-collection-selector .gchoice:hover,
.longing-configurator-product .gform_wrapper .longing-collection-buttons .longing-collection-button.longing-collection-button:hover {
	border-top-color: var(--longing-gold);
	border-right-color: var(--longing-gold);
	border-bottom-color: var(--longing-gold);
	border-left-color: var(--longing-gold);
	background-color: var(--longing-card-raised);
}

.longing-configurator-product .gform_wrapper .longing-collection-selector.longing-collection-selector .gchoice.is-expanded,
.longing-configurator-product .gform_wrapper .longing-collection-buttons .longing-collection-button.longing-collection-button.is-expanded {
	border-top-color: var(--longing-oxblood);
	border-right-color: var(--longing-oxblood);
	border-bottom-color: var(--longing-oxblood);
	border-left-color: var(--longing-oxblood);
	background-color: var(--longing-card-raised);
	box-shadow: inset 0 0 0 1px var(--longing-oxblood);
}

.longing-configurator-product .gform_wrapper .longing-collection-selector.longing-collection-selector .gchoice.is-expanded::before,
.longing-configurator-product .gform_wrapper .longing-collection-buttons .longing-collection-button.longing-collection-button.is-expanded::before {
	transform: translateY(-32%) rotate(225deg);
}

/* The underlying collection radios are full-card inputs at opacity zero, so
   their own outline cannot paint. Draw the established card-family focus ring
   on the visible surface in the same edit as its hover state. */
.longing-configurator-product .gform_wrapper .longing-collection-selector.longing-collection-selector .gchoice:has(input:focus-visible),
.longing-configurator-product .gform_wrapper .longing-collection-buttons .longing-collection-button.longing-collection-button:focus-visible,
.longing-configurator-product .gform_wrapper .longing-colour-picker-summary:focus-visible {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 3px;
}

.longing-configurator-product .gform_wrapper .longing-collection-choice__hint,
.longing-configurator-product .gform_wrapper .longing-collection-button__hint {
	display: block;
	margin-top: 7px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--longing-meta);
}

.longing-configurator-product .gform_wrapper .longing-collection-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 12px;
}

.longing-configurator-product .gform_wrapper .longing-collection-buttons .longing-collection-button {
	width: 100%;
	font-family: inherit;
	cursor: pointer;
}

.longing-configurator-product .gform_wrapper .longing-collection-button__name {
	display: block;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}

/* This class is only added after the real button list has been created. The
   select remains in the form (and thus posts and validates normally); without
   JavaScript its native control remains visible and usable. */
.longing-configurator-product .gform_wrapper .longing-collection-select--enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.longing-configurator-product .gform_wrapper .is-longing-colour-picker-collapsed {
	display: none;
}

/* The summary is a <button>, and the colour-path one is inserted as a direct
   child of `.gform_fields` — which is Gravity Forms' twelve-column grid. Two
   consequences had to be handled, both measured on the Genius Wefts colour
   step:

   1. Width. Without a span the button auto-placed into a single 1/12 track and
      measured 188px inside a 680px column, so the label and the descriptor
      wrapped to roughly one word per line. `grid-column: 1 / -1` is what the
      `.gfield` siblings get; it is inert for the blend-path summary, which is
      inserted inside its own field rather than into the grid.
   2. Paint. The theme framework's button rules
      (`.gform-theme.gform-theme--framework.gform_wrapper :where(…) > button…`)
      compute to (0,5,1) and drive sixteen properties off the --gf-ctrl-btn-*
      tokens this file sets at the top, so they beat this (0,3,0) block and
      repainted the card as the oxblood CTA pill: cream text on oxblood for the
      descriptor (1.6:1) and oxblood-on-oxblood for EDIT. Rather than restate
      all sixteen at higher specificity, the button carries Gravity Forms' own
      `gform-theme__disable-framework` opt-out class (added in configurator.js
      and blend-preview.js), which is named in the `:not()` guard of every
      framework rule — so the whole family stops matching and this block lands
      as written. Measured after: descriptor 5.8:1, EDIT 11.9:1 on the card. */
.longing-configurator-product .gform_wrapper .longing-colour-picker-summary {
	display: flex;
	align-items: center;
	grid-column: 1 / -1;
	width: 100%;
	gap: 14px;
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--longing-oxblood);
	border-radius: 2px;
	background-color: var(--longing-card-raised);
	font-family: inherit;
	color: var(--longing-ink);
	text-align: left;

	/* Kept from the framework paint deliberately: the label reads as one of the
	   configurator's small caps lines, and the descriptor below resets it. */
	text-transform: uppercase;
	cursor: pointer;
}

.longing-configurator-product .gform_wrapper .longing-colour-picker-summary:hover {
	border-color: var(--longing-gold);
	box-shadow: inset 0 0 0 1px var(--longing-gold);
}

/* Item 45 uses item 42's summary vocabulary. The real radios remain enabled
   and submitted; only their visual library is hidden after a choice. */
.longing-configurator-product .gform_wrapper .is-longing-blend-picker-collapsed .ginput_container {
	display: none;
}

.longing-configurator-product .gform_wrapper .longing-blend-picker-summary:focus-visible,
.longing-configurator-product .gform_wrapper .longing-blend-conflict__choice:focus-visible,
.longing-configurator-product .gform_wrapper .longing-blend-conflict__close:focus-visible {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 3px;
}

/* Inserted by blend-preview.js after the root-depth `.gfield`, which makes it a
   direct child of Gravity Forms' twelve-column `.gform_fields` grid — the same
   placement as the colour-picker summary, and the same consequence: with no
   span it auto-placed into one 1/12 track and the dialog measured 154px inside
   a 680px column. Its two button types carry the framework opt-out class for
   the paint half of that problem; see the summary block above. */
.longing-configurator-product .gform_wrapper .longing-blend-conflict {
	grid-column: 1 / -1;
	margin: 18px 0;
	padding: 20px;
	border: 1px solid var(--longing-oxblood);
	border-radius: 2px;
	background-color: var(--longing-card-raised);
}

.longing-configurator-product .gform_wrapper .longing-blend-conflict h3 {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.3;
}

.longing-configurator-product .gform_wrapper .longing-blend-conflict p {
	margin: 0 0 16px;
	line-height: 1.5;
}

.longing-configurator-product .gform_wrapper .longing-blend-conflict__choice,
.longing-configurator-product .gform_wrapper .longing-blend-conflict__close {
	margin: 0 10px 10px 0;
	padding: 10px 14px;
	border: 1px solid var(--longing-rule);
	border-radius: 2px;
	background-color: var(--longing-card);
	font-family: inherit;
	font-weight: 600;
	color: var(--longing-ink);
	cursor: pointer;
}

.longing-configurator-product .gform_wrapper .longing-blend-conflict__choice:hover,
.longing-configurator-product .gform_wrapper .longing-blend-conflict__close:hover {
	border-color: var(--longing-gold);
	background-color: var(--longing-card-raised);
}

.longing-configurator-product .gform_wrapper .longing-colour-picker-summary__swatch {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.longing-configurator-product .gform_wrapper .longing-colour-picker-summary__copy {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	min-width: 0;
}

.longing-configurator-product .gform_wrapper .longing-colour-picker-summary__label {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.longing-configurator-product .gform_wrapper .longing-colour-picker-summary__edit {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--longing-oxblood);
}

.longing-configurator-product .gform_wrapper .longing-colour-picker-summary__descriptor {
	flex-basis: 100%;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	color: var(--longing-meta);

	/*
	 * The summary block sets `text-transform: uppercase`, which is right for its
	 * compact "Selected shade:" label but inherits onto this descriptor. These
	 * are full sentences with punctuation, supplied verbatim by the client
	 * (C4: "use the exact spreadsheet wording"), so shouting them both fights
	 * that wording and works against A4's easier-to-scan goal. Reset it here so
	 * the label keeps its treatment and the sentence reads as written.
	 */
	text-transform: none;
}

/* ---------------------------------------------------------------------------
 * Locked Signatures panel (blend path)
 *
 * Item 11 styled this in the child theme; item 14a raises its copy to the same
 * size floor as the rest of the instructional text and gives the unavailability
 * a visible statement of its own, so the meaning no longer rests on greyscale.
 * The child theme's block is (0,2,0)–(0,3,0) and now prints earlier, so these
 * (0,3,0)–(0,4,0) selectors win on specificity as well as on order.
 * ------------------------------------------------------------------------ */

.longing-configurator-product .gform_wrapper .longing-blend-locked {
	padding: 22px 24px;
	border-color: var(--longing-rule);
	background-color: rgba(222, 210, 188, 0.16);
}

.longing-configurator-product .gform_wrapper .longing-blend-locked__status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--longing-oxblood);
}

.longing-configurator-product .gform_wrapper .longing-blend-locked__status-mark {
	display: block;
	width: 9px;
	height: 9px;
	border: 1px solid var(--longing-oxblood);
	background-color: transparent;
	transform: rotate(45deg);
}

.longing-configurator-product .gform_wrapper .longing-blend-locked__intro {
	max-width: 60ch;
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.5;
	color: var(--longing-ink-soft);
	opacity: 1;
}

.longing-configurator-product .gform_wrapper .longing-blend-locked__name {
	margin-top: 8px;
	font-size: 17px;
	color: var(--longing-ink-soft);
	opacity: 1;
}

.longing-configurator-product .gform_wrapper .longing-blend-locked__tag {
	margin-top: 5px;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--longing-meta);
}

/* ---------------------------------------------------------------------------
 * Text and number inputs
 * ------------------------------------------------------------------------ */

.longing-configurator-product .gform_wrapper .gform_page input[type="number"],
.longing-configurator-product .gform_wrapper .gform_page input[type="text"],
.longing-configurator-product .gform_wrapper .gform_page select {
	height: auto;
	padding: 12px 16px;
	border: 1px solid var(--longing-rule);
	border-radius: 2px;
	background-color: var(--longing-card-raised);
	font-family: inherit;
	font-size: 21px;
	font-variant-numeric: tabular-nums;
	color: var(--longing-ink);
}

.longing-configurator-product .gform_wrapper .gform_page input[type="number"]:focus-visible,
.longing-configurator-product .gform_wrapper .gform_page input[type="text"]:focus-visible,
.longing-configurator-product .gform_wrapper .gform_page select:focus-visible {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 2px;
	border-color: var(--longing-oxblood);
}

.longing-quantity-step .ginput_container_number input {
	max-width: 140px;
}

/* A11 quantity control. Gravity Forms sets number-input dimensions and button
   tokens later in the cascade, so the field class is doubled and every
   contested longhand is set explicitly. */
.longing-configurator-product .gform_wrapper .longing-quantity-step.longing-quantity-step .longing-quantity-stepper {
	display: inline-grid;
	grid-template-columns: 48px 72px 48px;
	align-items: stretch;
}

.longing-configurator-product .gform_wrapper .longing-quantity-step.longing-quantity-step .longing-quantity-stepper input[type="number"] {
	width: 72px;
	max-width: none;
	height: 48px;
	margin: 0;
	padding-top: 0;
	padding-right: 8px;
	padding-bottom: 0;
	padding-left: 8px;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 1px;
	border-left-width: 0;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: var(--longing-rule);
	border-bottom-color: var(--longing-rule);
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
}

.longing-configurator-product .gform_wrapper .longing-quantity-step.longing-quantity-step .longing-quantity-stepper input[type="number"]::-webkit-inner-spin-button,
.longing-configurator-product .gform_wrapper .longing-quantity-step.longing-quantity-step .longing-quantity-stepper input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.longing-configurator-product .gform_wrapper .longing-quantity-step.longing-quantity-step .longing-quantity-stepper__button.longing-quantity-stepper__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border-width: 1px;
	border-style: solid;
	border-color: var(--longing-rule);
	border-radius: 0;
	background-color: var(--longing-card-raised);
	font-family: inherit;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--longing-oxblood);
	cursor: pointer;
}

.longing-configurator-product .gform_wrapper .longing-quantity-step.longing-quantity-step .longing-quantity-stepper__button.longing-quantity-stepper__button:focus-visible {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 2px;
}

.longing-configurator-product .gform_wrapper .longing-quantity-step.longing-quantity-step .longing-quantity-stepper__button.longing-quantity-stepper__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Item 37: a new, unpainted description surface; no Gravity Forms rule
   targets `.longing-total-hair-weight`, so no cascade competitor exists. */
.longing-configurator-product .gform_wrapper .longing-total-hair-weight {
	margin: 14px 0 0;
	font-size: 19px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	color: var(--longing-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Buttons
 *
 * Gravity Forms' Continue / Back buttons are painted from the --gf-ctrl-btn-*
 * tokens set in the token block above, so only the things the theme does not
 * tokenise are set here: where the footer sits, which button comes first, and
 * the focus ring.
 *
 * WooCommerce's Add to Cart button on the final page is NOT a Gravity Forms
 * button and carries no tokens, so it is styled directly. Competing rules:
 * `.woocommerce ... button.button` in woocommerce.css (0,3,1) and the child
 * theme's legacy `.woocommerce-page .button` (0,2,0 with `!important`) — the
 * latter is scoped out of configurator pages in the child theme, so the (0,4,1)
 * selector below wins the rest on specificity with no `!important` here.
 * ------------------------------------------------------------------------ */

.longing-configurator-product .gform_wrapper .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 34px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--longing-rule-fine);
}

/* Size and padding do NOT come through the tokens: the per-form inline <style>
   declares --gf-ctrl-btn-size-md / -font-size-md / -padding-x-md on the button
   ELEMENT (not on the wrapper), so neither a wrapper-level nor a form-level
   re-declaration reaches them — proximity goes the wrong way. They are set as
   real properties instead, on a selector built from every class the button and
   its wrapper actually carry: (0,7,0) against the framework's
   `.gform-theme--framework.gform-theme.gform_wrapper .button:where(…)` at
   (0,4,0). A (0,5,0) version of this rule measured as having no effect on
   font-size, padding or height while the same rule's `order` landed, so the
   margin was taken well clear rather than left at one class. Confirmed by
   computed values: 56px min-height, 34px padding-inline, 15px. */
.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_next_button.gform-theme-button.button,
.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_previous_button.gform-theme-button.button {
	height: auto;
	min-height: 56px;
	padding: 16px 34px;
	font-size: 15px;
	line-height: 1.2;
}

.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_next_button.gform-theme-button.button {
	order: 2;
}

.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_previous_button.gform-theme-button.button {
	order: 1;
	border-color: var(--longing-rule);
}

.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_previous_button.gform-theme-button.button:hover {
	border-color: var(--longing-oxblood);
}

.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_next_button.gform-theme-button.button:focus-visible,
.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_previous_button.gform-theme-button.button:focus-visible,
.longing-configurator-product form.cart .single_add_to_cart_button.single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 3px;
}

/* The summary card is the button's immediate predecessor on the Review page,
   and both are direct children of `form.cart` — so with margin:0 the pill sat
   flush against the card's bottom edge, and the form's own 44px bottom margin
   was all that separated it from the footer. Longhands (not a shorthand) so
   this stays consistent with the rest of the file's override discipline. */
.longing-configurator-product form.cart .single_add_to_cart_button.single_add_to_cart_button {
	width: auto;
	margin-top: 32px;
	margin-right: 0;
	margin-bottom: 24px;
	margin-left: 0;
	padding: 17px 34px;
	border-width: 2px;
	border-style: solid;
	border-color: var(--longing-oxblood);
	border-radius: 50px;
	background-color: var(--longing-oxblood);
	color: var(--base-2, #f4ecdf);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.longing-configurator-product form.cart .single_add_to_cart_button.single_add_to_cart_button:hover {
	border-color: var(--longing-gold);
	background-color: var(--longing-gold);
	color: var(--longing-ink);
}

/* ---------------------------------------------------------------------------
 * Live order summary
 * ------------------------------------------------------------------------ */

.longing-summary {
	max-width: none;
	margin: 36px 0 0;
}

.longing-summary__panel {
	padding: 26px 28px;
	border: 1px solid var(--longing-rule);
	border-radius: 2px;
	background-color: var(--longing-card-raised);
	box-shadow: inset 0 0 0 1px var(--base-2, #f4ecdf), inset 0 0 0 2px var(--longing-rule-fine);
}

.longing-summary__title {
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--longing-rule-fine);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--longing-oxblood);
}

.longing-summary__rows {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 20px;
	margin: 0;
}

.longing-summary__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--longing-meta);
}

.longing-summary__value {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 19px;
	line-height: 1.35;
	color: var(--longing-ink);
}

.longing-summary__empty {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 19px;
	font-style: italic;
	color: var(--longing-meta);
}

/* The same oxblood pill used for Continue/Add to Cart, sized down for an
   inline row — a real button treatment rather than the underlined text link
   this used to be, and shared verbatim with `.longing-review__edit` (see that
   selector's own comment) so the live summary and the Review recap can never
   drift apart.
   Two separate collisions, not one:
   1. GeneratePress's own base rule — `button:not(.menu-toggle), html
      input[type="button"], …` — resolves to (0,1,1) via the class in its
      `:not()` argument, which beat a plain `.longing-summary__edit` (0,1,0)
      on every row here that renders as a real `<button>` (every row but the
      Method/Texture entry, which is an `<a>` and was never matched by a
      `button` selector). `.longing-summary__edit.longing-summary__edit` is
      (0,2,0), which clears that one on specificity alone.
   2. Gravity Forms' own Theme Framework carries a second, much higher rule
      inside `.gform_wrapper` — `.gform-theme.gform-theme--framework
      .gform_wrapper … button:not([id*="mceu_"]):not(.mce-open):where(:not
      (.gform-theme-no-framework)…)` — three wrapper classes plus two real
      `:not()` arguments resolve to (0,5,1), which no amount of doubling this
      class beats. This only reaches the Review recap's `<button>` edits (the
      live summary's `<aside>` sits outside `.gform_wrapper` entirely, which
      is why only Review's buttons carried it) — resolved the way the
      framework itself expects: `configurator.js` adds its own documented
      opt-out class, `gform-theme-no-framework`, to every button it creates
      here, so the framework's `:not(.gform-theme-no-framework)` simply stops
      matching rather than needing to be out-specified.
   Measured before either fix: Review's buttons computed 14px / 0-vertical
   padding / 38px height from Gravity Forms' rule (not even GeneratePress's
   19px — Gravity Forms' won first); the Method/Texture `<a>` kept this rule's
   12px throughout, which is why it read smaller by comparison. No
   `!important` used for either collision. */
.longing-summary__edit.longing-summary__edit,
.longing-review__edit.longing-review__edit {
	flex: 0 0 auto;
	margin: 0;
	padding: 7px 16px;
	border: 1px solid var(--longing-oxblood);
	border-radius: 50px;
	background-color: var(--longing-oxblood);
	color: var(--base-2, #f4ecdf);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.longing-summary__edit.longing-summary__edit:hover,
.longing-review__edit.longing-review__edit:hover {
	border-color: var(--longing-gold);
	background-color: var(--longing-gold);
	color: var(--longing-ink);
}

.longing-summary__edit.longing-summary__edit:focus-visible,
.longing-review__edit.longing-review__edit:focus-visible {
	outline: 2px solid var(--longing-oxblood);
	outline-offset: 2px;
}

/* The adopted price block already carries item 1's treatment; only its outer
   framing is neutralised so it sits inside this card rather than beside it.
   Item 1's rule is `form.cart .product_totals.product_totals` (0,3,1); adding
   the summary class makes this (0,4,1), so it wins without !important, and
   every property set here is a longhand facing a longhand. */
form.cart .longing-summary__price .product_totals.product_totals {
	max-width: none;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 16px 0 0;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: solid;
	border-top-color: var(--longing-rule);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

form.cart .longing-summary__price .product_totals.product_totals .wcgfpa_grand_total p.price,
form.cart .longing-summary__price .product_totals.product_totals .wcgfpa_grand_total .formattedTotalPrice {
	font-size: 28px;
	color: var(--longing-oxblood);
}

/* The add-ons plugin's `form.cart .product_totals` (0,2,1) supplies the
   one-pack/set source and rewrites it after every form change. This doubled
   class selector is (0,4,1), so it keeps that source available to its own JS
   while the receipt below is the sole customer-facing price explanation. */
form.cart .longing-summary__price .product_totals.product_totals.longing-receipt-source {
	display: none;
}

.longing-summary__receipt {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--longing-rule);
}

.longing-summary__receipt:empty {
	display: none;
}

.longing-summary__receipt-line,
.longing-summary__receipt-subtotal {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 7px 0;
	font-size: 14px;
	font-style: normal;
	line-height: 1.45;
	color: var(--longing-ink-soft);
}

.longing-summary__receipt-subtotal {
	margin-top: 9px;
	padding-top: 14px;
	border-top: 1px solid var(--longing-rule-fine);
	font-size: 18px;
	font-weight: 700;
	color: var(--longing-oxblood);
}

.longing-summary__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--longing-rule-fine);
}

.longing-summary__line-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--longing-meta);
}

.longing-summary__line-value {
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--longing-oxblood);
	white-space: nowrap;
}

/* The toggle is the mobile affordance only; on desktop the panel is simply
   always open. */
.longing-summary__toggle {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Review recap (plan item 16)
 *
 * Deliberately close kin to the live summary above — same grid, same edit
 * control, same figure/ground — because the Review page is the same "your
 * configuration" information at its final moment, not a different design
 * language. A grep of the add-ons stylesheet and all four Gravity Forms theme
 * sheets for `longing-review` returns nothing, so none of this contests a
 * plugin rule and no doubled-class/longhand defence is needed (the plan's
 * styling-constraint section, checked per its own instruction).
 * ------------------------------------------------------------------------ */

/*
 * Kelly's manual-review consolidation (amends item 16): the recap grid this
 * used to hold (`.longing-review__rows`/`__label`/`__value`/`__empty`, a
 * `<dl>` of every answer with its own Edit controls) duplicated the live
 * "Your configuration" summary rendered alongside the steps — same
 * information, same Edit path, shown twice on the one page where a shopper
 * is deciding whether to buy. Removed; `.longing-review` now wraps only the
 * intro paragraph pointing at the summary. `.longing-review__edit`'s own
 * rules (base, hover, focus) still live with `.longing-summary__edit` above
 * from item 14a's polish pass — left in place even though nothing emits a
 * `.longing-review__edit` element any more, since it costs nothing to keep
 * one shared ruleset for both classes if a future recap ever needs it again.
 */
.longing-review {
	margin-top: 28px;
}

/* ---------------------------------------------------------------------------
 * Form-structure adjustments (item 14, unchanged)
 * ------------------------------------------------------------------------ */

/* Method is satisfied by entering the product page (A9); the control stays in
   the form so its value still submits, but it is not a decision any more. */
.longing-prefilled-step.longing-prefilled-step {
	display: none;
}

/* Section header naming a page that the one-decision-per-page split dissolved. */
.longing-hidden-section.longing-hidden-section {
	display: none;
}

/* WooCommerce's own quantity box is replaced by the explicit Quantity step, so
   it is not shown on the final page either. Competing rule: gp-premium's
   `.do-quantity-buttons div.quantity{display:flex}` (0,2,1) — this selector is
   (0,3,3) and sets the same `display` longhand, so it wins on specificity. */
.longing-configurator-product form.cart div.quantity {
	display: none;
}

/*
 * Kelly's manual-review consolidation (amends item 16): form 3 (Genius
 * Wefts) carries Gravity Forms' own native "Shipping" (field 17) and
 * "Total" (field 16) pricing fields on the Review page — a second,
 * redundant price/shipping readout next to the live summary's own price
 * block (the `.product_totals` markup the summary adopts, item 1/14).
 * Hidden presentationally only, per the plan's styling-constraint section
 * (no competing plugin rule found on `#field_3_16`/`#field_3_17` — grepped
 * the add-ons stylesheet and all four Gravity Forms theme sheets for both
 * IDs, zero hits) — the fields themselves are untouched, so they still
 * submit exactly as before. That is safe here specifically: field 17's
 * `basePrice` is empty (a "singleshipping" field with nothing configured),
 * and `WC_GFPA_Field_Helpers::get_product_fields()` only ever reads its
 * *value*, never whether it is CSS-visible, so its contribution to the
 * add-ons plugin's cart-price sum (`gravityforms-product-addons-cart.php`)
 * is 0 whether shown or hidden. Field 16 (Total) is Gravity Forms' own
 * `displayOnly` running-total field — informational only, never read by
 * that same cart-price composition. Neither field feeds the WooCommerce
 * line price, so hiding both changes nothing about pricing, only
 * visibility; re-verified after this change that both gates still price
 * exact (clip-in Straight 22″/150g $675.00; pro any-Romantics blend 24″
 * wavy 100g $680.00).
 */
#field_3_16,
#field_3_17 {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Mobile — gallery above the steps, summary reachable without losing your place
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.longing-tracker {
		margin-bottom: 26px;
	}

	/* Still a labelled horizontal indicator, per the client — it scrolls rather
	   than wrapping or collapsing to dots, so every step keeps its name. */
	.longing-tracker__list {
		overflow-x: auto;
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.longing-tracker__item {
		flex: 0 0 auto;
		min-width: 126px;
		scroll-snap-align: start;
	}

	.longing-tracker__step.longing-tracker__step {
		padding: 12px 12px 12px 0;
		font-size: 18px;
	}

	.longing-tracker__value {
		font-size: 20px;
	}

	.longing-configurator-product .gform_wrapper .gform_page .gfield > .gfield_label:not(.gform-field-label--type-inline):not(.gform-field-label--type-sub),
	.longing-configurator-product .gform_wrapper .gform_page .gsection .gsection_title,
	.longing-configurator-product .gform_wrapper .longing-step-frame__title {
		font-size: 30px;
	}

	/* Every instruction surface steps down together here. Three were missing
	   from this list and so stayed at their 22px desktop size while the rest
	   dropped: the section description (which carries the blend page's two
	   paragraphs), the eligibility paragraph's own rule, and the blend
	   preview's hint. The step-down itself is deliberate — 22px is too large
	   for a 390px column — but it has to apply to all of them or the page
	   mixes two instruction sizes at the narrow breakpoint. */
	.longing-configurator-product .gform_wrapper .gform_page .gfield_description,
	.longing-configurator-product .gform_wrapper .gform_page .gsection_description,
	.longing-configurator-product .gform_wrapper .longing-blend-eligibility,
	/* Not scoped to .gform_wrapper: the preview now renders in the media column,
	   outside the form. */
	.longing-configurator-product .longing-blend-preview__hint,
	.longing-configurator-product .gform_wrapper .longing-form-note,
	.longing-configurator-product .gform_wrapper .longing-blend-leadtime,
	.longing-configurator-product .gform_wrapper .longing-blend-locked__intro,
	.longing-configurator-product .gform_wrapper .longing-review__intro {
		font-size: 19px;
	}

	.longing-configurator-product .gform_wrapper .gfield--type-choice:not(.gfield--type-image_choice) .gchoice .gform-field-label {
		font-size: 19px;
	}

	.longing-configurator-product .gform_wrapper .gfield.longing-colour-path-cards .gfield_radio {
		grid-template-columns: 1fr;
	}

	.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gfield_radio,
	.longing-configurator-product .gform_wrapper .gfield--type-image_choice .gfield_checkbox {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
		gap: 14px;
	}

	.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_next_button.gform-theme-button.button,
	.longing-configurator-product .gform_wrapper.gform-theme.gform-theme--framework .gform_previous_button.gform-theme-button.button {
		flex: 1 1 auto;
		min-height: 50px;
		padding: 14px 22px;
		font-size: 14px;
	}

	.longing-configurator-product form.cart .single_add_to_cart_button.single_add_to_cart_button {
		flex: 1 1 auto;
		padding: 15px 22px;
		font-size: 14px;
	}

	.longing-summary {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		max-width: none;
		margin: 0;
	}

	.longing-summary__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin: 0;
		padding: 14px 18px;
		border: 0;
		border-top: 1px solid var(--longing-rule);
		background-color: var(--longing-card-raised);
		box-shadow: 0 -2px 10px rgba(27, 27, 27, 0.12);
		color: var(--longing-oxblood);
		font-family: inherit;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.longing-summary__toggle:focus-visible {
		outline: 2px solid var(--longing-oxblood);
		outline-offset: -3px;
	}

	.longing-summary__toggle-total {
		font-size: 18px;
		font-variant-numeric: tabular-nums;
	}

	/* Collapsed by default: the panel opens in place over the page, so the form
	   keeps its scroll position and the shopper returns to exactly the control
	   they left. */
	.longing-summary__panel {
		display: none;
		max-height: 60vh;
		overflow-y: auto;
		border-width: 1px 0 0;
		border-radius: 0;
		box-shadow: none;
	}

	.longing-summary.is-open .longing-summary__panel {
		display: block;
	}

	/* Room for the fixed bar so it never covers the Continue button. */
	.longing-configurator-product form.cart {
		padding-bottom: 72px;
	}

}

/* ---------------------------------------------------------------------------
 * Blend preview strip (plan item 15)
 *
 * Selected blend swatches side by side, live. The container
 * (`Longing_Blend_Preview::close_media_column()`) sits once in the DOM, under
 * the gallery in the product's left-hand column and outside the form entirely,
 * so its own visibility is script-driven rather than tied to any one Gravity
 * Forms page's `display:none` — see blend-preview.js. Nothing here may be
 * scoped to `.gform_wrapper`, which no longer contains it. All classes here are
 * new (`.longing-blend-preview*`); a
 * grep for "longing-" over the add-ons plugin's stylesheet and all four
 * Gravity Forms theme sheets returns nothing, so none of this contests a
 * plugin rule and no doubled-class/longhand defence is needed (the plan's
 * styling-constraint section, checked per its own instruction).
 * ------------------------------------------------------------------------ */

.longing-blend-preview {
	/* Sits under the gallery, so the gap belongs above it, not below. */
	margin: 24px 0 0;
	padding: 22px 24px;
	border: 1px solid var(--longing-rule);
	border-radius: 2px;
	background-color: rgba(222, 210, 188, 0.16);
}

.longing-blend-preview[hidden] {
	display: none;
}

.longing-blend-preview__title {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--longing-oxblood);
}

/*
 * Instructional copy, so it follows A4's rule that italics are reserved for
 * small supporting accents ("per pack") — not for instructions.
 *
 * Sized with the rest of the configurator's instruction copy. The 19px this
 * carried came from item 39's measurement of the step instruction, but that
 * shared block was later raised to the site's 22px body size and this hint was
 * not moved with it — leaving it the one instruction surface still set smaller
 * than every other on the page. Measured at 1440: every other instruction
 * surface on both forms computes 22px.
 */
.longing-blend-preview__hint {
	margin: 0;
	font-size: 22px;
	font-style: normal;
	line-height: 1.5;
	color: var(--longing-meta);
}

.longing-blend-preview__hint[hidden],
.longing-blend-preview__tiles[hidden] {
	display: none;
}

.longing-blend-preview__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.longing-blend-preview__tile {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	width: 116px;
	gap: 8px;
	text-align: center;
}

/* The root tile carries the badge, and "ROOT COLOUR · 1″" is wider than the
   swatch. Sizing this one tile to its own content keeps the pill on a single
   line instead of breaking it after the separator, where it read as two
   labels. */
.longing-blend-preview__tile--root {
	width: auto;
	min-width: 116px;
}

.longing-blend-preview__image {
	position: relative;
	display: flex;
	width: 96px;
	height: 96px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--longing-rule);
	border-radius: 2px;
	background-color: var(--longing-card);
}

/* The root's tile is the one visual distinction that never depends on the
   depth badge alone — an inked frame around the swatch itself. */
.longing-blend-preview__tile--root .longing-blend-preview__image {
	border-color: var(--longing-oxblood);
	box-shadow: inset 0 0 0 1px var(--longing-oxblood);
}

.longing-blend-preview__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder: the same rotated-square mark the tracker uses for an unmet
   step, never a broken image, for a shade with no map entry yet (item 19). */
.longing-blend-preview__image--placeholder::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	border: 1px solid var(--longing-meta);
	transform: rotate(45deg);
}

.longing-blend-preview__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--longing-ink);
}

.longing-blend-preview__badge {
	display: inline-block;
	white-space: nowrap;
	padding: 3px 10px;
	border-radius: 50px;
	background-color: var(--longing-oxblood);
	color: var(--base-2, #f4ecdf);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.longing-blend-preview {
		padding: 18px 20px;
	}

	.longing-blend-preview__tile {
		width: 92px;
	}

	/* Same content-sized root tile as desktop, restated after the shared width
	   above so it wins the source-order duel at equal specificity. With the
	   badge stepped down a point and the row's gap tightened, a full blend —
	   root plus two colours — still lands on one row at 390px. */
	.longing-blend-preview__tile--root {
		width: auto;
		min-width: 92px;
	}

	.longing-blend-preview__tiles {
		gap: 14px;
	}

	.longing-blend-preview__badge {
		padding: 3px 8px;
		font-size: 10px;
	}

	.longing-blend-preview__image {
		width: 76px;
		height: 76px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.longing-configurator-product .gform_wrapper .gchoice,
	.longing-configurator-product form.cart .single_add_to_cart_button {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Stylist gate CTA (item 22) — stands where price and purchase controls
 * would be for non-approved viewers. New class family; no competing plugin
 * rule (grepped the add-ons and Gravity Forms sheets for `longing-gate`).
 * ------------------------------------------------------------------------ */

.longing-gate {
	max-width: 460px;
	margin: 28px 0;
	padding: 26px 28px 28px;
	border: 1px solid var(--longing-rule);
	background: var(--longing-card-raised);
	box-shadow: 0 10px 24px rgba(61, 26, 30, 0.06);
}

.longing-gate__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--longing-oxblood);
}

.longing-gate__copy {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--longing-ink-soft);
}

.longing-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* Doubled class: GeneratePress styles `a` inside the summary at equal
 * specificity for colour; the doubled form wins per the plan's
 * styling-constraint pattern. */
.longing-gate__button.longing-gate__button {
	display: inline-block;
	padding: 12px 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.longing-gate__button.longing-gate__button--login {
	background: var(--longing-oxblood);
	color: #fff;
}

.longing-gate__button.longing-gate__button--login:hover {
	background: var(--longing-ink);
	color: #fff;
}

.longing-gate__button.longing-gate__button--apply {
	border: 1px solid var(--longing-oxblood);
	background: transparent;
	color: var(--longing-oxblood);
}

.longing-gate__button.longing-gate__button--apply:hover {
	background: var(--longing-oxblood);
	color: #fff;
}

/* Client picker (item 23) — review step
   ------------------------------------------------------------------------
   The picker's label carries only `gform-field-label`, not `gfield_label`, so
   the top-level step-title rule above deliberately skips it (it is an optional
   detail, not a step). That left it falling through to the framework default:
   `.gform-theme--framework .gform-field-label` at (0,2,0), which resolves to a
   cool slate #374151 at 15px — cooler than, and smaller than, its own
   description directly beneath it.

   These selectors are (0,5,0) — the class is doubled, matching the house
   pattern — and set the real properties rather than the framework's
   `--gf-local-*` variables, so they land however the framework resolves them.
   Verify computed colour AND font-size after any change here; the framework
   sets both through the same local-variable indirection. */
.longing-configurator-product .gform_wrapper .longing-client-picker.longing-client-picker .gform-field-label {
	display: block;
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--longing-ink-soft);
}

/* Breathing room between the select and the "Add new client" button, which
   sits in its own paragraph immediately after. No competing rule on
   `.ginput_container_select` exists in the add-on or Gravity Forms CSS
   (checked), so a single class of extra specificity is enough. */
.longing-configurator-product .gform_wrapper .longing-client-picker .ginput_container_select {
	margin-bottom: 20px;
}

@media (max-width: 900px) {
	.longing-configurator-product .gform_wrapper .longing-client-picker.longing-client-picker .gform-field-label {
		font-size: 20px;
	}

	.longing-configurator-product .gform_wrapper .longing-client-picker .ginput_container_select {
		margin-bottom: 16px;
	}
}