/* Brand index (route=product/manufacturer) — giassaris theme */
.brands-page { padding-block: 8px 64px; }
.brands-page__title { margin: 8px 0 20px; font-size: var(--fs-2xl); }

/* letter jump index */
.brands-index { margin: 0 0 28px; color: var(--c-text-muted); line-height: 2; }
.brands-index strong { margin-right: 8px; }
.brands-index a {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  margin: 0 2px;
  color: var(--c-accent-text);
  font-weight: var(--fw-medium);
}

.brands-group { margin-bottom: 32px; }
.brands-group__letter {
  font-size: var(--fs-xl);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  scroll-margin-top: 120px;
}

/* horizontal wrapping grid of brand icons */
.brands-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  justify-content: start;
  gap: 16px;
}
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  text-align: center;
  transition: border-color var(--t), box-shadow var(--t);
}
.brand-card:hover { border-color: var(--c-accent); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.brand-card__logo { max-width: 100%; height: 60px; object-fit: contain; }
.brand-card__name { font-size: var(--fs-sm, 14px); font-weight: var(--fw-medium); overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .brands-page__title { font-size: var(--fs-xl); }
  .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Brands page: the curated ho_brands grid, not the A-Z index ----
   The module reuses the homepage strip's .brands/.brand-logo markup, which is a
   textured band of white bordered tiles. Here the client wants the logos bare on
   the page (their reference is bikers-world.gr/el/brands), so this page strips
   the texture AND the tiles.

   Both have to go together: 10 of the 12 logo files carry a white matte baked in
   (9 JPEG plus one opaque PNG), so dropping the tiles while keeping the texture
   leaves ten white rectangles floating on concrete. With the page behind them
   white, that matte is invisible and no image surgery is needed.

   Sizes are evened out server-side instead — ho_brands asks ModelToolImage::logo
   for a trimmed logo at a constant optical area on this route only, so the
   homepage strip is untouched. Note home.css IS loaded here (every stylesheet
   is), so these rules win on specificity — .product_manufacturer .brands beats
   the plain .brands they override, not on source order. */
/* The <article> above carries 64px of bottom padding meant to sit under a full
   A-Z index; with only the h1 left in it that reads as a hole between the title
   and the first row. */
.product_manufacturer .brands-page { padding-bottom: 8px; }
:is(.product_manufacturer, .mega--brands) .brands {
  background: none;
  padding: 0 0 40px;
}
:is(.product_manufacturer, .mega--brands) .brands__logos {
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 16px;
  margin-bottom: 0;
}
:is(.product_manufacturer, .mega--brands) .brand-logo {
  height: 150px;
  background: none;
  border: 0;
  padding: 16px;
}
/* The constant-area width arrives as a custom property rather than a literal
   inline width, so a media query can swap in the phone-sized one without an
   !important fight. Height always follows the aspect. */
:is(.product_manufacturer, .mega--brands) .brand-logo img { width: var(--logo-w); height: auto; max-width: 100%; }
/* No card means nothing for a drop shadow to fall from — it would draw a
   rectangle around a transparent box. Keep the lift, drop the shadow. */
@media (min-width: 1025px) {
  :is(.product_manufacturer, .mega--brands) .brand-logo:hover {
    transform: translateY(-8px);
    box-shadow: none;
  }
}
/* the four brands with no logo file yet render as their name */
:is(.product_manufacturer, .mega--brands) .brand-logo span {
  font-size: var(--fs-lg, 18px);
  font-weight: var(--fw-bold);
  text-align: center;
}
/* Column count follows the cell width the logos need (~220px), not round
   viewport numbers: at 5-up below 1400 the cells get too narrow, the widest
   wordmarks cap against them and the areas stop matching. */
@media (max-width: 1451px) {
  :is(.product_manufacturer, .mega--brands) .brands__logos { grid-template-columns: repeat(4, 1fr); }
  /* Below 5-up the cells no longer clear the 220px the desktop size needs once
     the tile padding is taken off, so the whole band drops to the smaller size
     rather than letting only the wide wordmarks cap against the cell. */
  :is(.product_manufacturer, .mega--brands) .brand-logo img { width: var(--logo-w-sm); }
}
@media (max-width: 1023px) {
  :is(.product_manufacturer, .mega--brands) .brands__logos { grid-template-columns: repeat(3, 1fr); }
  :is(.product_manufacturer, .mega--brands) .brand-logo { height: 120px; }
}
@media (max-width: 767px) {
  :is(.product_manufacturer, .mega--brands) .brands__logos { grid-template-columns: repeat(2, 1fr); }
  :is(.product_manufacturer, .mega--brands) .brand-logo { height: 110px; padding: 12px; }
}

/* ---- The same grid inside the header "Brands" dropdown ----
   menu.twig renders that module a second time inside the mega panel (client
   demo feedback #5: the menu item has to open a dropdown, not just navigate),
   so the rules above are shared with :is() and only the wrappers differ here --
   there is no .brands-page <article> around it, and .section's own vertical
   padding would push the logos off the panel. The desktop nav is the only place
   this panel is visible, so the 5-up grid is the only column count it uses. */
.mega--brands .section { padding: 0; }
.mega--brands .brands { padding: 24px 60px 28px; }
.mega--brands .brands__logos { margin-bottom: 20px; }