/*
 * Type scale for the storefront.
 * Desktop ≥992px, tablet ≤991px, phone ≤767px.
 * Loaded after master.css so these sizes win.
 */
:root {
    --fs-2xs: 12px;
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 26px;
    --fs-3xl: 30px;
    --fs-4xl: 34px;
    --fs-card: 14px;
}

@media (max-width: 991px) {
    :root {
        --fs-2xs: 12px;
        --fs-xs: 12px;
        --fs-sm: 13px;
        --fs-base: 15px;
        --fs-md: 15px;
        --fs-lg: 16px;
        --fs-xl: 18px;
        --fs-2xl: 22px;
        --fs-3xl: 24px;
        --fs-4xl: 26px;
        --fs-card: 13px;
    }
}

@media (max-width: 767px) {
    :root {
        --fs-base: 14px;
        --fs-md: 14px;
        --fs-lg: 15px;
        --fs-xl: 17px;
        --fs-2xl: 20px;
        --fs-3xl: 22px;
        --fs-4xl: 24px;
        --fs-card: 13px;
    }
}

body {
    font-size: var(--fs-base);
}

h1, .h1 { font-size: var(--fs-4xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-md); }
h6, .h6 { font-size: var(--fs-sm); }

.header-top-banner {
    font-size: var(--fs-lg);
}

nav .navigation-top > ul > li {
    font-size: var(--fs-xs);
}

nav .navigation-main .floating-menu > ul > li > a {
    font-size: var(--fs-sm);
}

.vp-special-benefits .scrollMode {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    width: 100%;
}

.vp-special-benefits .scrollMode > a {
    flex: 1 0 auto;
    min-width: max-content;
    display: flex;
}

.vp-special-benefits .vp-item {
    float: none;
    width: auto;
    min-width: 100%;
    box-sizing: border-box;
}

.vp-special-benefits .vp-item .vp-inner {
    padding-right: 60px;
    white-space: nowrap;
}

.vp-special-benefits .vp-item i {
    width: 40px;
    height: 50px;
    font-size: 45px;
    line-height: 45px;
}

.vp-special-benefits .vp-item .vp-title,
.vp-special-benefits .vp-item .vp-highlight,
.vp-special-benefits .vp-item .vp-description {
    white-space: nowrap;
}

.vp-special-benefits .vp-item .vp-title {
    font-size: 15px;
    line-height: 1.5;
}

.vp-special-benefits .vp-item .vp-description {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

@media (max-width: 991px) {
    .vp-special-benefits .vp-item {
        padding: 7px 0 6px;
        margin-left: 6px;
        border-radius: 10px !important;
    }

    .vp-special-benefits .vp-item .vp-inner {
        padding-right: 34px;
        padding-left: 8px;
    }

    .vp-special-benefits .vp-item i {
        width: 24px;
        height: 28px;
        font-size: 24px;
        line-height: 28px;
    }

    .vp-special-benefits .vp-item .vp-title {
        font-size: 12px;
        line-height: 1.35;
    }

    .vp-special-benefits .vp-item .vp-description {
        font-size: 10px;
        line-height: 1.35;
    }
}

.products .text,
.products article .text > div > span {
    font-size: var(--fs-sm);
}

.products article .text .title {
    font-size: var(--fs-card);
}

.products article .text sub,
.products article .text sup,
del {
    font-size: var(--fs-xs);
}

.product h1.title {
    font-size: var(--fs-3xl);
}

header.product-header .title,
.incredible-offers .product-header .title,
.incredible-snapppay .product-header .title {
    font-size: var(--fs-2xl);
}

h4.panel-title,
.c-info-page__cat,
.c-info-page__cats {
    font-size: var(--fs-md);
}

a.c-info-page__show-more,
.c-new-about-us__goal-card-text,
.inc-bottom-menu a span {
    font-size: var(--fs-xs);
}

.form-control,
input,
select,
textarea {
    font-size: 16px;
}