/* Typography (heading) */
@font-face {
    font-family: Helvetica;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../font/helvetica_n7a.woff2") format("woff2"),
      url( "../font/helvetica_n7b.woff") format("woff");
  }

  @font-face {
    font-family: Helvetica;
    font-weight: 700;
    font-style: oblique;
    font-display: swap;
    src: url( "../font/helvetica_o7a.woff2") format("woff2"),
      url( "../font/helvetica_o7b.woff") format("woff");
  }

  /* Typography (body) */
  @font-face {
    font-family: Helvetica;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url( "../font/helvetica_n4a.woff2") format("woff2"),
      url( "../font/helvetica_n4b.woff") format("woff");
  }

  @font-face {
    font-family: Helvetica;
    font-weight: 400;
    font-style: oblique;
    font-display: swap;
    src: url( "../font/helvetica_o4a.woff2") format("woff2"),
      url( "../font/helvetica_o4b.woff") format("woff");
  }

  @font-face {
    font-family: Helvetica;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url( "../font/helvetica_n7a.woff2") format("woff2"),
      url( "../font/helvetica_n7b.woff") format("woff");
  }

  @font-face {
    font-family: Helvetica;
    font-weight: 700;
    font-style: oblique;
    font-display: swap;
    src: url( "../font/helvetica_o7a.woff2") format("woff2"),
      url( "../font/helvetica_o7b.woff") format("woff");
  }

  :root {
    --heading-color: 40, 40, 40;
    --text-color: 40, 40, 40;
    --background: 255, 255, 255;
    --secondary-background: 245, 245, 245;
    --border-color: 223, 223, 223;
    --border-color-darker: 169, 169, 169;
    --success-color: 46, 158, 123;
    --success-background: 213, 236, 229;
    --error-color: 222, 42, 42;
    --error-background: 253, 240, 240;
    --primary-button-background: 255, 255, 255;
    --primary-button-text-color: 18, 20, 29;
    --secondary-button-background: 243, 255, 52;
    --secondary-button-text-color: 40, 40, 40;
    --product-star-rating: 246, 164, 41;
    --product-on-sale-accent: 222, 42, 42;
    --product-sold-out-accent: 111, 113, 155;
    --product-custom-label-background: 64, 93, 230;
    --product-custom-label-text-color: 255, 255, 255;
    --product-custom-label-2-background: 243, 255, 52;
    --product-custom-label-2-text-color: 0, 0, 0;
    --product-low-stock-text-color: 222, 42, 42;
    --product-in-stock-text-color: 46, 158, 123;
    --loading-bar-background: 40, 40, 40;

    /* We duplicate some "base" colors as root colors, which is useful to use on drawer elements or popover without. Those should not be overridden to avoid issues */
    --root-heading-color: 40, 40, 40;
    --root-text-color: 40, 40, 40;
    --root-background: 255, 255, 255;
    --root-border-color: 223, 223, 223;
    --root-primary-button-background: 255, 255, 255;
    --root-primary-button-text-color: 18, 20, 29;

    --base-font-size: 15px;
    --heading-font-family: Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;
    --heading-font-weight: 700;
    --heading-font-style: normal;
    --heading-text-transform: uppercase;
    --text-font-family: Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;
    --text-font-weight: 400;
    --text-font-style: normal;
    --text-font-bold-weight: 700;

    /* Typography (font size) */
    --heading-xxsmall-font-size: 11px;
    --heading-xsmall-font-size: 11px;
    --heading-small-font-size: 13px;
    --heading-large-font-size: 40px;
    --heading-h1-font-size: 40px;
    --heading-h2-font-size: 32px;
    --heading-h3-font-size: 28px;
    --heading-h4-font-size: 26px;
    --heading-h5-font-size: 22px;
    --heading-h6-font-size: 18px;

    /* Control the look and feel of the theme by changing radius of various elements */
    --button-border-radius: 26px;
    --block-border-radius: 0px;
    --block-border-radius-reduced: 0px;
    --color-swatch-border-radius: 0px;

    /* Button size */
    --button-height: 48px;
    --button-small-height: 40px;

    /* Form related */
    --form-input-field-height: 48px;
    --form-input-gap: 16px;
    --form-submit-margin: 24px;

    /* Product listing related variables */
    --product-list-block-spacing: 32px;

    /* Video related */
    --play-button-background: 255, 255, 255;
    --play-button-arrow: 40, 40, 40;

    /* RTL support */
    --transform-logical-flip: 1;
    --transform-origin-start: left;
    --transform-origin-end: right;

    /* Other */
    --zoom-cursor-svg-url: url(static/image/zoom-cursor.svg);
    --arrow-right-svg-url: url(static/image/arrow-right.svg);
    --arrow-left-svg-url: url(static/image/arrow-left.svg);

    /* Some useful variables that we can reuse in our CSS. Some explanation are needed for some of them:
     - container-max-width-minus-gutters: represents the container max width without the edge gutters
     - container-outer-width: considering the screen width, represent all the space outside the container
     - container-outer-margin: same as container-outer-width but get set to 0 inside a container
     - container-inner-width: the effective space inside the container (minus gutters)
     - grid-column-width: represents the width of a single column of the grid
     - vertical-breather: this is a variable that defines the global "spacing" between sections, and inside the section
                          to create some "breath" and minimum spacing
   */
    --container-max-width: 1600px;
    --container-gutter: 24px;
    --container-max-width-minus-gutters: calc(var(--container-max-width) - (var(--container-gutter)) * 2);
    --container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-gutter));
    --container-outer-margin: var(--container-outer-width);
    --container-inner-width: calc(100vw - var(--container-outer-width) * 2);

    --grid-column-count: 10;
    --grid-gap: 24px;
    --grid-column-width: calc((100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) / var(--grid-column-count));

    --vertical-breather: 48px;
    --vertical-breather-tight: 48px;

    /* Shopify related variables */
    --payment-terms-background-color: #ffffff;
  }

  @media screen and (min-width: 741px) {
    :root {
      --container-gutter: 40px;
      --grid-column-count: 20;
      --vertical-breather: 64px;
      --vertical-breather-tight: 64px;

      /* Typography (font size) */
      --heading-xsmall-font-size: 13px;
      --heading-small-font-size: 14px;
      --heading-large-font-size: 58px;
      --heading-h1-font-size: 58px;
      --heading-h2-font-size: 44px;
      --heading-h3-font-size: 36px;
      --heading-h4-font-size: 28px;
      --heading-h5-font-size: 22px;
      --heading-h6-font-size: 20px;

      /* Form related */
      --form-input-field-height: 52px;
      --form-submit-margin: 32px;

      /* Button size */
      --button-height: 52px;
      --button-small-height: 44px;
    }
  }

  @media screen and (min-width: 1200px) {
    :root {
      --vertical-breather: 80px;
      --vertical-breather-tight: 64px;
      --product-list-block-spacing: 48px;

      /* Typography */
      --heading-large-font-size: 72px;
      --heading-h1-font-size: 62px;
      --heading-h2-font-size: 54px;
      --heading-h3-font-size: 40px;
      --heading-h4-font-size: 34px;
      --heading-h5-font-size: 26px;
      --heading-h6-font-size: 18px;
    }
  }

  @media screen and (min-width: 1600px) {
    :root {
      --vertical-breather: 90px;
      --vertical-breather-tight: 64px;
    }
  }

  body {
    transition: padding-top .2s;
  }

  .scaaf-message-bar {
    --primary-text-color: ;
    --secondary-text-color: ;
    --primary-bg-color: ;
    --secondary-bg-color: ;
    --primary-text-size: px;
    --secondary-text-size: px;
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px;
    animation-duration: .5s;
    animation-name: fadeIn;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }

  .scaaf-message-bar-content {
    margin: 0;
    padding: 0;
  }

  .scaaf-message-bar[data-layout=referring] {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    font-size: var(--primary-text-size);
  }

  .scaaf-message-bar[data-layout=direct] {
    background-color: var(--secondary-bg-color);
    color: var(--secondary-text-color);
    font-size: var(--secondary-text-size);
  }

  :root {
    --enable-sticky-announcement-bar: 0;
  }

  #shopify-section-sections--19533635256557__announcement-bar {
    --heading-color: 86, 17, 42;
    --text-color: 86, 17, 42;
    --primary-button-background: 40, 40, 40;
    --primary-button-text-color: 255, 255, 255;
    --section-background: 235, 199, 137;
    position: relative;
  }

  @media screen and (min-width: 741px) {
    :root {
      --enable-sticky-announcement-bar: 0;
    }

    #shopify-section-sections--19533635256557__announcement-bar {
      position: relative;
      z-index: unset;
    }
  }

  :root {
    --enable-sticky-header: 1;
    --enable-transparent-header: 0;
    --loading-bar-background: 40, 40, 40;
    /* Prevent the loading bar to be invisible */
  }

  #shopify-section-sections--19533635256557__header {
    --header-background: 255, 255, 255;
    --header-text-color: 40, 40, 40;
    --header-border-color: 223, 223, 223;
    --reduce-header-padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 4;
  }

  .shopify-section--announcement-bar~#shopify-section-sections--19533635256557__header {
    top: calc(var(--enable-sticky-announcement-bar, 0) * var(--announcement-bar-height, 0px));
  }

  #shopify-section-sections--19533635256557__header .header__logo-image {
    max-width: 100px;
  }

  @media screen and (min-width: 741px) {
    #shopify-section-sections--19533635256557__header .header__logo-image {
      max-width: 100px;
    }
  }

  @media screen and (min-width: 1200px) {

    /* For this navigation we have to move the logo and make sure the navigation takes the whole width */
    .header__logo {
      order: -1;
      flex: 1 1 0;
    }

    .header__inline-navigation {
      flex: 1 1 auto;
      justify-content: center;
      max-width: max-content;
      margin-inline: 48px;
    }
  }

  #shopify-section-template--19533640237293__banner_PLbGPt {
    --heading-color: 18, 20, 29;
    --text-color: 18, 20, 29;
    --primary-button-background: 255, 255, 255;
    --primary-button-text-color: 0, 0, 0;

    --section-items-alignment: center;
    --section-overlay-color: 249, 249, 249;
    --section-overlay-opacity: 1.0;
  }

  #shopify-section-template--19533640237293__color_text_PrQHHq {
    --heading-color: 40, 40, 40;
    --text-color: 40, 40, 40;
    --primary-button-background: 255, 255, 255;
    --primary-button-text-color: 18, 20, 29;

    --section-background: 255, 255, 255;
  }

  #shopify-section-template--19533640237293__wallets_image_text_BL4KpT {
    --heading-color: 40, 40, 40;
    --text-color: 40, 40, 40;
    --primary-button-background: 255, 255, 255;
    --primary-button-text-color: 18, 20, 29;

    --section-accent-background: 0 0 0 / 0.0;
    --section-autoplay-duration: 8s;
    --section-animation-play-state: paused;
  }

  /* We have to remove some extra spacing adding in non-overlap mode */
  @media screen and (max-width: 999px) {
    #shopify-section-template--19533640237293__wallets_image_text_BL4KpT .section {
      margin-top: 0;
    }

    #shopify-section-template--19533640237293__wallets_image_text_BL4KpT .image-with-text {
      margin-bottom: calc(-1 * var(--vertical-breather)) !important;
    }
  }

  #shopify-section-sections--19533635027181__footer .footer {
    --background: 42, 53, 53;
    --heading-color: 255, 255, 255;
    --text-color: 255, 255, 255;
    --border-color: 74, 83, 83;
  }