/* Typography (heading) */


/* Typography (body) */
@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/dm_sans/dmsans_n4.ec80bd4dd7e1a334c969c265873491ae56018d72.woff2") format("woff2"),
       url("/assets/fonts/dm_sans/dmsans_n4.87bdd914d8a61247b911147ae68e754d695c58a6.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/assets/fonts/dm_sans/dmsans_i4.b8fe05e69ee95d5a53155c346957d8cbf5081c1a.woff2") format("woff2"),
       url("/assets/fonts/dm_sans/dmsans_i4.403fe28ee2ea63e142575c0aa47684d65f8c23a0.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/dm_sans/dmsans_n6.70a2453ea926d613c6a2f89af05180d14b3a7c96.woff2") format("woff2"),
       url("/assets/fonts/dm_sans/dmsans_n6.355605667bef215872257574b57fc097044f7e20.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("/assets/fonts/dm_sans/dmsans_i6.b7d5b35c5f29523529e1bf4a3d0de71a44a277b6.woff2") format("woff2"),
       url("/assets/fonts/dm_sans/dmsans_i6.9b760cc5bdd17b4de2c70249ba49bd707f27a31b.woff") format("woff");
}

:root {--heading-color: 158, 47, 33;
    --text-color: 26, 26, 26;
    --background: 253, 250, 243;
    --secondary-background: 255, 234, 223;
    --border-color: 219, 216, 210;
    --border-color-darker: 162, 160, 156;
    --success-color: 46, 158, 123;
    --success-background: 212, 232, 219;
    --error-color: 222, 42, 42;
    --error-background: 251, 235, 229;
    --primary-button-background: 158, 47, 33;
    --primary-button-text-color: 255, 234, 223;
    --secondary-button-background: 255, 255, 255;
    --secondary-button-text-color: 158, 47, 33;
    --product-star-rating: 246, 164, 41;
    --product-on-sale-accent: 26, 26, 26;
    --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, 229, 182;
    --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: 26, 26, 26;

    --root-heading-color: 158, 47, 33;
    --root-text-color: 26, 26, 26;
    --root-background: 253, 250, 243;
    --root-border-color: 219, 216, 210;
    --root-primary-button-background: 158, 47, 33;
    --root-primary-button-text-color: 255, 234, 223;

    --base-font-size: 14px;
    --heading-font-family: "system_ui", -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --heading-font-family-dsio: "system_ui", -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --heading-font-weight: 400;
    --heading-font-style: normal;
    --heading-text-transform: normal;
    --text-font-family: 'glacial_indifferenceregular', "DM Sans", sans-serif;
    --text-font-weight: 400;
    --text-font-style: normal;
    --text-font-bold-weight: 600;

    --heading-xxsmall-font-size: 10px;
    --heading-xsmall-font-size: 10px;
    --heading-small-font-size: 11px;
    --heading-large-font-size: 32px;
    --heading-h1-font-size: 32px;
    --heading-h2-font-size: 28px;
    --heading-h3-font-size: 22px;
    --heading-h4-font-size: 22px;
    --heading-h5-font-size: 18px;
    --heading-h6-font-size: 16px;

    --button-border-radius: 4px;
    --block-border-radius: 16px;
    --block-border-radius-reduced: 10px;
    --color-swatch-border-radius: 0px;

    --button-height: 45px;
    --button-small-height: 45px;

    --form-input-field-height: 48px;
    --form-input-gap: 16px;
    --form-submit-margin: 24px;

    --product-list-block-spacing: 32px;

    --play-button-background: 253, 250, 243;
    --play-button-arrow: 26, 26, 26;

    --transform-logical-flip: 1;
    --transform-origin-start: left;
    --transform-origin-end: right;

    --container-max-width: 1600px;
    --container-gutter: 15px;
    --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: 14px;
    --vertical-breather-tight: 14px;

    --payment-terms-background-color: #FDFAF3;
}

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

      --heading-xsmall-font-size: 11px;
      --heading-small-font-size: 12px;
      --heading-large-font-size: 48px;
      --heading-h1-font-size: 48px;
      --heading-h2-font-size: 36px;
      --heading-h3-font-size: 30px;
      --heading-h4-font-size: 22px;
      --heading-h5-font-size: 18px;
      --heading-h6-font-size: 16px;

      --form-input-field-height: 52px;
      --form-submit-margin: 32px;

      --button-height: 45px;
      --button-small-height: 45px;
    }
}

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

      --heading-large-font-size: 58px;
      --heading-h1-font-size: 40px;
      --heading-h2-font-size: 36px;
      --heading-h3-font-size: 34px;
      --heading-h4-font-size: 32px;
      --heading-h5-font-size: 22px;
      --heading-h6-font-size: 16px;
    }
}

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