.msm-dynamic-specifications {
	width: 100%;
	max-width: 1120px;
	margin: 24px auto 0;
	text-align: left;
}

.msm-specifications-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	background: transparent;
}

.msm-specifications-table tbody {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 14px;
}

.msm-specifications-table tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 56px;
	padding: 11px 16px;
	border: 1px solid #e7e9ee;
	border-radius: 9px;
	background: #f8f9fb;
	box-shadow: 0 1px 2px rgba(17, 24, 39, .025);
}

.msm-specifications-table th,
.msm-specifications-table td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	line-height: 1.4;
	vertical-align: middle;
}

.msm-specifications-table th {
	max-width: 62%;
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.msm-specifications-table td {
	max-width: 48%;
	color: #171b27;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
}

.mogo-specs-wrap [hidden] {
	display: none !important;
}

/*
 * The production color-gallery stylesheet scales a hovered swatch to 104% and
 * moves it upward. That changes the painted footprint while WooCommerce is
 * rebuilding the variation gallery, which reads as a visible jump. Keep the
 * existing 56px circular design, but animate only paint properties.
 */
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item:hover,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item.selected,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item[aria-checked="true"] {
	transform: none !important;
	transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

/* Reserve the gallery's square stage while a variation image set is rebuilt. */
html body.single-product.msm-unified-color-template #wpgs-gallery .wcgs-carousel {
	min-height: min(684px, calc(100vw - 32px));
	background: #fff;
}

/*
 * Products explicitly enabled outside the Elementor template's category
 * condition are rendered through MOGO's fallback wrapper. Astra otherwise
 * keeps that wrapper inside its boxed WooCommerce container (and its product
 * display rule can even override the native element's hidden attribute).
 * Match the reference template's full-width stage without changing categories.
 */
html body.single-product.mogo-wheelchair-fallback .site-content,
html body.single-product.mogo-wheelchair-fallback .site-content > .ast-container,
html body.single-product.mogo-wheelchair-fallback #primary,
html body.single-product.mogo-wheelchair-fallback #main,
html body.single-product.mogo-wheelchair-fallback .ast-woocommerce-container,
html body.single-product.mogo-wheelchair-fallback #mogo-wheelchair-elementor-template,
html body.single-product.mogo-wheelchair-fallback #mogo-wheelchair-elementor-template > .elementor {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.single-product.mogo-wheelchair-fallback .site-content > .ast-container {
	flex: 0 0 100% !important;
}

html body.single-product.mogo-wheelchair-fallback .ast-woocommerce-container {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/*
 * The gallery plugin normally receives its desktop width from WooCommerce's
 * native product layout. On fallback-rendered products that layout is hidden,
 * leaving #wpgs-gallery at 50% inside Elementor's already half-width image
 * column. Restore the gallery to the full width of that column (the same 684px
 * stage used by D05) without affecting products handled by the normal template.
 */
html body.single-product.mogo-wheelchair-fallback #mogo-wheelchair-elementor-template #wpgs-gallery {
	display: block !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-right: 0 !important;
}

html body.single-product.mogo-wheelchair-fallback #mogo-wheelchair-elementor-template #wpgs-gallery .wcgs-carousel {
	width: 100% !important;
	max-width: 100% !important;
}

html body.single-product.mogo-wheelchair-fallback .ast-woocommerce-container > .product[hidden],
html body.single-product.mogo-wheelchair-fallback .ast-woocommerce-container > .product[aria-hidden="true"] {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/*
 * Unified color selector.
 *
 * Some fallback product pages inject a later card-style variation skin. These
 * deliberately more-specific rules keep every managed product on the proven
 * D05 presentation without editing the shared Elementor template or the
 * original MOGO Product UI plugin.
 */
html body.single-product.msm-unified-color-template form.variations_form table.variations:has(tr.mogo-color-row) {
	display: block !important;
	width: 100% !important;
	margin: 18px 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
	border-spacing: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body.single-product.msm-unified-color-template form.variations_form table.variations:has(tr.mogo-color-row) > tbody {
	display: block !important;
	width: 100% !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row > th.label {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	text-align: left !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row > th.label > label {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	color: #0b1220 !important;
	font-size: 25px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -.02em !important;
	text-align: left !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row > th.label::after,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .woo-selected-variation-item-name,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .reset_variations {
	display: none !important;
	content: none !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row > td.value {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 16px !important;
	width: 100% !important;
	height: auto !important;
	min-height: 104px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 22px 24px !important;
	border: 1px solid #d8dce2 !important;
	border-radius: 18px !important;
	background: #fff !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, .1) !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .mogo-selected-color,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .d05-selected-color {
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 auto 0 0 !important;
	color: #111827 !important;
	font-size: 23px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: left !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options {
	display: flex !important;
	flex: 0 0 auto !important;
	grid-template-columns: none !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: auto !important;
	height: auto !important;
	gap: 13px !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item:hover,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item.selected,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item[aria-checked="true"] {
	position: relative !important;
	display: block !important;
	flex: 0 0 56px !important;
	width: 56px !important;
	min-width: 56px !important;
	height: 56px !important;
	min-height: 56px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	color: transparent !important;
	border: 2px solid transparent !important;
	border-radius: 50% !important;
	background: var(--mogo-swatch, #cbd5e1) !important;
	box-shadow: none !important;
	transform: none !important;
	transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item:hover {
	box-shadow: 0 5px 12px rgba(15, 23, 42, .16) !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li[data-value="White" i] {
	border-color: #cbd5e1 !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options .variable-item-contents,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options .variable-item-span,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options .mogo-color-name {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options .variable-item-contents::before,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options .variable-item-contents::after {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	content: none !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .mogo-color-check,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .d05-color-check {
	display: none !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li.variable-item.selected .mogo-color-check,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li.variable-item[aria-checked="true"] .mogo-color-check {
	position: absolute !important;
	z-index: 3 !important;
	top: 50% !important;
	left: 50% !important;
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: translate(-50%, -50%) !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li.variable-item.selected .mogo-color-check::before,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li.variable-item[aria-checked="true"] .mogo-color-check::before {
	display: block !important;
	color: inherit !important;
	font-size: 30px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	content: "✓" !important;
}

html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li[data-value="White" i].selected .mogo-color-check,
html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li[data-value="White" i][aria-checked="true"] .mogo-color-check {
	color: #0f172a !important;
}

@media (max-width: 767px) {
	.msm-dynamic-specifications { margin-top: 18px; }
	.msm-specifications-table tbody { grid-template-columns: 1fr; gap: 8px; }
	.msm-specifications-table tr { min-height: 52px; padding: 10px 14px; border-radius: 8px; }
	.msm-specifications-table th,
	.msm-specifications-table td { font-size: 14px; }
	.msm-specifications-table th { max-width: 60%; }
	html body.single-product.msm-unified-color-template #wpgs-gallery .wcgs-carousel { min-height: calc(100vw - 32px); }
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row > th.label > label { font-size: 22px !important; }
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row > td.value { min-height: 88px !important; gap: 12px !important; padding: 17px 18px !important; border-radius: 16px !important; }
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .mogo-selected-color,
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row .d05-selected-color { font-size: 18px !important; }
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options { gap: 10px !important; }
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item,
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item:hover,
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item.selected,
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row ul.mogo-color-options li.variable-item[aria-checked="true"] { flex-basis: 48px !important; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; }
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li.variable-item.selected .mogo-color-check::before,
	html body.single-product.msm-unified-color-template form.variations_form tr.mogo-color-row li.variable-item[aria-checked="true"] .mogo-color-check::before { font-size: 25px !important; }
}
