:root {
    /**
    * ---------------------------------------------------------------------
    * SPACING VARIABLES
    *
    * We are using a spacing inspired from frameworks like Tailwind CSS.
    * ---------------------------------------------------------------------
    */
    --spacing-0-5: 0.125rem; /* 2px */
    --spacing-1: 0.25rem; /* 4px */
    --spacing-1-5: 0.375rem; /* 6px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-2-5: 0.625rem; /* 10px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-3-5: 0.875rem; /* 14px */
    --spacing-4: 1rem; /* 16px */
    --spacing-4-5: 1.125rem; /* 18px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-5-5: 1.375rem; /* 22px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-6-5: 1.625rem; /* 26px */
    --spacing-7: 1.75rem; /* 28px */
    --spacing-7-5: 1.875rem; /* 30px */
    --spacing-8: 2rem; /* 32px */
    --spacing-8-5: 2.125rem; /* 34px */
    --spacing-9: 2.25rem; /* 36px */
    --spacing-9-5: 2.375rem; /* 38px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-11: 2.75rem; /* 44px */
    --spacing-12: 3rem; /* 48px */
    --spacing-12-5: 3.125rem; /* 50px */
    --spacing-14: 3.5rem; /* 56px */
    --spacing-16: 4rem; /* 64px */
    --spacing-18: 4.5rem; /* 72px */
    --spacing-20: 5rem; /* 80px */
    --spacing-24: 6rem; /* 96px */
    --spacing-28: 7rem; /* 112px */
    --spacing-32: 8rem; /* 128px */
    --spacing-36: 9rem; /* 144px */
    --spacing-40: 10rem; /* 160px */
    --spacing-44: 11rem; /* 176px */
    --spacing-48: 12rem; /* 192px */
    --spacing-52: 13rem; /* 208px */
    --spacing-56: 14rem; /* 224px */
    --spacing-60: 15rem; /* 240px */
    --spacing-64: 16rem; /* 256px */
    --spacing-72: 18rem; /* 288px */
    --spacing-80: 20rem; /* 320px */
    --spacing-96: 24rem; /* 384px */

    /* Container */
    --container-max-width: 1600px;
    --container-narrow-max-width: 1350px;
    --container-gutter: var(--spacing-5);
    --section-outer-spacing-block: var(--spacing-6);
    --section-inner-max-spacing-block: var(--spacing-8);
    --section-inner-spacing-inline: var(--container-gutter);
    --section-stack-spacing-block: var(--spacing-6);

    /* Grid gutter */
    --grid-gutter: var(--spacing-8);

    /* Product list settings */
    --product-list-row-gap: var(--spacing-8);
    --product-list-column-gap: var(--grid-gutter);

    /* Form settings */
    --input-gap: var(--spacing-2);
    --input-height: 2.625rem;
    --input-padding-inline: var(--spacing-4);

    /* Other sizes */
    --sticky-area-height: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px) + var(--sticky-header-enabled, 0) * var(--header-height, 0px));

    /* RTL support */
    --transform-logical-flip: 1;
    --transform-origin-start: left;
    --transform-origin-end: right;

    /**
    * ---------------------------------------------------------------------
    * TYPOGRAPHY
    * ---------------------------------------------------------------------
    */

    /* Font properties */
    --heading-font-family: 'Play', sans-serif;  /* 500 weight */
    --heading-font-family-bold: 'Play', sans-serif;  /* 700 weight */
    --heading-font-family-heavy: 'Play', sans-serif; 	  /* 900 weight */
    --heading-font-weight: 'normal';
    --heading-font-style: 'normal';
    --heading-text-transform: 'none';
    --heading-letter-spacing: -0.02em;

    --text-font-family: 'Play', sans-serif;  /* 400 weight */
    --text-font-family-thin: 'Play', sans-serif; /* 300 weight */
    --text-font-weight: 400;
    --text-font-style: 'normal';
    --text-letter-spacing: '0.28px';


    /* Font sizes */
    --text-h0: 3rem;  /* 48px */
    --text-h1: 2.1875rem;  /* 35px */
    --text-h2: 1.75rem; /* 28px */
    --text-h3: 1.5625rem; /* 25px */;
    --text-h4: 1.25rem; /* 20px */;
    --text-h5: 1rem; /* 16px */;
    --text-h6: 1rem; /* 16px */;

    --text-sub-lg: 1.625rem; /* 26px */;
    --text-sub: 1.25rem; /* 20px */;
    --text-sub-sm: 1rem; /* 16px */;

    --text-xxl: 2rem; /* 33px */;
    --text-xl: 1.625rem; /* 26px */;
    --text-lg: 1.5rem; /* 24px */
    --text-md: 1.25rem; /* 20px */
    --text-base: 1.65rem; /* 18px */;
    --text-sm: 1.5rem; /* 16px */
    --text-xs: 0.875rem; /*14px */
    --text-xxs: 0.75rem; /* 12px */

    --text-button-lg: 1.5rem; /* 24px */
    --text-button: 1.25rem; /* 20px */;
    --text-button-sm: 1rem; /* 16px */
    --text-button-xs: 0.875rem; /* 14px */

    /**
    * ---------------------------------------------------------------------
    * COLORS
    * ---------------------------------------------------------------------
    */

    /* Brand colors */

    --white: 255 255 255; /* #fff */
    --smoke: 241 241 241; /* #F1F1F1 */
    --light-smoke: 250 250 250; /* #FAFAFA */
    --empress: 74 74 74; /* #4A4A4A */
    --black: 0 0 0; /* #000 */
    --yellow: 241 196 24; /* #F1C418 */

    --background: 36 36 36; /* #242424 */
    --success: 191 241 211; /* #BFF1D3 */
    --warning: 253 235 207; /* #FDEBCF */
    --error: 182 0 0; /* #FF4D4D */

    --accent: var(--empress);
    --text-primary: var(--empress);
    --background-primary: var(--background);
    --dialog-background: var(--white);
    --border-color: var(--text-color, var(--text-primary)) / 0.12;

    /* Button colors */
    --button-background-primary: var(--empress);
    --button-text-primary: var(--white);
    --button-background-secondary: var(--yellow);
    --button-text-secondary: var(--black);

    /* Status colors */
    --success-background: var(--success);
    --success-text: var(--text-primary);
    --warning-background: var(--warning);
    --warning-text: var(--text-primary);
    --error-background: var(--error);
    --error-text: var(--white);

    /* Product colors */
    --on-sale-text: var(--black);
    --on-sale-badge-background: var(--yellow);
    --on-sale-badge-text: var(--black);
    --sold-out-badge-background: var(--empress);
    --sold-out-badge-text: var(--white);
    --primary-badge-background: var(--yellow);
    --primary-badge-text: var(--black);
    --star-color: var(--black);
    --product-card-background: var(--background);
    --product-card-text: var(--primary-text);

    /* Header colors */
    --header-background: var(--white);
    --header-text: var(--text-primary);

    /* Footer colors */
    --footer-background: var(--black);
    --footer-text: var(--white);

    /* Rounded variables (used for border radius) */
    --rounded: 10px;
    --rounded-xs: calc(var(--rounded) - 6px);
    --rounded-sm: calc(var(--rounded) - 3px);
    --rounded-lg: calc(var(--rounded) + 3px);
    --rounded-full: 9999px;


    --rounded-button: 0.0rem;
    --rounded-input: 0.0rem;

    /* Box shadow */
    --shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.0);
    --shadow: 0 5px 15px rgb(var(--text-primary) / 0.0);
    --shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.0);
    --shadow-block: -32px -32px 0px rgb(var(--text-primary) / 0.0);

    /**
    * ---------------------------------------------------------------------
    * OTHER
    * ---------------------------------------------------------------------
    */

    --cursor-close-svg-url: url(//www.masterdynamic.com/cdn/shop/t/209/assets/cursor-close.svg?v=147174565022153725511753811181);
    --cursor-zoom-in-svg-url: url(//www.masterdynamic.com/cdn/shop/t/209/assets/cursor-zoom-in.svg?v=154953035094101115921753811181);
    --cursor-zoom-out-svg-url: url(//www.masterdynamic.com/cdn/shop/t/209/assets/cursor-zoom-out.svg?v=16155520337305705181753811181);
    --checkmark-svg-url: url(//www.masterdynamic.com/cdn/shop/t/209/assets/checkmark.svg?v=77552481021870063511753811181);
}

[dir="rtl"]:root {
    /* RTL support */
    --transform-logical-flip: -1;
    --transform-origin-start: right;
    --transform-origin-end: left;
}

@media screen and (min-width: 700px) {
    :root {
    /* Spacing */
    --container-gutter: 2rem;
    --section-outer-spacing-block: var(--spacing-6);
    --section-inner-max-spacing-block: var(--spacing-10);
    --section-inner-spacing-inline: var(--spacing-10);
    --section-stack-spacing-block: var(--spacing-6);

    /* Grid gutter */
    --grid-gutter: var(--spacing-6);

    /* Product list settings */
    --product-list-row-gap: var(--spacing-12);

    /* Form settings */
    --input-gap: 1rem;
    --input-height: 3.125rem;
    --input-padding-inline: var(--spacing-5);
    }
}

@media screen and (min-width: 1000px) {
    :root {
    /* Spacing settings */
    --container-gutter: var(--spacing-12);
    --section-outer-spacing-block: var(--spacing-6);
    --section-inner-max-spacing-block: var(--spacing-12);
    --section-inner-spacing-inline: var(--spacing-14);
    --section-stack-spacing-block: var(--spacing-6);

    /* Font sizes */
    --text-xxl: 2.5rem; /* 40px */;

    --text-h0: 4rem;  /* 64px */
    --text-h1: 3.25rem;  /* 52px */
    --text-h2: 2.563rem; /* 41px */
    --text-h3: 2rem; /* 32px */;
    --text-h4: 1.625rem; /* 26px */;
    --text-h5: 1.25rem; /* 20px */;
    --text-h6: 1.125rem; /* 20px */;
    }
}

@media screen and (min-width: 1220px) {
    :root {
        /* Spacing settings */
    --container-gutter: var(--spacing-12);
    --section-outer-spacing-block: var(--spacing-6);
    --section-inner-max-spacing-block: var(--spacing-12);
    --section-inner-spacing-inline: var(--spacing-14);
    --section-stack-spacing-block: var(--spacing-6);
    }
}

@media screen and (min-width: 1400px) {
    :root {
    --section-outer-spacing-block: var(--spacing-6);
    --section-inner-max-spacing-block: var(--spacing-14);
    --section-inner-spacing-inline: var(--spacing-16);
    }
}

@media screen and (min-width: 1600px) {
    :root {
    --section-outer-spacing-block: var(--spacing-6);
    --section-inner-max-spacing-block: var(--spacing-16);
    --section-inner-spacing-inline: var(--spacing-18);
    }
}

/**
* ---------------------------------------------------------------------
* LIQUID DEPENDANT CSS
*
* Our main CSS is Liquid free, but some very specific features depend on
* theme settings, so we have them here
* ---------------------------------------------------------------------
*/
@media screen and (pointer: fine) {
    .button.button--compare:not([disabled]):hover, .btn.btn--compare:not([disabled]):hover,
    .button.button--outline:not([disabled]):hover, .btn.btn--outline:not([disabled]):hover,
    .button.button--outline-dark:not([disabled]):hover, .btn.btn--outline-dark:not([disabled]):hover{
        --button-background-opacity: 0.85;
        border: 2px solid;
    }

    .button:not([disabled]):hover, .btn:not([disabled]):hover, .shopify-payment-button__button--unbranded:not([disabled]):hover {
        --button-background-opacity: 0.85;
        border: 2px solid transparent;
    }

    .button--subdued:not([disabled]):hover {
        --button-background: var(--text-color) / .05 !important;
    }
}