/**
 * @file
 * Breakpoints
 *
 * With these breakpoints we will define how the page layout works.
 * For reference, below are the grid default breakpoints and max-widths defined by Bootstrap 4.
 * https://getbootstrap.com/docs/4.4/layout/grid/#grid-tiers
 *
 * $grid-breakpoints: (
 *   xs: 0,
 *   sm: 576px,
 *   md: 768px,
 *   lg: 992px,
 *   xl: 1200px
 * );
 *
 * $container-max-widths: (
 *   sm: 540px,
 *   md: 720px,
 *   lg: 960px,
 *   xl: 1140px
 * );
 *
 */

/*
 * Usage:
 * @include breakpoint(md){
 *   background: blue;
 * }
 */

/*
example for $data argument
each breakpoint has a pair of corresponding values
$breakpoints-data: (
  breakpoints: (365px + 20px, 767px, 1023px, 1199px, 1440px - 20px, 1440px + 20px, 1600px),
  values: ((190px, 190px), (400px, 190px), (261px, 194px), (230px, 243px), (266px, 266px), (266px, 266px), (300px, 300px))
);
*/

/*
 * Usage:
 * @include breakpoint(md, 700px){
 *   background: blue;
 * }
 */

/**
* @file
* Colors
*
* Colors variables for the whole project.
*/

/**
* @file
* Common variables
*
* Common variables for the whole project
*/

/**
* @file
* Mixins
*
*/

/*
  example:
  .root-class {
    .element {
      .theme_cat & {
        ...
      }
    }
  }
  will result into
  .theme_cat .root-class .element

  .root-class {
    .element {
      @include insert-into-selector-as-last-but-one(".theme_cat") {
        ...
      }
    }
  }
  will result into
  .root-class .theme_cat .element
*/

/*
  example:
  repeat-last-part-of-selector(".root-class .element", 3);
  returns
  ".root-class .element.element.element"
*/

/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
https://toward.studio/latest/making-css-gradients-smooth
*/

/*
a W3C Specs compliant way to override legacy CSS while explicitly highlighting the pieces of CSS code where refactoring is needed

example of usage:

.page {
  .container {
    &__item {
      @include increase-specificity-by-repeating(3) {
        ...
      }
    }
  }
}

will be built into

.page .container__item.container__item.container__item {
  ...
}

this method of increasing specificity is allowed by CSS Specifications
quote from https://www.w3.org/TR/selectors-3/#specificity:
> Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.
*/

/*
  button colors for different themes
  the theme list should contain
  - theme-name
  - background-color (can be a list of colors, in this case a horizontal linear gradient is created; also is used for border color)
  - text-color
*/

/*
This mixin allows adjusting an image to fit the content area on a page.
The $image-margin-ratio value should match the actual horizontal margins inside the image. This aligns the main image area with the page content edges.
$container-padding is a horizontal padding used in the <div> where the content is located.
For example, .twb-container has a padding of 15px.
$image-margin-ratio is a size of the horizontal margin relative to the main visible area of the image.
For example, if the main visible area is 1000px wide, and $image-margin-ratio is .05, the total image width will be 1000px + 1000px * .05 + 1000px * .05 = 1100px.
*/

.node--type-nppe-brand {
  padding-bottom: 90px;
  /*.field--name-field-brand-components {
    & > .field__item:first-child {
      .field--name-field-c-title {
        margin-top: 55px;
      }
    }
  }*/
}

.page-node-type-nppe-brand .node--type-nppe-brand {
  padding-bottom: 0;
}

.node--type-nppe-brand .field--name-field-c-title.field--name-field-c-title {
  font-size: 28px;
  line-height: 1.3;
  margin-top: 43px;
  margin-bottom: 21px;
}

.node--type-nppe-brand .field--name-field-summary-text p {
  font-family: "antenna-purina", Helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  padding: 0;
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 26px;
}

.node--type-nppe-brand .field--name-field-summary-text p.nppe-brand__text_enlarged {
  font-size: 25px;
  line-height: 32px;
  margin-top: 79px;
  margin-bottom: 69px;
}

.node--type-nppe-brand .paragraph--type--cta-button {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 54px;
}

.node--type-nppe-brand .paragraph--type--cta-button a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 33px;
  text-align: center;
  font-family: "antenna-purina", Helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
  line-height: 1.2;
  border-radius: 30px;
  background-color: #e91c24;
}

.purinaone_dogs.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #ffffff;
}

.purinaone_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #ffffff;
}

.gourmet_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #ffffff;
}

.darling_dogs.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #ffffff;
}

.darling_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #ffffff;
}

.proplan_dogs.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #000000;
}

.proplan_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #000000;
}

.felix.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #ffffff;
}

.node--type-nppe-brand .paragraph--type--cta-button a {
  color: #ffffff;
}

.purinaone_dogs.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #972628;
}

.purinaone_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #57b9bd;
}

.gourmet_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: none;
  background-image: linear-gradient(90deg, #91631f, #cdb368, #91631f);
}

.darling_dogs.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #cc1011;
}

.darling_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #cc1011;
}

.proplan_dogs.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #ffd475;
}

.proplan_cats.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #ffd475;
}

.felix.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #142d6d;
}

.node--type-nppe-brand .paragraph--type--cta-button a {
  background-color: #e91c24;
}

.node--type-nppe-brand .signposting-double--main-title-wrapper {
  background: #e8e8f3;
}

.node--type-nppe-brand .signposting-double--main-title-wrapper .signposting-double--main-title {
  font-family: "antenna-purina", Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 40px;
  line-height: 1.1;
  min-height: 166px;
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
  margin-bottom: 54px;
}

.node--type-nppe-brand .signposting-double--main-title-wrapper .signposting-double--main-title::after {
  content: "";
  width: 80px;
  height: 80px;
  background-image: url("../images/brands/logo-purina-one.svg");
  background-color: #192189;
  background-repeat: no-repeat;
  border-radius: 40px;
  flex: none;
}

.brand-banner {
  position: relative;
  margin-bottom: 35px;
}

.brand-banner__background-right {
  position: absolute;
  height: 100%;
  width: 50%;
  right: 0;
  top: 0;
}

.brand-banner__viewport {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}

.brand-banner__viewport_wide {
  max-width: unset;
}

.brand-banner__container {
  margin-right: calc(-1 * ((100% - 15px * 2) * 0.05 + 15px));
  margin-left: calc(-1 * ((100% - 15px * 2) * 0.05 + 15px));
  width: calc((100% - 15px * 2) * (1 + 0.05 * 2));
}

.brand-banner__image {
  width: 100%;
}

.pet-type-toggle {
  margin: 9px 0 36px 0;
}

.pet-type-toggle__inner {
  display: inline-flex;
  gap: 2px;
  height: 65px;
  box-sizing: border-box;
  border: 1px solid;
  border-color: #e91c24;
  border-radius: 32.5px;
}

.purinaone_dogs .pet-type-toggle__inner {
  border-color: #972628;
}

.purinaone_cats .pet-type-toggle__inner {
  border-color: #57b9bd;
}

.gourmet_cats .pet-type-toggle__inner {
  border-color: #91631f;
}

.darling_dogs .pet-type-toggle__inner {
  border-color: #cc1011;
}

.darling_cats .pet-type-toggle__inner {
  border-color: #cc1011;
}

.proplan_dogs .pet-type-toggle__inner {
  border-color: #ffd475;
}

.proplan_cats .pet-type-toggle__inner {
  border-color: #ffd475;
}

.felix .pet-type-toggle__inner {
  border-color: #142d6d;
}

.pet-type-toggle__inner {
  border-color: #e91c24;
}

.pet-type-toggle__item {
  display: flex;
  align-items: center;
  position: relative;
  font-family: "antenna-purina", Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1.2;
  color: #3a3533;
  padding: 0 20px;
  padding-bottom: 2px;
  background-color: transparent;
  border-radius: 32.5px;
  flex: auto;
}

.pet-type-toggle__item_left {
  margin: -1px 0 -1px -1px;
  padding-left: 25px;
  padding-right: 79px;
}

.pet-type-toggle__item_right {
  margin: -1px -1px -1px 0;
  padding-left: 21px;
  padding-right: 92px;
}

.pet-type-toggle__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 42px 35px;
}

.pet-type-toggle__item_cat::before {
  background-position: center right 21px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 42 35"><path fill="%233a3533" d="M5.466 23.893c.506-.416 2.659-3.237 3.682-4.964 1.676-2.835 2.244-3.605 4.872-4.303.503-.135 1.598-.176 2.948-.176 2.026 0 4.62.09 6.643.09 1.408 0 2.537-.045 3.003-.193 1.58-.506 4.91-2.054 4.91-2.054s.747-1.548 1.247-1.716a.221.221 0 0 1 .078-.014c.422 0 .422 1.276.422 1.276s2.166 1.084 2.332 1.971c.167.891 1 1.397.667 1.902-.296.448-.66 1.222-1.228 1.222a.734.734 0 0 1-.234-.042 1.326 1.326 0 0 0-.429-.061c-.805 0-2.04.454-2.522.736-.582.337-1.33 3.027-2.663 4.12-1.332 1.095-2.414 4.304-2.577 5.904v.843s1 .337 1 .756c0 .42-.252.757-1 .76h-.003c-.748 0-1.411-.085-1.663-1.262-.252-1.18 0-6.577 0-6.577s-2.404-.616-6.035-.616c-.646 0-1.326.02-2.043.066 0 0-2.248.048-3.247.553-1 .506-3.414 1.923-5.495 2.68 0 0-1.04.557-1.693 1.83L6 28.165s.724.644.557 1.036c-.095.223-.52.416-.942.416-.323 0-.646-.114-.809-.416-.38-.692.18-4.916.66-5.308zm29.498-9.343c-.13-.248-.272-.72-.272-.72-.133-.126-.177-.058-.367.128-.089.09.64.592.64.592z"/><path fill="%233a3533" d="M29.562 22.152c.84-.691 1.432-1.86 1.911-2.831.027.19.051.372.068.51.055.488.388 1.891.833 2.675.446.785 2.945 3.929 3.499 4.435.554.505 1.387.836 1.445 1.4.054.56-.775.674-1.5.45-.724-.223-1.887-1.678-1.887-1.678s-2.94-2.24-3.607-2.973c-.31-.34-.955-.705-1.56-.997.254-.42.526-.767.798-.99zM16.888 22.156h.028c.15-.01.299-.014.448-.021-.537.908-1.23 2.109-1.52 2.697-.5 1.015-.166 1.459 0 1.775.167.317 1.279 1.713 1.279 1.713s.493-.127.942 0c.445.127.663.95 0 1.142-.663.19-1.442.29-1.996-.268-.554-.557-2.666-3.155-2.72-3.602-.034-.261-.105-1.551-.156-2.57.278-.15.52-.278.703-.374.714-.365 2.4-.479 2.992-.492zM12.223 14.626c-.96.443-1.591 1.018-2.241 1.905a4.46 4.46 0 0 0-.68-1.696C7.558 12.3 5.657 5.358 6.837 2.6 8.013-.163 11.111.136 11.849 1.254c.737 1.118-.79 1.345-.79 1.345S8.014 1.258 8.042 5.362c.027 4.103 2.631 7.76 2.631 7.76a5.31 5.31 0 0 0 1.55 1.504z"/></svg>');
}

.pet-type-toggle__item_dog::before {
  background-position: center right 30px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 42 35"><path fill="%233a3533" d="M41.662 6.58c-.443-.089-1.816-.491-1.949-.536-.133-.09-.398-.179-.487-.67-.089-.492-.044-.983-.753-1.475-.753-.536-1.063-.491-1.285-.67-.62-.223-1.505-.313-2.391-.134-.93.179-1.196.626-1.683.894-.487.268-1.196 1.296-1.595 1.698-.398.402-1.993 2.457-2.702 2.815-.664.357-2.081.983-2.746 1.027-.664.09-1.328.135-1.86.492-.531.313-.93.58-2.392.715-1.461.134-5.005-.045-5.669-.134-.62-.09-2.082-.358-3.012-.179-.974.223-1.373.402-1.727.268-.354-.134-1.285-.268-1.905-.223-.62.044-1.904.58-2.436.67-.531.09-1.727-.09-2.436-.447-.62-.313-2.613-1.117-3.144-1.25-.532-.09-1.02-.18-1.285 0-.221.133-.399.803.222 1.429.62.58 2.126 2.01 2.657 2.368.532.358 1.683 1.028 2.702 1.028a6.678 6.678 0 0 0 2.17-.268c.31-.09.62-.224.576-.134-.044.09-.532 2.19-.886 2.949-.354.715-1.063 3.351-1.329 4.423-.265 1.073-.664 2.681-1.196 3.084-.531.402-1.063.58-1.461 1.742-.443 1.117-.709 4.066-.886 4.468-.221.403-.266 1.118-.044 1.341.221.223.487.357.708.357.266.045.399.09.62.09.222 0 .488.044.753-.09.222-.134.443-.357.355-.536-.089-.223-.665-.447-.709-1.027-.089-.581.31-2.369.443-2.637.133-.268.62-1.25.974-1.608.355-.358.62-.939.886-1.073s2.436-2.01 2.436-2.01-1.683 3.083-1.55 4.021c.133.938.532 2.055.62 2.324.133.312.222 1.027.842 1.117.62.089 1.55.089 1.86 0 .31-.09.531-.76.266-.983-.266-.268-.93-.313-1.196-.313-.266-.045-.399-.09-.487-.983-.089-.85-.222-1.654-.045-1.966.177-.313.797-1.34 1.108-1.52.31-.178 1.948-1.34 2.834-2.323.886-.983 1.506-1.787 1.595-1.877.088-.09.575-1.027 1.107-.938.532.134 2.303.625 2.303.625.266.045 1.462.313 2.215.894.753.626 2.037.939 3.277 1.073 1.285.134 2.17.178 2.17.178s.798.715.886 1.564c.089.85.266 1.609.266 2.056 0 .357.089 1.25.133 1.474.044.224.089 1.832.133 2.056.044.178.088 1.072.177 1.34.044.268.443 1.251.576 1.43.133.179.753.357 1.196.402.398.045.797-.045.974-.134.133-.09.222-.447.222-.58-.045-.135-.222-.269-.222-.269s.576.179 1.063.179c.443 0 .886-.09.975-.179.133-.134.443-.58 0-.983-.399-.357-.798-.402-1.152-.357-.354.044-.93-.715-.93-1.252 0-.491.133-1.966.177-2.278.044-.313.31-2.324.664-3.575.355-1.251.089-1.251.798-2.01.664-.76 2.391-2.995 2.48-4.29.089-1.252-.044-2.324.487-3.352.532-1.027 1.285-2.904 1.373-3.038.089-.134.31-1.296.443-1.296s2.303.402 2.923.268c.62-.134 1.108-.536 1.33-.58.31-.045.575-.492.663-.984.133-.536.133-.58.178-1.072.088-.179.177-.581-.266-.626z"/></svg>');
}

.pet-type-toggle__item_current.pet-type-toggle__item_cat::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 42 35"><path fill="%23ffffff" d="M5.466 23.893c.506-.416 2.659-3.237 3.682-4.964 1.676-2.835 2.244-3.605 4.872-4.303.503-.135 1.598-.176 2.948-.176 2.026 0 4.62.09 6.643.09 1.408 0 2.537-.045 3.003-.193 1.58-.506 4.91-2.054 4.91-2.054s.747-1.548 1.247-1.716a.221.221 0 0 1 .078-.014c.422 0 .422 1.276.422 1.276s2.166 1.084 2.332 1.971c.167.891 1 1.397.667 1.902-.296.448-.66 1.222-1.228 1.222a.734.734 0 0 1-.234-.042 1.326 1.326 0 0 0-.429-.061c-.805 0-2.04.454-2.522.736-.582.337-1.33 3.027-2.663 4.12-1.332 1.095-2.414 4.304-2.577 5.904v.843s1 .337 1 .756c0 .42-.252.757-1 .76h-.003c-.748 0-1.411-.085-1.663-1.262-.252-1.18 0-6.577 0-6.577s-2.404-.616-6.035-.616c-.646 0-1.326.02-2.043.066 0 0-2.248.048-3.247.553-1 .506-3.414 1.923-5.495 2.68 0 0-1.04.557-1.693 1.83L6 28.165s.724.644.557 1.036c-.095.223-.52.416-.942.416-.323 0-.646-.114-.809-.416-.38-.692.18-4.916.66-5.308zm29.498-9.343c-.13-.248-.272-.72-.272-.72-.133-.126-.177-.058-.367.128-.089.09.64.592.64.592z"/><path fill="%23ffffff" d="M29.562 22.152c.84-.691 1.432-1.86 1.911-2.831.027.19.051.372.068.51.055.488.388 1.891.833 2.675.446.785 2.945 3.929 3.499 4.435.554.505 1.387.836 1.445 1.4.054.56-.775.674-1.5.45-.724-.223-1.887-1.678-1.887-1.678s-2.94-2.24-3.607-2.973c-.31-.34-.955-.705-1.56-.997.254-.42.526-.767.798-.99zM16.888 22.156h.028c.15-.01.299-.014.448-.021-.537.908-1.23 2.109-1.52 2.697-.5 1.015-.166 1.459 0 1.775.167.317 1.279 1.713 1.279 1.713s.493-.127.942 0c.445.127.663.95 0 1.142-.663.19-1.442.29-1.996-.268-.554-.557-2.666-3.155-2.72-3.602-.034-.261-.105-1.551-.156-2.57.278-.15.52-.278.703-.374.714-.365 2.4-.479 2.992-.492zM12.223 14.626c-.96.443-1.591 1.018-2.241 1.905a4.46 4.46 0 0 0-.68-1.696C7.558 12.3 5.657 5.358 6.837 2.6 8.013-.163 11.111.136 11.849 1.254c.737 1.118-.79 1.345-.79 1.345S8.014 1.258 8.042 5.362c.027 4.103 2.631 7.76 2.631 7.76a5.31 5.31 0 0 0 1.55 1.504z"/></svg>');
}

.pet-type-toggle__item_current.pet-type-toggle__item_dog::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 42 35"><path fill="%23ffffff" d="M41.662 6.58c-.443-.089-1.816-.491-1.949-.536-.133-.09-.398-.179-.487-.67-.089-.492-.044-.983-.753-1.475-.753-.536-1.063-.491-1.285-.67-.62-.223-1.505-.313-2.391-.134-.93.179-1.196.626-1.683.894-.487.268-1.196 1.296-1.595 1.698-.398.402-1.993 2.457-2.702 2.815-.664.357-2.081.983-2.746 1.027-.664.09-1.328.135-1.86.492-.531.313-.93.58-2.392.715-1.461.134-5.005-.045-5.669-.134-.62-.09-2.082-.358-3.012-.179-.974.223-1.373.402-1.727.268-.354-.134-1.285-.268-1.905-.223-.62.044-1.904.58-2.436.67-.531.09-1.727-.09-2.436-.447-.62-.313-2.613-1.117-3.144-1.25-.532-.09-1.02-.18-1.285 0-.221.133-.399.803.222 1.429.62.58 2.126 2.01 2.657 2.368.532.358 1.683 1.028 2.702 1.028a6.678 6.678 0 0 0 2.17-.268c.31-.09.62-.224.576-.134-.044.09-.532 2.19-.886 2.949-.354.715-1.063 3.351-1.329 4.423-.265 1.073-.664 2.681-1.196 3.084-.531.402-1.063.58-1.461 1.742-.443 1.117-.709 4.066-.886 4.468-.221.403-.266 1.118-.044 1.341.221.223.487.357.708.357.266.045.399.09.62.09.222 0 .488.044.753-.09.222-.134.443-.357.355-.536-.089-.223-.665-.447-.709-1.027-.089-.581.31-2.369.443-2.637.133-.268.62-1.25.974-1.608.355-.358.62-.939.886-1.073s2.436-2.01 2.436-2.01-1.683 3.083-1.55 4.021c.133.938.532 2.055.62 2.324.133.312.222 1.027.842 1.117.62.089 1.55.089 1.86 0 .31-.09.531-.76.266-.983-.266-.268-.93-.313-1.196-.313-.266-.045-.399-.09-.487-.983-.089-.85-.222-1.654-.045-1.966.177-.313.797-1.34 1.108-1.52.31-.178 1.948-1.34 2.834-2.323.886-.983 1.506-1.787 1.595-1.877.088-.09.575-1.027 1.107-.938.532.134 2.303.625 2.303.625.266.045 1.462.313 2.215.894.753.626 2.037.939 3.277 1.073 1.285.134 2.17.178 2.17.178s.798.715.886 1.564c.089.85.266 1.609.266 2.056 0 .357.089 1.25.133 1.474.044.224.089 1.832.133 2.056.044.178.088 1.072.177 1.34.044.268.443 1.251.576 1.43.133.179.753.357 1.196.402.398.045.797-.045.974-.134.133-.09.222-.447.222-.58-.045-.135-.222-.269-.222-.269s.576.179 1.063.179c.443 0 .886-.09.975-.179.133-.134.443-.58 0-.983-.399-.357-.798-.402-1.152-.357-.354.044-.93-.715-.93-1.252 0-.491.133-1.966.177-2.278.044-.313.31-2.324.664-3.575.355-1.251.089-1.251.798-2.01.664-.76 2.391-2.995 2.48-4.29.089-1.252-.044-2.324.487-3.352.532-1.027 1.285-2.904 1.373-3.038.089-.134.31-1.296.443-1.296s2.303.402 2.923.268c.62-.134 1.108-.536 1.33-.58.31-.045.575-.492.663-.984.133-.536.133-.58.178-1.072.088-.179.177-.581-.266-.626z"/></svg>');
}

.pet-type-toggle__item_current {
  background-color: #e91c24;
}

.purinaone_dogs .pet-type-toggle__item_current {
  color: #ffffff;
}

.purinaone_cats .pet-type-toggle__item_current {
  color: #ffffff;
}

.gourmet_cats .pet-type-toggle__item_current {
  color: #ffffff;
}

.darling_dogs .pet-type-toggle__item_current {
  color: #ffffff;
}

.darling_cats .pet-type-toggle__item_current {
  color: #ffffff;
}

.proplan_dogs .pet-type-toggle__item_current {
  color: #000000;
}

.proplan_cats .pet-type-toggle__item_current {
  color: #000000;
}

.felix .pet-type-toggle__item_current {
  color: #ffffff;
}

.pet-type-toggle__item_current {
  color: #ffffff;
}

.purinaone_dogs .pet-type-toggle__item_current {
  background-color: #972628;
}

.purinaone_cats .pet-type-toggle__item_current {
  background-color: #57b9bd;
}

.gourmet_cats .pet-type-toggle__item_current {
  background-color: none;
  background-image: linear-gradient(90deg, #91631f, #cdb368, #91631f);
}

.darling_dogs .pet-type-toggle__item_current {
  background-color: #cc1011;
}

.darling_cats .pet-type-toggle__item_current {
  background-color: #cc1011;
}

.proplan_dogs .pet-type-toggle__item_current {
  background-color: #ffd475;
}

.proplan_cats .pet-type-toggle__item_current {
  background-color: #ffd475;
}

.felix .pet-type-toggle__item_current {
  background-color: #142d6d;
}

.pet-type-toggle__item_current {
  background-color: #e91c24;
}

.pet-type-toggle__link,
.pet-type-toggle__link:hover {
  color: #3a3533;
  z-index: 1;
}

.brand-products {
  margin-top: 47px;
  margin-bottom: 47px;
}

.brand-products__title {
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 28px;
}

.product-list-type-2 .brand-products__title {
  margin-bottom: 24px;
}

.brand-products__category {
  font-family: "antenna-purina", Helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: auto;
  line-height: 1.17;
  padding: 0 10px;
  font-size: 20px;
  margin-bottom: 22px;
}

.product-list-type-2 .brand-products__category {
  font-size: 20px;
  margin-bottom: 15px;
}

.brand-products__category sup {
  position: relative;
  top: -2px;
}

.brand-products__button {
  height: 52px;
  background-color: #e91c24;
}

.purinaone_dogs .brand-products__button {
  background-color: #972628;
}

.purinaone_cats .brand-products__button {
  background-color: #57b9bd;
}

.gourmet_cats .brand-products__button {
  background-color: none;
  background-image: linear-gradient(90deg, #91631f, #cdb368, #91631f);
}

.darling_dogs .brand-products__button {
  background-color: #cc1011;
}

.darling_cats .brand-products__button {
  background-color: #cc1011;
}

.proplan_dogs .brand-products__button {
  background-color: #ffd475;
}

.proplan_cats .brand-products__button {
  background-color: #ffd475;
}

.felix .brand-products__button {
  background-color: #142d6d;
}

.brand-products__button {
  background-color: #e91c24;
}

.brand-products__button a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.purinaone_dogs .brand-products__button a {
  color: #ffffff;
}

.purinaone_cats .brand-products__button a {
  color: #ffffff;
}

.gourmet_cats .brand-products__button a {
  color: #ffffff;
}

.darling_dogs .brand-products__button a {
  color: #ffffff;
}

.darling_cats .brand-products__button a {
  color: #ffffff;
}

.proplan_dogs .brand-products__button a {
  color: #000000;
}

.proplan_cats .brand-products__button a {
  color: #000000;
}

.felix .brand-products__button a {
  color: #ffffff;
}

.brand-products__button a {
  color: #ffffff;
}

.brand-products__items {
  display: flex;
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
  row-gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

.product-list-type-3 .brand-products__items {
  flex-wrap: wrap;
  justify-content: center;
}

.product-list-type-2 .brand-products__item {
  width: calc(50% - 8px);
}

.product-list-type-2 .brand-products__item .field--name-field-c-image {
  background-image: url("../images/nppe-brand/bg-pet.png");
  background-repeat: repeat-x;
}

.product-list-type-3 .brand-products__item {
  width: calc(33.3333% - 10.6666666667px);
}

.product-list-type-3 .brand-products__item .field--name-field-c-image {
  background-image: url("../images/nppe-brand/bg-product.png");
  background-repeat: repeat-x;
}

.product-list-type-4 .brand-products__item {
  width: calc(25% - 12px);
}

.product-list-type-4 .brand-products__item .field--name-field-c-image {
  background-image: url("../images/nppe-brand/bg-product.png");
  background-repeat: repeat-x;
}

.brand-products__item .field--name-field-c-image img {
  width: 100%;
  max-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

.brand-products__item .paragraph--type--c-teasercycle-item {
  height: 100%;
}

.brand-products__item .paragraph--type--c-teasercycle-item .teaser-image-cycle {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (min-width: 1200px) {
  .brand-banner__container_wide {
    margin-right: calc(-1 * ((100% - 25px * 2) * 0.05 + 25px));
    margin-left: calc(-1 * ((100% - 25px * 2) * 0.05 + 25px));
    width: calc((100% - 25px * 2) * (1 + 0.05 * 2));
  }
}

@media (max-width: 1024px) {
  .product-list-type-4 .brand-products__item {
    width: calc(50% - 8px);
  }
}

@media (max-width: 900px) {
  .product-list-type-3 .brand-products__item {
    width: calc(50% - 8px);
  }
}

@media (max-width: 600px) {
  .pet-type-toggle__inner {
    display: flex;
  }

  .brand-products__title {
    text-align: center;
  }

  .product-list-type-2 .brand-products__item {
    width: 100%;
  }

  .product-list-type-3 .brand-products__item {
    width: 100%;
  }

  .product-list-type-4 .brand-products__item {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .node--type-nppe-brand .paragraph--type--cta-button a {
    font-size: 18px;
    padding: 14px 24px;
  }

  .pet-type-toggle__item {
    font-size: 18px;
  }
}

@media (max-width: 320px) {
  .brand-banner__container {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }
}