/**
 * ELPH Product Categories Elementor widget.
 * Self-contained so it can be reused in single-product and catalog templates.
 */

.elphguard-product-categories {
	--eg-category-text: #42545d;
	--eg-category-accent: #0d7890;
	--eg-category-divider: #d9e1e4;
	width: 100%;
}

.elphguard-product-categories__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elphguard-product-categories__item {
	margin: 0;
	padding: 0;
}

.elphguard-product-categories__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px 2px;
	border-bottom: 1px solid var(--eg-category-divider);
	color: var(--eg-category-text);
	line-height: 1.35;
	text-decoration: none;
	transition: color 160ms ease, padding-inline-start 160ms ease;
}

.elphguard-product-categories__link:hover,
.elphguard-product-categories__link:focus-visible {
	padding-inline-start: 7px;
	color: var(--eg-category-accent);
}

.elphguard-product-categories__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.elphguard-product-categories__item.is-active > .elphguard-product-categories__link {
	color: var(--eg-category-accent);
	font-weight: 600;
}

.elphguard-product-categories__item.is-current > .elphguard-product-categories__link {
	padding-inline-start: 8px;
	border-inline-start: 3px solid var(--eg-category-accent);
}

.elphguard-product-categories__children {
	padding-inline-start: 16px;
}

.elphguard-product-categories__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #edf2f3;
	color: inherit;
	font-size: 0.8em;
	line-height: 1;
}

.elphguard-product-categories__notice {
	padding: 12px;
	border: 1px dashed #c8d2d6;
	color: #667881;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.elphguard-product-categories__link {
		transition: none;
	}
}