/* Nexsaver Brands Directory */
:root {
	--nx-ink: #0d2647;
	--nx-text: #5b6b7f;
	--nx-blue: #1f63ad;
	--nx-tile: #eaf2fb;
	--nx-line: #e2e9f1;
	--nx-bg: #f4f7fb;
	--nx-radius: 14px;
}

/* ---------- Brands directory (nxbd-* : unique names so theme/page CSS can't override) ---------- */
.nxbd-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 20px 48px; }
.nxbd-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #4a6a8f; margin: 0 0 12px; }
.nxbd-title { font-size: clamp(28px, 3.6vw, 42px) !important; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--nx-ink); margin: 0 0 16px !important; }

.nxbd { margin: 0 0 40px; }
.nxbd-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
	padding: 8px 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--nx-line);
}
.nxbd-search {
	display: flex; align-items: center; gap: 8px; flex: 0 1 300px; margin: 0;
	padding: 0 12px; height: 40px; border: 1px solid #cfdbe8; border-radius: 999px; background: #fff; color: #7a889a;
}
.nxbd-search:focus-within { border-color: var(--nx-blue); box-shadow: 0 0 0 3px rgba(31, 99, 173, .12); }
.nxbd-search svg { width: 16px; height: 16px; flex: none; }
.nxbd-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0; font-size: 14px; height: 38px; }
.nxbd-az { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }
.nxbd-az button {
	min-width: 28px; height: 28px; padding: 0 6px; margin: 0; border: 0; border-radius: 7px;
	background: transparent; color: var(--nx-blue); font-size: 13px; font-weight: 600; line-height: 28px; cursor: pointer;
	box-shadow: none; text-transform: none; letter-spacing: 0;
}
.nxbd-az button:hover:not(:disabled) { background: var(--nx-tile); }
.nxbd-az button.is-on { background: var(--nx-blue); color: #fff; }
.nxbd-az button:disabled { color: #c3ccd6; cursor: default; }
.nxbd-total { font-size: 13px; color: #8a98a8; margin-left: auto; }

.nxbd-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
	gap: 10px !important;
	margin: 0; padding: 0;
}
.nxbd-card {
	display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 4px;
	width: auto !important; min-height: 0 !important; margin: 0 !important;
	padding: 12px 6px 10px !important; background: #fff; border: 1px solid var(--nx-line); border-radius: 12px;
	text-decoration: none !important; color: var(--nx-ink) !important;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nxbd-card:hover, .nxbd-card:focus-visible { transform: translateY(-2px); border-color: #c9d9ec; box-shadow: 0 10px 24px -14px rgba(13, 38, 71, .3); }
.nxbd-card[hidden] { display: none !important; }
.nxbd-logo {
	width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--nx-line);
	display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; margin-bottom: 6px;
	box-shadow: 0 1px 2px rgba(13, 38, 71, .06);
}
.nxbd-logo img.nxbd-img { width: 32px !important; height: 32px !important; max-width: none; object-fit: contain; border-radius: 6px; margin: 0 !important; }
.nxbd-mono {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	font-size: 15px; font-weight: 700; letter-spacing: .02em;
	background: hsl(var(--h, 210) 60% 95%); color: hsl(var(--h, 210) 45% 32%);
}
.nxbd-name { font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none !important; }
.nxbd-count { font-size: 12px; color: #8a98a8; text-decoration: none !important; }
.nxbd-empty { color: var(--nx-text); padding: 24px 0; }

@media (max-width: 600px) {
	.nxbd-wrap { padding: 28px 14px 40px; }
	.nxbd-search { flex: 1 1 100%; }
	.nxbd-total { display: none; }
	.nxbd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
	.nxbd-card { padding: 12px 4px 10px !important; }
	.nxbd-logo { width: 44px; height: 44px; }
	.nxbd-logo img.nxbd-img { width: 28px !important; height: 28px !important; }
	.nxbd-name { font-size: 12.5px; }
	.nxbd-count { display: none; }
}