/* FoxnFound — 360° spin view (FNF_Spin). Loaded on product pages that carry a scan. */

.fnf-spin {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: #e9e9e9;               /* the stand's backdrop — frames blend in */
	overflow: hidden;
	touch-action: pan-y;               /* horizontal drag rotates, vertical still scrolls the page */
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.fnf-spin.is-started { cursor: grab; }
/* Once started, the viewer owns both axes — vertical finger drag tilts (owner's decision; filter fnf_spin_touch_tilt). */
.fnf-spin[data-touch-tilt="1"].is-started { touch-action: none; }
.fnf-spin.is-dragging { cursor: grabbing; }
.fnf-spin:focus-visible { box-shadow: inset 0 0 0 2px #876a39; }

.fnf-spin .fnf-spin-poster,
.fnf-spin .fnf-spin-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	pointer-events: none;
}
.fnf-spin .fnf-spin-canvas { opacity: 0; transition: opacity .25s ease; }
.fnf-spin.is-ready .fnf-spin-canvas { opacity: 1; }
.fnf-spin.is-ready .fnf-spin-poster { visibility: hidden; }

/* ── "View in 360°" — the only thing a visitor sees before the sheets download ── */
.fnf-spin .fnf-spin-start {
	position: absolute;
	left: 50%;
	bottom: 8%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: .55em;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: .7em 1.3em .7em 1.05em;
	border: 1px solid #876a39;
	border-radius: 999px;
	background: rgba(252, 248, 239, .94);
	color: #1c160d;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: none;
	box-shadow: 0 4px 14px rgba(28, 22, 13, .18);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fnf-spin .fnf-spin-start svg { width: 22px; height: 22px; fill: #876a39; transition: fill .15s ease; }
.fnf-spin .fnf-spin-start:hover,
.fnf-spin .fnf-spin-start:focus-visible {
	background: #876a39;
	color: #FCF8EF;
	transform: translateX(-50%) translateY(-1px);
	outline: none;
}
.fnf-spin .fnf-spin-start:hover svg,
.fnf-spin .fnf-spin-start:focus-visible svg { fill: #FCF8EF; }
.fnf-spin.is-started .fnf-spin-start { display: none; }

/* ── hint pill: shown once the frames are in, fades after the first touch ── */
.fnf-spin .fnf-spin-hint {
	position: absolute;
	left: 50%;
	top: 12px;
	transform: translateX(-50%);
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(28, 22, 13, .62);
	color: #FCF8EF;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	letter-spacing: .02em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
}
.fnf-spin.is-ready:not(.is-touched) .fnf-spin-hint { opacity: 1; transition-delay: .3s; }

/* ── progress hairline while a row downloads ── */
.fnf-spin .fnf-spin-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(28, 22, 13, .08);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}
.fnf-spin .fnf-spin-progress.is-loading { opacity: 1; }
.fnf-spin .fnf-spin-progress b {
	display: block;
	height: 100%;
	width: 0;
	background: #876a39;
	transition: width .2s ease;
}

/* ── controls: quiet cream circles, brass glyphs ── */
.fnf-spin .fnf-spin-ui {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 14px 10px 12px;
	background: linear-gradient(to top, rgba(28, 22, 13, .22), rgba(28, 22, 13, 0));
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
.fnf-spin.is-ready .fnf-spin-ui { opacity: 1; pointer-events: auto; }
.fnf-spin .fnf-spin-ui[hidden] { display: none; }

.fnf-spin .fnf-spin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #E4D9C3;
	border-radius: 50%;
	background: rgba(252, 248, 239, .94);
	color: #876a39;
	box-shadow: 0 1px 4px rgba(28, 22, 13, .18);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fnf-spin .fnf-spin-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fnf-spin .fnf-spin-btn:hover,
.fnf-spin .fnf-spin-btn:focus-visible { background: #FCF8EF; border-color: #876a39; outline: none; }
.fnf-spin .fnf-spin-btn.is-on { background: #876a39; border-color: #876a39; color: #FCF8EF; }
.fnf-spin .fnf-spin-btn[hidden] { display: none; }

/* play/pause share one button: filled play glyph, stroked pause bars */
.fnf-spin .fnf-spin-btn[data-act="play"] .fnf-spin-ico-play  { fill: currentColor; stroke: none; }
.fnf-spin .fnf-spin-btn[data-act="play"] .fnf-spin-ico-pause { display: none; fill: currentColor; stroke: none; }
.fnf-spin .fnf-spin-btn[data-act="play"].is-on .fnf-spin-ico-play  { display: none; }
.fnf-spin .fnf-spin-btn[data-act="play"].is-on .fnf-spin-ico-pause { display: block; }

/* ── full screen ── */
.fnf-spin:fullscreen {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	background: #e9e9e9;
}
.fnf-spin:fullscreen .fnf-spin-canvas,
.fnf-spin:fullscreen .fnf-spin-poster { object-fit: contain; }

/* ── the slide itself inside Flatsome's fade slider ── */
.product-gallery-slider .fnf-spin-cell { width: 100%; }

/* ── thumbnail in the strip: poster crop with the 360° glyph over it ── */
.product-thumbnails .fnf-spin-thumb a { position: relative; display: block; }
.product-thumbnails .fnf-spin-thumb .fnf-spin-thumb-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
	fill: #FCF8EF;
	filter: drop-shadow(0 1px 2px rgba(28, 22, 13, .6));
	pointer-events: none;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.fnf-spin .fnf-spin-canvas,
	.fnf-spin .fnf-spin-hint,
	.fnf-spin .fnf-spin-ui { transition: none; }
}