/**
 * Brand List page — search box, alphabet jump nav, and the A–Z brand grid.
 */

.zozia-brand-list__crumbs a {
	color: inherit;
	text-decoration: none;
}

.zozia-brand-list__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--lg);
}

.zozia-brand-list__search {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.zozia-brand-list__search-box {
	display: flex;
	align-items: center;
	width: 340px;
	max-width: 100%;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 8px;
	padding: 10px 16px;
}

.zozia-brand-list__search-input {
	width: 100%;
	border: none;
	outline: none;
	background: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.zozia-brand-list__search-input::placeholder {
	color: var(--wp--preset--color--muted);
}

.zozia-brand-list__search-btn {
	border: none;
	border-radius: 8px;
	padding: 12px 28px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	cursor: pointer;
}

.zozia-brand-list__search-btn:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

.zozia-brand-list__alphabet {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.zozia-brand-list__letter-link {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.zozia-brand-list__letter-link:hover {
	text-decoration: underline;
}

.zozia-brand-list__letter-link.is-disabled {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	opacity: 0.45;
	pointer-events: none;
}

.zozia-brand-list__divider {
	margin: var(--wp--preset--spacing--lg) 0 0;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.zozia-brand-list__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl);
	margin-top: var(--wp--preset--spacing--xl);
}

.zozia-brand-list__group {
	display: flex;
	flex-direction: column;
	gap: 14px;
	scroll-margin-top: 120px;
}

.zozia-brand-list__group.is-hidden {
	display: none;
}

.zozia-brand-list__group-letter {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	color: var(--wp--preset--color--ink);
}

.zozia-brand-list__group-divider {
	margin: 0;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.zozia-brand-list__group-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zozia-brand-list__group-list li.is-hidden-item {
	display: none;
}

.zozia-brand-list__brand-link {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.zozia-brand-list__brand-link:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.zozia-brand-list__empty {
	margin-top: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1024px) {
	.zozia-brand-list__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.zozia-brand-list__grid {
		grid-template-columns: 1fr;
	}

	.zozia-brand-list__toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.zozia-brand-list__search {
		flex-direction: column;
		align-items: stretch;
	}

	.zozia-brand-list__search-box {
		width: 100%;
	}
}