: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: #ed0029; /* Button, Nav-underline, h6 */
  --brand-color-2: #000548; /* Tags */
  --brand-color-3: #dbdce2;
  --brand-color-4: #343434;
  --brand-color-5: #666666;
  --background-color-brand: var(--background-color-medium);
  
  /* --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: #fffce2;
  --background-color-medium: #e9d9f1;
  --background-color-dark: #002459;

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

  /* Generic */
  --nav-icon-color: var(--color-white);

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

@font-face {
  font-family: 'Boston';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-light);
  src: url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/fonts/boston-light.woff2)
      format('woff2'),
    url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/fonts/boston-light.woff)
      format('woff');
}

@font-face {
  font-family: 'Boston';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-regular);
  src: url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/fonts/boston-regular.woff2)
      format('woff2'),
    url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/fonts/boston-regular.woff)
      format('woff');
}

@font-face {
  font-family: 'Boston';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-bold);
  src: url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/fonts/boston-bold.woff2)
      format('woff2'),
    url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/fonts/boston-bold.woff)
      format('woff');
}

:root {
  /* logo */
  --logo-width: 200px; /* included padding */
  --logo-width-largedesktop: 230px;
  --logo-width-desktop: 450px;
}

:root {
  /* Font families */
  --ff-body: 'Boston', Arial, Helvetica, sans-serif;
  --ff-headings: 'Boston', Arial, Helvetica, sans-serif;
  --ff-cards: 'Boston', 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;

  /* font weight */
  --fw-cards: var(--fw-normal);
}

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

.btn,
button,
input[type='button'] {
  text-transform: none;
  text-transform: initial;
  font-size: var(--fs-s);
  border-radius: var(--border-radius-s);
  font-weight: var(--fw-regular);
}

.btn-primary {
  }

.btn-medium {
  }

body {
  font-size: var(--fs-s);
  font-weight: var(--fw-light);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: var(--fw-regular);
  text-transform: none;
  text-transform: initial;
}

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

footer {
}

.header-logo-left {
    background: var(--pattern);
    background-size: contain;
}
    [dir="rtl"] .header-logo-left {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .header-logo-left .header-nav-icon {
        top: 21px;
        -webkit-transform: none;
                transform: none;
    }
    [dir='rtl'] .header-logo-left .header-nav-icon {
            left: auto;
		    right:var(--s-l);
        }
    .header-logo-left .file-type-icon-media-link {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
    }
    [dir="rtl"] .header-logo-left .file-type-icon-media-link
        {
            left: 0;
            right: auto;
        }
    @media (min-width: 75rem) {
    .header-logo-left .file-type-icon-media-link img {
                width: var(--logo-width-largedesktop);
                margin: auto !important

        }
            }
    @media (min-width: 48rem) {
    .header-logo-left .file-type-icon-media-link img {
                margin: 10px 0 0 10px

        }
            }
    @media (max-width: 61.9375rem) {
    .header-logo-left .file-type-icon-media-link img {
                max-width: var(--logo-width);
                max-height: 60px;
                width: auto;
                height: auto;
                margin: 10px 0 0 10px

        }
            }
    @media (min-width: 75rem) {
                [dir="rtl"] .header-logo-left .navigation nav a {
                    font-size: var(--fs-l);
                }
            }
    .header-logo-left .navigation nav a.current::after {
                background-color: var(--header-text-color);
            }
    @media (min-width: 75rem) {
                [dir="rtl"] .header-logo-left .navigation nav ul {
                    -webkit-box-pack: start;
                        -ms-flex-pack: start;
                            justify-content: flex-start;
                }
            }
    @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;
                        -webkit-transform-origin: 65% 80%;
                                transform-origin: 65% 80%
                }
                    }
    .header-logo-left .submenu ul li div a {
                        font-size: var(--fs-xs);
                    }
    @media (min-width: 75rem) {
    .header-logo-left .submenu ul li div a {
                            color: var(--meta-header-color)
                    }
                        }
    .header-logo-left .submenu ul li div a::after {
                            background-color: var(--meta-header-color);
                        }

.promo-related-article .related-articles-body {
    padding-top: var(--s-xxxl);
    background: url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/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 {
    color: var(--brand-color-2);
    font-size: var(--fs-xs);
    text-transform: none;
    text-transform: initial;
  }
  .promo-related-article .related-article-images img:nth-child(2) {
      position: relative;
      z-index: -10; /* hard value for brand specific zindex */
      -webkit-box-shadow: none;
              box-shadow: none;
    }



.article-card {
  border-bottom: none;
}
  .article-card .article-card-title {
    text-transform: none;
    text-transform: initial;
  }

.category-card {
  text-transform: none;
  text-transform: initial;
}

.product-card {
  border-bottom: none;
}
  .product-card .product-card-title {
    text-transform: none;
    text-transform: initial;
  }

.recipe-card {
  border-bottom: none;
}
  .recipe-card .recipe-card-title {
    text-transform: none;
    text-transform: initial;
  }



.related-articles {
  padding-top: var(--s-xxxl);
  background: url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/images/ornament.svg)
    no-repeat center 0;
}
  .related-articles .related-article-subtitle {
    color: var(--brand-color-2);
    font-size: var(--fs-xs);
  }

.related-products {
  padding-top: var(--s-xxxl);
  background: url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/images/ornament.svg)
    no-repeat center 0;
}
  .related-products .related-product-subtitle {
    color: var(--brand-color-5);
    font-family: var(--ff-body);
  }

.related-recipes {
  padding-top: var(--s-xxxl);
  background: url(/-/media/Themes/Upfield/Brands/Flora/Flora-plant/images/ornament.svg)
    no-repeat center 0;
}
  .related-recipes .related-recipe-subtitle {
    color: var(--brand-color-5);
    font-family: var(--ff-body);
  }
  .related-recipes.v4 {
    padding: var(--m-l) 0;
  }

.recipe-detail-instructions ol li::before {
    color: var(--brand-color-1);
    border: 2px solid var(--brand-color-2);
  }



/* presentation styles of container */

.bg-pattern {
  background: var(--pattern);
}



/* Settings */

/* elements*/

/* Brand specific import */