/* ============================================================
   MM CLS Fix — stop the product page from jumping on load.
   MM Product Page restructures the DOM after paint (image goes
   into a framed gallery, PPO add-ons get wrapped in a closed
   accordion, WhatsApp + trust row get inserted). Each of those
   moved content by 100-250px. Here we reserve the FINAL layout
   in CSS — which the browser applies on the very first paint —
   so the later JS work changes nothing visually.
   Scoped to body.single-product only.
   ============================================================ */

/* ---- 1) main product image: final framed height from the start ----
   MM Product Page renders it inside .mm-ppg-stage
   (height clamp(250px,74vw,330px), 10px padding, object-fit:contain).
   We give the raw image exactly that inner height before the JS runs. */
body.single-product .elementor-element-335bd78 img,
body.single-product .elementor-widget-theme-post-featured-image img {
	height: calc(clamp(250px, 74vw, 330px) - 20px) !important;
	width: 100% !important;
	object-fit: contain !important;
}
/* once the JS has built the frame, its own rules take over unchanged */
body.single-product .mm-ppg-stage img {
	height: 100% !important;
}

/* ---- 2) add-ons: hold the accordion-header's height, hidden until wrapped ----
   Un-wrapped the PPO block is ~254px tall and then collapses to a 51px
   closed accordion. We keep it invisible at 51px so nothing moves. */
@keyframes mmPpoReveal { to { visibility: visible; height: auto; overflow: visible; } }
body.single-product .ppo-wrap {
	visibility: hidden;
	height: 51px;
	overflow: hidden;
	/* safety net: if the accordion JS never runs, show the options after 4s */
	animation: mmPpoReveal 0s linear 4s forwards;
}
body.single-product .mm-ppacc .ppo-wrap {
	visibility: visible;
	height: auto;
	overflow: visible;
	animation: none;
}

/* ---- 2b) make the accordion reliably OPEN ----
   The original rule (.mm-ppacc.open .mm-ppacc-body{max-height:760px}) was not
   taking effect — the max-height transition stayed pinned at 0, so the add-ons
   never appeared when tapped. Forcing the open state guarantees it works, and
   it still animates where the transition runs. */
body.single-product .mm-ppacc.open .mm-ppacc-body {
	max-height: none !important;
	transition: none !important;   /* never depend on the transition finishing */
}
/* keep the closed state authoritative too, so it collapses cleanly */
body.single-product .mm-ppacc:not(.open) .mm-ppacc-body {
	max-height: 0 !important;
	transition: none !important;
}

/* ---- 3) reserve the WhatsApp button + trust row inserted after Buy Now ---- */
body.single-product .subhan-eac-buy-now-bottom-wrap::after {
	content: "";
	display: block;
	height: 113px;
}
body.single-product.mm-pp-ready .subhan-eac-buy-now-bottom-wrap::after {
	display: none;
}

/* ---- 4) small: keep the price row height stable when the delivery pill lands ---- */
body.single-product .elementor-widget-woocommerce-product-price {
	min-height: 40px;
}
/* note: the 0s "animation" above is an instant safety reveal, not motion,
   so it is intentionally left on for prefers-reduced-motion users too. */