/* Featured brands share one quiet, monochrome treatment, including Voxie. */
body[data-page="home"] .brand-logo-bar {
  flex-direction: column;
  gap: 5px;
  padding-block: 16px;
  color: #1d1d1d;
}
.brand-logo-label {
  margin: 0;
  color: #696969;
  font: 500 10px/1.5 'DM Sans', Arial, sans-serif;
  letter-spacing: .17em;
  text-align: center;
}
.brand-logo-marks {
  width: min(100%, 790px);
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 16px 34px;
}
.brand-logo-marks > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 4px;
  text-decoration: none;
}
.brand-logo-marks > a:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 5px; }
.brand-logo-marks > a:hover { opacity: .7; }
body[data-page="home"] .brand-logo-bar .brand-mark {
  width: auto;
  height: 24px;
  max-width: 90px;
  object-fit: contain;
  /* Map every non-transparent logo pixel to RGB(29,29,29). */
  filter: brightness(0) saturate(100%) invert(11.372549%);
}
body[data-page="home"] .brand-logo-bar .brand-mark-zara { height: 28px; max-width: 64px; }
body[data-page="home"] .brand-logo-bar .brand-mark-lululemon { height: 20px; max-width: 96px; }
body[data-page="home"] .brand-logo-bar .brand-mark-voxie { height: 44px; max-width: 88px; }
@media (max-width: 760px) {
  body[data-page="home"] .brand-logo-bar { display: flex; padding: 14px 16px 12px; }
  .brand-logo-label { font-size: 9px; }
  .brand-logo-marks { justify-content: center; gap: 6px 18px; }
  body[data-page="home"] .brand-logo-bar .brand-mark { height: 18px; max-width: 70px; }
  body[data-page="home"] .brand-logo-bar .brand-mark-zara { height: 20px; max-width: 45px; }
  body[data-page="home"] .brand-logo-bar .brand-mark-lululemon { height: 14px; max-width: 76px; }
  body[data-page="home"] .brand-logo-bar .brand-mark-voxie { height: 34px; max-width: 68px; }
}