/* fix_brands — punch-list fix, owned by one agent. @media(max-width:991px) only for mobile file. */

/* ==========================================================================
   1) HOMEPAGE "SHOP BY BRAND" (ho_home_builder, style=manufacturer)
   Render brand LOGO tiles instead of cropped portrait product photos.
   Logos come from hooc_manufacturer.image (resized 400x200, aspect kept).
   ========================================================================== */
.banner-col-style-manufacturer .banner-item {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.banner-col-style-manufacturer .banner-image {
  width: 100%;
  height: 140px;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}
/* remove the dark bottom gradient meant for photos (it darkens logos) */
.banner-col-style-manufacturer .banner-image:after {
  display: none !important;
}
/* Logos are served at native resolution and only DOWNSCALED here (never upscaled)
   so they stay crisp. Caps keep every brand in a consistent, proportionate box. */
.banner-col-style-manufacturer .banner-image img,
.banner-col-style-manufacturer .banner-item .banner-image img {
  width: auto !important;
  height: auto !important;
  max-width: 200px;
  max-height: 92px;
  object-fit: contain !important;
  filter: none;            /* full colour (not muted) */
  opacity: 1;
  transition: all 0.25s ease;
}
.banner-col-style-manufacturer .banner-item:hover .banner-image img {
  opacity: 1;
  transform: scale(1.04) !important; /* subtle lift on hover; no zoom-crop */
}

/* Desktop: align the carousel arrows on the SAME line as the brand logos
   (logo row is the top ~88px of the wrapper; centre the arrows there instead
   of lower down over the pagination). */
@media (min-width: 992px){
  .banner-col-style-manufacturer > .swiper-button-prev,
  .banner-col-style-manufacturer > .swiper-button-next{
    top: 70px !important;
    bottom: auto !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
  }
}
/* logo already communicates the brand -> hide the red name caption on logo tiles */
.banner-col-style-manufacturer .banner-item .banner-caption-wrapper {
  display: none !important;
}

/* ==========================================================================
   2) BRAND LANDING PAGE (product/manufacturer/info) header
   Replace the white-name-on-black box with the brand LOGO on a white row.
   Scoped to .brand-hero-has-logo so category pages (shared .top-row) are safe.
   ========================================================================== */
.brand-hero-has-logo .top-row-wrapper {
  background-color: #fff !important;
  border: 1px solid #ececec;
}
.brand-hero-has-logo .main-content-title.brand-hero-title {
  padding-top: 34px;
  padding-bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-hero-title .brand-hero-logo {
  max-height: 64px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
}
/* keep the brand name in the DOM for SEO/accessibility, but hidden visually */
.brand-hero-title .brand-hero-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3) BRANDS LISTING PAGE (product/manufacturer) grid — larger logos
   OC pads manufacturer images to a square, so bump the display box + let
   the logo use its natural aspect (wide logos no longer squeezed).
   ========================================================================== */
.brand_list-img {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand_list-img img,
.brand_list-block .brand_list-img img {
  width: auto !important;
  height: auto !important;
  max-width: 360px !important;
  max-height: 220px !important;
  object-fit: contain !important;
}
/* 3 logos per row so each logo gets an even wider cell -> bigger still */
@media (min-width: 768px){
  .brand_list-container > .brand_list-block,
  .brand_list-block.col-md-2 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}