/**
 * Add-to-cart stepper — the yellow "in cart" pill state, shared by the
 * catalogue ("Cataleg i comandes") and the single product page (scope
 * widened 2026-09-23, same day, second brief — see catalogue-stepper.js's
 * header for "ONE ENGINE, TWO SURFACES").
 *
 * Per product card on the catalogue (catalogue-stepper.js builds the markup
 * this file styles): at qty 0 the card's "Afegeix a la cistella" button is
 * untouched — no rule here targets the default state at all, on purpose, so
 * today's black button cannot regress by a single pixel. At qty >= 1 the
 * SAME anchor's wrapper, `.e-atc-qty-button-holder`, gets the
 * `fdor-stepper-holder--active` class and becomes the yellow pill; the
 * anchor turns transparent with black text and shrinks to the middle,
 * flanked by the − / + buttons this plugin inserts as its siblings. The
 * single product page's `form.cart` plays the exact same "holder" role for
 * its own submit button — see PRODUCT PAGE below for what is different
 * there and why.
 *
 * MEASURED LIVE (production, headless Playwright, 2026-09-23) before writing
 * a single rule here, because the holder is Elementor Pro's own
 * `widget-woocommerce-product-add-to-cart.min.css` (v4.2.3), not markup this
 * plugin controls:
 *
 *   - `.e-atc-qty-button-holder` is ALREADY `display:flex;flex-wrap:wrap`
 *     (the widget's "layout-stacked" setting), with a `> *{flex-basis:100%}`
 *     rule on every direct child and `margin-block-start` on every child
 *     that is not `:first-child`. With only the anchor inside (today), that
 *     is invisible — one child, one row. The moment this file's JS inserts
 *     two more direct children (the − and + buttons), the SAME rule would
 *     stack all three full-width, one per row, instead of one pill row —
 *     hence `flex-wrap:nowrap` and `flex-basis:auto` below, both
 *     `!important`: Elementor's rule carries no `!important` of its own, so
 *     beating it needs no more specificity, only that. Same reasoning
 *     cart-quantity.php's own header already documents against the exact
 *     same stylesheet (its single-product-page mobile fix).
 *   - the anchor's own computed `border-radius` is `99px` (fully round) —
 *     read at runtime by the JS and set as `--fdor-stepper-radius` on the
 *     holder, never hard-coded here, so a radius change made from the
 *     widget's own Elementor panel keeps the pill's corners matching the
 *     button's.
 *   - the anchor is `.button.product_type_simple.add_to_cart_button
 *     .ajax_add_to_cart`, i.e. WooCommerce's own loop add-to-cart anchor,
 *     not an Elementor Button widget — no `.elementor-button-text` span
 *     inside it, just a bare text node, which is why the count badge below
 *     is appended straight into the anchor rather than into a nested span.
 *
 * COLOUR: `#FFC251` is Pixun's own value, given after seeing the mockup
 * (`images/2.webp`) — not read from any existing site token, because
 * nothing on the site already uses it.
 *
 * `.loading` / `.added`: WooCommerce's `add-to-cart.js` adds `.loading` to
 * the anchor for the duration of the AJAX request and `.added` once it
 * resolves (see `add-to-cart.js`, `onAddToCart`/`updateButton`) — WITH NO
 * click-side way to opt out, and core's own rules for both DO reach this
 * button (confirmed live, not assumed: a first version of this file left
 * `&.added::after`'s checkmark glyph unhandled, on the theory that the
 * `.woocommerce` ancestor scope those rules sit under might not be present
 * on this Elementor Loop grid — a screenshot of the pill showed the
 * checkmark sitting right after the count badge, settling it). `.loading`
 * gets the same treatment as `.added` below for the same reason, even
 * though only `.added` was ever caught on camera: both rules live under the
 * identical outer selector in `woocommerce.scss`, so there is no reason one
 * would reach this button and not the other.
 *
 * @package Forquillador
 */

.fdor-stepper-holder {
	position: relative;
}

/* ---- Active (qty >= 1): the holder becomes the pill. ------------------ */

.fdor-stepper-holder.fdor-stepper-holder--active {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	background-color: #ffc251;
	border-radius: var( --fdor-stepper-radius, 99px );
	padding-inline: 10px;
	gap: 6px;
}

.fdor-stepper-holder.fdor-stepper-holder--active > * {
	flex-basis: auto !important;
	margin: 0 !important;
}

.fdor-stepper-holder.fdor-stepper-holder--active a.add_to_cart_button {
	flex: 1 1 auto !important;
	width: auto !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #000000 !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.fdor-stepper-holder.fdor-stepper-holder--active a.add_to_cart_button.loading {
	opacity: 1 !important;
	padding-right: 8px !important; /* same as the active-state label padding below — no spinner gutter reserved */
}

.fdor-stepper-holder.fdor-stepper-holder--active a.add_to_cart_button.loading::after {
	content: none !important;
}

.fdor-stepper-holder.fdor-stepper-holder--active a.add_to_cart_button.added {
	background: transparent !important;
	color: #000000 !important;
}

/* WooCommerce core (`woocommerce.scss`): `&.added::after` prints a
   checkmark glyph from its own icon font (`content:"\e017"`) after the
   button — measured live: this DOES reach the anchor here (screenshotted
   sitting right after the count badge, inside the pill), so whatever
   scoping was suspected to make `.loading`'s sibling rule inert above does
   not protect this one. Same fix, `content:none`. */
.fdor-stepper-holder.fdor-stepper-holder--active a.add_to_cart_button.added::after {
	content: none !important;
}

/* ---- PRODUCT PAGE: `form.cart` itself is the holder. -------------------
   Measured live (production, headless Playwright, 2026-09-23) before
   writing this: `form.cart` is ALREADY `display:flex;flex-wrap:nowrap`
   (desktop) with zero padding/background/gap — `.quantity` and the submit
   button are its two flex children. Hiding `.quantity` and giving the FORM
   the same active-state treatment as `.e-atc-qty-button-holder` above (both
   match `.fdor-stepper-holder.fdor-stepper-holder--active`, no extra rule
   needed for that part) turns it into the same pill with zero new markup
   layer.

   TWO RULES ONLY NEED BEATING, BOTH FROM THIS PLUGIN'S OWN
   cart-quantity.php (its single-product-page ≤767px mobile-overflow fix,
   written 2026-09-23 for the case of ONE lone full-width button — see that
   file's own header):

     .single-product form.cart{flex-wrap:wrap!important}
     .single-product form.cart .single_add_to_cart_button{
       flex:1 1 100%!important;width:100%!important;margin-top:10px}

   Both carry `!important` (unlike the Elementor rule above), so beating
   them needs MORE specificity, not just `!important` — the two rules below
   add the `.single-product` + `form` context back in on purpose, to be
   provably higher than (0,3,1) rather than relying on source order. Active
   state wants the OPPOSITE of both: one nowrap row (minus, button, plus)
   at every width, and the button sized to its own content (`flex:1 1 auto`,
   matching the catalogue anchor above) rather than forced to 100% — a
   100%-wide button would leave no room for minus/plus in that same row. */

.fdor-stepper-holder.fdor-stepper-holder--active .quantity {
	display: none !important;
}

.single-product form.cart.fdor-stepper-holder--active {
	flex-wrap: nowrap !important;
}

.single-product form.cart.fdor-stepper-holder.fdor-stepper-holder--active .single_add_to_cart_button {
	flex: 1 1 auto !important;
	width: auto !important;
	/* Both measured live, 380px: the button's own base style is
	   `white-space:nowrap;min-width:auto` (its DEFAULT — unlike the
	   catalogue anchor above, which is already `white-space:normal`). A
	   flex item's default min-width is its content's min-width, and with
	   wrapping forbidden that content min-width is the WHOLE unwrapped
	   label — so `flex-shrink` alone could not shrink it to fit alongside
	   minus/plus, and the pill overflowed its own row (scrollWidth 395 vs
	   clientWidth 285 at 360px, confirmed live). Lifting both is what lets
	   "Afegeix a la cistella" wrap to a second line at the narrowest
	   widths instead. */
	white-space: normal !important;
	min-width: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #000000 !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* ---- − / + : outlined, fully round, matching the site's other steppers
   (assets/cart-quantity.js's `.fdor-qty-btn`) but under their own class —
   the widget's own CSS targets any plain `.button`/`button` inside the
   holder, so reusing that class name here would inherit rules meant for a
   quantity-input stepper, not this one. ------------------------------- */

.fdor-stepper-btn {
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto !important;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border: 2px solid #000000;
	border-radius: 50%;
	background-color: transparent;
	color: #000000;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fdor-stepper-holder--active .fdor-stepper-btn {
	display: inline-flex;
}

.fdor-stepper-btn:hover:not(:disabled),
.fdor-stepper-btn:focus-visible:not(:disabled) {
	background-color: #000000;
	color: #ffffff;
	outline: none;
}

.fdor-stepper-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ---- Count badge — appended inside the anchor, after its own text. ---- */

.fdor-stepper-count {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	margin-inline-start: 8px;
	border-radius: 999px;
	background-color: #000000;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 22px;
	vertical-align: middle;
}

.fdor-stepper-holder--active .fdor-stepper-count {
	display: inline-flex;
}

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

/* Same breakpoint cart-quantity.php's own steppers grow the touch target
   at (≤480px) — sized down slightly here since the pill is narrower and a
   36px circle already meets the 44px WCAG target once its padding-inline
   gap is counted; the mini-cart's stand-alone stepper has no such
   constraint, which is why its own breakpoint value differs. */
@media ( max-width: 480px ) {
	.fdor-stepper-btn {
		width: 34px;
		height: 34px;
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
   Review 2026-09-23 (lagrafica session, measured on the production page).
   The Loop Item's and the product template's own Elementor rules
     .elementor-4827 .elementor-element.elementor-element-ed0098c .cart button
     .elementor-4535 .elementor-element.elementor-element-054056b .cart button
   (specificity 0,4,1) style EVERY button inside the add-to-cart form, so the
   plain `.fdor-stepper-btn` rules above lost: − and + came out as filled
   black 46x50 pills in the catalogue and white 60x36 ovals on the product
   page. The intended look is forced here, the same on both surfaces.
   ------------------------------------------------------------------------- */
.fdor-stepper-holder .fdor-stepper-btn {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	padding: 0 !important;
	border: 2px solid #000000 !important;
	border-radius: 50% !important;
	background-color: transparent !important;
	color: #000000 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-shadow: none !important;
}
.fdor-stepper-holder .fdor-stepper-btn:hover:not(:disabled),
.fdor-stepper-holder .fdor-stepper-btn:focus-visible:not(:disabled) {
	background-color: #000000 !important;
	color: #ffffff !important;
}
@media (max-width: 480px) {
	.fdor-stepper-holder .fdor-stepper-btn {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		font-size: 16px !important;
	}
}

/* The label keeps the widget's vertical padding (so the pill is exactly as
   tall as the black button) but drops the 23-28px side padding: next to
   − and + that padding is what pushed "Afegeix a la cistella 2" onto three
   lines on the 304px product-page column at 380px. */
.fdor-stepper-holder.fdor-stepper-holder--active a.add_to_cart_button,
.single-product form.cart.fdor-stepper-holder.fdor-stepper-holder--active .single_add_to_cart_button {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* The 22px count badge is taller than the 16px label line, so it grew the
   pill by 6px the moment it turned yellow (measured: 66 -> 72 catalogue,
   52 -> 58 product page). Negative block margins keep it out of the line
   box: the yellow pill is exactly as tall as the black button. */
.fdor-stepper-holder--active .fdor-stepper-count {
	margin-block: -4px;
}

/* Product page, narrow screens: the pill lives in a ~304px column at 380px,
   and at the widget's 16px "Afegeix a la cistella" + count does not fit
   between − and + — the count dropped to a second line. 14px fits from
   ~340px up; below that it still wraps cleanly rather than overflowing. */
@media (max-width: 480px) {
	.single-product form.cart.fdor-stepper-holder.fdor-stepper-holder--active .single_add_to_cart_button {
		font-size: 14px !important;
	}
}