/*
 Theme Name:   Longing and Co.
 Theme URI:    https://longingandco.com
 Description:  Theme customizations for Longing & Co.
 Author:       Up Up Digital Inc.
 Author URI:   https://up-up.ca/?ref=rc
 Template:     generatepress
 Version:      1.4
*/

@media(min-width: 959px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }
	.navigation-branding img, .site-logo.mobile-header-logo img {
		max-height: 70px;
	}
    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }
    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }
    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }
    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(4) {
        margin-left: auto;
    }
}
/*
	div.menu-bar-items {
		display: none !important;
	}
*/
.ginput_container .gfield input {
	background-color: #f4ecdf !important;
    border: 2px solid;
    border-color: #b89968 !important;
    border-radius: 0;
}
.percentbar_blue {
	background-color: #5C2030 !important;
}
div.img_prefooter_logo {
	background-color: var(--contrast);
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 0 !important;
}
a.button, a.product_type_variable {
	border-radius: 50px !important;
	border: 2px solid !important;
	background-color: transparent !important;
	color: #5C2030 !important;
	border-color: var(--primary) !important;
}
/* Plan item 14a scoped this rule out of the configurator product pages. It sets
   background-color/color/border as `!important`, which no amount of specificity
   can beat, so the configurator's Continue / Add to Cart buttons could never be
   the filled oxblood CTA the atelier treatment calls for. Narrowing the rule by
   one `:not()` on the body class is surgical — every other page keeps the ghost
   pill verbatim — and it leaves the configurator's own buttons to be styled on
   merit, with no `!important` anywhere in item 14a. The ghost pill is restored
   for the non-configurator buttons on those pages in the item 14a block below. */
.woocommerce-page:not(.longing-configurator-product) .button {
	border-radius: 50px !important;
	border: 2px solid !important;
	background-color: transparent !important;
	color: #5C2030 !important;
	border-color: var(--primary) !important;
}

/*
 * Plan item 1: GF Product Add-ons price-summary block (form.cart .product_totals).
 * Restyle the default full-width, space-between rows into a tight label/value
 * block beneath the form, with the Total line visually dominant. Also hides
 * any row whose value hasn't been calculated yet (gated form's default
 * "Subtotal/Options" labels and any form's pre-selection state render an
 * empty <span> until GF Add-ons JS runs) so no label is ever left dangling
 * with nothing after it.
 */
/* Specificity note: the add-on plugin's own frontend.css (v3.7.9) carries the
   IDENTICAL selector `form.cart .product_totals` and sets border-top/-bottom
   LONGHANDS to #eee. Same specificity, and the plugin's sheet enqueues after
   the child theme's, so a plain `border:` shorthand here loses on the top and
   bottom edges while winning on left/right — which is what left the block
   framed in mismatched hairlines. The doubled `.product_totals.product_totals`
   raises specificity by one class so these rules win outright. Keep the
   doubling on any rule that contests a plugin declaration. */

/* Card fill is deliberately LIGHTER than the page's --base-2 cream: the block
   previously used --base-2 itself, which is the exact page background, so the
   card had no figure/ground separation at all. */
form.cart .product_totals.product_totals {
	--summary-card: #fdfaf4;
	--summary-rule: #e3d9c9;
	max-width: 380px;
	margin: 28px 0 0;
	padding: 20px 24px;
	border: 1px solid var(--summary-rule);
	border-radius: 3px;
	background-color: var(--summary-card);
	box-shadow: 0 1px 3px rgba(27, 27, 27, 0.06);
	overflow: hidden;
}
form.cart .product_totals.product_totals ul.gform_fields {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Spacing separates the rows — no full-width rules, which read as a data
   table rather than a summary. The only hairline is above Total. */
form.cart .product_totals.product_totals ul.gform_fields li.gfield {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: auto;
	margin: 0;
	padding: 5px 0;
	border: 0;
}
form.cart .product_totals.product_totals .gfield_label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6f6257;
}
form.cart .product_totals.product_totals .ginput_container {
	width: auto;
}
/* Tabular figures so decimal points align down the column. */
form.cart .product_totals.product_totals .ginput_total {
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	color: var(--contrast);
	white-space: nowrap;
}
form.cart .product_totals.product_totals ul.gform_fields li.wcgfpa_grand_total {
	justify-content: space-between;
	margin-top: 12px;
	padding: 14px 0 0;
	border-top: 1px solid var(--summary-rule);
}
form.cart .product_totals.product_totals .wcgfpa_grand_total p.price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--accent);
}
form.cart .product_totals.product_totals .wcgfpa_grand_total .formattedTotalPrice {
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	color: var(--accent);
}
/* Item 1's functional guarantee — a row whose value hasn't been calculated yet
   renders an empty <span>, so collapse it rather than leave a dangling label. */
form.cart .product_totals.product_totals ul.gform_fields li.wcgfpa_subtotal:has(.ginput_total:empty),
form.cart .product_totals.product_totals ul.gform_fields li.wcgfpa_options_total:has(.ginput_total:empty),
form.cart .product_totals.product_totals ul.gform_fields li.wcgfpa_grand_total:has(.formattedTotalPrice:empty) {
	display: none;
}
/* Nothing calculated at all (e.g. gated form pre-selection) — collapse the
   whole card instead of leaving an empty frame. */
form.cart .product_totals.product_totals:not(:has(.ginput_total:not(:empty))) {
	display: none;
}
@media (max-width: 480px) {
	form.cart .product_totals.product_totals {
		max-width: 100%;
		padding: 18px 20px;
	}
}

/*
 * Plan item 2: neutralize Beaver Builder entrance-animation fade delays.
 * BB's .fl-animation modules start at opacity:0 and only reach opacity:1
 * once JS adds .fl-animated — which itself waits on a scroll waypoint
 * (elements can sit off the 80%-viewport trigger) plus a per-module
 * animation-delay/duration (fl-builder-layout-modules.js), so content can
 * stay invisible well past 1s after the page (or the block) is on screen.
 * Force every .fl-animation element to its final, fully-visible state
 * immediately and drop the keyframe animation entirely so no fade or
 * slide-in ever plays — this is the CSS override the plan explicitly
 * allows in place of touching BB's DB-resident layout data. `!important`
 * on a non-animation property always wins over a running CSS animation
 * (keyframes cannot use !important), so this holds regardless of when or
 * whether BB's JS adds .fl-animated.
 */
.fl-animation {
	opacity: 1 !important;
	animation: none !important;
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.fl-animation,
	.fl-animated {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Plan item 4: brand the WooCommerce block cart/checkout buttons
 * (Proceed to Checkout, Place Order, Apply Coupon — all share the base
 * .wc-block-components-button class from the shared Woo Blocks Button
 * component) to the design tokens instead of the WooCommerce-blue
 * default. Filled --accent pill by default (matches the site's pill
 * button shape/border), --contrast-2 gold fill on hover so both tokens
 * named in the plan item are represented. Text colours are chosen for
 * contrast against each background (cream on burgundy ~10.4:1, near-black
 * on gold ~6.4:1 — both comfortably pass WCAG AA). A visible
 * outline-based focus state is added since the hover-state colour swap
 * alone isn't reliable for keyboard-only users.
 */
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-button {
	border-radius: 50px;
	border: 2px solid var(--accent);
	background-color: var(--accent);
	color: var(--base-2);
	box-shadow: none;
}
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button:active,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-button:active {
	border-color: var(--contrast-2);
	background-color: var(--contrast-2);
	color: var(--contrast);
}
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button:focus-visible,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-button:focus-visible {
	outline: 3px solid var(--contrast);
	outline-offset: 2px;
}
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button:disabled,
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button[aria-disabled="true"],
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-button:disabled,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-button[aria-disabled="true"] {
	opacity: 0.5;
	border-color: var(--accent);
	background-color: var(--accent);
	color: var(--base-2);
}

/*
 * Cart and Checkout block type scale.
 *
 * WooCommerce's Cart and Checkout blocks size nearly all of their own text
 * off `var(--wp--preset--font-size--small, 14px)` — product names, line
 * prices, the PRODUCT/TOTAL column headers, the totals rows, the "Cart
 * totals" / "Order summary" titles, and (at a further 0.875em) the
 * configuration metadata under each line. That is calibrated against a 16px
 * body, where "small" reads as a deliberate step down. This site's body is
 * 22px and its `small` preset is 13px, so the whole cart rendered at roughly
 * 59% of the surrounding copy and read as broken rather than as hierarchy.
 *
 * Rather than restyle a dozen block classes one at a time, the preset itself
 * is re-pointed inside the two blocks, which lifts every element WooCommerce
 * intended to be "small" in one move and keeps its internal proportions
 * intact. 19px preserves Woo's own small:body ratio (0.875 x 22 = 19.25) and
 * matches the configurator's value text, so the cart, the checkout and the
 * product configurator now share one reading size.
 *
 * The form controls are separate: Woo hardcodes 16px on checkout inputs,
 * their floating labels and the select controls (a deliberate floor — under
 * 16px iOS Safari zooms the viewport on focus). 19px is above that floor, so
 * raising them keeps the protection and matches the rest.
 *
 * Specificity: Woo's input rule is `.wc-block-components-form
 * .wc-block-components-text-input input[type="email"]` etc. (0,3,1) and its
 * label rule is (0,2,1), both in checkout.css/packages-style.css, which print
 * after this stylesheet — so equal specificity would lose on cascade order.
 * The block wrapper plus a doubled `.wc-block-components-text-input` clears
 * both without `!important`. Longhand `font-size` throughout.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wp--preset--font-size--small: 19px;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input.wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input.wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select.wc-blocks-components-select .wc-blocks-components-select__label,
.wp-block-woocommerce-checkout .wc-blocks-components-select.wc-blocks-components-select .wc-blocks-components-select__select {
	font-size: 19px;
}

/*
 * Plan item 7: copy pass on the public clip-in flow (form 6).
 *
 * (Required) restyle — rendered markup is nested spans:
 *   <span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>
 * so both the outer wrapper and the inner text node carry the bare
 * `.gfield_required` class. Per the styling-constraint section: the ONLY
 * competing rule actually enqueued on the frontend is
 * `.gfield_required{color:var(--gf-color-danger)}` in
 * gravityforms/assets/css/dist/gravity-forms-theme-framework.min.css,
 * enqueued (as `gravity_forms_theme_framework-css`) after the child theme's
 * style.css — equal specificity (0,1,0), later in the cascade, so it wins
 * outright over an unqualified `.gfield_required_text{color:...}` rule
 * (also 0,1,0) despite the more specific-sounding class name. Doubling the
 * class (`.gfield_required_text.gfield_required_text`, 0,2,0) beats it
 * without `!important`. Scoped to the inner `_text` span only, so the
 * (invisible, non-color-bearing) outer wrapper is left alone. Muted/small/
 * letterspaced to sit quietly — reusing the exact label treatment from item
 * 1's price-summary block (12px/600/0.08em/uppercase/#6f6257) for
 * consistency with the rest of the configurator's "quiet metadata" style.
 */
.gform_wrapper .gfield_required_text.gfield_required_text {
	color: #6f6257;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Seven-pieces/fullness note — new HTML field (id 60) on the Set Weight
 * page, always visible regardless of which length is selected. Styled as
 * quiet supporting copy, matching the existing field description treatment
 * rather than standing out as a callout (no marketing tone requested).
 */
.gform_wrapper .longing-fullness-note .longing-form-note {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--contrast);
	opacity: 0.75;
}
/*
 * Plan item 11: the custom blend sub-flow on form 3.
 *
 * Competing-rule check per the styling constraint: neither
 * woocommerce-gravityforms-product-addons/assets/css/frontend.css nor
 * gravity-forms-theme-framework.min.css carries any `.gfield_html` or
 * `longing-blend-*` selector, so there is nothing to out-specify here — every
 * selector below is a novel `longing-` class scoped inside `.gform_wrapper`,
 * which sits at (0,2,0) or higher and beats the framework's element-level
 * list resets without `!important`. Longhands are used throughout so a later
 * plugin shorthand cannot partially override an edge (item 1's failure mode).
 *
 * Deliberately restrained: item 14a does the atelier restyle of every choice
 * surface on this form, so this pass only makes the blend fields legible and
 * makes the locked Signatures panel read unmistakably as unavailable.
 */

/* Locked Signatures panel — an HTML field, so it holds no inputs at all and
 * there is no click path to selecting a Signature as a blend ingredient. The
 * greyscale + reduced opacity treatment is decorative reinforcement only; the
 * per-shade "Available as a finished colour" tag carries the meaning in text. */
.gform_wrapper .longing-blend-locked {
	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: #ddd3c9;
	border-right-color: #ddd3c9;
	border-bottom-color: #ddd3c9;
	border-left-color: #ddd3c9;
	padding: 16px;
	margin-bottom: 8px;
}

.gform_wrapper .longing-blend-locked__intro {
	margin-top: 0;
	margin-bottom: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--contrast);
	opacity: 0.8;
}

.gform_wrapper .longing-blend-locked__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.gform_wrapper .longing-blend-locked__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: default;
}

.gform_wrapper .longing-blend-locked__swatch {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1);
	opacity: 0.45;
}

.gform_wrapper .longing-blend-locked__name {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--contrast);
	opacity: 0.6;
}

.gform_wrapper .longing-blend-locked__tag {
	margin-top: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #6f6257;
}

/* Lead time — same quiet supporting-copy treatment as item 7's fullness note. */
.gform_wrapper .longing-blend-leadtime-field .longing-blend-leadtime {
	margin-top: 0;
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--contrast);
	opacity: 0.75;
}

/* The "add another colour" toggles are controls, not order data — give them a
 * little air so they read as an action following the colour they extend. */
.gform_wrapper .longing-blend-toggle {
	margin-top: 4px;
}

.gform_wrapper .longing-blend-toggle .gfield_label {
	display: none;
}

/* Item 13 — dynamic main product image on colour selection: a subtle loading
 * state on the gallery while the newly selected shade's image fetches, no
 * layout jump (opacity only, image keeps its current box size until the new
 * file has actually loaded and swaps in). */
.woocommerce-product-gallery.longing-image-loading .woocommerce-product-gallery__image img {
	opacity: 0.55;
	transition: opacity 0.15s ease-in-out;
}

/* ===========================================================================
 * Plan item 14a — Atelier layout & premium restyle: the product-page half.
 *
 * Everything here is page layout and the product's own typographic hierarchy;
 * the configurator's internals (tracker, choice cards, swatches, summary,
 * buttons) live in longing-core's configurator.css, which now prints last so it
 * can out-rank the Gravity Forms theme sheets it contests.
 *
 * Styling-constraint check for this block. Competing declarations found and
 * beaten, longhand against longhand, without `!important`:
 *  - The gallery and the summary are both sized and floated by FOUR sheets at
 *    once: woocommerce-layout.css (48%), woocommerce-smallscreen.css (100%),
 *    generate-woocommerce.css (50%) and — the one that actually won — the
 *    `generate-woocommerce-inline` <style> GeneratePress prints from the
 *    customizer's product-image-width setting (25%). Every one of them carries
 *    an `#content` variant: `.woocommerce #content div.product div.images` is
 *    (1,3,2), so the doubled-class selector this rule started with, at (0,4,2),
 *    lost to it — an ID beats any number of classes, and the measured gallery
 *    came back at 25% of its grid column with `float:left` intact. Both rules
 *    below therefore anchor on `#content` themselves, reaching (1,4,2)/(1,5,2),
 *    and set `width`, `max-width` and `float` as separate longhands. Verified
 *    as computed values, not as written rules.
 *  - The legacy `.woocommerce-page .button` rule above (now scoped out of
 *    configurator pages) — see its note.
 * Every rule is scoped to `.longing-configurator-product`, the body class
 * Longing_Configurator adds only on the four configurator products, so no other
 * page of the site is reached by any of it.
 * ======================================================================== */

.longing-configurator-product {
	/* One place for the atelier's ink. Reference the site tokens where they
	   exist; the three additions are the tones the palette has no token for —
	   a card fill lighter than the page cream (item 1's figure/ground lesson),
	   and two hairline weights for the fine borders the brief asks to keep. */
	--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;
	--longing-gutter: clamp(32px, 4vw, 64px);
}

/* --- The split ---------------------------------------------------------- */

.longing-configurator-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	column-gap: var(--longing-gutter);
	row-gap: 0;
	align-items: start;
}

/* The tracker is a direct child of div.product (rendered on
   woocommerce_before_single_product_summary) so it can span both columns. */
.longing-configurator-product div.product > .longing-tracker {
	grid-column: 1 / -1;
}

.longing-configurator-product #content div.product .woocommerce-product-gallery.woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 2;
	float: none;
	width: auto;
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	/* Stays with the shopper through the longest step. `align-items: start` on
	   the grid keeps this item at its content height while its grid area spans
	   the full row, which is the travel a sticky element needs. */
	position: sticky;
	top: 28px;
}

/* The left column when the blend preview rides with the gallery
   (Longing_Blend_Preview wraps both on the pro configurator, so this only
   exists there). The wrapper becomes the sticky grid item and the gallery
   inside it goes static — one sticky element, not two nested ones, so the
   strip travels with the images instead of being left behind at the top of a
   column the shopper has already scrolled past. Wins the position override on
   the gallery by one class: (1,5,2) against the (1,4,2) rule above. */
.longing-configurator-product #content div.product > .longing-product-media {
	grid-column: 1;
	grid-row: 2;
	position: sticky;
	top: 28px;
}

.longing-configurator-product #content div.product > .longing-product-media .woocommerce-product-gallery.woocommerce-product-gallery {
	position: static;
}

.longing-configurator-product #content div.product .summary.entry-summary.entry-summary {
	grid-column: 2;
	grid-row: 2;
	float: none;
	width: auto;
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-bottom: 8px;
}

/* --- The gallery as the hero -------------------------------------------- */

/* A fine double frame — the one piece of ornament the gallery carries. The
   outer hairline is the frame; the inner ring is drawn with a shadow so it
   costs no layout and cannot push the image out of its column. */
.longing-configurator-product .woocommerce-product-gallery .flex-viewport,
.longing-configurator-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--longing-rule);
	box-shadow: inset 0 0 0 1px var(--base-2, #f4ecdf), inset 0 0 0 2px var(--longing-rule-fine);
	background-color: var(--longing-card);
}

.longing-configurator-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

.longing-configurator-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
}

.longing-configurator-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 68px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.longing-configurator-product .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid transparent;
	opacity: 0.72;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.longing-configurator-product .woocommerce-product-gallery .flex-control-thumbs img:hover,
.longing-configurator-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--longing-oxblood);
	opacity: 1;
}

/* --- Hierarchy: name → description → From-anchor ------------------------- */

.longing-configurator-product .summary h1.product_title.entry-title {
	margin: 0 0 18px;
	font-size: clamp(38px, 3.6vw, 54px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.012em;
	color: var(--longing-ink);
}

/* An engraved rule under the title: two hairlines, gold over oxblood, the only
   place on the page where the two brand metals meet. */
.longing-configurator-product .summary h1.product_title.entry-title::after {
	content: "";
	display: block;
	width: 84px;
	height: 3px;
	margin-top: 20px;
	border-top: 1px solid var(--longing-oxblood);
	border-bottom: 1px solid var(--longing-gold);
}

.longing-configurator-product .summary .woocommerce-product-details__short-description {
	margin: 0 0 22px;
	max-width: 52ch;
	font-size: 21px;
	line-height: 1.55;
	color: var(--longing-ink-soft);
}

.longing-configurator-product .summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* WooCommerce still emits its own price element; the configurator prices every
   configuration itself, so the element is always empty here. Collapse it rather
   than leave its margins in the stack (item 1's no-dangling-label discipline). */
.longing-configurator-product .summary > p.price:empty {
	display: none;
}

.longing-configurator-product .longing-price-anchor {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--longing-rule-fine);
}

.longing-configurator-product .longing-price-anchor__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--longing-meta);
}

.longing-configurator-product .longing-price-anchor__value {
	font-size: 27px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	line-height: 1;
	color: var(--longing-oxblood);
}

.longing-configurator-product .longing-price-anchor__value .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.longing-configurator-product .longing-price-anchor__unit {
	font-size: 17px;
	font-style: italic;
	color: var(--longing-meta);
}

/* --- Buttons on configurator pages -------------------------------------- */

/* The legacy ghost pill, restored for every button on these pages that is not
   the configurator's own CTA (cart notices, mostly) — the scoped-out rule above
   no longer supplies it here. */
.longing-configurator-product .button {
	border-radius: 50px;
	border: 2px solid var(--longing-oxblood);
	background-color: transparent;
	color: var(--longing-oxblood);
}

/* --- Mobile: gallery above the steps ------------------------------------ */

@media (max-width: 900px) {
	.longing-configurator-product div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 26px;
	}

	.longing-configurator-product #content div.product .woocommerce-product-gallery.woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 2;
		position: static;
	}

	.longing-configurator-product #content div.product > .longing-product-media {
		grid-column: 1;
		grid-row: 2;
		position: static;
	}

	.longing-configurator-product #content div.product .summary.entry-summary.entry-summary {
		grid-column: 1;
		grid-row: 3;
	}

	.longing-configurator-product .summary h1.product_title.entry-title {
		font-size: 34px;
	}

	.longing-configurator-product .summary .woocommerce-product-details__short-description {
		font-size: 19px;
	}

	.longing-configurator-product .longing-price-anchor {
		margin-bottom: 24px;
		padding-bottom: 20px;
	}

	.longing-configurator-product .longing-price-anchor__value {
		font-size: 24px;
	}
}

/* ---------------------------------------------------------------------------
 * Item 22 — stylist dashboard welcome (My Account). The gate-CTA button
 * family is styled in the configurator stylesheet, which only loads on
 * product pages; these mirror it for the account context.
 * ------------------------------------------------------------------------ */

.longing-stylist-welcome {
	margin: 24px 0 8px;
	padding: 22px 24px;
	border: 1px solid var(--longing-rule, #ded2bc);
	background: var(--longing-card-raised, #fffcf6);
}

.longing-stylist-welcome h3 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--longing-oxblood, #5c2030);
}

.longing-stylist-welcome p {
	margin: 0 0 14px;
}

.longing-stylist-welcome .longing-gate__button.longing-gate__button {
	display: inline-block;
	padding: 12px 22px;
	background: var(--longing-oxblood, #5c2030);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
}

.longing-stylist-welcome .longing-gate__button.longing-gate__button:hover {
	background: var(--longing-ink, #1b1b1b);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Item 30 — coming-soon state (product page card + archive badge).
 * ------------------------------------------------------------------------ */

.longing-coming-soon {
	max-width: 460px;
	margin: 24px 0;
	padding: 22px 24px;
	border: 1px solid var(--longing-rule, #ded2bc);
	background: var(--longing-card-raised, #fffcf6);
}

.longing-coming-soon__title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--longing-oxblood, #5c2030);
}

.longing-coming-soon__copy {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--longing-ink-soft, #3a342e);
}

.longing-coming-soon__badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 10px;
	border: 1px solid var(--longing-rule, #ded2bc);
	background: var(--longing-card-raised, #fffcf6);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--longing-oxblood, #5c2030);
}

/* ========================================================================
 * Footer newsletter (The Letters) — the capture form now mirrors the
 * contact page's treatment (Kelly, 2026-08-13): gold-bordered light
 * inputs, and the gold pill button for "Join The Letters".
 *
 * Why: the footer is site-wide, so on any WooCommerce page the legacy
 * ghost-pill rule above (line ~81, `.woocommerce-page:not(...) .button`,
 * all !important) repainted the button transparent with oxblood text —
 * unreadable on the black footer. These rules carry !important at one
 * higher specificity (0,3,1 vs its 0,3,0) so the button reads the same
 * on every page. Text on gold is near-black, not the contact button's
 * white: item 4 chose that pairing for contrast (~6.4:1 AA vs ~2.2:1).
 * ======================================================================== */

.footer-widgets .longing-newsletter-form input.input-text {
	background-color: #f0f0f0;
	border: 2px solid var(--contrast-2, #b89968);
	color: var(--contrast, #1b1b1b);
}

.footer-widgets .longing-newsletter-form button.button {
	border-radius: 50px !important;
	border: 2px solid var(--contrast-2, #b89968) !important;
	background-color: var(--contrast-2, #b89968) !important;
	color: var(--contrast, #1b1b1b) !important;
	padding: 12px 28px;
	font-weight: 600;
}

/* Hover keeps the gold border so the darker fill still separates from the
   black footer; the fill/ink swap is item 4's oxblood-gold pairing. */
.footer-widgets .longing-newsletter-form button.button:hover,
.footer-widgets .longing-newsletter-form button.button:active {
	background-color: var(--accent, #5c2030) !important;
	color: var(--base-2, #f4ecdf) !important;
	border-color: var(--contrast-2, #b89968) !important;
}

.footer-widgets .longing-newsletter-form button.button:focus-visible {
	outline: 3px solid var(--contrast-2, #b89968);
	outline-offset: 2px;
}

/* ===========================================================================
 * BugHerd task 5 — equal-size colour choice cards (2026-08-15).
 *
 * The colour image-choice cards varied in height because the shade descriptor
 * wraps to one, two or three lines, so each grid row sized to its own tallest
 * card and rows disagreed with each other. Fix: every implicit row of a colour
 * field's swatch grid is 1fr (all rows equalise to the tallest card in the
 * field) and each card stretches to fill its row; the image area is pinned to
 * the delivery's uniform 4:5 (1080×1350) with cover-cropping so a future
 * odd-ratio swatch cannot re-introduce ragged image heights.
 *
 * Scoped to the sixteen colour fields by fieldset ID — form 6 (public clip-ins)
 * fields 3/6/7 (collections) + 31/35 (dormant root/highlight) + 68/69/71/73
 * (blend root and colour slots), form 3 (pro/blend) fields 3/6/7 +
 * 25/26/28/30 (root/blend slots) — the same constants
 * Longing_Colour_Population::FIELD_SOURCES populates. Adding IDs inside
 * `:is()` does not shift the specificity math documented below: `:is()` takes
 * the highest specificity among its arguments, and every argument here is an
 * ID selector, so the scope stays (1,3,0)+ against the framework's (0,3,0). Deliberately NOT the
 * bare `.gfield--type-image_choice`, which would also cover-crop form 3's
 * Method and Texture photography cards that this task does not own.
 *
 * Styling-constraint check (competing declarations found in the sheets that
 * load after this one, all longhand-vs-longhand, no !important):
 *  - gravity-forms-theme-framework.min.css sets `align-self: start` on
 *    `.gform-theme--framework .gfield--type-image_choice .gchoice` (0,3,0);
 *    the `:is()` field-ID scope below resolves to (1,3,0)+, so the
 *    `align-self: stretch` here wins on specificity, not order.
 *  - The same framework sheet pins the image wrapper square:
 *    `.gform-theme--framework .gfield--type-image_choice
 *    .gfield-choice-image-wrapper` gets `aspect-ratio:
 *    var(--gf-field-img-choice-aspect-ratio)` — the token resolves to 1/1 —
 *    plus `overflow: hidden`, at (0,3,0). The `aspect-ratio: 4 / 5` below out-ranks it (verified
 *    computed "4 / 5" on every colour field, "1 / 1" untouched on form 3's
 *    Method/Texture fields); `overflow: hidden` restates the value it
 *    already has so the crop survives a framework opt-out.
 *  - The framework also styles the img itself (`block-size:100%!important;
 *    inline-size:100%; object-fit:cover; display:block`) — same values as
 *    the img rule below, which is kept as the statement of intent and to
 *    beat GeneratePress's bare `img { height: auto }` (0,0,1). The one
 *    !important in play (block-size) carries the identical 100% value, so
 *    nothing is contested.
 *  - No loaded sheet declares grid-auto-rows on these grids.
 *  - longing-core's configurator.css (prints last) styles the same grid and
 *    cards but touches none of the five properties set here — checked.
 * ======================================================================== */

.longing-configurator-product .gform_wrapper :is(#field_6_3, #field_6_6, #field_6_7, #field_6_31, #field_6_35, #field_6_68, #field_6_69, #field_6_71, #field_6_73, #field_3_3, #field_3_6, #field_3_7, #field_3_25, #field_3_26, #field_3_28, #field_3_30) .gfield_radio {
	grid-auto-rows: 1fr;
}

.longing-configurator-product .gform_wrapper :is(#field_6_3, #field_6_6, #field_6_7, #field_6_31, #field_6_35, #field_6_68, #field_6_69, #field_6_71, #field_6_73, #field_3_3, #field_3_6, #field_3_7, #field_3_25, #field_3_26, #field_3_28, #field_3_30) .gchoice {
	align-self: stretch;
}

.longing-configurator-product .gform_wrapper :is(#field_6_3, #field_6_6, #field_6_7, #field_6_31, #field_6_35, #field_6_68, #field_6_69, #field_6_71, #field_6_73, #field_3_3, #field_3_6, #field_3_7, #field_3_25, #field_3_26, #field_3_28, #field_3_30) .gfield-choice-image-wrapper {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.longing-configurator-product .gform_wrapper :is(#field_6_3, #field_6_6, #field_6_7, #field_6_31, #field_6_35, #field_6_68, #field_6_69, #field_6_71, #field_6_73, #field_3_3, #field_3_6, #field_3_7, #field_3_25, #field_3_26, #field_3_28, #field_3_30) .gfield-choice-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}