:root {
  /* Three tier color system: 1. swatches, 2. semantic mapping, 3. contextual mapping */

  /* --- Tier 1: Color swatches --- */
  --color-white: #fff;
  --color-black: #000;

  --color-lightest-gray: #f2f4f6;
  --color-lighter-gray: #e5e9ee;
  --color-light-gray: #ccd3de;
  --color-medium-light-gray: #b2bdcd;
  --color-medium-gray: #99a7bd;
  --color-medium-dark-gray: #667c9b;
  --color-dark-gray: #4c658a;
  --color-darker-gray: #33507a;
  --color-darkest-gray: #002459;

  /* Brand colors */
  --brand-color-1: #e64b38; /* Button, Nav-underline, h6 */
  --brand-color-2: #064c31; /* Tags */
  --brand-color-3: #ecf6de;
  --brand-color-4: #fdf7f7;
  --brand-color-5: #64a70a;
  /* --brand-color-6: #b4a176; */

  /* Social media colors */
  --color-facebook: #3b5998;
  --color-twitter: #2aa3f0;

  /* --- Tier 2: Semantic color mapping --- */
  --primary-color: var(--brand-color-1);
  --secondary-color: var(--brand-color-2);

  /* Shadow colors */
  --shadow-color-subtle: rgba(0, 0, 0, 0.25);

  /* Background colors */
  --background-color-light: #ecf6de;
  --background-color-medium: #e9d9f1;
  --background-color-dark: #002459;
  --background-color-brand: var(--background-color-medium);

  /* Form elements */
  --input-text-color: var(--brand-color-2);
  --input-placeholder-color: var(--brand-color-2);
  --input-border-color: var(--brand-color-2);
  --input-focus-border-color: var(--brand-color-2);

  /* --- Tier 3: Contextual color mapping --- */
  /* Typography */
  --heading-color: var(--brand-color-2);
  --text-color: var(--brand-color-2);
  --link-color: var(--brand-color-1);

  /* Various */
  --tag-color: var(--brand-color-2);
  --header-color: var(--brand-color-2);
  --footer-color: var(--brand-color-2);
  --notification-bar-color: var(--background-color-brand);
  --notification-content-color: var(--text-color);
  --splash-main-bg-color:var(--color-white);
  --spalch-closeicon:var(--brand-color-2);
  --splash-light-border-line:rgba(6, 76, 49, 0.3);
  --splash-border:var(--brand-color-2);
  --splash-page-left-border:var(--brand-color-2);
  --splash-arrow-color:var(--brand-color-2);
  --splash-page-heading-color:var(--brand-color-2);
  --splash-text-color:var(--brand-color-2);


  /* new filter */
  --svg-filter-icon:var(--brand-color-1);
  --svg-filter-icon-mobile:var(--brand-color-1);
   --fixed-left-slide-filter-bg:var(--brand-color-1);
   --fixed-left-slide-filter-overlay:var(--brand-color-1);
   --fixed-left-slide-filter-text:var(--heading-color,var(--text-color));
   --fixed-left-slide-filter-border-color:var(--brand-color-1);
   --fixed-left-slide-filter-checkbox-outline:var(--brand-color-1);
   --fixed-left-slide-filter-checkbox-filled:var(--brand-color-1);
   --fixed-left-side-title-text:var(--heading-color,var(--text-color));
   --fixed-left-side-title-text-mob:var(--heading-color,var(--text-color));
   --fixed-left-slide-mobile-button-bg:var(--brand-color-1);
   --fixed-left-slide-mobile-button-text:var(--heading-color,var(--text-color));
   --primary-filter-btn-bg-color:var(--color-white);
   --primary-filter-btn-text-color:var(--heading-color,var(--text-color));
   --secondary-filter-btn-bg-color:var(--brand-color-6);
   --secondary-filter-btn-text-color:var(--brand-color-1);
   --fixed-left-slide-filter-chevron:var(--brand-color-1);
   --tip-icon-color:var(--brand-color-3);
}

@font-face {
  font-family: 'Campton-Bold';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-regular);
  src: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/fonts/3A5B37_0_0.woff2)
    format('woff2');
}

@font-face {
  font-family: 'Campton-Book';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-regular);
  src: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/fonts/3A63D6_0_0.woff2)
    format('woff2');
}

:root {
  --header-height-mobile: 80px;
  --header-height-desktop: 80px;
}

:root {
  /* logo */
  --logo-width: 125px; /* included padding */
  --logo-width-desktop: 200px;
}

:root {
  /* Font families */
  --ff-body: 'Campton-Book', Helvetica, sans-serif;
  --ff-headings: 'Campton-Bold', Arial, Helvetica, sans-serif;
  --ff-cards: 'Campton-Bold', Arial, Helvetica, sans-serif;

  /* Font sizes */
  --fs-xs: 0.9375rem;
  --fs-s: 1rem;
  --fs-m: 1.25rem;
  --fs-l: 1.5rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.5rem;
  --fs-xxxl: 4rem;
  --fs-xxxxl: 6rem;
  --splash-font-size: 16px;
  --splash-font-mob: 14px;
  --splash-font-sub-size: 15px;
  --splash-font-sub-size-mob: 13px;
  --splash-heading-font-size: 1.5rem;
}

.btn,
button,
input[type='submit'],
input[type='button'] {
  text-transform: none;
  font-size: var(--fs-s);
  font-family: var(--ff-headings);
  border-radius: var(--border-radius-s);
  padding: 20px var(--s-l) var(--s-m);
}

.btn-medium {
    padding: 12px var(--s-xl) var(--s-s);
    font-size: var(--fs-s);
  }

body {
  font-size: var(--fs-m);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0 0 var(--m-s);
  font-family: var(--ff-headings);
  line-height: var(--lh-s);
  color: var(--heading-color);
}

  h1:empty, .h1:empty, h2:empty, .h2:empty, h3:empty, .h3:empty, h4:empty, .h4:empty, h5:empty, .h5:empty, h6:empty, .h6:empty {
    margin: 0;
  }

  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a {
    display: block;
    color: var(--heading-color);
  }

  h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover, h5 a:hover, .h5 a:hover, h6 a:hover, .h6 a:hover {
      text-decoration: none;
    }

  h1 > p, .h1 > p, h2 > p, .h2 > p, h3 > p, .h3 > p, h4 > p, .h4 > p, h5 > p, .h5 > p, h6 > p, .h6 > p {
    margin-bottom: 0;
  }

h1,
.h1 {
  font-size: var(--fs-xxl);
  line-height: var(--lh-xs);
}

@media (min-width: 62rem) {

h1,
.h1 {
    font-size: var(--fs-xxxl)
}
  }

h2,
.h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-xs);
}

@media (min-width: 62rem) {

h2,
.h2 {
    font-size: var(--fs-xxl)
}
  }

h3,
.h3 {
  font-size: var(--fs-l);
}

@media (min-width: 62rem) {

h3,
.h3 {
    font-size: var(--fs-xl)
}
  }

h4,
.h4 {
  font-size: var(--fs-m);
}

@media (min-width: 62rem) {

h4,
.h4 {
    font-size: var(--fs-l)
}
  }

h5,
.h5 {
  font-size: var(--fs-s);
}

@media (min-width: 62rem) {

h5,
.h5 {
    font-size: var(--fs-m)
}
  }

h6,
.h6 {
  font-size: var(--fs-m);
  color: var(--secondary-color);
}

.check-list ul li {
    padding: 0 0 var(--s-m) var(--s-xl);
    background: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/checkmark.svg)
      top left no-repeat;
    background-size: var(--s-m);
  }

tr:nth-child(odd) {
    background-color: var(--background-color-light);
  }

/* Mobile only*/
@media (max-width: 47.9375rem) {
  td {
    border-bottom: 1px solid var(--secondary-color);
  }
}

table tr.is-odd-row {
  background-color: var(--background-color-light);
}

table tr.is-even-row{
  background-color: transparent;
}

blockquote,
q {
  background: var(--background-color-light);
  border-left: var(--s-s) solid var(--secondary-color);
}

big {
  font-size: var(--fs-m);
}

.nav-icon span {
    background: var(--brand-color-1);
  }

footer a {
    font-size: var(--fs-m);
  }
  footer .rich-text {
    font-size: var(--fs-m);
  }

.header-logo-left {
  background: url('/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/bg-pattern.jpg');
}

  .header-logo-left .file-type-icon-media-link {
    top: 17px;
    left: 30px;
  }

  @media (min-width: 75rem) {

  .header-logo-left .file-type-icon-media-link {
      top: 0px
  }
    }

  @media (min-width: 75rem) {

  .header-logo-left .file-type-icon-media-link img {
        width: var(--logo-width-desktop)
    }
      }

  @media (max-width: 74.9375rem) {

  .header-logo-left .file-type-icon-media-link img {
        width: var(--logo-width)
    }
      }

  @media (max-width: 74.9375rem) {

  .header-logo-left .navigation {
      background: var(--brand-color-2);
      margin-top: var(--header-height-mobile)
  }
    }

  @media (max-width: 74.9375rem) {
        .header-logo-left .navigation nav a {
          font-family: var(--ff-headings);
          color: var(--color-white);
        }
      }

  @media (min-width: 75rem) {
        .header-logo-left .navigation nav a {
          margin: 0 var(--s-m);
          font-family: var(--ff-headings);
          font-size: var(--fs-s);
          color: var(--brand-color-2);
        }

          .header-logo-left .navigation nav a.current::after {
            background-color: var(--brand-color-2);
          }

          .header-logo-left .navigation nav a::after {
            bottom: 1px;
            background-color: var(--brand-color-2);
          }
      }

  @media (min-width: 75rem) {
      .header-logo-left .navigation ul {
        height: auto;
      }
    }

  @media (max-width: 74.9375rem) {

  .header-logo-left .submenu div span {
          margin-top: 20px !important
      }
        }

  @media (min-width: 75rem) {

  .header-logo-left .submenu div span::before {
            border-width: 0 3px 3px 0;
            border-color: var(--secondary-color);
            -webkit-transform-origin: 80% 70%;
                    transform-origin: 80% 70%
        }
          }

  .header-logo-left .submenu:hover ul {
      margin-top: 0;
    }

  .header-logo-left .submenu ul li div a {
            font-size: var(--fs-xs);
          }

.meta-header {
  background: url('/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/bg-pattern.jpg');
}

  .meta-header .link-list {
    padding-left: 16px;
  }

  .meta-header .link-list.text-align-right {
      padding-left: 0;
      padding-right: var(--s-l);
    }

  .meta-header .link-list li a {
        color: var(--brand-color-2);
        font-size: var(--fs-xs);
        font-weight: var(--fw-semi-bold);
      }

#upfieldArticleCarousel .title-link-btn .field-link .btn
{
    padding: 0px;
    min-width: 160px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
    @media only screen and (max-width:900px)
    {#upfieldArticleCarousel .title-link-btn .field-link .btn
{
        min-width: 30px
}
    }

[id^='promo-related-video'] .video-desc-box> p {
    margin: 0px !important;
}
#press-searchresult-list .facet-single-selection-list>div .contentContainer .facet-search-filter p
{
    margin: 0px !important;
}
.promo-related-article .related-articles-body {
    padding-top: var(--s-xxxl);
    background: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/ornament.svg) no-repeat center 0%;
  }

    @media (min-width: 48rem) {.promo-related-article .related-articles-body {
      background-position: var(--s-m) 0%
  }
      [dir="rtl"] .promo-related-article .related-articles-body {
        background-position-x: 97%;
      }
    }
  .promo-related-article .related-article-subtitle {
    text-transform: none;
    font-family: var(--ff-body);
    font-weight: normal;
    font-size: var(--fs-s);
  }



.article-card {
  border-bottom: var(--s-xs) solid var(--secondary-color);
}

  .article-card .article-card-title {
    text-transform: none;
    font-size: var(--fs-l);
  }

.article-detail-content ul {
      list-style: none;
      padding: 0;
    }

      .article-detail-content ul li {
        padding: 0 0 var(--s-m) var(--s-xl);
        background: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/checkmark.svg)
          top left no-repeat;
        background-size: var(--s-m);
      }

.category-card-title {
    text-transform: none;
    font-size: var(--fs-l);
  }

.product-card .product-card-title {
    text-transform: none;
    font-size: var(--fs-l);
  }

.recipe-card .recipe-card-title {
    text-transform: none;
    font-size: var(--fs-l);
  }

:root{
    /* new chevron color */
--chevron-box-shadow : 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
--chevron-bg-color: var(--chevron-primary-color, rgba(0, 0, 0, 0.5));
--chevron-primary-color: var(--color-white);
--chevron-text-color: var(--primary-color);
}


/*new toggle arrows*/
@media(max-width: 61.9375rem){
.toggle-arrows.has-slider ul {
            padding-left: 18px    
        }
          }
@media(max-width: 61.9375rem){
.toggle-arrows.has-slider ul li {
            margin-right: 0
        }
          }
.toggle-arrows.has-slider .arrow-right,
  .toggle-arrows.has-slider .arrow-left {
    background: var(--color-white);
    background: var(--chevron-bg-color);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: var(--chevron-box-shadow);
            box-shadow: var(--chevron-box-shadow);
    width: 57px;
    height: 57px;
    border: none;
    opacity: 1 !important;
  }
.toggle-arrows.has-slider .arrow-right::before, .toggle-arrows.has-slider .arrow-left::before {
      color: var(--primary-color);
      color: var(--chevron-text-color);
      right: 0;
      background: none;
    }
.toggle-arrows.has-slider .arrow-left::before {
      left: 25px;
      top: 21px;
    }
.toggle-arrows.has-slider .arrow-left::before {
      left: 25px;
      top: 21px;
    }
.toggle-arrows.has-slider .arrow-right::before {
      left: 21px;
      top: 22px;
    }
.toggle-arrows.has-slider.has-bullets-and-arrows .bullets {
      display: none !important;
}


.product-detail-header::before {
    background: none;
  }
  .product-detail-header::after {
    background: url('/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/bg-pattern.jpg');
  }
  .product-detail-header .product-detail-bgimage .product-detail-header-content h1,
      .product-detail-header .product-detail-bgimage .product-detail-header-content h3 {
        color: var(--secondary-color);
      }
  .product-detail-header .product-detail-bgimage .product-detail-header-content .link a {
          color: var(--secondary-color);
        }

.product-detail-body {
  background: url('/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/bg-pattern.jpg');
}

.product-detail-body .nutrition-facts-accordion tr:nth-child(odd) {
        background-color: rgba(255, 255, 255, 0.5);
      }

.product-detail-body .toggle-header::after {
    background-color: rgba(255, 255, 255, 0.5);
  }

.related-articles {
  padding-top: var(--s-xxxl);
  background: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/ornament.svg)
    no-repeat center 0;
}

  .related-articles .related-article-subtitle {
    font-family: var(--ff-body);
    font-weight: normal;
    font-size: var(--fs-s);
  }

.related-products {
  padding-top: var(--s-xxxl);
  background: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/ornament.svg)
    no-repeat center 0;
}

  .related-products .related-product-subtitle {
    font-family: var(--ff-body);
    font-weight: normal;
    font-size: var(--fs-s);
  }

.related-recipes {
  padding-top: var(--s-xxxl);
  background: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/ornament.svg)
    no-repeat center 0;
}

  .related-recipes .related-recipe-subtitle {
    font-family: var(--ff-body);
    font-weight: normal;
    font-size: var(--fs-s);
  }

.recipe-detail .recipe-detail-bgimage img {
    border-bottom: var(--s-xs) solid var(--brand-color-4);
  }

.recipe-detail-instructions ol li::before {
    background-color: var(--brand-color-2);
    color: var(--color-white);
    border: none;
  }

@media (max-width: 47.9375rem) {

.recipe-info-section {
    display: block
}
  }

.recipe-detail-tip .field-tip {
  padding-left: 70px;
}

@media(max-width: 74.9375rem) {

.recipe-detail-tip .field-tip {
    padding-left: 40px
}
  }

.recipe-detail-tip .field-tip ol {
    padding-left: 0px !important;
  }

.recipe-detail-tip .field-tip ol li {
      list-style-type: none !important;
    }
@media (min-width: 75rem) {.recipe-overview-intro {
      padding: 0 var(--s-xxxxl) 0 var(--s-xxxxl)
  }
    }

.sldm nav .sldm-nav-container .sldm-header .sldm-header-image-wrapper h2 {
                        color: var(--splash-page-heading-color);
                    }
            .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu ul li.sldm-submenu >a::before{
                                            top: 20px;
                                        }
            .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu .CtaBack::after {
                                    top: 19px;
                                    left: 10px;
                                    height: 20px;
                                }
            .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu .CtaBack::before {
                                    color: var(--splash-text-color);
                                    width: 14px;
                                    height: 14px;
                                    top: 22px;
                                }
            .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li a {
                            color: var(--splash-text-color);
                            line-height: 28px;
                        }
            @media (max-width:900px) {
            .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li a {
                                line-height: 24px
                        }
                            }
    .sldm.sldm-active nav .sldm-nav-container {
                border-left: 1px solid var(--splash-page-left-border);
            }
    .sldm.sldm-active nav .sldm-nav ul.sldm-default li.sldm-submenu.sldm-open a {
                            border-bottom: none;
                        }
    .sldm.sldm-active nav .sldm-nav ul.sldm-default li.sldm-submenu.sldm-open .CtaBack a {
                                border-top: none;
                            }
    .sldm.sldm-active nav .sldm-nav ul.sldm-default li.sldm-submenu.sldm-open .sub-container:first-child >.sldm-submenu >a, .sldm.sldm-active nav .sldm-nav ul.sldm-default li.sldm-submenu.sldm-open .sub-container :last-child >.sldm-submenu >a {
                                        border-top: none;
                                    }
    .sldm.sldm-active nav .sldm-nav.no-nav-border {
                    border-top: none;
                }


.usp-section h2 {
    font-size: var(--fs-l);
  }

    @media (min-width: 62rem) {.usp-section h2 {
      font-size: var(--fs-xl)
  }
    }



/* presentation styles of container */
.bg-pattern {
  background: url('/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/bg-pattern.jpg');
}



.page-header .page-header-content-subtitle {
    font-size: var(--fs-l);
  }



.accordion .items .item.active .toggle-header::after {
        -webkit-transform: rotate(180deg) translateY(-50%);
                transform: rotate(180deg) translateY(-50%);
      }

.accordion.nutrition-facts-accordion .toggle-header {
    border-bottom: 2px solid var(--brand-color-2);
  }

    .accordion.nutrition-facts-accordion .toggle-header::after {
      content: '';
      background-color: var(--brand-color-2);
      background-image: url(/-/media/Themes/Upfield/Brands/Proactiv/Proactiv/images/arrow.svg);
      background-position: center;
      background-repeat: no-repeat;
    }



.search-box input[type='text'] {
    border-radius: var(--border-radius-s);
  }
    @media (min-width: 48rem) {.search-box input[type='text'] {
      width: 30rem
  }
    }



/* Settings */

/* elements*/

/* Brand specific import */