@font-face {
          font-family: 'Custom body font';
          src: url('/polar-mirror/fonts/SFPRODISPLAYREGULAR.otf');
          font-weight: 300;
          font-style: normal;
          font-display: swap;
        }
        
        :root {
          --font-body-family: 'Custom body font', sans-serif;
          --font-body-style: normal;
          --font-body-weight: 300;
          --font-body-weight-bold: 600;
        }
      
      
      
        @font-face {
          font-family: 'Custom headings font';
          src: url('/polar-mirror/fonts/SFPRODISPLAYBOLD.otf');
          font-weight: 1000;
          font-style: normal;
          font-display: swap;
        }
        :root {
          --font-heading-family: 'Custom headings font', sans-serif;
          --font-heading-style: normal;
          --font-heading-weight: 1000;
        }
      

      :root {
        --font-body-scale: 1.0;
        --font-heading-scale: 1.3;
        --font-heading-line-height: 0.3;
        --font-heading-letter-spacing: 0.06rem;

        --color-base-text: 18, 18, 18;
        --color-shadow: 18, 18, 18;
        --color-base-background-1: 255, 255, 255;
        --color-base-background-2: 255, 255, 255;
        --color-base-solid-button-labels: 255, 255, 255;
        --color-base-outline-button-labels: 0, 99, 246;
        --color-base-accent-1: 0, 99, 246;
        --color-base-accent-2: 0, 99, 246;
        --payment-terms-background-color: #ffffff;

        --gradient-base-background-1: #ffffff;
        --gradient-base-background-2: #ffffff;
        --gradient-base-accent-1: #0063f6;
        --gradient-base-accent-2: linear-gradient(54deg, rgba(109, 56, 139, 1) 14%, rgba(105, 14, 14, 1) 85%);

        --media-padding: px;
        --media-border-opacity: 0.1;
        --media-border-width: 0px;
        --media-radius: 12px;
        --media-shadow-opacity: 0.0;
        --media-shadow-horizontal-offset: 0px;
        --media-shadow-vertical-offset: 0px;
        --media-shadow-blur-radius: 20px;
        --media-shadow-visible: 0;

        --page-width: 100rem;
        --page-width-margin: 0rem;

        --product-card-image-padding: 0.0rem;
        --product-card-corner-radius: 1.2rem;
        --product-card-text-alignment: center;
        --product-card-border-width: 0.0rem;
        --product-card-border-opacity: 0.1;
        --product-card-shadow-opacity: 0.1;
        --product-card-shadow-visible: 1;
        --product-card-shadow-horizontal-offset: 0.2rem;
        --product-card-shadow-vertical-offset: 0.6rem;
        --product-card-shadow-blur-radius: 1.5rem;

        --collection-card-image-padding: 0.0rem;
        --collection-card-corner-radius: 1.2rem;
        --collection-card-text-alignment: center;
        --collection-card-border-width: 0.0rem;
        --collection-card-border-opacity: 0.1;
        --collection-card-shadow-opacity: 0.05;
        --collection-card-shadow-visible: 1;
        --collection-card-shadow-horizontal-offset: 0.2rem;
        --collection-card-shadow-vertical-offset: 0.6rem;
        --collection-card-shadow-blur-radius: 1.5rem;

        --blog-card-image-padding: 0.0rem;
        --blog-card-corner-radius: 1.2rem;
        --blog-card-text-alignment: center;
        --blog-card-border-width: 0.0rem;
        --blog-card-border-opacity: 0.1;
        --blog-card-shadow-opacity: 0.05;
        --blog-card-shadow-visible: 1;
        --blog-card-shadow-horizontal-offset: 1.0rem;
        --blog-card-shadow-vertical-offset: 1.0rem;
        --blog-card-shadow-blur-radius: 3.5rem;

        --badge-corner-radius: 0.6rem;
        
        --slider-arrow-size: 3.0rem;
        --slider-arrow-border-radius: 50.0%;
        --slider-arrow-icon-size: 0.6em;
        --pagination-dot-width: 6px;
        --pagination-dot-height: 6px;
        --pagination-dot-active-scale: 1.5;
        --pagination-dot-spacing: 12px;
        --pagination-dot-radius: 5px;

        --popup-border-width: 1px;
        --popup-border-opacity: 0.1;
        --popup-corner-radius: 40px;
        --popup-shadow-opacity: 0.1;
        --popup-shadow-horizontal-offset: 10px;
        --popup-shadow-vertical-offset: 12px;
        --popup-shadow-blur-radius: 20px;

        --drawer-border-width: 1px;
        --drawer-border-opacity: 0.1;
        --drawer-shadow-opacity: 0.0;
        --drawer-shadow-horizontal-offset: 0px;
        --drawer-shadow-vertical-offset: 4px;
        --drawer-shadow-blur-radius: 5px;

        --spacing-sections-desktop: 0px;
        --spacing-sections-mobile: 0px;

        --grid-desktop-vertical-spacing: 40px;
        --grid-desktop-horizontal-spacing: 40px;
        --grid-mobile-vertical-spacing: 20px;
        --grid-mobile-horizontal-spacing: 20px;

        --text-boxes-border-opacity: 0.1;
        --text-boxes-border-width: 0px;
        --text-boxes-radius: 24px;
        --text-boxes-shadow-opacity: 0.0;
        --text-boxes-shadow-visible: 0;
        --text-boxes-shadow-horizontal-offset: 10px;
        --text-boxes-shadow-vertical-offset: 12px;
        --text-boxes-shadow-blur-radius: 20px;

        --buttons-radius: 22px;
        --buttons-radius-outset: 34px;
        --buttons-border-width: 0px;
        --buttons-border-opacity: 0.0;
        --buttons-shadow-opacity: 0.0;
        --buttons-shadow-visible: 0;
        --buttons-shadow-horizontal-offset: 0px;
        --buttons-shadow-vertical-offset: 4px;
        --buttons-shadow-blur-radius: 5px;
        --buttons-border-offset: 0.3px;

        --swatches-radius: 50.0%;
        --swatches-border-opacity: 0.0;
        --swatches-selected-border-opacity: 0.5;

        --pickers-overlay-opacity: 0.08;
        --pickers-radius: 14px;
        --pickers-small-radius: 5.6px;
        --pickers-border-width: 1px;
        --pickers-border-color: var(--color-base-accent-1);
        --pickers-border-opacity: 0.2;
        --pickers-shadow-opacity: 0.0;
        --pickers-shadow-horizontal-offset: 0px;
        --pickers-margin-offset: 0px;
        --pickers-shadow-vertical-offset: 0px;
        --pickers-shadow-blur-radius: 0px;
        --pickers-radius-outset: 15px;
        --pickers-hover-overlay-opacity: 0.1;
        --pickers-hover-border-opacity: 0.55;

        --quantity-overlay-opacity: 0.06;
        --quantity-radius: 28px;
        --quantity-small-radius: 11.2px;
        --quantity-border-width: 1px;
        --quantity-border-color: var(--color-base-accent-1);
        --quantity-border-opacity: 0.2;
        --quantity-shadow-opacity: 0.0;
        --quantity-shadow-horizontal-offset: 0px;
        --quantity-margin-offset: 0px;
        --quantity-shadow-vertical-offset: 0px;
        --quantity-shadow-blur-radius: 0px;
        --quantity-radius-outset: 29px;
        --quantity-hover-overlay-opacity: 0.06;
        --quantity-hover-border-opacity: 0.15;

        --inputs-radius: 6px;
        --inputs-border-width: 1px;
        --inputs-border-opacity: 0.6;
        --inputs-shadow-opacity: 0.0;
        --inputs-shadow-horizontal-offset: 0px;
        --inputs-margin-offset: 0px;
        --inputs-shadow-vertical-offset: 4px;
        --inputs-shadow-blur-radius: 5px;
        --inputs-radius-outset: 7px;
        --inputs-hover-border-opacity: 1;
        
        --variant-pills-inactive-overlay-opacity: 0.0;
        --variant-pills-text-size: 1.4rem;
        --variant-pills-padding-y: 1.0rem;
        --variant-pills-padding-x: 2.0rem;
        --variant-pills-radius: 40px;
        --variant-pills-border-width: 1px;
        --variant-pills-border-opacity: 0.55;
        --variant-pills-shadow-opacity: 0.0;
        --variant-pills-shadow-horizontal-offset: 0px;
        --variant-pills-shadow-vertical-offset: 4px;
        --variant-pills-shadow-blur-radius: 5px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;grid-template-rows: auto auto auto 1fr auto;grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        overflow-x: hidden;
        font-size: 1.5rem;
        letter-spacing: 0.06em;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
        
      }

      
        .animate-section {
          --animation-duration: 650ms;
          --init-delay: 150ms;
          --child-delay: 150ms;
        }
        .animate-section.animate--hidden .animate-item {
          opacity: 0;
          filter: blur(1px);
          transform: translate(0%, 0%) scale(100%);
        }
        .animate-section.animate--shown .animate-item {
          opacity: 1;
          filter: blur(0);
          transform: none;
          transition: opacity var(--animation-duration) var(--init-delay),
            filter var(--animation-duration) var(--init-delay),transform var(--animation-duration) var(--init-delay);
        }
        .animate-section.animate--shown .animate-item.animate-item--child {
          transition-delay: calc(
            var(--init-delay) + (var(--child-delay) * var(--index))
          );
        }
      

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }

      /* fallback */
      @font-face {
        font-family: 'Material Symbols Outlined';
        src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v141/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJU22ZZLsYEpzC_1qmr5Y0.woff2) format('woff2');
        font-style: normal;
        font-weight: 300;
        font-display: block;
      }

      .material-symbols-outlined {
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        max-width: 1em;
        overflow: hidden;
        flex-shrink: 0;
        font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 48;
        vertical-align: bottom;
      }
      .material-symbols-outlined.filled {
        font-variation-settings:
        'FILL' 1
      }