: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: #f4f4f4;
  --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: #333333;
  --color-darkest-gray: #002459;

  /* Brand colors */
  --brand-color-1: #74b241; /* Button, Nav-underline, h6 */
  --brand-color-2: #28841f; /* Tags */
  --brand-color-3: #fcdf07;
  --brand-color-4: #fef5b4;
  --brand-color-5: #fcf2e1;
  /* --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: var(--color-lightest-gray);
  --background-color-medium: var(--color-light-gray);
  --background-color-dark: var(--color-medium-gray);
  --background-color-brand: var(--background-color-medium);

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

  /* Various */
  --tag-color: var(--brand-color-2);
  --header-color: var(--brand-color-3);
  --footer-color: var(--brand-color-3);
  --notification-bar-color: var(--background-color-brand);
  --notification-content-color: var(--text-color);
}

@font-face {
  font-family: 'rusty';
  font-style: normal;
  font-weight: var(--fw-regular);
  src: url(/-/media/Themes/Upfield/Brands/Becel/Becel-NL/fonts/becelsans-rusty-webfont.woff2)
      format('woff2'),
    url(/-/media/Themes/Upfield/Brands/Becel/Becel-NL/fonts/becelsans-rusty-webfont.woff)
      format('woff');
}

:root {
  /* Font families */
  --ff-body: 'Trebuchet MS', Helvetica, sans-serif;
  --ff-headings: 'rusty', Arial, Helvetica, sans-serif;
  --ff-cards: 'rusty', Arial, Helvetica, sans-serif;

  /* Font sizes */
  --fs-xs: 0.9375rem;
  --fs-s: 1.125rem;
  --fs-m: 1.25rem;
  --fs-l: 1.5rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.5rem;
  --fs-xxxl: 4rem;
  --fs-xxxxl: 6rem;
}

:root {
  /* Spacing relative to document, i.e. for paddings, etc. */
  --s: 1rem; /* Default spacing value */

  --s-xs: calc(var(--s) * 0.3125); /* 5px */
  --s-s: calc(var(--s) * 0.5); /* 8px */
  --s-m: var(--s); /* 16px */
  --s-l: calc(var(--s) * 1.5); /* 24px */
  --s-xl: calc(var(--s) * 2); /* 32px */
  --s-xxl: calc(var(--s) * 3); /* 48px */
  --s-xxxl: calc(var(--s) * 4); /* 64px */
  --s-xxxxl: calc(var(--s) * 6); /* 128px */
  --s-xxxxxl: calc(var(--s) * 8); /* 192px */

  /* Spacing relative to parent, i.e. for margins */
  --m: 1.5em; /* Default margin value */

  --m-xs: calc(var(--m) / 3);
  --m-s: calc(var(--m) / 2);
  --m-m: var(--m);
  --m-l: calc(var(--m) * 2);
  --m-xl: calc(var(--m) * 3);
}

:root {
  --pattern: url('/-/media/Themes/Upfield/Brands/Becel/Becel-NL/images/bg-pattern.jpg');
}

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

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

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  text-transform: lowercase !important;
  font-weight: normal;
  margin: 0 0 var(--s-m);
}

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

@media (min-width: 62rem) {

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

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

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

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

small {
  font-size: var(--fs-xs);
}

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

blockquote,
q {
  background: var(--color-lightest-gray);
  border-left: var(--s-s) solid var(--brand-color-3);
}

footer {
  background: url(/-/media/Themes/Upfield/Brands/Becel/Becel-NL/images/header-bg.jpg)
    no-repeat center 0;
  background-size: cover;
  font-size: var(--fs-s);
  color: var(--text-color);
}

  footer .rich-text,
  footer a {
    opacity: 1;
    color: var(--text-color);
  }

  footer a:hover {
      color: var(--text-color);
    }

  footer h3 {
    font-size: var(--fs-l);
    color: var(--text-color);
  }

  footer hr {
    border-bottom: 1px solid var(--text-color);
  }

  footer .social-icons-link-list li a::after {
          background-color: rgba(51, 51, 51, 0.2);
        }

.header-logo-center {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: url(/-/media/Themes/Upfield/Brands/Becel/Becel-NL/images/header-bg.jpg)
    no-repeat center 0;
  background-size: cover;
  color: var(--text-color);
}

  .header-logo-center .navigation a {
    text-transform: lowercase;
    font-family: var(--ff-headings);
    color: var(--text-color);
    font-size: var(--fs-s);
  }

  @media (min-width: 62rem) {
      .header-logo-center .navigation a::after {
        background-color: var(--secondary-color);
      }
    }

.meta-header {
  background: var(--pattern) repeat center 0;
}

  .meta-header .link-list li a {
        color: var(--text-color);
        text-transform: lowercase;
        font-family: var(--ff-headings);
        font-size: var(--fs-xs);
      }

  .meta-header .link-list li::after {
        background: var(--color-dark-gray);
        height: calc(var(--meta-header-height) / 3);
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
      }

body.on-page-editor .meta-header {
  background: var(--brand-color-3);
}

.page-header .page-header-bgcontainer .page-header-content-title::after {
      display: none;
    }
  .page-header .page-header-content-title {
    margin: 0 0 var(--s-m);
  }

.promo-related-article .related-articles-body {
    background: url(/-/media/Themes/Upfield/Brands/Becel/Becel-NL/images/ornament.svg) no-repeat center 0%;

    padding-top: var(--s-l);
  }

    @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%; 
      }
    }



.article-card {
  border-bottom: none;
}

  .article-card .article-card-title {
    font-family: var(--ff-cards);
  }

.article-detail .article-detail-content {
    line-height: var(--lh-m);
  }

    @media (min-width: 62rem) {.article-detail .article-detail-content {
      line-height: var(--lh-l)
  }
    }

.category-card .category-card-title {
    font-family: var(--ff-cards);
  }

.product-card {
  border-bottom: none;
}

  .product-card .product-card-title {
    font-family: var(--ff-cards);
  }

.recipe-card {
  border-bottom: none;
}
  .recipe-card .recipe-card-title {
    font-family: var(--ff-cards);
  }



.product-detail-header::before {
    background: none;
  }
  .product-detail-header::after {
    background: var(--pattern);
  }
  .product-detail-header .product-detail-bgimage .product-detail-header-content h1 {
        color: var(--secondary-color);
      }
  .product-detail-header .product-detail-bgimage .product-detail-header-content h3 {
        color: var(---color-text);
      }
  .product-detail-header .product-detail-bgimage .product-detail-header-content .link a {
          color: var(--secondary-color);
        }

.product-detail-body {
  background: var(--pattern);
}

.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: var(--secondary-color);
    color: var(--color-white);
  }

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

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

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

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

.recipe-detail-instructions {
  & ol li::before {
    color: var(--brand-color-1);
    border: 2px solid var(--color-medium-light-gray);
  }
} */



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

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



.manual-teaser-list .component-content > h3 {
    margin-bottom: var(--s-xl);
    position: relative;
    background: url(/-/media/Themes/Upfield/Brands/Becel/Becel-NL/images/ornament.svg)
      no-repeat center 0%;
    padding-top: var(--s-m);
  }


/* presentation styles of container */
.bg-pattern {
  background: var(--pattern);
}



.search-box {
  background: none;
}

  .search-box input[type='text'] {
    border-radius: var(--border-radius-s);
  }



/* Settings */

/* elements*/

/* Brand specific import */

/* page content */

/* Navigation */

/* Page structure */

/* Search */