:root {
        --product-grid-padding: 12px;
      }

/* ---- */

:root {
    /* Core Sizes */
    --size-0-25: 0.0625rem; /* 1px */
    --size-0-5: 0.125rem; /* 2px */
    --size-1: 0.25rem; /* 4px */
    --size-1-5: 0.375rem; /* 6px */
    --size-2: 0.5rem; /* 8px */
    --size-2-5: 0.625rem; /* 10px */
    --size-3: 0.75rem; /* 12px */
    --size-3-5: 0.875rem; /* 14px */
    --size-4: 1rem; /* 16px */
    --size-4-5: 1.125rem; /* 18px */
    --size-5: 1.25rem; /* 20px */
    --size-5-5: 1.375rem; /* 22px */
    --size-6: 1.5rem; /* 24px */
    --size-6-5: 1.625rem; /* 26px */
    --size-7: 1.75rem; /* 28px */
    --size-7-5: 1.875rem; /* 30px */
    --size-8: 2rem; /* 32px */
    --size-8-5: 2.125rem; /* 34px */
    --size-9: 2.25rem; /* 36px */
    --size-9-5: 2.375rem; /* 38px */
    --size-10: 2.5rem; /* 40px */
    --size-11: 2.75rem; /* 44px */
    --size-12: 3rem; /* 48px */
    --size-14: 3.5rem; /* 56px */
    --size-16: 4rem; /* 64px */
    --size-18: 4.5rem; /* 72px */
    --size-20: 5rem; /* 80px */
    --size-24: 6rem; /* 96px */
    --size-28: 7rem; /* 112px */
    --size-32: 8rem; /* 128px */

    /* Text Sizes */
    --text-size-2: 0.5rem; /* 8px */
    --text-size-2-5: 0.625rem; /* 10px */
    --text-size-3: 0.75rem; /* 12px */
    --text-size-3-5: 0.875rem; /* 14px */
    --text-size-4: 1rem; /* 16px */
    --text-size-4-5: 1.125rem; /* 18px */
    --text-size-5: 1.25rem; /* 20px */
    --text-size-5-5: 1.375rem; /* 22px */
    --text-size-6: 1.5rem; /* 24px */
    --text-size-6-5: 1.625rem; /* 26px */
    --text-size-7: 1.75rem; /* 28px */
    --text-size-7-5: 1.875rem; /* 30px */
    --text-size-8: 2rem; /* 32px */
    --text-size-8-5: 2.125rem; /* 34px */
    --text-size-9: 2.25rem; /* 36px */
    --text-size-9-5: 2.375rem; /* 38px */
    --text-size-10: 2.5rem; /* 40px */
    --text-size-11: 2.75rem; /* 44px */
    --text-size-12: 3rem; /* 48px */
    --text-size-14: 3.5rem; /* 56px */
    --text-size-16: 4rem; /* 64px */
    --text-size-18: 4.5rem; /* 72px */
    --text-size-20: 5rem; /* 80px */
    --text-size-24: 6rem; /* 96px */
    --text-size-28: 7rem; /* 112px */
    --text-size-32: 8rem; /* 128px */

    /* Line */
    --line-size-none: 0px;
    --line-size-xs: 0.5px;
    --line-size-sm: 1px;
    --line-size-md: 2px;
    --line-size-lg: 4px;
    --line-size-xl: 8px;

    /* Gap */
    --gap-size-none: 0px;
    --gap-size-xs: 8px;
    --gap-size-sm: 16px;
    --gap-size-md: 32px;
    --gap-size-lg: 48px;
    --gap-size-xl: 64px;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-none: 0px;
    --radius-full: 999px;

    /* Dropshadow */
    --shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
    --shadow-md: 0px 2px 4px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0px 8px 16px -4px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0px 16px 32px -6px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0px 16px 64px -12px rgba(0, 0, 0, 0.22);

    /* Font Weights */
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;

    /* Letter Spacings */
    --letter-space-2xs: -0.05em;
    --letter-space-xs: -0.03em;
    --letter-space-sm: -0.015em;
    --letter-space-md: 0em;
    --letter-space-lg: 0.015em;
    --letter-space-xl: 0.03em;
    --letter-space-2xl: 0.05em;
    --letter-space-3xl: 0.08em;
    --letter-space-4xl: 0.12em;

    /* Line Heights */
    --line-height-2xs: 0.9;
    --line-height-xs: 1;
    --line-height-sm: 1.1;
    --line-height-md: 1.2;
    --line-height-lg: 1.5;
    --line-height-xl: 1.7;
    --line-height-2xl: 2;

    /* Color Shades */
    --shade-0: 0%;
    --shade-4: 4%;
    --shade-8: 8%;
    --shade-12: 12%;
    --shade-16: 16%;
    --shade-20: 20%;
    --shade-30: 30%;
    --shade-40: 40%;
    --shade-50: 50%;
    --shade-60: 60%;
    --shade-70: 70%;
    --shade-80: 80%;
    --shade-90: 90%;
    --shade-100: 100%;
  }

/* ---- */

/* Root Variables */
  :root {
    --root-font-size: 16px;
    --root-color-primary: #000;
    --root-color-secondary: #fff;
  }

  /* Colors */
  :root {
    --color-primary: var(--root-color-primary);
    --color-secondary: var(--root-color-secondary);
    --color-focus: #4a9afc;
    --color-error: #ba4444;
    --color-price: var(--color-primary);
    --color-text-savings: var(--color-primary);
    --disabled-grey: #f6f6f6;
    --disabled-border: #b6b6b6;
    --disabled-grey-text: #b6b6b6;
    --success-green: #56ad6a;
    --success-green-bg: #ecfef0;
    --color-sticky-nav-links: #fff;
  }

  /* Body Font Stack */
  :root {
    --element-text-font-family--body: 'Arial';
    --element-text-font-family-fallback--body: 'sans-serif';
    --element-text-font-weight--body: var(--font-weight-400);
    --element-text-letter-spacing--body: var(--letter-space-md);
    --element-text-line-height--body: var(--line-height-md);
    --element-text-text-transform--body: none;
    --element-text-font-size--body-lg: var(--text-size-4);
    --element-text-font-size--body-md: var(--text-size-3-5);
    --element-text-font-size--body-sm: var(--text-size-3);
    --element-text-font-size--body-xs: var(--text-size-2-5);

    @media screen and (min-width: 769px) {
      --element-text-font-size--body-lg: var(--text-size-4-5);
      --element-text-font-size--body-md: var(--text-size-4);
      --element-text-font-size--body-sm: var(--text-size-3-5);
      --element-text-font-size--body-xs: var(--text-size-3);
    }
  }

  /* Heading Font Stack */
  :root {
    --element-text-font-family--heading: 'Arial';
    --element-text-font-family-fallback--heading: 'sans-serif';
    --element-text-font-weight--heading: var(--font-weight-700);
    --element-text-letter-spacing--heading: var(--letter-space-md);

    --element-text-line-height--heading-2xl: var(--line-height-md);
    --element-text-line-height--heading-xl: var(--line-height-md);
    --element-text-line-height--heading-lg: var(--line-height-md);
    --element-text-line-height--heading-md: var(--line-height-md);
    --element-text-line-height--heading-sm: var(--line-height-md);
    --element-text-line-height--heading-xs: var(--line-height-md);

    --element-text-font-size--heading-2xl: var(--text-size-12);
    --element-text-font-size--heading-xl: var(--text-size-8);
    --element-text-font-size--heading-lg: var(--text-size-6);
    --element-text-font-size--heading-md: var(--text-size-5);
    --element-text-font-size--heading-sm: var(--text-size-4-5);
    --element-text-font-size--heading-xs: var(--text-size-4);

    @media screen and (min-width: 769px) {
      --element-text-font-size--heading-2xl: var(--text-size-16);
      --element-text-font-size--heading-2xl: var(--text-size-12);
      --element-text-font-size--heading-xl: var(--text-size-8);
      --element-text-font-size--heading-lg: var(--text-size-6);
      --element-text-font-size--heading-md: var(--text-size-5);
      --element-text-font-size--heading-sm: var(--text-size-4-5);
      --element-text-font-size--heading-xs: var(--text-size-4-5);
    }
  }

  /* Accent Font Stack */
  :root {
    --element-text-font-family--accent: 'Arial';
    --element-text-font-family-fallback--accent: 'sans-serif';
    --element-text-font-weight--accent: var(--font-weight-400);
    --element-text-letter-spacing--accent: var(--letter-space-4xl);
    --element-text-line-height--accent: var(--line-height-md);
    --element-text-text-transform--accent: uppercase;
  }

  /* Input Responsive Styles */
  @media (max-width: 768px) {
    :root { 
      --element-input-padding-inline: var(--size-2);
      --element-input-padding-block: var(--size-2);
    }
  }

  /* Button Responsive Styles */
  @media (max-width: 768px) {
    :root { 
      --element-button-padding-inline: var(--size-2);
      --element-button-padding-block: var(--size-2);
    }

    .element-button--shopify-payment-wrapper shopify-accelerated-checkout {
      --shopify-accelerated-checkout-button-block-size: calc(2* var(--element-button-padding-block) + var(--element-text-line-height--body) * var(--element-text-font-size--body-md));
    }
  } 

  /* ==================================================================== */
  /* OLD CSS VARIABLES THAT NEEDS TO 🔥 */
  /* ==================================================================== */
  :root {
    --z-index-modal: 30;
    --z-index-toolbar: 7;
    --z-index-header: 6;
    --z-index-header-submenu: 7;
    --z-index-header-bottom-row: 3;
    --z-index-header-drawers: 5;
    --z-index-header-drawers-mobile: 3;
    --z-index-header-search: 7;
    --z-index-loader: 4;
    --z-index-header-search-overlay: 1;
    --url-ico-select: url(/wp-content/themes/gv-parent/assets/expanse/ico-select.svg);
    --url-swirl-svg: url(/wp-content/themes/gv-parent/assets/expanse/swirl.svg);
    --header-padding-bottom: 0;
    --gutter: 30px;
    --page-width: 1500px;
    --page-width-narrow: 1000px;
    --page-width-gutter-small: 17px;
    --grid-gutter: 22px;
    --grid-gutter-small: 16px;
    --slide-curve: 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    --drawer-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    --product-grid-margin: 10px;
    --product-grid-padding: 12px;
    --product-radius: 10px;
    --page-top-padding: 35px;
    --page-narrow: 780px;
    --page-width-padding: 40px;
    --grid-gutter: 22px;
    --index-section-padding: 60px;
    --section-header-bottom: 40px;
    --size-chart-margin: 30px 0;
    --size-chart-icon-margin: 5px;
    --newsletter-reminder-padding: 20px 30px 20px 25px;
    --text-frame-margin: 10px;
    --desktop-menu-chevron-size: 10px;
    --site-nav-item-padding: 20px;
    --site-nav-item-padding-top-bottom: 16px;
    --site-nav-icon-padding: 12px;
  }

  @media screen and (max-width: 768px) {
    :root {
      --page-top-padding: 15px;
      --page-narrow: 330px;
      --page-width-padding: 17px;
      --grid-gutter: 16px;
      --index-section-padding: 40px;
      --section-header-bottom: 25px;
      --text-frame-margin: 7px;
    }
  }

/* ---- */



  :root {
    /* Body Font Stack */--element-text-font-family--body:Poppins;
      --element-text-font-family-fallback--body:sans-serif;
      --element-text-font-weight--body: 400;/* Accent Font Stack */

    /* Heading Font Stack */--element-text-font-family--heading:Oswald;
      --element-text-font-family-fallback--heading:sans-serif;
      --element-text-font-weight--heading: 400;
      --element-text-text-transform--heading: uppercase;
    
  }

/* ---- */

:root {
    --text-size-scale-n-4: var(--text-size-2); /* 8px */
    --text-size-scale-n-3: var(--text-size-2-5); /* 10px */
    --text-size-scale-n-2: var(--text-size-3); /* 12px */
    --text-size-scale-n-1: var(--text-size-3-5); /* 14px */
    --text-size-scale-n0: var(--text-size-4); /* 16px */
    --text-size-scale-n1: var(--text-size-4-5); /* 18px */
    --text-size-scale-n2: var(--text-size-5); /* 20px */
    --text-size-scale-n3: var(--text-size-6); /* 24px */
    --text-size-scale-n4: var(--text-size-6-5); /* 26px */
    --text-size-scale-n5: var(--text-size-7); /* 28px */
    --text-size-scale-n6: var(--text-size-8); /* 32px */
    --text-size-scale-n7: var(--text-size-9); /* 36px */
    --text-size-scale-n8: var(--text-size-10); /* 40px */
    --text-size-scale-n9: var(--text-size-12); /* 48px */
    --text-size-scale-n10: var(--text-size-14); /* 56px */
    --text-size-scale-n11: var(--text-size-16); /* 64px */
    --text-size-scale-n12: var(--text-size-18); /* 72px */
    --text-size-scale-n13: var(--text-size-20); /* 80px */
    --text-size-scale-n14: var(--text-size-24); /* 96px */

    --font-weight-scale-n-3: var(--font-weight-100);
    --font-weight-scale-n-2: var(--font-weight-200);
    --font-weight-scale-n-1: var(--font-weight-300);
    --font-weight-scale-n0: var(--font-weight-400);
    --font-weight-scale-n1: var(--font-weight-500);
    --font-weight-scale-n2: var(--font-weight-600);
    --font-weight-scale-n3: var(--font-weight-700);
    --font-weight-scale-n4: var(--font-weight-800);
    --font-weight-scale-n5: var(--font-weight-900);

    --letter-spacing-scale-n-3: var(--letter-space-2xs);
    --letter-spacing-scale-n-2: var(--letter-space-xs);
    --letter-spacing-scale-n-1: var(--letter-space-sm);
    --letter-spacing-scale-n0: var(--letter-space-md);
    --letter-spacing-scale-n1: var(--letter-space-lg);
    --letter-spacing-scale-n2: var(--letter-space-xl);
    --letter-spacing-scale-n3: var(--letter-space-2xl);
    --letter-spacing-scale-n4: var(--letter-space-3xl);
    --letter-spacing-scale-n5: var(--letter-space-4xl);

    --line-height-scale-n-3: var(--line-height-2xs);
    --line-height-scale-n-2: var(--line-height-xs);
    --line-height-scale-n-1: var(--line-height-sm);
    --line-height-scale-n0: var(--line-height-md);
    --line-height-scale-n1: var(--line-height-lg);
    --line-height-scale-n2: var(--line-height-xl);
    --line-height-scale-n3: var(--line-height-2xl);

    /* Body Font Scales */--element-text-letter-spacing--body: var(--letter-spacing-scale-n0);--element-text-line-height--body: var(--line-height-scale-n0);--element-text-font-size--body-lg: var(--text-size-scale-n1);
      --element-text-font-size--body-md: var(--text-size-scale-n0);
      --element-text-font-size--body-sm: var(--text-size-scale-n-1);
      --element-text-font-size--body-xs: var(--text-size-scale-n-2);/* Heading Font Scales */--element-text-letter-spacing--heading: var(--letter-spacing-scale-n0);--element-text-line-height--heading: var(--line-height-scale-n0);/* Accent Font Scales */@media screen and (min-width: 769px) {
      /* Body Font Desktop Sizes */--element-text-font-size--body-lg: var(--text-size-scale-n2);
        --element-text-font-size--body-md: var(--text-size-scale-n1);
        --element-text-font-size--body-sm: var(--text-size-scale-n0);
        --element-text-font-size--body-xs: var(--text-size-scale-n-1);/* Heading Desktop Font Sizes */--element-text-font-size--heading-2xl: max(var(--text-size-scale-n11), var(--element-text-font-size--body-md));
        --element-text-font-size--heading-xl: max(var(--text-size-scale-n9), var(--element-text-font-size--body-md));
        --element-text-font-size--heading-lg: max(var(--text-size-scale-n6), var(--element-text-font-size--body-md));
        --element-text-font-size--heading-md: max(var(--text-size-scale-n3), var(--element-text-font-size--body-md));
        --element-text-font-size--heading-sm: max(var(--text-size-scale-n2), var(--element-text-font-size--body-md));
        --element-text-font-size--heading-xs: max(var(--text-size-scale-n1), var(--element-text-font-size--body-md));
        --element-text-font-size--heading-2xs: max(var(--text-size-scale-n0), var(--element-text-font-size--body-md));}
  }

/* ---- */

:root {
    
--root-color-primary: #000000;--root-color-secondary: #ffffff;
    
      --color-scheme-1-primary: #272831;
      --color-scheme-1-secondary: #d3dac9;
    
      --color-scheme-2-primary: #ffffff;
      --color-scheme-2-secondary: #343643;
    
      --color-scheme-3-primary: #272831;
      --color-scheme-3-secondary: #efebeb;
    
      --color-scheme-4-primary: #000000;
      --color-scheme-4-secondary: #ffffff;
    
      --color-scheme-5-primary: #ff8b00;
      --color-scheme-5-secondary: #ffffff;
    
      --color-scheme-6-primary: #ba4444;
      --color-scheme-6-secondary: #ffffff;
    
      --color-scheme-7-primary: #ffffff;
      --color-scheme-7-secondary: #383a46;
    
      --color-scheme-8-primary: #ffffff;
      --color-scheme-8-secondary: #191919;
    
      --color-scheme-9-primary: #ffffff;
      --color-scheme-9-secondary: #000000;
    
  }

  .color-scheme-none {
    --color-primary: var(--root-color-primary);
    --color-secondary: var(--root-color-secondary);
  }

  
    .color-scheme-1 {
      --color-primary: var(--color-scheme-1-primary);
      --color-secondary: var(--color-scheme-1-secondary);
    }
  
    .color-scheme-2 {
      --color-primary: var(--color-scheme-2-primary);
      --color-secondary: var(--color-scheme-2-secondary);
    }
  
    .color-scheme-3 {
      --color-primary: var(--color-scheme-3-primary);
      --color-secondary: var(--color-scheme-3-secondary);
    }
  
    .color-scheme-4 {
      --color-primary: var(--color-scheme-4-primary);
      --color-secondary: var(--color-scheme-4-secondary);
    }
  
    .color-scheme-5 {
      --color-primary: var(--color-scheme-5-primary);
      --color-secondary: var(--color-scheme-5-secondary);
    }
  
    .color-scheme-6 {
      --color-primary: var(--color-scheme-6-primary);
      --color-secondary: var(--color-scheme-6-secondary);
    }
  
    .color-scheme-7 {
      --color-primary: var(--color-scheme-7-primary);
      --color-secondary: var(--color-scheme-7-secondary);
    }
  
    .color-scheme-8 {
      --color-primary: var(--color-scheme-8-primary);
      --color-secondary: var(--color-scheme-8-secondary);
    }
  
    .color-scheme-9 {
      --color-primary: var(--color-scheme-9-primary);
      --color-secondary: var(--color-scheme-9-secondary);
    }
  

  
    /* Global button colors */
    .element-button:not(.color-scheme-1 *, .color-scheme-2 *, .color-scheme-3 *),
    .shopify-payment-button__button--unbranded:not(.color-scheme-1 *, .color-scheme-2 *, .color-scheme-3 *) {
      --element-button-color-primary: #ff8b00;
      --element-button-color-secondary: #ffffff;
    }
  

  /* LEGACY TOKENS THAT WE NEED TO KILLLLLLLLLLLLL */
  /* --------------------------------------------- */

  :root {
    /* Fixed colors */
    --color-price: #000000;
    --color-text-savings: #ba4444;
    --color-sale-price: #ba4444;

    /* TODO: Move to component that uses this */
    --color-button-primary: #ff8b00; /* TODO: Remove this */
    --color-button-primary-light: #ffa233; /* TODO: Remove this */
    --color-button-primary-dim: #e67d00; /* TODO: Remove this */
    --color-button-primary-text: #ffffff; /* TODO: Remove this */

    --color-sale-tag: #ba4444;
    --color-sale-tag-text: #ffffff;
  }

/* ---- */

:root {
    --product-tile-margin: 5%;--collection-tile-margin: 5%;--swatch-size: 40px;--element-icon-stroke-width: 4px;--icon-stroke-line-join: miter;--element-button-radius: var(--radius-none);--roundness: var(--radius-xl);
      --element-badge-radius: var(--radius-full);
      --element-chip-radius: var(--radius-full);
      --element-input-radius: min(24px, var(--radius-full));--grid-thickness: 1px;}

  @media screen and (max-width: 768px) {
    :root {
      
        --roundness: var(--radius-lg);
    }
  }