/* ─── PDP prev/next navigation ──────────────────────────────── */
.rotitoo-pdp-nav {
	position: fixed;
	inset-block: 50% auto;
	inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
	z-index: 90;
	transform: translateY(-50%);
	pointer-events: none;
}

.rotitoo-pdp-nav__stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: auto;
}

.rotitoo-pdp-nav__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(210, 185, 168, 0.55);
	color: var(--rotitoo-sp-text, #2c2420);
	box-shadow:
		0 2px 8px rgba(30, 24, 20, 0.06),
		0 8px 24px rgba(30, 24, 20, 0.08);
	text-decoration: none;
	transition:
		border-color 0.22s ease,
		box-shadow 0.22s ease,
		transform 0.22s ease,
		background 0.22s ease;
	-webkit-tap-highlight-color: transparent;
}

.rotitoo-pdp-nav__btn:hover,
.rotitoo-pdp-nav__btn:focus-visible {
	border-color: rgba(184, 92, 74, 0.55);
	background: #fff;
	box-shadow:
		0 4px 14px rgba(184, 92, 74, 0.14),
		0 10px 28px rgba(30, 24, 20, 0.1);
	transform: scale(1.04);
	outline: none;
}

.rotitoo-pdp-nav__chevron {
	font-size: 1.35rem;
	font-weight: 300;
	line-height: 1;
	color: var(--rotitoo-sp-accent, #b85c4a);
	user-select: none;
}

[dir='rtl'] .rotitoo-pdp-nav__chevron {
	transform: scaleX(-1);
}

.rotitoo-pdp-nav__preview {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: calc(100% + 12px);
	transform: translateY(-50%) translateX(6px);
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: min(240px, 42vw);
	padding: 8px 12px 8px 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(210, 185, 168, 0.5);
	box-shadow: 0 10px 32px rgba(30, 24, 20, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.22s ease,
		transform 0.22s ease,
		visibility 0.22s ease;
}

[dir='rtl'] .rotitoo-pdp-nav__preview {
	transform: translateY(-50%) translateX(-6px);
}

.rotitoo-pdp-nav__btn:hover .rotitoo-pdp-nav__preview,
.rotitoo-pdp-nav__btn:focus-visible .rotitoo-pdp-nav__preview,
.rotitoo-pdp-nav__btn.is-preview-visible .rotitoo-pdp-nav__preview {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

.rotitoo-pdp-nav__preview-media {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: #faf7f4;
	border: 1px solid rgba(210, 185, 168, 0.35);
}

.rotitoo-pdp-nav__preview-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rotitoo-pdp-nav__preview-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--rotitoo-sp-text, #2c2420);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 1024px) {
	.rotitoo-pdp-nav {
		inset-block: auto 0;
		inset-inline: 0 0;
		transform: none;
		padding: 0 max(8px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
	}

	.rotitoo-pdp-nav__stack {
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
		width: 100%;
	}

	.rotitoo-pdp-nav__btn {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.rotitoo-pdp-nav__chevron {
		font-size: 1.5rem;
		font-weight: 400;
	}

	.rotitoo-pdp-nav__preview {
		display: none;
	}
}

@media (min-width: 1025px) {
	body.rotitoo-app-shell.single-product:has(.rotitoo-pdp-nav) {
		scroll-padding-inline-end: 56px;
	}
}