@charset "UTF-8";

@import url("reset.css");
@import url("fonts.css");
@import url("swiper-bundle.min.css");


:root{
    
    --app-height: 100vh;
    --headroom-height: auto;
    --scrollbar-width: 0;
    
    --rating: 5.0;
  
    --c0: #F8F2ED; 
    --c1: #943E25;
    --c2: #FFFFFF;
    --c3: #E8CDA6;
    --c4: #000000;
    --c5: rgba(0,0,0,.4);
    --c6: #F5F5F5;
    --c7: rgba(0,0,0,.6);
    --c8: rgba(232,205,166,.2);
    --c9: #E02424;
    --c10: rgba(255,255,255,.4);
    
    --gap: 20rem;
    
    
    --wr: 70rem;
    --awr: calc(-1 * var(--wr));
    
    --sl: max(1px, 1rem);
    
    --f-xs: max(12px, 14rem);
    --f-s: max(12px, 16rem);
    --f-d: max(14px, 18rem);
    --f-m: max(14px, 20rem);
    --f-b: max(14px, 24rem);
    --f-l: max(14px, 40rem);
    --f-xl: max(14px, 60rem);
    
    --mw: 4000px; 
    
    --swiper-scrollbar-drag-bg-color: var(--c4);
    
    --btn: max(40px, 50rem);
    
}

@keyframes ticker {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(-100%,0);
    }
}


/* globals */

@media screen {

    html{font-size: 0.052vw;background-color: var(--c0);}

    .document{font-weight: 400;font-family: 'Jost', sans-serif;font-size: var(--f-d);line-height: 1.3;color: var(--c4);background-color: var(--c0);letter-spacing: normal;}
    
    .popup-active{overflow: hidden!important;margin-right: var(--scrollbar-width);}
    .popup-active .cookies-alert{opacity: 0;}
    
    .wrapper{width: 100%;margin: 0 auto;padding: 0 var(--wr);max-width: var(--mw);}
    
    
    .usd{white-space: nowrap;text-decoration: inherit;}
    .usd:not(:empty)::before{content:"$";display: inline-block;text-decoration: inherit;}
    
    .preloader{background-color: var(--c0);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;visibility: hidden;opacity: 0;transition: all .25s 1s;display: flex;padding: 40rem 0;color: var(--c1);will-change: transform;}
     
    .loading{pointer-events: none;}
    .loading .preloader{transition-duration: 0s;opacity: 1;visibility: visible;}
    
    
    .mask-appear{position: relative;display: inline-block;}
    .mask-appear-wrapper{display: block;position: relative;overflow: hidden;white-space: nowrap;z-index: 1;line-height: 1.2;margin: -.15em 0;}
    .mask-appear-inner{display: block;transition: transform 1s 0s;will-change: transform;}
    
    .mask-appear.hidden .mask-appear-inner{transform: translateY(100%);transition: all 0s 0s;} 
    
    .icon{display: flex;max-height: 100%;align-items:center;justify-content:center;line-height: 0;max-width: 100%;width: auto;height: auto;}
    .cover,
    .contain{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-position: center;pointer-events: none;}
    .cover{object-fit: cover;}
    .contain{object-fit: contain;}
    .fill::after{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}

    .button{display: inline-flex;justify-content: center;max-width: 100%;user-select: none;cursor: pointer;align-items: center;z-index: 1;padding: 0 15rem;height: var(--btn);position: relative;border: var(--sl) solid;}
    .button:not(.fill){overflow: hidden;}
    .button-text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;position: relative;z-index: 2;min-width: 0;font-size: var(--f-d);text-transform: none;font-weight: 500;}
    
    .button__default{background-color: var(--c4);color: var(--c0);border-color: var(--c4);}
    .button__default.button__contrast{background-color: var(--c3);color: var(--c1);border-color: var(--c3);}
    
    .button__dense{padding: 0 20rem;}
    .button__wide{width: 100%;padding: 0 35rem;}
    
    .title{font-weight: 500;text-transform: uppercase;letter-spacing: .04em;line-height: .9;}
    .title__medium{font-size: var(--f-l);}
    .title__default{font-size: var(--f-xl);}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);}
    
    .header{position: relative;z-index: 10;}
    
    .topbar{display: grid;grid-template-columns: repeat(9, 1fr);grid-gap: var(--gap);align-items: flex-start;padding: 25rem 0;}
    .topbar-logo{max-width: 750rem;grid-column: 1/5;}
    .topbar-nav{font-weight: 500;grid-column: 7/10;font-size: var(--f-m);}
    .topbar ul{margin: 0 -10rem;display: flex;justify-content: space-between;}
    .topbar li{margin: 0 10rem;}
    
    .header__contrast{color: var(--c0);}
    .header__contrast .topbar{border-bottom: none;}
    
    .main{margin-top: 0;flex: auto;display: flex;flex-direction: column;}
   
    .section{position: relative;z-index: 1;overflow-x: clip;margin-bottom: 200rem;}
    .section:first-child{margin-top: 130rem;}
    .section:only-child,
    .page-header + .section:last-child{flex: auto;}
    
    .section-header{margin-bottom: 40rem;}
    
    .footer{overflow: hidden;background-color: var(--c1);color: var(--c3);padding: 80rem 0 30rem;}
    .footer-grid{grid-template-columns: repeat(3, 1fr);display: grid;grid-gap: 0 var(--gap);align-items: flex-start;grid-template-areas: "f1 f7 f2" "f3 f3 f3" "f4 f5 f6";}
    
    .f1{grid-area: f1;display: grid;grid-template-columns: auto;grid-gap: 15rem;}
    .f1-1{width: 100%;max-width: 200rem;}
    .f2{grid-area: f2;margin-left: 50rem;}
    .f2-1{margin-bottom: 20rem;}
    .f2-1-1{font-size: var(--f-b);line-height: 1.2;font-weight: 500;}
    .f2-1-2{font-size: var(--f-s);opacity: .5;margin-top: 10rem;}
    .f2-2{display: grid;grid-template-columns: 1fr auto;grid-gap: 20rem 10rem;}
    .f2-2-1{position: relative;border-bottom: var(--sl) solid;display: flex;font-size: var(--f-xs);}
    .f2-2-1 input{height: 100%;width: 100%;text-overflow: ellipsis;flex: 1;}
    .f2-2-2{order: 1;}
    
    .success-msg{position: absolute;top: 0;left: 0;z-index: 1;visibility: hidden;background-color: var(--c1);width: 100%;height: 100%;display: flex;align-items: center;}
    
    .f3{grid-area: f3;margin: 100rem var(--awr) 20rem;display: flex;overflow: hidden;position: relative;padding-top: 20rem;}
    .f3::before{content: "";width: 100%;position: absolute;top: 0;left: 0;height: var(--sl);background-color: currentColor;opacity: .4;}
    .f3-1{display: flex;background-image: url(../img/onskn-logo-2.svg);background-position: left;background-size: contain;background-repeat: no-repeat;flex: none;margin-right: var(--wr);width: calc(97% - var(--wr));}
    .f3-1::before{content: "";flex: none;padding-top: 15%;}
    .f4{grid-area: f4;font-size: var(--f-s);}
    .f5{grid-area: f5;font-size: var(--f-s);text-align: center;}
    .f6{grid-area: f6;font-size: var(--f-s);text-align: right;}
    .f7{grid-area: f7;}
   
    .carousel-scrollbar{height: 2rem;background-color: var(--c5);}
    .carousel-scrollbar .swiper-scrollbar-drag{cursor: grab;}
    .carousel-scrollbar .swiper-scrollbar-drag:active{cursor: grabbing;}
     
    .form-container.success{pointer-events: none;}
    .form-container.success .success-msg{visibility: visible;}
    
    .rating{position: relative;width: calc(var(--f-s) * 5);height: var(--f-s);background-repeat: repeat-x;background-size: auto 100%;background-position: left;background-image: url(../img/rating-blank.svg);}
    .rating-stars{background-repeat: repeat-x;position: absolute;background-size: auto 100%;background-position: left;top: 0;left: 0;height: 100%;background-image: url(../img/rating-colored.svg);width: calc(100% * var(--rating) / 5);}
    
    .checkbox-group{display: grid;grid-template-columns: auto;grid-gap: 0;}
    .checkbox{overflow: hidden;position: relative;}
    .checkbox-control{width: 0;height: 0;position: absolute;right: 100%;opacity: 0;}
    .checkbox-label{display: flex;align-items: flex-start;}
    .checkbox-label-icon{width: max(20px, 24rem);height: max(20px, 24rem);border-radius: 3rem;display: flex;align-items: center;justify-content: center;flex: none;margin-right: 10rem;padding: 3rem;border: max(2px, 3rem) solid;cursor: pointer;}
    .checkbox-label-icon::after{content: "";background-color: currentColor;width: 100%;height: 100%;will-change: transform;transition: transform .25s;}
    .checkbox-label-text{user-select: none;font-size: var(--f-xs);margin: auto 0;text-decoration: underline;cursor: pointer;}
    
    .checkbox-control:not(:checked) ~ .checkbox-label-icon::after{transform: scale(0);}
    
    .runner-end, 
    .runner-start{animation: 25s linear infinite ticker;display: flex;will-change: transform;transition: transform .01s;width: calc(100% - var(--wr));flex: none;}
    
    .cookies-alert{position: fixed;bottom: 0;left: 50%;width: 100%;max-width: 1000rem;z-index: 10;transform: translate(-50%, 100%);transition: transform .25s;will-change: transform;}
    .cookies-alert-inner{margin: 20rem;display: flex;box-shadow: inset 0 0 0 var(--sl) var(--c4);background-color: var(--c2);}
    .cookies-alert-text{font-size: var(--f-s);padding: 10rem 20rem;flex: auto;display: flex;align-items: center;}
    .cookies-alert-text a{text-decoration: underline;white-space: nowrap;}
    .cookies-alert-button{flex: none;height: 100%;}
    .cookies-alert-button + .cookies-alert-button{margin-left: calc(-1 * var(--sl));}
    .cookies-alert-button .button{min-height: max(45px, 55rem);height: 100%;}
    
    .cookies-alert.active{transform: translate(-50%, 0);}
    
    .page-header + .section:not(.s12){margin-top: 130rem;}
    
    .page-header-grid{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 30rem var(--gap);}
    .page-header-subtitle{text-transform: uppercase;font-size: var(--f-s);color: var(--c1);}
    
    .breadcrumbs{grid-column: 1/-1;font-size: var(--f-s);}
    .breadcrumbs ul{display: flex;flex-wrap: wrap;}
    .breadcrumbs li{display: inline-flex;}
    .breadcrumbs li:not(:last-child)::after{content: "\a0/\a0";}
    .breadcrumbs li:last-child{opacity: .4;}
    
    .textbox h2{font-weight: 500;font-size: var(--f-b);margin: 30rem 0;}
    .textbox h2:first-child{margin-top: 0;}
    
    .pagination{display: flex;align-items: center;}
    .pagination-arrow{flex: none;display: flex;align-items: center;justify-content: center;width: max(10px, 10rem);height: max(10px, 10rem);}
    .pagination-arrow.disabled{pointer-events: none;opacity: .4;}
    .pagination-nav{margin: 0 30rem;overflow: hidden;}
    .pagination-nav ul{display: flex;flex-wrap: wrap;margin: -5rem -10rem;}
    .pagination-nav li{margin: 5rem 10rem;}
    .pagination-nav li:not(.current){opacity: .4;}
    
    .filters{display: grid;grid-auto-flow: column;grid-gap: 30rem;align-items: center;}
    .filters-reset{position: relative;text-decoration: underline;font-weight: 500;opacity: .4;}
    
    .filters-button,
    .sortby{display: flex;align-items: center;position: relative;height: 100%;}
    .filters-button-title,
    .sortby-title{font-weight: 500;cursor: pointer;}
    .filters-button-icon,
    .sortby-icon{display: flex;align-items: center;justify-content: center;width: max(18px, 24rem);height: max(18px, 24rem);flex: none;cursor: pointer;}
    
    .sortby-value:not(:empty){padding: 0 8rem;}
    
    .filters-list,
    .sortby-list{position: absolute;top: 100%;left: 0;z-index: 1;padding-top: 20rem;visibility: hidden;}
    .sortby-list{left: auto;right: 0;}
    
    .toolbox{background-color: var(--c0);border: var(--sl) solid;padding: 40rem;min-width: 450rem;}
    .toolbox-footer{margin: 30rem -5rem 0;display: flex;}
    .toolbox-footer-button{flex: 1;padding: 0 5rem;}
    .toolbox-footer-button .button-text{font-size: var(--f-xs);}
    .toolbox-group:not(:first-child){margin-top: 30rem;}
    .toolbox-group-title{font-weight: 500;margin-bottom: 20rem;}
    .toolbox-group-list{display: grid;grid-template-columns: auto;grid-gap: 15rem;}
    
    .selectbox{position: relative;overflow: hidden;display: flex;align-items: center;cursor: pointer;padding: var(--sl) 0;margin: calc(-1 * var(--sl)) 0;}
    .selectbox-control{position: absolute;right: 100%;width: 0;height: 0;}
    .selectbox-title{user-select: none;}
    .selectbox-title a{text-decoration: underline;}
    .selectbox-icon{display: flex;align-items: center;justify-content: center;width: max(18px, 24rem);height: max(18px, 24rem);border: max(1px, 1.75rem) solid;flex: none;margin-right: 10rem;padding: 4rem;position: relative;}
    .selectbox-icon::after{content: "";transition: transform .15s;will-change: transform;}
    
    .selectbox-control[type="radio"] ~ .selectbox-icon{border-radius: 50%;}
    .selectbox-control[type="radio"] ~ .selectbox-icon::after{width: 100%;height: 100%;background-color: currentColor;border-radius: 50%;}
    .selectbox-control[type="checkbox"] ~ .selectbox-icon::after{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'%3E%3C/path%3E%3C/svg%3E");position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;background-size: contain;}
    .selectbox-control:not(:checked) ~ .selectbox-icon::after{transform: scale(0);}
    
    .carousel-button{display: flex;align-items: center;justify-content: center;width: max(32px, 40rem);height: max(32px, 40rem);padding: 10rem;background-color: var(--c6);color: var(--c4);}
    
    .product-image{display: flex;background-color: var(--c2);position: relative;}
    .product-image::before{content: "";flex: none;width: 0;padding-top: 100%;}
    
    .tabs{overflow: hidden;user-select: none;}
    .tabs ul{margin: -5rem;display: flex;flex-wrap: wrap;}
    .tabs li{margin: 5rem;min-height: max(28px, 32rem);padding: 5rem 15rem;border: var(--sl) solid var(--c3);display: inline-flex;align-items: center;font-size: var(--f-xs);cursor: pointer;background-color: var(--c3);transition: all .15s;position: relative;}
    .tabs li.current,
    .tabs li.disabled{pointer-events: none;border-color: var(--c7);background-color: transparent;}
    .tabs li.disabled::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cline x1='50' y1='0' x2='0' y2='50' stroke='black' stroke-width='1' /%3E%3C/svg%3E");background-size: 100% 100%;opacity: .6;}
    
    .product-spinner{display: flex;align-items: center;}
    .product-spinner-control{flex: none;padding: 0 10rem;display: flex;align-items: center;height: 100%;max-width: 40rem;user-select: none;}
    .product-spinner-input{flex: auto;text-align: center;font-size: var(--f-s);}
    
    .product-tag{position: absolute;top: 0;right: 0;z-index: 1;margin: 0 5rem;}
    
    .tag{padding: 10rem;text-transform: uppercase;letter-spacing: .05em;background-color: var(--c1);color: var(--c2);font-size: var(--f-m);}
    
    .expand-list{display: grid;grid-template-columns: auto;grid-gap: 0;}
    .expand{padding-top: 20rem;border-top: var(--sl) solid;}
    .expand:not(:last-child){padding-bottom: 20rem;}
    .expand-header{display: flex;align-items: center;justify-content: space-between;cursor: pointer;padding: 0;user-select: none;}
    .expand-header-title{text-transform: uppercase;font-weight: 500;}
    .expand-header-icon{margin-left: var(--gap);flex: none;display: flex;align-items: center;justify-content: center;width: max(18px, 24rem);height: max(18px, 24rem);position: relative;}
    .expand-header-icon-open,
    .expand-header-icon-close{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;transition: transform .15s;will-change: transform;}
    .expand-content{margin-right: 45rem;color: var(--c5);padding-top: 10rem;overflow: hidden;font-size: var(--f-s);transition: all .15s;}
    
    .expand:not(.active) .expand-content{max-height: 0;padding: 0;opacity: 0;}
    .expand.active .expand-header-icon-open,
    .expand:not(.active) .expand-header-icon-close{display: none;}
    
    .popup-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99;background-color: var(--c4);opacity: 0;transition: all .25s;visibility: hidden;}
    
    .popup{position: fixed;z-index: 100;color: var(--c4);will-change: transform;}
    .popup-header-close{cursor: pointer;}
    
    .popup-aside{right: 0;height: 100%;overflow: hidden;top: 0;display: flex;transition: transform .25s;background-color: var(--c0);}
    .popup-aside:not(.active){transform: translateX(100%);}
    .popup-aside .popup-inner{padding: 25rem var(--wr) 30rem 25rem;display: flex;flex-direction: column;width: 675rem;max-height: 100%;overflow: auto;}
    .popup-aside .popup-header{flex: none;margin-bottom: 50rem;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: baseline;}
    .popup-aside .popup-header-title{font-weight: 500;}
    .popup-aside .popup-header-close{font-weight: 500;}
    .popup-aside .popup-content{flex: auto;}
    .popup-aside .popup-footer{margin-top: 60rem;}
    .popup-aside .popup-footer-note{margin-top: 10rem;color: var(--c7);font-size: var(--f-s);}
    .popup-aside .popup-footer-note a{text-decoration: underline;}
    
    .popup-modal{width: 100%;max-width: 1180rem;top: 50%;left: 50%;transform: translate(-50%, -50%);visibility: hidden;opacity: 0;transition: all .5s;}
    .popup-modal.active{opacity: 1;visibility: visible;}
    .popup-modal:not(.active){transition-duration: 0s;}
    .popup-modal .popup-close{position: absolute;top: 0;right: 0;width: max(24px, 28rem);height: max(24px, 28rem);cursor: pointer;display: flex;align-items: center;justify-content: center;margin: 25rem;}
    
    .popup.active ~ .popup-overlay{opacity: .7;visibility: visible;}
    
    .shopcart-subtotal{display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: baseline;border-top: var(--sl) solid var(--c5);padding-top: 10rem;}
    .shopcart-subtotal:not(:first-child){margin-top: 10rem;}
    .shopcart-subtotal-title{font-size: var(--f-s);}
    .shopcart-subtotal-val{font-size: var(--f-s);text-align: right;}
    .shopcart-total{display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: baseline;border-top: var(--sl) solid var(--c5);padding-top: 10rem;margin-top: 20rem;font-weight: 500;}
    .shopcart-info{color: var(--c7);user-select: none;font-size: var(--f-s);border-top: var(--sl) solid;padding-top: 10rem;margin-top: 10rem;}
    .shopcart-action{margin-top: 40rem;}
    
    .shopcart{display: grid;grid-template-columns: auto;grid-gap: 10rem;}
    .shopcart-row{padding-bottom: 10rem;border-bottom: var(--sl) solid var(--c5);}
    .shopcart-row:first-child{padding-top: 10rem;border-top: var(--sl) solid var(--c5);}
    
    .shopcart-carousel:not(:first-child){margin-top: 40rem;}
    .shopcart-carousel-title{font-size: var(--f-b);margin-bottom: 20rem;}
    .shopcart-carousel-inner{margin-right: var(--awr);padding-right: var(--wr);margin-left: -25rem;padding-left: 25rem;overflow: hidden;}
    .shopcart-carousel-inner .swiper{overflow: visible;margin-left: -10rem;}
    .shopcart-carousel-inner .swiper-slide{padding-left: 10rem;}
    .shopcart-carousel-inner .carousel-scrollbar{margin-top: 20rem;}
    
    .shopcart-empty{border-top: var(--sl) solid var(--c5);padding-top: 20rem;}
    .shopcart-empty-pretitle{margin-bottom: 40rem;font-size: var(--f-s);}
    .shopcart-empty-title{font-weight: 500;font-size: var(--f-b);}
    
    .searchbox{display: flex;width: 100%;border-bottom: var(--sl) solid var(--c5);align-items: center;padding: 0 0 10rem;}
    .searchbox-icon{width: max(20px, 24rem);height: max(20px, 24rem);display: flex;align-items: center;justify-content: center;}
    .searchbox-input{flex: auto;min-width: 0;overflow: hidden;text-overflow: ellipsis;margin: 0 10rem;line-height: 1;}
    .searchbox-input:first-child{margin-left: 0;}
    .searchbox-input:last-child{margin-right: 0;}
    .searchbox-reset{width: max(20px, 24rem);height: max(20px, 24rem);display: flex;align-items: center;justify-content: center;transition: all .15s;cursor: pointer;}
    .searchbox-input:invalid ~ .searchbox-reset{opacity: 0;visibility: hidden;}
    
    .promocode-input{height: var(--btn);border-bottom: var(--sl) solid var(--c5);width: 100%;text-overflow: ellipsis;}
    
    .formbox-group{display: grid;grid-template-columns: auto;grid-gap: 40rem;}
    .formbox{display: grid;grid-template-columns: auto;grid-gap: var(--gap);}
    .formbox-row{display: flex;}
    .formbox-cell{flex: 1;}
    .formbox-cell:not(:first-child){margin-left: var(--gap);}
    .formbox-footer{margin-top: 40rem;}
    
    .textfield{}
    .textfield-input{width: 100%;text-overflow: ellipsis;padding: 10rem 15rem;border: var(--sl) solid var(--c5);min-height: var(--btn);min-width: 0;}
    .textfield-error{margin-top: 10rem;font-size: var(--f-xs);color: var(--c9);}
    
    .selector-holder{width: 100%;text-overflow: ellipsis;padding: 0 15rem;border: var(--sl) solid var(--c5);min-height: var(--btn);display: flex;align-items: center;cursor: pointer;}
    .selector-holder-input{flex: auto;text-overflow: ellipsis;min-width: 0;pointer-events: none;}
    .selector-holder-icon{flex: none;margin-left: 10rem;width: max(20px, 24rem);height: max(20px, 24rem);display: flex;align-items: center;justify-content: center;}
    .selector-list{position: absolute;width: 100%;z-index: 99;border: var(--sl) solid var(--c5);border-top: none;background-color: var(--c0);color: var(--c4);display: none;margin-top: calc(-1 * var(--sl));}
    
    .selector.active .selector-holder-icon{transform: scaleY(-1);}
    
    .selector-list.active{display: block;}
    .selector-option{position: relative;overflow: hidden;padding: 10rem 15rem;cursor: pointer;transition: all .15s;}
    .selector-option.active{pointer-events: none;background-color: var(--c4);color: var(--c2);}
    
}


/* cards */

@media screen {
    
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;user-select: none;}
    
    .card-media__back{opacity: 0;}
    
    .card-1 .card-header{background-color: var(--c2);display: flex;position: relative;overflow: hidden;}
    .card-1 .card-header::before{content: "";flex: none;width: 0;padding-top: 130%;}
    .card-1 .card-media{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 70rem 50rem;}
    .card-1 .card-tag{position: absolute;top: 0;right: 0;z-index: 1;}
    .card-1 .card-content{margin-top: 10rem;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: flex-start;}
    .card-1 .card-title,
    .card-1 .card-price{font-size: var(--f-m);letter-spacing: .05em;text-transform: uppercase;}
    .card-1 .card-subtitle{font-size: var(--f-s);color: var(--c4);opacity: .4;margin-top: 10rem;}

    .card-2{background-color: var(--c2);padding: 20rem;flex-direction: row;align-items: flex-start;color: var(--c4);}
    .card-2 .card-media{position: relative;overflow: hidden;display: flex;flex: none;margin-right: 20rem;width: 210rem;align-items: center;}
    .card-2 .card-media::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .card-2 .card-media-front,
    .card-2 .card-media-back{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;transition: opacity .5s;}
    .card-2 .card-content{display: flex;min-height: 210rem;flex-direction: column;}
    .card-2 .card-header{margin-bottom: 25rem;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: center;}
    .card-2 .card-date{font-size: var(--f-xs);opacity: .4;}
    .card-2 .card-main{margin-bottom: auto;}
    .card-2 .card-title{font-weight: 500;margin-bottom: 10rem;opacity: .4;}
    .card-2 .card-text{font-size: var(--f-s);}
    .card-2 .card-footer{margin-top: 20rem;font-size: var(--f-s);opacity: .4;font-weight: 500;}
    .card-2 .card-carousel-buttons{display: flex;justify-content: space-between;position: relative;z-index: 1;width: 100%;padding: 5rem;}
    .card-2 .carousel-button{width: max(20px, 24rem);height: max(20px, 24rem);padding: 4rem;cursor: pointer;}
    
    .card-2 .card-media.active .card-media-front,
    .card-2 .card-media:not(.active) .card-media-back{opacity: 0;}
    
    .card-3 .card-header{position: relative;overflow: hidden;display: flex;}
    .card-3 .card-header::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .card-3 .card-media{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
    .card-3 .card-content{text-align: center;margin-top: 20rem;}
    .card-3 .card-title{font-weight: 500;font-size: var(--f-b);}
    .card-3 .card-subtitle{font-size: var(--f-s);margin-top: 10rem;}
    
    .card-4{flex-direction: row;}
    .card-4 .card-header{position: relative;overflow: hidden;flex: none;width: 130rem;background-color: var(--c2);display: flex;margin-bottom: auto;margin-right: 20rem;}
    .card-4 .card-header::before{content: "";flex: none;width: 0;padding-top: 130%;}
    .card-4 .card-media{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
    .card-4 .card-content{display: grid;grid-template-columns: 1fr auto;grid-template-rows: 1fr auto;grid-gap: var(--gap);flex: auto;align-items: baseline;}
    .card-4 .card-title{font-size: var(--f-m);letter-spacing: .05em;text-transform: uppercase;}
    .card-4 .card-subtitle{font-size: var(--f-s);color: var(--c4);opacity: .4;margin-top: 10rem;}
    .card-4 .card-price{font-weight: 500;display: flex;margin: 0 -5rem;flex-wrap: wrap;}
    .card-4 .card-price-val{margin: 0 5rem;}
    .card-4 .card-price-old{margin: 0 5rem;opacity: .6;text-decoration: line-through;}
    .card-4 .card-action{display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: baseline;grid-column: 1/-1;}
    .card-4 .card-action-spinner{height: 1em;display: flex;line-height: 1;}
    .card-4 .card-action-spinner .product-spinner-control{padding: 0;width: max(14px, 20rem);}
    .card-4 .card-action-delete{margin-left: auto;text-decoration: underline;}
    
    .card-5{background-color: var(--c8);display: grid;grid-template-columns: auto 1fr auto;grid-gap: 0;padding: 20rem;}
    .card-5 .card-header{position: relative;overflow: hidden;width: 110rem;flex: none;background-color: var(--c2);display: flex;margin-bottom: auto;margin-right: 20rem;}
    .card-5 .card-header::before{content: "";flex: none;width: 0;padding-top: 130%;}
    .card-5 .card-media{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
    .card-5 .card-content{display: flex;flex-direction: column;}
    .card-5 .card-title{font-size: var(--f-m);letter-spacing: .05em;text-transform: uppercase;}
    .card-5 .card-subtitle{font-size: var(--f-s);color: var(--c4);opacity: .4;margin-top: 10rem;}
    .card-5 .card-price{font-weight: 500;display: flex;margin: auto -5rem 0;flex-wrap: wrap;}
    .card-5 .card-price-val{margin: 0 5rem;}
    .card-5 .card-price-old{margin: 0 5rem;opacity: .6;text-decoration: line-through;}
    .card-5 .card-action{position: relative;z-index: 2;margin: auto 0;}
    
}

/* sections */

@media screen {
    
    .b1-1{display: grid;grid-template-columns: 1fr 1fr;}
    .b1-2{display: flex;position: relative;overflow: hidden;}
    .b1-2::before{content: "";flex: none;width: 0;padding-top: 120%;}
    .b1-3{background-color: var(--c0);padding: 100rem 50rem;display: flex;align-items: center;justify-content: center;flex-direction: column;}
    .b1-4{text-align: center;font-size: var(--f-b);font-weight: 500;}
    .b1-5{text-align: center;margin-top: 20rem;}
    .b1-6{display: grid;grid-template-columns: auto;grid-gap: 10rem;margin-top: 40rem;width: 100%;}
    
    .s1{background-color: var(--c4);color: var(--c0);}
    .s1:first-child{margin-top: calc(-1 * var(--headroom-height));}
    .s1-1{padding: var(--headroom-height) 0 90rem;position: relative;z-index: 1;min-height: var(--app-height);display: flex;flex-direction: column;}
    .s1-2{margin-bottom: auto;}
    .s1-2 .page-header-subtitle{color: inherit;}
    .s1-3{margin-top: 100rem;position: relative;}
    .s1-4{transition: transform 1s 1s;will-change: transform;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    
    .loading .s1-2-1,
    .loading .s1-2-2{opacity: 0;transform: translateY(50%);transition-delay: 0s;transition-duration: 0s;}
    .loading .s1-4{transform: scale(1.2);transition-delay: 0s;transition-duration: 0s;}
    
    .s2-1{display: grid;grid-template-columns: repeat(9, 1fr);grid-gap: var(--gap);align-items: flex-start;position: relative;}
    .s2-2{grid-column: 6/10;display: flex;position: relative;overflow: hidden;min-height: 1000rem;margin-right: var(--awr);margin-left: calc(( (100% + var(--gap)) / 4 + var(--gap) ) / -2);}
    .s2-2::before{content: "";flex: none;width: 0;padding-top: 95%;}
    .s2-3{grid-column: 1/4;order: -1;}
    .s2-4{display: flex;margin-top: auto;position: absolute;bottom: 0;left: 0;width: 30%;}
    .s2-4::before{content: "";flex: none;width: 0;padding-top: 100%;position: relative;}
    .s2-4-1,
    .s2-4-2,
    .s2-4-3{position: absolute;}
    .s2-4-1{width: 50%;height: 90%;bottom: 0;left: 0;}
    .s2-4-2{width: 40%;height: 40%;top: 0;right: 10%;}
    .s2-4-3{width: 50%;height: 70%;bottom: 0;right: 0;}
    .s2-5{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
    
    .s3-1{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: var(--gap);}
    
    .s4{background-color: var(--c1);color: var(--c2);}
    .s4-1{display: grid;grid-template-columns: 1fr 1fr;margin: 0 var(--awr);}
    .s4-2{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 140rem var(--wr);text-align: center;}
    .s4-2-2{margin-top: 20rem;max-width: 560rem;color: var(--c0);font-weight: 500;}
    .s4-3{position: relative;display: flex;}
    .s4-3::before{content: "";flex: none;width: 0;padding-top: 95%;}
    
    .s5-1{width: 100%;max-width: 680rem;}
    .s5-1 .swiper{overflow: visible;}
    .s5-1 .swiper-slide{padding-right: var(--gap);height: auto;}
    .s5-2{margin-top: 40rem;}
    
    .s6{background-color: var(--c4);color: var(--c0);}
    .s6-1{display: grid;grid-template-columns: 1fr 1fr;margin: 0 var(--awr);}
    .s6-2{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;padding: 140rem var(--wr);position: relative;z-index: 1;}
    .s6-2-2{margin-top: 20rem;max-width: 550rem;font-weight: 500;}
    .s6-2-3{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
    .s6-3{position: relative;display: flex;}
    .s6-3::before{content: "";flex: none;width: 0;padding-top: 95%;}
    
    .s7 .section-header .title{color: var(--c4);text-align: center;}
    .s7 .section-header .title a{color: var(--c1);}
    .s7-1{margin: 0 var(--awr);}
    .s7-2{display: grid;grid-template-columns: repeat(8, minmax(0, 1fr));grid-gap: var(--gap);margin: 0 -110rem;align-items: center;}
    .s7-3{position: relative;display: flex;pointer-events: none;}
    .s7-3::before{content: "";flex: none;width: 0;padding-top: 120%;}
    
    .s404-3{display: grid;grid-template-columns: repeat(9, 1fr);grid-gap: var(--gap);align-items: center;padding-top: 100rem;}
    .s404-4{display: flex;flex-direction: column;grid-column: 2/6;}
    .s404-4-1{margin-bottom: 30rem;font-size: var(--f-m);}
    .s404-4-2{}
    .s404-4-3{margin-top: 40rem;max-width: calc(50% - var(--gap) / 2);}
    .s404-5{position: relative;overflow: hidden;display: flex;grid-column: 6/9;}
    .s404-5::before{content: "";flex: none;width: 0;padding-top: 140%;}
    
    .s8:last-child{margin-bottom: 0;}
    .s8-1{display: grid;grid-template-columns: auto;grid-gap: 200rem;}
    .s8-2{display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));align-items: flex-start;grid-gap: 60rem var(--gap);}
    .s8-3{grid-column: 1/4;}
    .s8-4{grid-column: 5/10;border-top: var(--sl) solid var(--c5);display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));grid-gap: var(--gap);padding-top: 20rem;margin-right: var(--awr);padding-right: var(--wr);}
    .s8-4-1{grid-column: 1/3;font-size: var(--f-b);font-weight: 500;}
    .s8-4-2{grid-column: 3/6;max-width: 520rem;}
    .s8-5{position: relative;overflow: hidden;display: flex;}
    .s8-6{position: relative;overflow: hidden;display: flex;}
    .s8-7{position: relative;overflow: hidden;display: flex;grid-column: 1/-1;margin: 0 var(--awr);}
    .s8-5::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s8-6::before{content: "";flex: none;width: 0;padding-top: 120%;}
    .s8-7::before{content: "";flex: none;width: 0;padding-top: 56.25%;}
    .s8-8{grid-column: 1/-1;display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));align-items: flex-start;grid-gap: var(--gap);}
    
    .s8-4 .s8-4-1,
    .s8-4 .s8-4-2{opacity: 0;transform: translateY(50rem);}
    
    .s8-4.visible .s8-4-1,
    .s8-4.visible .s8-4-2{opacity: 1;transform: translateY(0);transition: all .75s 0s;}
    .s8-4.visible .s8-4-2{transition-delay: .25s;}
    
    .s9-1{border-top: var(--sl) solid var(--c5);padding: 30rem var(--wr) 0;display: grid;grid-template-columns: auto;grid-gap: 80rem;margin: 0 var(--awr);}
    .s9-2{display: grid;align-items: flex-start;grid-template-columns: repeat(9, minmax(0, 1fr));grid-gap: var(--gap);}
    .s9-3{grid-column: 1/4;}
    .s9-4{grid-column: 5/9;display: grid;grid-template-columns: 1fr 1fr;grid-gap: 30rem var(--gap);}
    .s9-5{display: flex;align-items: baseline;}
    .s9-5-1{font-size: var(--f-b);font-weight: 500;}
    .s9-5-2{display: inline-flex;}
    .s9-5-2::before{content: "\a0-\a0";}
    .s9-6:not(:first-child){margin-top: 20rem;}
    .s9-7{display: grid;grid-template-columns: auto;grid-gap: 15rem;grid-column: 1/-1;}
    .s9-8{}
    
    .s10-1{border-top: var(--sl) solid var(--c5);padding-top: 40rem;display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));}
    .s10-2{grid-column: 3/8;}
    
    .s11-1{border-top: var(--sl) solid var(--c5);padding: 30rem var(--wr) 0;margin: 0 var(--awr);}
    .s11-2{margin-bottom: 20rem;position: relative;z-index: 2;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: center;}
    .s11-2-1{margin-right: auto;}
    .s11-3{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 40rem var(--gap);}
    .s11-4{margin-top: 80rem;display: flex;justify-content: center;}
    
    .s12{margin-top: 30rem;}
    .s12-1{display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));grid-gap: 120rem var(--gap);align-items: flex-start;}
    .s12-2{overflow: hidden;user-select: none;grid-column: 1/5;margin-right: calc((100% - 3 * var(--gap)) / -4 / 2 - var(--gap));}
    .s12-2 .carousel-button{position: absolute;top: 50%;transform: translateY(-50%);z-index: 1;margin: 0 10rem;cursor: pointer;}
    .s12-2 .carousel-button__prev{left: 0;}
    .s12-2 .carousel-button__next{right: 0;}
    .s12-2-1{position: relative;}
    .s12-2-1 .swiper{margin: 0 -5rem;}
    .s12-2-1 .swiper-slide{padding: 0 5rem;}
    .s12-2-2{margin-top: 15rem;overflow: hidden;}
    .s12-2-2 .swiper{margin: 0 -5rem;}
    .s12-2-2 .swiper-slide{padding: 0 5rem;position: relative;}
    .s12-2-2 .swiper-slide .product-image::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;border: var(--sl) solid;opacity: 0;}
    .s12-2-2 .product-image{cursor: pointer;}
    .s12-2-2 .swiper-slide-thumb-active .product-image{pointer-events: none;}
    .s12-2-2 .swiper-slide-thumb-active .product-image::after{opacity: 1;}
    .s12-3{grid-column: 6/9;}
    .s12-4{grid-column: 1/-1;}
    .s12-5{overflow: hidden;}
    .s12-6{margin-top: 20rem;display: inline-grid;grid-auto-flow: column;grid-gap: 10rem;font-weight: 500;font-size: var(--f-b);}
    .s12-6-2{text-decoration: line-through;opacity: .6;}
    .s12-7{margin-top: 20rem;}
    .s12-7-1{color: var(--c5);}
    .s12-7-1:not(:last-child){display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
    .s12-7-2{margin-top: 10rem;font-size: var(--f-s);text-decoration: underline;cursor: pointer;}
    .s12-8{margin-top: 20rem;}
    .s12-9{margin-top: 40rem;display: inline-grid;grid-gap: 100rem;grid-auto-flow: column;margin-right: auto;}
    .s12-10{margin-top: 40rem;display: grid;grid-template-columns: auto 1fr;grid-gap: 0;}
    .s12-10-1{height: var(--btn);border: var(--sl) solid;border-right: none;padding: 0 10rem;display: flex;}
    .s12-11{margin-top: 60rem;}
    .s12-12-1{font-size: var(--f-b);font-weight: 500;opacity: .6;}
    .s12-12-2{margin-top: 10rem;font-size: var(--f-s);}
    .s12-13{font-size: var(--f-b);padding-bottom: 25rem;border-bottom: var(--sl) solid var(--c5);margin-bottom: 20rem;}
    .s12-14{display: flex;justify-content: space-between;margin: 0 -20rem;}
    .s12-14-1{margin: 0 20rem;max-width: 285rem;flex: 1;}
    
    .s13-1{border-top: var(--sl) solid var(--c5);padding: 30rem var(--wr) 0;margin: 0 var(--awr);display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));grid-gap: 0 var(--gap);align-items: flex-start;}
    .s13-2{grid-column: 1/6;display: flex;position: relative;overflow: hidden;margin-right: 80rem;margin-left: var(--awr);}
    .s13-2::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s13-3{grid-column: 6/9;}
    .s13-4-1{font-weight: 500;font-size: var(--f-b);}
    .s13-4-2{margin-top: 10rem;font-size: var(--f-s);}
    .s13-5:not(:first-child){margin-top: 60rem;}
    .s13-5-1{font-size: var(--f-b);font-weight: 500;}
    .s13-5-2{margin-top: 10rem;opacity: .6;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);}
    .s13-5-3{margin-top: 20rem;}
    .s13-6{margin-top: 60rem;display: grid;grid-template-columns: auto;grid-gap: 40rem;}
    .s13-6 .shopcart-subtotal{padding-top: 0;border-top: none;}
    .s13-6 .shopcart-subtotal:not(:last-child){padding-bottom: 10rem;border-bottom: var(--sl) solid var(--c5);}
    .s13-6 .shopcart-subtotal-title{font-size: var(--f-d);font-weight: 500;}
    .s13-6 .shopcart-total{padding-top: 0;border-top: none;}
    .s13-6 .shopcart-total-title,
    .s13-6 .shopcart-total-val{font-size: var(--f-b);}
    .s13-7{margin-top: 40rem;}
    .s13-8{margin-top: 40rem;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));grid-gap: 10rem;}
    .s13-9{grid-column: 1/5;}
    .s13-9-1{margin-bottom: 40rem;font-size: var(--f-b);font-weight: 500;}
    
    .s14-1{display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));grid-gap: 0 var(--gap);}
    .s14-2{grid-column: 3/8;}
    .s14-3{width: 100%;}
    .s14-3:not(:last-child){margin-bottom: 20rem;}
    .s14-4{grid-column: 1/-1;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: var(--gap);margin-top: 130rem;}
    .s14-5{color: var(--c5);}
    .s14-6{color: var(--c5);text-align: center;}
    
}


@media screen and (max-width: 1023.98px) {
    
    :root{

        --gap: 30rem;

        --wr: 16rem;

        --f-xs: 12rem;
        --f-s: 12rem;
        --f-s1: 14rem;
        --f-d: 16rem;
        --f-m: 16rem;
        --f-m1: 18rem;
        --f-b: 20rem;
        --f-b1: 26rem;
        --f-l: 36rem;
        --f-xl: 36rem;

        --btn: 50rem;


        
        --mw: 640px; 
    
        
    }
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .toolbox-active .header,
    .toolbox-active .cookies-alert{display: none;}
    
    .button,
    .button__wide{padding: 0 20rem;}
    .button__dense .button-text{font-size: var(--f-d);font-weight: 500;}
    
    .title{max-width: 300rem;}
    
    .topbar{grid-template-columns: 1fr auto;padding: 15rem 0;border-bottom: var(--sl) solid var(--c5);}
    .topbar-logo{grid-column: auto;max-width: 115rem;}
    .topbar-nav{grid-column: auto;font-weight: 400;}
    
    .header__contrast .topbar{border-bottom: var(--sl) solid var(--c10);}
    
    .page-header{margin-top: 20rem;}
    .page-header-grid{grid-template-columns: auto;grid-gap: 20rem;}
    .page-header-subtitle{max-width: 300rem;}
    
    .breadcrumbs{font-size: var(--f-d);}
    
    .checkbox-label-text{font-size: var(--f-s1);}
    
    .tag{padding: 8rem 10rem;}
    
    .footer{margin-top: 0;padding: 40rem 0 20rem;}
    .footer-grid{grid-template-columns: auto;grid-gap: 0;grid-template-areas: "f1" "f7" "f2" "f3" "f4" "f6" "f5";}
    .f1{grid-gap: 10rem;}
    .f2{margin: 40rem 0 0;}
    .f2-1-2{font-size: var(--f-s1);}
    .f2-2{grid-template-columns: auto;grid-gap: 0;}
    .f2-2-1{height: 40rem;font-size: var(--f-s1);}
    .f2-2-2{margin-top: 20rem;}
    .f2-2-3{margin-top: 30rem;}
    .f3{margin: 40rem var(--awr);padding-top: 15rem;}
    .f4,
    .f5,
    .f6{font-size: var(--f-s1);}
    .f5{text-align: left;margin-top: 20rem;}
    .f6{text-align: left;margin-top: 20rem;}
    .f7{margin-top: 40rem;}
    .f7 ul{display: grid;grid-template-columns: auto;grid-gap: .5em;}
    
    .cookies-alert-inner{flex-wrap: wrap;}
    .cookies-alert-text{width: 100%;}
    .cookies-alert-button{flex: 1;}
    .cookies-alert-button .button{width: 100%;}
    
    .page-header + .section:not(.s12){margin-top: 40rem;}
    
    .section{margin-bottom: 80rem;}
    .section:not(.s1):first-child{margin-top: 80rem;}
    
    .section-header{margin-bottom: 30rem;}
    
    .textbox h2{margin: 20rem 0;}
    
    .shopcart-subtotal{grid-gap: 20rem;}
    .shopcart-subtotal-title{font-size: var(--f-d);}
    .shopcart-subtotal-val{font-size: var(--f-d);}
    .shopcart-subtotal__alt{grid-template-columns: auto;grid-gap: 10rem;}
    .shopcart-subtotal__alt .shopcart-subtotal-val{text-align: left;}
    .shopcart-info{font-size: var(--f-d);}
    
    .shopcart-empty-pretitle{font-size: var(--f-d);}
    .shopcart-empty-title{font-size: var(--f-m1);max-width: 300rem;}
    .shopcart-empty-title br{display: none;}
    
    .shopcart-carousel-container{max-width: 320rem;}
    
    .popup{width: 100%;}
    
    .popup-modal{transform: none;left: 0;top: 0;height: 100%;overflow: auto;padding: 15rem var(--wr);background-color: var(--c0);}
    .popup-modal .popup-close{margin: 15rem;}
    
    .popup-aside .popup-header{margin-bottom: 30rem;}
    .popup-aside .popup-header-close{font-weight: 400;}
    .popup-aside .popup-inner{width: 100%;padding: 15rem var(--wr) 30rem;}
    .popup-aside .popup-footer{margin-top: 40rem;}
    .popup-aside .popup-footer-note{margin-top: 15rem;font-size: var(--f-d);}
    
    .popup-menu{transform: none;left: 0;top: 0;height: 100%;overflow: auto;padding: 0 var(--wr) 30rem;background-color: var(--c1);color: var(--c2);transition: clip-path .25s;display: flex;clip-path: inset(0 0 0 0%);}
    .popup-menu .topbar{border-color: var(--c10);}
    .popup-menu .popup-inner{display: flex;flex-direction: column;width: 100%;}
    .popup-menu .popup-header{margin-bottom: 20rem;}
    .popup-menu .popup-content{margin: auto 0;}
    .popup-menu .popup-content ul{display: grid;grid-template-columns: auto;grid-gap: 15rem;font-size: var(--f-b1);font-weight: 500;letter-spacing: .04em;text-transform: uppercase;}
    .popup-menu .popup-content li{padding-bottom: 15rem;border-bottom: var(--sl) solid var(--c10);}
    .popup-menu .popup-footer{margin-top: 40rem;}
    .popup-menu .popup-footer ul{display: grid;grid-template-columns: auto;grid-gap: 10rem;font-size: var(--f-b);font-weight: 500;}
    
    .popup-menu:not(.active){clip-path: inset(0 0 0 100%);}
    
    .b1-1{grid-template-columns: auto;}
    .b1-3{order: -1;padding: 80rem 0 50rem;}
    .b1-6{margin-top: 30rem;}
    
    .formbox-group{grid-gap: 30rem;}
    .formbox{grid-gap: 20rem;}
    .formbox-row{flex-direction: column;}
    .formbox-cell:not(:first-child){margin: 20rem 0 0;}
    
    .promocode-input{height: auto;padding-bottom: 10rem;}
    
    .tabs li{font-size: var(--f-s1);}
    
    .expand-header-title{font-weight: 400;}
    .expand-content{margin-right: 0;font-size: var(--f-d);}
    
    .sortby-value{display: none;}
    
    .filters{grid-gap: 20rem;}
    
    .filters-button.active,
    .sortby.active{pointer-events: none;}
    
    .filters-button.active .filters-list,
    .sortby.active .sortby-list{visibility: visible;}
    
    .filters-list, 
    .sortby-list{padding: 0;}
    
    .toolbox{padding: 0;border: none;width: 100%;min-width: 0;pointer-events: all;}
    .toolbox-inner{padding: 15rem var(--wr) 40rem;background-color: var(--c0);overflow: auto;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;display: flex;flex-direction: column;}
    .toolbox-content{margin-bottom: auto;}
    .toolbox-header{margin-bottom: 30rem;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);font-weight: 500;}
    .toolbox-footer-button .button-text{font-size: var(--f-s1);}
    
    .card-1 .card-media{margin: 30rem;}
    .card-1 .card-title,
    .card-1 .card-price,
    .card-1 .card-subtitle{font-size: var(--f-d);}
    .card-1 .card-footer{margin-top: 20rem;}
    .card-1 .card-action .button{background-color: var(--c4);color: var(--c0);}
    
    .card-2{flex-direction: column;}
    .card-2 .card-media{width: 100%;margin: 0 0 20rem;}
    .card-2 .card-content{min-height: 0;}
    .card-2 .card-header{margin-bottom: 15rem;}
    .card-2 .card-date{font-size: var(--f-s1);}
    .card-2 .card-title{font-size: var(--f-m1);}
    .card-2 .card-text{font-size: var(--f-d);}
    .card-2 .card-footer{font-size: var(--f-d);margin-top: 15rem;}
    
    .card-3 .card-content{text-align: left;margin-top: 10rem;max-width: 285rem;}
    .card-3 .card-title{font-weight: 400;font-size: var(--f-d);text-transform: uppercase;letter-spacing: .05em;}
    .card-3 .card-subtitle{font-size: var(--f-d);}
    
    .card-4 .card-content{grid-template-columns: auto;grid-template-rows: auto 1fr auto;grid-gap: 15rem;}
    .card-4 .card-price:last-child{margin-top: auto;grid-row-end: span 2;}
    .card-4 .card-action{margin-top: auto;}
    
    .card-5{grid-template-columns: auto 1fr;grid-gap: 25rem 0;}
    .card-5 .card-action{grid-column: 1/-1;}
    
    .s1-1{padding-bottom: 40rem;}
    .s1-2{margin-top: 20rem;}
    .s1-2-1{width: 100%;}
    .s1-2-2{margin-top: 10rem;}
    .s1-4{opacity: .8;}
    
    .s2-1{grid-template-columns: auto;}
    .s2-2{order: 1;grid-column: 1/-1;margin: 0;min-height: 0;}
    .s2-3{grid-column: 1/-1;}
    .s2-4{display: none;}
    
    .s3-1{grid-template-columns: auto;}
    
    .s4-1{grid-template-columns: auto;}
    .s4-2{align-items: flex-start;text-align: left;padding: 40rem var(--wr);}
    .s4-2-2{font-size: var(--f-m);}
    
    .s5-1 .swiper-wrapper{flex-direction: column;}
    .s5-1 .swiper-slide{padding: 0;}
    .s5-1 .swiper-slide:not(:first-child){margin-top: var(--gap);}
    .s5-1 .swiper-slide:nth-child(n + 4){display: none;}
    .s5-5{margin-top: 30rem;}
    
    .s6-1{grid-template-columns: auto;}
    .s6-2{min-height: 400rem;padding: 40rem var(--wr);}
    .s6-2-2{font-size: var(--f-m);}
    .s6-3{min-height: 400rem;}
    
    .s7 .section-header .title{text-align: left;}
    .s7-1{overflow: auto;overflow: -moz-scrollbars-none!important;scrollbar-width: none;scroll-snap-type: x;scroll-padding: var(--wr);}
    .s7-1::-webkit-scrollbar{display: none;}
    .s7-2{grid-gap: 10rem;grid-template-columns: auto;grid-auto-flow: column;padding: 0 var(--wr);margin: 0;}
    .s7-2::after{content: "";width: var(--wr);height: 100%;margin-left: -10rem;}
    .s7-3{width: 280rem;scroll-snap-align: start;}
    
    .s8-1{grid-gap: 80rem;}
    .s8-2{grid-template-columns: auto;grid-gap: 30rem 0;}
    .s8-3{grid-column: auto;}
    .s8-4{grid-column: auto;grid-template-columns: auto;grid-gap: 0;margin: 0;padding: 20rem 0 0;}
    .s8-4-1{grid-column: auto;}
    .s8-4-2{grid-column: auto;margin-top: 20rem;}
    .s8-5,
    .s8-6{margin: 0;order: 1;grid-column: auto;}
    .s8-5::before,
    .s8-6::before,
    .s8-7::before{padding-top: 100%;}
    .s8-8{grid-column: auto;grid-template-columns: auto;grid-gap: 20rem;}
    
    .s9-1{margin: 0;padding: 20rem 0 0;grid-gap: 80rem;}
    .s9-2{grid-template-columns: auto;grid-gap: 30rem;}
    .s9-3{grid-column: auto;}
    .s9-4{grid-column: auto;grid-template-columns: auto;grid-gap: 30rem;}
    .s9-5{flex-direction: column;}
    .s9-5-2{margin-top: 20rem;}
    .s9-5-2::before{display: none;}
    .s9-7{grid-gap: 20rem;}
    
    .s10-1{padding-top: 20rem;grid-template-columns: auto;}
    .s10-2{grid-column: auto;}
    
    .s11-1{padding: 20rem 0 0;margin: 0;}
    .s11-2{margin-bottom: 30rem;}
    .s11-3{grid-template-columns: auto;}
    .s11-4{margin-top: 60rem;}
    
    .s12{margin-top: 20rem;}
    .s12-1{grid-template-columns: minmax(0, 1fr);grid-gap: 0;}
    .s12-2{grid-column: auto;margin: 0 var(--awr);padding: 0 var(--wr);}
    .s12-2-1{max-width: 300rem;}
    .s12-2-1 .swiper{overflow: visible;}
    .s12-2-2{display: none;}
    .s12-2 .carousel-button{display: none;}
    .s12-3{grid-column: auto;margin: 20rem 0 0;}
    .s12-4{grid-column: auto;margin: 80rem 0 0;}
    .s12-5{max-width: 245rem;}
    .s12-5 .title{font-size: var(--f-b);}
    .s12-6{font-size: var(--f-d);font-weight: 400;}
    .s12-7-2{font-size: var(--f-d);}
    .s12-9{margin-top: 30rem;grid-gap: 20rem;grid-template-columns: auto;grid-auto-flow: row;}
    .s12-10{margin-top: 30rem;grid-template-columns: auto;grid-gap: 20rem;}
    .s12-10-1{border-right: var(--sl) solid;}
    .s12-10-1 .product-spinner{width: 100%;}
    .s12-11{margin-top: 40rem;}
    .s12-12-2{font-size: var(--f-d);}
    .s12-13{padding-bottom: 30rem;}
    .s12-14{flex-direction: column;margin: 0;}
    .s12-14-1{margin: 0;max-width: none;}
    .s12-14-1:not(:first-child){margin-top: 30rem;}
    
    .s13-1{margin: 0;padding: 20rem 0 0;grid-template-columns: auto;grid-gap: 40rem;}
    .s13-2{grid-column: auto;margin: 0;}
    .s13-3{grid-column: auto;}
    .s13-4-1{font-size: var(--f-m1);}
    .s13-4-2{font-size: var(--f-d);}
    .s13-5:not(:first-child){margin-top: 30rem;}
    .s13-5-1{font-size: var(--f-m1);}
    .s13-6{margin-top: 30rem;}
    .s13-6 .shopcart-subtotal-title{font-size: var(--f-m1);}
    .s13-6 .shopcart-total-title, 
    .s13-6 .shopcart-total-val{font-size: var(--f-m1);}
    .s13-8{grid-template-columns: auto;grid-gap: 20rem;}
    .s13-9{grid-column: auto;}
    .s13-9-1{margin-bottom: 30rem;font-size: var(--f-m1);}
        
    .s14-1{grid-template-columns: auto;}
    .s14-2{grid-column: auto;}
    .s14-4{grid-template-columns: auto;margin-top: 80rem;grid-gap: 40rem;} 
    
    .s404-2{max-width: 115rem;padding: 15rem 0 100rem;}
    .s404-3{grid-template-columns: auto;grid-gap: 40rem;padding: 0;}
    .s404-4{grid-column: 1/-1;}
    .s404-4-1{margin-bottom: 10rem;}
    .s404-4-3{margin-top: 30rem;max-width: none;}
    .s404-5{grid-column: 1/-1;}
    .s404-5::before{padding-top: 80%;}
    
}

@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    .f1{padding-right: 250rem;}
    .f7{margin-left: -250rem;}
    .f7 ul{column-count: 2;column-gap: 80rem;display: inline-block;}
    .f7 li{margin-bottom: .5em;}
   
    .card-1 .card-footer{display: flex;position: absolute;top: 0;left: 0;width: 100%;height: auto;overflow: hidden;z-index: 1;pointer-events: none;}
    .card-1 .card-footer::before{content: "";flex: none;width: 0;padding-top: 130%;z-index: 1;}
    .card-1 .card-action{position: absolute;bottom: 0;left: 0;width: 100%;z-index: 2;pointer-events: all;}
    .card-1 .card-action .button{background-color: var(--c1);color: var(--c0);border-color: var(--c1);}
    
    .s7-3:nth-child(even){transform: translateY(-15%);}
    .s7-3:nth-child(odd){transform: translateY(15%);}
    .s7-3:nth-child(4){grid-column-end: span 2;transform: translateY(0);}
    
    .s8-5:first-child{grid-column: 1/5;margin-right: calc(-1 * var(--gap));margin-left: var(--awr);}
    .s8-5:last-child{grid-column: 6/10;margin-left: calc(-1 * var(--gap));margin-right: var(--awr);}
    .s8-6:first-child{grid-column: 1/6;margin-left: var(--awr);}
    .s8-6:last-child{grid-column: 5/10;margin-right: var(--awr);}
    
}

@media screen and (min-width: 4000px) {
    
    
    html{font-size: 1px;}
    
    
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    
    .topbar-nav a{background-size: 0 var(--sl);background-repeat: no-repeat;background-position: right bottom;background-image: linear-gradient(currentColor, currentColor);display: inline;transition: background-size .5s cubic-bezier(0.2, 1, 0.3, 1), color .5s;}
    
    .topbar-nav a:hover{background-size: 100% var(--sl);background-position: left bottom;}
    
    .carousel-button{transition-duration: .15s;transition-property: color, background-color;}
    .carousel-button:hover{background-color: var(--c4);color: var(--c2);}
    
    .button{transition-duration: .25s;transition-property: color, border-color, background-color;}
    
    .button__default:hover{background-color: transparent;color: var(--c4);}
    .button__default.button__contrast:hover{background-color: transparent;color: var(--c3);}
    .button__secondary:hover,
    .card-action:hover .button{color: var(--c0);background-color: var(--c4);border-color: var(--c4);}
    
    .f1-1{transition: opacity .15s;}
    
    .f1-1:hover{opacity: .6;}
    
    .f5 a,
    .f6 a,
    .f7 a{transition: color .15s;}
    
    .f5 a:hover,
    .f6 a:hover,
    .f7 a:hover{color: var(--c0);}
    
    .card-1 .card-action{will-change: transform;transition: transform .15s;}
    .card-1:not(:hover) .card-action{transform: translateY(110%);}
    
    .card-1 .card-media,
    .card-3 .card-media{transition: opacity .5s, transform .5s;will-change: transform;}
    
    .card-1:hover .card-media__back,
    .card-3:hover .card-media__back{opacity: 1;}
    .card-1:hover .card-media__front,
    .card-3:hover .card-media__front{opacity: 0;}
    
    .s7 .section-header .title a{transition: opacity .15s;}
    
    .s7 .section-header .title a:hover{opacity: .6;}
    
    .filters-button:hover .filters-list,
    .sortby:hover .sortby-list{visibility: visible;}
    
    .selector-option:hover{background-color: var(--c4);color: var(--c2);}
   
}