{"version":3,"sources":["webpack:///./src/components/global/RitualButton.js","webpack:///./src/utils/readingTime.js","webpack:///./src/components/product/MobileBannerBottom.js","webpack:///./src/components/product/MobileBannerTop.js","webpack:///./src/components/product/ProductCtaBar.js","webpack:///./src/components/global/StickyProductNav.js","webpack:///./src/utils/order.js","webpack:///./src/components/hub/ArticlePreview.js","webpack:///./src/components/seo/Page.js","webpack:///./src/components/product/ProductCategoryCards.js","webpack:///./src/components/ingredients/OtherIngredientsModal.js","webpack:///./src/components/ingredients/IngredientsHeader.js"],"names":["StyledButton","styled","MagicLink","Color","ritualBlue","responsive","sm","ritualYellow","white","rgba","StyledTextWrapper","div","StyledText","span","Font","circular","rem","md","AppendText","MagicButton","render","this","props","to","state","href","children","className","target","title","append","onClick","ariaLabel","id","disabled","settings","React","Component","calculateReadingTime","primaryContent","reduce","total","node","contentBody","childMarkdownRemark","timeToRead","Wrapper","attrs","MobileBannerBottom","checkoutButtonProps","Container","Row","CheckoutButton","Banner","p","messageBannerHeight","ProductTitle","h1","dutch","MobileBannerTop","isScrollingDown","messageBannerPresent","offsetFromBanner","lastScrollTop","componentDidMount","$","window","on","setIsScrollingDown","bind","context","height","setState","componentWillUnmount","off","st","pageYOffset","document","documentElement","scrollTop","bannerText","yieldedContent","linkNode","dangerouslySetInnerHTML","__html","KustomerIcon","createGlobalStyle","raised","BarWrapper","media","mobile","BarContainer","tablet","linkWidth","Column","ProductName","h2","YieldedLinkContainer","ProductLinks","MobileBannerContainer","ProductCtaBar","buttonCta","mainText","productName","hasActiveLink","product","showTopBar","scrollOffset","useState","showProductCtaBar","setShowProductCtaBar","atLeastTablet","setAtLeastTablet","productNameHtml","NameMap","html","useEffect","atLeast","handleScroll","throttle","header","getElementsByTagName","footer","position","headerHeight","offsetHeight","footerHeight","footerPosition","offsetTop","isBelowFooter","isAboveHero","handleResize","addEventListener","removeEventListener","buttonLocation","buttonText","appendText","stockStatus","trackCTAClick","linkAnchor","linkText","linkHref","ProductLink","StickyProductNav","contentfulProducts","intl","cf","data","allContentfulProduct","nodes","trackProductCTAClick","location","e","event","nonInteraction","metrics","track","productSku","sku","ctaLocation","showLearnMore","contentfulProduct","find","ctaText","t","amount","formatCurrency","price","round","name","Text","defaultMessage","query","orderArray","array","order","property","sort","a","b","aIndex","indexOf","bIndex","ArticlePreviewContainer","lg","ArticlePreviewTitleColumn","ArticleLink","ArticlePreviewImage","backgroundColor","ArticlePreviewContent","ritualGrey","ArticleReadtime","ArticleArrow","Icons","ArrowRight","ArticleTitle","ArticleSummary","ArticlePreview","article","readTime","heroBackgroundColor","src","heroImage","fixed","color","alt","style","userSelect","objectFit","objectPosition","width","userDrag","pointerEvents","touchCallout","values","previewText","PageSEO","pagePath","description","image","section","CategoryCardsContainer","scrollable","Slide","GridSlide","ImageContainer","RibbonStyle","css","OrderedCardShortNames","ProductCategoryCards","categories","allContentfulProductCategory","orderedCategoryNodes","_getOrderedCategories","handleClick","allCategoryNodes","renderSlides","slides","SlideComponent","map","slide","i","url","key","fluid","img","loading","altText","imgStyle","flag","contentStyle","bundleImage","bundleImages","discountData","getDiscountData","shortName","shopLandingReference","slug","cardImage","push","titleCopy","bleedLeft","bleedRight","ProductCategoryCardsQuery","componentQuery","Title","h3","IngredientContainer","Name","h4","Category","Content","OtherIngredientsModal","isOpen","onRequestClose","ingredients","slideOut","ingredient","supplier","function","IngredientHeader","IngredientText","Tabs","TabContainer","active","Tab","IngredientsHeader","locationPath","subheadText","headerText","mapView","pathname","includes","justifyContent"],"mappings":"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","file":"12d887768f3790979fa158977ae092e2920fb659-9311e3605ff4a15608af.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { Font, Color, rem, rgba, responsive } from \"../../utils/style\";\n\n// Components\nimport MagicLink from \"../MagicLink\";\n\n// Styled Elements\nconst StyledButton = styled(MagicLink)`\n  box-sizing: border-box;\n  padding: 0 24px;\n  border-radius: 26px;\n  height: 50px;\n  cursor: pointer;\n  background-color: ${Color.ritualBlue};\n  border: 2px solid ${Color.ritualBlue};\n  margin: 0;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  position: relative;\n\n  ${responsive.sm`\n    padding: 0 30px;\n  `};\n\n  * {\n    font-weight: 500;\n  }\n\n  &.bordered {\n    background-color: transparent;\n  }\n\n  &.short {\n    height: 40px;\n  }\n\n  &.fullwidth {\n    width: 100%;\n  }\n\n  &.long-text {\n    padding: 0 20px;\n\n    ${responsive.sm`\n      padding: 0 20px;\n    `}\n  }\n\n  &:hover {\n    border-color: ${Color.ritualYellow} !important;\n    background-color: ${Color.ritualYellow} !important;\n\n    span {\n      color: ${Color.ritualBlue} !important;\n\n      &:before {\n        background-color: ${Color.ritualBlue} !important;\n      }\n    }\n  }\n\n  &.alt-hover {\n    &:hover {\n      border-color: ${Color.white} !important;\n      background-color: ${Color.white} !important;\n\n      span {\n        color: ${Color.ritualBlue} !important;\n\n        &:before {\n          background-color: ${Color.ritualBlue} !important;\n        }\n      }\n    }\n  }\n\n  &.primary-cta {\n    background-color: white !important;\n    border: none !important;\n    color: ${Color.ritualBlue} !important;\n    &:hover {\n      color: white !important;\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: white !important;\n      }\n    }\n\n    span {\n      color: ${Color.ritualBlue} !important;\n    }\n  }\n\n  &.yellow-cta {\n    background-color: ${Color.ritualYellow} !important;\n    border: none !important;\n    color: ${Color.ritualBlue} !important;\n\n    span {\n      color: ${Color.ritualBlue} !important;\n\n      &:before {\n        background-color: ${Color.ritualBlue} !important;\n      }\n    }\n\n    &:hover {\n      color: white !important;\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: ${Color.white} !important;\n\n        &:before {\n          background-color: ${Color.white} !important;\n        }\n      }\n    }\n\n    &.disabled {\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: ${Color.white} !important;\n\n        &:before {\n          background-color: ${Color.white} !important;\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    opacity: 0.24;\n    cursor: default;\n    pointer-events: none;\n\n    &:hover {\n      background-color: ${Color.ritualBlue} !important;\n      border: 2px solid ${Color.ritualBlue} !important;\n\n      span {\n        color: white !important;\n\n        &:before {\n          background-color: white !important;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    background-color: white;\n    border: 1px solid ${rgba(Color.ritualBlue, 0.16)} !important;\n\n    span {\n      color: ${Color.ritualBlue};\n    }\n\n    &:hover {\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: white !important;\n      }\n\n      &:before {\n        background-color: ${Color.ritualBlue} !important;\n      }\n    }\n  }\n`;\n\nconst StyledTextWrapper = styled.div`\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledText = styled.span`\n  ${Font.circular}\n  font-size: ${rem(16)};\n  line-height: ${rem(26)};\n  font-weight: 500;\n  color: ${Color.white};\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  align-content: center;\n\n  &.short {\n    font-size: ${rem(14)};\n    line-height: ${rem(24)};\n  }\n\n  .isvg {\n    height: auto;\n    display: flex;\n  }\n\n  &.outlined {\n    font-size: ${rem(14)};\n    line-height: ${rem(24)};\n\n    ${responsive.md`\n      font-size: ${rem(16)};\n      line-height: ${rem(26)};\n    `}\n  }\n\n  &.bordered {\n    color: ${Color.ritualBlue};\n\n    span {\n      color: ${Color.ritualBlue};\n\n      &:before {\n        background-color: ${Color.ritualBlue};\n      }\n    }\n  }\n`;\n\nconst AppendText = styled.span`\n  position: relative;\n  ${Font.circular}\n  font-size: ${rem(16)};\n  line-height: ${rem(26)};\n  font-weight: 500;\n  color: ${Color.white};\n  transition: all 0.2s;\n  padding-left: 10px;\n  margin-left: 8px;\n\n  &.short {\n    font-size: ${rem(14)};\n    line-height: ${rem(24)};\n\n    &:before {\n      height: 16px;\n    }\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    top: 50%;\n    transform: translateY(-50%);\n    height: 24px;\n    left: 0;\n    width: 1px;\n    background-color: ${Color.white};\n    transition: all 0.2s;\n    opacity: 0.56;\n  }\n`;\n\nexport default class MagicButton extends React.Component {\n  render() {\n    let {\n      to,\n      state,\n      href,\n      children,\n      className,\n      target,\n      title,\n      append,\n      onClick,\n      ariaLabel,\n      id,\n      disabled,\n    } = this.props;\n\n    if (disabled) {\n      className = `${className || \"\"} disabled`;\n    }\n\n    let settings = {\n      to,\n      state,\n      href,\n      title,\n      target,\n      className,\n      ariaLabel,\n      id,\n    };\n\n    if (onClick) {\n      settings.onClick = disabled ? null : onClick;\n    }\n\n    return (\n      <StyledButton id={id} {...settings}>\n        <StyledTextWrapper>\n          <StyledText className={className}>{children}</StyledText>\n          {append && <AppendText className={className}>{append}</AppendText>}\n        </StyledTextWrapper>\n      </StyledButton>\n    );\n  }\n}\n","export function calculateReadingTime(primaryContent) {\n  return primaryContent.reduce((total, node) => {\n    return node.contentBody\n      ? total + node.contentBody.childMarkdownRemark.timeToRead\n      : total;\n  }, 0);\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Color } from \"../../utils/style\";\nimport Container from \"../Container\";\nimport Row from \"../Row\";\nimport CheckoutButton from \"./CheckoutButton\";\n\nconst Wrapper = styled.div.attrs({\n  className: \"mobile-banner-bottom\",\n})`\n  position: fixed;\n  bottom: 0;\n  width: 100%;\n  z-index: 999;\n\n  .mobile-banner-bottom-btn-container {\n    background-color: ${Color.white};\n    border-top: 1px solid #ccc;\n    padding-bottom: 12px;\n    width: 100%;\n    z-index: 399;\n\n    .row {\n      align-items: center;\n      height: 100%;\n\n      a {\n        width: 100%;\n      }\n    }\n\n    padding-top: 12px;\n    padding-bottom: max(env(safe-area-inset-bottom), 12px);\n  }\n`;\n\nexport default class MobileBannerBottom extends React.Component {\n  render() {\n    const { checkoutButtonProps, id } = this.props;\n\n    return (\n      <Wrapper id={id}>\n        <Container\n          id={`${id}_container`}\n          className=\"mobile-banner-bottom-btn-container\"\n        >\n          <Row className=\"px-3--5\" id={`${id}_container_row`}>\n            <CheckoutButton {...checkoutButtonProps} />\n          </Row>\n        </Container>\n      </Wrapper>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Font, Color, rem } from \"../../utils/style\";\nimport MagicLink from \"../MagicLink\";\nimport $ from \"jquery\";\n\nconst Banner = styled.div`\n  ${Font.circular}\n  background-color: ${Color.white};\n  font-size: ${rem(18)};\n\n  width: 100%;\n  height: 52px;\n\n  position: fixed;\n  top: ${p => p.messageBannerHeight};\n  left: 0;\n  z-index: 999;\n\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  border-bottom: 1px solid rgba(0, 0, 0, 0.16);\n  padding: 0 15px;\n\n  display: none;\n  &.compacted {\n    display: flex;\n  }\n`;\n\nconst ProductTitle = styled.h1`\n  ${Font.circular}\n  background-color: ${Color.white};\n  font-size: ${rem(18)};\n  display: flex;\n  margin: 0;\n\n  > p {\n    margin: 0;\n  }\n  em {\n    ${Font.dutch}\n    font-style: italic;\n  }\n`;\n\nexport default class MobileBannerTop extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isScrollingDown: true,\n      messageBannerPresent: false,\n      messageBannerHeight: props.offsetFromBanner || 0,\n    };\n    this.lastScrollTop = 0;\n  }\n\n  componentDidMount() {\n    $(window).on(\"scroll.banner\", this.setIsScrollingDown.bind(this));\n\n    $(window).on(\"messageBanner.open\", (context, height) => {\n      this.setState({\n        messageBannerPresent: true,\n        messageBannerHeight: height,\n      });\n    });\n\n    $(window).on(\"messageBanner.close\", () => {\n      this.setState({\n        messageBannerPresent: false,\n        messageBannerHeight: 0,\n      });\n    });\n  }\n\n  componentWillUnmount() {\n    $(window).off(\"scroll.banner\");\n  }\n\n  setIsScrollingDown() {\n    let st = window.pageYOffset || document.documentElement.scrollTop; // Credits: \"https://github.com/qeremy/so/blob/master/so.dom.js#L426\"\n\n    this.setState({\n      isScrollingDown: st > this.lastScrollTop,\n    });\n    this.lastScrollTop = st <= 0 ? 0 : st;\n  }\n\n  render() {\n    const { bannerText, yieldedContent, id } = this.props;\n\n    const { isScrollingDown, messageBannerHeight } = this.state;\n    const linkNode = yieldedContent ? yieldedContent.props.to : null;\n\n    return (\n      <Banner\n        id={id}\n        className={isScrollingDown ? \"compacted\" : \"\"}\n        messageBannerHeight={messageBannerHeight}\n      >\n        {linkNode ? (\n          <MagicLink id={`${id}_link`} to={linkNode}>\n            <ProductTitle dangerouslySetInnerHTML={{ __html: bannerText }} />\n          </MagicLink>\n        ) : (\n          <ProductTitle\n            id={`${id}_title`}\n            dangerouslySetInnerHTML={{ __html: bannerText }}\n          />\n        )}\n        {yieldedContent}\n      </Banner>\n    );\n  }\n}\n","import React, { useEffect, useState } from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport throttle from \"lodash/throttle\";\n\n// Utils\nimport {\n  Font,\n  Color,\n  rem,\n  media,\n  atLeast,\n  responsive,\n} from \"../../utils/style\";\nimport NameMap from \"../../utils/nameMap\";\n\n// Components\nimport Container from \"../Container\";\nimport Row from \"../Row\";\nimport CheckoutButton from \"./CheckoutButton\";\nimport MobileBannerBottom from \"./MobileBannerBottom\";\nimport MobileBannerTop from \"./MobileBannerTop\";\n\n// Styled Elements\nconst KustomerIcon = createGlobalStyle`\n  ${p => {\n    if (p.raised) {\n      return `\n        .kustomer-app-icon {\n          bottom: 75px !important;\n          margin-bottom: env(safe-area-inset-bottom) !important;\n        }\n      `;\n    }\n  }}\n`;\n\nconst BarWrapper = styled.div.attrs({\n  id: \"product-cta-bar-desktop\",\n  className: \"product-banner\",\n})`\n  position: fixed;\n  top: 64px;\n  right: 0;\n  left: 0;\n  z-index: 106;\n  background-color: ${Color.white};\n  border-bottom: 1px solid #ccc;\n  transform: translateY(-200%);\n  transition: transform 320ms ease-in-out, opacity 200ms ease-out;\n  opacity: 0;\n\n  &.active {\n    top: initial;\n\n    ${responsive.sm`\n      transform: translateY(0);\n      top: ${p => {\n        const headerHeight = 52;\n        return p.offsetFromBanner\n          ? p.offsetFromBanner + headerHeight\n          : headerHeight;\n      }}px;\n      opacity: 1;\n    `}\n\n    ${responsive.md`\n      top: ${p => (p.offsetFromBanner ? p.offsetFromBanner + 64 : 64)}px;\n    `}\n  }\n\n  ${media.mobile`\n    top: initial;\n    bottom: 0;\n    transform: translateY(100%);\n    border-top: 1px solid #ccc;\n    border-bottom: 0;\n  `};\n`;\n\nconst BarContainer = styled(Container).attrs({\n  id: \"product-cta-bar-desktop_container\",\n})`\n  ${media.tablet`\n    padding-left: max(15px, env(safe-area-inset-left));\n    padding-right: max(15px, env(safe-area-inset-right));\n  `} a {\n    width: ${p => (p.linkWidth ? p.linkWidth + \"px\" : \"auto\")};\n  }\n\n  ${media.mobile`\n    padding-bottom: env(safe-area-inset-bottom);\n\n    a {\n      width: 100% !important;\n      margin: 0 auto;\n    }\n  `};\n`;\n\nconst Column = styled.div.attrs({\n  className: \"col-12\",\n})`\n  padding: 0 !important;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 64px;\n\n  ${media.tablet`\n    width: 100%;\n  `};\n`;\n\nconst ProductName = styled.h2.attrs({\n  id: \"product-cta-bar-desktop_container_column_product-name\",\n})`\n  ${Font.circular}\n  color: ${Color.ritualBlue};\n  font-size: ${rem(22)};\n  line-height: ${rem(32)};\n  font-weight: 500;\n  text-align: left;\n  letter-spacing: -0.2px;\n  margin: 0;\n\n  em {\n    ${Font.dutch}\n    font-style: italic;\n  }\n\n  ${media.tablet`\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n    letter-spacing: 0;\n  `}\n\n  ${media.mobile`\n    display: none !important;\n  `}\n`;\n\nconst YieldedLinkContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: 32px;\n\n  &.active {\n    display: none;\n  }\n\n  & > * {\n    margin: 0;\n  }\n`;\n\nconst ProductLinks = styled.div.attrs({\n  id: \"product-cta-bar-desktop_container_column_links\",\n})`\n  display: flex;\n`;\n\nconst MobileBannerContainer = styled.div`\n  width: 100%;\n  z-index: 999;\n  opacity: 0;\n  visibility: hidden;\n\n  &.active {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport default function ProductCtaBar({\n  buttonCta,\n  mainText,\n  productName,\n  hasActiveLink,\n  onClick,\n  linkWidth,\n  offsetFromBanner,\n  children,\n  product,\n  showTopBar = true,\n  scrollOffset = 700,\n}) {\n  const [showProductCtaBar, setShowProductCtaBar] = useState(false);\n  const [atLeastTablet, setAtLeastTablet] = useState(false);\n  const productNameHtml = NameMap(productName).html;\n\n  useEffect(() => {\n    setAtLeastTablet(atLeast.tablet());\n  }, []);\n\n  useEffect(() => {\n    const handleScroll = throttle(() => {\n      let header = document.getElementsByTagName(\"header\")[0];\n      let footer = document.getElementsByTagName(\"footer\")[0];\n      let position = window.pageYOffset;\n\n      let headerHeight = header.offsetHeight;\n      let footerHeight = footer.offsetHeight;\n      let footerPosition = footer.offsetTop;\n\n      let isBelowHeroAndAboveFooter =\n        position >= scrollOffset - headerHeight &&\n        position < footerPosition - headerHeight - footerHeight / 2 &&\n        !showProductCtaBar;\n\n      let isBelowFooter =\n        position >= footerPosition - headerHeight - footerHeight / 2 &&\n        showProductCtaBar;\n\n      let isAboveHero =\n        position < scrollOffset - headerHeight && showProductCtaBar;\n\n      if (isBelowHeroAndAboveFooter) {\n        setShowProductCtaBar(true);\n      } else if (isBelowFooter) {\n        setShowProductCtaBar(false);\n      } else if (isAboveHero) {\n        setShowProductCtaBar(false);\n      }\n    }, 200);\n\n    const handleResize = throttle(\n      () => setAtLeastTablet(atLeast.tablet()),\n      400,\n    );\n\n    window.addEventListener(\"scroll\", handleScroll);\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"scroll\", handleScroll);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [showProductCtaBar]);\n\n  let checkoutButtonProps = {\n    buttonLocation: \"Sticky Nav\",\n    buttonText: mainText,\n    appendText: buttonCta,\n    stockStatus: product.stockStatus,\n    trackCTAClick: onClick,\n    product,\n    className: \"ProductCtaButton\",\n  };\n\n  return atLeastTablet ? (\n    <BarWrapper\n      className={showProductCtaBar ? \"active\" : \"\"}\n      offsetFromBanner={offsetFromBanner}\n    >\n      <BarContainer linkWidth={linkWidth}>\n        <Row id=\"product-cta-bar-desktop_container_row\">\n          <Column id=\"product-cta-bar-desktop_container_column\">\n            <ProductName\n              dangerouslySetInnerHTML={{ __html: productNameHtml }}\n            />\n            <ProductLinks>\n              {children && (\n                <YieldedLinkContainer>{children}</YieldedLinkContainer>\n              )}\n              <CheckoutButton {...checkoutButtonProps} />\n            </ProductLinks>\n          </Column>\n        </Row>\n      </BarContainer>\n    </BarWrapper>\n  ) : (\n    <MobileBannerContainer\n      id=\"product-cta-bar-mobile\"\n      className={showProductCtaBar ? \"active\" : \"\"}\n    >\n      <KustomerIcon raised={showProductCtaBar} />\n      {showTopBar && (\n        <MobileBannerTop\n          id=\"product-cta-bar-mobile_top\"\n          bannerText={productNameHtml}\n          hasActiveLink={hasActiveLink}\n          offsetFromBanner={offsetFromBanner}\n          linkAnchor=\"#reviews\"\n          linkText=\"Read Reviews\"\n          linkHref=\"#reviews\"\n          yieldedContent={children}\n        />\n      )}\n      <MobileBannerBottom\n        id=\"product-cta-bar-mobile_bottom\"\n        checkoutButtonProps={checkoutButtonProps}\n      />\n    </MobileBannerContainer>\n  );\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { StaticQuery, graphql } from \"gatsby\";\n\nimport ProductCtaBar from \"../product/ProductCtaBar\";\nimport MagicLink from \"../MagicLink\";\nimport Text from \"../Text\";\n\nimport { rem, Font, Color } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\n\n// Services\nimport intl from \"../../services/intl\";\n\nconst ProductLink = styled(MagicLink)`\n  ${Font.circular};\n  font-size: ${rem(14)} !important;\n  line-height: ${rem(24)} !important;\n  border-bottom: 2px solid ${Color.ritualBlue};\n`;\n\nconst componentQuery = graphql`\n  query stickyProductNavQuery {\n    allContentfulProduct {\n      nodes {\n        node_locale\n        __typename\n        name {\n          name\n        }\n        sku\n        slug\n        price\n        socialImage {\n          file {\n            url\n          }\n        }\n        stockStatus\n      }\n    }\n  }\n`;\n\nclass StickyProductNav extends React.Component {\n  constructor(props) {\n    super(props);\n    this.contentfulProducts = intl.cf(props.data.allContentfulProduct.nodes);\n  }\n\n  trackProductCTAClick(title, location, e) {\n    let event = {\n      title: title,\n      nonInteraction: false,\n      location: location,\n    };\n    metrics.track(\"CTA Clicked\", event);\n  }\n\n  render() {\n    const productSku = this.props.sku;\n\n    const {\n      ctaLocation,\n      scrollOffset,\n      showLearnMore,\n      showTopBar,\n      offsetFromBanner,\n    } = this.props;\n\n    const contentfulProduct = this.contentfulProducts.find(product => {\n      return productSku === product.sku;\n    });\n\n    const ctaText = intl.t(\"general.button-add-cart\", \"Add to Cart\");\n\n    return (\n      <ProductCtaBar\n        onClick={this.trackProductCTAClick.bind(this, ctaText, ctaLocation)}\n        mainText={intl.t(\"product.hero.button-price\", \"{amount} per month\", {\n          amount: intl.formatCurrency(contentfulProduct.price, { round: true }),\n        })}\n        buttonCta={ctaText}\n        product={contentfulProduct}\n        productName={contentfulProduct.name}\n        hasActiveLink={showLearnMore}\n        showTopBar={showTopBar}\n        offsetFromBanner={offsetFromBanner}\n        scrollOffset={scrollOffset}\n      >\n        {showLearnMore && (\n          <ProductLink to={contentfulProduct} className=\"-underline\">\n            <Text id=\"general.learn-more\" defaultMessage=\"Learn More\" />\n          </ProductLink>\n        )}\n      </ProductCtaBar>\n    );\n  }\n}\n\nexport default function(props) {\n  return (\n    <StaticQuery\n      query={componentQuery}\n      render={data => <StickyProductNav {...props} data={data} />}\n    />\n  );\n}\n","export function orderArray(array, order, property) {\n  // Make a copy to ensure we're not modifying the original data.\n  array = [...array];\n\n  return array.sort((a, b) => {\n    const aIndex = order.indexOf(a[property]);\n    const bIndex = order.indexOf(b[property]);\n\n    if (aIndex < 0 && bIndex < 0) return 0;\n    if (aIndex < 0) return 1;\n    if (bIndex < 0) return -1;\n\n    return aIndex - bIndex;\n  });\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { rem, Font, responsive, Color, media } from \"../../utils/style\";\nimport { calculateReadingTime } from \"../../utils/readingTime\";\nimport MagicLink from \"../MagicLink\";\nimport Text from \"../Text\";\nimport { Icons } from \"../../utils/svg\";\n\nconst ArticlePreviewContainer = styled.div.attrs({\n  className: \"container\",\n})`\n  ${media.mobile`\n    &.mobile-gutter {\n      padding-left: 20px !important;\n      padding-right: 20px !important;\n    }\n  `}\n\n  ${responsive.lg`\n    max-width: 100%;\n  `}\n`;\n\nconst ArticlePreviewTitleColumn = styled.div.attrs({\n  className: \"col-12 col-sm-8 offset-sm-2\",\n})`\n  &::before {\n    content: \"\";\n    width: 32px;\n    height: 4px;\n    background-color: ${Color.ritualBlue};\n    position: absolute;\n    top: 0;\n    left: calc(50% - 16px);\n  }\n\n  > * {\n    ${Font.circular};\n    font-size: ${rem(22)};\n    line-height: ${rem(32)};\n    letter-spacing: -0.2px;\n    margin: 28px auto 40px;\n\n    ${responsive.sm`\n      text-align: center !important;\n      margin-bottom: 56px;\n    `};\n\n    ${responsive.md`\n      max-width: 614px;\n    `};\n\n    ${responsive.lg`\n      max-width: 770px;\n    `};\n  }\n`;\n\nconst ArticleLink = styled(MagicLink)`\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  flex-direction: column;\n\n  ${responsive.sm`\n    flex-direction: row;\n  `};\n\n  img {\n    transition: all 0.2s ease-in-out !important;\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    img {\n      transform: scale(1.1);\n    }\n  }\n`;\n\nconst ArticlePreviewImage = styled.div`\n  width: 100%;\n\n  &:after {\n    content: \"\";\n    display: block;\n    padding-bottom: 100%;\n  }\n\n  img {\n    max-width: 100%;\n    width: 100%;\n  }\n\n  overflow: hidden;\n  background-color: ${p => p.backgroundColor};\n  display: flex;\n  position: relative;\n  align-items: center;\n\n  ${responsive.sm`\n    flex: 0 0 auto;\n    height: 232px;\n    width: 232px;\n  `};\n\n  ${responsive.md`\n    height: 240px;\n    width: 240px;\n  `}\n\n  ${responsive.lg`\n    height: 300px;\n    width: 300px;\n  `};\n`;\n\nconst ArticlePreviewContent = styled.div`\n  padding: 40px 24px;\n  background-color: ${Color.ritualGrey};\n  width: 100%;\n\n  ${responsive.sm`\n    width: 400px;\n    padding: 40px;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n  `};\n\n  ${responsive.md`\n    padding: 40px 48px;\n    width: 534px;\n  `};\n\n  ${responsive.lg`\n    padding: 40px 56px;\n    width: 670px;\n  `};\n`;\n\nconst ArticleReadtime = styled.span`\n  display: flex;\n  align-items: center;\n  ${Font.circular};\n  font-size: ${rem(14)};\n  line-height: ${rem(22)};\n  font-weight: 500;\n  text-align: left;\n  margin: 0 0 8px;\n`;\n\nconst ArticleArrow = styled(Icons.ArrowRight)`\n  width: 17px;\n  height: 8px;\n  margin-left: 16px;\n`;\n\nconst ArticleTitle = styled.h2`\n  ${Font.circular};\n  font-size: ${rem(20)};\n  line-height: ${rem(30)};\n  color: ${Color.ritualBlue};\n  margin: 0 0 8px;\n\n  ${responsive.md`\n    font-size: ${rem(24)};\n    line-height: ${rem(32)};\n    letter-spacing: -0.22px;\n  `};\n`;\n\nconst ArticleSummary = styled.p`\n  ${Font.dutch};\n  font-weight: normal;\n  font-size: ${rem(16)};\n  line-height: ${rem(26)};\n  margin: 0;\n  color: ${Color.ritualBlue};\n\n  ${responsive.md`\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n  `};\n`;\n\nexport default class ArticlePreview extends React.Component {\n  render() {\n    let { children, article, className } = this.props;\n    let readTime = calculateReadingTime(article.primaryContent);\n    return (\n      <ArticlePreviewContainer className={`container ${className}`}>\n        <div className=\"row\">\n          <ArticlePreviewTitleColumn>{children}</ArticlePreviewTitleColumn>\n        </div>\n\n        <div className=\"row\">\n          <div className=\"col-12 col-lg-10 offset-lg-1 article-link-container\">\n            <ArticleLink to={article} ariaLabel={article.title}>\n              <ArticlePreviewImage\n                backgroundColor={article.heroBackgroundColor}\n              >\n                <img\n                  src={article.heroImage.fixed.src}\n                  color={article.heroBackgroundColor}\n                  alt={article.title}\n                  style={{\n                    userSelect: \"none\",\n                    objectFit: \"cover\",\n                    objectPosition: \"center\",\n                    height: \"100%\",\n                    width: \"100%\",\n                    userDrag: \"none\",\n                    pointerEvents: \"none\",\n                    touchCallout: \"none\",\n                  }}\n                />\n              </ArticlePreviewImage>\n              <ArticlePreviewContent>\n                <ArticleReadtime>\n                  <Text\n                    id=\"hub.hero.reading-time\"\n                    defaultMessage=\"{readTime} min read\"\n                    values={{ readTime }}\n                  />\n                  <ArticleArrow />\n                </ArticleReadtime>\n                <ArticleTitle>{article.title}</ArticleTitle>\n                <ArticleSummary>{article.previewText}</ArticleSummary>\n              </ArticlePreviewContent>\n            </ArticleLink>\n          </div>\n        </div>\n      </ArticlePreviewContainer>\n    );\n  }\n}\n","import React, { Component } from \"react\";\n\nimport GeneralTags from \"./GeneralTags\";\n\nclass PageSEO extends Component {\n  render() {\n    const { pagePath, title, description, image } = this.props;\n\n    return (\n      <div>\n        <GeneralTags\n          pagePath={pagePath}\n          title={title}\n          description={description}\n          image={image}\n        />\n      </div>\n    );\n  }\n}\n\nexport default PageSEO;\n","import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { graphql, StaticQuery } from \"gatsby\";\n\n// Services\nimport intl from \"../../services/intl\";\n\n// Utils\nimport { Font, Color, media, rem, responsive } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\nimport { getDiscountData } from \"../../utils/bundle\";\nimport { orderArray } from \"../../utils/order\";\n\n// Components\nimport Container from \"../Container\";\nimport Img from \"gatsby-image\";\nimport Ribbon from \"../global/Ribbon\";\nimport ScrollableOverflow from \"../ScrollableOverflow\";\nimport MagicLink from \"../MagicLink\";\n\nconst Wrapper = styled.section``;\n\nconst CategoryCardsContainer = styled(Container)`\n  padding: 0 20px;\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: ${p => (p.scrollable ? \"nowrap\" : \"wrap\")};\n\n  ${responsive.sm`\n    padding: 0px;\n  `}\n`;\n\nconst Slide = styled(MagicLink)`\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  width: calc(100vw * (84/320));\n  margin-right: calc(100vw * (8/320));\n  background-color: rgba(242, 241, 245, 0.56);\n\n  :last-of-type {\n    margin-right: 0;\n  }\n\n  p {\n    ${Font.circular};\n    color: ${Color.ritualBlue};\n    font-size: ${rem(14)};\n    line-height: ${rem(20)};\n    font-weight: 300;\n    letter-spacing: 0px;\n    text-align: center;\n    margin: 0;\n    padding: 6px 0;\n  }\n\n  ${responsive.sm`\n    width: 160px;\n    margin-right: 20px;\n\n    p:before {\n      content: \"Shop \";\n    }\n\n    img {\n      transition: transform 0.2s ease-in !important;\n    }\n\n    &:hover {\n      img {\n        transform: scale(1.1);\n      }\n    }\n  `}\n\n  ${responsive.md`\n    width: 214px;\n    margin-right: 26px;\n\n    p {\n      font-size: ${rem(18)};\n      line-height: ${rem(24)};\n      padding: 12px 0;\n    }\n  `}\n\n  ${responsive.lg`\n    width: 270px;\n    margin-right: 30px;\n  `}\n`;\n\nconst GridSlide = styled(Slide)`\n  ${media.mobile`\n    width: calc(50% - 7px);\n    margin-right: 14px;\n    margin-bottom: 16px;\n\n    &:nth-of-type(2n) {\n      margin-right: 0;\n    }\n\n    &:nth-last-of-type(2):nth-of-type(odd),\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  `}\n`;\n\nconst ImageContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  img {\n    background-color: ${Color.ritualYellow};\n    height: 52px;\n  }\n\n  span {\n    position: absolute;\n    bottom: 4px;\n    left: 4px;\n  }\n\n\n  ${responsive.sm`\n    height: 82px;\n\n    span {\n      bottom: 8px;\n      left: 8px;\n    }\n  `}\n\n  ${responsive.md`\n    height: 110px;\n\n    span {\n      bottom: 12px;\n      left: 12px;\n    }\n  `}\n\n  ${responsive.lg`\n    height: 140px;\n  `}\n`;\n\nconst RibbonStyle = css`\n  height: 20px;\n  padding: 0px 8px;\n  font-size: ${rem(8)};\n  line-height: ${rem(16)};\n  letter-spacing: 0.53px;\n\n  &::before,\n  &::after {\n    border-width: 10px 4px;\n  }\n\n  ${responsive.md`\n    height: 30px;\n    padding: 0 14px;\n    font-size: ${rem(10)};\n    letter-spacing: 0.67px;\n\n    &::before,\n    &::after {\n      border-width: 15px 8px;\n    }\n  `}\n`;\n\nconst OrderedCardShortNames = [\n  \"44TmdusDzEH95uGu0URjIr\", // Women\n  \"71526baqpQqVsScHBZpIEl\", // Men\n  \"16dqMm2vfVsgy539guPkkE\", // Kids & Teens\n];\n\nexport class ProductCategoryCards extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const categories = intl.cf(props.data.allContentfulProductCategory.nodes);\n    this.orderedCategoryNodes = this._getOrderedCategories(categories);\n  }\n\n  handleClick(name) {\n    metrics.track(\"CTA Clicked\", {\n      title: name,\n      location: \"Product Category Card\",\n      nonInteraction: false,\n    });\n  }\n\n  _getOrderedCategories(allCategoryNodes) {\n    return orderArray(allCategoryNodes, OrderedCardShortNames, \"contentful_id\");\n  }\n\n  renderSlides(slides, scrollable) {\n    const SlideComponent = scrollable ? Slide : GridSlide;\n\n    return (\n      <>\n        {slides.map((slide, i) => {\n          return (\n            <SlideComponent\n              to={slide.url}\n              onClick={this.handleClick.bind(this, slide.title)}\n              key={i}\n            >\n              <ImageContainer>\n                <Img\n                  fluid={slide.img.fluid}\n                  loading=\"eager\"\n                  backgroundColor={Color.ritualYellow}\n                  alt={slide.altText}\n                  style={{\n                    userSelect: \"none\",\n                    userDrag: \"none\",\n                    pointerEvents: \"none\",\n                    touchCallout: \"none\",\n                  }}\n                  imgStyle={{\n                    objectPosition: \"top center\",\n                  }}\n                />\n                {slide.flag && (\n                  <Ribbon contentStyle={RibbonStyle} white={true}>\n                    {slide.flag}\n                  </Ribbon>\n                )}\n              </ImageContainer>\n              <p>{slide.title}</p>\n            </SlideComponent>\n          );\n        })}\n      </>\n    );\n  }\n\n  render() {\n    const { data, className, scrollable = false } = this.props;\n\n    const bundleImage = intl.cf(data.bundleImages.nodes, true);\n    const discountData = getDiscountData();\n\n    const slides = this.orderedCategoryNodes.map(node => {\n      const flag = node.shortName === \"Kids\" ? \"New\" : \"\";\n      return {\n        title: node.shortName,\n        url: `/${node.shopLandingReference.slug}`,\n        altText: `Shop ${node.shortName}`,\n        img: node.cardImage,\n        flag,\n      };\n    });\n\n    slides.push({\n      title: intl.t(\"product.category-cards.slide-bundles\", \"Bundles\"),\n      url: \"/shop-bundles\",\n      altText: \"Shop Bundles\",\n      img: bundleImage,\n      flag: discountData.titleCopy,\n    });\n\n    return (\n      <Wrapper className={className}>\n        <CategoryCardsContainer scrollable={scrollable}>\n          {scrollable && (\n            <ScrollableOverflow bleedLeft={true} bleedRight={true}>\n              {this.renderSlides(slides, scrollable)}\n            </ScrollableOverflow>\n          )}\n          {!scrollable && <>{this.renderSlides(slides, scrollable)}</>}\n        </CategoryCardsContainer>\n      </Wrapper>\n    );\n  }\n}\n\nexport const ProductCategoryCardsQuery = props => (\n  <StaticQuery\n    query={componentQuery}\n    render={data => <ProductCategoryCards {...props} data={data} />}\n  />\n);\n\nexport default ProductCategoryCardsQuery;\n\nconst componentQuery = graphql`\n  query ProductCategoryCardsQuery {\n    bundleImages: allContentfulAsset(\n      filter: { contentful_id: { eq: \"2RQ7pdzdW9JmLk0z0shhzM\" } }\n    ) {\n      nodes {\n        node_locale\n        title\n        description\n        fluid(maxWidth: 580, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n      }\n    }\n    allContentfulProductCategory {\n      nodes {\n        node_locale\n        shortName\n        contentful_id\n        cardImage {\n          title\n          description\n          fluid(maxWidth: 580, quality: 90) {\n            ...GatsbyContentfulFluid_withWebp_noBase64\n          }\n        }\n        backgroundColor\n        shopLandingReference {\n          slug\n          header {\n            childMarkdownRemark {\n              rawMarkdownBody\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nimport { Color, rem, rgba, responsive } from \"../../utils/style\";\n\n// Components\nimport MagicModal from \"../MagicModal\";\nimport Text from \"../Text\";\n\nconst Title = styled.h3`\n  margin: 0;\n  font-weight: 500;\n\n  padding: 0 0 32px;\n  letter-spacing: -0.2px;\n  font-size: ${rem(22)};\n  line-height: ${rem(32)};\n\n  ${responsive.sm`\n    padding: 0 0 40px;\n    letter-spacing: -0.4px;\n    font-size: ${rem(30)};\n    line-height: ${rem(36)};\n  `}\n\n  border-bottom: 2px solid ${Color.ritualBlue};\n`;\n\nconst IngredientContainer = styled.div`\n  padding: 32px 0;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.16);\n`;\n\nconst Name = styled.h4`\n  margin: 0 0 8px;\n  font-weight: 500;\n  font-size: ${rem(18)};\n  line=height: ${rem(28)};\n`;\n\nconst Category = styled.p`\n  margin: 24px 0 8px;\n  color: ${rgba(Color.ritualBlue, 0.56)};\n  font-weight: 300;\n  font-size: ${rem(16)};\n  line-height: ${rem(22)};\n`;\n\nconst Content = styled.p`\n  margin: 0;\n  font-weight: 300;\n  font-size: ${rem(16)};\n  line-height: ${rem(22)};\n`;\n\nexport default class OtherIngredientsModal extends React.Component {\n  render() {\n    const { isOpen, onRequestClose, title, ingredients } = this.props;\n\n    return (\n      <MagicModal\n        isOpen={isOpen}\n        onRequestClose={onRequestClose}\n        slideOut={true}\n      >\n        <Title>{title}</Title>\n        {ingredients.map((ingredient, i) => {\n          return (\n            <IngredientContainer key={i}>\n              <Name>{ingredient.name}</Name>\n              <Content>{ingredient.location}</Content>\n              <Category>\n                <Text\n                  id=\"ingredients.info.supplier\"\n                  defaultMessage=\"Supplier\"\n                />\n              </Category>\n              <Content>{ingredient.supplier}</Content>\n              <Category>\n                <Text\n                  id=\"ingredients.info.function\"\n                  defaultMessage=\"Function\"\n                />\n              </Category>\n              <Content>{ingredient.function}</Content>\n            </IngredientContainer>\n          );\n        })}\n      </MagicModal>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { rem, Color, media, Font } from \"../../utils/style\";\nimport MagicLink from \"../MagicLink\";\nimport Text from \"../Text\";\nimport intl from \"../../services/intl\";\n\nconst Wrapper = styled.div.attrs({\n  className: \"row\",\n})`\n  text-align: center;\n  padding-top: ${rem(160)};\n\n  ${media.mobile`\n    padding-top: ${rem(88)};\n  `};\n`;\n\nconst IngredientHeader = styled.h2.attrs({\n  className: \"text-center\",\n})`\n  text-align: center;\n  color: #002d6b;\n  font-size: ${rem(66)};\n  font-weight: 500;\n  line-height: ${rem(76)};\n  letter-spacing: ${rem(-2)};\n\n  ${media.tablet`\n    font-size: ${rem(34)};\n    line-height: ${rem(40)};\n    letter-spacing: ${rem(-0.5)};\n  `} ${media.mobile`\n    font-size: ${rem(30)};\n    line-height: ${rem(36)};\n    letter-spacing: ${rem(-0.4)};\n  `}\n\n  em {\n    ${Font.dutch};\n    font-weight: 300;\n  }\n`;\n\nconst IngredientText = styled.p`\n  ${Font.dutch} text-align: center;\n  margin-top: ${rem(24)};\n  margin-bottom: ${rem(56)};\n  font-size: ${rem(18)};\n\n  ${media.mobile`\n    font-size: ${rem(16)};\n    margin-top: ${rem(16)};\n    margin-bottom: ${rem(24)};\n  `};\n`;\n\nconst Tabs = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  text-align: center;\n  padding-bottom: 10px;\n`;\n\nconst TabContainer = styled.div`\n  display: flex;\n  flex: 1;\n  margin: 0 ${rem(24)};\n  text-align: center;\n\n  ${media.mobile`\n    margin: 0 ${rem(20)};\n  `} ${({ active }) =>\n    active &&\n    `\n  & a {\n    border-bottom: 2px solid ${Color.ritualBlue};\n    span {\n      opacity: 1.0;\n    }\n  }\n  `};\n`;\n\nconst Tab = styled.span`\n  display: block;\n  color: ${Color.ritualBlue};\n  font-size: ${rem(18)};\n  ${Font.circular} font-weight: 500;\n  text-align: center;\n  letter-spacing: 0;\n  line-height: ${rem(28)};\n  cursor: pointer;\n  opacity: 0.5;\n  margin-bottom: 2px;\n\n  ${media.mobile`\n    font-size: ${rem(16)};\n  `};\n`;\n\n/* eslint-disable */\nexport default class IngredientsHeader extends React.Component {\n  render(data) {\n    const { locationPath, location, subheadText, productSku } = this.props;\n\n    const headerText = intl.t(\n      \"ingredients.header.header\",\n      \"Traceable Ingredients\",\n    );\n\n    const mapView = location.pathname.includes(\"map\");\n\n    return (\n      <Wrapper>\n        <div className=\"col-12 col-sm-8 offset-sm-2\">\n          <IngredientHeader\n            dangerouslySetInnerHTML={{\n              __html: headerText,\n            }}\n          />\n          <IngredientText>{subheadText}</IngredientText>\n          <Tabs>\n            <TabContainer\n              active={!mapView}\n              style={{ justifyContent: \"flex-end\" }}\n            >\n              <MagicLink\n                to=\"/ingredients\"\n                state={productSku ? { productSku } : {}}\n              >\n                <Tab>\n                  <Text\n                    id=\"ingredients.header.list-view\"\n                    defaultMessage=\"List View\"\n                  />\n                </Tab>\n              </MagicLink>\n            </TabContainer>\n            <TabContainer\n              active={mapView}\n              style={{ justifyContent: \"flex-start\" }}\n            >\n              <MagicLink\n                to={`/ingredients/map/${locationPath}`}\n                state={productSku ? { productSku } : {}}\n              >\n                <Tab>\n                  <Text\n                    id=\"ingredients.header.map-view\"\n                    defaultMessage=\"Map View\"\n                  />\n                </Tab>\n              </MagicLink>\n            </TabContainer>\n          </Tabs>\n        </div>\n      </Wrapper>\n    );\n  }\n}\n"],"sourceRoot":""}