/* ══════════════════════════════════════════
   BRANDS PAGE
   https://golden-line.ru/
   NOTE: gl-breadcrumb, gl-page-h1, gl-page-sub, gl-toolbar — in main.css
══════════════════════════════════════════ */

#page-brands {
  padding-top: calc(var(--nav-h) + 36px);
  min-height: 100vh;
}

/* ── Page Header ── */
.gl-brands-header {
  padding: 32px 32px 0;
  border-bottom: 1px solid var(--gl-line);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Toolbar */

.gl-brands-count {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gl-muted);
}

/* Search */
.gl-brands-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.gl-brands-search {
  border: 1px solid var(--gl-line);
  background: none;
  padding: 8px 36px 8px 14px;
  font-family: var(--gl-body);
  font-size: 11px;
  color: var(--gl-ink);
  width: 220px;
  transition: border-color 0.2s, width 0.2s;
}
.gl-brands-search::placeholder { color: var(--gl-muted); }
.gl-brands-search:focus { outline: none; border-color: var(--gl-ink); width: 260px; }

.gl-brands-search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gl-muted);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   ALPHABET NAV
══════════════════════════════════════════ */
.gl-alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--gl-line);
  padding: 0 32px;
  background: var(--gl-bg);
  position: sticky;
  top: calc(var(--nav-h) + 36px);
  z-index: 10;
}

.gl-alpha-btn {
  padding: 10px 8px;
  font-family: var(--gl-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gl-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  min-width: 32px;
  text-align: center;
}
.gl-alpha-btn:hover { color: var(--gl-ink); }
.gl-alpha-btn.active { color: var(--gl-ink); border-bottom-color: var(--gl-ink); }
.gl-alpha-btn.disabled { color: var(--gl-line); cursor: default; pointer-events: none; }

/* ══════════════════════════════════════════
   BRANDS LIST
══════════════════════════════════════════ */
.gl-brands-body {
  display: block;
}

.gl-brands-section {
  border-bottom: 1px solid var(--gl-line);
}

.gl-brands-section-header {
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--gl-line);
  display: flex;
  align-items: baseline;
  gap: 16px;
  position: sticky;
  top: calc(var(--nav-h) + 36px + 41px);
  background: var(--gl-bg);
  z-index: 5;
}

.gl-brands-letter {
  font-family: var(--gl-disp);
  font-size: 48px;
  line-height: 0.9;
  color: var(--gl-ink);
}

.gl-brands-letter-sub {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gl-muted);
}

.gl-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.gl-brand-item {
  border-right: 1px solid var(--gl-line);
  border-bottom: 1px solid var(--gl-line);
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background 0.15s;
}
.gl-brand-item:nth-child(3n) { border-right: none; }
.gl-brand-item:hover { background: var(--gl-bg2); }

.gl-brand-item-name {
  font-size: 13px;
  color: var(--gl-ink);
  line-height: 1.3;
  transition: color 0.15s;
}
.gl-brand-item:hover .gl-brand-item-name { color: var(--gl-ink); }

.gl-brand-item-tag {
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 2px 7px;
  display: inline-block;
  width: fit-content;
}
.gl-brand-item-tag--new { background: var(--gl-ink); color: var(--gl-bg); }
.gl-brand-item-tag--sale { background: var(--gl-red); color: #ffffff; }
.gl-brand-item-tag--promo { background: var(--gl-gold); color: #ffffff; }

/* No results */
.gl-brands-empty {
  padding: 80px 32px;
  text-align: center;
  display: none;
}
.gl-brands-empty.show { display: block; }
.gl-brands-empty-title {
  font-family: var(--gl-disp);
  font-size: 32px;
  color: var(--gl-ink);
  margin-bottom: 8px;
}
.gl-brands-empty-text { font-size: 13px; color: var(--gl-muted); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .gl-brands-grid { grid-template-columns: repeat(2, 1fr); }
  .gl-brand-item:nth-child(3n) { border-right: 1px solid var(--gl-line); }
  .gl-brand-item:nth-child(2n) { border-right: none; }
}

@media (max-width: 991.98px) {
  .gl-brands-grid { grid-template-columns: repeat(2, 1fr); }
  .gl-brand-item:nth-child(3n) { border-right: 1px solid var(--gl-line); }
  .gl-brand-item:nth-child(2n) { border-right: none; }
}

@media (max-width: 767.98px) {
  .gl-brands-header { padding: 20px 16px 0; }
  .gl-alpha-nav { padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .gl-alpha-nav::-webkit-scrollbar { display: none; }
  .gl-alpha-btn { padding: 10px 6px; font-size: 10px; min-width: 28px; }
  .gl-brands-section-header { padding: 14px 16px 12px; }
  .gl-brands-letter { font-size: 36px; }
  .gl-brand-item { padding: 14px 16px; }
  .gl-brands-grid { grid-template-columns: repeat(2, 1fr); }
  
  .gl-brands-search { width: 160px; }
  .gl-brands-search:focus { width: 180px; }
}