@font-face {
  font-family: Figtree;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/figtree_n5.3b6b7df38aa5986536945796e1f947445832047c.woff2")
      format("woff2"),
    url("../fonts/figtree_n5.f26bf6dcae278b0ed902605f6605fa3338e81dab.woff")
      format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/figtree_n6.9d1ea52bb49a0a86cfd1b0383d00f83d3fcc14de.woff2")
      format("woff2"),
    url("../fonts/figtree_n6.f0fcdea525a0e47b2ae4ab645832a8e8a96d31d3.woff")
      format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/figtree_n4.3c0838aba1701047e60be6a99a1b0a40ce9b8419.woff2")
      format("woff2"),
    url("../fonts/figtree_n4.c0575d1db21fc3821f17fd6617d3dee552312137.woff")
      format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/figtree_i5.969396f679a62854cf82dbf67acc5721e41351f0.woff2")
      format("woff2"),
    url("../fonts/figtree_i5.93bc1cad6c73ca9815f9777c49176dfc9d2890dd.woff")
      format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/figtree_i6.702baae75738b446cfbed6ac0d60cab7b21e61ba.woff2")
      format("woff2"),
    url("../fonts/figtree_i6.6b8dc40d16c9905d29525156e284509f871ce8f9.woff")
      format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/figtree_i4.89f7a4275c064845c304a4cf8a4a586060656db2.woff2")
      format("woff2"),
    url("../fonts/figtree_i4.6f955aaaafc55a22ffc1f32ecf3756859a5ad3e2.woff")
      format("woff");
}

/*
    In some places the font-weight of 700 is used for boldness. In our setup we only use the font weight up to 600. 
    In Safari browser though the 700 font weight is applied even without loading it as a font.
    So we need to apply the 600 to font-weight 700.
  */
@font-face {
  font-family: Figtree;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/figtree_n6.9d1ea52bb49a0a86cfd1b0383d00f83d3fcc14de.woff2")
      format("woff2"),
    url("../fonts/figtree_n6.f0fcdea525a0e47b2ae4ab645832a8e8a96d31d3.woff")
      format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/figtree_i6.702baae75738b446cfbed6ac0d60cab7b21e61ba.woff2")
      format("woff2"),
    url("../fonts/figtree_i6.6b8dc40d16c9905d29525156e284509f871ce8f9.woff")
      format("woff");
}

/* Ananda font (self hosted) */
@font-face {
  font-family: Ananda;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/ananda.woff2") format("woff2"),
    url("../fonts/ananda.woff") format("woff");
}
/* Define utility classes for background and font color */
.bg-c-primary {
  background-color: var(--c-primary) !important;
}
.bg-c-surface {
  background-color: var(--c-surface) !important;
}
.bg-c-surface-highlight {
  background-color: var(--c-surface-highlight) !important;
}
.bg-c-surface-subdued {
  background-color: var(--c-surface-subdued) !important;
}
.bg-c-surface-neutral {
  background-color: var(--c-surface-neutral) !important;
}
.bg-c-surface-error {
  background-color: var(--c-surface-error) !important;
}

.c-text {
  color: var(--c-text) !important;
}
.c-text-subdued {
  color: var(--c-text-subdued) !important;
}
.c-text-primary {
  color: var(--c-text-primary) !important;
}
.c-text-error {
  color: var(--c-text-error) !important;
}
.c-text-on-primary {
  color: var(--c-text-on-primary) !important;
}
.c-text-on-dark {
  color: var(--c-text-on-dark) !important;
}

body #CybotCookiebotDialog {
  box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, 0.04);
  top: unset !important;
  bottom: 0;
  z-index: 5;
}

#CybotCookiebotDialog * {
  font-family: "Lato", sans-serif !important;
}

#CybotCookiebotDialogBodyButtons a {
  padding: 10px 20px;
  width: auto !important;
  line-height: normal;
}

body #CybotCookiebotDialogBodyButtons,
body #CybotCookiebotDialogBodyContent,
#CybotCookiebotDialogDetail {
  padding-left: var(--container-horizontal-spacing) !important;
  padding-right: var(--container-horizontal-spacing) !important;
  margin-left: 0px;
}

body #CybotCookiebotDialogBodyContent {
  padding-top: 15px;
}

body #CybotCookiebotDialogBodyButtonDecline,
body #CybotCookiebotDialogBodyContentText p {
  color: var(--c-text-subdued) !important;
}

body #CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyButtonDecline:hover {
  color: var(--c-text-subdued) !important;
  margin-left: 0 !important;
}

body #CybotCookiebotDialogDetailBody {
  max-width: 600px;
  margin-top: 5px;
}

@media (max-width: 550px) {
  body #CybotCookiebotDialogBodyButtonDecline {
    padding: 0;
    background-color: unset;
    border: unset;
    margin-bottom: 6px;
  }
}

@media (max-width: 356px) {
  body #CybotCookiebotDialogBodyButtonDetails {
    float: unset;
    margin-bottom: 4px;
  }
}

body #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLink {
  margin-top: 13px;
}

body #CybotCookiebotDialogBodyButtonAccept {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  margin-left: 0 !important;
}
#shopify-buyer-consent {
  margin-top: 1em;
  display: inline-block;
  width: 100%;
}

#shopify-buyer-consent.hidden {
  display: none;
}

#shopify-subscription-policy-button {
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}

#shopify-subscription-policy-button::before {
  box-shadow: none;
}

.block-ingredient {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.block__left {
  flex-basis: 220px;
  flex-shrink: 0;
}

.block__right {
  flex-grow: 1;
}

@media(max-width: 640px) {
  .block-ingredient {
  flex-direction: column-reverse;
  align-items: center;
}
}