/**
 * STAGGS product-configurator visual layer — Estor enrollable Screen pilot
 * (project-docs/10-estores-enrollables-screen-pilot.md). Everything here
 * targets either STAGGS' own class names directly (never renamed, since
 * this isn't a component we own) or the `.ed-color-*` elements
 * assets/js/staggs-muestras-bridge.js injects into that markup, plus the
 * shared lightbox (reused as-is — see guide-page.css for its origin) and
 * the samples-added popup.
 */

/* ------------------------------------------------------------------ *
 * Free up the full configurator width for this one product — STAGGS
 * reserves a persistent ~700px right-hand gallery pane
 * (.staggs-product-view-image) that runs alongside the WHOLE options
 * column (title through Detalles), fixed-width via `flex: 0 0 440px` on
 * `.staggs-product-options`. This pilot doesn't use that shared pane —
 * assets/js/staggs-medidas-bridge.js and staggs-tejido-bridge.js each
 * build their own step-local two-column layout instead (a pane shared by
 * every step made MEDIDAS' own image visibly move whenever a LATER
 * step's content changed the page's height). Scoped to
 * `body.postid-2833` only — every other STAGGS product keeps its native
 * gallery pane and fixed-width options column untouched.
 * ------------------------------------------------------------------ */

body.postid-2833 .staggs-product-view-image {
	display: none !important;
}

/*
 * Mobile-only: below STAGGS' own gallery breakpoint, the (hidden, see
 * above) `.staggs-product-view-image` pane stops being a sticky side
 * column and STAGGS inserts a separate `.gallery-spacer` sibling to hold
 * open the vertical space that pane would occupy — confirmed live, this
 * node doesn't exist in the desktop DOM at all, only on narrow viewports.
 * With the pane itself hidden, that spacer became a real ~300px blank gap
 * at the very top of the page on a real device (Samsung Galaxy, Chrome
 * for Android) between the admin bar and the product title, before any
 * MEDIDAS content. Hiding it is the mobile counterpart of the rule above,
 * not a new decision — same "this product doesn't use that pane" intent,
 * just covering the extra node STAGGS only renders under this breakpoint.
 */
@media (max-width: 899px) {
	body.postid-2833 .gallery-spacer {
		display: none !important;
	}
}

body.postid-2833 .staggs-product-options {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: 100% !important;
}

/*
 * Mobile-only side gutter — confirmed live (real device) that every level
 * from `.staggs-configurator` down to each `.option-group`/heading/input
 * carries zero horizontal padding of its own, so content (title, MEDIDAS,
 * inputs, cards, Resumen, Add to cart) ran edge-to-edge against the real
 * screen. One padding declaration on the outermost wrapper this product
 * controls gives every descendant the same consistent inset for free —
 * deliberately NOT scattered per-block margins, which is how this would
 * drift into inconsistent gutters over time. Desktop is untouched (this
 * product's desktop width/columns were already approved) — scoped to the
 * same mobile breakpoint as the `.gallery-spacer` fix above.
 */
@media (max-width: 899px) {
	body.postid-2833 .staggs-container {
		padding-inline: 16px;
	}
}

/*
 * STAGGS' own Cards template hardcodes its column count
 * (`display: grid; grid-template-columns: repeat(2, 1fr)` for the "two"
 * variant, `repeat(3, 1fr)` for "three", etc.) — fine against the
 * ~440px column every other STAGGS product still uses (confirmed live:
 * yields ~215px cards), but this product's own containers are now much
 * wider (see above), which stretched every card-based attribute (Tipo de
 * tejido, Accionamiento, Motor, Soportes, ...) to match — confirmed live:
 * Accionamiento's cards reached 540px each. Replacing the fixed column
 * count with `auto-fit`/`minmax` restores the original compact card
 * width regardless of how many STAGGS itself declares per row, and packs
 * as many as fit per row when there's space — one rule for every
 * card-based attribute, not per-attribute-ID overrides. Scoped to this
 * product only; every other STAGGS product keeps its own default.
 */
body.postid-2833 .option-group-options.cards {
	grid-template-columns: repeat(auto-fit, minmax(200px, 220px)) !important;
}

/*
 * Mobile: every card-based attribute (Tipo de tejido, Accionamiento,
 * Posición, Tipo/Modelo de motor, Mando a distancia, Mecanismo, Soportes,
 * Contrapeso, ...) shares this one selector, so this one rule is genuinely
 * shared rather than a per-attribute hack. `auto-fit`/`minmax(200,220)`
 * above naturally collapses to a single column below ~420px (200*2 + gap
 * doesn't fit) — confirmed live, real device: every option group rendered
 * as one card per row, reading as long, sparse, and less scannable than
 * the same choices side by side. Two explicit columns restores a normal
 * "grid of choices" feel; `minmax(0, 1fr)` (not a px minimum) is what lets
 * long labels (Motor para red eléctrica, Compatible Alexa y Google Home,
 * Nº canales mando a distancia) wrap onto multiple lines inside their own
 * cell instead of forcing the column wider than the viewport. The
 * selected-fabric detail panel (`.ed-tejido-detail--inline`,
 * staggs-tejido.css) already declares `grid-column: 1 / -1` — spanning
 * "every column this grid currently has" is exactly why it automatically
 * becomes full-width the moment this grid has two columns, no separate
 * rule needed for it. Color swatches (`.ed-tejido-detail__colors-slot`,
 * same file) aren't part of THIS grid at all — they get their own
 * columns from the extra width this change frees up for them, not from
 * this rule directly.
 */
@media (max-width: 899px) {
	body.postid-2833 .option-group-options.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
}

/*
 * Tablet (768-991px): STAGGS' own layout leaves this product's options column far
 * narrower than the screen — its `.staggs-container` is a fixed 600px here, and in
 * portrait `.option-group-wrapper` is then cut to 80% with a 10% margin each side plus a
 * right padding, so a 820px screen only gave the steps ~414px (the colour cards of a
 * selected fabric got a ~364px strip: two cards per row, wide empty margins). Give the
 * wrapper the container's full width again and lay the card grids out in three columns
 * (the selected fabric's detail panel spans "every column", so it widens with them and
 * its colour cards can go three per row - staggs-tejido.css). Below 768px the mobile
 * two-column rule above still applies; from 992px STAGGS' 800px+ container is wide enough.
 */
@media (min-width: 768px) and (max-width: 991px) {
	body.postid-2833 .staggs-configurator-main .staggs-product-options .option-group-wrapper {
		width: 100%;
		margin-inline: 0;
		padding-right: 0;
	}

	body.postid-2833 .option-group-options.cards {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
}

/*
 * An earlier version of this rule set `row-gap: 0` on this ENTIRE grid to
 * close the seam between a selected fabric card and its expanded detail —
 * confirmed live this was wrong-scoped: it collapsed the vertical gap
 * between EVERY pair of fabric-card rows too, not just the one row that
 * has a detail attached, making all 12 cards read as one glued block.
 * The seam-closing now lives ONLY on `.ed-tejido-detail--inline` itself
 * (a negative `margin-top`, staggs-tejido.css) — this grid keeps STAGGS'
 * own normal row-gap for ordinary card-to-card spacing, same as every
 * other card-based attribute.
 */

/*
 * Tipo de tejido fabric cards show image + name only — no visible
 * surcharge price directly under the card (STAGGS' own `.option-price`
 * span, populated whenever a fabric option has a configured Price). The
 * surcharge itself still applies everywhere else (detail panel,
 * comparison table, calculated cart price) — this only hides the on-card
 * text, scoped to this one attribute so other cards (Accionamiento,
 * Mecanismo, ...) keep showing their own surcharge as before.
 */
#option-group-2817 .option-price {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Auto-progress / auto-scroll target clearance
 * (assets/js/staggs-configurator-autoscroll.js) — every `.option-group`
 * can be a `scrollIntoView()` target, so each one needs enough top
 * clearance to land below the sticky header regardless of the header's
 * current reveal state. `--ed-header-stack-offset` (published by
 * assets/js/header-scroll.js) already tracks the header's real visible
 * height plus the admin-bar offset; this only adds a little breathing
 * room on top of it. `.option-group-step-title` gets the same clearance
 * for the deliberate, non-generic scroll targets
 * assets/js/staggs-medidas-bridge.js (Continuar → "2 - TEJIDO Y COLOR"
 * heading) and staggs-tejido-bridge.js (fabric pick → that fabric's own
 * detail block) use instead of the universal auto-progress script.
 * ------------------------------------------------------------------ */

.option-group,
.option-group-step-title,
.ed-tejido-detail {
	scroll-margin-top: calc(var(--ed-header-stack-offset, 0px) + var(--ed-space-md));
}

/*
 * STAGGS' own default "active" accent for a focused text/measurement
 * input (Alto/Ancho) is orange (`--sgg-input-active-border: #E87A20`,
 * confirmed live) — visually too close to this project's red error
 * state, reading as "still invalid" even once a value is valid and
 * focused. Custom properties inherit like any other property, so
 * redeclaring it here cascades to every descendant of this one
 * product's `<body>` without touching STAGGS' own site-wide default for
 * every other product.
 */
body.postid-2833 {
	--sgg-input-active-border: var(--ed-color-primary);
}

/*
 * STAGGS' whole UI accent is ONE variable, `--sgg-button-background`
 * (#E87A20 orange): it colors the links inside the configurator ("Categoría",
 * the guide link), the per-group value echo under every group, checked-radio
 * backgrounds, tooltips, toggles, the selected-card border. Orange is not part of
 * this brand (and is too close to the red reserved for errors), so on this product
 * the variable becomes the text-safe brand teal (--ed-color-link, 5.17:1 on white;
 * raw #00B7B7 is only ever used as a border/fill here, never as text) with white
 * on it. The add-to-cart button has its own explicit rules further down and is not
 * affected. Product fabric/color swatches are photographs, never recolored.
 */
body.postid-2833 {
	--sgg-button-background: var(--ed-color-link);
	--sgg-button-color: #ffffff;
	--sgg-button-hover-background: var(--ed-color-link-hover);
	--sgg-button-hover-color: #ffffff;
	--sgg-option-active-background: rgb(0 183 183 / 0.09);
}

/* The per-group echo of the selected value ("Con cadena", "Basic 1%", ...) repeats
 * what the selected card already shows: quiet, neutral, small. */
body.postid-2833 .staggs-product-options .option-group-summary {
	margin-top: var(--ed-space-xs);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * "1 - MEDIDAS" spacing — Ancho (2830, shown first) and Alto (2831, shown
 * second — see assets/js/staggs-medidas-bridge.js, which reorders them
 * visually) sit right after each other with a large visual gap because
 * STAGGS' own per-group padding (`--sgg-group-spacing-top`/`-bottom` on
 * `.option-group`, staggs-public.min.css) defaults to 60px on every side
 * of every group, on every STAGGS product sitewide — confirmed live: 60px
 * of that is Ancho's own bottom padding (its `.option-group-price-details`
 * price label sits above it), not a margin between two boxes. Overriding
 * the CSS custom property on just these two attribute IDs (this pilot's
 * own Ancho/Alto, not the shared class) tightens only the gap between
 * them, on the sides that actually face each other — every other step on
 * this product, and every other STAGGS product, keeps STAGGS' own
 * default spacing untouched.
 * ------------------------------------------------------------------ */

#option-group-2830 {
	--sgg-group-spacing-bottom: 16px;
}

#option-group-2831 {
	--sgg-group-spacing-top: 16px;
}

/* Phones (<=767px, where STAGGS uses its separate -mb variables): 30px + 30px of group
 * padding left ~73px between Ancho's "Min … max" line and Alto's heading. 12px + 12px
 * brings it to ~37px: compact, not tight. Only the closed state is affected: an open
 * hint still moves Alto down naturally. Desktop and tablet keep the values above. */
@media (max-width: 767px) {
	#option-group-2830 {
		--sgg-group-spacing-bottom-mb: 12px;
	}

	#option-group-2831 {
		--sgg-group-spacing-top-mb: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Card selection accent — EstoresDirecto turquoise instead of STAGGS'
 * default orange, for both the "Tipo de tejido" and "Color del tejido"
 * Cards-template option groups on this product. `:has()` targets the
 * checked radio's sibling `.option` (STAGGS toggles no class of its own
 * on selection — see the DOM shape in staggs-muestras-bridge.js's
 * docblock), so no STAGGS behavior is touched, only the selected color.
 * ------------------------------------------------------------------ */

/*
 * Selected state — one language for every option card on the product (fabric
 * type, Accionamiento, Posición, supports, ... ) and for the color cards
 * (staggs-tejido.css uses the same recipe): brand border (thickened with an inset
 * ring so nothing shifts), a light brand tint (--sgg-option-active-background
 * above), a check badge (pure CSS, never colour alone) and a stronger, dark label
 * — the text is graphite, never turquoise, so it stays readable.
 */
.option-group-options.cards .option {
	position: relative;
}

.option-group-options.cards label:has(input:checked) .option {
	border-color: var(--ed-color-primary) !important;
	box-shadow: inset 0 0 0 1px var(--ed-color-primary);
}

.option-group-options.cards label:has(input:checked) .option-label {
	color: var(--ed-color-heading) !important;
	font-weight: 600;
}

.option-group-options.cards label:has(input:checked) .option::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	width: 22px;
	height: 22px;
	background-color: var(--ed-color-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 2px #ffffff;
}

.option-group-options.cards label:has(input:checked) .option::after {
	content: '';
	position: absolute;
	top: 15px;
	left: 18px;
	z-index: 3;
	width: 6px;
	height: 11px;
	border: solid var(--ed-color-heading);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* The zoom control (assets/css/components/color-controls.css) is pinned to the color photo. */
.option-group-options.cards .option-image {
	position: relative;
}

/* ------------------------------------------------------------------ *
 * Shared lightbox (assets/js/lightbox.js) — same component/markup as the
 * guide pages and Muestras gratis (see guide-page.css), duplicated here
 * because this page loads staggs-bridge.css, not guide-page.css. Kept
 * visually identical on purpose — one lightbox look sitewide.
 * ------------------------------------------------------------------ */

body.ed-lightbox-open {
	overflow: hidden;
}

.ed-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ed-space-lg);
}

.ed-lightbox[hidden] {
	display: none;
}

.ed-lightbox__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(16, 19, 20, 0.86);
	border: 0;
	padding: 0;
	cursor: default;
}

.ed-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: inline-flex;
	max-width: min(900px, 92vw);
	max-height: 90vh;
}

.ed-lightbox__img {
	display: block;
	max-width: min(900px, 92vw);
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
	opacity: 1;
	transition: opacity var(--ed-transition-fast);
}

.ed-lightbox__img.is-loading {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ed-lightbox__img {
		transition: none;
	}
}

.ed-lightbox__close {
	position: absolute;
	top: var(--ed-space-sm);
	right: var(--ed-space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: rgba(16, 19, 20, 0.72);
	color: #ffffff;
	border: 0;
	border-radius: var(--ed-radius-full);
	cursor: pointer;
}

.ed-lightbox__close:hover {
	background-color: rgba(16, 19, 20, 0.9);
}

.ed-lightbox__close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.ed-lightbox__close svg {
	width: 16px;
	height: 16px;
}

/*
 * Gallery navigation (assets/js/lightbox.js, "Fotos del tejido"): a small pill over
 * the bottom of the photo — previous, "1 / 8", next; hidden for single photos.
 */
.ed-lightbox__nav {
	position: absolute;
	left: 50%;
	bottom: var(--ed-space-sm);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	padding: 4px;
	background-color: rgba(16, 19, 20, 0.72);
	border-radius: var(--ed-radius-full);
	color: #ffffff;
	transform: translateX(-50%);
}

.ed-lightbox__nav[hidden] {
	display: none;
}

.ed-lightbox__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--ed-radius-full);
	color: inherit;
	cursor: pointer;
}

.ed-lightbox__nav-btn:hover {
	background-color: rgba(255, 255, 255, 0.16);
}

.ed-lightbox__nav-btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 0;
}

.ed-lightbox__nav-btn svg {
	width: 18px;
	height: 18px;
}

.ed-lightbox__nav-count {
	min-width: 3.5em;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Add to cart button — STAGGS renders `.single_add_to_cart_button` as
 * `flex: 1` inside `.staggs-cart-form-button` (`display:flex;
 * justify-content:space-between; width:100%`, staggs-public.min.css),
 * which is why it stretched into a full-width bar. Restyled here to the
 * EstoresDirecto CTA language instead — same visual values as
 * buttons.css's own `.ed-button--primary` (brand turquoise,
 * `--ed-color-heading` text — never white-on-turquoise, which fails
 * WCAG AA text contrast, see that file's own note — full pill radius,
 * same hover lift/shadow) without literally reusing that class, since
 * this is a real STAGGS-rendered `<button>` with its own
 * `#totalprice`/`.amount` markup this file never touches. `!important`
 * only where STAGGS' own same-or-higher-specificity rules
 * (`.option-group-wrapper .option-group.total .staggs-cart-form-button
 * .staggs button.single_add_to_cart_button:hover`, etc.) would otherwise
 * win; never edits `--sgg-button-*` globally, since those may still
 * matter for other STAGGS buttons this product doesn't currently show.
 * Scoped to `body.postid-2833` only.
 * ------------------------------------------------------------------ */

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button {
	position: relative; /* anchor for .ed-cart-btn-loading below */
	display: inline-flex !important;
	flex: 0 1 auto !important;
	margin-left: auto !important;
	align-items: center;
	justify-content: center;
	gap: var(--ed-space-2xs);
	width: auto !important;
	max-width: 100%;
	min-height: 48px;
	padding: var(--ed-space-xs) var(--ed-space-lg) !important;
	background-color: var(--ed-color-primary) !important;
	color: var(--ed-color-heading) !important;
	border-radius: var(--ed-radius-full) !important;
	font-family: var(--ed-font-body) !important;
	font-size: var(--ed-font-size-sm) !important;
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-button);
	box-shadow: var(--ed-shadow-sm);
	transition: background-color var(--ed-transition-fast), color var(--ed-transition-fast), transform var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
}

/*
 * Small cart icon before the label — inline SVG via `mask-image` (never a
 * new icon-library dependency), `background-color: currentColor` so it
 * always matches the button's own text color with no separate color rule
 * to keep in sync.
 *
 * A real child element (`.ed-cart-btn-icon`, inserted once by
 * staggs-cart-success-modal.js), not a `::before` pseudo-element: STAGGS'
 * own `[type=submit].loading:before` (staggs-public.min.css) — its own
 * hidden dot-spinner, built for buttons this project doesn't use that
 * spinner on — has a longer, more specific ancestor chain
 * (`.option-group-wrapper .option-group.total .staggs-cart-form-button
 * .staggs [type=submit].loading:before`) than anything scoped to
 * `body.postid-2833` can out-specify, and DOES match this real cart
 * button's actual ancestors (confirmed live). It replaces `position`,
 * `width` and more on the `::before` box wholesale, which — being a
 * pseudo-element, never a real element — cannot be reliably fought
 * property-by-property. Live-tested: with the icon on `::before`, STAGGS'
 * rule pulled it to `position:absolute` mid-request, removing it from the
 * flex flow and shrinking the whole button by exactly its width + gap —
 * a real, persistent violation of the "never resize" requirement, not a
 * one-frame flicker. A plain child span has no such rule targeting it at
 * all, so this can't recur regardless of STAGGS' own CSS.
 */
.ed-cart-btn-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 7z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 7z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/*
 * The price (STAGGS' own `#totalprice > .amount`, appended via
 * staggs-public.min.js) reads a little heavier than the label so it
 * doesn't get lost at the end of the button — still one compact button,
 * not two competing pieces of text.
 */
body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button #totalprice {
	margin-left: var(--ed-space-3xs);
	font-weight: 700;
}

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button:hover,
body.postid-2833 .option-group-wrapper .option-group.total .staggs-cart-form-button.staggs button.single_add_to_cart_button:hover,
body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button:focus,
body.postid-2833 .option-group-wrapper .staggs-cart-form-button.staggs button.single_add_to_cart_button:focus {
	background-color: var(--ed-color-primary-hover) !important;
	color: var(--ed-color-heading) !important;
	transform: translateY(-1px);
	box-shadow: var(--ed-shadow-md);
}

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Loading state — STAGGS' own `.loading` class, toggled by
 * staggs-pro/public/js/staggs-public.min.js's `beforeSend`/`complete`
 * jQuery AJAX callbacks (a REAL request lifecycle signal, never a fake
 * timer): added right before the real AJAX call fires, removed the
 * instant it settles, success or error. Everything below reacts to that
 * SAME class — no separate JS state to keep in sync.
 *
 * Hiding the original label/icon/price relies on NEITHER STAGGS' own
 * `color:transparent` NOR a `::before` pseudo-element — both were tried
 * and both were live-proven unreliable on this real button, not just in
 * theory:
 *
 * - STAGGS' `.option-group-wrapper .option-group.total
 *   .staggs-cart-form-button.staggs [type=submit].loading{color:
 *   transparent!important}` DOES structurally match this button (its
 *   real ancestors do include `.option-group-wrapper`/`.option-group.
 *   total`, confirmed live) — but instrumented against the REAL
 *   STAGGS-triggered `.loading` (not a manually-toggled class, which
 *   behaved differently), the button's computed `color` measured opaque
 *   for the entire ~9s request, every sample. Root cause not fully
 *   resolvable from outside STAGGS' own minified JS, and not worth
 *   chasing further: relying on a third-party rule that only sometimes
 *   fires is exactly the kind of hidden coupling this fix needs to not
 *   have.
 * - The product's own cart-icon on `::before` had the same problem from
 *   the other side: STAGGS' OWN `[type=submit].loading:before` rule (a
 *   real dot-spinner meant for buttons this project doesn't use that
 *   spinner style on) has a longer ancestor chain than anything scoped
 *   to `body.postid-2833` can out-specify, and it DOES win — live-tested,
 *   it pulled the icon's `::before` to `position:absolute`, removing it
 *   from the flex flow and shrinking the whole button by its width+gap
 *   for the entire request. A one-frame flicker would have been
 *   tolerable; a persistent 26px shrink for the whole loading window is
 *   exactly the CRITICAL "never resize" violation this feature exists to
 *   prevent.
 *
 * Fixed by not competing on either shared surface at all: the label text
 * is wrapped in `.ed-cart-btn-label` and the icon lives on
 * `.ed-cart-btn-icon` (both real child elements inserted once by
 * staggs-cart-success-modal.js) — plain classes STAGGS' CSS has no rule
 * for, so there is no cascade fight left to lose. `visibility:hidden`
 * (not `color`, not `content:none`) hides them: it keeps their boxes in
 * layout at their normal size (unlike `display:none`), so the button's
 * width is still governed by the same real, still-present content and
 * genuinely cannot change — no dependency on any transition or 3rd-party
 * rule actually firing. `#totalprice` (STAGGS' own price span, a real
 * child, never a pseudo-element) gets the same `visibility:hidden`
 * treatment for the same reason. The spinner+text overlay
 * (`.ed-cart-btn-loading`) layers on top via `position:absolute; inset:
 * 0`, outside normal flow, so it can only ever add pixels on the
 * z-axis, never the width/height axis.
 * ------------------------------------------------------------------ */

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button.loading {
	cursor: default;
}

/*
 * Neutralizes STAGGS' OWN `.loading::before` — a real, separate native
 * loader (`.option-group-wrapper .option-group.total .staggs-cart-form-
 * button.staggs [type="submit"].loading::before`, staggs-public.min.css):
 * a 3-dot `box-shadow` spinner, animated via `animation:staggs-loader`.
 * With the cart icon moved off `::before` onto a real `.ed-cart-btn-icon`
 * element (above), nothing contested this pseudo-element anymore, so
 * STAGGS' own dot loader started rendering — unopposed, live-confirmed
 * via the reference video and a live computed-style check — right on
 * top of `.ed-cart-btn-label`'s text. Confirmed via CSSOM that STAGGS'
 * rule carries NO `!important` on any property, so `content: none
 * !important` here always wins regardless of that selector's own
 * (considerable) specificity — no need to out-specify a 7-class STAGGS
 * chain, `!important` alone settles it. `content: none` removes the
 * pseudo-element's box entirely, so its `animation`/`box-shadow` become
 * moot — this is the single most robust way to guarantee zero visible
 * trace of STAGGS' own loader, now and if STAGGS ever changes that
 * rule's other properties.
 */
body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button.loading::before {
	content: none !important;
}

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button.loading .ed-cart-btn-icon,
body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button.loading .ed-cart-btn-label,
body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button.loading #totalprice {
	visibility: hidden;
}

.ed-cart-btn-loading {
	display: none;
}

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button.loading .ed-cart-btn-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ed-space-2xs);
	position: absolute;
	inset: 0;
}

.ed-cart-btn-loading__spinner {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 2px solid rgba(16, 19, 20, 0.25);
	border-top-color: var(--ed-color-heading);
	border-radius: var(--ed-radius-full);
	animation: ed-cart-btn-spin 0.7s linear infinite;
}

.ed-cart-btn-loading__text {
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-heading);
	white-space: nowrap;
}

@keyframes ed-cart-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-cart-btn-loading__spinner {
		animation-duration: 1.8s;
	}
}

/* ------------------------------------------------------------------ *
 * Skip link + main landmark of the classic (PHP) product template
 * (header.php / footer.php render both here; block templates get theirs from
 * core and the template group). Hidden until keyboard focus, then a clear
 * brand button: graphite on turquoise (7.5:1), a visible focus ring, never
 * orange. `#main` is only a focus target (tabindex -1), so no outline on it.
 * ------------------------------------------------------------------ */

body.staggs-product-configurator-page .skip-link.screen-reader-text:focus {
	top: var(--ed-space-xs);
	left: var(--ed-space-xs);
	padding: var(--ed-space-xs) var(--ed-space-md);
	background-color: var(--ed-color-primary);
	color: var(--ed-color-heading);
	border-radius: var(--ed-radius-full);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: var(--ed-shadow-lg);
	outline: 3px solid var(--ed-color-heading);
	outline-offset: 2px;
}

/*
 * Phones / tablets: room before the footer while a required attribute is still
 * open, so the progressive auto-scroll can land the new attribute comfortably
 * mid-screen instead of the footer riding up under it. The value is measured
 * and set by assets/js/staggs-configurator-autoscroll.js (0 when the
 * configuration is complete and on desktop). When the page ends with the closing
 * block (product-closing.css) the room is kept above that block instead, so the
 * block stays flush against the footer.
 */
.ed-classic-main:not(:has(.ed-product-closing)) {
	padding-bottom: var(--ed-config-tail, 0px);
}

.ed-classic-main:focus {
	outline: none;
}