: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: #002459; /* Button, Nav-underline, h6 */
  --brand-color-2: #f5ba00; /* Tags */
  --brand-color-3: #fefceb;
  --brand-color-4: #e9d29d;
  --brand-color-5: #002459; /* Link */
  --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-darkest-gray);
  --background-color-brand: var(--background-color-medium);

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

  /* 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: 'AmberlySans';
  src: url('/-/media/Themes/Upfield/Brands/Rama/Rama/fonts/AmberlySans_SemiBold.woff2') format('woff2'),
    url('/-/media/Themes/Upfield/Brands/Rama/Rama/fonts/AmberlySans_SemiBold.woff') format('woff');
  font-weight: 600; /* Note: Same as var(--fw-semi-bold), but @font-face rule ignores CSS variables. */
  font-style: normal;
}

@font-face {
  font-family: 'GothamRound';
  src: url('/-/media/Themes/Upfield/Brands/Rama/Rama/fonts/GothamRndSSm-Book.woff2') format('woff2'),
    url('/-/media/Themes/Upfield/Brands/Rama/Rama/fonts/GothamRndSSm-Book.woff') format('woff');
  font-weight: 400; /* Note: Same as var(--fw-regular), but @font-face rule ignores CSS variables. */
  font-style: normal;
}

@font-face {
  font-family: 'GothamRound';
  src: url('/-/media/Themes/Upfield/Brands/Rama/Rama/fonts/GothamRndSSm-Medium.woff2') format('woff2'),
    url('/-/media/Themes/Upfield/Brands/Rama/Rama/fonts/GothamRndSSm-Medium.woff') format('woff');
  font-weight: 500; /* Note: Same as var(--fw-medium), but @font-face rule ignores CSS variables. */
  font-style: normal;
}

:root {
  /* Font families */
  --ff-body: 'GothamRound', Arial, Helvetica, sans-serif;
  --ff-headings: 'AmberlySans', Arial, Helvetica, sans-serif;

  /* Font sizes */
  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-m: 1.125rem;
  --fs-l: 1.3125rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 2rem;
  --fs-xxxl: 3.5rem;
  --fs-xxxxl: 4.5rem;

  /* Line heights */
  --lh-xs: 1.125;
  --lh-s: 1.25;
  --lh-m: 1.5;
  --lh-l: 1.75;
  --lh-xl: 2;
}

.btn,
button,
input[type="button"] {
  font-size: var(--fs-xs);
}
  [dir="rtl"] .btn, [dir="rtl"] button, [dir="rtl"] input[type="button"] {
    font-size: var(--fs-s);
    font-weight: var(--fw-bold);
  }

.btn-primary {
    border-radius: var(--border-radius-rounded);
    border: var(--s-xs) solid var(--brand-color-4);
  }

input[type='text'],
input[type='color'],
input[type='date'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='range'],
input[type='search'],
input[type='tel'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea {
	font-size: var(--fs-s);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: var(--fw-semi-bold);
  text-transform: uppercase;
}

footer {
  border-top: var(--s-xs) solid var(--brand-color-4);
  color: var(--brand-color-1);
}

  footer h3 {
    color: var(--brand-color-1);
  }

  footer a {
    color: var(--brand-color-1);
  }

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

  footer .social-icons-link-list li a::after {
          background-color: var(--brand-color-1);
        }

  [dir="rtl"] footer .footer-top .rich-text {
        font-size: var(--fs-s);
      }

.header-logo-center {
  border-bottom: var(--s-xs) solid var(--brand-color-4);
  -webkit-box-shadow: none;
          box-shadow: none;
}

  .header-logo-center .navigation a {
      text-transform: uppercase;
      font-family: var(--ff-headings);
    }

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

[dir="rtl"] .header-logo-center .navigation a {
                font-size: var(--fs-m);
            }
            @media (min-width: 62rem) {
                [dir="rtl"] .header-logo-center .navigation a {
                    font-size: var(--fs-l);
                    font-weight: var(--fw-bold);
                }
            }
.promo-related-article .related-articles-body {
    padding-top: var(--s-xxl);
    background: url(/-/media/Themes/Upfield/Brands/Rama/Rama/images/Rama-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: 96%;
      }
    }
  .promo-related-article .related-article-images img {
      border-bottom: var(--s-xs) solid var(--brand-color-4);
    }
  .promo-related-article .related-article-subtitle {
    color: var(--brand-color-6);
  }



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

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

.product-card {
  border-bottom: var(--s-xs) solid var(--brand-color-4);
}
  .product-card .btn {
    border-radius: var(--border-radius-rounded);
  }
  .product-card .product-card-title {
    font-size: var(--fs-l);
  }

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



.article-detail .article-detail-content {
    font-weight: var(--fw-regular);
  }

    .article-detail .article-detail-content a {
      text-decoration: underline;
    }

    .article-detail .article-detail-content a:hover {
        color: var(--brand-color-6);
      }

.related-articles .related-article-subtitle {
    color: var(--brand-color-6);
  }

.related-products .related-product-subtitle {
    color: var(--brand-color-6);
  }

.related-recipes .related-recipe-subtitle {
    color: var(--brand-color-6);
  }

.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);
  }


.search-box {
  background-color: transparent;
}



/* Settings */

/* elements*/

/* Brand specific import */