/* Fonts */
@font-face {
  font-family: Figtree;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/figtree/figtree_n5.3b6b7df38aa5986536945796e1f947445832047c.woff2") format("woff2"),
       url("/cdn/fonts/figtree/figtree_n5.f26bf6dcae278b0ed902605f6605fa3338e81dab.woff") format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/figtree/figtree_n7.2fd9bfe01586148e644724096c9d75e8c7a90e55.woff2") format("woff2"),
       url("/cdn/fonts/figtree/figtree_n7.ea05de92d862f9594794ab281c4c3a67501ef5fc.woff") format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("/cdn/fonts/figtree/figtree_i5.969396f679a62854cf82dbf67acc5721e41351f0.woff2") format("woff2"),
       url("/cdn/fonts/figtree/figtree_i5.93bc1cad6c73ca9815f9777c49176dfc9d2890dd.woff") format("woff");
}

@font-face {
  font-family: Figtree;
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("/cdn/fonts/figtree/figtree_i7.06add7096a6f2ab742e09ec7e498115904eda1fe.woff2") format("woff2"),
       url("/cdn/fonts/figtree/figtree_i7.ee584b5fcaccdbb5518c0228158941f8df81b101.woff") format("woff");
}

@font-face {
  font-family: Oswald;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/oswald/oswald_n5.8ad4910bfdb43e150746ef7aa67f3553e3abe8e2.woff2") format("woff2"),
       url("/cdn/fonts/oswald/oswald_n5.93ee52108163c48c91111cf33b0a57021467b66e.woff") format("woff");
}

/* Color schemes */
:root,
.color-scheme-1 {
  --color-background: 31,31,33;
  --gradient-background: #1f1f21;
  --color-foreground: 255,255,255;
  --color-background-contrast: 43,43,46;
  --color-shadow: 255,255,255;
  --color-button: 227,252,2;
  --color-button-text: 31,31,33;
  --color-secondary-button: 31,31,33;
  --color-secondary-button-text: 227,252,2;
  --color-link: 227,252,2;
  --color-badge-foreground: 255,255,255;
  --color-badge-background: 31,31,33;
  --color-badge-border: 255,255,255;
  --payment-terms-background-color: rgb(31 31 33);
}

.color-scheme-2 {
  --color-background: 31,31,33;
  --gradient-background: #1f1f21;
  --color-foreground: 255,255,255;
  --color-background-contrast: 43,43,46;
  --color-shadow: 255,255,255;
  --color-button: 255,255,255;
  --color-button-text: 31,31,33;
  --color-secondary-button: 31,31,33;
  --color-secondary-button-text: 255,255,255;
  --color-link: 255,255,255;
  --color-badge-foreground: 255,255,255;
  --color-badge-background: 31,31,33;
  --color-badge-border: 255,255,255;
  --payment-terms-background-color: rgb(31 31 33);
}

.color-scheme-3 {
  --color-background: 255,255,255;
  --gradient-background: #ffffff;
  --color-foreground: 31,31,33;
  --color-background-contrast: 191,191,191;
  --color-shadow: 255,255,255;
  --color-button: 31,31,33;
  --color-button-text: 255,255,255;
  --color-secondary-button: 255,255,255;
  --color-secondary-button-text: 31,31,33;
  --color-link: 31,31,33;
  --color-badge-foreground: 31,31,33;
  --color-badge-background: 255,255,255;
  --color-badge-border: 31,31,33;
  --payment-terms-background-color: rgb(255 255 255);
}

.color-scheme-4 {
  --color-background: 227,252,2;
  --gradient-background: #e3fc02;
  --color-foreground: 31,31,33;
  --color-background-contrast: 113,126,1;
  --color-shadow: 255,255,255;
  --color-button: 31,31,33;
  --color-button-text: 227,252,2;
  --color-secondary-button: 227,252,2;
  --color-secondary-button-text: 31,31,33;
  --color-link: 31,31,33;
  --color-badge-foreground: 31,31,33;
  --color-badge-background: 227,252,2;
  --color-badge-border: 31,31,33;
  --payment-terms-background-color: rgb(227 252 2);
}

.color-scheme-5 {
  --color-background: 0,252,237;
  --gradient-background: #00fced;
  --color-foreground: 31,31,33;
  --color-background-contrast: 0,125,117;
  --color-shadow: 255,255,255;
  --color-button: 31,31,33;
  --color-button-text: 0,252,237;
  --color-secondary-button: 0,252,237;
  --color-secondary-button-text: 31,31,33;
  --color-link: 31,31,33;
  --color-badge-foreground: 31,31,33;
  --color-badge-background: 0,252,237;
  --color-badge-border: 31,31,33;
  --payment-terms-background-color: rgb(0 252 237);
}

.color-scheme-5cc9a23f-05a3-44f0-9c89-4645a55fac25 {
  --color-background: 82,20,131;
  --gradient-background: #521483;
  --color-foreground: 255,255,255;
  --color-background-contrast: 96,23,153;
  --color-shadow: 255,255,255;
  --color-button: 31,31,33;
  --color-button-text: 31,31,33;
  --color-secondary-button: 82,20,131;
  --color-secondary-button-text: 31,31,33;
  --color-link: 31,31,33;
  --color-badge-foreground: 255,255,255;
  --color-badge-background: 82,20,131;
  --color-badge-border: 255,255,255;
  --payment-terms-background-color: rgb(82 20 131);
}

body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5, .color-scheme-5cc9a23f-05a3-44f0-9c89-4645a55fac25 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

/* Typography & base variables */
:root {
  --font-body-family: Figtree, sans-serif;
  --font-body-style: normal;
  --font-body-weight: 500;
  --font-body-weight-bold: 800;

  --font-heading-family: Oswald, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 500;

  --font-body-scale: 1.0;
  --font-heading-scale: 1.4;

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

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

  --product-card-image-padding: 0.0rem;
  --product-card-corner-radius: 0.0rem;
  --product-card-text-alignment: left;
  --product-card-border-width: 0.0rem;
  --product-card-border-opacity: 0.1;
  --product-card-shadow-opacity: 0.0;
  --product-card-shadow-visible: 0;
  --product-card-shadow-horizontal-offset: 0.0rem;
  --product-card-shadow-vertical-offset: 0.4rem;
  --product-card-shadow-blur-radius: 0.5rem;

  --collection-card-image-padding: 0.0rem;
  --collection-card-corner-radius: 0.0rem;
  --collection-card-text-alignment: left;
  --collection-card-border-width: 0.0rem;
  --collection-card-border-opacity: 0.1;
  --collection-card-shadow-opacity: 0.0;
  --collection-card-shadow-visible: 0;
  --collection-card-shadow-horizontal-offset: 0.0rem;
  --collection-card-shadow-vertical-offset: 0.4rem;
  --collection-card-shadow-blur-radius: 0.5rem;

  --blog-card-image-padding: 0.0rem;
  --blog-card-corner-radius: 0.0rem;
  --blog-card-text-alignment: left;
  --blog-card-border-width: 0.0rem;
  --blog-card-border-opacity: 0.1;
  --blog-card-shadow-opacity: 0.0;
  --blog-card-shadow-visible: 0;
  --blog-card-shadow-horizontal-offset: 0.0rem;
  --blog-card-shadow-vertical-offset: 0.4rem;
  --blog-card-shadow-blur-radius: 0.5rem;

  --badge-corner-radius: 4.0rem;

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

  --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: 52px;
  --spacing-sections-mobile: 36px;

  --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: 0px;
  --text-boxes-shadow-opacity: 0.0;
  --text-boxes-shadow-visible: 0;
  --text-boxes-shadow-horizontal-offset: 0px;
  --text-boxes-shadow-vertical-offset: 4px;
  --text-boxes-shadow-blur-radius: 5px;

  --buttons-radius: 0px;
  --buttons-radius-outset: 0px;
  --buttons-border-width: 1px;
  --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: 0px;

  --inputs-radius: 0px;
  --inputs-border-width: 1px;
  --inputs-border-opacity: 0.55;
  --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: 0px;

  --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-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  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);
}

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