/**
 * MH Spielturm Vergleich v5.4.1 — 2-Column Configurator
 * Uses --mh-stv-accent (default: #e8910c)
 *
 * v5.4.1 changes:
 * - Hero + peek image: object-fit:contain (no cropping) + neutral background
 * - will-change:transform moved from permanent to .is-dragging only (saves compositor layers)
 * - Sticky CTA: all hardcoded hex values replaced with CSS custom properties
 * - Sticky CTA: token definitions (--_bg, --_border, --_text, --_muted) on .mh-stv-sticky-cta
 * - Added missing @keyframes mhStvPulse (used by PHP skeleton + BT loading skeleton)
 *
 * v5.2.0 changes:
 * - PERF: Single hero <img> + peek <img> replace N stacked gallery images
 *   → will-change only on active elements (was on 30+ hidden images)
 *   → .mh-stv-hero-img, .mh-stv-peek-img replace .mh-stv-gallery-img
 * - UX: Gallery loading indicator (.mh-stv-gallery-loader) with spinner
 * - UX: Mobile thumbnails 60px (was 52px) for better touch targets
 * - UX: Sticky CTA ultra-compact on <480px (hide BT pill, smaller padding)
 * - 360°: Gallery overlay expand button z-index fix + larger touch target
 *
 * v5.1.0 changes:
 * - Sticky CTA bar works on both desktop (top-fixed) and mobile (bottom-fixed)
 * - Desktop: slide-down animation, max-width 1200px centered, single row layout
 * - Mobile: stacked rows (info + BT pill + actions)
 * - Product thumbnail (48px/40px) + product name + price in sticky bar
 * - Bought-together pill: compact summary of selected accessories, click scrolls
 * - New CSS classes: .is-desktop, .is-mobile for position toggling
 * - Qty selector and CTA button fully styled via classes (no inline styles)
 *
 * v5.0.5 changes:
 * - Gallery + 360°-canvas + design-card + thumbnail backgrounds: #fff (removes grey strips)
 * - Gallery thumbnails: 72×72px on desktop (up from 64px, better scannable)
 * - Payment icons: uniform height (24px) + consistent gap (16px)
 * - Comparison table: hover state on rows for better scannability
 * - Toggle description: 2-line clamp instead of single-line ellipsis
 *
 * v4.8.0 changes:
 * - Sticky right column: position:sticky + max-height + overflow-y:auto on desktop
 *   Right column follows scroll while browsing configurator/Ausstattung on the left
 *   Thin scrollbar styling for WebKit + Firefox
 *   Disabled on mobile (display:contents dissolves the box)
 *
 * v4.7.0 changes:
 * - Lightbox styles extracted to spielturm-lightbox.css (~170 lines, incl. mobile)
 * - font-variant-numeric: tabular-nums on all price elements (design cards, toggles, compare)
 * - Comparison table: stronger active-column highlight (accent top-bar on header,
 *   warm background on cells surviving zebra-stripe, warmer cross for upgrade-hint)
 * - CSS audit: removed redundant lightbox rules from 480px query, trimmed ~160 lines
 *
 * v4.6.0 changes:
 * - Hybrid mobile reorder: display:contents (CSS fallback) + JS physical DOM move
 *   JS moves elements into correct order; CSS order: rules are the pre-JS fallback
 * - Scroll indicator for comparison table on mobile (gradient fade)
 * - Bought-together embed inherits proper width in both layouts
 *
 * v4.5.3 changes:
 * - Right column: Variant A "Clean Dividers" redesign
 *   — Removed action block background/border (no more box-in-box)
 *   — Left-aligned all right-column content (F-pattern readability)
 *   — Sections separated by subtle 0.5px dividers
 *   — Tighter spacing: right column gap 24px → 14px
 *   — Review inline collapses to 0 height when empty (:empty)
 *   — Price + stock share section, included gets own section
 *   — Trust signals left-aligned under CTA
 *   — Summary bar, qty selector left-aligned
 *
 * v4.5.1 changes:
 * - Staggered fade-in animation on right column children
 * - Description stays left-aligned for readability
 *
 * v4.5.0 changes:
 * - Bought-together shortcode embed wrapper (.mh-stv-bt-embed)
 *   Mobile order:9 for display:contents reordering
 *
 * v4.4.1 changes:
 * - Mobile reorder via display:contents — Gallery now appears directly
 *   after product name + stars instead of after the entire action block
 *   Flow: Name → Stars → Gallery → Thumbs → Action → Desc → Configurator
 * - Removed 16px root padding (parent container provides spacing)
 * - Cleaned up dead duplicate CSS rules
 *
 * v4.4.0 changes:
 * - Mobile clipping fix: min-width:0 on all flex/grid children
 * - Removed overflow:hidden on .mh-stv-controls (was clipping labels)
 *
 * v4.3 changes:
 * - Action block visual grouping
 * - Comparison table v2 with row headers (CSS var --_cols)
 * - Sticky CTA bar (mobile, IntersectionObserver-driven)
 * - Mobile column reorder (flexbox order)
 * - Touch-safe hover states (@media hover:hover)
 */

/* ── Root ── */
#mh-stv-configurator {
	--_a: var(--mh-stv-accent, #e8910c);
	--_bg: #f8f7f4;
	--_border: #e5e3df;
	--_text: #1a1a1a;
	--_muted: #636360;
	--_label: #636360;
	--_radius: 12px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	line-height: 1.5;
	color: var(--_text);
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	overflow: clip;
	box-sizing: border-box;
}
#mh-stv-configurator *, #mh-stv-configurator *::before, #mh-stv-configurator *::after {
	box-sizing: border-box;
}

/* ── 2-Column Grid ── */
.mh-stv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

/* ── LEFT: Gallery + Configurator ── */
.mh-stv-left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#mh-stv-configurator .mh-stv-left {
	background: #fff;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	padding: 24px;
}

/* Hero Gallery */
.mh-stv-gallery {
	position: relative;
	border-radius: var(--_radius);
	overflow: hidden;
	background: #fff;
	aspect-ratio: 4 / 3;
}
.mh-stv-gallery:focus-within {
	outline: 2px solid var(--_a);
	outline-offset: 2px;
}

/* Hero image (single element — v5.2.0) */
.mh-stv-hero-img {
	display: block;
	width: 100%; height: 100%;
	object-fit: contain;
	background: #fafaf8;
	user-select: none;
	-webkit-user-drag: none;
}
.mh-stv-hero-img.is-loading {
	opacity: .4;
}

/* Peek image (swipe slide-in) */
.mh-stv-peek-img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	background: #fafaf8;
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0;
	pointer-events: none;
}
.mh-stv-peek-img.is-visible {
	opacity: 1;
}

/* Gallery loading indicator */
.mh-stv-gallery-loader {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 3;
}
.mh-stv-gallery-loader.is-visible { display: block; }
.mh-stv-gallery-loader-ring {
	width: 32px; height: 32px;
	border: 3px solid var(--_border);
	border-top-color: var(--_a);
	border-radius: 50%;
	animation: mhStvSpin .8s linear infinite;
}
@keyframes mhStvSpin { to { transform: rotate(360deg); } }
@keyframes mhStvPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}

/* During drag: disable CSS transition, JS controls transforms directly */
.mh-stv-gallery.is-dragging .mh-stv-hero-img,
.mh-stv-gallery.is-dragging .mh-stv-peek-img {
	transition: none !important;
	will-change: transform;
}
/* Swipe cursor */
.mh-stv-gallery { cursor: grab; touch-action: pan-y pinch-zoom; }
.mh-stv-gallery.is-dragging { cursor: grabbing; }
/* Prevent native image drag */
.mh-stv-hero-img, .mh-stv-peek-img { -webkit-user-drag: none; user-select: none; }

/* 360° active: hide hero */
.mh-stv-gallery.is-360-active .mh-stv-hero-img,
.mh-stv-gallery.is-360-active .mh-stv-peek-img { display: none !important; }
.mh-stv-gallery.is-360-active .mh-stv-gallery-counter,
.mh-stv-gallery.is-360-active .mh-stv-gallery-zoom,
.mh-stv-gallery.is-360-active .mh-stv-gallery-hint,
.mh-stv-gallery.is-360-active .mh-stv-gallery-loader { display: none !important; }
.mh-stv-gallery.is-360-active { cursor: default; }

/* Gallery keyboard nav hint */
.mh-stv-gallery-hint {
	position: absolute;
	bottom: 8px; left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,.55);
	color: #fff;
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 12px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s;
}
.mh-stv-gallery:focus .mh-stv-gallery-hint {
	opacity: 1;
}

/* Gallery counter */
.mh-stv-gallery-counter {
	position: absolute;
	top: 10px; right: 10px;
	background: rgba(0,0,0,.5);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 12px;
	pointer-events: none;
}

/* Thumbnails */
.mh-stv-thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px;
}
.mh-stv-thumbs::-webkit-scrollbar { display: none; }

.mh-stv-thumb {
	width: 72px; height: 72px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color .15s, opacity .15s;
	opacity: .6;
	background: #fff;
	padding: 0;
}
.mh-stv-thumb img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.mh-stv-thumb:focus-visible {
	outline: 2px solid var(--_a);
	outline-offset: 1px;
	opacity: .85;
}
.mh-stv-thumb.is-active {
	border-color: var(--_a);
	opacity: 1;
}

/* ── Configurator Controls ── */
.mh-stv-controls {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mh-stv-label {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .6px;
	color: var(--_label); margin-bottom: 4px;
}

/* Design Picker — LARGER images (140px) */
.mh-stv-designs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.mh-stv-design-btn {
	border-radius: 10px;
	border: 2px solid var(--_border);
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
	display: flex; flex-direction: column;
	padding: 0;
	min-width: 0;
}
.mh-stv-design-btn:focus-visible {
	outline: 2px solid var(--_a);
	outline-offset: 2px;
}
.mh-stv-design-btn.is-on {
	border-color: var(--_a);
	background: #fef8ef;
	box-shadow: inset 0 0 0 1px var(--_a);
}

.mh-stv-design-img {
	height: 180px; min-height: 180px;
	overflow: hidden;
	position: relative;
	background: #fff;
}
.mh-stv-design-img img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: center bottom;
	opacity: .7; transition: opacity .2s;
	display: block;
}
.mh-stv-design-btn.is-on .mh-stv-design-img img { opacity: 1; }

.mh-stv-design-check {
	position: absolute; top: 6px; right: 6px;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--_a);
	display: none; align-items: center; justify-content: center;
	color: #fff; font-size: 12px; font-weight: 700;
}
.mh-stv-design-btn.is-on .mh-stv-design-check { display: flex; }

.mh-stv-design-text {
	padding: 12px 12px;
	overflow: hidden;
	border-top: 1px solid var(--_border);
	background: #f8f7f4;
}
.mh-stv-design-name {
	font-size: 14px; font-weight: 700; color: #333;
	line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis;
}
.mh-stv-design-btn.is-on .mh-stv-design-name { color: var(--_a); }
.mh-stv-design-btn.is-on .mh-stv-design-text { background: #fef3e2; border-top-color: #f5deb3; }

/* Design card price */
.mh-stv-design-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 2px;
	min-height: 18px;
}
.mh-stv-design-price-val {
	font-size: 13px;
	font-weight: 700;
	color: var(--_text);
	font-variant-numeric: tabular-nums;
}
.mh-stv-design-btn.is-on .mh-stv-design-price-val {
	color: var(--_a);
}
.mh-stv-design-price-delta {
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	padding: 0 5px;
	font-variant-numeric: tabular-nums;
}
.mh-stv-design-price-delta.is-more {
	color: #92600e;
	background: #fff7ed;
}
.mh-stv-design-price-delta.is-less {
	color: #2d6b15;
	background: #e8f5e0;
}

/* Toggle Switches — keyboard accessible */
.mh-stv-toggles { display: flex; flex-direction: column; gap: 8px; }

.mh-stv-toggle {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px; border-radius: 10px;
	border: 2px solid var(--_border); background: #fff;
	cursor: pointer; transition: all .15s ease;
	-webkit-user-select: none; user-select: none;
	overflow: hidden;
}
.mh-stv-toggle:focus-visible {
	outline: 2px solid var(--_a);
	outline-offset: 2px;
}
.mh-stv-toggle.is-on { border-color: var(--_a); background: #fef8ef; }
.mh-stv-toggle.is-disabled { opacity: .4; cursor: not-allowed; }

.mh-stv-switch {
	width: 40px; height: 22px; border-radius: 11px;
	flex-shrink: 0; background: #d5d3cf;
	position: relative; transition: background .15s ease;
}
.mh-stv-toggle.is-on .mh-stv-switch { background: var(--_a); }

.mh-stv-knob {
	width: 18px; height: 18px; border-radius: 50%;
	background: #fff; position: absolute; top: 2px; left: 2px;
	transition: left .15s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.mh-stv-toggle.is-on .mh-stv-knob { left: 20px; }

.mh-stv-toggle-info { flex: 1; min-width: 0; }
.mh-stv-toggle-name { font-size: 13px; font-weight: 700; color: #333; line-height: 1.2; }
.mh-stv-toggle-desc { font-size: 12px; color: var(--_muted); margin-top: 1px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mh-stv-toggle-delta {
	font-size: 12px; font-weight: 700; color: var(--_muted);
	white-space: nowrap; flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.mh-stv-toggle.is-on .mh-stv-toggle-delta { color: var(--_a); }

/* ── Dependency Hint (Kletterwand needs Schaukel) ── */
.mh-stv-dep-hint {
	display: none;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff7ed;
	border: 1px solid #f5deb3;
	font-size: 12px;
	color: #92600e;
	line-height: 1.4;
}
.mh-stv-dep-hint.is-visible { display: flex; }
.mh-stv-dep-hint-icon {
	flex-shrink: 0;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #f5deb3;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; color: #92600e;
}

/* ── Comparison View (Ausstattungsstufen) ── */
.mh-stv-compare {
	margin-top: 4px;
	border-radius: 10px;
	border: 1px solid var(--_border);
	overflow: hidden;
	background: #fff;
}
.mh-stv-compare-header-cell {
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--_text);
	text-align: center;
	border-right: 1px solid var(--_border);
}
.mh-stv-compare-header-cell:last-child { border-right: none; }
.mh-stv-compare-header-cell.is-active {
	background: #fef3e2;
	color: var(--_a);
	box-shadow: inset 0 3px 0 0 var(--_a);
}
.mh-stv-compare-row:last-child { border-bottom: none; }
.mh-stv-compare-cell {
	padding: 6px 10px;
	font-size: 12px;
	text-align: center;
	color: var(--_muted);
	border-right: 1px solid var(--_border);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.mh-stv-compare-cell:last-child { border-right: none; }
.mh-stv-compare-cell.is-active {
	background: #fffaf2;
}
.mh-stv-compare-check {
	color: #3aa01c;
	font-weight: 700;
	font-size: 14px;
}
.mh-stv-compare-cross {
	color: #ccc;
	font-size: 12px;
}
/* Upgrade-hint: feature missing in active column but present in higher level */
.mh-stv-compare-cell.is-active .mh-stv-compare-cross {
	color: #e0c8a0;
}
.mh-stv-compare-price {
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.mh-stv-compare-price.is-active {
	color: var(--_a);
}

/* Fix #8 v5.4.0: Comparison table CTA row */
.mh-stv-compare-cta-row {
	border-top: 1px solid var(--_border);
}
.mh-stv-compare-cta-row .mh-stv-compare-cell {
	padding: 10px 6px;
}
.mh-stv-compare-select-btn {
	display: inline-block;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	color: #fff;
	background: var(--_a);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter .15s, transform .1s;
}
.mh-stv-compare-select-btn:hover { filter: brightness(1.08); }
.mh-stv-compare-select-btn:active { transform: scale(.97); }
.mh-stv-compare-current-badge {
	display: inline-block;
	padding: 5px 10px;
	font-size: 11px;
	font-weight: 600;
	color: var(--_a);
	background: rgba(232,145,12,.1);
	border-radius: 6px;
	white-space: nowrap;
}

/* Fix #5 v5.4.0: Undo link in cart notice */
.mh-stv-undo-link {
	color: var(--_a);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}
.mh-stv-undo-link:hover {
	text-decoration: none;
}

/* ── RIGHT: Product Info (left-aligned, clean dividers v4.5.3) ── */
.mh-stv-right {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	text-align: left;
	/* Sticky: JS sets top dynamically via updateStickyTop() */
	position: sticky;
	top: 80px;
}
#mh-stv-configurator .mh-stv-right {
	background: #fff;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	padding: 24px;
}

.mh-stv-product-name {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--_text);
	width: 100%;
	text-align: left;
}

/* Price Block */
.mh-stv-price-block {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.mh-stv-price-val {
	font-size: 36px;
	font-weight: 800;
	color: var(--_a);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: transform .15s;
}
.mh-stv-price-val.is-flash {
	transform: scale(1.04);
}
.mh-stv-price-suffix {
	font-size: 12px;
	color: var(--_muted);
}

/* Stock Badge */
.mh-stv-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
	width: fit-content;
}
.mh-stv-stock-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
}
.mh-stv-stock.is-instock {
	background: #e8f5e0; color: #2d6b15;
}
.mh-stv-stock.is-instock .mh-stv-stock-dot { background: #3aa01c; }
.mh-stv-stock.is-onbackorder {
	background: #fff5e0; color: #8a6d2b;
}
.mh-stv-stock.is-onbackorder .mh-stv-stock-dot { background: #d4a017; }
.mh-stv-stock.is-outofstock {
	background: #fde8e8; color: #991b1b;
}
.mh-stv-stock.is-outofstock .mh-stv-stock-dot { background: #dc2626; }

/* Divider */
.mh-stv-divider {
	height: 1px;
	background: var(--_border);
}

/* ── Included Features — Checklist style, NOT button-like ── */
.mh-stv-included {
	width: 100%;
}
.mh-stv-included-label {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .5px;
	color: var(--_label); margin-bottom: 8px;
}
.mh-stv-included-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	justify-content: flex-start;
}
.mh-stv-included-tag {
	font-size: 13px;
	padding: 3px 8px 3px 0;
	background: none;
	border-radius: 0;
	color: #444;
	font-weight: 500;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1.7;
}
.mh-stv-included-tag::before {
	content: '\2713';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #e8f5e0;
	color: #3aa01c;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}
.mh-stv-included-tag.is-addon {
	color: #92600e;
	font-weight: 600;
}
.mh-stv-included-tag.is-addon::before {
	content: '+';
	background: #fff7ed;
	color: #b07c10;
}
/* Visual separator before addon block */
.mh-stv-included-sep {
	width: 100%;
	height: 0;
	border-top: 1px dashed #e5e3df;
	margin: 4px 0 2px;
}

/* Short Description (in description tab) */
.mh-stv-short-desc {
	font-size: 14px;
	color: #444;
	line-height: 1.7;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--_border);
}

/* Review Stars Inline (under product name) */
.mh-stv-review-inline {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	justify-content: flex-start;
	margin-top: 4px;
}
.mh-stv-review-inline:empty {
	display: none;
}
.mh-stv-review-inline-text {
	font-size: 13px;
	color: var(--_muted);
	font-weight: 600;
}

/* CTA Area */
.mh-stv-cta-area {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.mh-stv-cta {
	display: block; width: 100%; text-align: center;
	padding: 16px 20px; border-radius: 10px;
	font-size: 16px; font-weight: 800;
	text-decoration: none; letter-spacing: .3px;
	transition: filter .15s, transform .1s, background .2s, color .2s;
	border: none; cursor: pointer;
	position: relative;
}
.mh-stv-cta:active { transform: scale(.98); }

.mh-stv-cta-primary {
	background: var(--_a); color: #fff;
	box-shadow: 0 2px 8px rgba(232,145,12,.3);
}
.mh-stv-cta-primary:hover { filter: brightness(1.08); color: #fff; }

/* Trust Signals */
.mh-stv-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding-top: 4px;
	justify-content: flex-start;
}
.mh-stv-trust-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--_muted);
	line-height: 1.3;
}
.mh-stv-trust-item svg {
	flex-shrink: 0;
	color: var(--_muted);
	opacity: .7;
}

/* AJAX cart states */
.mh-stv-cta-primary.is-loading {
	pointer-events: none;
	opacity: .75;
}
.mh-stv-cta-primary.is-success {
	background: #3aa01c;
	pointer-events: none;
}
.mh-stv-cta-primary.is-error {
	background: #dc2626;
}

/* v5.6.0: Accessory link removed — BT pill in sticky bar is sufficient */

/* Cart success notice */
.mh-stv-cart-notice {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #e8f5e0;
	border: 1px solid #c1e0b0;
	font-size: 13px;
	color: #2d6b15;
	font-weight: 600;
}
.mh-stv-cart-notice.is-visible { display: flex; }
.mh-stv-cart-notice a {
	color: #2d6b15;
	text-decoration: underline;
	font-weight: 700;
}

/* ── Bought-Together Shortcode Embed ── */
.mh-stv-bt-embed {
	margin: 14px auto 0;
	max-width: 100%;
	width: 100%;
	text-align: left;
	align-self: stretch;
}
/* Force inner BT widget to respect wrapper width */
.mh-stv-bt-embed .mh-bt-widget {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── Embedded External Elements (Oxygen reusable templates etc.) ── */
.mh-stv-embed-item {
	margin-top: 14px;
	width: 100%;
	text-align: left;
	overflow: hidden;
}
.mh-stv-embed-item > * {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Force Oxygen multi-column layouts to stack inside narrow right column */
.mh-stv-embed-item .ct-new-columns {
	flex-direction: column !important;
	gap: 10px !important;
}
.mh-stv-embed-item .ct-new-columns > * {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
}

/* Oxygen div-blocks: constrain widths */
.mh-stv-embed-item .ct-div-block {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Oxygen sections/inner-wraps: remove side padding, full width */
.mh-stv-embed-item .ct-section,
.mh-stv-embed-item .ct-section-inner-wrap {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
}

/* Payment icons row: center, wrap if needed */
.mh-stv-embed-item [id*="zahlungs"],
.mh-stv-embed-item [id*="payment"] {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 12px 0 !important;
	margin: 0 !important;
}
.mh-stv-embed-item [id*="zahlungs"] img,
.mh-stv-embed-item [id*="payment"] img {
	max-height: 28px !important;
	width: auto !important;
	object-fit: contain !important;
}

/* ── Payment Icons Embed (inside action block, after trust) ── */
.mh-stv-payment-embed {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--_border);
	width: 100%;
	overflow: visible;
}
.mh-stv-payment-embed:empty {
	display: none;
}

/* Target #zahlungsblock directly (moved from page into this slot) */
#mh-stv-configurator .mh-stv-payment-embed #zahlungsblock {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
}

/* Every direct child inside zahlungsblock = one icon container */
#mh-stv-configurator .mh-stv-payment-embed #zahlungsblock > * {
	width: auto !important;
	height: auto !important;
	flex-shrink: 0 !important;
}

/* Unified icon sizing: all payment icons get the same height */
#mh-stv-configurator .mh-stv-payment-embed svg {
	width: auto !important;
	height: 24px !important;
	display: block !important;
}
#mh-stv-configurator .mh-stv-payment-embed img,
#mh-stv-configurator .mh-stv-payment-embed img.bezahlicons,
#mh-stv-configurator .mh-stv-payment-embed .ct-image.bezahlicons {
	height: 24px !important;
	width: auto !important;
	max-width: 100px !important;
	display: block !important;
	object-fit: contain !important;
	padding: 0 !important;
}

/* Oxygen fancy icon wrappers — ensure they don't collapse */
#mh-stv-configurator .mh-stv-payment-embed .ct-fancy-icon {
	width: auto !important;
	height: auto !important;
	min-width: 48px !important;
	min-height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#mh-stv-configurator .mh-stv-payment-embed .ct-fancy-icon > * {
	width: auto !important;
	height: auto !important;
}

/* Oxygen fancy icons in trust rows: scale down for sidebar */
.mh-stv-embed-item .ct-fancy-icon {
	transform: scale(.85);
}

/* Images inside embeds: constrain */
.mh-stv-embed-item img {
	max-width: 100% !important;
	height: auto !important;
}

/* ── Quantity Selector ── */
.mh-stv-qty-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
	justify-content: flex-start;
}
.mh-stv-qty-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--_text);
}
.mh-stv-qty-wrap {
	display: inline-flex;
	align-items: stretch;
	border: 2px solid var(--_border);
	border-radius: 6px;
	overflow: hidden;
	height: 40px;
}
.mh-stv-qty-btn {
	width: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--_bg);
	border: none;
	font-size: 18px;
	font-weight: 600;
	color: var(--_text);
	cursor: pointer;
	transition: background .1s;
	padding: 0;
	line-height: 1;
}
.mh-stv-qty-btn:hover { background: #e5e3df; }
.mh-stv-qty-btn:active { background: #d5d3cf; }

.mh-stv-qty-input {
	width: 48px;
	border: none;
	border-left: 1px solid var(--_border);
	border-right: 1px solid var(--_border);
	font-size: 14px;
	font-weight: 700;
	color: var(--_text);
	background: #fff;
	text-align: center;
	padding: 0;
	margin: 0;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
}
.mh-stv-qty-input::-webkit-outer-spin-button,
.mh-stv-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	display: none;
	margin: 0;
}
.mh-stv-qty-input:focus { outline: none; }

/* ── Tabs (ARIA pattern) ── */
.mh-stv-tabs {
	margin-top: 32px;
	border-top: 1px solid var(--_border);
	padding-top: 24px;
	max-width: 100%;
	overflow-x: hidden;
}

.mh-stv-tab-nav {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--_border);
	margin-bottom: 20px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.mh-stv-tab-nav::-webkit-scrollbar { display: none; }

.mh-stv-tab-btn {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--_muted);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s, border-color .15s;
}
.mh-stv-tab-btn:hover { color: var(--_text); }
.mh-stv-tab-btn:focus-visible {
	outline: 2px solid var(--_a);
	outline-offset: -2px;
}
.mh-stv-tab-btn.is-active,
.mh-stv-tab-btn[aria-selected="true"] {
	color: var(--_a);
	border-bottom-color: var(--_a);
}
.mh-stv-tab-count {
	font-size: 12px;
	color: inherit;
	opacity: .7;
}

.mh-stv-tab-panel { display: none; opacity: 0; transition: opacity .2s ease; overflow-wrap: break-word; word-break: break-word; }
.mh-stv-tab-panel.is-active { display: block; opacity: 1; }

/* Tab: Description */
.mh-stv-tab-panel p {
	font-size: 14px;
	line-height: 1.7;
	color: #444;
	margin: 0 0 12px;
}
.mh-stv-tab-panel ul, .mh-stv-tab-panel ol {
	font-size: 14px;
	line-height: 1.7;
	color: #444;
	padding-left: 20px;
	margin: 0 0 12px;
}

/* Tab: Attributes Table */
.mh-stv-attr-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.mh-stv-attr-table tr {
	border-bottom: 1px solid var(--_border);
}
.mh-stv-attr-even { background: var(--_bg); }
.mh-stv-attr-label {
	font-weight: 600;
	color: var(--_text);
	padding: 10px 14px;
	width: 40%;
	text-align: left;
	vertical-align: top;
}
.mh-stv-attr-value {
	color: #555;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.mh-stv-attr-value a {
	color: var(--_a);
	text-decoration: none;
}
.mh-stv-attr-value a:hover {
	text-decoration: underline;
}

/* Tab: Produktdaten — section headings */
.mh-stv-meta-heading {
	font-size: 15px;
	font-weight: 700;
	color: var(--_text);
	margin: 0 0 10px;
	line-height: 1.3;
}

/* Tab: Reviews */
.mh-stv-review-avg {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--_border);
}
.mh-stv-review-avg-text {
	font-size: 14px;
	color: var(--_muted);
}
.mh-stv-stars {
	display: inline-flex;
	gap: 1px;
}
.mh-stv-star {
	font-size: 16px;
	color: #d5d3cf;
}
.mh-stv-star.is-full { color: var(--_a); }
.mh-stv-star.is-half {
	color: var(--_a);
	opacity: .6;
}

.mh-stv-review {
	padding: 14px 0;
	border-bottom: 1px solid var(--_border);
}
.mh-stv-review:last-child { border-bottom: none; }

.mh-stv-review-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.mh-stv-review-meta {
	font-size: 13px;
	color: var(--_muted);
}
.mh-stv-review-body {
	font-size: 14px;
	line-height: 1.6;
	color: #444;
}

/* ── Gallery click-to-zoom ── */
.mh-stv-gallery {
	cursor: zoom-in;
}
.mh-stv-gallery-zoom {
	position: absolute;
	bottom: 10px; right: 10px;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(0,0,0,.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: .7;
	transition: opacity .2s;
}

/* Lightbox styles → spielturm-lightbox.css (extracted v4.7.0) */

/* ── Action Block (clean dividers v4.5.3 — no background) ── */
.mh-stv-action-block {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	text-align: left;
	width: 100%;
}

/* Section dividers inside action block */
.mh-stv-action-block > .mh-stv-stock {
	margin-top: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--_border);
}
/* Fallback: when stock badge is not rendered, price-block gets the divider */
.mh-stv-action-block > .mh-stv-price-block + .mh-stv-included {
	padding-top: 14px;
	border-top: 1px solid var(--_border);
	margin-top: 10px;
}
.mh-stv-action-block > .mh-stv-stock + .mh-stv-included {
	border-top: none;
	margin-top: 0;
}
.mh-stv-action-block > .mh-stv-included {
	padding: 14px 0;
	border-bottom: 1px solid var(--_border);
}
.mh-stv-action-block > .mh-stv-cta-area {
	padding-top: 14px;
}
.mh-stv-action-block > .mh-stv-trust {
	margin-top: 10px;
}

/* ── Comparison Table v2 — row headers ── */
.mh-stv-compare-header {
	display: grid;
	grid-template-columns: minmax(110px, 1.2fr) repeat(var(--_cols, 3), 1fr);
	background: var(--_bg);
	border-bottom: 1px solid var(--_border);
}
.mh-stv-compare-header-cell:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--_muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.mh-stv-compare-row {
	display: grid;
	grid-template-columns: minmax(110px, 1.2fr) repeat(var(--_cols, 3), 1fr);
	border-bottom: 1px solid var(--_border);
}
.mh-stv-compare-rowhead {
	padding: 7px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--_text);
	text-align: left;
	display: flex;
	align-items: center;
	border-right: 1px solid var(--_border);
}
.mh-stv-compare-row:nth-child(even) .mh-stv-compare-rowhead,
.mh-stv-compare-row:nth-child(even) .mh-stv-compare-cell {
	background: var(--_bg);
}
/* Active column highlight takes priority over zebra-stripe */
.mh-stv-compare-row:nth-child(even) .mh-stv-compare-cell.is-active {
	background: #fef6ea;
}
.mh-stv-compare-row:nth-child(odd) .mh-stv-compare-cell.is-active {
	background: #fffaf2;
}

/* ── Sticky CTA v5.1.1 (redesign: zones, pill, price logic) ──
   Appended to document.body → outside #mh-stv-configurator.
   Fix v5.4.1: Define shared tokens here too (outside configurator scope). */
.mh-stv-sticky-cta {
	--_bg: #f8f7f4;
	--_border: #e5e3df;
	--_text: #1a1a1a;
	--_muted: #636360;
	display: none;
	position: fixed;
	left: 0; right: 0;
	z-index: 99999;
	background: #fff;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	will-change: transform;
}

/* ── Desktop: top-fixed, slide-down ── */
.mh-stv-sticky-cta.is-desktop {
	top: 0; bottom: auto;
	border-bottom: 1px solid var(--_border);
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	animation: mhStvStickyDown .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mhStvStickyDown {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

/* ── Mobile: bottom-fixed, slide-up ── */
.mh-stv-sticky-cta.is-mobile {
	bottom: 0; top: auto;
	border-top: 1px solid var(--_border);
	box-shadow: 0 -2px 10px rgba(0,0,0,.06);
	animation: mhStvStickyUp .3s cubic-bezier(.22,1,.36,1) both;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes mhStvStickyUp {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

/* Show state */
.mh-stv-sticky-cta.is-visible { display: block; }

/* ── Inner wrapper (centers content, max-width on desktop) ── */
.mh-stv-sticky-inner {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 24px;
	height: 64px;
	max-width: 1200px;
	margin: 0 auto;
}

/* ── Zone: Product info (thumb + name + price) ── */
.mh-stv-sticky-info {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 0 1 auto;
	padding-right: 20px;
	border-right: 1px solid var(--_border);
	height: 40px;
}
.mh-stv-sticky-thumb {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--_bg);
	flex-shrink: 0;
}
.mh-stv-sticky-meta {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}
.mh-stv-sticky-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--_text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
	line-height: 1.3;
}
.mh-stv-sticky-price {
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
/* Small label above price when showing BT bundle total */
.mh-stv-sticky-price-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--_muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	line-height: 1;
	display: none;
}
/* When bundle total is shown, stack label + price vertically */
.mh-stv-sticky-price-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	flex-shrink: 0;
}
.mh-stv-sticky-price-wrap.has-bt-total .mh-stv-sticky-price-label { display: block; }

/* ── Zone: BT pill ── */
.mh-stv-sticky-bt-zone {
	display: flex;
	align-items: center;
	padding: 0 20px;
	border-right: 1px solid var(--_border);
	height: 40px;
	flex-shrink: 1;
	min-width: 0;
}
.mh-stv-sticky-bt-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border-radius: 8px;
	border: 1.5px solid #f0d9b5;
	background: #fdf6ec;
	font-size: 12px;
	font-weight: 600;
	color: #8a5a1e;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 300px;
	flex-shrink: 1;
	min-width: 0;
	transition: border-color .15s, background .15s;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	line-height: 1.3;
}
.mh-stv-sticky-bt-pill:hover {
	border-color: #dfc28e;
	background: #faf0de;
}
.mh-stv-sticky-bt-pill svg { flex-shrink: 0; }
.mh-stv-sticky-bt-pill-text {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Hide BT zone divider when pill is hidden */
.mh-stv-sticky-bt-zone:empty,
.mh-stv-sticky-bt-zone:has(.mh-stv-sticky-bt-pill[style*="display: none"]),
.mh-stv-sticky-bt-zone:has(.mh-stv-sticky-bt-pill[style*="display:none"]) {
	display: none;
}

/* ── Zone: Actions (qty + button) ── */
.mh-stv-sticky-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	padding-left: 20px;
	flex-shrink: 0;
}

/* Qty wrap */
.mh-stv-sticky-qty-wrap {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--_border);
	border-radius: 8px;
	overflow: hidden;
	height: 38px;
	flex-shrink: 0;
}
.mh-stv-sticky-qty-btn {
	width: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--_bg);
	border: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--_muted);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background .1s;
}
.mh-stv-sticky-qty-btn:hover { background: #eeedea; }
.mh-stv-sticky-qty-btn:active { background: var(--_border); }
.mh-stv-sticky-qty-input {
	width: 38px;
	border: none;
	border-left: 1px solid var(--_border);
	border-right: 1px solid var(--_border);
	font-size: 13px;
	font-weight: 700;
	color: var(--_text);
	background: #fff;
	text-align: center;
	padding: 0;
	margin: 0;
	-moz-appearance: textfield;
	-webkit-appearance: none;
}
.mh-stv-sticky-qty-input::-webkit-inner-spin-button,
.mh-stv-sticky-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* CTA button */
.mh-stv-sticky-btn {
	padding: 10px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: filter .15s, transform .1s;
}
.mh-stv-sticky-btn:hover { filter: brightness(1.08); color: #fff; }
.mh-stv-sticky-btn:active { transform: scale(.97); }
.mh-stv-sticky-btn.is-loading { opacity: .75; pointer-events: none; }
.mh-stv-sticky-btn.is-success { background: #3aa01c !important; }

/* ── Staggered Fade-In (right column children) ── */
@keyframes mhStvFadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.mh-stv-right > * {
	animation: mhStvFadeUp .4s ease both;
}
.mh-stv-right > :nth-child(1) { animation-delay: 0s; }
.mh-stv-right > :nth-child(2) { animation-delay: .06s; }
.mh-stv-right > :nth-child(3) { animation-delay: .12s; }
.mh-stv-right > :nth-child(4) { animation-delay: .18s; }
.mh-stv-right > :nth-child(5) { animation-delay: .24s; }
.mh-stv-right > :nth-child(6) { animation-delay: .3s; }
.mh-stv-right > :nth-child(7) { animation-delay: .36s; }

/* (Removed in v4.5.3 — dividers now via border-bottom on action block children) */

/* ── Hover states (touch-safe) ── */
@media (hover: hover) {
	.mh-stv-design-btn:hover { border-color: #e8910c80; }
	.mh-stv-toggle:hover { border-color: #e8910c60; }
	.mh-stv-thumb:hover { opacity: .85; }
	.mh-stv-gallery:hover .mh-stv-gallery-zoom { opacity: 1; }
	.mh-stv-compare-row:hover .mh-stv-compare-rowhead,
	.mh-stv-compare-row:hover .mh-stv-compare-cell { background: #f5f4f1; }
	.mh-stv-compare-row:hover .mh-stv-compare-cell.is-active { background: #fef3e2; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	#mh-stv-configurator {
		padding: 0;
	}

	/* Base grid: single-column on mobile. */
	.mh-stv-grid {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		min-width: 0;
	}

	/* ── Hybrid Mobile Reorder (v4.6.0) ──
	   display:contents dissolves left/right wrappers so children participate in
	   the grid flex flow. CSS order: provides a fallback ordering before JS runs.
	   JS then physically moves elements for the definitive order. */
	.mh-stv-left,
	.mh-stv-right {
		display: contents;
		position: static;
	}

	/* Disable staggered fade-in on mobile (children no longer in .mh-stv-right box). */
	.mh-stv-right > * {
		animation: none;
		opacity: 1;
	}

	/* CSS order fallback (used until JS reorder completes). */
	.mh-stv-product-name  { order: 1; width: 100%; }
	.mh-stv-review-inline { order: 2; width: 100%; margin-top: -8px; }
	.mh-stv-gallery       { order: 3; width: 100%; min-height: 200px; }
	.mh-stv-thumbs        { order: 4; width: 100%; margin-top: -4px; }
	.mh-stv-action-block  { order: 5; width: 100%; }
	.mh-stv-controls      { order: 6; width: 100%; margin-top: 4px; }
	.mh-stv-bt-embed      { order: 7; width: 100% !important; max-width: 100% !important; margin: 14px 0 0 !important; overflow: hidden; }
	.mh-stv-bt-embed .mh-bt-widget,
	.mh-stv-bt-embed .mh-bt-widget * { max-width: 100% !important; box-sizing: border-box !important; }
	.mh-stv-embed-item    { order: 8; width: 100%; margin-top: 10px; overflow: hidden; }

	/* ── Width/overflow constraints ── */
	.mh-stv-controls {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.mh-stv-section {
		min-width: 0;
		width: 100%;
	}
	.mh-stv-tabs {
		min-width: 0;
		width: 100%;
		overflow-x: clip;
	}
	.mh-stv-tab-panel {
		min-width: 0;
		word-break: break-word;
	}

	/* ── Typography / sizing ── */
	.mh-stv-product-name { font-size: 22px; }
	.mh-stv-price-val { font-size: 28px; }
	.mh-stv-gallery {
		aspect-ratio: 4 / 3;
		align-self: stretch;
		flex-shrink: 0;
	}
	.mh-stv-tab-btn { padding: 8px 14px; font-size: 13px; }
	.mh-stv-attr-label { width: 35%; padding: 8px 10px; }
	.mh-stv-attr-value { padding: 8px 10px; }
	.mh-stv-design-img { height: 140px; min-height: 140px; }

	/* Design picker: prevent grid blowout */
	.mh-stv-designs {
		width: 100%;
		min-width: 0;
	}
	.mh-stv-design-btn {
		min-width: 0;
	}

	/* Toggle rows: prevent text from forcing width */
	.mh-stv-toggle {
		max-width: 100%;
	}
	.mh-stv-toggle-info {
		min-width: 0;
		overflow: hidden;
	}
	.mh-stv-toggle-desc {
		overflow: hidden;
	}

	/* ── Comparison table: scroll containment ── */
	.mh-stv-compare {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.mh-stv-compare-header,
	.mh-stv-compare-row {
		grid-template-columns: minmax(80px, 1.2fr) repeat(var(--_cols, 3), minmax(68px, 1fr));
		min-width: 0;
	}
	.mh-stv-compare-header-cell,
	.mh-stv-compare-cell { padding: 6px 6px; font-size: 11px; }
	.mh-stv-compare-rowhead { padding: 6px 8px; font-size: 11px; }

	/* Comparison CTA row — compact on mobile */
	.mh-stv-compare-select-btn {
		white-space: normal;
		padding: 5px 8px;
		font-size: 10px;
		line-height: 1.3;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	.mh-stv-compare-current-badge {
		white-space: normal;
		padding: 4px 6px;
		font-size: 9px;
		line-height: 1.3;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	.mh-stv-compare-cta-row .mh-stv-compare-cell {
		padding: 8px 4px;
	}

	/* Sticky CTA — mobile layout: 2-row max (v5.2.0 compact) */
	.mh-stv-sticky-inner {
		flex-wrap: wrap;
		gap: 6px;
		padding: 8px 14px;
		height: auto;
	}
	.mh-stv-sticky-info {
		width: 100%;
		padding-right: 0;
		border-right: none;
		height: auto;
	}
	.mh-stv-sticky-meta {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		flex: 1;
		min-width: 0;
	}
	.mh-stv-sticky-name {
		max-width: none;
		flex: 1;
		min-width: 0;
		font-size: 13px;
	}
	.mh-stv-sticky-price {
		font-size: 15px;
		flex-shrink: 0;
	}
	.mh-stv-sticky-price-wrap { flex-direction: row; align-items: baseline; gap: 4px; }
	.mh-stv-sticky-price-wrap.has-bt-total .mh-stv-sticky-price-label {
		display: inline;
		font-size: 9px;
	}
	.mh-stv-sticky-thumb {
		width: 36px;
		height: 36px;
		border-radius: 6px;
	}
	/* BT pill inline with actions row instead of its own row */
	.mh-stv-sticky-bt-zone {
		padding: 0;
		border-right: none;
		height: auto;
		width: 100%;
	}
	.mh-stv-sticky-bt-pill {
		font-size: 11px;
		padding: 5px 10px 5px 8px;
		max-width: 100%;
		flex-shrink: 1;
		border-radius: 6px;
	}
	.mh-stv-sticky-actions {
		width: 100%;
		margin-left: 0;
		padding-left: 0;
	}
	.mh-stv-sticky-btn {
		flex: 1;
		text-align: center;
		padding: 9px 16px;
	}
	.mh-stv-sticky-qty-wrap { height: 38px; }
	.mh-stv-sticky-qty-btn { width: 34px; font-size: 16px; }
	.mh-stv-sticky-qty-input { width: 38px; font-size: 14px; font-weight: 700; color: var(--_text); background: #fff; }

	/* Action block — mobile: tighter spacing */
	.mh-stv-action-block {
		padding: 0;
		min-width: 0;
		max-width: 100%;
		margin-top: 0;
	}
	.mh-stv-action-block > .mh-stv-stock {
		margin-top: 6px;
		padding-bottom: 10px;
		border-bottom-color: var(--_border);
	}
	.mh-stv-action-block > .mh-stv-price-block + .mh-stv-included {
		margin-top: 8px;
		padding-top: 10px;
	}
	.mh-stv-action-block > .mh-stv-included {
		padding: 10px 0;
	}
	.mh-stv-action-block > .mh-stv-cta-area {
		padding-top: 10px;
	}
	.mh-stv-action-block > .mh-stv-trust {
		margin-top: 8px;
	}
	.mh-stv-included-list {
		max-width: 100%;
	}

	/* Action block children */
	.mh-stv-price-block { min-width: 0; }
	.mh-stv-cta-area { min-width: 0; width: 100%; }
	.mh-stv-cta { min-width: 0; }
	.mh-stv-trust { min-width: 0; }

	/* Dependency hint: prevent overflow */
	.mh-stv-dep-hint {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.mh-stv-thumb { width: 60px; height: 60px; }
	.mh-stv-design-img { height: 120px; min-height: 120px; }
	.mh-stv-gallery { aspect-ratio: 4 / 3; }
	/* Comparison table: slightly smaller on tiny screens */
	.mh-stv-compare-header,
	.mh-stv-compare-row {
		grid-template-columns: minmax(70px, 1.1fr) repeat(var(--_cols, 3), minmax(60px, 1fr));
	}
	.mh-stv-compare-rowhead { font-size: 10px; padding: 5px 6px; }
	.mh-stv-compare-header-cell,
	.mh-stv-compare-cell { font-size: 10px; padding: 5px 4px; }

	/* Comparison CTA — extra compact on tiny screens */
	.mh-stv-compare-select-btn { padding: 4px 4px; font-size: 9px; border-radius: 5px; }
	.mh-stv-compare-current-badge { padding: 3px 4px; font-size: 8px; border-radius: 5px; }

	/* Sticky CTA — compact on small screens (v5.2.0) */
	.mh-stv-sticky-inner { padding: 8px 12px; gap: 6px; }
	.mh-stv-sticky-thumb { width: 32px; height: 32px; border-radius: 5px; }
	.mh-stv-sticky-name { font-size: 12px; }
	.mh-stv-sticky-price { font-size: 14px; }
	/* BT pill: compact icon + truncated text on small screens */
	.mh-stv-sticky-bt-zone { padding: 0; width: 100%; }
	.mh-stv-sticky-bt-pill { font-size: 10px; padding: 4px 8px; border-radius: 5px; max-width: 100%; }
	.mh-stv-sticky-bt-pill-text { max-width: 140px; }
	.mh-stv-sticky-btn { padding: 9px 14px; font-size: 13px; }
	.mh-stv-sticky-qty-wrap { height: 36px; }
	.mh-stv-sticky-qty-btn { width: 32px; font-size: 15px; }
	.mh-stv-sticky-qty-input { width: 36px; font-size: 14px; font-weight: 700; color: var(--_text); background: #fff; }
}

/* ── Fix #4 v5.4.0: Respect prefers-reduced-motion (WCAG 2.1 AA) ── */
@media (prefers-reduced-motion: reduce) {
	.mh-stv-right > * {
		animation: none !important;
		opacity: 1 !important;
	}
	.mh-stv-skeleton *,
	.mh-stv-skeleton div {
		animation: none !important;
		opacity: .6 !important;
	}
	.mh-stv-sticky-cta {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.mh-stv-sticky-cta.is-mobile,
	.mh-stv-sticky-cta.is-desktop {
		animation: none !important;
	}
	.mh-stv-price-val.is-flash {
		animation: none !important;
	}
	.mh-stv-cta-primary,
	.mh-stv-sticky-btn {
		transition: none !important;
	}
}