/**
 * KISS 3D + Web AR — Scroll Assembly.
 *
 * .kiss-webar-assembly is the TRACK (its height = stage + scroll length, set
 * in script); .kw-asm-stage is the sticky STAGE inside it. The cube loader's
 * styles come from kiss-webar-showcase.css (a declared dependency).
 *
 * Host themes restyle bare <button>s and headings aggressively (Hello
 * Elementor: pink borders, filled backgrounds, big radii), so every control
 * here resets the properties a theme is likely to touch, with !important
 * where the theme selector would otherwise win — same posture as the
 * showcase's hotspots.
 */

.kiss-webar-assembly {
	position: relative;
	width: 100%;
	min-width: 0;
	/* A flex/grid parent must not shrink the track to its content. */
	flex: 1 1 100%;
	align-self: stretch;
	box-sizing: border-box;
}

/*
 * The track's width:100% resolves against the Elementor widget wrapper. In a
 * container that CENTERS its items the wrapper shrinks to its content — zero —
 * so the whole assembly was 0px wide: the track kept its height and visitors
 * scrolled through a blank page. Same fix the showcase has had since 0.4.1
 * (the runtime's unCollapse() covers other builders).
 */
.elementor-widget-kiss_webar_assembly {
	width: 100%;
	align-self: stretch;
}

.kw-asm-stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh; /* replaced in script with the resolved px height */
	overflow: hidden;
	box-sizing: border-box;
}

/* Sticky blocked by a clipping ancestor → the script pins by transform. */
.kiss-webar-assembly.kw-asm-jspin .kw-asm-stage {
	position: absolute;
	top: 0 !important;
	left: 0;
	right: 0;
	will-change: transform;
}

.kw-asm-stage > model-viewer.kw-asm-mv {
	display: block;
	width: 100%;
	/* Parts that arrive from above fade in over the top edge rather than
	   being sliced by it. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
	/* Below the heading band, when there is one (--kw-asm-head, measured). */
	margin-top: var(--kw-asm-head, 0px);
	height: calc(100% - var(--kw-asm-head, 0px));
	/* No camera-controls, but say so explicitly: every gesture belongs to the page. */
	touch-action: pan-y;
	--poster-color: transparent;
	--progress-bar-color: transparent;
}

/* Anchor: where #id links land (positioned by the runtime at the end of the
   build, with scroll-margin-top = the sticky header). */
.kiss-webar-assembly .kw-asm-anchor {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

/* Heading ----------------------------------------------------------------
   Optional, a band at the top of the stage so it stays in view while the
   stage is pinned. By default it fades in when the lift is built (the
   assembly is the reveal; the heading introduces the Showcase). Its space is
   kept while hidden so the model never moves when it appears — the Showcase
   hand-off depends on the viewer keeping its exact box. It's a real heading
   tag, so the theme's heading style applies; the widget's Style → Heading
   controls refine it. */
.kiss-webar-assembly .kw-asm-head {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	margin: 0 !important;
	padding: 14px clamp(16px, 4vw, 48px) 6px;
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.kiss-webar-assembly.kw-asm-showcased .kw-asm-head,
.kiss-webar-assembly.kw-asm-built .kw-asm-head,
.kiss-webar-assembly.kw-asm-head-always .kw-asm-head,
.kiss-webar-assembly.kw-asm-static .kw-asm-head {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* The band holds the heading, an optional subtitle, and the buttons. */
.kiss-webar-assembly .kw-asm-head .kw-asm-heading {
	margin: 0 !important;
}
.kiss-webar-assembly .kw-asm-sub {
	margin: 6px 0 0 !important;
	font-size: 15px;
	line-height: 1.4;
	opacity: 0.85;
}

/* Play / Replay, under the heading. Their space is part of the band from
   the start (so nothing shifts), but they only show once the lift is the
   3D Showcase. Two looks: the site's own buttons (kw-asm-btn--theme plus
   its button classes; the default) or the plugin's pill. The widget's
   Style → Buttons overrides either. */
.kiss-webar-assembly .kw-asm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.kiss-webar-assembly.kw-asm-showcased .kw-asm-actions {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease;
}
.kiss-webar-assembly .kw-asm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	white-space: nowrap;
	cursor: pointer;
}
.kiss-webar-assembly .kw-asm-btn:disabled {
	cursor: default;
}
/* Your theme's buttons: Elementor's are <a> links, but these are <button>s,
   and Hello Elementor (like many themes) styles every <button> with a 1px
   #c36 border. Taken off at low specificity (:where), so the kit's own
   button border (.elementor-kit-N .elementor-button) still wins if it has
   one. */
:where(.kiss-webar-assembly) .kw-asm-btn--theme {
	border: 0;
}
/* The pill: explicit colors so a theme's button reset can't repaint them. */
.kiss-webar-assembly .kw-asm-btn:not(.kw-asm-btn--theme) {
	appearance: none;
	background: var(--kw-asm-btn-bg, var(--kw-asm-accent, #ffcc33)) !important;
	color: var(--kw-asm-btn-fg, #1d232b) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 11px 20px !important;
	font-weight: 800;
	font-size: 12.5px;
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.kiss-webar-assembly .kw-asm-btn:not(.kw-asm-btn--theme):hover,
.kiss-webar-assembly .kw-asm-btn:not(.kw-asm-btn--theme):focus {
	filter: brightness(0.95);
}
.kiss-webar-assembly .kw-asm-btn:not(.kw-asm-btn--theme):disabled {
	filter: none;
}
.kiss-webar-assembly .kw-asm-btn-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}
.kiss-webar-assembly .kw-asm-btn.is-playing .kw-asm-btn-dot {
	animation: kw-asm-btn-pulse 1s ease-in-out infinite;
}
@keyframes kw-asm-btn-pulse {
	50% { opacity: 0.3; }
}

/* Step card --------------------------------------------------------------- */

.kw-asm-card {
	position: absolute;
	left: clamp(16px, 4vw, 48px);
	top: 50%;
	transform: translateY(-50%);
	width: min(var(--kw-card-w, 360px), calc(100% - 32px));
	box-sizing: border-box;
	padding: 18px 20px 20px;
	border-radius: 10px;
	background: var(--kw-callout-bg, #1e232a);
	color: var(--kw-callout-fg, #ffffff);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	pointer-events: auto;
	z-index: 3;
	transition: opacity 0.25s ease;
}

.kw-asm-card.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.kw-asm-card.is-in {
	animation: kw-asm-card-in 0.35s ease both;
}

@keyframes kw-asm-card-in {
	from { opacity: 0; transform: translateY(calc(-50% + 10px)); }
	to   { opacity: 1; transform: translateY(-50%); }
}

.kw-asm-kicker {
	margin: 0 0 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--kw-asm-accent, #ffcc33) !important;
	line-height: 1.3 !important;
}

/* Type sizes without !important so the widget's Style → Step card typography
   can set them; the title is a div (not a heading tag), so theme heading rules
   never reach it anyway. Colors stay forced — legibility on the card. */
.kiss-webar-assembly .kw-asm-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--kw-callout-fg, #ffffff) !important;
	text-transform: none;
	letter-spacing: normal;
}

.kiss-webar-assembly .kw-asm-body {
	margin: 8px 0 0 !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--kw-callout-fg, #ffffff) !important;
	opacity: 0.88;
}

.kiss-webar-assembly .kw-asm-body > *:first-child { margin-top: 0 !important; }
.kiss-webar-assembly .kw-asm-body > *:last-child { margin-bottom: 0 !important; }
.kiss-webar-assembly .kw-asm-body p,
.kiss-webar-assembly .kw-asm-body ul,
.kiss-webar-assembly .kw-asm-body ol { margin: 0 0 8px !important; color: inherit !important; }
.kiss-webar-assembly .kw-asm-body ul,
.kiss-webar-assembly .kw-asm-body ol { padding-left: 1.2em !important; }
.kiss-webar-assembly .kw-asm-body a { color: inherit !important; text-decoration: underline !important; }

/* Spec tags under the card text. Outlined in the text color so they read on
   any card background the site picks. */
.kiss-webar-assembly .kw-asm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
}

.kiss-webar-assembly .kw-asm-chip {
	display: inline-block;
	margin: 0 !important;
	padding: 3px 9px !important;
	border: 1px solid rgba(128, 128, 128, 0.55);
	border-color: color-mix(in srgb, currentColor 38%, transparent);
	border-radius: 999px;
	background: transparent !important;
	color: inherit !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	white-space: nowrap;
}

/* Marker on the part the current step installed -------------------------- */

.kw-asm-dot {
	width: var(--kw-asm-dot-size, 18px);
	height: var(--kw-asm-dot-size, 18px);
	border-radius: 50%;
	background: var(--kw-asm-accent, #ffcc33);
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.kw-asm-dot.is-on {
	opacity: 1;
	transform: scale(1);
	animation: kw-asm-pulse 1.8s ease-out 0.3s infinite;
}

@keyframes kw-asm-pulse {
	0%   { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 0 var(--kw-asm-accent, #ffcc33); }
	70%  { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 12px rgba(255, 204, 51, 0); }
	100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 204, 51, 0); }
}

/* "Scroll to see…" hint, only at the very start --------------------------- */

.kw-asm-hint {
	position: absolute;
	left: 50%;
	bottom: 92px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: max-content;
	max-width: calc(100% - 32px);
	text-align: center;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.3s ease;
}

/* The default look: a dark translucent pill. Shortcode colors arrive as
   --kw-asm-hint-bg/-fg; the Elementor widget's Style → Scroll hint sets the
   properties directly (and wins). */
.kw-asm-hint:not(.kw-asm-hint--button) {
	padding: 8px 14px;
	border-radius: 999px;
	background-color: var(--kw-asm-hint-bg, rgba(20, 24, 30, 0.72));
	color: var(--kw-asm-hint-fg, #ffffff);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* "Your button style": the site's button class (.elementor-button /
   .wp-element-button) supplies the colors, type, padding and radius. Keep our
   layout — .elementor-button is inline-block, which would put the arrow beside
   the text — and its transitions off the position. */
.kiss-webar-assembly .kw-asm-hint.kw-asm-hint--button {
	display: flex !important;
	cursor: default;
	transition: opacity 0.3s ease;
}

.kw-asm-hint.is-hidden { opacity: 0; }

.kw-asm-hint-arrow {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	animation: kw-asm-nudge 1.4s ease-in-out infinite;
}

@keyframes kw-asm-nudge {
	0%, 100% { transform: translateY(-2px) rotate(45deg); }
	50%      { transform: translateY(3px) rotate(45deg); }
}

/* Step rail ---------------------------------------------------------------- */

/* A soft backdrop behind the rail keeps its labels readable over the model
   (Settings → Scroll Assembly → Rail backdrop; opacity 0 = none). */
.kw-asm-rail {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	width: min(760px, calc(100% - 32px));
	z-index: 3;
	box-sizing: border-box;
	padding: 6px 0 2px;
	border-radius: 14px;
	background: var(--kw-asm-rail-bg, rgba(255, 255, 255, 0.85));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.kw-asm-rail-list {
	display: grid;
	grid-template-columns: repeat(var(--kw-asm-n, 5), minmax(0, 1fr));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.kw-asm-rail-item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	min-width: 0;
}

.kw-asm-rail-item::before,
.kw-asm-rail-item::marker { content: none !important; }

/* The line runs between the first and last dot centers. */
.kw-asm-rail-line {
	position: absolute;
	top: 19px; /* the dot centers: 6px rail padding + 6px button padding + 7px */
	left: calc(50% / var(--kw-asm-n, 5));
	right: calc(50% / var(--kw-asm-n, 5));
	height: 2px;
	background: rgba(20, 24, 30, 0.16);
}

.kw-asm-rail-fill {
	height: 100%;
	background: var(--kw-asm-accent, #ffcc33);
	transform-origin: left center;
	transform: scaleX(0);
}

.kiss-webar-assembly button.kw-asm-rail-btn,
.kiss-webar-assembly button.kw-asm-rail-btn:hover,
.kiss-webar-assembly button.kw-asm-rail-btn:focus,
.kiss-webar-assembly button.kw-asm-rail-btn:active {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 6px 2px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	color: inherit !important;
	font: inherit;
	text-transform: none !important;
	cursor: pointer;
}

.kw-asm-rail-dot {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid rgba(20, 24, 30, 0.35);
	box-sizing: border-box;
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.kw-asm-rail-btn.is-done .kw-asm-rail-dot {
	background: var(--kw-asm-accent, #ffcc33);
	border-color: var(--kw-asm-accent, #ffcc33);
}

.kw-asm-rail-btn.is-active .kw-asm-rail-dot {
	background: var(--kw-asm-accent, #ffcc33);
	border-color: #ffffff;
	transform: scale(1.35);
	box-shadow: 0 0 0 2px var(--kw-asm-accent, #ffcc33);
}

.kw-asm-rail-btn:focus-visible .kw-asm-rail-dot {
	outline: 2px solid var(--kw-asm-accent, #ffcc33);
	outline-offset: 3px;
}

.kw-asm-rail-label {
	/* Up to two lines, centered under the dot — "Head units, motors and
	   cables" must read in full, not as "HEAD UNITS, MOTO…". */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-width: 100%;
	overflow: hidden;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--kw-asm-rail-fg, #1d232b);
	opacity: 0.75;
}

.kw-asm-rail-btn.is-active .kw-asm-rail-label {
	opacity: 1;
}

/* Wide screens: the card gets its own column on the left and the model fills
   the rest, so arriving parts never pass behind the card. */
@media (min-width: 1024px) {
	/* Not in the phone layout (a tall window this wide gets that one). */
	:where(.kiss-webar-assembly:not(.kw-asm-compact)) .kw-asm-stage > model-viewer.kw-asm-mv {
		position: absolute;
		top: var(--kw-asm-head, 0px);
		bottom: 0;
		margin-top: 0;
		left: min(420px, 34%);
		right: 0;
		width: auto;
		height: auto;
	}
	:where(.kiss-webar-assembly:not(.kw-asm-compact)) .kw-asm-card {
		width: min(var(--kw-card-w, 360px), calc(34% - 2 * clamp(16px, 4vw, 48px)));
	}
	:where(.kiss-webar-assembly:not(.kw-asm-compact)) .kw-asm-hint {
		left: calc(min(420px, 34%) + (100% - min(420px, 34%)) / 2);
	}
	/* Files that frame their own camera shots were composed full-width with
	   the card over the left side, so give the model the whole stage. */
	.kiss-webar-assembly.kw-asm-shots:where(:not(.kw-asm-compact)) .kw-asm-stage > model-viewer.kw-asm-mv {
		left: 0;
	}
	.kiss-webar-assembly.kw-asm-shots:where(:not(.kw-asm-compact)) .kw-asm-card {
		width: min(var(--kw-card-w, 360px), 40%);
	}
	.kiss-webar-assembly.kw-asm-shots:where(:not(.kw-asm-compact)) .kw-asm-hint {
		left: 50%;
	}
	/* Reduced motion has no card, so no column: the model takes the width. */
	.kiss-webar-assembly.kw-asm-static:where(:not(.kw-asm-compact)) .kw-asm-stage > model-viewer.kw-asm-mv {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin-top: var(--kw-asm-head, 0px);
		height: calc(100% - var(--kw-asm-head, 0px));
	}
}

/* The phone layout: phones, and tablets in portrait / tall windows (the
   runtime sets .kw-asm-compact, see compactLayout()). Card along the bottom
   or in the heading band, never beside the marker. :where() keeps each rule
   as specific as it was inside the old max-width: 768px query. */
@keyframes kw-asm-card-in-m {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
:where(.kiss-webar-assembly.kw-asm-compact) .kw-asm-card {
	left: 12px;
	right: 12px;
	top: auto;
	bottom: 64px;
	width: auto;
	/* A card width set for wide screens (the widget's Style → Cards) still
	   has to fit the screen. */
	max-width: calc(100% - 24px);
	transform: none;
	padding: 14px 16px 16px;
}
:where(.kiss-webar-assembly.kw-asm-compact) .kw-asm-card.is-in { animation-name: kw-asm-card-in-m; }
/* The model stays above the tallest card (measured in script) rather
   than behind it. */
:where(.kiss-webar-assembly.kw-asm-compact) .kw-asm-stage > model-viewer.kw-asm-mv {
	position: absolute;
	top: var(--kw-asm-head, 0px);
	margin-top: 0;
	left: 0;
	right: 0;
	bottom: var(--kw-asm-reserve, 0px);
	width: auto;
	height: auto;
}
:where(.kiss-webar-assembly.kw-asm-compact) .kw-asm-rail { bottom: 14px; }
:where(.kiss-webar-assembly.kw-asm-compact) .kw-asm-hint { bottom: 64px; }
/* With a heading band, the card sits in it (the band is sized for the
   tallest card in script); the heading takes the band over once the
   lift is built, so the card goes then. (.kw-asm-card-top is only set in
   the phone layout.) */
.kiss-webar-assembly.kw-asm-card-top .kw-asm-card {
	top: 8px;
	bottom: auto;
}
.kiss-webar-assembly.kw-asm-card-top.kw-asm-showcased .kw-asm-card,
.kiss-webar-assembly.kw-asm-card-top.kw-asm-built .kw-asm-card {
	opacity: 0 !important;
	visibility: hidden !important;
}
/* A tablet's card: centered, not a full-width banner. */
@media (min-width: 769px) {
	:where(.kiss-webar-assembly.kw-asm-compact) .kw-asm-card {
		max-width: min(640px, calc(100% - 24px));
		margin-left: auto;
		margin-right: auto;
	}
}
/* Phones only: rail as dots (the card names the step), and the "Step card
   on phones" choice (Compact = title + tags, Title only). */
@media (max-width: 768px) {
	.kw-asm-rail-label { display: none; }
	.kiss-webar-assembly.kw-card-m-compact .kw-asm-body,
	.kiss-webar-assembly.kw-card-m-title .kw-asm-body,
	.kiss-webar-assembly.kw-card-m-title .kw-asm-chips {
		display: none !important;
	}
}

/* Until the stage pins, its bottom can be below the fold, and the scroll hint
   with it. The hint is position: fixed at the bottom of the screen until the
   pin (kw-asm-float): same bottom offset, and --kw-asm-fx is its own center,
   so nothing moves at the switch. The rail and cards arrive with the section. */
.kiss-webar-assembly.kw-asm-float .kw-asm-hint {
	position: fixed;
	left: var(--kw-asm-fx, 50%);
}

/* Attached to a KISS LocoMotion step section ------------------------------
   LocoMotion owns the section (pin, copy, rail, phone tap-through); the model
   renders inside its .kiss-loco-visual box. Our own element only carries the
   config, so it takes no space. LocoMotion's art stays up as the placeholder
   until the model is ready, then hides. */
.kiss-webar-assembly.kw-asm-attached {
	display: none !important;
}

.kiss-loco-visual.kw-asm-host > model-viewer.kw-asm-mv {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: transparent;
	/* Taps and sideways swipes belong to LocoMotion's step navigation, vertical
	   swipes to the page; model-viewer has no camera controls here anyway. */
	touch-action: pan-y;
	--poster-color: transparent;
	--progress-bar-color: transparent;
}

.kiss-loco-visual.kw-asm-host-ready > .kiss-loco-layer,
.kiss-loco-visual.kw-asm-host-ready > .kiss-loco-poster,
.kiss-loco-visual.kw-asm-host-ready > .kiss-loco-canvas,
.kiss-loco-visual.kw-asm-host-ready > .kiss-loco-video {
	visibility: hidden !important;
}

/* Finish: the 3D Showcase the finished lift becomes ------------------------
   The real showcase (its own markup and CSS), laid exactly over the assembly
   viewer — box set in script from the viewer's rect — and hidden until the
   build completes. Anything the showcase puts BELOW its canvas (the control
   bar on phones) flows into the space under the viewer that the step card
   used. */
.kiss-webar-assembly .kiss-webar-showcase.kw-asm-twin {
	position: absolute;
	left: var(--kw-twin-l, 0px);
	top: var(--kw-twin-t, 0px);
	width: var(--kw-twin-w, 100%);
	margin: 0;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.kiss-webar-assembly .kiss-webar-showcase.kw-asm-twin.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease;
}

.kiss-webar-assembly .kw-asm-twin .kiss-webar-sc-stage {
	height: var(--kw-twin-h, 100%);
}

/* A scroll-to-zoom hint (off here unless the site opts in) goes the moment
   the showcase starts handing back to the build, instead of fading out with
   it: a hint visible for that split second reads as a glitch. */
.kiss-webar-assembly .kw-asm-twin:not(.is-active) .kiss-webar-sc-wheelhint {
	display: none;
}

/* The showcase writes its own height inline (pickHeight); here the viewer
   must match the assembly's exactly. */
.kiss-webar-assembly .kw-asm-twin .kiss-webar-sc-stage > model-viewer {
	height: 100% !important;
	min-height: 0 !important;
}

/* While the showcase is up, the assembly's own furniture steps aside. */
.kiss-webar-assembly.kw-asm-showcased .kw-asm-card,
.kiss-webar-assembly.kw-asm-showcased .kw-asm-rail,
.kiss-webar-assembly.kw-asm-showcased .kw-asm-hint,
.kiss-webar-assembly.kw-asm-showcased .kw-asm-dot {
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* Reduced motion: no pin, no scrub — the finished model and the steps listed. */
.kiss-webar-assembly.kw-asm-static .kw-asm-stage {
	position: relative;
}

.kw-asm-static-list {
	margin: 16px 0 0 !important;
	padding: 0 0 0 1.4em !important;
}

.kw-asm-static-item {
	margin: 0 0 14px !important;
}

.kiss-webar-assembly.kw-asm-static .kw-asm-title,
.kiss-webar-assembly.kw-asm-static .kw-asm-body {
	color: inherit !important;
}

.kiss-webar-assembly.kw-asm-static .kw-asm-chips {
	margin-top: 6px !important;
}

@media (prefers-reduced-motion: reduce) {
	.kw-asm-card.is-in,
	.kw-asm-dot.is-on,
	.kw-asm-hint-arrow { animation: none; }
}

/* Card accent + card beside the marker (1.15.0) ------------------------------
   Accent: an optional colored bar across the top of the card (Settings →
   Callouts & cards). Beside the marker: on wide screens the runtime places
   the card next to the step's marker each frame (inline left/top), the way
   the client's prototype did, so the leader line stays short. */
.kw-asm-card {
	border-top: var(--kw-card-accent-w, 0px) solid var(--kw-card-accent, transparent);
}
.kiss-webar-assembly.kw-asm-card-marker .kw-asm-card {
	right: auto;
	transform: none;
}
.kiss-webar-assembly.kw-asm-card-marker .kw-asm-card.is-in {
	animation-name: kw-asm-card-in-mk;
}
@keyframes kw-asm-card-in-mk {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kiss-webar-assembly .kw-asm-btn.is-playing .kw-asm-btn-dot { animation: none; }
}

/* Step rail looks (1.16.1): "clear" drops the backdrop panel for a plain
   background; "dots" also drops the labels. Settings → Scroll Assembly →
   Rail backdrop → Look, or the widget's Style → Step rail → Look. */
.kiss-webar-assembly.kw-asm-rail-clear .kw-asm-rail,
.kiss-webar-assembly.kw-asm-rail-dots .kw-asm-rail {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
.kiss-webar-assembly.kw-asm-rail-dots .kw-asm-rail-label {
	display: none;
}
.kiss-webar-assembly.kw-asm-rail-dots .kw-asm-rail {
	width: min(420px, calc(100% - 32px));
	padding-bottom: 6px;
}