/**
 * MON PORTÉ Product Add to Cart (PDP-C2).
 * Strictly .mppc-* scoped. Presentation over native Woo/Flatsome markup.
 * Tiers: base = desktop, max-width:850 tablet, max-width:549 mobile.
 */

.mppc-purchase {
	color: var(--mppc-text, #1f1e1b);
}

.mppc-inner {
	width: 100%;
	max-width: var(--mppc-maxw, 600px);
	display: flex;
	flex-direction: column;
	gap: var(--mppc-gap, 20px);
}

/* ---- Price (native HTML, editorial type) ---- */

.mppc-price .price {
	margin: 0;
	font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--mppc-text, #1f1e1b);
}

.mppc-price .price del {
	font-weight: 400;
	opacity: 0.6;
}

.mppc-price .price ins {
	text-decoration: none;
}

/* ---- Variation rows (native table, editorial labels) ---- */

.mppc-purchase .variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.mppc-purchase .variations th.label,
.mppc-purchase .variations td.value {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.mppc-purchase .variations th.label label {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	margin: 0 0 12px;
	font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--mppc-text, #1f1e1b);
}

/* Native Flatsome selected-value node: "Couleur[: Kaki]". The separator
 * span is hidden and an em-dash is injected only when a value exists,
 * so the row reads "Couleur — Kaki". If Flatsome ever changes this
 * markup, the fallback is the native "Couleur: Kaki" (still truthful). */
.mppc-purchase .ux-swatch-selected-value__separator {
	display: none;
}

.mppc-purchase .ux-swatch-selected-value:not(:empty)::before {
	content: "—\00a0";
}

.mppc-purchase .ux-swatch-selected-value {
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mppc-muted, #646049);
}

.mppc-purchase.mppc-hide-labels .variations th.label {
	display: none;
}

/* Native fallback select stays usable when swatches are absent. */
.mppc-purchase .variations select {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	border: 1px solid color-mix(in srgb, var(--mppc-muted, #646049) 35%, transparent);
	border-radius: 2px;
	background: transparent;
	color: var(--mppc-text, #1f1e1b);
}

/* ---- Swatches: native Flatsome nodes, MON PORTÉ token skin ----
 *
 * The variation engine stays 100% native (hidden select + .selected
 * state + gallery sync + reset). Only presentation is owned here.
 *
 * Real-DOM specificity notes (flatsome-swatches-frontend.css):
 * - native size comes from container modifiers, e.g.
 *   .ux-swatches--large .ux-swatch--image (0,2,0), so C2 size rules
 *   are scoped to 0,3,0 to win regardless of stylesheet order.
 * - native selected is .variations_form .ux-swatch.selected (0,3,0),
 *   so C2 selected rules carry .mppc-form (0,4,0).
 * - native hover is .ux-swatch:hover:not(.selected):not(.disabled)
 *   (0,4,0), so C2 hover overrides use the full :not() chain (0,9,0).
 * - native "border" is a box-shadow (0 0 0 1px #d5d5d5), so the
 *   border-width/color controls drive box-shadow, and the selected
 *   ring is an outline (outline-offset = ring offset). No !important
 *   anywhere; order-independence comes from specificity alone.
 * - native shape is a container modifier (.ux-swatches--circle *);
 *   C2 shape classes target color/image swatches only — label/text
 *   swatches keep their native pill format.
 */

.mppc-purchase .ux-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mppc-sw-gap, 12px);
	margin: 0 0 4px;
}

.mppc-purchase .ux-swatches .ux-swatch--color,
.mppc-purchase .ux-swatches .ux-swatch--image {
	width: var(--mppc-sw-size, 32px);
	height: var(--mppc-sw-size, 32px);
	min-width: var(--mppc-sw-size, 32px);
	padding: 2px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 0 var(--mppc-sw-bw, 1px) var(--mppc-sw-bc, #d5d5d5);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mppc-purchase .ux-swatches .ux-swatch--color .ux-swatch__color,
.mppc-purchase .ux-swatches .ux-swatch--image .ux-swatch__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Shape overrides (explicit owner classes; beat style presets by
 * source order below the preset block). */
.mppc-purchase.mppc-sw-square .ux-swatches .ux-swatch--color,
.mppc-purchase.mppc-sw-square .ux-swatches .ux-swatch--image {
	border-radius: 2px;
}

.mppc-purchase.mppc-sw-square .ux-swatches .ux-swatch--color .ux-swatch__color,
.mppc-purchase.mppc-sw-square .ux-swatches .ux-swatch--image .ux-swatch__img {
	border-radius: 2px;
}

.mppc-purchase.mppc-sw-soft .ux-swatches .ux-swatch--color,
.mppc-purchase.mppc-sw-soft .ux-swatches .ux-swatch--image {
	border-radius: 6px;
}

.mppc-purchase.mppc-sw-soft .ux-swatches .ux-swatch--color .ux-swatch__color,
.mppc-purchase.mppc-sw-soft .ux-swatches .ux-swatch--image .ux-swatch__img {
	border-radius: 6px;
}

/* Selected states. Default (no class) = Ring: quiet outer accent
 * ring, base border collapsed so the ring reads alone. */
.mppc-purchase .mppc-form .variations_form .ux-swatches .ux-swatch--color.selected,
.mppc-purchase .mppc-form .variations_form .ux-swatches .ux-swatch--image.selected,
.mppc-purchase.mppc-sel-ring .mppc-form .variations_form .ux-swatches .ux-swatch--color.selected,
.mppc-purchase.mppc-sel-ring .mppc-form .variations_form .ux-swatches .ux-swatch--image.selected {
	box-shadow: 0 0 0 0 transparent;
	outline: var(--mppc-sw-selw, 2px) solid var(--mppc-sw-selc, var(--mppc-accent, #60373d));
	outline-offset: var(--mppc-sw-ring, 2px);
}

/* Double Ring: inner native-width border + outer accent ring. */
.mppc-purchase.mppc-sel-double .mppc-form .variations_form .ux-swatches .ux-swatch--color.selected,
.mppc-purchase.mppc-sel-double .mppc-form .variations_form .ux-swatches .ux-swatch--image.selected {
	box-shadow: 0 0 0 var(--mppc-sw-bw, 1px) var(--mppc-sw-bc, #d5d5d5);
	outline: var(--mppc-sw-selw, 2px) solid var(--mppc-sw-selc, var(--mppc-accent, #60373d));
	outline-offset: var(--mppc-sw-ring, 2px);
}

/* Strong Border: no halo, stronger selected border only. */
.mppc-purchase.mppc-sel-strong .mppc-form .variations_form .ux-swatches .ux-swatch--color.selected,
.mppc-purchase.mppc-sel-strong .mppc-form .variations_form .ux-swatches .ux-swatch--image.selected {
	box-shadow: 0 0 0 var(--mppc-sw-selw, 2px) var(--mppc-sw-selc, var(--mppc-accent, #60373d));
	outline: none;
}

/* Label/text swatches keep native pill format; selected state is an
 * accessible outline in the selected color (shape classes never
 * touch them). */
.mppc-purchase .ux-swatches .ux-swatch--label {
	width: auto;
	height: auto;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 999px;
}

.mppc-purchase .mppc-form .variations_form .ux-swatches .ux-swatch--label.selected {
	box-shadow: none;
	outline: var(--mppc-sw-selw, 2px) solid var(--mppc-sw-selc, var(--mppc-accent, #60373d));
	outline-offset: 2px;
}

/* Hover. Default (no class) = Soft Scale (max 1.04, motion-safe).
 * Native hover only paints box-shadow, so scale never conflicts. */
.mppc-purchase .ux-swatches .ux-swatch:hover {
	transform: scale(1.04);
}

.mppc-purchase.mppc-hov-none .mppc-form .variations_form .ux-swatches .ux-swatch:hover:not(.selected):not(.disabled),
.mppc-purchase.mppc-hov-scale .mppc-form .variations_form .ux-swatches .ux-swatch:hover:not(.selected):not(.disabled) {
	box-shadow: 0 0 0 var(--mppc-sw-bw, 1px) var(--mppc-sw-bc, #d5d5d5);
}

.mppc-purchase.mppc-hov-none .ux-swatches .ux-swatch:hover {
	transform: none;
}

.mppc-purchase.mppc-hov-border .mppc-form .variations_form .ux-swatches .ux-swatch:hover:not(.selected):not(.disabled) {
	box-shadow: 0 0 0 var(--mppc-sw-bw, 1px) var(--mppc-sw-selc, var(--mppc-accent, #60373d));
	transform: none;
}

/* Focus stays keyboard-visible and distinct from the selected ring
 * (dashed vs solid). Source order after selected rules wins ties. */
.mppc-purchase .mppc-form .variations_form .ux-swatches .ux-swatch:focus-visible {
	outline: 2px dashed var(--mppc-muted, #646049);
	outline-offset: calc(var(--mppc-sw-ring, 2px) + 2px);
}

/* Disabled keeps native strike/opacity language; custom rules never
 * promote an unavailable option to active. */
.mppc-purchase .ux-swatches .ux-swatch.disabled,
.mppc-purchase .ux-swatches .ux-swatch[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

.mppc-purchase .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--mppc-muted, #646049);
	text-underline-offset: 3px;
}

/* ---- Single-variation state (native, quietly styled) ---- */

.mppc-purchase .woocommerce-variation .woocommerce-variation-price .price,
.mppc-purchase .single_variation .price {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 600;
}

.mppc-purchase .woocommerce-variation-availability .stock,
.mppc-purchase .stock {
	margin: 0;
	font-size: 13.5px;
	color: var(--mppc-muted, #646049);
}

.mppc-purchase .woocommerce-variation-description p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mppc-muted, #646049);
}

/* ---- Cart row: quantity + CTA ---- */

.mppc-purchase .woocommerce-variation-add-to-cart,
.mppc-purchase .cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--mppc-cart-gap, 12px);
}

/* ---- Quantity: native Flatsome joined control (.ux-quantity) ----
 *
 * The parent theme override (flatsome/woocommerce/global/quantity-input.php)
 * renders minus/input/plus inside ONE .ux-quantity wrapper with
 * parent-owned behavior. C2 styles that native control as one compact
 * joined unit. There is intentionally NO C2 stepper markup or JS. */

.mppc-purchase .quantity {
	display: flex;
	align-items: stretch;
	margin: 0;
}

.mppc-purchase .ux-quantity {
	display: inline-flex;
	align-items: stretch;
	margin: 0;
}

.mppc-purchase .ux-quantity__button {
	width: 42px;
	min-height: var(--mppc-btn-h, 50px);
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1;
	border: 1px solid color-mix(in srgb, var(--mppc-muted, #646049) 30%, transparent);
	border-radius: var(--mppc-btn-radius, 2px);
	background: transparent;
	color: var(--mppc-text, #1f1e1b);
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.mppc-purchase .ux-quantity__button:hover {
	border-color: color-mix(in srgb, var(--mppc-muted, #646049) 60%, transparent);
}

.mppc-purchase .quantity .ux-quantity__button--minus {
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.mppc-purchase .quantity .ux-quantity__button--plus {
	border-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.mppc-purchase .quantity .qty {
	width: 52px;
	min-height: var(--mppc-btn-h, 50px);
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	border: 1px solid color-mix(in srgb, var(--mppc-muted, #646049) 35%, transparent);
	border-radius: 0;
	background: transparent;
	color: var(--mppc-text, #1f1e1b);
	-moz-appearance: textfield;
	appearance: textfield;
}

.mppc-purchase .quantity .qty::-webkit-outer-spin-button,
.mppc-purchase .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mppc-purchase .quantity .qty:focus-visible,
.mppc-purchase .quantity .ux-quantity__button:focus-visible {
	outline: 2px solid var(--mppc-accent, #60373d);
	outline-offset: 2px;
}

/* ---- Add to Cart button (native submit, Bordeaux CTA) ---- */

.mppc-purchase .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: min(220px, 100%);
	min-height: var(--mppc-btn-h, 50px);
	margin: 0;
	padding: 0 28px;
	font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--mppc-accent, #60373d);
	border-radius: var(--mppc-btn-radius, 2px);
	background-color: var(--mppc-accent, #60373d);
	color: var(--mppc-btn-text, #fff);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mppc-purchase.mppc-btn-outline .single_add_to_cart_button {
	background-color: transparent;
	color: var(--mppc-accent, #60373d);
}

.mppc-purchase .single_add_to_cart_button:hover {
	background-color: color-mix(in srgb, var(--mppc-accent, #60373d) 88%, #000);
	border-color: color-mix(in srgb, var(--mppc-accent, #60373d) 88%, #000);
}

.mppc-purchase.mppc-btn-outline .single_add_to_cart_button:hover {
	background-color: var(--mppc-accent, #60373d);
	color: var(--mppc-btn-text, #fff);
}

.mppc-purchase .single_add_to_cart_button:disabled,
.mppc-purchase .single_add_to_cart_button.disabled,
.mppc-purchase .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---- Wishlist (native YITH instance, compact text-link row) ----
 *
 * YITH sizes its heart via its own frontend stylesheet
 * (svg.yith-wcwl-icon-svg 30px). The UX Builder preview does not load
 * that stylesheet, so an unstyled SVG falls back to default
 * replaced-element sizing (giant heart). These scoped bounds make
 * Builder and frontend structurally equivalent with identical markup. */

.mppc-wishlist {
	font-size: 14px;
}

.mppc-wishlist .yith-wcwl-add-to-wishlist,
.mppc-wishlist .yith-wcwl-add-button {
	margin: 0;
}

.mppc-wishlist a.add_to_wishlist {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
	font-size: 13.5px;
	color: var(--mppc-muted, #646049);
	text-underline-offset: 3px;
	line-height: 1.4;
}

.mppc-wishlist a.add_to_wishlist:hover {
	color: var(--mppc-text, #1f1e1b);
}

.mppc-purchase .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg,
.mppc-purchase .yith-wcwl-add-to-wishlist img.yith-wcwl-custom-icon {
	width: 20px;
	height: 20px;
	max-width: 20px;
	flex: 0 0 20px;
}

/* ---- Quantity layout: compact (smaller joined control) ---- */

.mppc-purchase.mppc-qty-compact .ux-quantity__button {
	width: 36px;
	min-height: 44px;
}

.mppc-purchase.mppc-qty-compact .quantity .qty {
	width: 44px;
	min-height: 44px;
}

/* ---- Wishlist styles ---- */

.mppc-purchase.mppc-wish-text .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg,
.mppc-purchase.mppc-wish-text .yith-wcwl-add-to-wishlist img.yith-wcwl-custom-icon {
	display: none;
}

/* ---- Wishlist feedback (YITH native added/saved states) ----
 *
 * Post-add (.yith-wcwl-wishlistaddedbrowse) and already-saved
 * (.yith-wcwl-wishlistexistsbrowse) render as ONE compact wrapping
 * row: semibold ink feedback + Bordeaux "Voir ma liste" link.
 * Scoped strictly to the PDP purchase block — the wishlist page and
 * loop buttons are untouched. No fixed widths, no nowrap traps, so
 * 320px wraps cleanly; success never borrows remove-action language
 * (no red, no cross glyph).
 *
 * SPECIFICITY NOTE: YITH's own stylesheet pins these containers with
 * `.yith-wcwl-wishlistaddedbrowse:not(.wishlist-popup ...)` (0,4,0),
 * so a plain scoped rule loses regardless of stylesheet order. These
 * selectors mirror the :not() and add the purchase scope (0,5,0) to
 * win order-independently — no !important, PDP scope only.
 */

.mppc-purchase .mppc-wishlist .yith-wcwl-wishlistaddedbrowse:not(.wishlist-popup .yith-wcwl-wishlistaddedbrowse),
.mppc-purchase .mppc-wishlist .yith-wcwl-wishlistexistsbrowse:not(.wishlist-popup .yith-wcwl-wishlistexistsbrowse) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-block-end: 4px;
	font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mppc-muted, #646049);
}

.mppc-wishlist .yith-wcwl-wishlistaddedbrowse .feedback,
.mppc-wishlist .yith-wcwl-wishlistexistsbrowse .feedback {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-weight: 600;
	color: var(--mppc-text, #1f1e1b);
}

.mppc-wishlist .feedback svg,
.mppc-wishlist .feedback i,
.mppc-wishlist .feedback img {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--mppc-accent, #60373d);
}

.mppc-wishlist .yith-wcwl-wishlistaddedbrowse a,
.mppc-wishlist .yith-wcwl-wishlistexistsbrowse a {
	min-width: 0;
	color: var(--mppc-accent, #60373d);
	text-underline-offset: 3px;
	line-height: 1.4;
}

.mppc-wishlist .yith-wcwl-wishlistaddedbrowse a:hover,
.mppc-wishlist .yith-wcwl-wishlistexistsbrowse a:hover {
	color: var(--mppc-text, #1f1e1b);
}

.mppc-wishlist .yith-wcwl-wishlistaddedbrowse a:focus-visible,
.mppc-wishlist .yith-wcwl-wishlistexistsbrowse a:focus-visible,
.mppc-wishlist a.add_to_wishlist:focus-visible {
	outline: 2px solid var(--mppc-accent, #60373d);
	outline-offset: 2px;
}

/* PDP success feedback carries the status line only. "Voir ma liste"
 * navigation lives in the desktop header icon and the mobile
 * "Mes favoris" entry, so the browse link is hidden here (DOM and
 * plugin state untouched; the wishlist page itself is unaffected). */
.mppc-wishlist .yith-wcwl-wishlistaddedbrowse > a,
.mppc-wishlist .yith-wcwl-wishlistexistsbrowse > a {
	display: none;
}

/* ---- Reassurance (quiet micro row, same language as Essentials) ---- */

.mppc-reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--mppc-muted, #646049);
}

.mppc-reassurance-item {
	display: inline-flex;
	align-items: center;
}

.mppc-reassurance-item + .mppc-reassurance-item::before {
	content: "·";
	margin-inline: 10px;
	opacity: 0.55;
}

/* ---- Quantity visibility (visual only) ----
 *
 * REAL-DOM finding (fresh ALMA render + parent
 * flatsome/woocommerce/global/quantity-input.php): the visible
 * quantity UI is ONE node — div.ux-quantity.quantity.buttons_added —
 * holding minus/input/plus together. There are no separate
 * .mppc-qty-* nodes (the C2.0 injected buttons were removed in C2.1)
 * and no C2 quantity JS exists, so nothing can reinsert controls.
 * Hiding that single wrapper removes minus/input/plus with no blank
 * column: the flex purchase row simply lays out the CTA alone.
 *
 * The native input stays enabled in the DOM, so display:none does
 * NOT stop it from submitting — min/max/step/sold-individually and
 * the real default quantity remain authoritative. Both selectors are
 * listed so plain .quantity wrappers (other Woo paths) hide too. */

.mppc-purchase.mppc-noqty .ux-quantity,
.mppc-purchase.mppc-noqty .quantity {
	display: none;
}

/* ---- Quantity vs variation lifecycle (C2.4.1, scoped !important) ----
 *
 * Woo core onFoundVariation (woocommerce/assets/js/frontend/
 * add-to-cart-variation.js, "Hide or show qty input") calls
 * $qty.show() on .quantity for every purchasable variation, which
 * writes INLINE style="display: block;" onto the real wrapper. A
 * stylesheet rule can never beat an inline style without !important,
 * so this tightly scoped exception exists for that exact reason —
 * the ONLY !important in C2 CSS. It changes nothing when quantity
 * is shown (no .mppc-noqty ancestor) and never touches the input
 * itself, which stays enabled and submitted. */

.mppc-purchase.mppc-noqty .woocommerce-variation-add-to-cart .quantity,
.mppc-purchase.mppc-noqty .woocommerce-variation-add-to-cart .ux-quantity {
	display: none !important;
}

/* ---- Stacked variation labels ----
 *
 * Inline (default):  Couleur — Kaki
 * Stacked:           Couleur
 *                    Kaki */

.mppc-purchase.mppc-label-stacked .variations th.label label {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.mppc-purchase.mppc-label-stacked .ux-swatch-selected-value:not(:empty)::before {
	content: none;
}

/* ---- Design styles (presentation presets; explicit owner classes win
 * ties by source order further below) ---- */

/* Signature: the base look above IS the brand default (Bordeaux CTA,
 * circular swatches, quiet editorial rhythm). This empty modifier exists
 * so all four styles are addressable and comparable in Builder. */

.mppc-purchase.mppc-style-signature {
	--mppc-sw-size: 32px;
	--mppc-sw-gap: 12px;
}

/* Editorial Minimal: airy Polène-like rhythm, stacked purchase column,
 * full-width CTA, quieter price, slightly larger swatches. */

.mppc-purchase.mppc-style-editorial {
	--mppc-sw-size: 34px;
	--mppc-sw-gap: 14px;
}

.mppc-purchase.mppc-style-editorial .mppc-price .price {
	font-size: 22px;
	font-weight: 500;
}

.mppc-purchase.mppc-style-editorial .mppc-price {
	margin-bottom: 4px;
}

.mppc-purchase.mppc-style-editorial .variations th.label label {
	margin-bottom: 14px;
}

.mppc-purchase.mppc-style-editorial .ux-swatches {
	gap: 14px;
}

.mppc-purchase.mppc-style-editorial .woocommerce-variation-add-to-cart,
.mppc-purchase.mppc-style-editorial .cart:not(.variations_form) {
	flex-direction: column;
	align-items: stretch;
}

.mppc-purchase.mppc-style-editorial .quantity {
	align-self: flex-start;
}

.mppc-purchase.mppc-style-editorial .single_add_to_cart_button {
	flex: 1 1 100%;
}

.mppc-purchase.mppc-style-editorial .mppc-wishlist {
	margin-top: 4px;
	font-size: 13px;
	align-self: center;
}

/* Compact Atelier: dense Mansur-Gavriel-like commerce block. */

.mppc-purchase.mppc-style-atelier {
	--mppc-sw-size: 28px;
	--mppc-sw-gap: 8px;
}

.mppc-purchase.mppc-style-atelier .mppc-price .price {
	font-size: 18px;
	font-weight: 600;
}

.mppc-purchase.mppc-style-atelier .variations th.label label {
	margin-bottom: 8px;
	font-size: 13px;
}

.mppc-purchase.mppc-style-atelier .ux-swatches {
	gap: 8px;
}

.mppc-purchase.mppc-style-atelier .reset_variations {
	margin-top: 6px;
}

.mppc-purchase.mppc-style-atelier .single_variation .price {
	font-size: 16px;
}

.mppc-purchase.mppc-style-atelier .mppc-wishlist {
	font-size: 13px;
}

/* Modular: Cuyana-like separated groups, full-width CTA, one hairline
 * between the variation group and the purchase row. */

.mppc-purchase.mppc-style-modular {
	--mppc-sw-size: 32px;
	--mppc-sw-gap: 12px;
}

.mppc-purchase.mppc-style-modular .mppc-price .price {
	font-size: 20px;
	font-weight: 600;
}

.mppc-purchase.mppc-style-modular .mppc-price {
	margin-bottom: 6px;
}

.mppc-purchase.mppc-style-modular .woocommerce-variation-add-to-cart {
	border-top: 1px solid color-mix(in srgb, var(--mppc-muted, #646049) 25%, transparent);
	padding-top: 20px;
	margin-top: 8px;
}

.mppc-purchase.mppc-style-modular .single_add_to_cart_button {
	flex: 1 1 100%;
}

.mppc-purchase.mppc-style-modular .mppc-wishlist {
	margin-top: 8px;
	font-size: 13px;
}

/* Hindbag Parity (PDP-V1.3): compact purchase-rail density. Tight
 * group rhythm, full-width CTA, availability as a quiet in-stock
 * line directly above the cart row (native .single_variation DOM
 * order already guarantees availability-before-CTA; this only
 * styles it). Presentation only — no logic, no template changes. */

.mppc-purchase.mppc-style-hindbag {
	--mppc-sw-size: 30px;
	--mppc-sw-gap: 10px;
}

.mppc-purchase.mppc-style-hindbag .mppc-inner {
	gap: 14px;
}

.mppc-purchase.mppc-style-hindbag .mppc-price .price {
	font-size: 19px;
	font-weight: 600;
}

.mppc-purchase.mppc-style-hindbag .variations th.label label {
	margin-bottom: 10px;
	font-size: 13px;
}

.mppc-purchase.mppc-style-hindbag .ux-swatches {
	gap: 10px;
}

.mppc-purchase.mppc-style-hindbag .reset_variations {
	margin-top: 6px;
}

.mppc-purchase.mppc-style-hindbag .single_variation .price {
	font-size: 16px;
}

/* Availability before CTA: quiet line with an in-stock dot. Out of
 * stock keeps native Woo wording, muted only. */
.mppc-purchase.mppc-style-hindbag .woocommerce-variation-availability .stock,
.mppc-purchase.mppc-style-hindbag .mppc-form .stock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.5;
}

.mppc-purchase.mppc-style-hindbag .woocommerce-variation-availability .stock.in-stock::before,
.mppc-purchase.mppc-style-hindbag .mppc-form .stock.in-stock::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3d7a44;
}

.mppc-purchase.mppc-style-hindbag .single_add_to_cart_button {
	flex: 1 1 100%;
}

/* G4 CTA price suffix (PDP-V1.3): the JS appends one
 * `.mppc-cta-price` span (" · 990,00 $"); keep the separator and
 * price together so the amount never wraps onto its own line. */
.mppc-purchase.mppc-style-hindbag .single_add_to_cart_button .mppc-cta-price {
	white-space: nowrap;
}

/* Second G4 toggle: hide this element's own regular price when the
 * CTA carries the price. Triple-scoped (style + opt-in class +
 * .mppc-price) so no other price on the page can ever match. */
.mppc-purchase.mppc-style-hindbag.mppc-hide-price .mppc-price {
	display: none;
}

.mppc-purchase.mppc-style-hindbag .mppc-wishlist {
	font-size: 13px;
}

/* ---- Explicit owner overrides (beat style presets by source order) ---- */

.mppc-purchase.mppc-btn-full .single_add_to_cart_button {
	flex: 1 1 100%;
}

.mppc-purchase.mppc-btn-auto .single_add_to_cart_button {
	flex: 1 1 auto;
}

/* ---- Placeholder (Builder only) ---- */

.mppc-placeholder {
	padding: 24px;
	border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 8px;
	font-size: 13.5px;
	text-align: center;
	opacity: 0.75;
}

/* ---- Tablet: max-width 849px ---- */

@media (max-width: 849px) {
	.mppc-inner {
		gap: var(--mppc-gap-md, 20px);
	}
}

/* ---- Mobile: max-width 549px ---- */

@media (max-width: 549px) {
	.mppc-inner {
		gap: var(--mppc-gap-sm, 16px);
	}

	.mppc-price .price {
		font-size: 17px;
	}

	.mppc-purchase .single_add_to_cart_button {
		min-width: 0;
		padding: 0 18px;
		font-size: 13px;
	}
}

/* ---- G3 mobile sticky purchase bar (Hindbag parity) ----
 *
 * Rendered by the Add to Cart element only (.mppc-has-sticky, Hindbag
 * style, Builder Show/Hide default Show). Desktop stays unchanged:
 * the base rule keeps the bar out of layout everywhere; the fixed bar
 * exists only inside max-width:549px and only while JS flags the
 * original CTA out of view (.mppc-sticky-visible). Hidden state is
 * visibility:hidden (not display:none) so the enter/exit transition
 * can run; aria-hidden + tabindex are managed by JS in parallel.
 * Content clearance: while any bar is visible JS sets body
 * .mppc-sticky-on and the bar height var, reserving exactly one bar
 * height at the page bottom (safe-area included in the bar padding).
 */

.mppc-sticky {
	display: none;
}

body.mppc-sticky-on {
	padding-bottom: var(--mppc-sticky-h, 0px);
}

@media (max-width: 549px) {
	.mppc-purchase.mppc-has-sticky .mppc-sticky {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid color-mix(in srgb, var(--mppc-muted, #646049) 25%, transparent);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.24s ease, visibility 0.24s;
	}

	.mppc-purchase.mppc-has-sticky .mppc-sticky.mppc-sticky-visible {
		transform: none;
		visibility: visible;
	}

	.mppc-sticky-info {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.mppc-sticky-name {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--mppc-text, #1f1e1b);
	}

	.mppc-sticky-meta {
		display: flex;
		align-items: baseline;
		gap: 8px;
		min-width: 0;
		font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
		font-size: 12.5px;
		line-height: 1.4;
		color: var(--mppc-muted, #646049);
	}

	.mppc-sticky-color {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mppc-sticky-nocolor .mppc-sticky-color {
		display: none;
	}

	.mppc-sticky-price {
		white-space: nowrap;
		font-weight: 600;
		color: var(--mppc-text, #1f1e1b);
	}

	.mppc-sticky-price:empty {
		display: none;
	}

	.mppc-sticky-cta {
		flex: 0 0 auto;
		max-width: 52%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		min-height: 44px;
		padding: 0 18px;
		font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		border: 1px solid var(--mppc-accent, #60373d);
		border-radius: var(--mppc-btn-radius, 2px);
		background-color: var(--mppc-accent, #60373d);
		color: var(--mppc-btn-text, #fff);
		cursor: pointer;
	}

	.mppc-sticky-cta:disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}

	.mppc-sticky-cta:focus-visible {
		outline: 2px solid var(--mppc-accent, #60373d);
		outline-offset: 2px;
	}
}

/* ---- Very narrow: allow intentional stack, never overflow ---- */

@media (max-width: 379px) {
	.mppc-purchase .woocommerce-variation-add-to-cart,
	.mppc-purchase .cart:not(.variations_form) {
		flex-direction: column;
	}

	.mppc-purchase .quantity {
		align-self: flex-start;
	}
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.mppc-purchase .single_add_to_cart_button,
	.mppc-purchase .mppc-sticky,
	.mppc-purchase .ux-swatches .ux-swatch,
	.mppc-purchase .ux-quantity__button {
		transition: none;
	}

	.mppc-purchase .ux-swatches .ux-swatch:hover {
		transform: none;
	}
}