/* WC Apple-Style Category Carousel  v1.0.4 */

/* ── Wrapper ─────────────────────────────────────────────────── */
.wacc-wrap {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: transparent;

	/* ▸ Hard reset against RTL / row-reverse injected by theme/builder */
	direction: ltr !important;
	unicode-bidi: embed;
}

/* ── Track (scrollable strip) ────────────────────────────────── */
.wacc-track {
	display: flex;
	gap: var(--wacc-gap, 18px);
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	padding: 8px 40px;
	/* leave space for nav buttons */
	width: 100%;
	height: 100%;
	scrollbar-width: none;
	/* firefox */
	-webkit-overflow-scrolling: touch;

	/* ▸ CRITICAL: always flex-start so scrollLeft=0 = first item.
	   justify-content:center on an overflowing flex container pushes
	   the first items into unreachable negative scroll territory.       */
	justify-content: flex-start !important;

	/* ▸ Hard reset against any theme/builder interference */
	direction: ltr !important;
	flex-direction: row !important;
	transform: none !important;
	touch-action: pan-x;
	overscroll-behavior-x: contain;
	unicode-bidi: embed;

	/* ▸ Snap only on desktop; on touch devices it can trap the scroll */
	scroll-snap-type: x proximity;
}

.wacc-track::-webkit-scrollbar {
	display: none;
}

/*
 * Desktop centring without justify-content.
 * When the items DON'T overflow, the track auto-sizes to content width
 * and margin:auto centres it inside .wacc-wrap.  When items DO overflow,
 * the track is 100% wide and scroll starts at item #1.
 */
.wacc-align-center .wacc-track {
	width: max-content;
	/* shrink to content when it fits               */
	max-width: 100%;
	/* but never wider than the wrapper              */
	margin-inline: auto;
	/* centres the track when it's narrower than wrap */
}

.wacc-align-left .wacc-track {
	width: 100%;
	margin-inline: 0;
}

/* ── Items ───────────────────────────────────────────────────── */
.wacc-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none !important;
	color: inherit;
	min-width: max-content;
	flex-shrink: 0;
	/* never compress items */
	scroll-snap-align: start;
}

.wacc-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	overflow: hidden;
}

.wacc-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.wacc-svg {
	width: 62%;
	height: 62%;
	color: rgba(0, 0, 0, .45);
}

.wacc-label {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease;
}

.wacc-item.is-active .wacc-label {
	font-weight: 700;
	border-bottom-color: rgb(0, 104, 211);
}

.wacc-item:hover .wacc-label {
	border-bottom-color: rgb(0, 104, 211);
}

/* ── Nav buttons ─────────────────────────────────────────────── */
.wacc-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .12);
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(6px);
	display: none;
	/* hidden on desktop */
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.wacc-nav span {
	font-size: 18px;
	line-height: 1;
	transform: translateY(-1px);
}

.wacc-nav--left {
	left: 8px;
}

.wacc-nav--right {
	right: 8px;
}

/* On mobile/tablet: enable arrows as flex, but keep opacity 0 until interaction */
@media (max-width: 1024px) {
	.wacc-nav {
		display: flex;
	}

	/* Show BOTH arrows during interaction */
	.wacc-wrap.wacc-interacting .wacc-nav {
		opacity: 1;
		pointer-events: auto;
	}
}

/* ── Mobile / Tablet fixes ───────────────────────────────────── */
@media (max-width: 1024px) {
	.wacc-track {
		/* Disable snap on touch – it can lock the user out of reaching
		   the start when the snap points list doesn't include index 0. */
		scroll-snap-type: none !important;
		scroll-behavior: auto;
		padding: 8px 12px;
	}

	/* On small screens, always take full width (no centring trick) */
	.wacc-align-center .wacc-track {
		width: 100%;
		margin-inline: 0;
	}
}

@media (max-width: 768px) {
	.wacc-track {
		padding: 8px 8px;
	}
}