/* ==========================================================================
   MediMix — brands.css (brands directory, page-brands.php)
   ========================================================================== */

/* ---------- Hero ---------- */
.mx-bd-hero {
	padding-block: var(--mx-s6) var(--mx-s8);
	background:
		radial-gradient(120% 90% at 100% 0%, var(--mx-gold-soft) 0%, transparent 60%),
		linear-gradient(180deg, var(--mx-surface) 0%, var(--mx-bg) 100%);
	border-bottom: 1px solid var(--mx-line-2);
}
.mx-bd-hero__row { display: grid; gap: var(--mx-s5); margin-top: var(--mx-s3); }
@media (min-width: 900px) {
	.mx-bd-hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--mx-s10); }
}
.mx-bd-hero__title { margin: 0 0 var(--mx-s2); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.75rem); letter-spacing: -.01em; }
.mx-bd-hero__desc { margin: 0; max-width: 60ch; color: var(--mx-ink-2); }
.mx-bd-hero__desc p { margin: 0; }

.mx-bd-stats { display: flex; gap: var(--mx-s2); margin: 0; padding: 0; list-style: none; }
.mx-bd-stats li {
	display: grid; gap: 2px; min-width: 96px; padding: var(--mx-s3) var(--mx-s4);
	border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); background: rgb(255 255 255 / 75%);
}
.mx-bd-stats strong { font-size: 1.35rem; line-height: 1.2; color: var(--mx-gold-ink); font-variant-numeric: tabular-nums; }
.mx-bd-stats span { font-size: var(--mx-fs-xs); color: var(--mx-muted); }
@media (max-width: 599px) {
	.mx-bd-stats li { flex: 1; min-width: 0; padding: var(--mx-s2) var(--mx-s3); }
	.mx-bd-stats strong { font-size: 1.1rem; }
}

/* Search */
.mx-bd-search { position: relative; margin-top: var(--mx-s6); max-width: 720px; }
.mx-bd-search__icon { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: var(--mx-muted); pointer-events: none; }
.mx-bd .mx-bd-search__input {
	min-height: 56px; padding-inline: 50px 50px; border-radius: var(--mx-r-pill);
	border-color: var(--mx-line); box-shadow: var(--mx-shadow-md); font-size: var(--mx-fs-lg);
}
.mx-bd-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mx-bd-search__clear {
	position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: var(--mx-surface); color: var(--mx-ink-2);
}
.mx-bd-search__clear:hover { background: var(--mx-surface-2); color: var(--mx-ink); }
.mx-bd-search__clear[hidden] { display: none; }

/* ---------- Most shopped ---------- */
.mx-bd-top { padding-block: var(--mx-s6) var(--mx-s2); }
.mx-bd-top[hidden] { display: none; }
.mx-bd-top__title { font-size: var(--mx-fs-h3); margin-bottom: var(--mx-s4); }
.mx-bd-top__list {
	display: grid; grid-auto-flow: column; grid-auto-columns: 38%; gap: var(--mx-s3);
	margin: 0 calc(var(--mx-gutter) * -1); padding: 2px var(--mx-gutter) var(--mx-s2); list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.mx-bd-top__list::-webkit-scrollbar { display: none; }
.mx-bd-top__list > li { scroll-snap-align: start; }
@media (min-width: 600px) { .mx-bd-top__list { grid-auto-columns: 22%; } }
@media (min-width: 900px) {
	.mx-bd-top__list { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}
.mx-bd-top__card {
	position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: var(--mx-s4) var(--mx-s4) var(--mx-s6);
	border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-lg); background: #fff; text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s var(--mx-ease);
}
.mx-bd-top__card img { width: 100%; height: 100%; object-fit: contain; }
.mx-bd-top__card:hover { border-color: var(--mx-gold); box-shadow: var(--mx-shadow-md); transform: translateY(-2px); }
.mx-bd-top__count {
	position: absolute; inset-inline: 0; bottom: 8px; text-align: center;
	font-size: var(--mx-fs-xs); font-weight: 500; color: var(--mx-muted);
}

/* ---------- Controls ---------- */
.mx-bd-body { padding-bottom: var(--mx-s12); }
.mx-bd-controls { display: grid; gap: var(--mx-s3); padding-top: var(--mx-s6); }
.mx-bd-cats { margin-inline: calc(var(--mx-gutter) * -1); padding-inline: var(--mx-gutter); overflow-x: auto; scrollbar-width: none; }
.mx-bd-cats::-webkit-scrollbar { display: none; }
.mx-bd-cats .mx-chips { flex-wrap: nowrap; padding-bottom: 2px; }
@media (min-width: 900px) {
	.mx-bd-cats { margin-inline: 0; padding-inline: 0; overflow: visible; }
	.mx-bd-cats .mx-chips { flex-wrap: wrap; }
}
.mx-bd-cats .mx-chip { cursor: pointer; }
.mx-bd-chip-n { font-size: var(--mx-fs-xs); color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.mx-chip.is-active .mx-bd-chip-n { color: rgb(255 255 255 / 70%); }

.mx-bd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mx-s2) var(--mx-s4); }
.mx-bd-count { margin: 0; margin-inline-end: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.mx-bd-toggle { display: inline-flex; align-items: center; gap: var(--mx-s2); min-height: 44px; font-size: var(--mx-fs-sm); cursor: pointer; user-select: none; }
.mx-bd-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mx-bd-toggle__track {
	position: relative; width: 40px; height: 24px; border-radius: var(--mx-r-pill); background: var(--mx-line);
	transition: background .2s;
}
.mx-bd-toggle__track::after {
	content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: #fff; box-shadow: var(--mx-shadow-sm); transition: transform .2s var(--mx-ease);
}
.mx-bd-toggle input:checked + .mx-bd-toggle__track { background: var(--mx-success); }
.mx-bd-toggle--sale input:checked + .mx-bd-toggle__track { background: var(--mx-accent); }
.mx-bd-toggle input:checked + .mx-bd-toggle__track::after { transform: translateX(-16px); }
[dir="ltr"] .mx-bd-toggle input:checked + .mx-bd-toggle__track::after { transform: translateX(16px); }
.mx-bd-toggle input:focus-visible + .mx-bd-toggle__track { outline: 2px solid var(--mx-focus); outline-offset: 2px; }

.mx-bd-sort { position: relative; display: inline-flex; align-items: center; }
.mx-bd-sort .mx-icon { position: absolute; inset-inline-start: 12px; color: var(--mx-muted); pointer-events: none; }
.mx-bd-sort select { width: auto; min-height: 44px; padding-inline-start: 38px; font-size: var(--mx-fs-sm); border-radius: var(--mx-r-pill); }

/* ---------- Letter index (sticky under the header) ---------- */
.mx-bd-letters {
	position: sticky; top: var(--mx-head-offset, var(--mx-bd-top-offset, 0px)); transition: top .3s var(--mx-ease); z-index: 20;
	margin: var(--mx-s4) calc(var(--mx-gutter) * -1) var(--mx-s2); padding: var(--mx-s2) var(--mx-gutter);
	background: rgb(255 255 255 / 94%); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
	border-block: 1px solid var(--mx-line-2);
	overflow-x: auto; scrollbar-width: none;
}
.mx-bd-letters::-webkit-scrollbar { display: none; }
.mx-bd-letters ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; width: max-content; }
@media (min-width: 1200px) { .mx-bd-letters ol { width: auto; flex-wrap: wrap; } }
.mx-bd-letters a {
	display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px;
	border-radius: var(--mx-r-sm); text-decoration: none; font-weight: 700; font-size: var(--mx-fs-sm); color: var(--mx-ink-2);
	transition: background .15s, color .15s;
}
.mx-bd-letters a:hover { background: var(--mx-surface); color: var(--mx-ink); }
.mx-bd-letters a.is-current { background: var(--mx-ink); color: #fff; }
.mx-bd-letters a.is-off { opacity: .3; pointer-events: none; }
.mx-bd.is-flat .mx-bd-letters { display: none; }

/* ---------- Groups & cards ---------- */
.mx-bd-group { padding-top: var(--mx-s6); content-visibility: auto; contain-intrinsic-size: auto 640px; scroll-margin-top: calc(var(--mx-bd-top-offset, 0px) + 64px); }
.mx-bd-group[hidden] { display: none; }
.mx-bd-group__letter {
	display: flex; align-items: baseline; gap: var(--mx-s3); margin: 0 0 var(--mx-s4);
	font-size: var(--mx-fs-h2); color: var(--mx-gold-ink);
}
.mx-bd-group__letter::after { content: ""; flex: 1; height: 1px; background: var(--mx-line); align-self: center; }
.mx-bd-group__letter small { order: 2; font-size: var(--mx-fs-xs); font-weight: 500; color: var(--mx-muted); }

.mx-bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mx-s2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-bd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mx-s3); } }
@media (min-width: 900px) { .mx-bd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mx-bd-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--mx-s4); } }
.mx-bd-grid--flat { padding-top: var(--mx-s6); }
.mx-bd-grid[hidden], .mx-bd-item[hidden] { display: none; }

.mx-bd-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-lg); background: #fff;
	text-decoration: none; color: var(--mx-ink); overflow: hidden;
	transition: border-color .2s, box-shadow .2s, transform .2s var(--mx-ease);
}
.mx-bd-card:hover { border-color: var(--mx-gold); box-shadow: var(--mx-shadow-md); transform: translateY(-2px); color: var(--mx-ink); }
.mx-bd-card:focus-visible { outline-offset: 3px; border-radius: var(--mx-r-lg); }
.mx-bd-card__logo { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 1; padding: var(--mx-s3); }
.mx-bd-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.mx-bd-card__mono {
	display: grid; place-items: center; width: 64%; aspect-ratio: 1; border-radius: 50%;
	background: var(--mx-gold-soft); color: var(--mx-gold-ink); font-size: 1.5rem; font-weight: 700; text-transform: uppercase;
}
.mx-bd-card__name {
	padding: 0 var(--mx-s2); text-align: center; font-weight: 700; font-size: var(--mx-fs-sm); line-height: 1.35;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-bd-card__count { padding: 2px var(--mx-s2) var(--mx-s3); text-align: center; font-size: var(--mx-fs-xs); color: var(--mx-muted); }

/* Nothing in stock right now: still listed (and linked), visibly quieter. */
.mx-bd-card--out .mx-bd-card__logo img { filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
.mx-bd-card--out:hover .mx-bd-card__logo img { filter: none; opacity: 1; }
.mx-bd-card--out .mx-bd-card__name { color: var(--mx-ink-2); }
.mx-bd-card--out .mx-bd-card__count { color: var(--mx-warning); }
.mx-bd-card__sale {
	position: absolute; top: 8px; inset-inline-start: 8px;
	padding: 1px 8px; border-radius: var(--mx-r-pill); background: var(--mx-accent-soft); color: var(--mx-accent);
	font-size: 11px; font-weight: 700; line-height: 1.6;
}

.mx-bd-empty[hidden] { display: none; }
.mx-bd-empty .mx-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mx-s2); }