/*
 * Brand catalog media treatment
 *
 * This file is intentionally scoped to a page that has the brand hero marker and
 * a non-empty brand catalog. It leaves category and product-detail pages alone.
 * Source assets are not edited: photos keep their own background and aspect ratio.
 */

/*
 * The generated brand pages currently use:
 *   section[data-catalog][data-brand]:not([data-brand=""])
 *   a.rc-card-image > img + .rc-card-category
 *
 * Keep the link and category label intact; only replace the circular visual
 * treatment with one predictable rectangular media frame.
 */
body:has([data-brand-slider]) [data-catalog][data-brand]:not([data-brand=""]) .rc-card-image {
  display: grid;
  height: clamp(220px, 18vw, 260px);
  min-height: 220px;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
  background: #f4f7fb;
}

body:has([data-brand-slider]) [data-catalog][data-brand]:not([data-brand=""]) .rc-card-image::before,
body:has([data-brand-slider]) [data-catalog][data-brand]:not([data-brand=""]) .rc-card-image::after {
  display: none;
  content: none;
}

body:has([data-brand-slider]) [data-catalog][data-brand]:not([data-brand=""]) .rc-card-image img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: clamp(10px, 1.7vw, 16px);
  object-fit: contain;
  object-position: center;
  filter: none;
  mix-blend-mode: normal;
  transform: none;
  transition: none;
}

/* Do not let the catalog's hover zoom crop a square or panoramic source photo. */
body:has([data-brand-slider]) [data-catalog][data-brand]:not([data-brand=""]) .rc-product-card:hover .rc-card-image img,
body:has([data-brand-slider]) [data-catalog][data-brand]:not([data-brand=""]) .rc-product-card:focus-within .rc-card-image img {
  transform: none;
}

/* The incoming brand hero uses the same no-halo, contain-only treatment. */
body:has([data-brand-slider]) section.rc-brand-slider[data-brand-slider] .rc-slide-visual::before,
body:has([data-brand-slider]) section.rc-brand-slider[data-brand-slider] .rc-slide-visual::after {
  display: none;
  content: none;
}

body:has([data-brand-slider]) section.rc-brand-slider[data-brand-slider] .rc-slide-image {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 720px) {
  body:has([data-brand-slider]) [data-catalog][data-brand]:not([data-brand=""]) .rc-card-image {
    height: clamp(190px, 58vw, 220px);
    min-height: 190px;
  }
}