/* ============================================================
   brands.css — SAR Marine · Brand Listing Page
   Reuses prd- layout from categories.css + sub-categories.css.
   This file only adds brand-specific sidebar active states
   and the brand header variant.
   ============================================================ */

/* ── 1. BRAND SIDEBAR ACTIVE STATE ───────────────────────────── */
/*
   brands.php marks the active brand in the sidebar with is-active.
   The base link styles are already in categories.css (.prd-widget-list).
   This adds the visual accent strip for the active item.
*/
.prd-widget-list li.is-active > a,
.prd-widget-list li a.is-active {
  color: var(--color-orange) !important;
  font-weight: 700;
  background: var(--color-orange-pale);
  padding-left: var(--space-3);
}

/* ── 2. BRAND PAGE HEADER VARIANT ────────────────────────────── */
/*
   brands.php shares .prd-page-header with products.php.
   The brand logo is shown prominently — give it room.
*/
.prd-page-header__inner .brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.prd-page-header__inner .brand-logo-wrap img {
  height: 48px;
  width: auto;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── 3. BRANDS OVERVIEW GRID (brand index page) ───────────────── */
/*
   When no brand slug is given, brands.php may show a grid of all
   brand tiles before the product list.
*/
.brands-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
  cursor: pointer;
}

.brand-tile:hover {
  border-color: rgba(224, 92, 11, 0.35);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.brand-tile img {
  height: 52px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter var(--transition-base);
}

.brand-tile:hover img {
  filter: grayscale(0%);
}

.brand-tile__name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-40);
  text-align: center;
  transition: color var(--transition-fast);
}

.brand-tile:hover .brand-tile__name {
  color: var(--color-orange);
}

/* ── 4. RESPONSIVE — BRANDS ───────────────────────────────────── */
@media (max-width: 768px) {
  .brands-index-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 425px) {
  .brands-index-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── 375px and below ─────────────────────────────────────────── */
@media (max-width: 375px) {
  .brands-index-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* ─── 320px and below ─────────────────────────────────────────── */
@media (max-width: 320px) {
  .brands-index-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
}

/* ─── 480px legacy, covered by 425px above ── */
@media (max-width: 480px) {
  /* Styles inherited from 425px breakpoint */
}