/* ========================================================
   GALANTE v0.7 • Logos de marcas enviados pela empresa
   Ajustes: largura do painel, espacamento e proporcao.
   As imagens locais preservam as cores e os fundos originais.
   ======================================================== */
:root {
  --brand-card-radius: 20px;
  --brand-card-padding: 24px;
  --brand-grid-gap: 22px;
}
[hidden] { display: none !important; }

/* A mesma proporcao visual nas tres telas. */
.brand-artwork {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}
.brand-artwork .brand-logo-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: none;
  transition: transform .2s ease;
}
.brand-artwork .brand-wordmark {
  padding: 16px;
  color: #122339;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
}

/* Home: 18 marcas selecionadas, grade regular e sem contagem de SKUs. */
#homeBrandGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
#homeBrandGrid .brand-home-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  height: auto;
  min-height: 144px;
  padding: 16px 12px 14px;
  background: #fff;
  border: 1px solid #dce5ed;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(9,21,37,.035);
}
#homeBrandGrid .home-brand-logo {
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 2 / 1;
  display: block;
}
#homeBrandGrid .home-brand-name {
  margin-top: auto;
  color: #41546a;
  text-transform: none;
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}
#homeBrandGrid .brand-home-tile:hover { border-color: #b1c9dc; }
#homeBrandGrid .brand-home-tile:hover .brand-logo-image { transform: scale(1.025); }

/* Pagina de marcas: areas iguais para logos diferentes, sem deformacao. */
#brandGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--brand-grid-gap);
  align-items: stretch;
}
#brandGrid .brand-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce5ed;
  border-radius: var(--brand-card-radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(7,23,40,.035);
}
#brandGrid .brand-card-mark {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 1;
  padding: 12px 20px 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}
#brandGrid .brand-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 18px var(--brand-card-padding) var(--brand-card-padding);
}
#brandGrid .brand-card h3 {
  margin: 0;
  color: #102239;
  font-size: 1.2rem;
  line-height: 1.22;
  font-weight: 800;
  text-wrap: wrap;
}
#brandGrid .brand-card-category {
  margin-top: 8px;
  color: #607185;
  font-size: .84rem;
  line-height: 1.5;
  min-height: 2.6em;
  text-wrap: wrap;
}
#brandGrid .card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
  color: #185a86;
  font-weight: 800;
  font-size: .86rem;
}
#brandGrid .brand-card:hover .brand-logo-image { transform: scale(1.025); }
#brandGrid .brand-card:hover { border-color: #abc4da; }

/* Area de busca e introducao, sem limites de largura herdados de outros blocos. */
.brands-hero {
  padding: 62px 0 58px;
  background: #070d15;
  background-image: linear-gradient(90deg, #070d15 0%, rgba(7,13,21,.94) 58%, rgba(7,13,21,.7) 100%), url('../img/logo-galante-black-blue.jpg');
  background-position: center, right center;
  background-size: cover, auto 100%;
  background-repeat: no-repeat;
}
.brands-hero .eyebrow { color: #fff; }
.brands-hero h1 {
  width: 100%;
  max-width: none;
  margin-top: 12px;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.14;
  text-wrap: wrap;
}
.brands-hero .lead {
  max-width: none;
  width: 100%;
  margin-top: 18px;
  font-size: 1.08rem;
  line-height: 1.65;
  text-wrap: wrap;
}
.brand-toolbar { box-shadow: 0 5px 18px rgba(7,23,40,.035); }

/* Pagina individual da marca. O mesmo arquivo tambem e usado no catalogo. */
.brand-detail-hero .brand-hero-grid {
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 40px;
  align-items: center;
}
.brand-detail-hero .eyebrow { color: #fff; }
.brand-detail-hero h1 { overflow-wrap: anywhere; }
.brand-detail-hero .lead { max-width: none; }
#brandDetailLogo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  padding: 12px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 20px 44px rgba(0,0,0,.15);
}
#brandDetailLogo .brand-artwork { border-radius: 12px; }

/* Teclado, tablet e celular. */
.brand-card a:focus-visible,
.brand-home-tile:focus-visible {
  outline: 3px solid #2f8fc5;
  outline-offset: 3px;
}
@media (max-width: 1080px) {
  #homeBrandGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #brandGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #brandGrid .brand-card-body { padding: 16px 18px 20px; }
}
@media (max-width: 900px) {
  #homeBrandGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #brandGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .brand-detail-hero .brand-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #brandDetailLogo { max-width: 320px; }
  .brands-hero { padding: 46px 0; }
  .brands-hero .lead { font-size: 1rem; }
}
@media (max-width: 540px) {
  #homeBrandGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #homeBrandGrid .brand-home-tile { padding: 12px 9px; min-height: 120px; }
  #brandGrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #brandGrid .brand-card-mark { padding: 16px 24px 0; max-height: 192px; }
  #brandGrid .brand-card-body { padding: 16px 24px 24px; }
  #brandGrid .brand-card-category { min-height: 0; }
  #brandGrid .card-link { margin-top: 12px; }
  .catalog-results-head { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-artwork .brand-logo-image,
  #brandGrid .brand-card,
  #homeBrandGrid .brand-home-tile { transition: none; transform: none; }
}