:root {

  /** FONTS **/
  --font-family-ffmeta: "FFMeta", Arial, Helvetica, sans-serif;
  --font-body: var(--font-family-primary, var(--font-family-ffmeta));
  --font-headline: var(--font-body);
  --font-size-pdp-title: 2.25rem;
  --line-height-pdp-title: 2.5rem;

  --text-sm-4:     .6875rem;
  --text-sm-3:     .75rem;
  --text-sm-2:     .875rem;
  --text-sm-1:     .9375rem;

  --text-lg-1:     1.063rem;
  --text-lg-2:     1.125rem;
  --text-lg-3:     1.25rem;
  --text-lg-4:     1.5rem;
  --text-lg-5:     1.875rem;
  --text-lg-6:     2.25rem;
  --text-lg-7:     2.625rem;
  --text-lg-8:     3rem;
  --text-lg-9:     3.375rem;

  /** COLOR **/
  --color-bg: var(--color-neutral-white, #fff);
  --color-body: var(--primary-default, #120e02);
  --color-button-sku: var(--secondary-container, #fff);
  --color-button-cta: #687233;
  --color-button-disabled: #4b4b4b;
  --color-primary: var(--primary-default, #120e02);
  --color-primary-100: var(--color-brand-1-50, #f4f2ee);
  --color-primary-200: var(--color-brand-1-100, #EDEAE4);
  --color-primary-220: #E5E5E5;
  --color-primary-240: #E0E0E0;
  --color-primary-250: #cdcbc9;
  --color-primary-300: #a39e9d;
  --color-primary-400: #A3A3A3;
  --color-primary-600: #757575;
  /* not sure the other secondary colors are relevant...*/
  --color-secondary-300: #f2f2f2;
  --color-secondary-400: #fbf8f6;
  --color-secondary-500: #D4D4D4;
  --color-gray-65: #4d5866;

  --color-error: #a80000;
  --color-warning: #b54708;
  --color-green: #087443;

  --color-surface-low-elevation: var(--color-brand-1-50, #f4f2ee);

  --color-a11y-icon-bg: var(--color-primary-220);

  /** ADD TO BAG **/
  --color-add-to-bag-bg-disabled: #E5E5E5;
  --color-add-to-bag-text-disabled: var(--color-neutral-white, #fff);

  /** SETTINGS **/
  --star-size: 1rem;
  --star-color: #dde4d8;
  --star-background: var(--color-accent-2-800, #009f4d);
  --width-logo-header: 8rem;
  --width-logo-header-lg: 8rem;
  --swiper-pagination-bullet-horizontal-gap: 8px;


  /* Size Chips */
  --padding-size-chip-x: 15px;
  --padding-size-chip-y: 15px;
  --padding-size-chip-x-with-price: 15px;
  --padding-size-chip-y-with-price: 10px;
  --color-size-chip-bg-disabled: var(--color-secondary-300);
  --color-size-chip-text-disabled: #606060;
  --color-size-chip-border: #9E9E9E;
  --width-chip-2-col: 48%;
  --width-chip-3-col: 32%;

  /** WIDTHS **/
  --signup-btn: 7.25rem;

  /** Carousel **/
  --width-carousel-thumbnail: 86px;
  --height-carousel-thumbnail: 100px;
  --width-carousel-image: 296px;
  --height-carousel-image: 100px;

  --pincer-swiper-padding-bottom: 10px;
  --pincer-swiper-margin-bottom: 0px;
  --pincer-swiper-slide-margin-bottom: 0;

  --pincer-swiper-navigation-width: 40px;
  --pincer-swiper-navigation-height: 80px;
  --pincer-swiper-navigation-top-offset: 50%;
  --pincer-swiper-navigation-sides-offset: 0px;
  --pincer-swiper-navigation-background-color: transparent;
  --pincer-swiper-navigation-opacity: 1;
  --pincer-swiper-navigation-font-size: 1.85rem;
  --pincer-swiper-navigation-font-color: var(--color-primary, #120e02);
  --pincer-swiper-navigation-prev-side-offset: 6rem;
  --pincer-swiper-navigation-next-side-offset: 6rem;
  --pincer-swiper-thumbnails-navigation-prev-top: -3px;
  --pincer-swiper-thumbnails-navigation-prev-bottom: unset;
  --pincer-swiper-thumbnails-navigation-prev-left: 1.5rem;
  --pincer-swiper-thumbnails-navigation-next-top: unset;
  --pincer-swiper-thumbnails-navigation-next-right: unset;
  --pincer-swiper-thumbnails-navigation-next-bottom: -30px;
  --pincer-swiper-thumbnails-navigation-next-left: 1.5rem;
  --product-grid-navigation-prev-side-offset: 10px;
  --product-grid-navigation-next-side-offset: 10px;
  --product-grid-navigation-top-offset: 14rem;

  --swiper-pagination-color: var(--color-primary, #120e02);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 16px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #E6E3DD;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;

  /* input fields */
--input-disabled-background: var(--color-brand-1-50, #f4f2ee);
--input-disabled-color: #999999;
--input-disabled-border: var(--color-primary-400);

  /**  Screen width  **/
  --screen-2xl-width: 1440px;
}

.drupal b,
.drupal strong,
strong,
b {
  font-weight: 700;
}

h4,
h5,
h6 {
  font-weight: 400;
  font-size: revert;
}

.nav-link-top-after, .sub-nav-link-top-after {
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48cGF0aCBkPSJNMjUwIDI4OS43TDAgNDAuMiA0MC4zIDAgMjUwIDIwOS4zIDQ1OS43IDAgNTAwIDQwLjIgMjUwIDI4OS43eiIvPjwvc3ZnPg==);
  mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48cGF0aCBkPSJNMjUwIDI4OS43TDAgNDAuMiA0MC4zIDAgMjUwIDIwOS4zIDQ1OS43IDAgNTAwIDQwLjIgMjUwIDI4OS43eiIvPjwvc3ZnPg==);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  content: '';
}
.nav-active .nav-link-top-after, .subsubnav-active .sub-nav-link-top-after {
  -webkit-transform: rotate(0deg) translateX(-0.5em);
  -moz-transform: rotate(0deg) translateX(-0.5em);
  -ms-transform: rotate(0deg) translateX(-0.5em);
  -o-transform: rotate(0deg) translateX(-0.5em);
  transform: rotate(0deg) translateX(-0.5em);
}

/* START MPP PAGE */
.sku-radio-label {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.peer:checked ~ .sku-radio-label {
  border: 1px solid #000000;
}

.star-ratings::before {
  -webkit-text-stroke: 0;
  letter-spacing: 0;
}

.vegan-ingredients-banner a:hover {
  color: var(--color-primary-300);
  text-decoration: underline;
}

.br-replace br {
  content: "";
}

.font-color--white {
  color: var(--color-neutral-white, #fff);
}

.button.button--clear-dark:hover {
  cursor: pointer;
  background-color: var(--color-primary, #120e02);
  color: var(--color-neutral-white, #fff);
  text-decoration: none;
  border-color: var(--color-neutral-white, #fff);
}
/* END MPP PAGE */


.product-details-carousel-pincer-swiper.pincer-swiper {
  margin-left: 0;
  margin-right: 0;
}

/* avoid overlap by images in slider */
.swiper-thumbnail .pincer-button-prev,
.swiper-thumbnail .pincer-button-next {
  width: 40px;
  height: 90px;
  background: var(--color-bg) !important;
  opacity: 1;
}

/* Hide the arrows on the number input box */
input[type='number'] {
  -moz-appearance: textfield;
}

@media screen and (min-width: 768px) {
  :root {
    --pincer-swiper-navigation-font-size: 2rem;
  }
}

@media screen and (min-width: 1440px) {
  .swiper-thumbnail .swiper-thumbnail-button-next,
  .swiper-thumbnail .swiper-rtl .swiper-thumbnail-button-prev {
    left: var(--pincer-swiper-thumbnails-navigation-prev-left);
  }

  .swiper-thumbnail .swiper-thumbnail-button-prev,
  .swiper-thumbnail .swiper-rtl .swiper-thumbnail-button-next {
    left: var(--pincer-swiper-thumbnails-navigation-prev-left);
  }
}

.swiper-thumbnail .swiper-slide-thumb-active div {
  border: 1px solid #000;
}
@media screen and (max-width: 1024px) {
  .pincer-swiper {
    margin: 0 15px 0 20px;
  }

  .product-details-carousel .product-details-carousel-pincer-swiper .pincer-button-prev,
  .product-details-carousel .product-details-carousel-pincer-swiper .pincer-button-next {
    top: 50%;
    transform: translateY(-50%);
  }

  .product-details-carousel .product-details-carousel-pincer-swiper .pincer-button-prev {
    margin-left: .25rem;
  }

  .product-details-carousel .product-details-carousel-pincer-swiper .pincer-button-next {
    margin-right: .25rem;
  }

  .product-details-carousel .product-details-carousel-pincer-swiper .swiper-thumbnail-button-next,
  .product-details-carousel .product-details-carousel-pincer-swiper .swiper-thumbnail-button-prev {
    top: 0;
    transform: none;
    display: flex;
    justify-content: center;
    margin-top: 0;
  }
}

.pincer-swiper .swiper-container {
  width: 90%;
  margin: auto;
}

#blueprint-pdp .ugc-container,
.drupal-container .ugc-container {
  padding: 0;
  @media (min-width: 640px) {
    padding: 0 2rem;
  }
}