:root {
          --font-body-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';
          --font-body-style: normal;
          --font-body-weight: 400;
          --font-body-weight-bold: 700;
        }
      
      
      
        
        :root {
          --font-heading-family: "New York", Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
          --font-heading-style: normal;
          --font-heading-weight: 400;
        }
      

      :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: 248, 246, 243;
        --color-base-solid-button-labels: 255, 255, 255;
        --color-base-outline-button-labels: 18, 18, 18;
        --color-base-accent-1: 10, 31, 68;
        --color-base-accent-2: 87, 46, 110;
        --payment-terms-background-color: #ffffff;

        --gradient-base-background-1: #ffffff;
        --gradient-base-background-2: #f8f6f3;
        --gradient-base-accent-1: #0a1f44;
        --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: 140rem;
        --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: 14px;
        --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: 6px;
        --buttons-radius-outset: 8px;
        --buttons-border-width: 2px;
        --buttons-border-opacity: 1.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: 8px;
        --pickers-small-radius: 3.2px;
        --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: 9px;
        --pickers-hover-overlay-opacity: 0.1;
        --pickers-hover-border-opacity: 0.55;

        --quantity-overlay-opacity: 0.06;
        --quantity-radius: 8px;
        --quantity-small-radius: 3.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: 9px;
        --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(fonts/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
      }