@import url(base.css);
@import url(layout.css);
@import url(modules.css);
@import url(state.css);
@import url(media.css);
@import url(themes/theme-shope.css);

:root {

    --device-pixel-ratio: 1;
    --menu-bar-height: calc(55px * var(--device-pixel-ratio));
    --search-bar-height: calc(60px * var(--device-pixel-ratio));

    --button-height: calc( 48px * var(--device-pixel-ratio));
    --button-pad: calc( 32px * var(--device-pixel-ratio));
    --default-font-size: calc(16px * var(--device-pixel-ratio));


    /*
    minWidth = 20rem
    maxWidth = 90rem
    */

    --font--headline--lg: calc(clamp(4rem, 3.429rem + 2.857vw, 6rem) * var(--device-pixel-ratio));
    --font--headline: calc(clamp(3rem, 2.714rem + 1.429vw, 4rem) * var(--device-pixel-ratio));
    --font--title: calc(clamp(1.4rem, 1.3rem + 0.5vw, 1.75rem) * var(--device-pixel-ratio));
    --font--paragraph: calc(clamp(1rem, 0.929rem + 0.357vw, 1.25rem) * var(--device-pixel-ratio));
    --font--info-text: calc(clamp(0.75rem, 0.679rem + 0.357vw, 1rem) * var(--device-pixel-ratio));

    --default-padding: calc(16px * var(--device-pixel-ratio));
    --col-pad: var(--default-padding);
    --main-pad: calc(var(--col-pad) * 8);
    --full-pad: calc(var(--main-pad) + var(--col-pad));
    --section-padding: calc(48px * var(--device-pixel-ratio));
    --max-width: 100vw;
    /* max-width: calc(1400px * var(--device-pixel-ratio))*/
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
    :root {
        --device-pixel-ratio: 1;

    }


}

@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (min-device-pixel-ratio: 3),
only screen and (min-resolution: 288dpi),
only screen and (min-resolution: 3dppx) {
    :root {
        --device-pixel-ratio: 1;

    }


}

@media
only screen and (-webkit-min-device-pixel-ratio: 4),
only screen and (min--moz-device-pixel-ratio: 4),
only screen and (-o-min-device-pixel-ratio: 4/1),
only screen and (min-device-pixel-ratio: 4),
only screen and (min-resolution: 384dpi),
only screen and (min-resolution: 4dppx) {
    :root {
        --device-pixel-ratio: 1;

    }


}

/* OVERRIDE FOR FIREFOX, EDGE

@-moz-document url-prefix() {
    :root {
        --device-pixel-ratio: 1;
    }
}
*/