/* =============================================================
 * WonderLab Product Experience — product-page CSS
 *
 * Migrated from WP Customizer Additional CSS sections 5.2–5.5
 * in v1.0.5. Single canonical source going forward.
 *
 * Covers:
 *   - Product variation form layout + pill-style swatches
 *   - Variation price + add-to-cart section spacing
 *   - Quantity selector + add-to-cart button styling
 *   - Force-Divi-WC add-to-cart layout (consistent in
 *     Theme Builder modules)
 *
 * Functional styling — not customisable by marketing. If the
 * brand palette ever shifts, edit this file directly.
 * ============================================================= */


/* -------------------------------------------------------------
 * 1. Variation form layout
 * ------------------------------------------------------------- */

/* Form wrapper — desktop = original left-aligned. Centering moved
   to the mobile media query in section 7 (v1.5.53 revert). */
.single-product form.variations_form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* Variations table reset — convert to block layout */
.single-product table.variations {
	width: 100%;
	margin-bottom: 10px;
}

.single-product table.variations tr,
.single-product table.variations td,
.single-product table.variations th {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: left;
}

.single-product .variations th.label,
.single-product .variations td.value {
	text-align: left !important;
}

/* Attribute label (SIZE) */
.single-product table.variations label {
	display: block;
	margin-bottom: 10px;
	text-align: left;
	font-family: 'Geologica', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #851625 !important;
}

/* Hide original dropdown select */
.single-product table.variations select {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	height: 0;
	width: 0;
}


/* -------------------------------------------------------------
 * 2. Variation pills (replaces the hidden dropdown)
 * ------------------------------------------------------------- */

.single-product .wl-variation-pills {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin-top: 6px;
	margin-bottom: 10px;
}

.single-product .wl-variation-pill {
	border: 1px solid #B9AEA5;
	background: #FFFBF1;
	color: #2E2E2E;
	border-radius: 999px;
	padding: 10px 24px;
	font-family: 'Geologica', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
}

.single-product .wl-variation-pill:hover {
	border-color: #851625;
	color: #851625;
}

.single-product .wl-variation-pill.is-active {
	background: #F3E7E9;
	border-color: #851625;
	color: #851625;
}

.single-product .wl-variation-pill.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Clear variations link */
.single-product .reset_variations {
	display: inline-block !important;
	margin: 0 0 14px;
	font-family: 'Geologica', sans-serif;
	font-size: 14px;
	color: #8A7F78;
}


/* -------------------------------------------------------------
 * 3. Variation price + add-to-cart wrapper
 * ------------------------------------------------------------- */

.single-product .single_variation_wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-price span,
.single-product .woocommerce-variation-price .price {
	color: #851625 !important;
	font-family: 'Geologica', sans-serif;
	font-size: 16px;
	font-weight: 500 !important;
	margin: 10px 0 14px;
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
}


/* -------------------------------------------------------------
 * 4. Quantity selector
 * ------------------------------------------------------------- */

.single-product .quantity,
.woocommerce .quantity {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0;
	float: none !important;
}

.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
	border: 2px solid #851625 !important;
	color: #851625 !important;
}

.woocommerce .quantity .plus:hover,
.woocommerce .quantity .minus:hover {
	border: 2px solid #851625 !important;
	color: #fff !important;
	background-color: #851625 !important;
	opacity: 1 !important;
}


/* -------------------------------------------------------------
 * 5. Add-to-cart button — width + disabled state
 * ------------------------------------------------------------- */

.single-product .single_add_to_cart_button,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button {
	width: 240px !important;
	text-align: center;
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	float: none !important;
	margin: 0 !important;
}

.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button.disabled {
	opacity: 1 !important;
	background: transparent !important;
	color: #851625 !important;
	border: 2px solid #851625 !important;
	cursor: not-allowed;
}


/* -------------------------------------------------------------
 * 6. Force Divi WC layout
 *
 * Divi Theme Builder's add-to-cart module renders its own
 * wrappers around the WC form — without these the variation
 * form collapses into an inline row. Forces the same
 * column-stack layout as the standard single-product page.
 * ------------------------------------------------------------- */

.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart .variations_form {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
}


/* -------------------------------------------------------------
 * 7. Mobile PDP layout (v1.5.34+)
 *
 * On phones (<=768px) the cart trio stacks as full-width elements:
 * the qty stepper centers above, the Add to Cart button spans the
 * full form width below. Overrides section 6's align-items:flex-start
 * (desktop left-align) and section 5's 240px fixed AtC width.
 *
 * Wishlist gets the matching full-width treatment in
 * wonderlab-account-suite/assets/wishlist.css at the same 768px
 * breakpoint so the two buttons resize together.
 * ------------------------------------------------------------- */

@media (max-width: 768px) {

	/* Center form children instead of left-aligning. */
	.single-product form.cart,
	.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart,
	.et-db #et-boc .et-l .et_pb_wc_add_to_cart .variations_form {
		align-items: center !important;
		width: 100% !important;
	}

	/* Quantity stepper: keep the +/- shape, just center the row. */
	.single-product .quantity,
	.woocommerce .quantity {
		justify-content: center !important;
		margin: 0 auto 4px !important;
	}

	/* Add to Cart: full-width on mobile (overrides desktop 240px). */
	.single-product .single_add_to_cart_button,
	.et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* WonderLab Points badge: constrain to form width on mobile.
	   The badge sits inside form.cart (hooked by wonderlab-points-system
	   at woocommerce_before_add_to_cart_button) and has no explicit
	   width. With this section's align-items:center on the form, its
	   content-width (the long "earn X points" line, ~400px) exceeded
	   the form's 100% width and centered as overflow — the badge ran
	   off-screen on both sides and looked hidden. width:100% forces
	   the text to wrap cleanly inside the form bounds. */
	.wonder-product-points {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Variable products: WC wraps points-badge + quantity + Add to Cart
	   inside an extra <div class="woocommerce-variation-add-to-cart"
	   variations_button"> layer. The form.cart's align-items:center
	   centers that WRAPPER (not the qty / button directly), but the
	   wrapper itself is content-sized — so the qty inside lands wherever
	   its content width puts it, off-centre. Mirror the form.cart flex
	   treatment on the wrapper so the children stack + centre correctly
	   for variable products too. Simple products don't render this
	   wrapper, so this rule is a no-op for them. */
	.single-product .woocommerce-variation-add-to-cart,
	.et-db #et-boc .et-l .et_pb_wc_add_to_cart .woocommerce-variation-add-to-cart {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		gap: 14px !important;
	}

	/* ------- v1.5.53 mobile-only centering (moved from desktop) -------
	   The previous v1.5.52 release centered all of these on desktop
	   too; reverted to mobile-only after review. Desktop stays
	   left-aligned per the original PDP design. */

	/* Variation form column centered on mobile. */
	.single-product form.variations_form {
		align-items: center;
	}

	/* Variation table cells + "SIZE" label centered. Label softened
	   to a small uppercase caption so it reads as a breadcrumb rather
	   than a competing heading when centered above the pills. */
	.single-product table.variations tr,
	.single-product table.variations td,
	.single-product table.variations th {
		text-align: center;
	}
	.single-product .variations th.label,
	.single-product .variations td.value {
		text-align: center !important;
	}
	.single-product table.variations label {
		text-align: center !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin: 0 0 8px !important;
	}

	/* Pills row + reset link + variation price + variation wrap. */
	.single-product .wl-variation-pills {
		justify-content: center;
	}
	.single-product .reset_variations {
		display: block !important;
		margin: 0 auto 14px;
		text-align: center;
	}
	.single-product .single_variation_wrap {
		align-items: center;
		text-align: center;
	}
	.single-product .woocommerce-variation-price,
	.single-product .woocommerce-variation-price .price {
		text-align: center;
		width: 100%;
	}

	/* Main product price (the one above the variation form or, on
	   simple products, the only one). Covers WC native + Divi modules.
	   Centers the PARENT container only — don't force the inner
	   .woocommerce-Price-amount spans to display:block, otherwise the
	   price range "RM 16.53 – RM 64.50" wraps onto three lines and the
	   en-dash separator lands in an anonymous line box that doesn't
	   inherit centering cleanly. Keep amounts + dash inline so they
	   read as one balanced phrase. */
	.single-product .summary > .price,
	.single-product .product > .price,
	.et-db #et-boc .et-l .et_pb_wc_price > .price,
	.et-db #et-boc .et-l .et_pb_wc_price-title > .price,
	.et-db #et-boc .et-l .et_pb_wc_price p.price {
		text-align: center !important;
		display: block;
		width: 100%;
	}
}

.cart {
	justify-content: center !important;
	align-items: center !important;
	display: flex;
	flex-direction: column;
}


/* -------------------------------------------------------------
 * 7. Price-range slider (shop sidebar / WC block)
 *
 * Migrated from Customizer section 7.1 in v1.0.5.
 * Removes the input-box chrome so just the numbers show on
 * either side of the slider track.
 * ------------------------------------------------------------- */

.wc-block-product-filter-price-slider__content input[type="text"],
.wc-block-product-filter-price-slider__left-input,
.wc-block-product-filter-price-slider__right-input {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	font-weight: 600 !important;
}