/* SpotSpin front-end — all rules scoped under .spotspin */
.spotspin {
	--spsp-accent: #e5322a;
	--spsp-dot-size: 32px;
	--spsp-dot-color: #fff;
	--spsp-dot-bg: #e5322a;
	--spsp-dot-bg-active: #b01c17;
	--spsp-dot-border: #fff;
	--spsp-title-color: #111;
	--spsp-desc-color: #555;
	--spsp-hint-pulse: #e5322a;
	--spsp-line: #e5322a;
	--spsp-pad: 14px;
	--spsp-card-radius: 10px;
	--spsp-card-pad: 14px;
	max-width: 100%;
}
.spotspin *, .spotspin *::before, .spotspin *::after { box-sizing: border-box; }

/* Wrapper = single stacking context */
.spotspin-hotspot { position: relative; }

/* Stage & image — frame shrink-wraps the image and is centred, so hotspot
   % coordinates track the image at any viewport width / zoom level */
.spotspin-stage { position: relative; width: 100%; overflow: hidden; border-radius: 8px; display: flex; justify-content: center; align-items: center; background: var(--spsp-bg, transparent); }
.spotspin-stage__bg { position: absolute; inset: 0; z-index: 0; }
.spotspin-stage__bg .spotspin-img { width: 100%; height: 100%; }
.spotspin-stage__frame { position: relative; max-width: 100%; line-height: 0; }
.spotspin-stage__media { position: relative; }
.spotspin-img { display: block; max-width: 100%; height: auto; }
.spotspin-img--contain { object-fit: contain; }
.spotspin-img--cover { object-fit: cover; }
.spotspin-stage__product.has-shadow { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .28)); }

/* Points */
.spotspin-stage__points { position: absolute; inset: 0; }
.spotspin-point { position: absolute; }
.spotspin-point.is-active { z-index: 20; }

/* Dot */
.spotspin-dot {
	position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--spsp-dot-size); height: var(--spsp-dot-size); padding: 0 6px;
	border-radius: 999px; border: 2px solid var(--spsp-dot-border);
	background: var(--spsp-dot-bg); color: var(--spsp-dot-color);
	font: 600 13px/1 inherit; cursor: pointer; touch-action: manipulation;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .15s ease, background .15s ease;
}
.spotspin-dot:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--spsp-dot-bg-active); }
.spotspin-point.is-active .spotspin-dot { background: var(--spsp-dot-bg-active); }
.spotspin-dot:focus-visible { outline: 3px solid var(--spsp-accent); outline-offset: 3px; }
.spotspin-dot__svg { width: 60%; height: 60%; }
.spotspin-dot__img { width: 70%; height: 70%; object-fit: contain; }
.spotspin-dot__num { line-height: 1; }

/* Pulse on dots */
.spotspin.is-pulse .spotspin-dot::after {
	content: ""; position: absolute; inset: -2px; border-radius: 999px;
	border: 2px solid var(--spsp-dot-bg); animation: spotspin-pulse 1.8s ease-out infinite;
}
@keyframes spotspin-pulse {
	0% { transform: scale(1); opacity: .7; }
	100% { transform: scale(2.1); opacity: 0; }
}

/* Flyout card (desktop) */
.spotspin-card {
	position: absolute; top: 0; left: calc(var(--spsp-dot-size) / 2 + 12px);
	transform: translateY(-50%); width: var(--spsp-card-w, 300px); max-width: calc(100vw - 24px); z-index: 30;
	background: var(--spsp-card-bg, #fff); border-radius: var(--spsp-card-radius);
	padding: var(--spsp-card-pad); box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.spotspin-card.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.spotspin-card.flip-left, .spotspin-card.is-flipped { left: auto; right: calc(var(--spsp-dot-size) / 2 + 12px); }
.spotspin-card__arrow {
	position: absolute; top: 50%; left: -7px; width: 14px; height: 14px;
	background: var(--spsp-card-bg, #fff); transform: translateY(-50%) rotate(45deg); box-shadow: -2px 2px 4px rgba(0, 0, 0, .06);
}
.spotspin-card.flip-left .spotspin-card__arrow, .spotspin-card.is-flipped .spotspin-card__arrow {
	left: auto; right: -7px; box-shadow: 2px -2px 4px rgba(0, 0, 0, .06);
}
.spotspin-card__title { display: block; font-size: 15px; margin-bottom: var(--spsp-card-gap, 8px); color: var(--spsp-title-color); }
.spotspin-card__desc { font-size: 13px; line-height: 1.5; color: var(--spsp-desc-color); }
.spotspin-card__desc p { margin: 0 0 6px; }
.spotspin-card__link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--spsp-accent); text-decoration: none; }
.spotspin-card__link:hover { text-decoration: underline; }

/* Show-all stacked list (mobile) — fills the stage, scrolls, never overlaps the controls */
.spotspin-list { position: absolute; inset: 8px; z-index: 50; overflow: auto; background: var(--spsp-card-bg, #fff); border-radius: 12px; padding: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.spotspin-list[hidden] { display: none; }
.spotspin-list__close { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: #666; }
.spotspin-list__row { display: flex; gap: 12px; padding: 12px 2px; border-top: 2px solid var(--spsp-line); }
.spotspin-list__row:first-child { border-top: 0; }
.spotspin-list__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--spsp-accent); color: #fff; font-weight: 700; font-size: 13px; }
.spotspin-list__title { display: block; font-size: 15px; margin-bottom: var(--spsp-card-gap, 8px); color: var(--spsp-title-color); }
.spotspin-list__desc { font-size: 13px; line-height: 1.5; color: var(--spsp-desc-color); }

/* Overlay bar */
.spotspin-overlay { position: absolute; display: flex; gap: 10px; z-index: 5; pointer-events: none; }
.spotspin-overlay > * { pointer-events: auto; }
.spotspin-overlay.spotspin-pos-top { top: 0; left: 0; right: 0; padding: var(--spsp-pad); flex-direction: row; align-items: flex-start; justify-content: space-between; }
.spotspin-overlay.spotspin-pos-bottom { bottom: 0; left: 0; right: 0; padding: var(--spsp-pad); flex-direction: row; align-items: flex-end; justify-content: space-between; }
.spotspin-overlay.spotspin-pos-left { top: 0; bottom: 0; left: 0; padding: var(--spsp-pad); flex-direction: column; align-items: flex-start; }
.spotspin-overlay.spotspin-pos-right { top: 0; bottom: 0; right: 0; padding: var(--spsp-pad); flex-direction: column; align-items: flex-end; }

/* Hint + pulse dot */
.spotspin-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.spotspin-hint__pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--spsp-hint-pulse); flex: 0 0 auto; }
.spotspin-hint__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--spsp-hint-pulse); animation: spotspin-pulse 1.8s ease-out infinite; }

/* Buttons (label + arrow) */
.spotspin-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.spotspin-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font-weight: 600; line-height: 1.2; }
.spotspin-btn--specs { border: 1px solid rgba(0, 0, 0, .12); }
.spotspin-btn__label { white-space: nowrap; }
.spotspin-btn__arrow { flex: 0 0 auto; }
.spotspin-btn:focus-visible { outline: 3px solid var(--spsp-accent); outline-offset: 2px; }
.spotspin-notice { padding: 10px 14px; background: #fff4f4; border: 1px solid #f0c0bd; border-radius: 6px; }

/* Per-device visibility */
@media (min-width: 601px) { .spotspin-hide-desktop { display: none !important; } }
@media (max-width: 600px) { .spotspin-hide-mobile { display: none !important; } }

.spotspin .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Card expand direction — desktop = [data-dir], mobile override = [data-dir-m] */
.spotspin-hotspot[data-dir="side"] .spotspin-card { position: absolute; top: 0; bottom: auto; left: calc(var(--spsp-dot-size) / 2 + 12px); right: auto; transform: translateY(-50%); }
.spotspin-hotspot[data-dir="side"] .spotspin-card.flip-left, .spotspin-hotspot[data-dir="side"] .spotspin-card.is-flipped { left: auto; right: calc(var(--spsp-dot-size) / 2 + 12px); }
.spotspin-hotspot[data-dir="side"] .spotspin-card__arrow { display: block; top: 50%; bottom: auto; left: -7px; right: auto; transform: translateY(-50%) rotate(45deg); }
.spotspin-hotspot[data-dir="side"] .spotspin-card.flip-left .spotspin-card__arrow, .spotspin-hotspot[data-dir="side"] .spotspin-card.is-flipped .spotspin-card__arrow { left: auto; right: -7px; }
.spotspin-hotspot[data-dir="top"] .spotspin-card { position: absolute; top: auto; bottom: calc(var(--spsp-dot-size) / 2 + 14px); left: 50%; right: auto; transform: translateX(-50%); }
.spotspin-hotspot[data-dir="top"] .spotspin-card__arrow { display: block; top: auto; bottom: -7px; left: 50%; right: auto; transform: translateX(-50%) rotate(45deg); }
.spotspin-hotspot[data-dir="bottom"] .spotspin-card { position: absolute; top: calc(var(--spsp-dot-size) / 2 + 14px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.spotspin-hotspot[data-dir="bottom"] .spotspin-card__arrow { display: block; top: -7px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%) rotate(45deg); }
.spotspin-hotspot[data-dir="center"] .spotspin-card { position: fixed; z-index: 9999; max-height: calc(100vh - 20px); overflow: auto; }
.spotspin-hotspot[data-dir="center"] .spotspin-card__arrow { display: none; }

@media (max-width: 600px) {
	.spotspin-hotspot[data-dir-m="side"] .spotspin-card { position: absolute; top: 0; bottom: auto; left: calc(var(--spsp-dot-size) / 2 + 12px); right: auto; transform: translateY(-50%); }
	.spotspin-hotspot[data-dir-m="side"] .spotspin-card.flip-left, .spotspin-hotspot[data-dir-m="side"] .spotspin-card.is-flipped { left: auto; right: calc(var(--spsp-dot-size) / 2 + 12px); }
	.spotspin-hotspot[data-dir-m="side"] .spotspin-card__arrow { display: block; top: 50%; bottom: auto; left: -7px; right: auto; transform: translateY(-50%) rotate(45deg); }
	.spotspin-hotspot[data-dir-m="side"] .spotspin-card.flip-left .spotspin-card__arrow, .spotspin-hotspot[data-dir-m="side"] .spotspin-card.is-flipped .spotspin-card__arrow { left: auto; right: -7px; }
	.spotspin-hotspot[data-dir-m="top"] .spotspin-card { position: absolute; top: auto; bottom: calc(var(--spsp-dot-size) / 2 + 14px); left: 50%; right: auto; transform: translateX(-50%); }
	.spotspin-hotspot[data-dir-m="top"] .spotspin-card__arrow { display: block; top: auto; bottom: -7px; left: 50%; right: auto; transform: translateX(-50%) rotate(45deg); }
	.spotspin-hotspot[data-dir-m="bottom"] .spotspin-card { position: absolute; top: calc(var(--spsp-dot-size) / 2 + 14px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
	.spotspin-hotspot[data-dir-m="bottom"] .spotspin-card__arrow { display: block; top: -7px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%) rotate(45deg); }
	.spotspin-hotspot[data-dir-m="center"] .spotspin-card { position: fixed; z-index: 9999; max-height: calc(100vh - 20px); overflow: auto; }
	.spotspin-hotspot[data-dir-m="center"] .spotspin-card__arrow { display: none; }
}

/* Desktop overlay stays over the stage; mobile stacks so it never overlaps */
@media (max-width: 600px) {
	.spotspin-hotspot { display: flex; flex-direction: column; background: var(--spsp-bg, transparent); border-radius: 14px; overflow: hidden; }
	.spotspin-stage { order: 1; background: transparent; border-radius: 0; }
	.spotspin-overlay.spotspin-pos-top,
	.spotspin-overlay.spotspin-pos-bottom,
	.spotspin-overlay.spotspin-pos-left,
	.spotspin-overlay.spotspin-pos-right {
		position: static; order: 0; padding: var(--spsp-pad);
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px;
	}
	.spotspin-hotspot.pos-bottom .spotspin-overlay.spotspin-pos-bottom { order: 2; }
	.spotspin-overlay .spotspin-controls { flex-direction: column; }
	.spotspin-overlay .spotspin-btn { width: 100%; justify-content: center; }
}

/* ---- 360 viewer ---- */
.spotspin-spin { position: relative; width: 100%; overflow: hidden; user-select: none; touch-action: pan-y; cursor: grab; background: #fff; }
.spotspin-spin.is-dragging { cursor: grabbing; }
.spotspin-spin__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.spotspin-spin__frame--sprite { background-repeat: no-repeat; }
.spotspin-spin__progress { position: absolute; left: 12%; right: 12%; bottom: 14px; height: 4px; background: rgba(0, 0, 0, .12); border-radius: 4px; overflow: hidden; z-index: 3; }
.spotspin-spin__progress-bar { height: 100%; width: 0; background: var(--spsp-accent, #e5322a); transition: width .15s ease; }
.spotspin-spin__hint { position: absolute; left: 50%; bottom: var(--spsp-spin-hint-offset, 24px); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--spsp-spin-hint-bg, #333); color: var(--spsp-spin-hint-color, #fff); font-size: 13px; z-index: 4; pointer-events: none; transition: opacity .2s ease; }
.spotspin-spin__hint.is-hidden { opacity: 0; }
/* .spotspin-spin prefix raises specificity so a theme's `button { color: inherit }` can't hide the chevron */
.spotspin-spin .spotspin-spin__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: var(--spsp-nav-bg, #333); color: var(--spsp-nav-icon, #fff); cursor: pointer; transition: filter .15s ease; }
.spotspin-spin .spotspin-spin__nav .dashicons { color: var(--spsp-nav-icon, #fff); font-size: 22px; width: 22px; height: 22px; line-height: 22px; }
.spotspin-spin__nav:hover { filter: brightness(.82); }
.spotspin-spin__nav:focus-visible { outline: 3px solid var(--spsp-accent); outline-offset: 2px; }
.spotspin-spin__nav--round { border-radius: 50%; }
.spotspin-spin__nav--square { border-radius: 10px; }
.spotspin-spin .spotspin-spin__nav--none { background: transparent; }
.spotspin-spin__nav--none:hover { filter: none; background: rgba(0, 0, 0, .12); }
.spotspin-spin__nav--prev { left: 10px; }
.spotspin-spin__nav--next { right: 10px; }
.spotspin-spin.is-ready .spotspin-spin__frame { cursor: inherit; }

@media (prefers-reduced-motion: reduce) {
	.spotspin.is-pulse .spotspin-dot::after, .spotspin-hint__pulse::after { animation: none; }
	.spotspin-dot, .spotspin-card, .spotspin-spin__progress-bar, .spotspin-spin__hint, .spotspin-spin__nav { transition: none; }
}