.fpd-panorama-previews {
	position: absolute;
	top: auto;
	bottom: 68px;
	right: 18px;
	z-index: 27;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 5px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 7px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
	transform: none;
}

.fpd-panorama-previews.is-expanded { top: auto; bottom: 68px; gap: 7px; max-height: calc(100% - 84px); overflow-y: auto; padding: 7px; transform: none; }
.fpd-panorama-preview-toggle { border: 1px solid #1688df !important; border-radius: 4px !important; background: #fff !important; color: #1688df !important; padding: 7px 10px !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer; }
.fpd-panorama-preview-content { display: none; flex-direction: column; gap: 7px; }
.fpd-panorama-previews.is-expanded .fpd-panorama-preview-content { display: flex; }
.fpd-panorama-previews figure { width: 220px; margin: 0; }
.fpd-panorama-previews figcaption { margin-bottom: 3px; color: #1d2327; font-size: 11px; font-weight: 700; text-align: center; }
.fpd-panorama-previews img { display: block; width: 100%; height: 124px; object-fit: contain; border-radius: 4px; background: #f6f7f7; }
.fpd-panorama-fullscreen { border: 1px solid #1688df !important; border-radius: 4px !important; background: #fff !important; color: #1688df !important; padding: 5px 8px !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer; }
.fpd-panorama-preview-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .82); }
.fpd-panorama-preview-modal.is-visible { display: flex; }
.fpd-panorama-modal-content { display: flex; flex-direction: column; gap: 16px; width: min(760px, 92vw); max-height: 88vh; overflow: auto; padding: 22px; border-radius: 10px; background: #fff; }
.fpd-panorama-modal-content figure { margin: 0; }
.fpd-panorama-modal-content figcaption { margin-bottom: 6px; color: #1d2327; font-size: 15px; font-weight: 700; text-align: center; }
.fpd-panorama-modal-content img { display: block; width: 100%; max-height: 36vh; object-fit: contain; background: #f6f7f7; image-rendering: auto; }
.fpd-panorama-modal-close { position: fixed; top: 18px; right: 18px; width: 48px !important; height: 48px !important; border: 3px solid #fff !important; border-radius: 50% !important; background: #1d2327 !important; color: #fff !important; font-size: 36px !important; line-height: 34px !important; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.fpd-has-panorama-previews .fpd-product-specifications { top: 72px; right: 16px; left: auto; }
.fpd-production-note-toggle { position: absolute; top: auto; right: 18px; bottom: 112px; left: auto; z-index: 27; border: 1px solid #1688df !important; border-radius: 4px !important; background: #fff !important; color: #1688df !important; padding: 7px 10px !important; font: 700 12px/1 Arial, sans-serif !important; cursor: pointer; }
.fpd-production-note-toggle.is-active { background: #1688df !important; color: #fff !important; }
.fpd-production-note { position: absolute; top: auto; right: 18px; bottom: 150px; left: auto; z-index: 28; display: none; width: min(260px, 34%); max-height: calc(100% - 170px); overflow: auto; padding: 9px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 7px; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.fpd-production-note.is-open { display: block; }
.fpd-production-note label { display: flex; flex-direction: column; gap: 4px; color: #1d2327; font-size: 11px; font-weight: 700; }
.fpd-production-note-handle { margin: -4px -4px 6px; padding: 5px 34px 5px 7px; border-radius: 4px; background: #eef5fb; color: #1d2327; font-size: 11px; font-weight: 700; cursor: move; touch-action: none; }
.fpd-production-note-close { position: absolute; top: 8px; right: 8px; width: 24px !important; height: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: #1d2327 !important; font-size: 20px !important; line-height: 20px !important; cursor: pointer; }
.fpd-production-note textarea { min-height: 46px; padding: 6px; border: 1px solid #c3c4c7 !important; border-radius: 4px; resize: vertical; color: #1d2327; font: 12px/1.35 Arial, sans-serif; }
.fpd-physical-tour { position: fixed; inset: 0; z-index: 1000002; background: rgba(15, 23, 42, .52); }
.fpd-physical-tour-spotlight { position: fixed; z-index: 1; border: 3px solid #f7c948; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .18); pointer-events: none; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease; }
.fpd-physical-tour-card { position: fixed; z-index: 2; width: min(310px, calc(100vw - 24px)); padding: 15px; border-radius: 10px; background: #fff; color: #172b4d; box-shadow: 0 18px 48px rgba(0, 0, 0, .32); box-sizing: border-box; }
.fpd-physical-tour-card strong { display: block; font: 700 16px/1.25 Arial, sans-serif; }
.fpd-physical-tour-card p { margin: 8px 0 14px; font: 400 13px/1.45 Arial, sans-serif; }
.fpd-physical-tour-actions { display: flex; align-items: center; gap: 6px; }
.fpd-physical-tour-actions span { margin-right: auto; color: #64748b; font: 600 11px/1 Arial, sans-serif; }
.fpd-physical-tour-actions button { min-height: 36px; border: 1px solid #b6c2cf; border-radius: 5px; background: #fff; color: #172b4d; padding: 7px 9px; font: 700 12px/1 Arial, sans-serif; cursor: pointer; }
.fpd-physical-tour-actions button:disabled { opacity: .45; cursor: default; }
.fpd-physical-tour-actions .fpd-physical-tour-next { border-color: #1688df; background: #1688df; color: #fff; }
.fpd-physical-tour-actions .fpd-physical-tour-skip { border-color: transparent; color: #52657c; }

@media (prefers-reduced-motion: no-preference) {
	.fpd-panorama-preview-toggle,
	.fpd-panorama-fullscreen,
	.fpd-production-note-toggle,
	.fpd-production-note-close,
	.fpd-side-switcher button,
	.fpd-physical-tour-actions button { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; }
	.fpd-panorama-previews.is-expanded .fpd-panorama-preview-content { animation: fpd-physical-reveal .16s ease-out; }
	.fpd-product-specifications.is-visible,
	.fpd-side-switcher.is-visible { animation: fpd-physical-fade-in .18s ease-out; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.fpd-panorama-preview-toggle:hover,
	.fpd-panorama-fullscreen:hover,
	.fpd-production-note-toggle:hover,
	.fpd-side-switcher button:hover,
	.fpd-physical-tour-actions button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, .16); }
}

.fpd-panorama-preview-toggle:focus-visible,
.fpd-panorama-fullscreen:focus-visible,
.fpd-production-note-toggle:focus-visible,
.fpd-production-note-close:focus-visible,
.fpd-side-switcher button:focus-visible,
.fpd-physical-tour-actions button:focus-visible { outline: 3px solid rgba(22, 136, 223, .42) !important; outline-offset: 2px; }

@keyframes fpd-physical-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fpd-physical-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	.fpd-physical-tour-spotlight,
	.fpd-panorama-preview-toggle,
	.fpd-panorama-fullscreen,
	.fpd-production-note-toggle,
	.fpd-production-note-close,
	.fpd-side-switcher button,
	.fpd-physical-tour-actions button { transition: none; animation: none; }
}

@media (max-width: 782px) {
	/* Keep the canvas clear: the compact product spec stays in the header and the two previews share the unused side area. */
	.fpd-panorama-previews { top: auto; right: 8px; bottom: 118px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 5px; padding: 5px; transform: none; max-width: calc(100vw - 18px); }
	.fpd-panorama-previews.is-expanded { top: auto; bottom: 118px; transform: none; }
	.fpd-panorama-preview-toggle { flex-basis: 100%; }
	.fpd-panorama-preview-content { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
	.fpd-panorama-previews.is-expanded .fpd-panorama-preview-content { display: flex; }
	.fpd-panorama-fullscreen { flex-basis: 100%; }
	.fpd-panorama-previews figure { width: min(142px, calc((100vw - 42px) / 2)); }
	.fpd-panorama-previews img { height: 82px; }
	.fpd-has-panorama-previews .fpd-product-specifications { top: 50px; right: 8px; bottom: auto; left: auto; }
	.fpd-production-note-toggle { top: 88px; right: auto; bottom: auto; left: 8px; }
	.fpd-production-note { top: 126px; right: auto; bottom: auto; left: 8px; z-index: 28; width: min(220px, 52%); max-height: calc(100% - 270px); }
}
