:root {
  /**
    * ---------------------------------------------------------------------
    * SPACING VARIABLES
    *
    * We are using a spacing inspired from frameworks like Tailwind CSS.
    * ---------------------------------------------------------------------
    */
  --spacing-0-5: 0.125rem; /* 2px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-1-5: 0.375rem; /* 6px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-2-5: 0.625rem; /* 10px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-3-5: 0.875rem; /* 14px */
  --spacing-4: 1rem; /* 16px */
  --spacing-4-5: 1.125rem; /* 18px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-5-5: 1.375rem; /* 22px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-6-5: 1.625rem; /* 26px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-7-5: 1.875rem; /* 30px */
  --spacing-8: 2rem; /* 32px */
  --spacing-8-5: 2.125rem; /* 34px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-9-5: 2.375rem; /* 38px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-16: 4rem; /* 64px */
  --spacing-18: 4.5rem; /* 72px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */
  --spacing-28: 7rem; /* 112px */
  --spacing-32: 8rem; /* 128px */
  --spacing-36: 9rem; /* 144px */
  --spacing-40: 10rem; /* 160px */
  --spacing-44: 11rem; /* 176px */
  --spacing-48: 12rem; /* 192px */
  --spacing-52: 13rem; /* 208px */
  --spacing-56: 14rem; /* 224px */
  --spacing-60: 15rem; /* 240px */
  --spacing-64: 16rem; /* 256px */
  --spacing-72: 18rem; /* 288px */
  --spacing-80: 20rem; /* 320px */
  --spacing-96: 24rem; /* 384px */

  /* Container */
  /* --container-max-width: 1400px; */
  /* --container-narrow-max-width: 1150px; */
  --container-max-width: 1600px;
  --container-narrow-max-width: 1350px;
  --container-gutter: var(--spacing-5);
  --section-outer-spacing-block: var(--spacing-12);
  --section-inner-max-spacing-block: var(--spacing-10);
  --section-inner-spacing-inline: var(--container-gutter);
  --section-stack-spacing-block: var(--spacing-8);

  /* Grid gutter */
  --grid-gutter: var(--spacing-5);

  /* Product list settings */
  --product-list-row-gap: var(--spacing-8);
  --product-list-column-gap: var(--grid-gutter);

  /* Form settings */
  --input-gap: var(--spacing-2);
  --input-height: 2.625rem;
  --input-padding-inline: var(--spacing-4);

  /* Other sizes */
  --sticky-area-height: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px) + var(--sticky-header-enabled, 0) * var(--header-height, 0px));

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

  /**
    * ---------------------------------------------------------------------
    * TYPOGRAPHY
    * ---------------------------------------------------------------------
    */

  /* Font properties */
  /* --heading-font-family: "IBM Plex Sans", sans-serif; */
  --heading-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --heading-font-weight: 400;
  --heading-font-style: normal;
  --heading-text-transform: normal;
  /* --heading-letter-spacing: -0.05em;
  --text-font-family: "IBM Plex Sans", sans-serif; */
  --heading-letter-spacing: -0.025em;
  --text-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --text-font-weight: 400;
  --text-font-style: normal;
  --text-letter-spacing: 0.025em;

  /* Font sizes */
  --text-h0: 2.5rem;
  --text-h1: 1.75rem;
  --text-h2: 1.5rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.3125rem;

  /**
    * ---------------------------------------------------------------------
    * COLORS
    * ---------------------------------------------------------------------
    */

  /* Color settings */
  /* --accent: 93 115 101; */
  --accent: 60 58 56;
  --text-primary: 60 58 56;
  --background-primary: 255 255 255;
  --dialog-background: 255 255 255;
  --border-color: var(--text-color, var(--text-primary)) / 0.12;

  /* Button colors */
  /* --button-background-primary: 93 115 101;
  --button-background-primary: 60 58 56;
  --button-text-primary: 255 255 255;
  --button-background-secondary: 39 39 39;
  --button-text-secondary: 255 255 255; */
  --button-background-primary: 60 58 56;
  --button-text-primary: 255 255 255;
  --button-background-secondary: 255 255 255;
  --button-text-secondary: 60 58 56;

  /* Status colors */
  /* --success-background: 238 241 235;
  --success-text: 112 138 92; */
  --success-background: 236 238 237;
  --success-text: 93 115 101;
  --warning-background: 246 237 230;
  --warning-text: 181 101 47;
  --error-background: 245 229 229;
  --error-text: 170 40 38;

  /* Product colors */
  /* --on-sale-text: 181 101 47;
  --on-sale-badge-background: 181 101 47; */
  --on-sale-text: 176 106 59;
  --on-sale-badge-background: 176 106 59;
  --on-sale-badge-text: 255 255 255;
  --sold-out-badge-background: 190 189 185;
  --sold-out-badge-text: 0 0 0;
  --primary-badge-background: 60 97 158;
  --primary-badge-text: 255 255 255;
  --star-color: 255 183 74;
  --product-card-background: 242 242 242;
  --product-card-text: 39 39 39;

  /* Header colors */
  --header-background: 60 58 56;
  --header-text: 255 255 255;
  /* --header-background: 255 255 255;
  --header-text: 39 39 39; */

  /* Footer colors */
  --footer-background: 60 58 56;
  --footer-text: 255 255 255;

  /* Rounded variables (used for border radius) */
  /* --rounded-xs: 0.0rem;
  --rounded-sm: 0.0rem;
  --rounded: 0.0rem;
  --rounded-lg: 0.0rem;
  --rounded-full: 9999px;

  --rounded-button: 0.0rem;
  --rounded-input: 0.0rem; */

  /* Rounded variables (used for border radius) */
  --rounded-xs: 0.25rem;
  --rounded-sm: 0.625rem;
  --rounded: 1.25rem;
  --rounded-lg: 2.5rem;
  --rounded-full: 9999px;

  --rounded-button: 0.625rem;
  --rounded-input: 0.0rem;

  /* Box shadow */
  --shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.0);
  --shadow: 0 5px 15px rgb(var(--text-primary) / 0.0);
  --shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.0);
  --shadow-block: 0px 0px 50px rgb(var(--text-primary) / 0.0);

  /**
    * ---------------------------------------------------------------------
    * OTHER
    * ---------------------------------------------------------------------
    */

  --stagger-products-reveal-opacity: 0;
  --cursor-close-svg-url: url(/assets/images/cursor-close.svg);
  --cursor-zoom-in-svg-url: url(/assets/images/cursor-zoom-in.svg);
  --cursor-zoom-out-svg-url: url(/assets/images/cursor-zoom-out.svg);
  --checkmark-svg-url: url(/assets/images/checkmark.svg);

  /* --stagger-products-reveal-opacity: 0;
  --cursor-close-svg-url: url(//tenderflame.com/cdn/shop/t/29/assets/cursor-close.svg?v=147174565022153725511747142240);
  --cursor-zoom-in-svg-url: url(//tenderflame.com/cdn/shop/t/29/assets/cursor-zoom-in.svg?v=154953035094101115921747142240);
  --cursor-zoom-out-svg-url: url(//tenderflame.com/cdn/shop/t/29/assets/cursor-zoom-out.svg?v=16155520337305705181747142240); */
  /* --checkmark-svg-url: url(//tenderflame.com/cdn/shop/t/29/assets/checkmark.svg?v=77552481021870063511747142240); */

}

[dir="rtl"]:root {
  /* RTL support */
  --transform-logical-flip: -1;
  --transform-origin-start: right;
  --transform-origin-end: left;
}

@media screen and (min-width: 700px) {
  :root {
    /* Typography (font size) */
    --text-h0: 3.25rem;
    --text-h1: 2.25rem;
    --text-h2: 1.75rem;
    --text-h3: 1.625rem;
    --text-h4: 1.25rem;
    --text-h5: 1.25rem;
    --text-h6: 1.125rem;

    /* --text-xs: 0.875rem;
    --text-sm: 1.0rem;
    --text-base: 1.125rem;
    --text-lg: 1.375rem; */
    
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.3125rem;

    /* Spacing */
    --container-gutter: 2rem;
    --section-outer-spacing-block: var(--spacing-16);
    --section-inner-max-spacing-block: var(--spacing-12);
    --section-inner-spacing-inline: var(--spacing-14);
    --section-stack-spacing-block: var(--spacing-12);

    /* Grid gutter */
    --grid-gutter: var(--spacing-6);

    /* Product list settings */
    --product-list-row-gap: var(--spacing-12);

    /* Form settings */
    --input-gap: 1rem;
    --input-height: 3.125rem;
    --input-padding-inline: var(--spacing-5);
  }
}

@media screen and (min-width: 1000px) {
  :root {
    /* Spacing settings */
    --container-gutter: var(--spacing-12);
    --section-outer-spacing-block: var(--spacing-18);
    --section-inner-max-spacing-block: var(--spacing-16);
    --section-inner-spacing-inline: var(--spacing-18);
    --section-stack-spacing-block: var(--spacing-12);
  }
}

@media screen and (min-width: 1150px) {
  :root {
    /* Spacing settings */
    --container-gutter: var(--spacing-12);
    --section-outer-spacing-block: var(--spacing-20);
    --section-inner-max-spacing-block: var(--spacing-16);
    --section-inner-spacing-inline: var(--spacing-18);
    --section-stack-spacing-block: var(--spacing-12);
  }
}

@media screen and (min-width: 1400px) {
  :root {
    /* Typography (font size) */
    --text-h0: 4rem;
    --text-h1: 3rem;
    --text-h2: 2.5rem;
    --text-h3: 1.75rem;
    --text-h4: 1.5rem;
    --text-h5: 1.25rem;
    --text-h6: 1.25rem;

    --section-outer-spacing-block: var(--spacing-24);
    --section-inner-max-spacing-block: var(--spacing-18);
    --section-inner-spacing-inline: var(--spacing-20);
  }
}

@media screen and (min-width: 1600px) {
  :root {
    --section-outer-spacing-block: var(--spacing-24);
    --section-inner-max-spacing-block: var(--spacing-20);
    --section-inner-spacing-inline: var(--spacing-24);
  }
}

/**
  * ---------------------------------------------------------------------
  * LIQUID DEPENDANT CSS
  *
  * Our main CSS is Liquid free, but some very specific features depend on
  * theme settings, so we have them here
  * ---------------------------------------------------------------------
  */@media screen and (pointer: fine) {
      /* The !important are for the Shopify Payment button to ensure we override the default from Shopify styles */
      .button:not([disabled]):not(.button--outline):hover, .btn:not([disabled]):hover, .shopify-payment-button__button--unbranded:not([disabled]):hover {
        background-color: transparent !important;
        color: rgb(var(--button-outline-color) / var(--button-background-opacity, 1)) !important;
        box-shadow: inset 0 0 0 2px currentColor !important;
      }

      .button--outline:not([disabled]):hover {
        background: rgb(var(--button-background));
        color: rgb(var(--button-text-color));
        box-shadow: inset 0 0 0 2px rgb(var(--button-background));
      }
    }