/* EcoReCa category banners — 15 October 2026. */
#content:has(.ec-category-hero) .banners-slider.CONTENT_TOP { display: none !important; }
#content .ec-category-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 300px;
  aspect-ratio: 3 / 1;
  margin: 0 0 42px;
  overflow: hidden;
  background: #171917;
  border: 1px solid #47483f;
  color: #fbf4e7;
}
#content .ec-category-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
#content .ec-category-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
}
#content .ec-category-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11,16,13,.66), rgba(11,16,13,.31) 42%, transparent 70%);
  pointer-events: none;
}
#content .ec-category-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  width: var(--copy-width, 57%);
  padding: clamp(28px, 3.4vw, 52px);
  box-sizing: border-box;
}
#content .ec-category-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 23px;
  color: #ddc6a2;
  font: 500 12px/1.5 Arial, sans-serif;
  letter-spacing: .1em;
  flex-wrap: wrap;
  text-transform: uppercase;
}
#content .ec-category-hero__eyebrow span { width: 22px; height: 1px; background: #ad9572; }
#content .ec-category-hero__title {
  margin: 0 0 19px;
  color: #fff7e9;
  font: 400 clamp(29px, 2.8vw, 43px)/1.12 Georgia, 'Times New Roman', serif;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
#content .ec-category-hero__description {
  max-width: 390px;
  margin: 0;
  color: #eeede4;
  font: 400 clamp(15px, 1.15vw, 17px)/1.55 Arial, sans-serif;
}
#content .ec-category-hero__rule { width: 42px; height: 2px; margin-top: 24px; background: #c8ad7f; }
@media (min-width: 1300px) {
  #content .ec-category-hero__copy { min-height: 340px; }
}
/* Each mobile crop removes background only, keeping complete foreground appliances. */
#content .ec-category-hero[data-category="heat"] { --frame-ratio: 670 / 515; --image-width: 286.5672%; --image-left: -159.7015%; --image-top: -10.6796%; }
#content .ec-category-hero[data-category="refrigeration"] { --frame-ratio: 740 / 635; --image-width: 259.4595%; --image-left: -141.2162%; --image-top: 0%; }
#content .ec-category-hero[data-category="mechanical"] { --frame-ratio: 780 / 590; --image-width: 246.1538%; --image-left: -143.5897%; --image-top: 0%; }
#content .ec-category-hero[data-category="fast-food"] { --frame-ratio: 915 / 385; --image-width: 209.8361%; --image-left: -106.5574%; --image-top: -35.0649%; }
#content .ec-category-hero[data-category="coffee"] { --frame-ratio: 875 / 530; --image-width: 219.4286%; --image-left: -113.1429%; --image-top: -12.2642%; }
#content .ec-category-hero[data-category="neutral"] { --frame-ratio: 965 / 640; --image-width: 198.9637%; --image-left: -98.9637%; --image-top: 0%; }
#content .ec-category-hero[data-category="laundry"] { --frame-ratio: 650 / 550; --image-width: 295.3846%; --image-left: -178.4615%; --image-top: -7.2727%; }
#content .ec-category-hero[data-category="serving"] { --frame-ratio: 765 / 490; --image-width: 250.9804%; --image-left: -133.3333%; --image-top: -17.3469%; }
#content .ec-category-hero[data-category="catalog"] { --frame-ratio: 864 / 602; --image-width: 222.2222%; --image-left: -115.5556%; --image-top: 0%; }
@media (max-width: 1023px) {
  #content .ec-category-hero { min-height: 0; aspect-ratio: auto; }
  #content .ec-category-hero::before { display: none; }
  #content .ec-category-hero__media { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: var(--frame-ratio); }
  #content .ec-category-hero__image { position: absolute; inset: auto; top: var(--image-top); left: var(--image-left); width: var(--image-width); max-width: none; height: auto; object-fit: initial; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #content .ec-category-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  #content .ec-category-hero__copy { width: 100%; min-height: 0; padding: 30px 26px; }
  #content .ec-category-hero__title { font-size: 32px; }
  #content .ec-category-hero__eyebrow { font-size: 11px; gap: 8px; }
}
@media (max-width: 767px) {
  #content .ec-category-hero { min-height: 0; aspect-ratio: auto; margin-bottom: 28px; }
  #content .ec-category-hero__media { max-width: 520px; margin: 0 auto; }
  #content .ec-category-hero__copy { justify-content: flex-start; min-height: 0; width: 100%; padding: 27px 25px 24px; }
  #content .ec-category-hero__eyebrow { margin-bottom: 18px; font-size: clamp(11px, 2vw, 12px); gap: 9px; letter-spacing: .07em; }
  #content .ec-category-hero__title { max-width: 510px; font-size: clamp(28px, 5.8vw, 38px); margin-bottom: 15px; }
  #content .ec-category-hero__description { max-width: 510px; font-size: clamp(15px, 3.6vw, 17px); line-height: 1.55; }
  #content .ec-category-hero__rule { margin-top: 18px; }
}
@media (max-width: 374px) {
  #content .ec-category-hero__copy { padding-left: 20px; padding-right: 20px; }
  #content .ec-category-hero__title { font-size: 26px; }
}
