/*
* Theme Name: Teema
* Author: Storybook OÜ
* Text Domain: teema
* Version: 1.0.88
*/

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url(./assets/fonts/material-symbols-rounded.woff2) format('woff2');
}

@font-face {
    font-family: 'Material Symbols Rounded Filled';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(./assets/fonts/material-symbols-rounded-filled.woff2) format('woff2');
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-symbols-rounded.-filled {
    font-family: 'Material Symbols Rounded Filled';
}

section, footer {
    position: relative;
}

.page-container {
    container-type: inline-size;
    container-name: page-container;

    font-family: var(--global-font-family, 'Montserrat', sans-serif);

    &::before {
        content: '';
        position: fixed;
        width: 100%;
        height: 100%;
        background: var(--page-background, #FFFFFFFF);
        z-index: -1;
    }

    & :is(h1, h2, h3, h4, h5, h6) {
        font-family: var(--heading-font-family, --global-font-family, 'Montserrat', sans-serif);
    }
}

.navbar-nav .nav-link i {
    margin-right: 5px;
    font-size: 1.2em;
}

.editor_button {
    transition: 0.3s all ease-in-out;
    background-color: var(--global-color-0);
    color: #fff;
    border: 2px solid var(--global-color-0);
    border-radius: 0.3rem;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 1.2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 1px;
    text-decoration: none;
}

:is(.services-btn, .hero-btn, .locations-target-button, .about-us-btn, .blog-post-article-btn, .gallery-btn, .missionBtn, .view-all-button, .template3-product-button, .form-submit-btn, .custom-block-btn):has(.btn-icon) {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.btn-icon {
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
}

.btn-icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
}

.nav-link {
    color: var(--global-color-0);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--global-color-1);
}

.related.products {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 25px;
}

input#featuredProducts-limit.slider::before {
    position: relative;
}

.scrolltop-wrap {
    position: sticky;
    bottom: 3.5%;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    z-index: 601;
}

.scrolltop-wrap .scrolltop-btn {
    font-family: 'Material Symbols Rounded';
    display: none;
    position: absolute;
    bottom: 0;
    right: 3.5%;
    width: 52px;
    height: 36px;
    padding: 0 12px;
    background: var(--global-color-2, #ffb300);
    border: 2px solid color-mix(in srgb, var(--global-color-0, #1565c0) 18%, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    color: var(--global-color-0, #1565c0);
    text-decoration: none;
    cursor: pointer;
    z-index: 600;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(8px);
    transition: transform 200ms cubic-bezier(.2,.9,.3,1), opacity 160ms ease, box-shadow 160ms ease;
    pointer-events: auto;

    &.show {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }
    &:hover,
    &:focus {
        transform: translateY(0) scale(1.03);
        box-shadow: 0 10px 28px rgba(16, 24, 40, 0.24);
    }
}

.swiper-pagination-bullet-active {
    background-color: var(--global-color-1) !important;
}
.swiper-pagination-bullet {
    border: 1px solid #cccccccc;
    background-color: var(--global-color-0) !important;
}

& :is(.swiper-button-next, .swiper-button-prev) {
    --swiper-navigation-size: 1.25rem;
    color: var(--global-color-1) !important;
}
@container page-container (min-width: 768px) {
    :is(.swiper-button-next, .swiper-button-prev) {
        --swiper-navigation-size: 1.5rem;
    }
}
@container page-container (min-width: 992px) {
    :is(.swiper-button-next, .swiper-button-prev) {
        --swiper-navigation-size: 1.75rem;
    }
}

.cookie-consent {
    --cookie-consent-color-background: var(--global-color-0);
    --cookie-consent-color-on-background: var(--global-color-2);
    --cookie-consent-color-button-accept-all: var(--global-color-3);
    --cookie-consent-color-on-button-accept-all: var(--global-color-0);
    --cookie-consent-font-weight-light: 400;
    --cookie-consent-font-weight-regular: 500;
    --cookie-consent-font-weight-semibold: 600;
    --cookie-consent-font-weight-bold: 700;
    --cookie-consent-font-size: 1rem;
}
.eyebrow {
    display: flex;
    box-sizing: border-box;
    width: var(--eyebrow-dimensions-mobile-width, auto);
    min-width: var(--eyebrow-dimensions-mobile-minWidth, auto);
    max-width: var(--eyebrow-dimensions-mobile-maxWidth, 100%);
    flex-direction: var(--eyebrow-flexbox-mobile-flexDirection, row);
    flex-wrap: var(--eyebrow-flexbox-mobile-flexWrap, nowrap);
    justify-content: var(--eyebrow-flexbox-mobile-justifyContent, center);
    align-items: var(--eyebrow-flexbox-mobile-alignItems, center);
    align-content: var(--eyebrow-flexbox-mobile-alignContent, center);
    gap: calc(var(--eyebrow-flexbox-mobile-rowGap, 0) * 1rem) calc(var(--eyebrow-flexbox-mobile-columnGap, 0.5) * 1rem);
    padding: calc(var(--eyebrow-padding-mobile-top, 0) * 1rem) calc(var(--eyebrow-padding-mobile-right, 0) * 1rem) calc(var(--eyebrow-padding-mobile-bottom, 0) * 1rem) calc(var(--eyebrow-padding-mobile-left, 0) * 1rem);
    margin: var(--eyebrow-margin-mobile-top, 0) var(--eyebrow-margin-mobile-right, 0) var(--eyebrow-margin-mobile-bottom, 0) var(--eyebrow-margin-mobile-left, 0);
    border-style: var(--eyebrow-border-mobile-top-style, solid) var(--eyebrow-border-mobile-right-style, solid) var(--eyebrow-border-mobile-bottom-style, solid) var(--eyebrow-border-mobile-left-style, solid);
    border-width: calc(var(--eyebrow-border-mobile-top-width, 0) * 1rem) calc(var(--eyebrow-border-mobile-right-width, 0) * 1rem) calc(var(--eyebrow-border-mobile-bottom-width, 0) * 1rem) calc(var(--eyebrow-border-mobile-left-width, 0) * 1rem);
    border-color: var(--eyebrow-border-mobile-top-color, transparent) var(--eyebrow-border-mobile-right-color, transparent) var(--eyebrow-border-mobile-bottom-color, transparent) var(--eyebrow-border-mobile-left-color, transparent);
    border-radius: calc(var(--eyebrow-border-mobile-left-radius, 0) * 1rem) calc(var(--eyebrow-border-mobile-top-radius, 0) * 1rem) calc(var(--eyebrow-border-mobile-right-radius, 0) * 1rem) calc(var(--eyebrow-border-mobile-bottom-radius, 0) * 1rem);
    background: var(--eyebrow-background-mobile-color, transparent);
    box-shadow: var(--eyebrow-boxShadow-mobile, none);
}

.eyebrow-icon {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--eyebrowIcon-font-mobile-textColor, currentColor);
    font-size: calc(var(--eyebrowIcon-font-mobile-fontSize, 1) * 1rem);
    line-height: var(--eyebrowIcon-font-mobile-lineHeight, 1);
    margin: var(--eyebrowIcon-margin-mobile-top, 0) var(--eyebrowIcon-margin-mobile-right, 0) var(--eyebrowIcon-margin-mobile-bottom, 0) var(--eyebrowIcon-margin-mobile-left, 0);
    padding: calc(var(--eyebrowIcon-padding-mobile-top, 0) * 1rem) calc(var(--eyebrowIcon-padding-mobile-right, 0) * 1rem) calc(var(--eyebrowIcon-padding-mobile-bottom, 0) * 1rem) calc(var(--eyebrowIcon-padding-mobile-left, 0) * 1rem);
    background: var(--eyebrowIcon-background-mobile-color, transparent);
    border-style: var(--eyebrowIcon-border-mobile-top-style, solid) var(--eyebrowIcon-border-mobile-right-style, solid) var(--eyebrowIcon-border-mobile-bottom-style, solid) var(--eyebrowIcon-border-mobile-left-style, solid);
    border-width: calc(var(--eyebrowIcon-border-mobile-top-width, 0) * 1rem) calc(var(--eyebrowIcon-border-mobile-right-width, 0) * 1rem) calc(var(--eyebrowIcon-border-mobile-bottom-width, 0) * 1rem) calc(var(--eyebrowIcon-border-mobile-left-width, 0) * 1rem);
    border-color: var(--eyebrowIcon-border-mobile-top-color, transparent) var(--eyebrowIcon-border-mobile-right-color, transparent) var(--eyebrowIcon-border-mobile-bottom-color, transparent) var(--eyebrowIcon-border-mobile-left-color, transparent);
    border-radius: calc(var(--eyebrowIcon-border-mobile-left-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-mobile-top-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-mobile-right-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-mobile-bottom-radius, 0) * 1rem);
}

.eyebrow-icon-material {
    font-size: inherit;
    line-height: 1;
}

.eyebrow-icon-img {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    flex-shrink: 0;
}

.eyebrow-text {
    color: var(--eyebrowText-font-mobile-textColor, currentColor);
    font-size: calc(var(--eyebrowText-font-mobile-fontSize, 0.875) * 1rem);
    font-weight: var(--eyebrowText-font-mobile-fontWeight, 500);
    line-height: var(--eyebrowText-font-mobile-lineHeight, 1);
    text-align: var(--eyebrowText-font-mobile-textAlign, center);
    font-family: var(--eyebrowText-font-mobile-fontFamily, var(--global-font-family));
    text-transform: var(--eyebrowText-font-mobile-textTransform, none);
    padding: calc(var(--eyebrowText-padding-mobile-top, 0) * 1rem) calc(var(--eyebrowText-padding-mobile-right, 0) * 1rem) calc(var(--eyebrowText-padding-mobile-bottom, 0) * 1rem) calc(var(--eyebrowText-padding-mobile-left, 0) * 1rem);
    margin: var(--eyebrowText-margin-mobile-top, 0) var(--eyebrowText-margin-mobile-right, 0) var(--eyebrowText-margin-mobile-bottom, 0) var(--eyebrowText-margin-mobile-left, 0);
    border-style: var(--eyebrowText-border-mobile-top-style, solid) var(--eyebrowText-border-mobile-right-style, solid) var(--eyebrowText-border-mobile-bottom-style, solid) var(--eyebrowText-border-mobile-left-style, solid);
    border-width: calc(var(--eyebrowText-border-mobile-top-width, 0) * 1rem) calc(var(--eyebrowText-border-mobile-right-width, 0) * 1rem) calc(var(--eyebrowText-border-mobile-bottom-width, 0) * 1rem) calc(var(--eyebrowText-border-mobile-left-width, 0) * 1rem);
    border-color: var(--eyebrowText-border-mobile-top-color, transparent) var(--eyebrowText-border-mobile-right-color, transparent) var(--eyebrowText-border-mobile-bottom-color, transparent) var(--eyebrowText-border-mobile-left-color, transparent);
    border-radius: calc(var(--eyebrowText-border-mobile-left-radius, 0) * 1rem) calc(var(--eyebrowText-border-mobile-top-radius, 0) * 1rem) calc(var(--eyebrowText-border-mobile-right-radius, 0) * 1rem) calc(var(--eyebrowText-border-mobile-bottom-radius, 0) * 1rem);
    background: var(--eyebrowText-background-mobile-color, transparent);
}

@container page-container (min-width: 768px) {
    .eyebrow {
        width: var(--eyebrow-dimensions-tablet-width, auto);
        min-width: var(--eyebrow-dimensions-tablet-minWidth, auto);
        max-width: var(--eyebrow-dimensions-tablet-maxWidth, 100%);
        flex-direction: var(--eyebrow-flexbox-tablet-flexDirection, row);
        flex-wrap: var(--eyebrow-flexbox-tablet-flexWrap, nowrap);
        justify-content: var(--eyebrow-flexbox-tablet-justifyContent, center);
        align-items: var(--eyebrow-flexbox-tablet-alignItems, center);
        align-content: var(--eyebrow-flexbox-tablet-alignContent, center);
        gap: calc(var(--eyebrow-flexbox-tablet-rowGap, 0) * 1rem) calc(var(--eyebrow-flexbox-tablet-columnGap, 0.5) * 1rem);
        padding: calc(var(--eyebrow-padding-tablet-top, 0) * 1rem) calc(var(--eyebrow-padding-tablet-right, 0) * 1rem) calc(var(--eyebrow-padding-tablet-bottom, 0) * 1rem) calc(var(--eyebrow-padding-tablet-left, 0) * 1rem);
        margin: var(--eyebrow-margin-tablet-top, 0) var(--eyebrow-margin-tablet-right, 0) var(--eyebrow-margin-tablet-bottom, 0) var(--eyebrow-margin-tablet-left, 0);
        border-width: calc(var(--eyebrow-border-tablet-top-width, 0) * 1rem) calc(var(--eyebrow-border-tablet-right-width, 0) * 1rem) calc(var(--eyebrow-border-tablet-bottom-width, 0) * 1rem) calc(var(--eyebrow-border-tablet-left-width, 0) * 1rem);
        border-radius: calc(var(--eyebrow-border-tablet-left-radius, 0) * 1rem) calc(var(--eyebrow-border-tablet-top-radius, 0) * 1rem) calc(var(--eyebrow-border-tablet-right-radius, 0) * 1rem) calc(var(--eyebrow-border-tablet-bottom-radius, 0) * 1rem);
    }

    .eyebrow-icon {
        font-size: calc(var(--eyebrowIcon-font-tablet-fontSize, 1) * 1rem);
        line-height: var(--eyebrowIcon-font-tablet-lineHeight, 1);
        margin: var(--eyebrowIcon-margin-tablet-top, 0) var(--eyebrowIcon-margin-tablet-right, 0) var(--eyebrowIcon-margin-tablet-bottom, 0) var(--eyebrowIcon-margin-tablet-left, 0);
        padding: calc(var(--eyebrowIcon-padding-tablet-top, 0) * 1rem) calc(var(--eyebrowIcon-padding-tablet-right, 0) * 1rem) calc(var(--eyebrowIcon-padding-tablet-bottom, 0) * 1rem) calc(var(--eyebrowIcon-padding-tablet-left, 0) * 1rem);
        border-width: calc(var(--eyebrowIcon-border-tablet-top-width, 0) * 1rem) calc(var(--eyebrowIcon-border-tablet-right-width, 0) * 1rem) calc(var(--eyebrowIcon-border-tablet-bottom-width, 0) * 1rem) calc(var(--eyebrowIcon-border-tablet-left-width, 0) * 1rem);
        border-radius: calc(var(--eyebrowIcon-border-tablet-left-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-tablet-top-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-tablet-right-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-tablet-bottom-radius, 0) * 1rem);
    }

    .eyebrow-text {
        font-size: calc(var(--eyebrowText-font-tablet-fontSize, 0.875) * 1rem);
        line-height: var(--eyebrowText-font-tablet-lineHeight, 1);
        text-align: var(--eyebrowText-font-tablet-textAlign, center);
        padding: calc(var(--eyebrowText-padding-tablet-top, 0) * 1rem) calc(var(--eyebrowText-padding-tablet-right, 0) * 1rem) calc(var(--eyebrowText-padding-tablet-bottom, 0) * 1rem) calc(var(--eyebrowText-padding-tablet-left, 0) * 1rem);
        margin: var(--eyebrowText-margin-tablet-top, 0) var(--eyebrowText-margin-tablet-right, 0) var(--eyebrowText-margin-tablet-bottom, 0) var(--eyebrowText-margin-tablet-left, 0);
        border-width: calc(var(--eyebrowText-border-tablet-top-width, 0) * 1rem) calc(var(--eyebrowText-border-tablet-right-width, 0) * 1rem) calc(var(--eyebrowText-border-tablet-bottom-width, 0) * 1rem) calc(var(--eyebrowText-border-tablet-left-width, 0) * 1rem);
        border-radius: calc(var(--eyebrowText-border-tablet-left-radius, 0) * 1rem) calc(var(--eyebrowText-border-tablet-top-radius, 0) * 1rem) calc(var(--eyebrowText-border-tablet-right-radius, 0) * 1rem) calc(var(--eyebrowText-border-tablet-bottom-radius, 0) * 1rem);
    }
}

@container page-container (min-width: 992px) {
    .eyebrow {
        width: var(--eyebrow-dimensions-desktop-width, auto);
        min-width: var(--eyebrow-dimensions-desktop-minWidth, auto);
        max-width: var(--eyebrow-dimensions-desktop-maxWidth, 100%);
        flex-direction: var(--eyebrow-flexbox-desktop-flexDirection, row);
        flex-wrap: var(--eyebrow-flexbox-desktop-flexWrap, nowrap);
        justify-content: var(--eyebrow-flexbox-desktop-justifyContent, center);
        align-items: var(--eyebrow-flexbox-desktop-alignItems, center);
        align-content: var(--eyebrow-flexbox-desktop-alignContent, center);
        gap: calc(var(--eyebrow-flexbox-desktop-rowGap, 0) * 1rem) calc(var(--eyebrow-flexbox-desktop-columnGap, 0.5) * 1rem);
        padding: calc(var(--eyebrow-padding-desktop-top, 0) * 1rem) calc(var(--eyebrow-padding-desktop-right, 0) * 1rem) calc(var(--eyebrow-padding-desktop-bottom, 0) * 1rem) calc(var(--eyebrow-padding-desktop-left, 0) * 1rem);
        margin: var(--eyebrow-margin-desktop-top, 0) var(--eyebrow-margin-desktop-right, 0) var(--eyebrow-margin-desktop-bottom, 0) var(--eyebrow-margin-desktop-left, 0);
        border-width: calc(var(--eyebrow-border-desktop-top-width, 0) * 1rem) calc(var(--eyebrow-border-desktop-right-width, 0) * 1rem) calc(var(--eyebrow-border-desktop-bottom-width, 0) * 1rem) calc(var(--eyebrow-border-desktop-left-width, 0) * 1rem);
        border-radius: calc(var(--eyebrow-border-desktop-left-radius, 0) * 1rem) calc(var(--eyebrow-border-desktop-top-radius, 0) * 1rem) calc(var(--eyebrow-border-desktop-right-radius, 0) * 1rem) calc(var(--eyebrow-border-desktop-bottom-radius, 0) * 1rem);
    }

    .eyebrow-icon {
        font-size: calc(var(--eyebrowIcon-font-desktop-fontSize, 1) * 1rem);
        line-height: var(--eyebrowIcon-font-desktop-lineHeight, 1);
        margin: var(--eyebrowIcon-margin-desktop-top, 0) var(--eyebrowIcon-margin-desktop-right, 0) var(--eyebrowIcon-margin-desktop-bottom, 0) var(--eyebrowIcon-margin-desktop-left, 0);
        padding: calc(var(--eyebrowIcon-padding-desktop-top, 0) * 1rem) calc(var(--eyebrowIcon-padding-desktop-right, 0) * 1rem) calc(var(--eyebrowIcon-padding-desktop-bottom, 0) * 1rem) calc(var(--eyebrowIcon-padding-desktop-left, 0) * 1rem);
        border-width: calc(var(--eyebrowIcon-border-desktop-top-width, 0) * 1rem) calc(var(--eyebrowIcon-border-desktop-right-width, 0) * 1rem) calc(var(--eyebrowIcon-border-desktop-bottom-width, 0) * 1rem) calc(var(--eyebrowIcon-border-desktop-left-width, 0) * 1rem);
        border-radius: calc(var(--eyebrowIcon-border-desktop-left-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-desktop-top-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-desktop-right-radius, 0) * 1rem) calc(var(--eyebrowIcon-border-desktop-bottom-radius, 0) * 1rem);
    }

    .eyebrow-text {
        font-size: calc(var(--eyebrowText-font-desktop-fontSize, 0.875) * 1rem);
        line-height: var(--eyebrowText-font-desktop-lineHeight, 1);
        text-align: var(--eyebrowText-font-desktop-textAlign, center);
        padding: calc(var(--eyebrowText-padding-desktop-top, 0) * 1rem) calc(var(--eyebrowText-padding-desktop-right, 0) * 1rem) calc(var(--eyebrowText-padding-desktop-bottom, 0) * 1rem) calc(var(--eyebrowText-padding-desktop-left, 0) * 1rem);
        margin: var(--eyebrowText-margin-desktop-top, 0) var(--eyebrowText-margin-desktop-right, 0) var(--eyebrowText-margin-desktop-bottom, 0) var(--eyebrowText-margin-desktop-left, 0);
        border-width: calc(var(--eyebrowText-border-desktop-top-width, 0) * 1rem) calc(var(--eyebrowText-border-desktop-right-width, 0) * 1rem) calc(var(--eyebrowText-border-desktop-bottom-width, 0) * 1rem) calc(var(--eyebrowText-border-desktop-left-width, 0) * 1rem);
        border-radius: calc(var(--eyebrowText-border-desktop-left-radius, 0) * 1rem) calc(var(--eyebrowText-border-desktop-top-radius, 0) * 1rem) calc(var(--eyebrowText-border-desktop-right-radius, 0) * 1rem) calc(var(--eyebrowText-border-desktop-bottom-radius, 0) * 1rem);
    }
}