/* View in Room storefront styles
 *
 * A self-contained design system for the visualiser. The modal owns its own
 * typography and colour so it looks consistent regardless of the host theme.
 * Tokens live on .vir-modal and .vir-launcher-wrap; --vir-accent is set inline
 * from the merchant's chosen colour.
 */

.vir-launcher-wrap,
.vir-modal {
	--vir-accent: #1d1d1d;
	--vir-ink: #191614;
	--vir-muted: #6d6a66;
	--vir-faint: #9c9893;
	--vir-line: rgba(24, 20, 18, .09);
	--vir-line-2: rgba(24, 20, 18, .16);
	--vir-surface: #ffffff;
	--vir-surface-2: #f7f5f2;
	--vir-surface-3: #efece7;
	--vir-radius: 16px;
	--vir-radius-sm: 11px;
	--vir-pill: 999px;
	--vir-shadow: 0 30px 90px -20px rgba(20, 16, 14, .45);
	--vir-shadow-sm: 0 2px 10px rgba(20, 16, 14, .1);
	--vir-ease: cubic-bezier(.32, .72, 0, 1);
	--vir-font: inherit;
}

/* ---------------------------------------------------------------- launcher */

.vir-launcher-wrap {
	margin: 16px 0;
	min-height: 46px; /* Reserve space: no layout shift when JS arrives. */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
}

/* Respect the hidden attribute. The display rules below would otherwise
   override the browser default and reveal the secondary control, the loading
   spinner, and the error notice that JS keeps hidden until they are needed
   (the secondary control appears only on AR-capable devices). */
.vir-launcher-wrap [hidden] {
	display: none !important;
}

.vir-launcher {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	border: 1.5px solid var(--vir-accent);
	background: var(--vir-accent);
	color: #fff;
	border-radius: var(--vir-pill);
	font: 600 15px/1.1 var(--vir-font);
	letter-spacing: .005em;
	text-transform: none;
	cursor: pointer;
	transition: transform .18s var(--vir-ease), box-shadow .18s var(--vir-ease), filter .18s var(--vir-ease);
	box-shadow: 0 1px 2px rgba(20, 16, 14, .12);
}

.vir-launcher:hover,
.vir-launcher:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -8px rgba(20, 16, 14, .5);
	filter: brightness(1.04);
}

/* Outline style variant, if the merchant prefers it. */
.vir-launcher-outline {
	background: #fff;
	color: var(--vir-accent);
	box-shadow: none;
}

.vir-launcher-outline:hover,
.vir-launcher-outline:focus-visible {
	background: var(--vir-accent);
	color: #fff;
}

.vir-launcher:focus-visible {
	outline: 2px solid var(--vir-accent);
	outline-offset: 3px;
}

.vir-launcher-icon {
	flex: 0 0 auto;
}

.vir-launcher.vir-loading {
	opacity: .65;
	pointer-events: none;
}

.vir-launcher-progress {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.vir-launcher-progress::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: vir-spin .7s linear infinite;
}

.vir-launcher-error {
	margin-top: 8px;
	font-size: 13px;
	color: #8a2424;
}

.vir-launcher-retry {
	margin-left: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

@keyframes vir-spin {
	to { transform: rotate(360deg); }
}

/* Secondary path for AR-capable devices: a quiet text link. */
.vir-launcher-secondary {
	display: inline-flex;
	align-items: center;
	padding: 6px 2px;
	border: 0;
	background: transparent;
	color: var(--vir-muted);
	font: 500 13.5px/1 var(--vir-font);
	text-decoration: none;
	cursor: pointer;
	position: relative;
}

.vir-launcher-secondary::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	opacity: .4;
	transition: opacity .15s var(--vir-ease);
}

.vir-launcher-secondary:hover,
.vir-launcher-secondary:focus-visible {
	color: var(--vir-ink);
}

.vir-launcher-secondary:hover::after,
.vir-launcher-secondary:focus-visible::after {
	opacity: 1;
}

.vir-launcher-secondary:focus-visible {
	outline: 2px solid var(--vir-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Hidden staging model-viewer for AR capability detection. Not display:none,
   so the component still initialises. */
.vir-ar-staging {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 2px;
	height: 2px;
	opacity: 0.01;
	pointer-events: none;
	z-index: -1;
}

/* ------------------------------------------------------------------- modal */

body.vir-modal-open {
	overflow: hidden;
}

.vir-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vir-font);
	color: var(--vir-ink);
	-webkit-font-smoothing: antialiased;
}

.vir-modal[hidden] {
	display: none;
}

.vir-modal * {
	box-sizing: border-box;
}

.vir-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(18, 14, 12, .58);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: vir-fade .25s var(--vir-ease);
}

.vir-modal-panel {
	position: relative;
	background: var(--vir-surface);
	width: min(1040px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	border-radius: var(--vir-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: var(--vir-shadow);
	animation: vir-pop .3s var(--vir-ease);
}

@keyframes vir-fade {
	from { opacity: 0; }
}

@keyframes vir-pop {
	from { opacity: 0; transform: translateY(12px) scale(.985); }
}

.vir-modal-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px 16px;
	border-bottom: 1px solid var(--vir-line);
}

.vir-modal-header h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	flex: 0 0 auto;
	color: var(--vir-ink);
}

.vir-modal-heading {
	min-width: 0;
	flex: 1 1 auto;
}

.vir-modal-status {
	font-size: 12px;
	line-height: 1.35;
	color: var(--vir-muted);
	margin-top: 3px;
}

.vir-modal-status:empty {
	display: none;
}

.vir-modal-status.is-warning {
	color: #955108;
}

.vir-modal-status.is-success {
	color: #1a6b3b;
}

.vir-variant-badge {
	font-size: 13px;
	color: var(--vir-muted);
	flex: 0 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vir-modal-close {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--vir-surface-2);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--vir-ink);
	transition: background .15s var(--vir-ease), transform .15s var(--vir-ease);
}

.vir-modal-close:hover {
	background: var(--vir-surface-3);
	transform: rotate(90deg);
}

.vir-modal-close:focus-visible {
	outline: 2px solid var(--vir-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- tabs */

.vir-tabs {
	display: flex;
	gap: 2px;
	padding: 6px 12px 0;
	border-bottom: 1px solid var(--vir-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.vir-tabs::-webkit-scrollbar {
	display: none;
}

.vir-tab {
	position: relative;
	flex: 0 0 auto;
	border: 0;
	padding: 13px 16px;
	font: 500 14px/1.15 var(--vir-font);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	color: var(--vir-muted);
	white-space: nowrap;
	transition: color .15s var(--vir-ease);
	-webkit-tap-highlight-color: transparent;
	box-shadow: none;
}

/* Own the background in every interactive state so a host theme's button
   styling (button:focus, button:active) cannot paint the tab dark and leave
   dark text on a dark fill. The two-class specificity beats theme pseudo
   selectors; !important guards against inline theme rules. */
.vir-tabs .vir-tab,
.vir-tabs .vir-tab:hover,
.vir-tabs .vir-tab:focus,
.vir-tabs .vir-tab:active,
.vir-tabs .vir-tab.is-active,
.vir-tabs .vir-tab[aria-selected="true"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.vir-tab::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--vir-accent);
	transform: scaleX(0);
	transition: transform .22s var(--vir-ease);
}

.vir-tab:hover {
	color: var(--vir-ink);
}

.vir-tab.is-active,
.vir-tab[aria-selected="true"] {
	color: var(--vir-ink);
	font-weight: 600;
}

.vir-tab.is-active::after,
.vir-tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

.vir-tab:focus-visible {
	outline: 2px solid var(--vir-accent);
	outline-offset: -3px;
	border-radius: 6px;
}

.vir-panes {
	overflow: auto;
	padding: 20px;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------- AR hero */

.vir-handoff {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
	gap: 24px;
	padding: 22px;
	border-bottom: 1px solid var(--vir-line);
	background:
		radial-gradient(120% 140% at 100% 0, rgba(255, 255, 255, 0) 40%, var(--vir-surface-2) 100%),
		var(--vir-surface-2);
	align-items: center;
}

.vir-handoff[hidden] {
	display: none;
}

.vir-handoff-primary {
	text-align: left;
}

.vir-handoff-primary h3 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--vir-ink);
}

.vir-handoff-primary p {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--vir-muted);
	margin: 0 0 14px;
	max-width: 42ch;
}

.vir-handoff-primary .vir-privacy {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--vir-faint);
}

.vir-handoff-preview {
	border-radius: var(--vir-radius-sm);
	overflow: hidden;
	background: radial-gradient(circle at 50% 40%, #fff, var(--vir-surface-3));
	box-shadow: inset 0 0 0 1px var(--vir-line);
}

.vir-handoff-preview model-viewer {
	width: 100%;
	height: 260px;
	--poster-color: transparent;
}

/* ------------------------------------------------------------- button system */

.vir-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1.5px solid var(--vir-line-2);
	background: #fff;
	color: var(--vir-ink);
	border-radius: var(--vir-pill);
	font: 600 14px/1 var(--vir-font);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background .15s var(--vir-ease), border-color .15s var(--vir-ease), transform .12s var(--vir-ease), color .15s var(--vir-ease);
	-webkit-appearance: none;
	appearance: none;
}

.vir-btn:hover,
.vir-btn:focus-visible {
	background: var(--vir-surface-2);
	border-color: var(--vir-ink);
	color: var(--vir-ink);
}

.vir-btn:active {
	transform: translateY(1px);
}

.vir-btn:focus-visible {
	outline: 2px solid var(--vir-accent);
	outline-offset: 2px;
}

.vir-btn:disabled,
.vir-btn:disabled:hover {
	opacity: .45;
	cursor: not-allowed;
	background: #fff;
	border-color: var(--vir-line-2);
	color: var(--vir-muted);
	transform: none;
}

/* Guard against a host theme painting focused/tapped buttons dark. The
   two-class specificity beats theme button:focus / button:active rules. */
.vir-modal .vir-btn {
	-webkit-tap-highlight-color: transparent;
}

.vir-modal .vir-btn:focus,
.vir-modal .vir-btn:active {
	background: #fff;
	color: var(--vir-ink);
}

.vir-modal .vir-buy:focus,
.vir-modal .vir-buy:active,
.vir-modal .vir-ar-action:focus,
.vir-modal .vir-ar-action:active {
	background: var(--vir-accent);
	color: #fff;
}

/* Primary actions: the AR hero CTA and the buy button. */
.vir-ar-action,
.vir-buy {
	background: var(--vir-accent);
	border-color: var(--vir-accent);
	color: #fff;
	box-shadow: 0 1px 2px rgba(20, 16, 14, .18);
}

.vir-ar-action:hover,
.vir-ar-action:focus-visible,
.vir-buy:hover,
.vir-buy:focus-visible {
	background: var(--vir-accent);
	border-color: var(--vir-accent);
	color: #fff;
	filter: brightness(1.08);
	box-shadow: 0 8px 20px -8px rgba(20, 16, 14, .55);
}

.vir-ar-action {
	padding: 14px 26px;
	font-size: 15px;
}

/* ------------------------------------------------------------- commerce bar */

.vir-commerce {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) minmax(160px, 1.1fr) auto;
	align-items: end;
	gap: 16px;
	padding: 14px 20px;
	border-top: 1px solid var(--vir-line-2);
	background: var(--vir-surface);
	box-shadow: 0 -12px 30px -18px rgba(20, 16, 14, .3);
}

.vir-commerce-summary {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vir-commerce-summary > span {
	font-size: 12px;
	color: var(--vir-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vir-commerce-summary > strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--vir-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vir-commerce-summary .vir-commerce-price {
	margin-top: 3px;
	font-size: 18px;
	line-height: 1.1;
	color: var(--vir-ink);
	font-weight: 700;
	letter-spacing: -.01em;
}

.vir-commerce-options {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
}

.vir-commerce-options::-webkit-scrollbar {
	display: none;
}

.vir-commerce-options label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 130px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--vir-faint);
}

.vir-commerce-select {
	min-height: 42px;
	max-width: 210px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: 9px;
	background: #fff;
	padding: 8px 30px 8px 12px;
	font: 500 13.5px/1 var(--vir-font);
	color: var(--vir-ink);
	cursor: pointer;
	transition: border-color .15s var(--vir-ease);
}

.vir-commerce-select:hover {
	border-color: var(--vir-ink);
}

.vir-commerce-actions {
	display: flex;
	gap: 10px;
	white-space: nowrap;
}

.vir-share {
	padding-inline: 16px;
}

/* -------------------------------------------------------------- room scenes */

.vir-model-preview {
	position: relative;
	min-height: min(58vh, 520px);
	border-radius: var(--vir-radius-sm);
	background: radial-gradient(circle at 50% 40%, #fff, var(--vir-surface-3));
	overflow: hidden;
}

.vir-model-preview model-viewer {
	display: block;
	width: 100%;
	height: min(58vh, 520px);
	--poster-color: transparent;
}

.vir-model-dimensions,
.vir-truescale {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 7px 13px;
	border-radius: var(--vir-pill);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: var(--vir-shadow-sm);
	font-size: 12px;
	font-weight: 500;
	color: var(--vir-ink);
}

.vir-scene-filters {
	display: flex;
	gap: 7px;
	margin: 0 0 14px;
	overflow-x: auto;
	scrollbar-width: none;
}

.vir-scene-filters::-webkit-scrollbar {
	display: none;
}

.vir-scene-filters button {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: var(--vir-pill);
	background: #fff;
	font: 500 12.5px/1 var(--vir-font);
	color: var(--vir-muted);
	text-transform: capitalize;
	cursor: pointer;
	transition: all .15s var(--vir-ease);
}

.vir-scene-filters button:hover {
	border-color: var(--vir-ink);
	color: var(--vir-ink);
}

.vir-scene-filters button.is-active {
	background: var(--vir-accent);
	border-color: var(--vir-accent);
	color: #fff;
}

.vir-scene-stage {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--vir-radius-sm);
	cursor: zoom-in;
	background: var(--vir-surface-2);
	touch-action: pan-y;
}

.vir-scene-stage.is-zoomed {
	cursor: zoom-out;
	overflow: auto;
}

.vir-scene-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	transition: transform .3s var(--vir-ease);
	transform-origin: center center;
	pointer-events: none;
}

.vir-scene-stage.is-zoomed .vir-scene-image {
	transform: scale(1.7);
}

.vir-scene-stage:fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: #111;
}

.vir-scene-stage:fullscreen .vir-scene-image {
	width: auto;
	height: auto;
	max-width: 100vw;
	max-height: 100vh;
}

.vir-scene-comparison {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.vir-scene-comparison .vir-scene-image {
	width: 100%;
}

.vir-scene-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
	pointer-events: none;
}

.vir-scene-compare,
.vir-scene-actions {
	display: flex;
	align-items: end;
	gap: 10px;
	margin: 0 0 12px;
	flex-wrap: wrap;
}

.vir-scene-actions {
	margin: 12px 0 0;
}

.vir-scene-compare label {
	display: grid;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--vir-faint);
}

.vir-scene-compare select {
	max-width: 320px;
	min-height: 40px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: 9px;
	padding: 8px 12px;
	font: 500 13px/1 var(--vir-font);
}

.vir-scene-stage:focus-visible {
	outline: 3px solid var(--vir-accent);
	outline-offset: 3px;
}

.vir-fit-warning,
.vir-unlock {
	margin: 12px 0 0;
	padding: 11px 14px;
	border-radius: 9px;
	border-left: 3px solid #c98a2a;
	background: #fdf6e9;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b4a10;
}

.vir-scene-thumbs {
	display: flex;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.vir-scene-thumb {
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: var(--vir-surface-2);
	width: 116px;
	min-height: 86px;
	text-align: left;
	color: var(--vir-muted);
	transition: border-color .15s var(--vir-ease), transform .15s var(--vir-ease);
}

.vir-scene-thumb:hover {
	transform: translateY(-2px);
}

.vir-scene-thumb img {
	width: 100%;
	height: 62px;
	object-fit: cover;
	display: block;
}

.vir-scene-thumb span {
	display: block;
	padding: 6px 8px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vir-scene-thumb.is-active {
	border-color: var(--vir-accent);
	color: var(--vir-ink);
}

.vir-scene-thumb:focus-visible {
	outline: 2px solid var(--vir-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- your photo */

.vir-photo-intro {
	text-align: center;
	padding: 44px 20px;
	max-width: 560px;
	margin: 0 auto;
}

.vir-photo-intro h3 {
	margin: 20px 0 6px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.vir-photo-intro > p {
	color: var(--vir-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 20px;
}

.vir-photo-steps {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 0 auto 22px;
	padding: 0;
	list-style: none;
	max-width: 560px;
}

.vir-photo-steps li {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 12px;
	color: var(--vir-faint);
}

.vir-photo-steps li + li::before {
	content: "";
	position: absolute;
	right: calc(50% + 42px);
	left: calc(-50% + 42px);
	top: 13px;
	height: 1.5px;
	background: var(--vir-line-2);
}

.vir-photo-steps span {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: 50%;
	background: #fff;
	font-weight: 600;
}

.vir-photo-steps .is-active {
	color: var(--vir-ink);
	font-weight: 600;
}

.vir-photo-steps .is-active span,
.vir-photo-steps .is-complete span {
	background: var(--vir-accent);
	border-color: var(--vir-accent);
	color: #fff;
}

.vir-photo-steps-compact {
	margin-bottom: 22px;
}

.vir-privacy {
	font-size: 12.5px;
	color: var(--vir-faint);
	margin: 8px 0;
}

.vir-photo-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 18px;
	align-items: start;
}

.vir-photo-canvas {
	width: 100%;
	height: auto;
	border-radius: var(--vir-radius-sm);
	touch-action: none;
	background: var(--vir-surface-2);
}

.vir-photo-canvas:focus-visible {
	outline: 3px solid var(--vir-accent);
	outline-offset: 3px;
}

.vir-photo-workspace {
	position: relative;
}

.vir-change-photo {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 7px 12px;
	border: 0;
	border-radius: var(--vir-pill);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: var(--vir-shadow-sm);
	font: 500 12px/1 var(--vir-font);
	cursor: pointer;
}

.vir-photo-tools strong {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
}

.vir-photo-tools p {
	font-size: 13px;
	line-height: 1.5;
	color: var(--vir-muted);
}

.vir-photo-tools label {
	display: block;
	margin: 10px 0;
	font-size: 13px;
}

.vir-photo-tools .vir-btn {
	margin: 4px 4px 4px 0;
	padding: 8px 14px;
	font-size: 13px;
}

.vir-photo-tools .vir-btn.is-active {
	background: var(--vir-accent);
	border-color: var(--vir-accent);
	color: #fff;
}

.vir-ref-metres {
	width: 96px;
	min-height: 40px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: 9px;
	padding: 8px 10px;
	font: 500 14px/1 var(--vir-font);
}

.vir-approx {
	font-size: 12px;
	color: var(--vir-faint);
}

.vir-photo-error {
	padding: 11px 14px;
	border-radius: 9px;
	border-left: 3px solid #c0392b;
	background: #fdf1f0;
	color: #8a2424 !important;
}

.vir-photo-colour {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 7px 11px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: var(--vir-pill);
}

.vir-photo-colour input {
	width: 34px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	cursor: pointer;
}

/* ------------------------------------------------------- gallery wall studio */

.vir-gallery-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 18px;
}

.vir-gallery-toolbar,
.vir-gallery-actions {
	display: flex;
	align-items: end;
	gap: 8px;
	margin-bottom: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.vir-gallery-toolbar::-webkit-scrollbar,
.vir-gallery-actions::-webkit-scrollbar {
	display: none;
}

.vir-gallery-toolbar label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--vir-faint);
	white-space: nowrap;
}

.vir-gallery-toolbar select,
.vir-gallery-toolbar input,
.vir-gallery-toolbar button {
	min-height: 38px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: 8px;
	background: #fff;
	padding: 7px 10px;
	font: 500 12.5px/1 var(--vir-font);
	color: var(--vir-ink);
}

.vir-gallery-toolbar input[type="color"] {
	width: 50px;
	padding: 3px;
	cursor: pointer;
}

.vir-gallery-canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vir-radius-sm);
	background: var(--vir-surface-3);
	touch-action: none;
}

.vir-gallery-canvas:focus-visible {
	outline: 3px solid var(--vir-accent);
	outline-offset: 3px;
}

.vir-gallery-actions {
	margin: 12px 0 0;
}

.vir-gallery-actions .vir-btn {
	padding: 8px 12px;
	font-size: 12.5px;
}

.vir-gallery-catalog {
	max-height: 560px;
	overflow: auto;
	padding-left: 2px;
}

.vir-gallery-catalog h3 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
}

.vir-gallery-search {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
	padding: 10px 12px;
	border: 1.5px solid var(--vir-line-2);
	border-radius: 9px;
	font: 500 13px/1 var(--vir-font);
}

.vir-gallery-product {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	gap: 11px;
	padding: 10px 0;
	border-bottom: 1px solid var(--vir-line);
	align-items: center;
}

.vir-gallery-product img {
	width: 70px;
	height: 70px;
	object-fit: contain;
	background: var(--vir-surface-2);
	border-radius: 8px;
}

.vir-gallery-product div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	gap: 2px;
}

.vir-gallery-product strong,
.vir-gallery-product span {
	max-width: 100%;
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vir-gallery-product span {
	color: var(--vir-muted);
	font-size: 11px;
}

.vir-gallery-product button {
	margin-top: 6px;
	padding: 5px 12px;
	border: 1.5px solid var(--vir-ink);
	border-radius: var(--vir-pill);
	background: #fff;
	font: 600 11px/1 var(--vir-font);
	cursor: pointer;
	transition: background .15s var(--vir-ease), color .15s var(--vir-ease);
}

.vir-gallery-product button:hover {
	background: var(--vir-accent);
	border-color: var(--vir-accent);
	color: #fff;
}

.vir-gallery-recommendation {
	font-size: 12.5px;
	color: var(--vir-muted);
}

.vir-gallery-recommendation.is-warning {
	color: #955108;
	font-weight: 600;
}

/* ----------------------------------------------------------------------- AR */

.vir-ar-wrap {
	position: relative;
	border-radius: var(--vir-radius-sm);
	overflow: hidden;
	background: radial-gradient(circle at 50% 40%, #fff, var(--vir-surface-3));
}

.vir-ar-wrap model-viewer {
	width: 100%;
	height: min(60vh, 520px);
	--poster-color: transparent;
}

.vir-ar-hint {
	font-size: 14px;
	color: var(--vir-muted);
	margin-top: 12px;
	text-align: center;
}

.vir-ar-desktop {
	text-align: center;
	margin-top: 16px;
}

.vir-qr {
	display: block;
	margin: 12px auto;
	image-rendering: pixelated;
	width: 156px;
	height: 156px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--vir-line);
	border-radius: var(--vir-radius-sm);
	box-shadow: var(--vir-shadow-sm);
}

.vir-short-link {
	display: inline-block;
	font-size: 12.5px;
	color: var(--vir-muted);
	word-break: break-all;
}

.vir-copy-handoff {
	margin-top: 8px;
}

/* -------------------------------------------------------------- empty states */

.vir-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 48px 24px;
	color: var(--vir-muted);
	max-width: 420px;
	margin: 0 auto;
}

.vir-empty::before {
	content: "";
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--vir-surface-2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%236d6a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m3 15 4-4 5 5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.vir-empty h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--vir-ink);
}

.vir-empty p,
.vir-empty > *:not(h3):not(img):not(.vir-btn) {
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0 0 14px;
}

.vir-empty-poster {
	max-width: 160px;
	border-radius: var(--vir-radius-sm);
	box-shadow: var(--vir-shadow-sm);
	display: block;
	margin: 0 auto 16px;
}

/* When a real poster is shown, drop the placeholder icon. */
.vir-empty:has(.vir-empty-poster)::before {
	display: none;
}

/* --------------------------------------------------------------- powered-by */

.vir-credit {
	padding: 10px 20px 14px;
	text-align: center;
	border-top: 1px solid var(--vir-line);
	background: var(--vir-surface);
}

.vir-credit a {
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--vir-faint);
	text-decoration: none;
}

.vir-credit a:hover,
.vir-credit a:focus-visible {
	color: var(--vir-muted);
	text-decoration: underline;
}

/* ------------------------------------------------------------- mobile sheet */

@media (max-width: 760px) {
	.vir-modal {
		align-items: flex-end;
	}

	.vir-modal-panel {
		width: 100vw;
		max-height: 94dvh;
		border-radius: 20px 20px 0 0;
		animation: vir-sheet .34s var(--vir-ease);
	}

	@keyframes vir-sheet {
		from { transform: translateY(100%); }
	}

	/* Grab handle for the bottom sheet. */
	.vir-modal-panel::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 4px;
		border-radius: 4px;
		background: var(--vir-line-2);
		z-index: 2;
	}

	.vir-modal-header {
		padding: 20px 16px 14px;
	}

	.vir-variant-badge {
		display: none;
	}

	.vir-panes {
		padding: 16px;
	}

	/* Fit all tabs across the sheet instead of overflowing and clipping. */
	.vir-tabs {
		padding: 4px 6px 0;
		gap: 0;
	}

	.vir-tab {
		flex: 1 1 0;
		min-width: 0;
		padding: 12px 6px;
		font-size: 12.5px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.vir-tab::after {
		left: 8px;
		right: 8px;
	}

	.vir-handoff {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 20px 16px;
	}

	.vir-handoff-primary {
		text-align: center;
	}

	.vir-handoff-primary p {
		margin-inline: auto;
	}

	.vir-handoff-primary .vir-ar-action {
		width: 100%;
	}

	.vir-handoff-preview {
		display: none;
	}

	.vir-photo-stage,
	.vir-gallery-layout {
		grid-template-columns: 1fr;
	}

	.vir-gallery-catalog {
		max-height: none;
	}

	/* The purchase bar and credit read as one pinned footer at the base of
	   the sheet: a clear divider and lift, a compact identity block, and the
	   price as the focal point. */
	.vir-commerce {
		grid-template-columns: 1fr auto;
		gap: 4px 12px;
		padding: 12px 16px 8px;
		border-top: 1px solid var(--vir-line-2);
		box-shadow: 0 -10px 26px -16px rgba(20, 16, 14, .28);
	}

	.vir-commerce-options {
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: 4px;
	}

	.vir-commerce-summary {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		gap: 0;
	}

	.vir-commerce-summary > strong {
		font-size: 13.5px;
	}

	.vir-commerce-summary > span {
		font-size: 11.5px;
	}

	.vir-commerce-summary .vir-commerce-price {
		margin-top: 2px;
		font-size: 19px;
	}

	.vir-commerce-actions {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
	}

	.vir-buy {
		padding: 13px 24px;
		font-size: 15px;
	}

	.vir-share {
		display: none;
	}

	/* Credit is the quiet base of the same footer, with no second divider. */
	.vir-credit {
		border-top: 0;
		padding: 4px 16px calc(10px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vir-modal-panel,
	.vir-modal-backdrop,
	.vir-launcher,
	.vir-scene-image,
	.vir-tab::after,
	.vir-scene-thumb {
		animation: none !important;
		transition: none !important;
	}

	.vir-launcher-progress::before {
		animation: none;
	}

	.vir-modal-close:hover {
		transform: none;
	}
}