/* Product page in-page nav — scoped to the sticky .mped-float-section container.
   Works on the existing Elementor icon-list markup; no page edits required. */
.mped-float-section {
	--mpnav-accent: var(--e-global-color-feb7e08, #7260D1);
	--mpnav-text: #1F2124;
	--mpnav-chip-bg: rgba(255, 255, 255, 0.55);
}

.mped-float-section > .elementor-widget-icon-list {
	min-width: 0;
	max-width: 100%;
}

/* One row, never wraps; scrolls sideways if it runs out of room. */
.mped-float-section .elementor-icon-list-items {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 4px;
	margin: 0 !important;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mped-float-section .elementor-icon-list-items::-webkit-scrollbar { display: none; }

.mped-float-section .elementor-icon-list-items > .elementor-icon-list-item {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
}
.mped-float-section .elementor-icon-list-items > .elementor-icon-list-item::after { display: none !important; }

.mped-float-section .elementor-icon-list-item > a {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	padding: 8px 14px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.2;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mped-float-section .elementor-icon-list-item > a .elementor-icon-list-text {
	color: inherit !important;
	transition: none;
}
.mped-float-section .elementor-icon-list-item > a {
	color: var(--mpnav-text);
}

.mped-float-section .elementor-icon-list-item > a:hover,
.mped-float-section .elementor-icon-list-item > a:focus-visible {
	background: rgba(255, 255, 255, 0.8);
	color: var(--mpnav-accent);
}
.mped-float-section .elementor-icon-list-item > a:focus-visible {
	outline: 2px solid var(--mpnav-accent);
	outline-offset: 1px;
}

/* Current section (set by product-nav.js). */
.mped-float-section .elementor-icon-list-item.mpnav-active > a {
	background: var(--mpnav-accent);
	color: #fff;
	box-shadow: 0 2px 8px rgba(114, 96, 209, 0.35);
}

/* Links that leave the page get a small arrow so it's clear they open elsewhere. */
.mped-float-section .elementor-icon-list-item > a[target="_blank"] .elementor-icon-list-text::after {
	content: "\2197";
	margin-inline-start: 4px;
	font-size: .85em;
	opacity: .55;
}

/* Tablet: tighter pills so the whole bar fits on one line more often. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mped-float-section .elementor-icon-list-item > a {
		padding: 7px 11px;
		font-size: 13px !important;
	}
}

/* Mobile: a slim, swipeable chip bar instead of the tall vertical list. */
@media (max-width: 767px) {
	.mped-float-section.e-con {
		--padding-top: 6px !important;
		--padding-bottom: 6px !important;
		--padding-left: 6px !important;
		--padding-right: 6px !important;
		--gap: 0px !important;
		--row-gap: 0px !important;
		--border-radius: 14px !important;
		box-shadow: 0 4px 14px rgba(31, 33, 36, 0.08);
	}

	/* Use the horizontal list everywhere; drop the mobile-only vertical copy. */
	.mped-float-section > .elementor-widget-icon-list.elementor-hidden-mobile {
		display: block !important;
		width: 100%;
	}
	.mped-float-section > .elementor-widget-icon-list.elementor-hidden-desktop.elementor-hidden-tablet {
		display: none !important;
	}
	/* Pages with a single list: make sure it spans the bar. */
	.mped-float-section > .elementor-widget-icon-list {
		width: 100%;
	}

	.mped-float-section .elementor-icon-list-items {
		gap: 6px;
		justify-content: flex-start !important;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 6px;
		/* Fade the right edge to hint there is more to swipe. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}
	.mped-float-section .elementor-icon-list-items.mpnav-at-end {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.mped-float-section .elementor-icon-list-items > .elementor-icon-list-item {
		scroll-snap-align: start;
	}
	.mped-float-section .elementor-icon-list-items > .elementor-icon-list-item:last-child {
		padding-inline-end: 22px !important;
	}

	.mped-float-section .elementor-icon-list-item > a {
		min-height: 36px;
		padding: 8px 14px;
		background: var(--mpnav-chip-bg);
		font-size: 13px !important;
	}
	/* Icons (from single-list pages) stay, but compact. */
	.mped-float-section .elementor-icon-list-icon {
		padding-inline-end: 6px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mped-float-section .elementor-icon-list-item > a { transition: none; }
}