/* HE WooCommerce Categories List — baseline layout
 * Elementor controls generate column count, gaps, list-style, typography,
 * colors, borders, etc. This file only provides structural defaults so the
 * widget renders sensibly before any styling is applied. */

.he-wccl {
	width: 100%;
}

.he-wccl__list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Multi-column layout: column count + gap come from Elementor controls. */
	columns: 1;
	column-gap: 28px;
}

.he-wccl__item {
	break-inside: avoid;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: .5em;
}

.he-wccl__item.he-wccl__item--stacked {
	flex-direction: column;
	align-items: flex-start;
}

.he-wccl__link {
	display: flex;
	align-items: inherit;
	gap: inherit;
	text-decoration: none;
	color: inherit;
	width: 100%;
}

.he-wccl__image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.he-wccl__text {
	display: flex;
	flex-direction: column;
}

.he-wccl__count {
	margin-inline-start: .35em;
	opacity: .7;
}

.he-wccl__desc {
	margin-top: .25em;
	font-size: .9em;
}

/* Nested lists (hierarchical mode) — children indent inside their parent <li>. */
.he-wccl__list .he-wccl__list {
	padding-inline-start: 1.25em;
	margin-top: .5em;
	columns: 1;
}