@font-face {
            font-family: Poppins;
            font-weight: 400;
            font-style: normal;
            font-display: swap;
            src: url("../fonts/poppins_n4.0ba78fa5af9b0e1a374041b3ceaadf0a43b41362.woff2") format("woff2"),
                url("../fonts/poppins_n4.214741a72ff2596839fc9760ee7a770386cf16ca.woff") format("woff");
        }

        @font-face {
            font-family: Poppins;
            font-weight: 700;
            font-style: normal;
            font-display: swap;
            src: url("../fonts/poppins_n7.56758dcf284489feb014a026f3727f2f20a54626.woff2") format("woff2"),
                url("../fonts/poppins_n7.f34f55d9b3d3205d2cd6f64955ff4b36f0cfd8da.woff") format("woff");
        }

        @font-face {
            font-family: Poppins;
            font-weight: 400;
            font-style: italic;
            font-display: swap;
            src: url("../fonts/poppins_i4.846ad1e22474f856bd6b81ba4585a60799a9f5d2.woff2") format("woff2"),
                url("../fonts/poppins_i4.56b43284e8b52fc64c1fd271f289a39e8477e9ec.woff") format("woff");
        }

        @font-face {
            font-family: Poppins;
            font-weight: 700;
            font-style: italic;
            font-display: swap;
            src: url("../fonts/poppins_i7.42fd71da11e9d101e1e6c7932199f925f9eea42d.woff2") format("woff2"),
                url("../fonts/poppins_i7.ec8499dbd7616004e21155106d13837fff4cf556.woff") format("woff");
        }


        :root {
            --font-body-family: Poppins, sans-serif;
            --font-body-style: normal;
            --font-body-weight: 400;
            --font-body-weight-bold: 700;
        }



        @font-face {
            font-family: Poppins;
            font-weight: 700;
            font-style: normal;
            font-display: swap;
            src: url("../fonts/poppins_n7.56758dcf284489feb014a026f3727f2f20a54626.woff2") format("woff2"),
                url("../fonts/poppins_n7.f34f55d9b3d3205d2cd6f64955ff4b36f0cfd8da.woff") format("woff");
        }

        :root {
            --font-heading-family: Poppins, sans-serif;
            --font-heading-style: normal;
            --font-heading-weight: 700;
        }


        :root {
            --font-body-scale: 1.0;
            --font-heading-scale: 1.3;

            --color-base-text: 18, 18, 18;
            --color-shadow: 18, 18, 18;
            --color-base-background-1: 255, 255, 255;
            --color-base-background-2: 243, 243, 243;
            --color-base-solid-button-labels: 253, 251, 247;
            --color-base-outline-button-labels: 26, 43, 73;
            --color-base-accent-1: 26, 43, 73;
            --color-base-accent-2: 26, 43, 73;
            --payment-terms-background-color: #ffffff;

            --gradient-base-background-1: #ffffff;
            --gradient-base-background-2: #f3f3f3;
            --gradient-base-accent-1: #1a2b49;
            --gradient-base-accent-2: linear-gradient(54deg, rgba(46, 42, 57, 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.0rem;

            --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: 1.0rem;
            --collection-card-shadow-vertical-offset: 1.0rem;
            --collection-card-shadow-blur-radius: 3.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;

            --popup-border-width: 1px;
            --popup-border-opacity: 0.1;
            --popup-corner-radius: 22px;
            --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;

            --inputs-radius: 6px;
            --inputs-small-radius: 2.4px;
            --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: 12px;
            --inputs-shadow-blur-radius: 5px;
            --inputs-radius-outset: 7px;

            --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;
            }
        }