/* Epas Category Carousel — dependency-free, hardened against theme overrides. */

.epcc,
.epcc * {
	font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	box-sizing: border-box !important;
}

.epcc[data-epcc] {
	--epcc-ink: #111 !important;
	--epcc-muted: #9a9a9a !important;
	--epcc-line: #e6e6e6 !important;
	--epcc-thumb-h: 64px;
	position: relative !important;
	padding: 0 56px !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Track */
.epcc .epcc-track {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	list-style: none !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}
.epcc .epcc-track::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* Item */
.epcc a.epcc-item {
	flex: 0 0 auto !important;
	width: 168px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 10px 8px !important;
	margin: 0 !important;
	text-decoration: none !important;
	scroll-snap-align: start !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.epcc .epcc-thumb {
	width: 65px !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.epcc .epcc-thumb img {
	max-width: 65px !important;
	max-height: unset !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
	mix-blend-mode: multiply; /* blends white PNG bg into light layouts */
}

/* Name — muted by default, black + bold on hover, no layout shift */
.epcc .epcc-name {
	position: relative !important;
	display: block !important;
	text-align: center !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	font-weight: 400 !important;
	color: var(--epcc-muted) !important;
	transition: color .15s ease !important;
}
.epcc .epcc-name::after {
	content: attr(data-text);
	display: block !important;
	height: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	font-weight: 600 !important;
	pointer-events: none !important;
}
.epcc a.epcc-item:hover .epcc-name,
.epcc a.epcc-item:focus-visible .epcc-name {
	color: var(--epcc-ink) !important;
	font-weight: 600 !important;
}
.epcc a.epcc-item:focus-visible { outline: none !important; }
.epcc a.epcc-item:focus-visible .epcc-thumb { outline: 2px solid var(--epcc-ink) !important; outline-offset: 4px !important; border-radius: 6px !important; }

/* Nav arrows */
.epcc .epcc-nav {
	position: absolute !important;
	top: calc(10px + (var(--epcc-thumb-h) / 2)) !important;
	transform: translateY(-50%) !important;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--epcc-ink) !important;
	border: 1px solid var(--epcc-line) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
	cursor: pointer !important;
	z-index: 2 !important;
	transition: opacity .15s ease, box-shadow .15s ease !important;
}
.epcc .epcc-nav:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12) !important; background: #fff !important; color: var(--epcc-ink) !important; }
.epcc .epcc-nav:focus-visible { outline: 2px solid var(--epcc-ink) !important; outline-offset: 2px !important; }
.epcc .epcc-prev { left: 0 !important; }
.epcc .epcc-next { right: 0 !important; }
.epcc .epcc-nav[disabled] { opacity: .3 !important; cursor: default !important; box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; }

/* When everything fits, hide arrows and the side padding they reserved */
.epcc.epcc-no-scroll { padding: 0 !important; }
.epcc.epcc-no-scroll .epcc-nav { display: none !important; }
.epcc.epcc-no-scroll .epcc-track { justify-content: center !important; }

@media (max-width: 600px) {
	.epcc[data-epcc] { padding: 0 42px !important; }
	.epcc .epcc-nav { width: 38px !important; height: 38px !important; }
	.epcc a.epcc-item { width: 140px !important; }
	.epcc .epcc-name { font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.epcc .epcc-track { scroll-behavior: auto !important; }
	.epcc *, .epcc *::before, .epcc *::after { transition: none !important; }
}