/* Light treatment used only by the four primary product directions. */
body.catalog-colorants {
  --hero-image: url('assets/optimized/food-colours-red-amber-flows.jpg.webp');
}

.product-carousel .product {
  color: #2d2d2d;
}

.product-carousel .product::before,
body.catalog-colorants .catalog-hero::after,
body.catalog-flavors .catalog-hero::after,
body.catalog-stabilizing .catalog-hero::after,
.ingredients-hero::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .90) 0%,
    rgba(255, 255, 255, .70) 30%,
    rgba(255, 255, 255, .20) 55%,
    rgba(255, 255, 255, 0) 75%
  );
}

.product-carousel .product h3,
.product-carousel .product p,
body.catalog-colorants .catalog-hero,
body.catalog-flavors .catalog-hero,
body.catalog-stabilizing .catalog-hero,
body.catalog-colorants .catalog-hero h1,
body.catalog-flavors .catalog-hero h1,
body.catalog-stabilizing .catalog-hero h1,
body.catalog-colorants .catalog-hero .hero-lead,
body.catalog-flavors .catalog-hero .hero-lead,
body.catalog-stabilizing .catalog-hero .hero-lead,
body.catalog-colorants .catalog-hero .breadcrumbs,
body.catalog-flavors .catalog-hero .breadcrumbs,
body.catalog-stabilizing .catalog-hero .breadcrumbs,
.ingredients-hero,
.ingredients-hero h1,
.ingredients-hero p,
.ingredients-hero .ingredients-breadcrumbs {
  color: #2d2d2d;
  text-shadow: none;
}

body.catalog-colorants .catalog-hero .breadcrumbs span:not(:last-child)::after,
body.catalog-flavors .catalog-hero .breadcrumbs span:not(:last-child)::after,
body.catalog-stabilizing .catalog-hero .breadcrumbs span:not(:last-child)::after {
  color: #707476;
}

@media (max-width: 680px) {
  .product-carousel .product::before,
  body.catalog-flavors .catalog-hero::after,
  body.catalog-stabilizing .catalog-hero::after,
  .ingredients-hero::after {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .82) 48%,
      rgba(255, 255, 255, .36) 78%,
      rgba(255, 255, 255, .12) 100%
    );
  }
}

/* The approved colourants artwork has a light text area built into the image. */
body.catalog-colorants .catalog-hero::after { content:none !important; background:none !important; }
.product-carousel .product.product-colorants::before { background:none !important; }

body.catalog-colorants .catalog-hero::before { background-position:72% center !important; }
@media (max-width:680px) {
  body.catalog-colorants .catalog-hero::before { background-position:25% center !important; }
  body.catalog-colorants .catalog-hero h1 { max-width:min(320px,56vw); }
  body.catalog-colorants .catalog-hero .hero-lead { max-width:min(340px,56vw); }
}
/* Homepage colourants slide: the artwork already has a light left text area. */
.product-carousel .product[href$="pishchevyye-krasiteli"]::before,
.product-carousel .product[href="colorants.html"]::before {
  content:none !important;
  background:none !important;
}
.product-carousel .product[href$="pishchevyye-krasiteli"] .photo img,
.product-carousel .product[href="colorants.html"] .photo img {
  object-position:18% center !important;
}
.product-carousel .product[href$="pishchevyye-krasiteli"] h3,
.product-carousel .product[href$="pishchevyye-krasiteli"] p,
.product-carousel .product[href="colorants.html"] h3,
.product-carousel .product[href="colorants.html"] p {
  max-width:440px;
}
@media(max-width:680px) {
  .product-carousel .product[href$="pishchevyye-krasiteli"] h3,
  .product-carousel .product[href$="pishchevyye-krasiteli"] p,
  .product-carousel .product[href="colorants.html"] h3,
  .product-carousel .product[href="colorants.html"] p {
    max-width:53vw;
  }
}