/*
 * Mio&Gem Dynamic Five Element Visual System — Phase 2.3
 *
 * Layer order:
 * 1. Neutral brand tokens
 * 2. Five Element theme tokens
 * 3. Shared components
 * 4. Page-specific layout refinements
 *
 * No BaZi, recommendation or commerce logic lives here.
 */

/* 1. Neutral Brand Layer */
:root {
	--mg-bg: #F7F7F4;
	--mg-surface: #FFFFFF;
	--mg-surface-2: #EFEFEB;
	--mg-text: #222220;
	--mg-text-2: #767672;
	--mg-text-2-aa: #72726E;
	--mg-border: #DDDDD7;
	--mg-neutral: #4C4C49;

	--mg-accent: var(--mg-neutral);
	--mg-accent-soft: var(--mg-surface-2);
	--mg-accent-deep: var(--mg-neutral);
	--mg-accent-contrast: #FFFFFF;

	--mg-space-1: 8px;
	--mg-space-2: 16px;
	--mg-space-3: 24px;
	--mg-space-4: 32px;
	--mg-space-5: 40px;
	--mg-radius-card: 16px;
	--mg-radius-control: 12px;
	--mg-shadow: 0 14px 40px rgba(34, 34, 32, .06);

	/* Compatibility aliases for every still-loaded legacy presentation layer.
	 * They intentionally resolve to this neutral/dynamic token system so old files
	 * cannot re-introduce the former purple/pink brand palette. */
	--mio-ink: var(--mg-text);
	--mio-plum: var(--mg-neutral);
	--mio-wine: var(--mg-neutral);
	--mio-rose: var(--mg-neutral);
	--mio-blush: var(--mg-surface-2);
	--mio-lilac: var(--mg-surface-2);
	--mio-peach: var(--mg-surface-2);
	--mio-ivory: var(--mg-bg);
	--mio-paper: var(--mg-surface);
	--mio-line: var(--mg-border);
	--mio-muted: var(--mg-text-2);
	--mio-shadow: var(--mg-shadow);

	--mg-bg2: var(--mg-bg);
	--mg-card: var(--mg-surface);
	--mg-white: #FFFFFF;
	--mg-ink: var(--mg-text);
	--mg-sub: var(--mg-text-2-aa);
	--mg-muted: var(--mg-text-2);
	--mg-line: var(--mg-border);
	--mg-lav: var(--mg-neutral);
	--mg-pink: var(--mg-neutral);
	--mg-serif: var(--mio-serif, "Newsreader", "Iowan Old Style", Baskerville, Georgia, serif);
	--mg-sans: var(--mio-sans, "DM Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif);
}

/* 2. Five Element Theme Layer — single source of truth. */
:root[data-element="wood"] {
	--mg-accent: #5D735F;
	--mg-accent-soft: #E7ECE6;
	--mg-accent-deep: #3E5140;
}

:root[data-element="fire"] {
	--mg-accent: #A65F58;
	--mg-accent-soft: #F2E4E1;
	--mg-accent-deep: #7B403B;
}

:root[data-element="earth"] {
	--mg-accent: #A38869;
	--mg-accent-soft: #EEE7DE;
	--mg-accent-deep: #6E5A43;
}

:root[data-element="metal"] {
	--mg-accent: #8D9294;
	--mg-accent-soft: #ECEEEE;
	--mg-accent-deep: #626769;
}

:root[data-element="water"] {
	--mg-accent: #5B7087;
	--mg-accent-soft: #E4E9EE;
	--mg-accent-deep: #3C5066;
}

/* 3. Shared Component Layer */
body.mio-v2 {
	background: var(--mg-bg) !important;
	color: var(--mg-text) !important;
}

body.mio-v2,
body.mio-v2 #wrapper,
body.mio-v2 #inner-wrap,
body.mio-v2 .content-bg,
body.mio-v2 .site-container,
body.mio-v2 .site-main-header-wrap {
	background-color: var(--mg-bg);
}

/* Phase 2.3 is intentionally gradient-free. Legacy layout files may still contain
 * old declarations, but every Mio-owned component is visually flattened here. */
body.mio-v2 [class*="mio-"],
body.mio-v2 [class*="mio-"]::before,
body.mio-v2 [class*="mio-"]::after {
	background-image: none !important;
}

body.mio-v2 #masthead,
body.mio-v2 #mobile-drawer .drawer-inner,
body.mio-v2 .mio-hero::before,
body.mio-v2 .mio-hero__image,
body.mio-v2 .mio-trust::before,
body.mio-v2 .mio-edit::after,
body.mio-v2 .mio-closing,
body.mio-v2 .mio-edit-form,
body.mio-v2 .mio-intent-options span,
body.mio-v2 .mio-intent-options input:checked + span,
body.mio-v2 .mio-result-hero,
body.mio-v2 .mio-result-section,
body.mio-v2 .mio-result-cta,
body.mio-v2 .mio-match-equation .is-result,
body.mio-v2 .mio-formula .is-result,
body.mio-v2 .mio-reading-card,
body.mio-v2 .mio-reading-insights article,
body.mio-v2 .mio-result-fast-read,
body.mio-v2.single-product .summary,
body.mio-v2.single-product .mio-match-hero,
body.mio-v2.single-product .mio-product-section,
body.mio-v2.single-product .mio-product-final,
body.mio-v2.single-product .mio-purchase-stage,
body.mio-v2.single-product .mio-size-picker,
body.mio-v2.single-product .mio-cart-card,
body.mio-v2 .mio-footer,
body.mio-v2 .mio-transaction-note {
	background-image: none !important;
}

body.mio-v2 h1,
body.mio-v2 h2,
body.mio-v2 h3,
body.mio-v2 h4,
body.mio-v2 strong,
body.mio-v2 b {
	color: var(--mg-text);
}

body.mio-v2 p,
body.mio-v2 li,
body.mio-v2 dd,
body.mio-v2 figcaption {
	color: var(--mg-text-2-aa);
}

/* The specified secondary token (#767672) is retained for white surfaces,
 * where it clears AA; neutral page backgrounds use the slightly darker AA-safe companion. */
body.mio-v2 :is(
	.mio-edit-form,
	.mio-intention,
	.mio-reading-card,
	.mio-result-section,
	.mio-result-cta,
	.summary,
	.mio-product-section,
	.mio-product-final,
	.mio-purchase-stage,
	.mio-size-picker,
	.mio-cart-card,
	.woocommerce-cart-form,
	.cart_totals,
	.wc-block-cart,
	.wc-block-checkout
) p {
	color: var(--mg-text-2);
}

body.mio-v2 a {
	color: var(--mg-neutral);
}

body.mio-v2 #masthead {
	background: rgba(247, 247, 244, .94) !important;
	border-bottom: 1px solid var(--mg-border) !important;
	box-shadow: none !important;
}

body.mio-v2 #masthead .site-title,
body.mio-v2 #masthead .site-title a,
body.mio-v2 #masthead .header-navigation a,
body.mio-v2 #mobile-drawer .mobile-navigation a {
	color: var(--mg-text) !important;
}

body.mio-v2 #masthead .header-navigation .menu > li > a,
body.mio-v2 #masthead .menu-toggle-open,
body.mio-v2 #mobile-drawer .mobile-navigation a {
	border-color: transparent !important;
	border-radius: var(--mg-radius-control) !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.mio-v2 #masthead .header-navigation .menu > li > a:hover,
body.mio-v2 #masthead .header-navigation .menu > li > a:focus-visible,
body.mio-v2 #masthead .header-navigation .menu > li > a[href*="#personal-edit"],
body.mio-v2 #mobile-drawer .mobile-navigation a[href*="#personal-edit"] {
	background: var(--mg-surface-2) !important;
	color: var(--mg-text) !important;
}

body.mio-v2 #mobile-drawer .drawer-inner {
	background-color: var(--mg-bg) !important;
}

body.mio-v2 .mio-announcement-bar {
	background: var(--mg-text) !important;
	color: var(--mg-bg) !important;
	border: 0 !important;
}

body.mio-v2 .mio-announcement-bar a,
body.mio-v2 .mio-announcement-bar strong {
	color: #FFFFFF !important;
}

body.mio-v2 .mio-eyebrow,
body.mio-v2 .mio-step-label {
	color: var(--mg-neutral) !important;
}

body.mio-v2 .mio-button,
body.mio-v2 .single_add_to_cart_button,
body.mio-v2 .checkout-button,
body.mio-v2 #place_order,
body.mio-v2 .wc-block-cart__submit-button,
body.mio-v2 .wc-block-components-checkout-place-order-button,
body.mio-v2 .mio-mobile-buy button,
body.mio-v2 .mio-result-mobile-buy a {
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--mg-accent-deep) !important;
	border-radius: var(--mg-radius-control) !important;
	background: var(--mg-accent-deep) !important;
	box-shadow: none !important;
	color: var(--mg-accent-contrast) !important;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

body.mio-v2 .mio-button:hover,
body.mio-v2 .mio-button:focus-visible,
body.mio-v2 .single_add_to_cart_button:hover,
body.mio-v2 .single_add_to_cart_button:focus-visible,
body.mio-v2 .checkout-button:hover,
body.mio-v2 #place_order:hover {
	background: transparent !important;
	color: var(--mg-accent-deep) !important;
	box-shadow: none !important;
}

body.mio-v2 .mio-button--light {
	border-color: #FFFFFF !important;
	background: #FFFFFF !important;
	color: var(--mg-text) !important;
}

body.mio-v2 .mio-text-link,
body.mio-v2 .mio-change-intent,
body.mio-v2 .mio-product-care a,
body.mio-v2 .mio-purchase-guidance a {
	color: var(--mg-neutral) !important;
}

body.mio-v2 input,
body.mio-v2 select,
body.mio-v2 textarea,
body.mio-v2 .qty {
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-control) !important;
	background-color: var(--mg-surface) !important;
	color: var(--mg-text) !important;
	box-shadow: none !important;
}

body.mio-v2 input:focus,
body.mio-v2 select:focus,
body.mio-v2 textarea:focus,
body.mio-v2 .qty:focus {
	border-color: var(--mg-accent) !important;
	outline: 2px solid color-mix(in srgb, var(--mg-accent) 22%, transparent) !important;
	outline-offset: 1px;
}

body.mio-v2 input[type="checkbox"],
body.mio-v2 input[type="radio"] {
	accent-color: var(--mg-accent-deep);
}

body.mio-v2 .mio-edit-form,
body.mio-v2 .mio-intention,
body.mio-v2 .mio-result-section,
body.mio-v2 .mio-result-cta,
body.mio-v2 .mio-reading-card,
body.mio-v2 .mio-priority-grid article,
body.mio-v2 .mio-chart-facts span,
body.mio-v2 .mio-match-equation span,
body.mio-v2 .mio-formula span,
body.mio-v2 .mio-calc-steps article,
body.mio-v2 .mio-product-care article,
body.mio-v2 .mio-product-details dl > div,
body.mio-v2.single-product .summary,
body.mio-v2.single-product .mio-product-section,
body.mio-v2.single-product .mio-product-final,
body.mio-v2.single-product .mio-purchase-stage,
body.mio-v2.single-product .mio-size-picker,
body.mio-v2.single-product .mio-cart-card,
body.mio-v2 .woocommerce-cart-form,
body.mio-v2 .cart_totals,
body.mio-v2 .wc-block-cart,
body.mio-v2 .wc-block-checkout {
	border-color: var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background-color: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-v2 .mio-featured figure,
body.mio-v2 .mio-wrist-grid figure,
body.mio-v2.single-product .woocommerce-product-gallery,
body.mio-v2.single-product .mio-custom-gallery__main {
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface-2) !important;
	box-shadow: none !important;
}

body.mio-v2 .mio-featured__grid > a,
body.mio-v2 .products .product {
	color: var(--mg-text);
}

body.mio-v2 .mio-featured p,
body.mio-v2 .mio-shop-element {
	color: var(--mg-text-2) !important;
}

body.mio-v2 .mio-values span {
	background: var(--mg-surface-2) !important;
	color: var(--mg-neutral) !important;
}

body.mio-v2 .mio-closing {
	background-color: var(--mg-text) !important;
}

body.mio-v2 .mio-closing h2,
body.mio-v2 .mio-closing .mio-eyebrow {
	color: #FFFFFF !important;
}

body.mio-v2 .mio-footer {
	background-color: var(--mg-bg) !important;
	border-top: 1px solid var(--mg-border) !important;
	color: var(--mg-text) !important;
}

body.mio-v2 .mio-footer a,
body.mio-v2 .mio-footer__brand {
	color: var(--mg-text) !important;
}

/* Form and pre-result states stay neutral even when legacy CSS is present. */
body.mio-personal-edit .mio-edit-form,
body.mio-personal-edit .mio-intention {
	padding: var(--mg-space-4);
}

body.mio-personal-edit .mio-intent-options span {
	min-height: 64px;
	padding: var(--mg-space-2);
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background-color: var(--mg-surface) !important;
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-intent-options input:checked + span {
	border-color: var(--mg-accent) !important;
	background-color: var(--mg-accent-soft) !important;
	color: var(--mg-accent-deep) !important;
	transform: none !important;
}

body.mio-personal-edit .mio-intent-options input:checked + span::before,
body.mio-personal-edit .mio-intent-options span::after {
	background: var(--mg-accent) !important;
	border-color: var(--mg-accent) !important;
}

body.mio-personal-edit .mio-form-error {
	border-color: #A0716B !important;
	color: #714B47 !important;
}

/* Reading + result layer: colour appears only once an active result sets data-element. */
:root[data-element] body.mio-personal-edit .mio-reading-card {
	border: 1px solid var(--mg-border) !important;
	border-top: 3px solid var(--mg-accent) !important;
	background-color: color-mix(in srgb, var(--mg-accent-soft) 26%, var(--mg-surface)) !important;
}

:root[data-element] body.mio-personal-edit .mio-reading-card .mio-step-label,
:root[data-element] body.mio-personal-edit .mio-result .mio-step-label,
:root[data-element] body.mio-personal-edit .mio-reading-card__hero h2 span:last-child,
:root[data-element] body.mio-personal-edit .mio-reading-distribution .is-favoured b,
:root[data-element] body.mio-personal-edit .mio-reading-distribution .is-favoured small,
:root[data-element] body.mio-personal-edit .mio-result-section > h2 strong,
:root[data-element] body.mio-personal-edit #mio-why-element > h2,
:root[data-element] body.mio-personal-edit .mio-stone-heading h2 {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-reading-distribution__row > i,
body.mio-personal-edit .mio-distribution > div > i {
	background: var(--mg-surface-2) !important;
}

:root[data-element] body.mio-personal-edit .mio-reading-distribution__row > i > em,
:root[data-element] body.mio-personal-edit .mio-distribution > div > i > em {
	background: color-mix(in srgb, var(--mg-accent) 52%, var(--mg-border)) !important;
}

:root[data-element] body.mio-personal-edit .mio-reading-distribution__row.is-favoured > i > em,
:root[data-element] body.mio-personal-edit .mio-distribution .is-useful > i > em {
	background: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-reading-insights article {
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background-color: var(--mg-surface) !important;
}

:root[data-element] body.mio-personal-edit .mio-reading-insights article.is-stone,
:root[data-element] body.mio-personal-edit .mio-reading-insights article.is-piece {
	border-top-color: var(--mg-accent) !important;
}

:root[data-element] body.mio-personal-edit .mio-reading-insights article > span,
:root[data-element] body.mio-personal-edit .mio-reading-insights article > small,
:root[data-element] body.mio-personal-edit .mio-reading-insights article a {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-priority-grid article.is-primary,
body.mio-personal-edit .mio-stone-path > span.is-result {
	background-color: var(--mg-surface) !important;
}

:root[data-element] body.mio-personal-edit .mio-priority-grid article.is-primary,
:root[data-element] body.mio-personal-edit .mio-stone-path > span.is-result,
:root[data-element] body.mio-personal-edit .mio-pillars .is-day-pillar {
	border-color: var(--mg-accent) !important;
	background-color: var(--mg-accent-soft) !important;
}

:root[data-element] body.mio-personal-edit .mio-priority-grid article.is-primary small,
:root[data-element] body.mio-personal-edit .mio-priority-grid article.is-primary b,
:root[data-element] body.mio-personal-edit .mio-stone-path > span.is-result b,
:root[data-element] body.mio-personal-edit .mio-pillars .is-day-pillar small,
:root[data-element] body.mio-personal-edit .mio-stone-rationale small {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-result-cta {
	overflow: hidden;
}

:root[data-element] body.mio-personal-edit details[open] > summary {
	border-color: var(--mg-accent) !important;
	color: var(--mg-accent-deep) !important;
}

:root[data-element] body.mio-personal-edit .mio-result-cta {
	border-top: 3px solid var(--mg-accent) !important;
	background-color: color-mix(in srgb, var(--mg-accent-soft) 18%, var(--mg-surface)) !important;
}

/* PDP stays jewellery-first. It receives colour only with active Reading context. */
:root[data-element] body.single-product.mio-v2 .mio-product-context,
:root[data-element] body.single-product.mio-v2 .mio-match-header,
:root[data-element] body.single-product.mio-v2 .mio-product-why {
	border-color: var(--mg-accent) !important;
}

:root[data-element] body.single-product.mio-v2 .mio-product-context,
:root[data-element] body.single-product.mio-v2 .mio-product-why {
	background-color: color-mix(in srgb, var(--mg-accent-soft) 30%, var(--mg-surface)) !important;
}

:root[data-element] body.single-product.mio-v2 .mio-product-context .mio-eyebrow,
:root[data-element] body.single-product.mio-v2 .mio-match-kicker,
:root[data-element] body.single-product.mio-v2 .mio-product-direction,
:root[data-element] body.single-product.mio-v2 .mio-product-why strong {
	color: var(--mg-accent-deep) !important;
}

:root[data-element] body.single-product.mio-v2 .mio-size-option.is-selected,
:root[data-element] body.single-product.mio-v2 .mio-custom-gallery__thumb.is-active {
	border-color: var(--mg-accent) !important;
	background: var(--mg-accent-soft) !important;
	box-shadow: none !important;
}

/* Shop, cart, checkout, editorial pages remain neutral by default. */
body.mio-v2.woocommerce-shop .products li.product,
body.mio-v2 .wc-block-grid__product,
body.mio-v2 .woocommerce-cart-form,
body.mio-v2 .cart_totals,
body.mio-v2 .mio-transaction-note {
	background: var(--mg-surface) !important;
	border-color: var(--mg-border) !important;
}

body.mio-v2 .mio-transaction-note {
	border-left: 3px solid var(--mg-neutral) !important;
}

/* Same-tab Reading continuity may tint only transactional actions, never the full surface. */
:root[data-element] body.mio-v2.woocommerce-cart .mio-transaction-note,
:root[data-element] body.mio-v2.woocommerce-checkout .mio-transaction-note {
	border-left-color: var(--mg-accent) !important;
}

/* Loading / transition details: quiet, element-aware after a result exists. */
:root[data-element] body.mio-v2 .mio-form-status,
:root[data-element] body.mio-v2 [aria-busy="true"],
:root[data-element] body.mio-v2 .is-loading {
	color: var(--mg-accent-deep) !important;
}

body.mio-v2 .mio-reveal {
	transition-duration: .34s;
}

/* 4. Page-specific layout only — no page-specific palette definitions. */
body.mio-v2 .mio-hero__image,
body.mio-v2 .mio-featured figure,
body.mio-v2.single-product .woocommerce-product-gallery {
	padding: var(--mg-space-1);
}

body.mio-v2 .mio-result-section,
body.mio-v2 .mio-product-section {
	padding-top: var(--mg-space-5);
	padding-bottom: var(--mg-space-5);
}

body.mio-v2 .mio-product-care,
body.mio-v2 .mio-values {
	gap: var(--mg-space-3);
}

body.mio-v2 .mio-reading-actions,
body.mio-v2 .mio-intention-actions,
body.mio-v2 .mio-result-actions {
	gap: var(--mg-space-2);
}

@media (max-width: 1024px) {
	body.mio-personal-edit .mio-reading-card,
	body.mio-v2 .mio-result-section,
	body.mio-v2 .mio-product-section {
		padding-right: var(--mg-space-4);
		padding-left: var(--mg-space-4);
	}
}

@media (max-width: 760px) {
	body.mio-personal-edit .mio-edit-form,
	body.mio-personal-edit .mio-intention,
	body.mio-personal-edit .mio-reading-card,
	body.mio-v2.single-product .summary,
	body.mio-v2.single-product .mio-product-section {
		padding: var(--mg-space-3);
	}

	body.mio-v2 .mio-button,
	body.mio-v2 .single_add_to_cart_button,
	body.mio-v2 .checkout-button,
	body.mio-v2 #place_order {
		min-height: 48px;
		border-radius: var(--mg-radius-control) !important;
	}

	body.mio-personal-edit .mio-reading-insights {
		gap: var(--mg-space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.mio-v2 *,
	body.mio-v2 *::before,
	body.mio-v2 *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* 5. Phase 2.3 live visual QA normalization
 * Final visual authority over the legacy prototype/result/PDP layout layers.
 * This section fixes geometry, hierarchy and states; colours still come only
 * from the Neutral Brand + Five Element token layers above.
 */

/* Announcement + header -------------------------------------------------- */
body.mio-v2 .mio-announcement-bar {
	min-height: 36px !important;
	padding: 8px 24px !important;
	background: var(--mg-text) !important;
	color: rgba(255,255,255,.78) !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
}

body.mio-v2 .mio-announcement-bar span,
body.mio-v2 .mio-announcement-bar .mio-announcement-slide {
	color: rgba(255,255,255,.78) !important;
}

body.mio-v2 .mio-announcement-bar strong,
body.mio-v2 .mio-announcement-bar a {
	color: #FFFFFF !important;
}

body.mio-v2 .mio-announcement-bar__separator {
	color: rgba(255,255,255,.34) !important;
}

body.mio-v2 #masthead .site-branding .site-title::after {
	display: none !important;
}

body.mio-v2 #masthead .header-navigation .menu,
body.mio-v2 #masthead .menu-toggle-open {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-v2 #masthead .header-navigation .menu > li > a,
body.mio-v2 #masthead .menu-toggle-open {
	color: var(--mg-text) !important;
}

body.mio-v2 #masthead .header-navigation .menu > li > a[href*="#personal-edit"],
body.mio-v2 #mobile-drawer .mobile-navigation a[href*="#personal-edit"] {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface-2) !important;
	color: var(--mg-text) !important;
	box-shadow: none !important;
}

/* Form / intention ------------------------------------------------------- */
body.mio-personal-edit .mio-bazi-page {
	width: min(1160px, calc(100vw - 32px)) !important;
	margin-inline: auto !important;
}

body.mio-personal-edit .mio-edit__work,
body.mio-personal-edit .mio-direction {
	width: min(760px, calc(100vw - 40px)) !important;
	margin-inline: auto !important;
}

body.mio-personal-edit .mio-result {
	width: min(1120px, calc(100vw - 40px)) !important;
	max-width: 1120px !important;
	margin: 0 auto !important;
}

body.mio-personal-edit .mio-edit-form,
body.mio-personal-edit .mio-intention {
	padding: 28px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.mio-personal-edit .mio-edit-form__heading h3,
body.mio-personal-edit .mio-intention h3 {
	margin-top: 4px !important;
	color: var(--mg-text) !important;
	font-size: clamp(30px, 3vw, 38px) !important;
	line-height: 1.04 !important;
}

body.mio-personal-edit .mio-form-note,
body.mio-personal-edit .mio-intention > p,
body.mio-personal-edit .mio-check {
	color: var(--mg-text-2-aa) !important;
	font-size: 12px !important;
}

body.mio-personal-edit .mio-field > span,
body.mio-personal-edit .mio-intention legend {
	color: var(--mg-text) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}

body.mio-personal-edit .mio-field input,
body.mio-personal-edit .mio-field select {
	height: 50px !important;
	border-color: var(--mg-border) !important;
	border-radius: var(--mg-radius-control) !important;
	background: var(--mg-surface) !important;
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-field input:focus,
body.mio-personal-edit .mio-field select:focus {
	border-color: var(--mg-accent) !important;
	outline: 2px solid color-mix(in srgb, var(--mg-accent) 20%, transparent) !important;
	outline-offset: 1px !important;
}

body.mio-personal-edit .mio-intent-options {
	gap: 10px !important;
}

body.mio-personal-edit .mio-intent-options span {
	min-height: 92px !important;
	padding: 16px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-intent-options b {
	color: var(--mg-text) !important;
	font-size: 13px !important;
}

body.mio-personal-edit .mio-intent-options small {
	color: var(--mg-text-2) !important;
	font-size: 10px !important;
}

body.mio-personal-edit .mio-intent-options span::after {
	border-color: var(--mg-border) !important;
	background: transparent !important;
}

body.mio-personal-edit .mio-intent-options input:checked + span {
	border-color: var(--mg-accent) !important;
	background: var(--mg-accent-soft) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-intent-options input:checked + span::before {
	background: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-change-intent {
	color: var(--mg-neutral) !important;
	font-size: 10px !important;
}

body.mio-personal-edit .mio-edit-recap {
	margin: 14px 0 0 !important;
	padding: 10px 14px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-control) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

/* Reading card ----------------------------------------------------------- */
:root[data-element] body.mio-personal-edit .mio-reading-card {
	border: 1px solid var(--mg-border) !important;
	border-top: 2px solid var(--mg-accent) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-reading-card {
	width: 100% !important;
	max-width: 1120px !important;
	margin: 16px auto 0 !important;
	padding: clamp(28px, 4vw, 48px) !important;
}

body.mio-personal-edit .mio-reading-card__hero h2 {
	font-size: clamp(44px, 5.2vw, 72px) !important;
	line-height: .98 !important;
}

body.mio-personal-edit .mio-reading-insights {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0,1fr)) !important;
	gap: 12px !important;
	margin-top: 24px !important;
	border: 0 !important;
}

body.mio-personal-edit .mio-reading-insights article {
	min-height: 148px !important;
	padding: 22px 22px 20px 52px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

:root[data-element] body.mio-personal-edit .mio-reading-insights article.is-stone,
:root[data-element] body.mio-personal-edit .mio-reading-insights article.is-piece {
	border-color: var(--mg-border) !important;
	border-top: 2px solid var(--mg-accent) !important;
	background: var(--mg-surface) !important;
}

body.mio-personal-edit .mio-reading-insights article > span {
	top: 23px !important;
	left: 20px !important;
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-reading-insights article > small {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-reading-insights p {
	margin: 12px 0 14px !important;
	color: var(--mg-text-2) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

body.mio-personal-edit .mio-reading-insights .mio-reading-stone-name {
	font-size: clamp(30px, 2.5vw, 36px) !important;
}

body.mio-personal-edit .mio-reading-insights .mio-reading-piece-name {
	font-size: 24px !important;
}

body.mio-personal-edit .mio-reading-insights a {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-reading-secondary {
	border-color: var(--mg-border) !important;
	border-radius: var(--mg-radius-control) !important;
	background: var(--mg-surface) !important;
	color: var(--mg-text) !important;
}

/* Detailed result: shared section geometry ------------------------------- */
body.mio-personal-edit .mio-result-section {
	width: 100% !important;
	max-width: none !important;
	margin: 16px 0 0 !important;
	padding: 36px 40px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-result-section > .mio-step-label,
body.mio-personal-edit .mio-result-cta .mio-step-label {
	margin-bottom: 10px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--mg-accent-deep) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
}

body.mio-personal-edit .mio-result-section > h2,
body.mio-personal-edit .mio-stone-heading h2 {
	margin: 0 !important;
	font-size: clamp(36px, 4vw, 50px) !important;
	line-height: 1.04 !important;
	letter-spacing: -.035em !important;
}

body.mio-personal-edit .mio-result-section > h2 + p,
body.mio-personal-edit .mio-stone-heading > p:not(.mio-step-label) {
	max-width: 760px !important;
	margin: 16px 0 0 !important;
	color: var(--mg-text-2) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
}

/* 01 — chart ------------------------------------------------------------- */
body.mio-personal-edit .mio-distribution {
	margin-top: 22px !important;
	padding: 20px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-distribution-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-bottom: 18px !important;
}

body.mio-personal-edit .mio-distribution-head h3 {
	margin: 0 !important;
	color: var(--mg-text) !important;
	font-size: 24px !important;
}

body.mio-personal-edit .mio-distribution-head p {
	margin: 0 !important;
	padding: 7px 10px !important;
	border-radius: 999px !important;
	background: var(--mg-accent-soft) !important;
	color: var(--mg-accent-deep) !important;
	font-size: 10px !important;
}

body.mio-personal-edit .mio-distribution-head p b {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-distribution > div:not(.mio-distribution-head) {
	margin: 10px 0 !important;
}

body.mio-personal-edit .mio-distribution > div:not(.mio-distribution-head) > i {
	background: var(--mg-surface-2) !important;
}

body.mio-personal-edit .mio-distribution em {
	background: color-mix(in srgb, var(--mg-accent) 52%, var(--mg-border)) !important;
}

body.mio-personal-edit .mio-distribution .is-useful {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

body.mio-personal-edit .mio-distribution .is-useful b,
body.mio-personal-edit .mio-distribution .is-useful small {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-distribution .is-useful > i > em {
	background: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-bazi-details {
	margin-top: 16px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-bazi-details summary {
	min-height: 52px !important;
	padding: 14px 16px !important;
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-bazi-details summary > span {
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-bazi-details summary > i {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface-2) !important;
}

body.mio-personal-edit .mio-bazi-details summary > i::before {
	color: var(--mg-neutral) !important;
}

body.mio-personal-edit .mio-pillars {
	border-color: var(--mg-border) !important;
	background: var(--mg-border) !important;
}

body.mio-personal-edit .mio-pillar-column,
body.mio-personal-edit .mio-chart-facts span {
	background: var(--mg-surface) !important;
}

body.mio-personal-edit .mio-pillar-column small,
body.mio-personal-edit .mio-chart-facts small {
	color: var(--mg-text-2) !important;
}

body.mio-personal-edit .mio-pillar-column b,
body.mio-personal-edit .mio-chart-facts b {
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-pillar-column .mio-pillar-branch {
	border-color: var(--mg-border) !important;
}

:root[data-element] body.mio-personal-edit .mio-pillar-column.is-day-pillar {
	background: var(--mg-accent-soft) !important;
}

:root[data-element] body.mio-personal-edit .mio-pillar-column.is-day-pillar::after {
	background: var(--mg-accent) !important;
}

/* 02 — direction --------------------------------------------------------- */
body.mio-personal-edit #mio-why-element > .mio-decision-note {
	margin: 16px 0 0 !important;
	color: var(--mg-text-2) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

body.mio-personal-edit .mio-daymaster-note {
	max-width: none !important;
	margin: 20px 0 14px !important;
	padding: 13px 16px !important;
	border: 0 !important;
	border-left: 2px solid var(--mg-accent) !important;
	border-radius: 0 !important;
	background: color-mix(in srgb, var(--mg-accent-soft) 36%, var(--mg-surface)) !important;
	color: var(--mg-text-2) !important;
	font-size: 12px !important;
	line-height: 1.55 !important;
}

body.mio-personal-edit .mio-daymaster-note > span {
	margin-bottom: 4px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--mg-accent-deep) !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
}

body.mio-personal-edit .mio-priority-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0,1fr)) !important;
	grid-auto-rows: auto !important;
	gap: 10px !important;
	margin-top: 0 !important;
}

body.mio-personal-edit .mio-priority-grid article,
body.mio-personal-edit .mio-priority-grid article.is-primary {
	display: block !important;
	position: relative !important;
	width: auto !important;
	height: auto !important;
	min-height: 118px !important;
	padding: 16px !important;
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
	text-align: left !important;
}

body.mio-personal-edit .mio-priority-grid article.is-primary {
	grid-column: 1 / -1 !important;
	min-height: 108px !important;
	padding: 18px 20px !important;
	border-color: var(--mg-accent) !important;
	border-top: 3px solid var(--mg-accent) !important;
	background: color-mix(in srgb, var(--mg-accent-soft) 48%, var(--mg-surface)) !important;
}

body.mio-personal-edit .mio-priority-grid article small,
body.mio-personal-edit .mio-priority-grid article.is-primary small {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--mg-text-2) !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: .08em !important;
	text-align: left !important;
	text-transform: uppercase !important;
}

body.mio-personal-edit .mio-priority-grid article.is-primary small {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-priority-grid article b,
body.mio-personal-edit .mio-priority-grid article:not(.is-primary) b {
	display: block !important;
	margin: 8px 0 7px !important;
	color: var(--mg-text) !important;
	font: 500 22px/1.05 var(--mio-serif) !important;
}

body.mio-personal-edit .mio-priority-grid article.is-primary b {
	margin: 6px 0 8px !important;
	color: var(--mg-accent-deep) !important;
	font: 500 34px/1 var(--mio-serif) !important;
}

body.mio-personal-edit .mio-priority-grid article p,
body.mio-personal-edit .mio-priority-grid article:not(.is-primary) p,
body.mio-personal-edit .mio-priority-grid article.is-primary p {
	margin: 0 !important;
	color: var(--mg-text-2) !important;
	font-size: 11px !important;
	line-height: 1.5 !important;
}

/* 03 — stone ------------------------------------------------------------- */
body.mio-personal-edit .mio-stone-inputs {
	gap: 10px !important;
}

body.mio-personal-edit .mio-stone-inputs > span,
body.mio-personal-edit .mio-stone-path > span.is-result {
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-stone-inputs > i,
body.mio-personal-edit .mio-stone-arrow {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-stone-path small {
	color: var(--mg-text-2) !important;
}

body.mio-personal-edit .mio-stone-path b {
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-stone-path em {
	color: var(--mg-text-2) !important;
}

:root[data-element] body.mio-personal-edit .mio-stone-path > span.is-result {
	border-color: var(--mg-accent) !important;
	background: var(--mg-accent-soft) !important;
}

:root[data-element] body.mio-personal-edit .mio-stone-path > span.is-result small,
:root[data-element] body.mio-personal-edit .mio-stone-path > span.is-result b {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-stone-rationale {
	margin-top: 14px !important;
	padding: 14px 16px !important;
	border: 0 !important;
	border-left: 2px solid var(--mg-accent) !important;
	background: var(--mg-surface-2) !important;
}

body.mio-personal-edit .mio-stone-rationale small {
	color: var(--mg-accent-deep) !important;
}

body.mio-personal-edit .mio-stone-rationale p {
	color: var(--mg-text-2) !important;
	font-size: 12px !important;
}

/* Bracelet recommendation ------------------------------------------------ */
body.mio-personal-edit .mio-result-cta {
	display: grid !important;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
	width: 100% !important;
	margin: 16px 0 0 !important;
	overflow: hidden !important;
	border: 1px solid var(--mg-border) !important;
	border-top: 3px solid var(--mg-accent) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-result-cta img {
	width: 100% !important;
	height: 100% !important;
	min-height: 380px !important;
	max-height: 520px !important;
	object-fit: cover !important;
	background: var(--mg-surface-2) !important;
}

body.mio-personal-edit .mio-result-cta > div {
	align-self: center !important;
	padding: clamp(28px, 4vw, 48px) !important;
}

body.mio-personal-edit .mio-result-cta h2 {
	margin: 0 !important;
	color: var(--mg-text) !important;
	font-size: clamp(34px, 4vw, 50px) !important;
	line-height: 1.04 !important;
}

body.mio-personal-edit .mio-result-cta p,
body.mio-personal-edit .mio-result-cta .mio-result-price {
	color: var(--mg-text-2) !important;
}

body.mio-personal-edit .mio-result-cta .mio-result-price {
	margin-top: 12px !important;
	font-size: 14px !important;
}

body.mio-personal-edit .mio-result-cta .mio-button {
	margin-top: 20px !important;
	border-color: var(--mg-accent-deep) !important;
	background: var(--mg-accent-deep) !important;
	color: #FFFFFF !important;
}

/* 04 — calculation ------------------------------------------------------- */
body.mio-personal-edit .mio-calculation-section {
	background: var(--mg-surface) !important;
}

body.mio-personal-edit .mio-formula {
	gap: 8px !important;
	margin-top: 22px !important;
}

body.mio-personal-edit .mio-formula > span,
body.mio-personal-edit .mio-calculation-section .mio-calc-steps article,
body.mio-personal-edit .mio-calculation-section .mio-math-grid article {
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

:root[data-element] body.mio-personal-edit .mio-formula > span.is-result {
	border-color: var(--mg-accent) !important;
	background: var(--mg-accent-soft) !important;
}

body.mio-personal-edit .mio-calculation-section > .mio-calculation > details {
	border: 1px solid var(--mg-border) !important;
	border-radius: var(--mg-radius-card) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.mio-personal-edit .mio-calculation-section > .mio-calculation > details > summary {
	padding: 14px 16px !important;
	background: var(--mg-surface) !important;
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-calculation-section > .mio-calculation > details > summary > span > small {
	color: var(--mg-text-2) !important;
}

body.mio-personal-edit .mio-calculation-section > .mio-calculation > details > summary > span > b {
	color: var(--mg-text) !important;
}

body.mio-personal-edit .mio-calculation-section > .mio-calculation > details > summary::after {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface-2) !important;
}

body.mio-personal-edit .mio-calculation-section > .mio-calculation > details > summary::before {
	color: var(--mg-neutral) !important;
}

:root[data-element] body.mio-personal-edit .mio-calculation-section > .mio-calculation > details[open] > summary {
	border-bottom-color: var(--mg-accent) !important;
	background: var(--mg-accent-soft) !important;
}

body.mio-personal-edit .mio-calculation-section > .mio-calculation > details > .mio-calculation-body {
	background: var(--mg-surface) !important;
}

/* PDP -------------------------------------------------------------------- */
body.single-product.mio-v2 .woocommerce-product-gallery,
body.single-product.mio-v2 .mio-custom-gallery__main,
body.single-product.mio-v2 .summary,
body.single-product.mio-v2 .mio-product-section,
body.single-product.mio-v2 .mio-purchase-stage,
body.single-product.mio-v2 .mio-size-picker,
body.single-product.mio-v2 .mio-cart-card {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.single-product.mio-v2 .mio-custom-gallery__thumb {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface-2) !important;
	box-shadow: none !important;
}

body.single-product.mio-v2 .mio-match-header,
body.single-product.mio-v2 .mio-match-hero,
body.single-product.mio-v2 .mio-product-context,
body.single-product.mio-v2 .mio-product-why {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface-2) !important;
	box-shadow: none !important;
}

body.single-product.mio-v2 .mio-match-header a,
body.single-product.mio-v2 .mio-match-review,
body.single-product.mio-v2 .mio-size-picker__head a,
body.single-product.mio-v2 .mio-purchase-guidance a,
body.single-product.mio-v2 .mio-product-care a,
body.single-product.mio-v2 .mio-spec-toggle {
	color: var(--mg-neutral) !important;
}

body.single-product.mio-v2 .mio-section-header .mio-eyebrow,
body.single-product.mio-v2 .mio-product-section > header > .mio-eyebrow,
body.single-product.mio-v2 .mio-purchase-stage > .mio-section-header > .mio-eyebrow {
	color: var(--mg-neutral) !important;
}

body.single-product.mio-v2 .mio-size-option {
	border-color: var(--mg-border) !important;
	background: var(--mg-surface) !important;
	box-shadow: none !important;
}

body.single-product.mio-v2 .mio-custom-gallery__thumb.is-active,
body.single-product.mio-v2 .mio-size-option.is-selected {
	border-color: var(--mg-neutral) !important;
	background: var(--mg-surface-2) !important;
	box-shadow: none !important;
}

body.single-product.mio-v2 .mio-size-option.is-selected::after {
	background: var(--mg-neutral) !important;
}

body.single-product.mio-v2 .mio-product-editorial .mio-section-header .mio-eyebrow,
body.single-product.mio-v2 .mio-product-editorial .mio-product-section > header > .mio-eyebrow,
body.single-product.mio-v2 .mio-purchase-stage > .mio-section-header > .mio-eyebrow {
	color: var(--mg-neutral) !important;
}

:root[data-element] body.single-product.mio-v2 .mio-match-header,
:root[data-element] body.single-product.mio-v2 .mio-match-hero,
:root[data-element] body.single-product.mio-v2 .mio-product-context,
:root[data-element] body.single-product.mio-v2 .mio-product-why {
	border-color: var(--mg-accent) !important;
	background: color-mix(in srgb, var(--mg-accent-soft) 34%, var(--mg-surface)) !important;
}

:root[data-element] body.single-product.mio-v2 .mio-match-kicker,
:root[data-element] body.single-product.mio-v2 .mio-match-status,
:root[data-element] body.single-product.mio-v2 .mio-product-direction,
:root[data-element] body.single-product.mio-v2 .mio-product-context .mio-eyebrow,
:root[data-element] body.single-product.mio-v2 .mio-section-header .mio-eyebrow,
:root[data-element] body.single-product.mio-v2 .mio-product-section > header > .mio-eyebrow,
:root[data-element] body.single-product.mio-v2 .mio-product-editorial .mio-section-header .mio-eyebrow,
:root[data-element] body.single-product.mio-v2 .mio-product-editorial .mio-product-section > header > .mio-eyebrow,
:root[data-element] body.single-product.mio-v2 .mio-purchase-stage > .mio-section-header > .mio-eyebrow {
	color: var(--mg-accent-deep) !important;
}

:root[data-element] body.single-product.mio-v2 .mio-custom-gallery__thumb.is-active,
:root[data-element] body.single-product.mio-v2 .mio-size-option.is-selected {
	border-color: var(--mg-accent) !important;
	background: var(--mg-accent-soft) !important;
	box-shadow: none !important;
}

:root[data-element] body.single-product.mio-v2 .mio-size-option.is-selected::after {
	background: var(--mg-accent-deep) !important;
}

body.single-product.mio-v2 .mio-purchase-stage .single_add_to_cart_button,
body.single-product.mio-v2 .mio-cart-actions .single_add_to_cart_button {
	border-color: var(--mg-accent-deep) !important;
	border-radius: var(--mg-radius-control) !important;
	background: var(--mg-accent-deep) !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
}

/* Transactional / content surfaces -------------------------------------- */
body.mio-v2 .woocommerce-message,
body.mio-v2 .woocommerce-info,
body.mio-v2 .woocommerce-error,
body.mio-v2 .wc-block-components-notice-banner {
	border-color: var(--mg-border) !important;
	border-radius: var(--mg-radius-control) !important;
	background: var(--mg-surface) !important;
	color: var(--mg-text) !important;
	box-shadow: none !important;
}

body.mio-v2 .woocommerce-message {
	border-left: 3px solid var(--mg-neutral) !important;
}

body.mio-v2 .woocommerce-error {
	border-left: 3px solid #8B5E59 !important;
}

@media (max-width: 1024px) {
	body.mio-personal-edit .mio-result-section {
		padding: 32px !important;
	}

	body.mio-personal-edit .mio-priority-grid {
		grid-template-columns: repeat(2, minmax(0,1fr)) !important;
	}

	body.mio-personal-edit .mio-result-cta {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 760px) {
	body.mio-v2 .mio-announcement-bar {
		min-height: 34px !important;
		padding: 7px 14px !important;
		font-size: 10px !important;
	}

	body.mio-personal-edit .mio-edit__work,
	body.mio-personal-edit .mio-direction,
	body.mio-personal-edit .mio-result {
		width: calc(100vw - 16px) !important;
		max-width: none !important;
	}

	body.mio-personal-edit .mio-edit-form,
	body.mio-personal-edit .mio-intention {
		padding: 20px !important;
	}

	body.mio-personal-edit .mio-reading-card {
		padding: 22px 18px !important;
	}

	body.mio-personal-edit .mio-reading-insights {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	body.mio-personal-edit .mio-reading-insights article {
		min-height: 0 !important;
		padding: 18px 18px 18px 48px !important;
	}

	body.mio-personal-edit .mio-result-section {
		margin-top: 10px !important;
		padding: 24px 20px !important;
	}

	body.mio-personal-edit .mio-result-section > h2,
	body.mio-personal-edit .mio-stone-heading h2 {
		font-size: clamp(30px, 9vw, 38px) !important;
	}

	body.mio-personal-edit .mio-distribution {
		padding: 16px !important;
	}

	body.mio-personal-edit .mio-distribution-head {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 8px !important;
	}

	body.mio-personal-edit .mio-priority-grid {
		grid-template-columns: repeat(2, minmax(0,1fr)) !important;
		gap: 8px !important;
	}

	body.mio-personal-edit .mio-priority-grid article,
	body.mio-personal-edit .mio-priority-grid article.is-primary {
		min-height: 0 !important;
		padding: 14px !important;
	}

	body.mio-personal-edit .mio-priority-grid article.is-primary {
		grid-column: 1 / -1 !important;
		padding: 16px !important;
	}

	body.mio-personal-edit .mio-priority-grid article b,
	body.mio-personal-edit .mio-priority-grid article:not(.is-primary) b {
		font-size: 19px !important;
	}

	body.mio-personal-edit .mio-priority-grid article.is-primary b {
		font-size: 29px !important;
	}

	body.mio-personal-edit .mio-priority-grid article p,
	body.mio-personal-edit .mio-priority-grid article:not(.is-primary) p,
	body.mio-personal-edit .mio-priority-grid article.is-primary p {
		font-size: 10px !important;
	}

	body.mio-personal-edit .mio-result-cta {
		grid-template-columns: 1fr !important;
	}

	body.mio-personal-edit .mio-result-cta img {
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: 1 / 1 !important;
	}

	body.mio-personal-edit .mio-result-cta > div {
		padding: 24px 20px 26px !important;
	}

	body.single-product.mio-v2 .mio-product-section,
	body.single-product.mio-v2 .mio-purchase-stage {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}
}

@media (max-width: 460px) {
	body.mio-personal-edit .mio-priority-grid {
		grid-template-columns: 1fr !important;
	}

	body.mio-personal-edit .mio-priority-grid article.is-primary {
		grid-column: 1 !important;
	}
}