/* Post-pull QA fixes for prototype presentation. */

/* /bazi should open directly on Step 01 instead of showing a separate intro screen first. */
body.mio-personal-edit .mio-bazi-intro,
body.mio-personal-edit .mio-edit__intro {
	display: none !important;
}
body.mio-personal-edit .mio-bazi-page { padding-top: 10px; }
body.mio-personal-edit .mio-edit__work { margin-top: 0; }

/* --------------------------------------------------------------------------
   Result-card resets: remove legacy spans/sizing and white text leakage.
   -------------------------------------------------------------------------- */
body.mio-personal-edit .mio-priority-grid {
	grid-auto-columns: minmax(0, 1fr) !important;
	grid-auto-rows: auto !important;
	align-items: stretch !important;
	overflow: visible !important;
}
body.mio-personal-edit .mio-priority-grid article,
body.mio-personal-edit .mio-priority-grid article.is-primary {
	grid-column: auto !important;
	grid-row: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
	position: static !important;
	transform: none !important;
	overflow: visible !important;
}
body.mio-personal-edit .mio-priority-grid article.is-primary b {
	font-size: 17px !important;
	line-height: 1.15 !important;
	color: var(--mgp-ink, #251f2b) !important;
}
body.mio-personal-edit .mio-result-cta h2,
body.mio-personal-edit .mio-result-cta h3,
body.mio-personal-edit .mio-result-cta strong,
body.mio-personal-edit .mio-result-cta b,
body.mio-personal-edit .mio-result-section h1,
body.mio-personal-edit .mio-result-section h2,
body.mio-personal-edit .mio-result-section h3,
body.mio-personal-edit .mio-result-section h4,
body.mio-personal-edit .mio-result-section b,
body.mio-personal-edit .mio-result-section strong {
	color: var(--mgp-ink, #251f2b) !important;
}
body.mio-personal-edit .mio-result-cta p,
body.mio-personal-edit .mio-result-section p,
body.mio-personal-edit .mio-result-section li,
body.mio-personal-edit .mio-result-section dd {
	color: var(--mgp-sub, #786d80) !important;
}
body.mio-personal-edit .mio-result-cta .mio-result-price { color: var(--mgp-ink, #251f2b) !important; }
body.mio-personal-edit .mio-result-cta .mio-button {
	border-color: transparent !important;
	background: linear-gradient(135deg, #8c72b5, #d29fc9) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   PDP hard reset. WooCommerce/Kadence legacy rules were still winning at
   different widths, which could hide the media/title or break the first screen.
   -------------------------------------------------------------------------- */
body.single-product.mio-v2 div.product {
	align-items: start !important;
	box-sizing: border-box !important;
}
body.single-product.mio-v2 div.product > .woocommerce-product-gallery,
body.single-product.mio-v2 div.product > .summary,
body.single-product.mio-v2 .woocommerce-product-gallery,
body.single-product.mio-v2 .woocommerce-product-gallery__wrapper,
body.single-product.mio-v2 .woocommerce-product-gallery__image {
	opacity: 1 !important;
	visibility: visible !important;
}
body.single-product.mio-v2 div.product > .woocommerce-product-gallery,
body.single-product.mio-v2 div.product > .summary {
	display: block !important;
	float: none !important;
	min-width: 0 !important;
	max-width: none !important;
}
body.single-product.mio-v2 .woocommerce-product-gallery__image,
body.single-product.mio-v2 .woocommerce-product-gallery__image a,
body.single-product.mio-v2 .woocommerce-product-gallery__image img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}
body.single-product.mio-v2 .summary .product_title {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: var(--mgp-ink, #251f2b) !important;
}
body.single-product.mio-v2 .summary .price,
body.single-product.mio-v2 .summary .price * {
	color: var(--mgp-ink, #251f2b) !important;
}
body.single-product.mio-v2 .summary p,
body.single-product.mio-v2 .summary li { color: var(--mgp-sub, #786d80); }
body.single-product.mio-v2 .summary form.cart {
	width: 100% !important;
	max-width: 100% !important;
}
body.single-product.mio-v2 .summary .single_add_to_cart_button {
	color: #fff !important;
}

/* The purchase panel already contains the Personal Edit match. Avoid a second,
   visually identical continuity card below the add-to-cart area. */
body.single-product.mio-v2.has-mio-edit .mio-product-context { display: none !important; }

/* PDP final light card: remove old dark-card text inheritance. */
body.single-product.mio-v2 .mio-product-final h2,
body.single-product.mio-v2 .mio-product-final h3,
body.single-product.mio-v2 .mio-product-final strong {
	color: var(--mgp-ink, #251f2b) !important;
}
body.single-product.mio-v2 .mio-product-final p { color: var(--mgp-sub, #786d80) !important; }
body.single-product.mio-v2 .mio-product-final .mio-button {
	border-color: transparent !important;
	background: linear-gradient(135deg, #8c72b5, #d29fc9) !important;
	color: #fff !important;
}

/* WordPress uses a 46px admin bar below 783px; keep the sticky header beneath it. */
@media (max-width: 782px) {
	.admin-bar.mio-v2 #masthead { top: 46px !important; }
}

/* --------------------------------------------------------------------------
   Mobile: one deliberate vertical purchase flow.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body.mio-personal-edit .mio-priority-grid {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: 6px !important;
	}
	body.mio-personal-edit .mio-priority-grid article,
	body.mio-personal-edit .mio-priority-grid article.is-primary {
		display: grid !important;
		grid-template-columns: 74px 56px minmax(0, 1fr) !important;
		gap: 7px !important;
		align-items: center !important;
		width: 100% !important;
		padding: 10px !important;
		text-align: left !important;
	}
	body.mio-personal-edit .mio-priority-grid article b,
	body.mio-personal-edit .mio-priority-grid article.is-primary b {
		margin: 0 !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
	}
	body.mio-personal-edit .mio-priority-grid article p {
		margin: 0 !important;
		font-size: 8px !important;
		line-height: 1.4 !important;
	}

	body.single-product.mio-v2 div.product {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		width: calc(100vw - 20px) !important;
		margin: 10px auto 0 !important;
		padding: 0 0 84px !important;
	}
	body.single-product.mio-v2 div.product > .woocommerce-product-gallery { order: 1 !important; }
	body.single-product.mio-v2 div.product > .summary { order: 2 !important; }
	body.single-product.mio-v2 div.product > .mio-product-editorial { order: 4 !important; }
	body.single-product.mio-v2 .woocommerce-product-gallery {
		width: 100% !important;
		margin: 0 !important;
		padding: 8px !important;
		border-radius: 20px !important;
	}
	body.single-product.mio-v2 .woocommerce-product-gallery__image img {
		max-height: 430px !important;
		object-fit: contain !important;
		background: #fff !important;
	}
	body.single-product.mio-v2 .summary {
		width: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		border-radius: 20px !important;
		position: static !important;
	}
	body.single-product.mio-v2 .summary .product_title {
		margin: 0 0 8px !important;
		font-size: 36px !important;
		line-height: .98 !important;
	}
	body.single-product.mio-v2 .summary .price {
		margin: 8px 0 14px !important;
		font-size: 27px !important;
	}
	body.single-product.mio-v2 .mio-product-position { margin: 10px 0 !important; }
	body.single-product.mio-v2 .mio-product-position > p { font-size: 14px !important; line-height: 1.5 !important; }
	body.single-product.mio-v2 .mio-product-position ul {
		grid-template-columns: 1fr 1fr !important;
		gap: 6px !important;
	}
	body.single-product.mio-v2 .mio-product-position li:last-child { grid-column: 1 / -1 !important; }
	body.single-product.mio-v2 .mio-product-fit { margin: 10px 0 !important; }
	body.single-product.mio-v2 form.cart {
		display: grid !important;
		grid-template-columns: 66px minmax(0, 1fr) !important;
		gap: 8px !important;
		align-items: stretch !important;
	}
	body.single-product.mio-v2 form.cart .quantity,
	body.single-product.mio-v2 form.cart .quantity input { width: 66px !important; max-width: 66px !important; }
	body.single-product.mio-v2 .mio-product-section,
	body.single-product.mio-v2 .mio-product-final {
		margin-top: 8px !important;
		padding: 15px !important;
		border-radius: 18px !important;
	}
	body.single-product.mio-v2 .mio-mobile-buy { display: flex !important; }
	body.mio-personal-edit .mio-result-mobile-buy { display: flex !important; }
}

/* --------------------------------------------------------------------------
   Tablet: compact two-column purchase area + single-column editorial proof.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	body.mio-personal-edit .mio-bazi-page { width: calc(100vw - 32px) !important; }
	body.mio-personal-edit .mio-result { width: 100% !important; max-width: 960px !important; }
	body.mio-personal-edit .mio-result-overview {
		grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr) !important;
		gap: 12px !important;
	}
	body.mio-personal-edit .mio-result-section { width: 100% !important; }
	body.mio-personal-edit .mio-priority-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}
	body.mio-personal-edit .mio-priority-grid article.is-primary { grid-column: 1 / -1 !important; }
	body.mio-personal-edit .mio-calc-steps,
	body.mio-personal-edit .mio-math-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	body.mio-personal-edit .mio-result-mobile-buy { display: none !important; }

	body.single-product.mio-v2 div.product {
		display: grid !important;
		grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr) !important;
		gap: 14px !important;
		width: calc(100vw - 32px) !important;
		margin: 16px auto 0 !important;
		padding-bottom: 40px !important;
	}
	body.single-product.mio-v2 div.product > .woocommerce-product-gallery,
	body.single-product.mio-v2 div.product > .summary { width: 100% !important; }
	body.single-product.mio-v2 .summary {
		position: sticky !important;
		top: 92px !important;
		padding: 20px !important;
	}
	.admin-bar.single-product.mio-v2 .summary { top: 124px !important; }
	body.single-product.mio-v2 .summary .product_title { font-size: clamp(38px, 5vw, 48px) !important; }
	body.single-product.mio-v2 .woocommerce-product-gallery__image img {
		max-height: 620px !important;
		object-fit: contain !important;
		background: #fff !important;
	}
	body.single-product.mio-v2 .mio-product-editorial {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}
	body.single-product.mio-v2 .mio-product-design.is-prototype-enhanced { grid-template-columns: 1fr !important; }
	body.single-product.mio-v2 .mio-design-proof { min-height: 420px !important; }
	body.single-product.mio-v2 .mio-mobile-buy { display: none !important; }
}

/* --------------------------------------------------------------------------
   Desktop / large screens: fixed information hierarchy instead of stretched
   mobile cards. Product stays left-image/right-purchase; result uses the full
   readable canvas without overly narrow columns.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	body.mio-personal-edit .mio-bazi-page {
		width: min(1280px, calc(100vw - 56px)) !important;
	}
	body.mio-personal-edit .mio-result {
		width: min(1180px, 100%) !important;
		max-width: 1180px !important;
	}
	body.mio-personal-edit .mio-result-overview {
		grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr) !important;
		gap: 16px !important;
	}
	body.mio-personal-edit .mio-result-section { width: 100% !important; }
	body.mio-personal-edit .mio-priority-grid {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	body.mio-personal-edit .mio-priority-grid article,
	body.mio-personal-edit .mio-priority-grid article.is-primary {
		display: block !important;
		padding: 16px 12px !important;
		text-align: center !important;
	}
	body.mio-personal-edit .mio-priority-grid article b,
	body.mio-personal-edit .mio-priority-grid article.is-primary b {
		margin: 10px 0 5px !important;
		font-size: 18px !important;
	}
	body.mio-personal-edit .mio-calc-steps,
	body.mio-personal-edit .mio-math-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	body.mio-personal-edit .mio-result-mobile-buy { display: none !important; }

	body.single-product.mio-v2 div.product {
		display: grid !important;
		grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important;
		gap: 24px !important;
		width: min(1320px, calc(100vw - 64px)) !important;
		margin: 22px auto 0 !important;
		padding-bottom: 56px !important;
	}
	body.single-product.mio-v2 div.product > .woocommerce-product-gallery,
	body.single-product.mio-v2 div.product > .summary { width: 100% !important; }
	body.single-product.mio-v2 .woocommerce-product-gallery { padding: 16px !important; }
	body.single-product.mio-v2 .woocommerce-product-gallery__image img {
		max-height: 720px !important;
		object-fit: contain !important;
		background: #fff !important;
	}
	body.single-product.mio-v2 .summary {
		position: sticky !important;
		top: 108px !important;
		padding: 28px !important;
	}
	.admin-bar.single-product.mio-v2 .summary { top: 140px !important; }
	body.single-product.mio-v2 .summary .product_title {
		font-size: clamp(44px, 4.3vw, 58px) !important;
		line-height: .98 !important;
	}
	body.single-product.mio-v2 .mio-product-editorial {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}
	body.single-product.mio-v2 .mio-product-design.is-prototype-enhanced {
		display: grid !important;
		grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr) !important;
		gap: 16px !important;
	}
	body.single-product.mio-v2 .mio-design-proof { min-height: 520px !important; }
	body.single-product.mio-v2 .mio-mobile-buy { display: none !important; }
}