/**
 * Roomvo custom visualizer — Phase 1.
 *
 * Colours consume the live Elementor kit vars, with the brand sheet hexes as
 * fallbacks. Verified 2026-08-10 that the kit and the brand sheet agree:
 *   Navy       #0A2E4D  --e-global-color-primary    pill / panel bg, disc ring, pulse
 *   Cream      #EEEDE4  --e-global-color-text       disc, label text, ring
 *   Terracotta #CF5F39  --e-global-color-secondary  primary action, session dot
 *   Slate      #4C5563  --e-global-color-21cc6e8    secondary button
 *   Warm gray  #AAA2A2  --e-global-color-accent     muted / metadata text
 *   White      #FFFFFF  --e-global-color-564af60    icon fills
 *
 * Type is Archivo 500 — deliberately NOT the kit's "accent" typography, which
 * is 800/uppercase and belongs to site buttons. Galins is display-only.
 *
 * THREE RENDERINGS, one component, driven by [data-state] on the root:
 *   pill     collapsed. Label + disc. Label and dot vary on .has-session.
 *   intro    expanded, no session. Three steps + Get Started.
 *   session  expanded, session saved. Progress + Continue / Start over.
 *
 * The disc is a single button throughout: it carries the artwork when collapsed
 * and an X when expanded, and it is what minimises the panel.
 *
 * hello-elementor's global button reset paints EVERY button pink on :hover AND
 * :focus, so every button here states its own interaction colours. Silence
 * inherits #c36.
 */

:root {
	--ugw-rv-navy: var( --e-global-color-primary, #0a2e4d );
	--ugw-rv-cream: var( --e-global-color-text, #eeede4 );
	--ugw-rv-terracotta: var( --e-global-color-secondary, #cf5f39 );
	--ugw-rv-slate: var( --e-global-color-21cc6e8, #4c5563 );
	--ugw-rv-gray: var( --e-global-color-accent, #aaa2a2 );
	--ugw-rv-white: var( --e-global-color-564af60, #ffffff );

	--ugw-rv-shadow: 0 8px 24px rgba( 10, 46, 77, 0.22 );

	/* Keeps the navy surfaces legible over dark or busy backgrounds. A spread
	 * box-shadow rather than a border so it adds no layout box, and rather than
	 * an outline so it cannot collide with the focus-visible outline. */
	--ugw-rv-ring: 0 0 0 2px var( --ugw-rv-cream );

	--ugw-rv-font: var( --e-global-typography-text-font-family, "Archivo" ), sans-serif;

	/* Overwritten by JS with the measured header bottom edge. */
	--ugw-rv-top: 162px;

	--ugw-rv-z: 9000;
}

/* ===========================================================================
 * Launcher shell
 *
 * Geometry is driven by three numbers. The disc is deliberately much larger
 * than the pill is tall, so it reads as the component's anchor rather than as
 * an icon tucked inside a button.
 * ======================================================================== */

.ugw-rv-launcher {
	/* The disc is twice the pill's height: the pill reads as a caption hung off
	 * a large circle rather than as a button with an icon in it. */
	--ugw-rv-disc: 80px;
	--ugw-rv-pill-h: 52px;

	/* Half the disc: it is centred on the pill's right edge and on the panel's
	 * bottom-right corner, so this is how far it reaches outside either one. */
	--ugw-rv-overhang: 40px;

	/* Session dot. Was 16px; 10% up, rounded. */
	--ugw-rv-badge: 18px;

	/* Clearance from the viewport for the lowest and right-most thing painted. */
	--ugw-rv-gap: 20px;

	position: fixed;

	/* Same on both, so the disc does not slide sideways when the panel opens. */
	right: calc( var( --ugw-rv-gap ) + var( --ugw-rv-overhang ) );

	z-index: calc( var( --ugw-rv-z ) + 100 );

	font-family: var( --ugw-rv-font );
	font-weight: 500;
	text-transform: none;
}

.ugw-rv-launcher[hidden] {
	display: none;
}

/* Collapsed: the disc is centred on the pill, so it overhangs by half their
 * height difference, and the pulse ring reaches ~14px past the disc. Both
 * come off the viewport gap. */
.ugw-rv-launcher[data-state="pill"] {
	bottom: calc(
		var( --ugw-rv-gap )
		+ ( var( --ugw-rv-disc ) - var( --ugw-rv-pill-h ) ) / 2
		+ 14px
	);
}

/* Expanded: the disc hangs a full half-disc below the panel. */
.ugw-rv-launcher[data-state="intro"],
.ugw-rv-launcher[data-state="session"] {
	bottom: calc( var( --ugw-rv-gap ) + var( --ugw-rv-overhang ) );
}

/* ===========================================================================
 * Collapsed pill
 * ======================================================================== */

/* Scoped by the root class throughout this file, not for tidiness but for
 * specificity: Elementor's kit sets `.elementor-kit-156 button { border-radius:
 * 22px }` at (0,1,1), which outranks a lone class and was squaring off the
 * disc. Two classes (0,2,0) wins. */
.ugw-rv-launcher .ugw-rv-launcher__pill {
	display: inline-flex;
	align-items: center;

	min-height: var( --ugw-rv-pill-h );
	max-width: 218px;
	/* Right padding clears the half-disc that sits over the pill. */
	padding: 8px calc( var( --ugw-rv-overhang ) + 14px ) 8px 22px;
	margin: 0;
	border: 0;
	/* Matches the site's own button radius, which is what has been rendering. */
	border-radius: 22px;

	background-color: var( --ugw-rv-navy );
	color: var( --ugw-rv-cream );

	font: inherit;
	font-size: 1rem;
	line-height: 1.25;
	text-align: left;
	/* The theme reset sets nowrap, which would run the label under the disc. */
	white-space: normal;

	cursor: pointer;
	box-shadow: var( --ugw-rv-ring ), var( --ugw-rv-shadow );
}

/* :focus repaints the RESTING look. Its only job is defeating the theme
 * reset's pink; if it borrowed the hover colours the hover state would look
 * stuck after a click. Ordered BEFORE :hover so hover still wins while both
 * apply. Keyboard focus is shown by :focus-visible, not by these.
 */
.ugw-rv-launcher .ugw-rv-launcher__pill:focus {
	background-color: var( --ugw-rv-navy );
	color: var( --ugw-rv-cream );
}

/* Hover tints for the two elements that float over the page. These are FLAT,
 * OPAQUE colours, not `opacity` — real transparency would let the page show
 * through the disc and the pill. Each is the colour the element resolves to at
 * 90% opacity, so it looks identical without being see-through. color-mix keeps
 * the live kit vars in play; the plain hex above it is the fallback.
 *
 *   disc  cream 90% over navy  = #d7dad5
 *   pill  navy  90% over cream = #21415c
 *
 * Note navy at 90% over navy is navy, so the pill is composited over the cream
 * page instead — that is what `opacity: 0.9` on the pill actually looks like.
 */
.ugw-rv-launcher .ugw-rv-launcher__pill:hover {
	background-color: #21415c;
	background-color: color-mix( in srgb, var( --ugw-rv-navy ) 90%, var( --ugw-rv-cream ) );
	color: var( --ugw-rv-cream );
}

.ugw-rv-launcher__pill:focus-visible {
	outline: 3px solid var( --ugw-rv-terracotta );
	outline-offset: 3px;
}

.ugw-rv-launcher[data-state="intro"] .ugw-rv-launcher__pill,
.ugw-rv-launcher[data-state="session"] .ugw-rv-launcher__pill {
	display: none;
}

/* One label or the other, never both. Kept as markup rather than set from JS
 * so the strings stay translatable. */
.ugw-rv-launcher__label--new,
.ugw-rv-launcher__label--resume {
	display: block;
}

.ugw-rv-launcher .ugw-rv-launcher__label--resume,
.ugw-rv-launcher.has-session .ugw-rv-launcher__label--new {
	display: none;
}

.ugw-rv-launcher.has-session .ugw-rv-launcher__label--resume {
	display: block;
}

/* ===========================================================================
 * The disc — artwork when collapsed, X when expanded
 * ======================================================================== */

/* Two classes so the kit's 22px button radius cannot square this off. */
.ugw-rv-launcher .ugw-rv-launcher__disc {
	position: absolute;
	display: grid;
	place-items: center;

	box-sizing: border-box;
	width: var( --ugw-rv-disc );
	height: var( --ugw-rv-disc );
	padding: 0;
	margin: 0;
	/* A navy outline rather than a drop shadow: it reads cleanly over photos
	 * and busy backgrounds, where a soft shadow disappears. */
	border: 2px solid var( --ugw-rv-navy );
	border-radius: 50%;

	background-color: var( --ugw-rv-cream );

	/* Drives the artwork's currentColor fills and the X stroke. */
	color: var( --ugw-rv-navy );

	cursor: pointer;
}

.ugw-rv-launcher .ugw-rv-launcher__disc:focus {
	background-color: var( --ugw-rv-cream );
	color: var( --ugw-rv-navy );
}

/* Hovering the pill lights the disc too — collapsed, they read as one control.
 *
 * The second selector does that via the sibling combinator, which is why the
 * pill sits before the disc in the markup. Three properties of this are load
 * bearing:
 *   - it is scoped to [data-state="pill"], so hovering the expanded panel
 *     leaves the disc alone;
 *   - the pill is display:none while expanded, so it cannot match there anyway;
 *   - it does NOT work in reverse. CSS has no previous-sibling combinator, so
 *     hovering the disc cannot reach back and light the pill. That asymmetry is
 *     wanted, not a limitation worked around.
 */
.ugw-rv-launcher .ugw-rv-launcher__disc:hover,
.ugw-rv-launcher[data-state="pill"] .ugw-rv-launcher__pill:hover ~ .ugw-rv-launcher__disc {
	background-color: #d7dad5;
	background-color: color-mix( in srgb, var( --ugw-rv-cream ) 90%, var( --ugw-rv-navy ) );
	color: var( --ugw-rv-navy );
}

.ugw-rv-launcher__disc:focus-visible {
	outline: 3px solid var( --ugw-rv-terracotta );
	outline-offset: 3px;
}

/* Collapsed: centred on the pill's right edge, both axes. */
.ugw-rv-launcher[data-state="pill"] .ugw-rv-launcher__disc {
	top: 50%;
	right: calc( -1 * var( --ugw-rv-overhang ) );
	transform: translateY( -50% );
}

/* Expanded: centred on the panel's bottom-right corner, half in / half out. */
.ugw-rv-launcher[data-state="intro"] .ugw-rv-launcher__disc,
.ugw-rv-launcher[data-state="session"] .ugw-rv-launcher__disc {
	right: 0;
	bottom: 0;
	transform: translate( 50%, 50% );
}

.ugw-rv-launcher__glyph {
	display: grid;
	place-items: center;
	pointer-events: none;
}

.ugw-rv-launcher__glyph--icon > svg {
	/* Artwork is 41:60 — size by height and let width follow. */
	height: 48px;
	width: auto;
}

/* The X is terracotta rather than inheriting the disc's navy. It sets its own
 * colour so the disc's hover and focus rules cannot repaint it. */
.ugw-rv-launcher__glyph--close {
	color: var( --ugw-rv-terracotta );
}

/* Swap the glyph with the state. */
.ugw-rv-launcher[data-state="pill"] .ugw-rv-launcher__glyph--close,
.ugw-rv-launcher[data-state="intro"] .ugw-rv-launcher__glyph--icon,
.ugw-rv-launcher[data-state="session"] .ugw-rv-launcher__glyph--icon {
	display: none;
}

/* ===========================================================================
 * Pulse ring — collapsed, no session. Runs continuously for as long as the
 * shopper is on the page, and is suppressed entirely under reduced-motion.
 * ======================================================================== */

/* Sits OUTSIDE the disc's navy ring and ripples outward from there. The
 * negative inset is measured from the padding box, so -6px clears the 2px
 * border and leaves a 4px gap beyond the disc's outer edge. */
.ugw-rv-launcher__pulse {
	display: none;
	position: absolute;
	inset: -6px;
	border: 2px solid var( --ugw-rv-navy );
	border-radius: 50%;
	pointer-events: none;
}

.ugw-rv-launcher[data-state="pill"]:not( .has-session ) .ugw-rv-launcher__pulse {
	display: block;
	animation: ugw-rv-pulse 2.1s ease-out infinite;
}

@keyframes ugw-rv-pulse {

	0% {
		opacity: 0.9;
		transform: scale( 1 );
	}

	70% {
		opacity: 0;
		transform: scale( 1.22 );
	}

	100% {
		opacity: 0;
		transform: scale( 1.22 );
	}
}

/* ===========================================================================
 * Session dot — collapsed with a saved session
 * ======================================================================== */

/* Centred ON the disc's ring at the 45-degree mark, so it straddles the edge:
 * half inside the circle, half outside.
 *
 * At 45 degrees the ring sits R x cos45 from the centre on each axis, so the
 * dot's centre is R - R x 0.7071 = R x 0.29289 in from the disc's edge. R is
 * half the disc, giving disc x 0.146447. Subtract half the dot to get its top
 * corner, then another 2px because an absolutely positioned child is offset
 * from the padding box while that figure is measured from the border box. */
.ugw-rv-launcher__badge {
	display: none;
	position: absolute;
	top: calc( var( --ugw-rv-disc ) * 0.146447 - var( --ugw-rv-badge ) / 2 - 2px );
	right: calc( var( --ugw-rv-disc ) * 0.146447 - var( --ugw-rv-badge ) / 2 - 2px );

	box-sizing: border-box;
	width: var( --ugw-rv-badge );
	height: var( --ugw-rv-badge );
	border: 2px solid var( --ugw-rv-cream );
	border-radius: 50%;

	background-color: var( --ugw-rv-terracotta );
	pointer-events: none;
}

.ugw-rv-launcher[data-state="pill"].has-session .ugw-rv-launcher__badge {
	display: block;
}

/* ===========================================================================
 * Expanded panel
 * ======================================================================== */

.ugw-rv-launcher__panel {
	display: none;
	position: relative;

	width: 320px;
	/* Panel + its half-disc overhang + gap must clear the viewport. */
	max-width: calc( 100vw - 80px );
	/* Bottom padding clears the half-disc that overlaps this corner (46px), so
	 * the actions can run the full content width without sliding under it. */
	padding: 22px 22px 46px;
	border-radius: 12px;

	background-color: var( --ugw-rv-navy );
	color: var( --ugw-rv-cream );

	box-shadow: var( --ugw-rv-ring ), var( --ugw-rv-shadow );
}

.ugw-rv-launcher[data-state="intro"] .ugw-rv-launcher__panel,
.ugw-rv-launcher[data-state="session"] .ugw-rv-launcher__panel {
	display: block;
}

.ugw-rv-launcher__section {
	display: none;
}

.ugw-rv-launcher[data-state="intro"] .ugw-rv-launcher__section--intro,
.ugw-rv-launcher[data-state="session"] .ugw-rv-launcher__section--session {
	display: block;
}

/* --- Three steps --- */

.ugw-rv-launcher__steps {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

/* align-items: center is the point — each icon sits on the vertical centre of
 * the text it labels, whether that text runs to one line or two. */
.ugw-rv-launcher__step {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	align-items: center;
}

.ugw-rv-launcher__step + .ugw-rv-launcher__step {
	margin-top: 16px;
}

.ugw-rv-launcher__step-icon {
	display: grid;
	place-items: center;

	/* Drives the artwork's currentColor line work. */
	color: var( --ugw-rv-cream );

	/* Step 1's artwork has filled areas that mask the arm behind the phone.
	 * Painting them the panel colour keeps that occlusion working while leaving
	 * the icon reading as line work rather than a light blob. */
	--ugw-rv-icon-mask: var( --ugw-rv-navy );
}

/* The three icons have different aspect ratios, so size them by height and let
 * the fixed grid column do the centring. */
.ugw-rv-launcher__step-icon > svg {
	height: 32px;
	width: auto;
}

.ugw-rv-launcher__step-text {
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* --- Saved session --- */

.ugw-rv-launcher__meta {
	margin: 0 0 4px;
	color: var( --ugw-rv-gray );
	font-size: 0.8125rem;
	line-height: 1.3;
}

/* Names are long and the panel is only 320px. */
.ugw-rv-launcher__product {
	overflow: hidden;
	margin: 0 0 18px;
	color: var( --ugw-rv-cream );
	font-size: 1.0625rem;
	line-height: 1.35;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ugw-rv-launcher__product.is-placeholder {
	color: var( --ugw-rv-gray );
	font-style: italic;
}

/* --- Actions --- */

.ugw-rv-launcher__actions {
	display: flex;
	gap: 8px;
}

.ugw-rv-launcher .ugw-rv-btn,
.ugw-rv .ugw-rv-btn {
	flex: 1 1 auto;
	padding: 12px 14px;
	border: 2px solid transparent;
	/* Explicit so the kit's button radius is a choice, not an accident. */
	border-radius: 22px;

	font-family: var( --ugw-rv-font );
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
	white-space: nowrap;

	cursor: pointer;
}

/* Primary (Get Started / Continue): terracotta. Hover is a straight 0.9
 * opacity — the colours are restated on :hover and :focus purely to keep the
 * theme reset's pink out, not to change the look. */
.ugw-rv-launcher .ugw-rv-btn--primary,
.ugw-rv-launcher .ugw-rv-btn--primary:focus,
.ugw-rv .ugw-rv-btn--primary,
.ugw-rv .ugw-rv-btn--primary:focus {
	border-color: transparent;
	background-color: var( --ugw-rv-terracotta );
	color: var( --ugw-rv-white );
}

.ugw-rv-launcher .ugw-rv-btn--primary:hover,
.ugw-rv .ugw-rv-btn--primary:hover {
	border-color: transparent;
	background-color: var( --ugw-rv-terracotta );
	color: var( --ugw-rv-white );
	opacity: 0.9;
}

/* Secondary (Start over): cream, terracotta outline, terracotta label.
 * Note for the record: terracotta on cream measures about 3.5:1, under the
 * 4.5:1 WCAG AA threshold for text at this size. Chosen deliberately. */
.ugw-rv-launcher .ugw-rv-btn--ghost,
.ugw-rv-launcher .ugw-rv-btn--ghost:focus {
	border-color: var( --ugw-rv-terracotta );
	background-color: var( --ugw-rv-cream );
	color: var( --ugw-rv-terracotta );
}

.ugw-rv-launcher .ugw-rv-btn--ghost:hover {
	border-color: var( --ugw-rv-terracotta );
	background-color: var( --ugw-rv-cream );
	color: var( --ugw-rv-terracotta );
	opacity: 0.9;
}

.ugw-rv-btn:focus-visible {
	outline: 3px solid var( --ugw-rv-cream );
	outline-offset: 2px;
}

/* The launcher's job is done once the visualizer is up. */
.ugw-rv-open .ugw-rv-launcher {
	display: none;
}

/* ===========================================================================
 * Overlay — anchored below the header, never over it
 * ======================================================================== */

.ugw-rv {
	position: fixed;
	top: var( --ugw-rv-top );
	/* Opaque, so the band above the panel is a solid colour rather than page
	 * showing through. Cream by default — with no quote button there is nothing
	 * for the band to carry, so it reads as page rather than as header. */
	background-color: var( --ugw-rv-cream );
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var( --ugw-rv-z );
}

.ugw-rv[hidden] {
	display: none;
}

.ugw-rv__backdrop {
	position: absolute;
	inset: 0;
	/* Offset like the panel: otherwise this translucent navy tints the band. */
	top: var( --ugw-rv-strip );
	background-color: rgba( 10, 46, 77, 0.55 );
}

.ugw-rv__panel {
	position: absolute;
	inset: 0;
	top: var( --ugw-rv-strip );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var( --ugw-rv-cream );
}

.ugw-rv__panel:focus {
	outline: none;
}

/* Takes whatever height the bar leaves. min-height:0 is required or a flex item
 * refuses to shrink below its content and the iframe overflows the panel. */
.ugw-rv__frame {
	flex: 1 1 auto;
	min-height: 0;
}

.ugw-rv__frame,
.ugw-rv__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* With the button present the band continues the header, so it turns navy... */
.ugw-rv.has-quote {
	background-color: var( --ugw-rv-navy );
}

/* ...except where the cream phone tab carries on down into it. JS measures the
 * tab's real trapezoid and extends its slopes for the band's height; the
 * degenerate default hides this wherever there is no tab to continue. */
.ugw-rv.has-quote::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var( --ugw-rv-strip );
	background-color: var( --ugw-rv-cream );
	clip-path: var( --ugw-rv-tab-clip, polygon( 0 0, 0 0, 0 0 ) );
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Request a Quote
 *
 * Deliberately NOT over the iframe. Roomvo's top bar is unreachable (their DOM,
 * their origin) and floating on top of it covered their Menu and Change Room.
 * So the button sits outside the visualizer entirely:
 *
 *   >= 1025px   in the site header's empty band, centred on the page, level
 *               with the phone number. JS measures the phone element and puts
 *               its centre in --ugw-rv-quote-y, so it tracks the real layout
 *               rather than a guessed offset.
 *   <= 1024px   in a navy strip below the header, which pushes the visualizer
 *               down by --ugw-rv-strip.
 *
 * Fixed and translated by -50% on both axes, so `top` is simply where its
 * centre should land.
 * ------------------------------------------------------------------------ */

.ugw-rv {
	/* Navy band between the header and the visualizer.
	 * Desktop: breathing room only, so the header reads as slightly taller.
	 * Below 1025px: tall enough to hold the button itself. */
	--ugw-rv-strip: 9px;

}

.ugw-rv .ugw-rv-btn.ugw-rv__quote {
	position: fixed;
	left: 50%;
	/* Set on the overlay element by JS, for whichever breakpoint applies. */
	top: var( --ugw-rv-quote-y, 100px );
	transform: translate( -50%, -50% );
	z-index: 4;

	flex: 0 0 auto;
	max-width: calc( 100vw - 32px );
	padding: 11px 22px;
	font-size: 1rem;

	/* Inactive until a slab is chosen. */
	background-color: var( --ugw-rv-gray );
	color: var( --ugw-rv-navy );
}

/* The theme reset would paint this pink on hover even while disabled. */
.ugw-rv .ugw-rv-btn.ugw-rv__quote:hover,
.ugw-rv .ugw-rv-btn.ugw-rv__quote:focus {
	background-color: var( --ugw-rv-gray );
	color: var( --ugw-rv-navy );
}

.ugw-rv .ugw-rv-btn.ugw-rv__quote:disabled {
	cursor: default;
}

/* Live once a product is selected. */
.ugw-rv .ugw-rv-btn.ugw-rv__quote.is-ready,
.ugw-rv .ugw-rv-btn.ugw-rv__quote.is-ready:focus {
	background-color: var( --ugw-rv-terracotta );
	color: var( --ugw-rv-white );
}

.ugw-rv .ugw-rv-btn.ugw-rv__quote.is-ready:hover {
	background-color: var( --ugw-rv-terracotta );
	color: var( --ugw-rv-white );
	opacity: 0.9;
}

/* Not shown at all on the room picker — that screen has nothing to quote.
 * Needs stating explicitly: the theme reset's `button { display: inline-block }`
 * is an author rule and would otherwise beat the UA stylesheet's [hidden]. */
.ugw-rv .ugw-rv-btn.ugw-rv__quote[hidden] {
	display: none;
}

/* Below 1025px the button gets its own navy strip and the visualizer moves down
 * to make room. The overlay's own navy shows through as that strip. */
@media ( max-width: 1024px ) {

	.ugw-rv {
		--ugw-rv-strip: 64px;
	}

	/* On the room picker the band exists only to hold the button, so with no
	 * button it collapses rather than leaving a cream gap above the visualizer.
	 * Two classes, so it wins over the plain .ugw-rv sizes above and below. */
	.ugw-rv:not( .has-quote ) {
		--ugw-rv-strip: 0px;
	}
}

@media ( max-width: 600px ) {

	.ugw-rv {
		--ugw-rv-strip: 56px;
	}

	.ugw-rv .ugw-rv-btn.ugw-rv__quote {
		padding: 10px 16px;
		font-size: 0.875rem;
	}
}

/* Page scroll is parked while the visualizer is open, which is also what keeps
 * the measured header offset stable. */
.ugw-rv-open,
.ugw-rv-open body {
	overflow: hidden;
}

/* ===========================================================================
 * Small screens — the pill stays, at reduced scale
 * ======================================================================== */

@media ( max-width: 767px ) {

	.ugw-rv-launcher {
		--ugw-rv-disc: 66px;
		--ugw-rv-pill-h: 44px;
		--ugw-rv-overhang: 33px;
		--ugw-rv-badge: 16px;
		--ugw-rv-gap: 14px;
	}

	.ugw-rv-launcher .ugw-rv-launcher__pill {
		max-width: calc( 100vw - 96px );
		font-size: 0.9375rem;
	}

	.ugw-rv-launcher__glyph--icon > svg {
		height: 40px;
	}

	.ugw-rv-launcher__panel {
		max-width: calc( 100vw - 66px );
	}

}

@media ( prefers-reduced-motion: reduce ) {

	.ugw-rv-launcher[data-state="pill"]:not( .has-session ) .ugw-rv-launcher__pulse {
		animation: none;
		opacity: 0.5;
	}
}