/*
 * /product-categories/ directory page only (template-category-directory.php).
 * A compact B2B category listing — deliberately not the large icon-grid
 * tiles used on the homepage "Shop by Category" section. Explicit
 * repeat(N, 1fr) column tracks throughout (never auto-fit/minmax) so a
 * short final row never stretches into oversized panels — same principle
 * as the Catalog Layout grid fix (see woocommerce.css).
 */

.gs-category-directory-page .gs-page__title {
	margin-bottom: var(--gs-space-md);
}

.gs-category-directory {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: var(--gs-space-lg);
	margin-top: var(--gs-space-lg);
}

.gs-category-directory__group {
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
	overflow: hidden;
}

.gs-category-directory__header {
	display: flex;
	align-items: center;
	gap: var(--gs-space-sm);
	padding: var(--gs-space-md);
	border-bottom: 1px solid var(--gs-color-border);
	transition: background-color 0.15s ease;
}

.gs-category-directory__group--flat .gs-category-directory__header {
	border-bottom: none;
}

.gs-category-directory__header:hover {
	background: var(--gs-color-background-subtle);
}

.gs-category-directory__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gs-color-background-subtle);
	color: var(--gs-color-primary);
	overflow: hidden;
}

.gs-category-directory__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.gs-category-directory__heading-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.gs-category-directory__name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--gs-color-text);
	line-height: 1.3;
}

.gs-category-directory__count {
	font-size: 0.75rem;
	color: var(--gs-color-text-muted);
}

.gs-category-directory__sublist {
	list-style: none;
	margin: 0;
	padding: var(--gs-space-sm) var(--gs-space-md);
}

.gs-category-directory__subitem + .gs-category-directory__subitem {
	border-top: 1px solid var(--gs-color-background-subtle);
}

.gs-category-directory__sublink {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gs-space-sm);
	padding: 0.5rem 0;
	padding-inline-start: var(--gs-space-md);
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
	position: relative;
}

/* Subordinate-to-parent visual cue: a short tick mark instead of a bullet,
   indented under the parent header above. */
.gs-category-directory__sublink::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 1px;
	background: var(--gs-color-border);
}

.gs-category-directory__sublink:hover {
	color: var(--gs-color-primary);
}

.gs-category-directory__subname {
	font-weight: 500;
}

.gs-category-directory__subcount {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--gs-color-text-muted);
}

.gs-category-directory__empty {
	color: var(--gs-color-text-muted);
	margin-top: var(--gs-space-lg);
}

/* =========================================================================
   Tablet (<= 1024px)
   ========================================================================= */

@media (max-width: 1024px) {
	.gs-category-directory {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   Phone (<= 767px)
   ========================================================================= */

@media (max-width: 767px) {
	.gs-category-directory {
		grid-template-columns: 1fr;
		gap: var(--gs-space-md);
	}

	.gs-category-directory__header {
		padding: var(--gs-space-sm) var(--gs-space-md);
	}

	.gs-category-directory__media {
		width: 40px;
		height: 40px;
	}
}