/*
 * DA Beauty — design tokens.
 *
 * Extracted verbatim from the source storefront's theme-settings block:
 * colour schemes (applied by `.color-scheme-*` classes on sections),
 * button/​input colours, the fluid type scale, spacing steps and layout
 * variables. Every component stylesheet resolves against these custom
 * properties, so this file must load before theme.css.
 *
 * @font-face declarations were moved to fonts.css and re-pointed at the
 * theme's local /assets/fonts directory.
 */

:root,
        .color-default{
          --color-background: rgba(0,0,0,0);
          --color-background-2: #6d6565;
          --gradient-background: rgba(0,0,0,0);
          --color-text: #444444;
          --color-text-rgb: 68, 68, 68;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #111111;
          --btn-primary-bg-color-rgb: 17, 17, 17;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-color-scheme-1{
          --color-background: #e3e1da;
          --color-background-2: #d8cfc6;
          --gradient-background: #e3e1da;
          --color-text: #1d1d1f;
          --color-text-rgb: 29, 29, 31;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #ffffff;
          --btn-primary-bg-color: #111111;
          --btn-primary-bg-color-rgb: 17, 17, 17;
          --btn-primary-hover-bg-color: #7a5c3e;
          /* Button outline */
          --btn-outline-color: #111111;
          --btn-outline-border-color: #ffffff;
          /* Button link */
          --btn-link-color: #111111;
          --btn-link-hover-color: #111111;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-color-scheme-2{
          --color-background: #f2efe6;
          --color-background-2: #ece7da;
          --gradient-background: #f2efe6;
          --color-text: #1d1d1f;
          --color-text-rgb: 29, 29, 31;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #1f473e;
          --btn-primary-bg-color-rgb: 31, 71, 62;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-0ba1b009-7eed-45cd-b0f5-57fda3e81ca0{
          --color-background: #c9c0b5;
          --color-background-2: #7f7363;
          --gradient-background: #c9c0b5;
          --color-text: #1d1d1f;
          --color-text-rgb: 29, 29, 31;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #ffffff;
          --btn-primary-bg-color: #111111;
          --btn-primary-bg-color-rgb: 17, 17, 17;
          --btn-primary-hover-bg-color: #7a5c3e;
          /* Button outline */
          --btn-outline-color: #ffffff;
          --btn-outline-border-color: #ffffff;
          /* Button link */
          --btn-link-color: #ffffff;
          --btn-link-hover-color: #ffffff;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-957ad1f6-ead2-4f72-bdba-ddfe8f341c9e{
          --color-background: #9b7d5cfa;
          --color-background-2: #f2efe6;
          --gradient-background: #9b7d5cfa;
          --color-text: #e5e5e5;
          --color-text-rgb: 229, 229, 229;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #20432f;
          --btn-primary-bg-color: #20432f;
          --btn-primary-bg-color-rgb: 32, 67, 47;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1d1d1f;
          --btn-outline-border-color: #999999;
          /* Button link */
          --btn-link-color: #1d1d1f;
          --btn-link-hover-color: #1d1d1f;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-9992034c-51d7-4a47-92a6-2d680b0b20b4{
          --color-background: #bbbbbb;
          --color-background-2: #f2efe6;
          --gradient-background: #bbbbbb;
          --color-text: #4b4747;
          --color-text-rgb: 75, 71, 71;
          --color-heading: #ffffff;
          --color-heading-rgb:255, 255, 255;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #1d1d1f;
          --btn-primary-hover-color: #ffffff;
          --btn-primary-bg-color: #ffffff;
          --btn-primary-bg-color-rgb: 255, 255, 255;
          --btn-primary-hover-bg-color: #1d1d1f;
          /* Button outline */
          --btn-outline-color: #1d1d1f;
          --btn-outline-border-color: #999999;
          /* Button link */
          --btn-link-color: #1d1d1f;
          --btn-link-hover-color: #1d1d1f;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-070b6d81-d1cf-49ad-aa7a-4a016abd3a99{
          --color-background: #9b7d5cfa;
          --color-background-2: #f2efe6;
          --gradient-background: #9b7d5cfa;
          --color-text: #ffffff;
          --color-text-rgb: 255, 255, 255;
          --color-heading: #ffffff;
          --color-heading-rgb:255, 255, 255;
          --color-border: #fffdfd;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #1f473e;
          --btn-primary-bg-color-rgb: 31, 71, 62;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #ffffff;
          --btn-outline-border-color: #ffffff;
          /* Button link */
          --btn-link-color: #ffffff;
          --btn-link-hover-color: #ffffff;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-76e16d9c-62d8-4250-9f3a-e19467efff31{
          --color-background: #7f7363;
          --color-background-2: #ffffff;
          --gradient-background: #7f7363;
          --color-text: #444444;
          --color-text-rgb: 68, 68, 68;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #1f473e;
          --btn-primary-bg-color-rgb: 31, 71, 62;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-4a4a3e14-571e-4a2f-aa65-1158b87a9b0e{
          --color-background: #ffffff;
          --color-background-2: #ffffff;
          --gradient-background: #ffffff;
          --color-text: #1d1d1f;
          --color-text-rgb: 29, 29, 31;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #1f473e;
          --btn-primary-bg-color-rgb: 31, 71, 62;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-b057792d-f0df-4ed0-973f-3dd88bca67d5{
          --color-background: #0a0a0a;
          --color-background-2: #f2efe6;
          --gradient-background: #0a0a0a;
          --color-text: #ffffff;
          --color-text-rgb: 255, 255, 255;
          --color-heading: #ffffff;
          --color-heading-rgb:255, 255, 255;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #1f473e;
          --btn-primary-hover-color: #ffffff;
          --btn-primary-bg-color: #ffffff;
          --btn-primary-bg-color-rgb: 255, 255, 255;
          --btn-primary-hover-bg-color: #1f473e;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-85c61dc2-20da-48a8-92be-c39d88ecd689{
          --color-background: #ffffff;
          --color-background-2: #f2efe6;
          --gradient-background: #ffffff;
          --color-text: #ffffff;
          --color-text-rgb: 255, 255, 255;
          --color-heading: #ffffff;
          --color-heading-rgb:255, 255, 255;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #9b7d5c;
          --btn-primary-bg-color-rgb: 155, 125, 92;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-4a8d23be-2966-47be-ae10-8cbb3c1181cf{
          --color-background: #ffffff;
          --color-background-2: #f2efe6;
          --gradient-background: #ffffff;
          --color-text: #ffffff;
          --color-text-rgb: 255, 255, 255;
          --color-heading: #ffffff;
          --color-heading-rgb:255, 255, 255;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #1f473e;
          --btn-primary-hover-color: #ffffff;
          --btn-primary-bg-color: #ffffff;
          --btn-primary-bg-color-rgb: 255, 255, 255;
          --btn-primary-hover-bg-color: #1f473e;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-dd5f4919-0042-4a27-80e8-bf958b2ca019{
          --color-background: #ffffff;
          --color-background-2: #f2efe6;
          --gradient-background: #ffffff;
          --color-text: #444444;
          --color-text-rgb: 68, 68, 68;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #666562;
          --btn-primary-bg-color-rgb: 102, 101, 98;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-221506e4-f021-4bec-8307-a119b3272d32{
          --color-background: #ffffff;
          --color-background-2: #f2efe6;
          --gradient-background: #ffffff;
          --color-text: #1d1d1f;
          --color-text-rgb: 29, 29, 31;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #1d1d1f;
          --btn-primary-hover-color: #ffffff;
          --btn-primary-bg-color: #ffffff;
          --btn-primary-bg-color-rgb: 255, 255, 255;
          --btn-primary-hover-bg-color: #1f473e;
          /* Button outline */
          --btn-outline-color: #ffffff;
          --btn-outline-border-color: #ffffff;
          /* Button link */
          --btn-link-color: #ffffff;
          --btn-link-hover-color: #ffffff;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-5845b018-499c-4992-911f-af4c353bc17e{
          --color-background: #ffffff;
          --color-background-2: #f2efe6;
          --gradient-background: #ffffff;
          --color-text: #444444;
          --color-text-rgb: 68, 68, 68;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #1f473e;
          --btn-primary-bg-color-rgb: 31, 71, 62;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1d1d1f;
          --btn-outline-border-color: #1d1d1f;
          /* Button link */
          --btn-link-color: #1d1d1f;
          --btn-link-hover-color: #1d1d1f;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-92254dbe-07d9-4309-abc6-80aaf15812f5{
          --color-background: #ffffff;
          --color-background-2: #686161;
          --gradient-background: #ffffff;
          --color-text: #1d1d1f;
          --color-text-rgb: 29, 29, 31;
          --color-heading: #1d1d1f;
          --color-heading-rgb:29, 29, 31;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #1f473e;
          --btn-primary-bg-color: #1f473e;
          --btn-primary-bg-color-rgb: 31, 71, 62;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-71ad6e77-818b-46af-a5ac-36e11fc517b6{
          --color-background: #5b3d27;
          --color-background-2: #f5f5f5;
          --gradient-background: #5b3d27;
          --color-text: #ffffff;
          --color-text-rgb: 255, 255, 255;
          --color-heading: #ffffff;
          --color-heading-rgb:255, 255, 255;
          --color-border: #ffffff;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #f1f1f1;
          --btn-primary-hover-color: #111111;
          --btn-primary-bg-color: #ffffff;
          --btn-primary-bg-color-rgb: 255, 255, 255;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
        .color-scheme-353a7950-bd9f-4a2a-ac71-57e977750e7e{
          --color-background: #ececec;
          --color-background-2: #f2efe6;
          --gradient-background: #ececec;
          --color-text: #2e2e2e;
          --color-text-rgb: 46, 46, 46;
          --color-heading: #111111;
          --color-heading-rgb:17, 17, 17;
          --color-border: #e5e5e5;
          --color-grey: rgba(var(--color-text-rgb), 0.85);
          --color-grey-light: rgba(var(--color-text-rgb), 0.2);
          /* Button primary */
          --btn-primary-color: #ffffff;
          --btn-primary-hover-color: #111111;
          --btn-primary-bg-color: #111111;
          --btn-primary-bg-color-rgb: 17, 17, 17;
          --btn-primary-hover-bg-color: #ffffff;
          /* Button outline */
          --btn-outline-color: #1f473e;
          --btn-outline-border-color: #1f473e;
          /* Button link */
          --btn-link-color: #1f473e;
          --btn-link-hover-color: #1f473e;
          --input-color: #1d1d1f;
          --input-placeholder-color: #666666;
        }
      body, .color-default, .color-color-scheme-1, .color-color-scheme-2, .color-scheme-0ba1b009-7eed-45cd-b0f5-57fda3e81ca0, .color-scheme-957ad1f6-ead2-4f72-bdba-ddfe8f341c9e, .color-scheme-9992034c-51d7-4a47-92a6-2d680b0b20b4, .color-scheme-070b6d81-d1cf-49ad-aa7a-4a016abd3a99, .color-scheme-76e16d9c-62d8-4250-9f3a-e19467efff31, .color-scheme-4a4a3e14-571e-4a2f-aa65-1158b87a9b0e, .color-scheme-b057792d-f0df-4ed0-973f-3dd88bca67d5, .color-scheme-85c61dc2-20da-48a8-92be-c39d88ecd689, .color-scheme-4a8d23be-2966-47be-ae10-8cbb3c1181cf, .color-scheme-dd5f4919-0042-4a27-80e8-bf958b2ca019, .color-scheme-221506e4-f021-4bec-8307-a119b3272d32, .color-scheme-5845b018-499c-4992-911f-af4c353bc17e, .color-scheme-92254dbe-07d9-4309-abc6-80aaf15812f5, .color-scheme-71ad6e77-818b-46af-a5ac-36e11fc517b6, .color-scheme-353a7950-bd9f-4a2a-ac71-57e977750e7e {
        color: var(--color-text);
        background-color: var(--color-background);
      }
      :root {
        --body-font-size: 16px;
        --body-font-family: "Instrument Sans", sans-serif;
        --body-font-style: normal;
        --body-font-weight: 500;
        --body-font-weight-bold: 800;
        --body-line-height: 1.625;
        --rounded-thumbs: 12px;
        --img-rounded: 20px;
        --drawer-rounded: 20px;
        --heading-font: Montserrat, sans-serif;
        --heading-font-style: normal;
        --heading-weight: 600;
        --heading-font-scale: 1;
        --subheading-weight:500;
        --menu-font: Montserrat, sans-serif;
        --menu-weight: 600;
        --h0: clamp(4rem,calc(4rem + (60 - 40) * var(--responsive-rate)),  6rem);
        --h1: clamp(3.6rem,calc(3.6rem + (50 - 36) * var(--responsive-rate)), 5rem);
        --h2: clamp(3rem, calc(3rem + (40 - 30) * var(--responsive-rate)), 4rem);
        --h3:  clamp(2.6rem, calc(2.6rem + (30 - 26) * var(--responsive-rate)), 3rem);
        --h4: clamp(2.2rem, calc(2.2rem + (24 - 22) * var(--responsive-rate)),2.4rem);
        --h5: clamp(2rem, calc(2rem + (22 - 20) * var(--responsive-rate)), 2.2rem);
        --h6: clamp(1.8rem, calc(1.8rem + (20 - 18) * var(--responsive-rate)), 2rem);
        --h7: 1.8rem;
        --btn-font: Montserrat, sans-serif;
        --btn-weight: 600;
        --btn-text-transform: unset;
        --btn-radius: 30px;
        --btn-padding-y: 1.3rem;
        --btn-padding-x: 1.8rem;
        --btn-font-size: var(--body-font-size, 1.4rem);
        --shopify-accelerated-checkout-button-border-radius: var(--btn-radius);
        --input-padding: 0 2.5rem;
        --input-border-width: 1px;
        --input-border-color: var(--border-color);
        --input-bg: rgb(var(--color-white));
        --input-color: rgb(var(--color-heading-hsl));
        --input-font-size: var(--body-font-size);
        --input-placeholder-color: #666666;--input-border-radius: 30px;
        --input-height: 4.8rem;
        --shopify-accelerated-checkout-button-block-size: var(--input-height);
        --rate-color: #FF9C05;
        --page-width: 1392px;
        --page-width-margin: 0rem;
        --logo-width: 116px;
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 0;
        --color-white: 255, 255, 255;
        --color-dark: #1D1D1F;
        --sale-bg-rgb: 192, 62, 53;;
        --sale-color: #fff;
        --responsive-rate: ((100vw - 575px) / (1410 - 575));
        --transition: 0.3s var(--ease-in);
        --ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
        --ease-in: cubic-bezier(0.4, 0, 0.2, 1);
        --dur-in: 0.5s;
        --dur-out: 0.48s;
        --duration-short: 0.2s;
        --duration-long: 0.5s;
        --transition-drawer: all var(--dur-out) var(--ease-out);
        --overlay-bg: rgba(0, 0, 0, 0.60);
        --responsive-ratio: 0.7;
        --gap: 2rem;
        --accent-color-second: #f5f5f5;
        --border-color: #E5E5E5;
        --section-spacing: 6rem;
        --product-spacing-top: 2rem;
        --product-name-size: 1.6rem;
        --product-price-size: 1.6rem;
        --product-item-spacing: 4rem;
        --shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
        --header-spacing-bottom: calc(var(--sp) * 6);
        --swiper-navigation-color: var(--color-dark);
        --swiper-navigation-sides-offset: var(--sp-6);
        --sp: 4px;
        --sp-2: calc(var(--sp) * 2);
        --sp-3: calc(var(--sp) * 3);
        --sp-4: calc(var(--sp) * 4);
        --sp-5: calc(var(--sp) * 5);
        --sp-6: calc(var(--sp) * 6);
        --sp-7: calc(var(--sp) * 7);
        --sp-8: calc(var(--sp) * 8);
        --sp-9: calc(var(--sp) * 9);
        --sp-10: calc(var(--sp) * 10);
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      html {
        font-size: 62.5%;
        margin: 0;
        padding: 0;
        border: 0;
        height: 100%;
        vertical-align: baseline;
        box-sizing: border-box;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
      }
      body {
        min-height: 100vh;
        margin: 0;
        font-size: var(--body-font-size, 1.4rem);
        font-family: var(--body-font-family);
        font-style: var(--body-font-style);
        font-weight: var(--body-font-weight);
        line-height: var(--body-line-height, 1.625);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-text-size-adjust: 100%;
        text-rendering: optimizeSpeed;
        overflow-wrap: break-word;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
      }
      #MainContent{
        -webkit-flex-grow: 1;
        flex-grow: 1;
      }
      @media (min-width: 425px) {
        :root{
          --btn-padding-x: 3rem;
        }
      }
      @media (min-width: 1025px) {
        :root{
          --btn-padding-y: 1.5rem;
          --btn-padding-x: 3rem;
          --input-height: 5.2rem;
          --header-spacing-bottom: 4rem;
        }
      }
      @media (max-width: 767.98px) {
        :root {
          --img-rounded: min(20px, 15px);
          --rounded-thumbs: 8px;
        }
        *:not(.btn-primary, .btn-outline),
        *:not(.btn-primary, .btn-outline)::before,
        *:not(.btn-primary, .btn-outline)::after {
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        }
        .not-highlight-tap {
          -webkit-tap-highlight-color: transparent;
        }
      }