@font-face {
    font-display: swap;
    font-family: StudioProRegular;
    src: url(../js/StudioPro-Regular.woff2) format("woff2"),
        url(../js/StudioPro-Regular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: StudioProBold;
    src: url(../js/StudioPro-Bold.woff2) format("woff2"),
        url(../js/StudioPro-Bold.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}
.containImage{
    object-fit: contain !important;
}
html {
    min-height: 100%;
    line-height: 1.5;
    font-family: StudioProRegular, -apple-system, BlinkMacSystemFont,
        avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell,
        Ubuntu, roboto, noto, arial, sans-serif;
    color: var(--color-primary);
    background-color: var(--color-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss10";
    scrollbar-gutter: stable;
}

@media (max-width: 699px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 700px) and (max-width: 999px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1600px) and (max-width: 1999px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 2000px) and (max-width: 2399px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 2400px) {
    html {
        font-size: 18px;
    }
}

html.is-loading {
    cursor: wait;
}

html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

html.has-scroll-dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.has-scroll-smooth body {
    overflow: hidden;
}

::-moz-selection {
    background-color: #000;
    color: #fff;
    text-shadow: none;
}

::selection {
    background-color: #000;
    color: #fff;
    text-shadow: none;
}

a {
    color: currentColor;
}

.grecaptcha-badge {
    visibility: hidden;
}

html.has-modal-open {
    overflow: hidden;
}

.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

.focus-visible:not(.c-button):not(.c-tile-can_url):not(.c-tile-product_url):not(.c-accordion_toggler):not(.c-category_link):not(input):not(textarea):not(select):not(.c-menu_dropdown_link) {
    outline-color: currentColor;
    outline-width: 2px;
    outline-offset: 5px;
    outline-style: dashed;
    border-radius: var(--border-radius);
}

:root {
    --icon-width-cart: 1.25rem;
    --icon-ratio-cart: 1/1;
}

.svg-cart {
    --icon-width: var(--icon-width-cart);
    --icon-ratio: var(--icon-ratio-cart);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
}

:root {
    --icon-width-account: 1.25rem;
    --icon-ratio-account: 1/1;
}

.svg-account {
    --icon-width: var(--icon-width-account);
    --icon-ratio: var(--icon-ratio-account);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
}

:root {
    --icon-width-chevron: 1.25rem;
    --icon-ratio-chevron: 2/1;
}

.svg-chevron {
    --icon-width: var(--icon-width-chevron);
    --icon-ratio: var(--icon-ratio-chevron);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: round;
}

:root {
    --icon-width-chevron-left: 0.5rem;
    --icon-ratio-chevron-left: 1/2;
}

.svg-chevron-left {
    --icon-width: var(--icon-width-chevron-left);
    --icon-ratio: var(--icon-ratio-chevron-left);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: round;
}

:root {
    --icon-width-chevron-small: 0.625rem;
    --icon-ratio-chevron-small: 2/1;
}

.svg-chevron-small {
    --icon-width: var(--icon-width-chevron-small);
    --icon-ratio: var(--icon-ratio-chevron-small);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: round;
}

:root {
    --icon-width-arrow: 1rem;
    --icon-ratio-arrow: 1/1;
}

.svg-arrow-right,
.svg-arrow-left {
    --icon-width: var(--icon-width-arrow);
    --icon-ratio: var(--icon-ratio-arrow);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: round;
}

:root {
    --icon-width-trash-can: 1.125rem;
    --icon-ratio-trash-can: 1/1;
}

.svg-trash-can {
    --icon-width: var(--icon-width-trash-can);
    --icon-ratio: var(--icon-ratio-trash-can);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: round;
}

:root {
    --icon-width-plus: 0.5rem;
    --icon-ratio-plus: 1/1;
}

.svg-plus,
.svg-minus {
    --icon-width: var(--icon-width-plus);
    --icon-ratio: var(--icon-ratio-plus);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 1px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: round;
}

:root {
    --icon-width-close: 1.125rem;
    --icon-ratio-close: 1/1;
}

@media screen and (max-width: 1200px) {
    .c-header_logo img {
        width: 150px;
    }
}

.svg-close {
    --icon-width: var(--icon-width-close);
    --icon-ratio: var(--icon-ratio-close);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
}

:root {
    --icon-width-check-circle: 1.375rem;
    --icon-ratio-check-circle: 1/1;
}

.svg-check-circle {
    --icon-width: var(--icon-width-check-circle);
    --icon-ratio: var(--icon-ratio-check-circle);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
}

:root {
    --icon-width-perks: 3.125rem;
    --icon-ratio-perks: 1/1;
}

.svg-perks {
    --icon-width: var(--icon-width-perks);
    --icon-ratio: var(--icon-ratio-perks);
    --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
    stroke-width: 2px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: round;
}

.c-icon {
    display: inline-block;
    vertical-align: middle;
}

.c-icon svg {
    display: block;
    width: var(--icon-width);
    height: var(--icon-height);
    fill: currentColor;
    stroke: currentColor;
}

.c-loading-spinner {
    --spinner-height: 2.5rem;
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--spinner-height);
    height: var(--spinner-height);
    margin-left: calc(var(--spinner-height) / 2 * -1);
    margin-top: calc(var(--spinner-height) / 2 * -1);
    transform: scale3d(1, 1, 1);
    transition: transform 0.3s cubic-bezier(0.38, 0.005, 0.215, 1);
    transition-delay: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

html.is-ready .c-loading-spinner {
    transform: scale3d(0, 0, 1);
    transition-delay: 0s;
}

.c-loading-spinner svg {
    width: 2em;
    transform-origin: center;
    animation: spinnerRotate 2s linear infinite;
    animation-play-state: paused;
}

html:not(.is-ready) .c-loading-spinner svg {
    animation-play-state: running;
}

.c-loading-spinner circle {
    fill: none;
    stroke: #000;
    stroke-width: 3;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: spinnerDash 1.5s ease-in-out infinite;
    animation-play-state: paused;
}

html:not(.is-ready) .c-loading-spinner circle {
    animation-play-state: running;
}

@keyframes spinnerRotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinnerDash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}

.c-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90200;
    background-color: #fff;
    transition: opacity 0.3s cubic-bezier(0.38, 0.005, 0.215, 1),
        visibility 0s 0.3s linear;
    cursor: wait;
    opacity: 1;
}

html.is-first-loaded .c-preloader {
    transition: opacity 0.3s cubic-bezier(0.38, 0.005, 0.215, 1),
        visibility 0.3s cubic-bezier(0.38, 0.005, 0.215, 1);
}

html.is-loaded .c-preloader {
    opacity: 0;
    visibility: hidden;
}

.u-clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.u-hide {
    display: none !important;
}

@media (min-width: 1000px) {
    .u-hide\@from-medium {
        display: none;
    }
}

@media (max-width: 999px) {
    .u-hide\@to-medium {
        display: none;
    }
}

.u-overflow-hidden {
    overflow: hidden;
}

.u-offset-right {
    margin-right: calc(var(--padding-box) * -1);
}

.u-offset-left {
    margin-left: calc(var(--padding-box) * -1);
}

@media (max-width: 999px) {
    .u-offset-left\@to-medium {
        margin-left: calc(var(--padding-box) * -1);
    }
}

@media (max-width: 999px) {
    .u-offset-right\@to-medium {
        margin-right: calc(var(--padding-box) * -1);
    }
}

.u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 100%;
}

.u-text-uppercase {
    text-transform: uppercase;
}

[hidden][aria-hidden="false"] {
    position: absolute;
    display: inherit;
    clip: rect(0, 0, 0, 0);
}

[hidden][aria-hidden="false"]:focus {
    clip: auto;
}

.u-screen-reader-text {
    position: absolute !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
}

@media not print {
    .u-screen-reader-text\@screen {
        position: absolute !important;
        overflow: hidden;
        clip: rect(0 0 0 0);
        margin: 0;
        padding: 0;
        width: 1px;
        height: 1px;
        border: 0;
    }
}

.u-screen-reader-text.-focusable:focus,
.u-screen-reader-text.-focusable:active {
    clip: auto;
    width: auto;
    height: auto;
}