/* Credits... and Best wishes to https://www.flaticon.com/authors/freepik */

:root{
    --pagewidth: 1400px;
    background-color: #f0f0f0;
    @media screen and (max-width: 1400px) {
        &:has(main.page-ad) { background-color: white; }

    }
}


/* GUI */
body {
    display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box;  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; margin: 0; padding-top: 110px;
    &:has(.menu-mobile-holder), &:has(.contacts-mobile-holder) { overflow: hidden; }
    @media screen and (max-width: 800px) {
        padding-top: 58px; padding-bottom: 58px;
        &:has(.actionbar)  {padding-bottom: 106px;}
    }
}
header {
    position: fixed; gap: 10px; left: 0; right: 0; top: 0px; height: 110px; z-index: 1; display: flex; flex-direction: column; transition: all .4s;
    &:before { content: "";  background: var(--fill); opacity: 1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all .4s; }
    @media screen and (max-width: 800px) { display: none; }
}
.awidth {
    width: var(--pagewidth); margin-left: auto; margin-right: auto;
    @media screen and (max-width: 1400px) { padding-left: 10px; padding-right: 10px; box-sizing: border-box}
}

/* DESKTOP - APPBAR */
.appbar-desktop {
    display: flex;  gap: 20px; position: relative; z-index: 1; box-sizing: border-box; padding-bottom: 10px;
    #logo-desktop {
        &.logo-img {background-size: contain; background-repeat: no-repeat; background-position: center;  width: 120px; transition: all .4s; height: 90px; align-self: end;}
        &.logo-text { font-size: 26px; color: var(--color_contrast);align-content: center; max-width: 400px; height: 90px; align-self: flex-end; transition: all .4s}
    }
    .tools { display: flex; flex-direction: column; flex: 1;}
    .nav-holder { display: flex; gap: 20px; align-items: center;}
    .menu-scut { padding: 20px; background: url("/_template/default/header-menu.svg") no-repeat center; background-size: 28px; border: solid 1px rgba(255, 255, 255, 0.5);  width: 55px; box-sizing: border-box; border-radius: 15px; cursor: pointer; transition: border-color 0.25s ease-out; align-self: normal;}
    .menu-scut:hover { border-color: rgba(255, 255, 255, 1); }
    .menu-scut.active { background: url("/_template/default/header-menu-close.svg") no-repeat center; background-size: 28px; }
    .sbox-holder { width: 100%; position: relative }
    .sbox-form { width: 100%;  border-radius: 15px; background-color: white; display: flex;  }
    .searchbox { flex: 1; font-size: 18px; padding: 17px; background: transparent; border: none; outline: none; }
    .sbox-results:empty { display: none; }
    .sbox-post { display: flex; width: 40px; border-radius: 10px; border: none; outline: none; background-color: color-mix(in oklab, var(--color_secondary) 20%, white); margin: 8px; cursor: pointer; transition: background-color 0.25s ease-out;}
    .sbox-post:hover { background-color: color-mix(in oklab, var(--color_secondary) 40%, white);}
    .sbox-post>div { flex: 1; mask: url('/_template/default/sbox-search.svg') no-repeat center /24px; background-color: var(--color_secondary); }
    .sbox-clr { width: 40px; border: none; outline: none; background-color:grey; opacity: .5; margin: 8px; cursor: pointer; mask: url('/_template/default/x.svg') no-repeat center /18px; transition: opacity 0.25s ease-out;}
    .sbox-clr:hover{ opacity:1}
    .sbox-results {
        padding: 10px; background-color: white; border-radius: 10px; margin-top: 10px; position: absolute; width: 100%;
    }
    .hdr-b {
        cursor: pointer;
        .hdr-i { mask-position: center; mask-repeat: no-repeat; mask-size: 32px; background-color: white; padding: 16px; &:hover { background-color: lightgrey;} }
        .i-user { mask-image: url('/_template/default/user.svg'); }
        .i-favs { mask-image: url('/_template/default/appbar-favorite.svg'); anchor-name: --desktop-appbar-ico-favs;}
        .i-cart {  mask-image: url('/_template/default/cart.svg'); anchor-name: --desktop-appbar-ico-cart;}
        .c-circle { position: absolute; position-anchor: --desktop-appbar-ico-cart; position: absolute; top: anchor(inside); right: anchor(inside); margin-right: -6px; margin-top: -6px;min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px;
            border-radius: 10px; background-color: orangered; color: white; font-size: 14px; border: 1px solid var(--color_contrast); font-weight: bold; display: block; text-align: center; line-height: 20px; &:empty { display: none;}
        }
        .c-cart {position-anchor: --desktop-appbar-ico-cart; }
        .c-favs { position-anchor: --desktop-appbar-ico-favs; }
    }


    .links-holder { display: flex; gap: 10px; margin-bottom: 5px; margin-top: 5px; padding-left: 70px; flex: 1;}
    .links-holder>a { padding: 5px 10px 5px 10px; color: white; text-decoration: none; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: all 400ms;}
    .links-holder>a:hover { backdrop-filter: brightness(75%); border: 1px solid white;}
    .lnk-lang { margin-left: auto; background-position: 10px center; background-repeat: no-repeat; background-size: 18px; padding-left: 36px!important; position: relative; z-index: 1}
    .lng-ru { background-image: url('/_template/default/flag-ru.svg');  }
    .lng-en { background-image: url('/_template/default/flag-en.svg');  }
    .lng-kk { background-image: url('/_template/default/flag-kk.svg');  }
    .lng-zh { background-image: url('/_template/default/flag-zh.svg');  }
    .sel-lang { position: absolute; right: 0; top: 0; background-color: white; color: black; display: flex; flex-direction: column; gap: 20px; padding: 20px; z-index: 1; border-radius: 10px;}
}
body.vscrolled100 {
    >header { top: -34px; height: 100px; }
    #logo-desktop.logo-img { height: 54px; margin-top: 0; margin-bottom: 0; }
    #logo-desktop.logo-text { height: 58px; }
    }

/* DESKTOP - MENU */
.menu-desktop-holder {
    display: flex; gap: 20px; padding: 20px; background-color: white; border-radius: 10px; box-sizing: border-box; max-height: calc(100vh - 120px);
    .menu-ttl { font-size: 28px; border-bottom: 2px solid lightgrey; padding-bottom: 10px; margin-bottom: 10px;}
    .menu-folders {
        display: flex;; flex-direction: column;
        .menu-items{
            display: flex; flex-wrap: wrap; gap: 30px; overflow-y: auto ;
            >div { display: flex; gap: 10px; min-width: 20%}
            >div>img { width: 30px; height: 30px;}
            .fldr-a { text-decoration: none; color: black; font-size: 20px; }
            .fldr-subs { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 10px;}
            .fldr-subs a { text-decoration: none; color: black; background-color: #e7e7e7; border-radius: 10px; padding: 5px;}
        }
    }
    .menu-promos{
        .menu-items { display: flex; flex-direction: column; gap: 20px; }
        .promo-item {
            display: flex; flex-direction: column; justify-content: end; width: 250px; height: 200px;background-repeat: no-repeat; background-size: cover; background-position: center; text-decoration: none; color: white;
            .promo-ttl-holder { padding: 10px;}
            .promo-ttl { font-size: 24px; margin-left: -20px;}
            .promo-txt { padding: 10px; margin: 10px; font-size: 14px; opacity: 0; transition: opacity .3s;}
        }
        .promo-item:hover { .promo-txt { backdrop-filter: grayscale(1) brightness(50%); opacity: 1; } }
    }
    .menu-more{
        min-width: 250px;
        .more-lnk { display: block; text-decoration: none; color: black; font-size: 16px; padding-bottom: 10px;}
        .more-lnk-spacer { padding: 10px;}
    }
    &:empty { display: none;}
}

/* MOBILE - APPBAR and BOTTOMBAR*/
.appbar-mobile {
    gap: 10px; position: fixed; z-index: 10; top: 0; right: 0; left: 0; height: 58px;  background: var(--fill); display: none; padding: 7px; box-sizing: border-box;
    .logo { background-size: contain;}
    .brcrmbs-sel { flex: 0 0 auto; width:40px; max-width: 40px; mask:url('/_template/default/appbar-breadcrumbs-sc.svg') no-repeat center /28px; background-color: white; transition: all .5s;}
    .title { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .5s; align-self: center; font-size: 20px; color: white; width: 100%; margin-left: -10px;}
    .sbox-form-mobile {
        &:before { content: "";  mask:url('/_template/default/appbar-search.svg') no-repeat center /22px; padding: 14px; background-color: white; transition: all .5s;}
        display: flex; gap: 10px; flex: 1; max-width: 100%; min-width: 24px; align-items: center; padding-left: 10px; padding-right: 10px; border: 1px solid white;
        background-color: rgb(255 255 255 / 0.26); border-radius: 20px;  transition: all .5s; overflow: hidden;
        input { flex: 1; background-color: transparent; border: none; outline: none; color: white; font-size: 18px; padding-top: 5px; padding-bottom: 5px; width: 100%;}
        .sbox-clr { mask:url('/_template/default/ctrl-cross.svg') no-repeat center /22px; background-color: white; }
    }
    .brcrmbs-holder {
        display: flex; gap: 10px; align-items: center; max-width: 0;  overflow: hidden; transition: all .5s; overflow: auto; margin-left: -10px;
        &::-webkit-scrollbar {display: none; } scrollbar-width: none;
        &:has(*){ max-width: 100%; flex: 1; margin-left:0;}
        a { background-color: var(--color_contrast); color: var(--color_primary); padding: 10px; border-radius: 20px; text-decoration: none; white-space: nowrap;
            max-width: 200px; min-width: 100px; text-overflow: ellipsis; overflow: hidden;
        }
    }
    .langs-sel { flex: 0 0 auto; width:40px; overflow: hidden; transition: all .5s;}
    .langs-holder {
        display: flex; flex: 1; max-width: 0;  justify-content: space-around; align-items: center; transition: all .5s;
        &:has(*) { max-width: 100%;}
        .lng-closer { mask:url('/_template/default/ctrl-cross.svg') no-repeat center/28px; padding: 15px; background-color: white; }
    }
    .lnk-lang { background-position: top center; background-repeat: no-repeat; background-size: 28px; display: block; padding-top: 28px; flex: 0 0 auto; width: 40px; color: var(--color_contrast); font-weight: bold; text-align: center; }
    .lng-ru { background-image: url('/_template/default/flag-ru.svg');  }
    .lng-en { background-image: url('/_template/default/flag-en.svg');  }
    .lng-kk { background-image: url('/_template/default/flag-kk.svg');  }
    .lng-zh { background-image: url('/_template/default/flag-zh.svg');  }

    @media (max-width: 800px) { display: flex; }
    .vscrolled100 & {
        .title { max-width: 100%; margin-left: 0; }
        .sbox-form-mobile:not(:has(.sbox-mobile-input:focus)) { max-width: 24px; border-color: transparent; background-color: transparent; &:before { mask-size: 28px;}}
    }
    .brcrmbs-sel-hidden { width: 0; opacity: 0;}
    body:has(.appbar-mobile .brcrmbs-holder:not(:empty)) & {
        .logo { display: none;}
        .title { max-width: 0; margin-left: -10px;}
        .langs-sel { margin-left: -10px;}
        .sbox-form-mobile {
            &:before { display: none;}
            max-width: 0; min-width: 0; padding-right: 0; padding-left: 0; border: 1px solid transparent; background-color: transparent; margin-left: -10px;
        }
        .langs-sel { width: 0;}
    }
    body:has(.appbar-mobile .langs-holder:not(:empty)) & {
        .brcrmbs-sel { width: 0;}
        .logo { display: none;}
        .title { max-width: 0; margin-left: -10px;}
        .sbox-form-mobile {
            &:before { display: none;}
            max-width: 0; min-width: 0; padding-right: 0; padding-left: 0; border: 1px solid transparent; background-color: transparent; margin-left: -10px;
        }
        .langs-sel { width: 0;}
    }
    body:has(.appbar-mobile .sbox-mobile-input:focus) & {
        .brcrmbs-sel { width: 0; margin-left: -10px}
        .logo { display: none;}
        .title { max-width: 0; margin-left: -10px;}
        .langs-sel { width: 0; margin-left: -10px;}
        .langs-holder {  margin-left: -10px;}
    }

}

.footbar-mobile {
    position: fixed; z-index: 10; bottom: 0; right: 0; left: 0; height: 58px; background: var(--fill); display: none; justify-content: space-around;
    >a, >div { flex-basis: 20%; display: flex; flex-direction: column; align-items: center; text-decoration: none;}
    .b-ico { background-color: white; width: 40px; height: 40px;}
    .b-lbl { color: var(--color_contrast); text-decoration: none; text-align: center; font-size: 12px;}
    .b-home .b-ico { mask:url('/_template/default/appbar-home.svg') no-repeat center /28px; }
    .b-menu .b-ico { mask:url('/_template/default/header-menu.svg') no-repeat center /26px; }
    .b-menu.active .b-ico, .b-contacts.active .b-ico { mask:url('/_template/default/header-menu-close.svg') no-repeat center /26px;  }
    .b-contacts .b-ico { mask:url('/_template/default/appbar-call.svg') no-repeat center /28px; }
    .c-circle { position: absolute; top: anchor(inside); right: anchor(inside); min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; border-radius: 10px; margin-top: 2px;
        background-color: orangered; color: white; font-size: 14px; border: 1px solid var(--color_contrast); font-weight: bold; display: block; text-align: center; line-height: 20px; &:empty { display: none;}
    }
    .b-cart {
        .b-ico { mask:url('/_template/default/appbar-cart.svg') no-repeat center /30px; anchor-name: --mobile-footbar-ico-cart; }
        .c-cart { position-anchor: --mobile-footbar-ico-cart; }
    }
    .b-favs {
        .b-ico { mask:url('/_template/default/appbar-favorite.svg') no-repeat center /28px;  anchor-name: --mobile-footbar-ico-favs; }
        .c-favs { position-anchor: --mobile-footbar-ico-favs;}
    }

    @media (max-width: 800px) { display: flex;}
}
.menu-mobile-holder {
    position:fixed; top: 58px; bottom: 58px; left: 0; right: 0; background-color: white; overflow-y: auto ; z-index: 1;
    .menu-promos{
        display: flex; gap: 20px; padding: 10px 0 10px 10px; overflow-x: auto; scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }
        .promo {
            min-width: 200px; max-width: 240px; height: 120px; border-radius: 10px; display: flex; text-decoration: none; background-size: cover;
            span { align-self: end; margin-bottom: 20px; margin-left: 10px; font-size: 18px;}
        }
    }
    .menu-folders{
        .folder-holder { border-bottom: 1px solid lightgrey; padding-top: 10px; padding-bottom: 10px; }
        .folder {
            display: flex; gap: 20px; align-items: center;
            .lbl { flex: 1; text-decoration: none; color: #494949; font-size: 18px; }
            img { width: 32px; height: 32px; margin-left: 10px}
        }
        .subfolders {
            display: flex; gap: 20px; padding-left: 10px; margin-top: 20px; overflow-x: auto; scrollbar-width: none;
            &::-webkit-scrollbar { display: none; }
            a { font-size: 18px; background-color: #dcdcdc; padding: 10px; border-radius: 20px; color: black; text-decoration: none; white-space: nowrap }
        }
    }
    .menu-more{
        .menu-posts {  border-bottom: 1px solid lightgrey; }
        .topics {
            display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding-left: 10px; margin-bottom: 10px;
            &::-webkit-scrollbar { display: none; }
            a { font-size: 18px; background-color: #dcdcdc; padding: 10px; border-radius: 20px; color: black; text-decoration: none; white-space: nowrap }
        }
        .lbl { display: block; text-decoration: none; color: #494949; font-size: 18px; padding-top: 15px; padding-bottom: 15px; margin-left: 10px; }
    }
}

.contacts-mobile-holder {
    position:fixed; top: 58px; bottom: 58px; left: 0; right: 0; background-color: white; overflow-y: auto ; padding: 20px; display: flex; flex-direction: column; z-index: 1;
    .cont-hdr {
        display: flex; gap: 20px; justify-content: center; align-items: center;
        img { max-width: 50%; max-height: 70px; object-fit: contain; height: auto;}
        .cont-name-holder { display: flex;; flex-direction: column; gap: 5px;}
        .cont-name { font-size: 20px;}
    }
    .chips-chat {
        display: flex; flex-direction: column; gap: 20px; padding-top: 20px; padding-bottom: 20px;
        .chip { display: flex; gap: 10px; border: 1px solid grey; padding: 15px; border-radius: 40px; align-self: center; color: black; text-decoration: none}
        .chip-txts { display: flex; flex-direction: column; gap: 3px; }
        .chip-tel::before { content: ""; mask:url('/_template/default/social-tel-wired-mask.svg') no-repeat center left/32px; background-color: #c57100; padding: 16px; }
        .chip-wa::before { content: ""; mask:url('/_template/default/social-whatsapp-wired-mask.svg') no-repeat center left/32px; background-color: #369100; padding: 16px; }
        .chip-tg::before { content: ""; mask:url('/_template/default/social-telegram-wired-mask.svg') no-repeat center left/32px; background-color: #0077cc; padding: 16px; }
        .chip-lbl { font-size: 12px;}
        .chip-val { font-size: 20px;}
    }
    .mbranch {
        text-align: center;
        .br-name { font-weight: bold; font-size: 18px;}
        .sched:not(:empty) { padding-top: 10px; padding-bottom: 10px;}
        .br-map { width: 100%; height: 300px;}
    }
    .lnk-more { display: block; align-self: center; padding: 10px; font-size: 16px; color: black;; text-decoration: none; border: 1px solid grey; border-radius: 20px; box-sizing: border-box; margin-top: 20px;}
}



/* SEARCH */
body:has(.appbar-desktop .sbox-results) {
    main { position: relative;}
    main:after {
        content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; filter: saturate(0) contrast(0.75) brightness(0.5);; backdrop-filter:saturate(0) contrast(0.75) brightness(0.5);;
    }
    footer{ filter: saturate(0) contrast(0.75) brightness(0.5);; }
}
.sbox-results-mobile {
    position: fixed; z-index: 1; top: 0; left:0; right: 0; bottom: 100%; transition: all .5s; background-color: white; opacity: 0;
    body:has(.appbar-mobile .sbox-mobile-input:focus) & { top: 58px;  bottom: 58px; opacity: 1; }
}
.serach-results-list-ads {
    display: flex; flex-direction: column; gap: 10px;
    .item-ad {
        display: flex; gap: 10px; text-decoration: none;
        img { height: 80px; width: 80px; object-fit: contain;}
        .ad-txts { display: flex; flex-direction: column; gap: 3px;}
        .ad-ttl { font-size: 20px; color: black; }
        .stk-off { color: darkred;}
        .stk-on { color: darkgreen;}
        .ad-prices {
            display: flex; gap: 10px; align-items: center;
            .discounted { font-size: 18px; color: orangered;}
            .regular { font-size: 18px; color: black;}
            .oldprice { font-size: 16px; color: grey; text-decoration: line-through;}
        }
    }
}




.tinter-body { background-color: rgba(0, 0, 0, 0.47); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; backdrop-filter: blur(3px) saturate(20%); opacity: 0;  transition: all .4s; }
.tinter-body.active { opacity: 1;}

footer{
    background-color: #dadada;
    .ftr-holder { padding-bottom: 20px; padding-top: 20px; display: flex; gap: 20px; justify-content: space-between;}
    .col-comm {
        display: flex;; flex-direction: column; gap: 20px;
        .soc-ttl { font-size: 14px; }
        .soc-lnks { display: flex; gap: 10px; padding-top: 10px; padding-bottom: 10px;}
        .soc-lnks>a { padding: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; filter: grayscale(1); transition: all .4s}
        .soc-lnks>a:hover { filter: grayscale(0); }
        .soc-lnk-tg { background-image: url('/_template/default/social-telegram.svg');}
        .soc-lnk-ig { background-image: url('/_template/default/social-instagram.svg');}
        .soc-lnk-tt { background-image: url('/_template/default/social-tiktok.svg');}
        .soc-lnk-yt { background-image: url('/_template/default/social-youtube.svg');}
        .soc-lnk-li { background-image: url('/_template/default/social-linkedin.svg');}
        .comm-i {
            display: flex; gap: 5px; align-items: center;
            .lbl { font-size: 12px; margin-bottom: 5px;}
            .lnk { font-size: 16px; color: black;}
        }
        .comm-tel::before { content: ""; mask: url('/_template/default/social-tel-wired-mask.svg') no-repeat left center/28px; padding: 14px; background-color: grey; transition: all .5s;}
        .comm-wa::before { content: ""; mask: url('/_template/default/social-whatsapp-wired-mask.svg') no-repeat left center/28px; padding: 14px;  background-color: grey; transition: all .5s;}
        .comm-tel:hover::before {  background-color: #005eff;}
        .comm-wa:hover::before {  background-color: #30b700;}
    }
    .col-addrs {
        display: flex; flex-direction: column; gap: 10px;
        a { color: black}
        .addr-name { font-weight: bold;}
        .addr-str>span:first-child::after { content: '. '}
        .sched-i { font-size: 14px;}
    }
    .col-pages {
        display: flex; flex-direction: column; gap: 10px;
        a { color: black}
        .lnk-page { font-size: 14px;}
    }
    .col-folders {
        display: flex; flex-direction: column; gap: 10px;
        a { color: black}
        .lnk-folder { font-size: 14px;}
    }
    .col-ttl { font-size: 18px;}
    @media screen and (max-width: 800px) {
        .ftr-holder {
            flex-wrap: wrap;
            >div { width: calc((100% - 20px) / 2) };
        }
    }
}



/* MAIN SECT AND CONTENT */
main {
    flex: 1; display: flex; flex-direction: column;
    >.pheader {
        padding-bottom: 10px;
        &:has(.cont:empty):has(.tools:empty) { display: none;}
    }
    &:not(:has(.pheader h1)) .breadcrumbs { margin-top: 20px; }
    .act-content { box-sizing: border-box;}
    h1.pttl {
        margin: 0; padding-top: 10px; padding-bottom: 10px; font-weight: normal;
        @media screen and (max-width: 800px) { font-size: 26px; }
        @media screen and (max-width: 600px) { font-size: 22px; }
    }
    .breadcrumbs {
        margin-bottom: 20px; display: flex; gap: 5px;
        a { color: grey; display: block}
        >div { display: flex; align-items: center}
        >div:not(:last-child)::after { content: ''; padding: 11px; mask: url("/_template/default/brcrmbs-arrow.svg") no-repeat center/18px; background-color: darkgrey; }
        .arw { mask: url("/_template/default/brcrmbs-arrow.svg") no-repeat center/18px; background-color: darkgrey;  padding: 10px; }
    }
    @media screen and (max-width: 800px) {
        >.breadcrumbs {
            order: 1; overflow-x: auto; margin-top: auto!important; padding-top: 20px;
            &::-webkit-scrollbar { display: none; } scrollbar-width: none;
            a { background-color: #e3e3e3; text-decoration: none; padding: 10px; border-radius: 20px; font-size: 16px; white-space: nowrap}
        }
    }
}



/* FRAG BANNER - HEADER */
.banner-header {
    padding-top: 110px;
    @media screen and (max-width: 800px) { padding-top: 58px;}
}
body:has(.banner-header.ambient) {
    padding-top: 0;
    &:not(.vscrolled100)>header::before { opacity: 0;}
}

/* FRAG: BANNER */
.banner-ambient{
    anchor-scope: --t-banner-anchor; display: flex; flex-direction: column; justify-content: space-between; background-position: center;
    background-size: cover; position: relative;
    &::before {
        content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; backdrop-filter: saturate(70%) blur(5px) brightness(100%) contrast(50%);
    }
    .banner-frames { width: 1800px; margin-left: auto; margin-right: auto;  aspect-ratio: 6 / 2; }
    .ban-dots-wrapper {
        position: absolute; position-anchor: --t-banner-anchor; bottom: anchor(inside); margin-bottom: 10px; left: 0; right: 0; display: flex;  justify-content: center;
        .ban-dots { display: flex; gap: 10px; background-color: rgba(0 0 0 / 0.5); padding: 5px; border-radius: 10px; }
        .ban-dot { padding: 5px; border-radius: 10px; background-color: rgba(255 255 255 / 0.3); cursor: pointer;}
        .ban-dot.active { background-color: white;}
    }
    .idx-badges { position: relative;}
    @media screen and (max-width: 1900px) { .banner-frames { width: 1400px; aspect-ratio: 5 / 2}  }
    @media screen and (max-width: 1400px) { padding-left: 10px; padding-right: 10px; .banner-frames {width: 100%;}  }
    @media screen and (max-width: 1000px) { .banner-frames { aspect-ratio: 6 / 3} }
    @media screen and (max-width: 800px) { width: 100%; margin: 0; padding-left: 0; padding-right: 0;  .banner-frames { aspect-ratio: 5 / 3; border-radius: 0;} }
    @media screen and (max-width: 700px) { .banner-frames { aspect-ratio: 6 / 4} }
    @media screen and (max-width: 600px) { .banner-frames { aspect-ratio: 1 / 1} }
}

.banner-frames {
    anchor-name: --t-banner-anchor; container-name: tbanner; container-type: size; aspect-ratio: 5 / 2; border-radius: 10px;  width: 100%;
    position: relative; flex: 1; display: flex; overflow-x: scroll; scrollbar-width: none; box-sizing: border-box;
    ::-webkit-scrollbar { display: none; width: 0px; height: 0px; }
    .fr-frame {
        min-width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; padding: 20px; box-sizing: border-box;
    }
    .fr-texts { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .fr-title { display: inline-block; font-size: 48px; font-weight: bold; text-align: center; }
    .fr-text { display: inline-block; font-size: 24px;text-align: center; }
    .fr-img { flex: 1; object-fit: contain;}
    .fr-buttons-d { display: flex; gap: 10px; margin-top: 10px; padding-bottom: 20px;}
    .fr-buttons-m { display: none; justify-content: center; padding-bottom: 20px;}
    .fr-button { border:none; font-size: 20px; padding: 10px; border-radius: 5px}
    .fr-frame.fr-pos-left {
        .fr-texts { align-items: start}
        .fr-title, .fr-text { text-align: left;}
    }
    .fr-frame.fr-pos-right {
        flex-direction: row-reverse;
        .fr-texts { align-items: end}
        .fr-title, .fr-text { text-align: right;}
    }
    .fr-frame.fr-pos-top {
        .fr-texts { justify-content: start;}
    }
    .fr-frame.fr-pos-bottom {
        .fr-texts { justify-content: end;}
    }
    .fr-frame.fr-pos-top:not(:has(.fr-img)){
        .fr-buttons-d { flex: 2; align-items: end;}
    }
    @container tbanner (aspect-ratio <= 1) {
        .fr-frame:not(.fr-pos-m-bottom) { flex-direction: column; }
        .fr-texts { align-items: center!important;}
        .fr-title { font-size: 28px;}
        .fr-text { font-size: 18px;}
        .fr-title, .fr-text { text-align: center!important;}
        .fr-buttons-d { display: none;}
        .fr-buttons-m { display: flex; gap: 10px}
        .fr-frame.fr-pos-m-bottom {
            .fr-buttons-m { display: none;}
            .fr-buttons-d { display: flex;}
            flex-direction: column-reverse;
        }
    }
}




/* INDEX PAGE */
.idx-badges {
    flex-wrap: wrap; margin-left: auto; margin-right: auto; display: flex; margin-top: 30px; margin-bottom: 20px; gap: 20px; justify-content: center;
    .idx-badge {
        background-color: rgba(255, 255, 255, 0.5); max-width: 20%; padding: 10px; border-radius: 10px; text-align: center; min-width: 150px; max-width: 200px;
        .bdg-ttl { font-size: 16px; font-weight: bold;}
        .bdg-txt { font-size: 12px;}
        img { max-height: 48px;}
    }
    @media screen and (max-width: 800px) {
        flex-wrap: nowrap; overflow-x: scroll ; justify-content: flex-start; width: 100%; padding-left: 20px; box-sizing: border-box;; padding-right: 20px;
        .idx-badge { flex: 0 0 160px;}
    }
}
.idx-fldrs {
    display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px;
    .fldr-i { display: flex; flex-direction: column; text-decoration: none; height: 150px; width: 250px; background-size: cover; border-radius: 15px; overflow: hidden; justify-content: space-between; background-color: white;}
    .fldr-i>span { color: black; font-size: 24px; padding: 10px;}
    .fldr-if { width: 90%; margin-top: -10px; flex: 1; align-self: end; background-size: cover; background-repeat: no-repeat; background-position: left top; }
    .fldr-ii { width: 100%; margin-top: -10px; flex: 1; align-self: end; background-size: contain; background-repeat: no-repeat; background-position: right top; }
    .fldr-ino { width: 100%; margin-top: -10px; flex: 1; align-self: end; background-color: #dadada; mask: url("/_template/default/folder-opened.svg") no-repeat right top/contain; }
    @media screen and (max-width: 1400px) {
        flex-wrap: nowrap; overflow-x: scroll; justify-content: start;  .fldr-i { width: 200px; min-width: 200px;}
    }
    @media screen and (max-width: 800px) {
        gap:10px; .fldr-i { width: 120px; min-width: 120px; height: 100px;} .fldr-i>span { font-size: 16px;}
    }
}
.idx-attrs {
    .attr-list { overflow-x: auto; display: flex; gap: 20px; padding-bottom: 20px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
    .attr-ttl { font-size: 24px; }
    .attr-lbl { text-align: center;}
    .attr-itm {
        text-decoration: none; color: black; flex: 0 0 160px; background-color: white; padding: 10px; border-radius: 10px; box-sizing: border-box; display: flex;; flex-direction: column; gap: 20px; align-items: center;
        img { width: 120px; height: 120px; aspect-ratio: 1 / 1; object-fit: contain;}
    }
    @media screen and (max-width: 800px) {
        .attr-itm {
            flex: 0 0 90px;
            img{ width: 60px; height: 60px;}
            .attr-lbl { font-size: 14px;}
        }
    }
}




/* ADS */
.ads-cards {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 25px;
    @media screen and (max-width: 600px) {gap: 15px; }
    .itm {
        background-color: white; position: relative; flex-basis: 260px; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; border-radius: 10px; text-decoration: none; color: #3d3d3d;
        >img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; align-self: center; }
        .has-video {
            &::before {content: ''; mask:url("/_template/default/has_video.svg") no-repeat left center/14px; background-color: white; padding: 8px;}
            position: absolute; top: 10px; left: 10px; color: white; font-weight: bold; font-size: 13px; background-color: #ff9100; padding: 3px; border-radius: 5px;
        }
        .bottom{  margin-top: auto; padding-top: 5px;}
        .attrs { font-size: 12px; color: #575757;}
        @media screen and (max-width: 600px) {
            flex-basis: calc((100% - 15px) / 2);
        }
    }
}
.ads-none {
    display: flex; flex-direction: column; gap: 40px; align-items: center; width: 100%; height: 500px; justify-content: center;
    .ads-none-t1 { font-size: 36px; color: grey;}
    .ads-none-t2 { font-size: 20px; color: grey;}
}


.ads-cards>.itm .prc-h {margin-top: 10px; display: flex; justify-content: space-between;}
.ads-cards>.itm .prc-h .prc { font-size: 18px; font-weight: bold;}
.ads-cards>.itm .prc-act { font-weight: bold; }
.ads-cards>.itm .prc-old { text-decoration: line-through; color: darkgrey; font-size: 16px; margin-left: 10px; }

.ads-cards>.itm .stk { font-size: 12px; }
.ads-cards>.itm .stk-on { color: #048d00; font-weight: bold;}
.ads-cards>.itm .stk-hiring { color: #0046ac; font-weight: bold;}

.ads-cards>.itm .acts span { display: inline-block; padding-left:5px; padding-right:5px; padding-top: 3px; padding-bottom: 3px; border-radius: 5px; margin-right: 5px; font-size: 12px;}
.ads-cards>.itm .acts span.def { background-color: #fff200; color: black;}

.ads-subfolders {
    display: flex; gap: 20px; padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap;
    >a { display: flex; flex-direction: column;  border-radius: 15px; height: 100px; width: 200px; background-color: white; background-position: center; background-size: cover; text-decoration: none;}
    >a.no-imgs { justify-content: center; align-items: center; .ttl{ padding: 0;}}
    .img-f { flex: 2; background-size: cover; background-repeat: no-repeat; width: 90%; align-self: end}
    .img-i { flex: 2; background-size: contain; background-repeat: no-repeat; background-position: center; width: 100%; align-self: end}
    >a>img { width: 100px; height: 60px; object-fit: contain; }
    >a>.ttl { display: block; color: black; font-size: 18px; padding-left: 10px; padding-top: 5px; text-align: center;}
    >a:has(.img-i) {
        flex-direction: column-reverse; justify-content: center; padding: 5px;
        .ttl { font-weight: normal; font-size: 16px; align-self: center; padding: 0;}
    }
    &:empty { display: none;}
    @media screen and (max-width: 800px) {
        flex-wrap: nowrap; overflow-x: auto;
        >a { flex: 0 0 160px;}
        }
}
main>.pheader { display: flex; align-items:center;  .cont { flex: 1;} }
main>.header .tools {
    .tb { display: inline-block; padding: 18px; background-size: 24px; background-position: center; background-repeat: no-repeat; cursor: pointer; border-radius: 3px; }
    .tb:hover { background-color: lightgrey;}
    .tb-filter { background-image: url("/_template/default/tbar-filter.svg"); }
    .tb-order { background-image: url("/_template/default/tbar-order.svg"); }
}

.ads-filter {
    background-color: white; margin-bottom: 20px; border-radius: 10px; display: none;
    >div { margin-top: 5px; margin-bottom: 5px; display: inline-block; width: 250px; margin: 20px; vertical-align: top;}
    .tvals>span { background-color: #ededed; padding: 5px; border-radius: 3px; display: inline-block; border: 1px dashed #cdcdcd; cursor: pointer; }
    .tvals>span:hover { border-color: #9c9c9c;}
    .tvals>span.selected { background-color: #939393; color: white; }
}

/* COLLECTIONS - PROP VALS, TAG VALS */
.page-collv {
    .vals-t-list, .vals-p-list {
        display: flex; flex-wrap: wrap; gap: 20px;
        >a {
            flex: 0 0 180px; display: flex;flex-direction: column; gap: 10px; align-items: center; background-color: white; border-radius: 20px; padding: 20px; color: black; text-decoration: none; box-sizing: border-box;
            img { max-width: 100px; max-height: 100px; aspect-ratio: 1 / 1; object-fit: contain; }
            .i-ttl { font-size: 18px; }
            .i-anno { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; font-size: 12px; color: grey; }
            @media screen and (max-width: 800px) { flex: 0 0 calc((100% - 40px) / 3); }
            @media screen and (max-width: 600px) { flex: 0 0 calc((100% - 20px) / 2); }
        }

    }
}

/* PHOTOROLLER */
.photoroller {
    .preview{
        width: 100%; height: auto; aspect-ratio: 1 / 1; white-space: nowrap; font-size: 0; overflow: hidden; position: relative;
        .itm { width: 100%; object-fit: contain; height: 100%; display: inline-block }
        .itm.trans { transition: margin 200ms; }
        .ctrl-vid {
            position: absolute; bottom: 5%; left: 0; right: 0; text-align: center; display: none;
            &.show { display: block; }
            >div { background-color: rgba(255, 255, 255, 0.5); display: inline-block; padding: 3px; border-radius: 5px;}
            >div>svg { width: 28px; display: inline-block; cursor: pointer; padding: 5px; border-radius: 8px; margin-left: 10px; margin-right: 10px;}
            >div>svg:hover { background-color: white; fill: #5d5858;}
        }
    }
    .thumbs {
        display: flex; flex-wrap: wrap; justify-content: center;
        .itm { display: flex; box-sizing: border-box; padding: 5px; width: calc(100% / 6 ); max-width: 120px; min-width: 60px; height: auto; aspect-ratio: 1 / .8;    cursor: pointer;}
        .itm-img { flex: 1; background-repeat: no-repeat; background-position: center; background-size: 90%;  border: 2px solid #dedede; }
        .itm:hover { border-color: rgba(52, 51, 52, 0.92); }
        .itm .plico { width: 50px; fill: white; opacity: .7; }
    }
}

/* PROMOS */
main.page-promos {
    .promos-list { display: flex; flex-direction:column; gap: 20px;}
    .i-promo {
        padding: 20px; background-color: white; border-radius: 20px; overflow: hidden; display: flex; gap: 20px; color: black; text-decoration: none;
        img { width: 300px; aspect-ratio: 4 / 3; object-fit: cover;}
        .i-txts { display: flex;; flex-direction: column;; gap: 10px;}
        .i-ttl { font-size: 24px;}
        .i-anno { font-size: 20px;}
        .i-sticker { align-self: start; padding: 5px;}
        @media screen and (max-width: 800px) { img { width: 200px; } }
        @media screen and (max-width: 600px) {
            flex-direction: column;
            img { width: 100%; aspect-ratio: 4/2 }
        }
    }
}

/* AD */
main.page-ad {
    .act-content { background-color: white; border-radius: 15px; padding: 0; }
    .photoroller {
        flex: 0 0 600px;
    }
    .sect-item { display: flex; width: 100%; gap: 50px; margin-bottom: 20px;}
    .s1b2 { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-left: 10px; padding-right: 10px; min-width: 0;}
    .h1-holder{
        display: flex; gap: 10px;
        .favorite-star { mask: url(/_template/default/star.svg) no-repeat center/32px; background-color: lightgrey; padding: 18px; }
        .favorite-star.favorited { background-color: #ffae00;}
        h1 { font-weight: normal; font-size: 24px; flex:1}
    }
    .rtext { padding-left: 10px; padding-right: 10px;}
    .attrs-list>div { display: flex; justify-content: space-between; border-bottom: 1px solid lightgray; margin-bottom: 5px; padding-bottom: 5px; }
    .attrs-list>div:last-child { border-bottom: none;}
    .attrs-featured {
        display: flex; flex-direction: column; gap: 10px;
        >div { display: flex; gap: 10px; padding: 10px; border: 1px solid lightgrey; border-radius: 5px;}
        .plogo { max-height: 100px; max-width: 200px;}
        .attrs-f-c2 { display: flex; flex-direction: column; gap: 5px; a {padding: 10px; color: dimgray; background-color: #e3e3e3; border-radius: 20px; align-self: start; text-decoration: none;}}
        .ttlg { font-size: 14px; font-weight: bold;}
        .ttlv { font-size: 20px; }
        .anno { color: grey; font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 3;overflow: hidden;  text-overflow: ellipsis;  }
    }
    .job-sect {
        margin-top: 5px; margin-bottom: 5px;
        .job-sect-ttl { color: grey; font-weight: bold; margin-bottom: 5px; }
        .job-sect-salary { font-size: 32px;}
    }
    .job-tbl-row {
        display: flex; justify-content: space-between; margin-bottom: 5px; margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dotted grey;
        .job-tbl-lbl { color: grey;}
        .job-tbl-txt {text-align: right;}
    }
    .job-feature::before { content: ""; mask: url("/_template/default/check-circle-fat.svg") no-repeat left center/20px; background-color: darkgreen; padding-right: 24px; }
    .prc-holder { font-size: 32px;}
    .ad-pricelist{
        display: flex; flex-direction: column; font-size: 18px;
        .row { display: flex; justify-content: space-between; border-bottom: 1px solid lightgrey; margin-bottom: 10px; padding-bottom: 10px;}
    }
    .ad-branches{
        display: flex; flex-direction: column; gap: 5px;
        .ad-branches-list { display: flex; flex-direction: column; gap: 5px; padding-left: 10px;}
        .ad-branches-ttl { font-size: 18px;}
        .branch-addr { color: grey;}
    }
    .ad-devivto{
        display: flex;; flex-direction: column; gap: 10px;
        .ad-devivto-ttl { font-size: 18px;}
        .ad-devivto-list{ display: flex; flex-direction: column; gap: 5px; padding-left: 10px;}
    }
    .estate-city {
        display: flex; flex-direction: column; gap: 5px;
        .city-n { font-size: 20px; font-weight: bold;}
        .city-pth { font-size: 16px; color: grey;}
    }
    .estate-map {
        height: 400px;
    }
    .also-in-folder {
        padding-left: 10px;
        a { display: inline-block; padding: 10px; border-radius: 20px; background-color: #e8e8e8; text-decoration: none; color: grey;}
    }
    .art-offered {
        display: flex; flex-direction: column; gap: 5px;
        .stickers { display: flex; gap: 5px; >span { padding: 5px;} }
        .prc-holder {
            display: flex; gap: 10px; align-items: center;
            .prc-old { font-size: 28px; color:grey; text-decoration: line-through}
            &:has(.prc-old) .prc { color: orangered;}
        }
        .sav-holder{
            display: flex; align-items: center; gap: 10px;
            .sav-amnt { color: orangered;}
            .sav-perc { color: orangered; border: 1px solid orangered; border-radius: 3px; padding: 3px 5px 3px 5px; font-size: 14px;}
        }
        .cbk-holder {
            color: #006300;
            &:not(:empty) { &:before {content:'+'} }
        }
        .details {
            .sku { font-weight: bold; color: grey;}
            .dsc { color: grey;}
            span+span { margin-left: 10px};
        }
        .details span+span { margin-left: 10px;}
        .buybutton-holder {
            align-self: flex-start;
            .incart {
                display: flex; gap: 10px; background-color: green; padding: 10px; border-radius: 5px; color: white; justify-content: flex-start; font-size: 18px; align-items: center;
                .incart-spinner { display: flex; gap: 5px; align-items: center; }
                .lbl { color: white; text-decoration: none; &:hover { opacity: .8; cursor: pointer; } }
                .s-count { margin-left: 5px; margin-right: 5px;}
                .s-less { mask: url("/_template/default/ctrl-spinner-less.svg") no-repeat center/28px; background-color: white; padding: 14px; cursor: pointer; &:hover{ opacity: .8} }
                .s-more { mask: url("/_template/default/ctrl-spinner-more.svg") no-repeat center/28px; background-color: white; padding: 14px;cursor: pointer; &:hover{ opacity: .8} }
            }
        }
        .actionbar{
            align-self: start; z-index: 1;
            .favorite-star{ display: none;  mask: url(/_template/default/star.svg) no-repeat center/28px; background-color: lightgrey; padding: 24px;}
            .txts { display: none;}
            .offstocked { background-color: #bababa; color: white; line-height: 48px; font-weight: 22px; padding-left: 20px; padding-right: 20px; white-space: nowrap; line-height: 36px;}
        }
        @media screen and (max-width: 800px) {
            .actionbar {
                position: fixed; bottom: 58px; left: 0; right: 0; height: 48px; background-color: white; display: flex; justify-content: space-between;
                background-color: color-mix(in srgb, var(--color_secondary), white 90%); align-items: center;
                .incart, .b-buy { border-radius: 0;}
                .favorite-star { display: block; }
                .favorite-star.favorited { background-color: #ffae00;}
                .offstocked { line-height: 48px;}
                .txts {
                    flex: 1; display: flex; flex-direction: column; min-width: 0;
                    .txts-1, .txts-2 { display: flex; gap: 5px; }
                    .sku { color: grey; font-weight: bold; white-space: nowrap;}
                    .descr { white-space: nowrap; overflow: hidden;; text-overflow: ellipsis; color: grey;}
                    .cbk:not(:empty) { &:before {content:'+'} }
                    .price-reg {font-weight: bold; white-space: nowrap; font-size: 14px;}
                    .price-disco { color: orangered; font-weight: bold; white-space: nowrap; font-size: 14px;}
                    .cbk { color: green; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px;}
                }
            }
        }

    }
    .art-selector{
        display: flex; flex-direction: column; gap: 20px;
        .art-list{
            display: flex; gap: 10px; flex-wrap: wrap;
            .art-itm { flex: 0 0 46%;  display: flex; flex-direction: column; gap: 5px; border: 3px solid lightgrey; border-radius: 5px; padding: 5px; cursor: pointer; min-width: 0;}
            .art-attrs { font-size: 14px;}
            .art-itm:hover { border: 3px solid grey;}
            .art-itm.active { border: 3px solid var(--color_primary);}
            .art-itm .dsc { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #505050; width: 100%}
            .txt-1 { display: flex; gap: 10px; align-items: center;}
            .sku { font-weight: bold;; white-space: nowrap; font-size: 16px; color: #3a3a3a }
            .cbk-hldr { font-size: 14px; color: #005a00; margin-left: auto;}
            .prc-hldr { display: flex; gap: 10px; align-items: center;}
            .prc-reg { color: black; font-size: 18px; font-weight: bold; white-space: nowrap;}
            .prc-off { color: orangered; font-size: 18px; font-weight: bold; white-space: nowrap;}
            .prc-old { color: grey; text-decoration: line-through; white-space: nowrap;}
            .stk { font-size: 13px; padding: 5px; border-radius: 3px; color: white; align-self: flex-start; margin-top: auto; white-space: nowrap; margin-left: auto;}
            .stk-on { background-color: green;}
            .stk-off { background-color: #9c9c9c;}
            @media screen and (max-width: 1200px) {
                flex-direction: column; flex-wrap: nowrap;
                .art-itm { flex: auto;}
            }
            @media screen and (max-width: 800px) {
                overflow-x: scroll; padding-left: 10px; margin-left: -10px; margin-right: -10px; flex-direction: row;
                &::-webkit-scrollbar { display: none; } scrollbar-width: none;
                .art-itm {flex: 0 0 200px;}
                .txt-1 { flex-direction: column; gap: 5px; align-items: flex-start;}
                .stk { margin-left: 0;}
                .prc-hldr { flex-wrap: wrap; gap: 5px; align-items: center; margin-top: auto;}
                .cbk-hldr { flex-basis: 100%}
            }
        }
    }
    @media screen and (max-width: 1400px) {
        .sect-item { gap: 20px;}
        .photoroller { flex: 0 0 600px;}
    }
    @media screen and (max-width: 1000px) {
        .prc-holder { .prc, .prc-old{ font-size: 24px!important;}}
        .photoroller {
            flex: 0 0 400px;


        }
    }
    @media screen and (max-width: 800px) {
        >.header { display: none;}
        .sect-item { flex-direction: column; gap: 0;}
        .h1-holder h1 { margin-bottom: 10px; margin-top: 10px; font-size: 18px; font-weight: bold;}
        .photoroller { flex: 0 0 100%;
            >.thumbs {
                flex-wrap: nowrap; overflow-x: scroll; justify-content: flex-start;
                .itm { width: auto; flex: 0 0 90px;}
            }
        }
    }
    @media screen and (max-width: 800px) {
        .photoroller>.thumbs .itm { flex: 0 0 60px;}
    }
}


main.page-checkout{
    .checkout-grid{
        display: grid; grid-template-columns: 100px 1fr 100px min-content 100px; padding: 10px; background-color: white; border-radius: 5px; margin-bottom: 20px;
        &:has(.hdr-cbk) { grid-template-columns: 100px 1fr 100px min-content 100px 100px; }
        .hdr { font-weight: bold; font-size: 18px;}
        >* { border-bottom: 1px solid lightgrey; padding: 5px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center}
        >*:nth-last-child(-n+7) { border-bottom: none}
        .c-thmb>img { width: 90px; height: 60px; object-fit: cover;}
        .c-price {
            &:has(.promo) {
                .promo { color: orangered;; font-weight: bold;}
                .nonpromo { text-decoration: line-through; color:grey; }
            }
        }
        .c-amount { font-size: 18px;}
        .c-cashback { font-size: 18px; color: green}
        .c-texts>.ttl { font-weight: bold; color: black; }
        .mob-txt { display: none;}
        .mob-price {
            &:has(.promo) {
                .promo { color: orangered;; font-weight: bold;}
                .nonpromo { text-decoration: line-through; color:grey; margin-left: 10px;}
            }
        }
        @media screen and (max-width: 800px) {
            grid-template-columns: 100px 1fr min-content 100px!important;
            .mob-price { display: block;}
            .hdr-price, .c-price, .hdr-cbk, .c-cashback { display: none;}
        }
        @media screen and (max-width: 600px) {
            grid-template-columns: 100px 1fr min-content!important;
            .mob-amnt { display: block;}
            .hdr-amnt, .c-amount { display: none;}
        }
        @media screen and (max-width: 500px) {
            .c-qty .vw-spinner { flex-direction: column-reverse; border: 1px solid grey; border-radius: 30px; align-items: center;}
        }
    }
    .form-and-summary{
        display: flex; gap: 25px; align-items: stretch;
        >div { flex: 1;}
        .b-auth { font-weight: normal; height: auto; text-align: center;}
        @media screen and (max-width: 800px) { flex-wrap: wrap; >div { flex: 0 0 100%}}
    }
    .form { display: flex; flex-direction: column; gap: 10px;}
    .final { display: flex; flex-direction: column; gap: 10px; align-items: center;}
    .summary {
        display: flex; flex-direction: column; gap: 10px;
        .note { padding: 10px; background-color: white; border-radius: 5px;}
        .payway-item { font-weight: bold; margin-top: 5px; margin-bottom: 5px;}
        .button { align-self: center;}
    }
    .amounts-grid-ttl { font-size: 22px; margin-bottom: 10px; padding: 5px;}
    .amounts-grid {
        display: grid; grid-template-columns: auto 1fr;
        >div { border-bottom: 1px dashed lightgrey; padding: 5px;}
        .lbl-total, .val-total { font-size: 20px; font-weight: bold}
        .lbl-cbk, .val-cbk { font-weight: bold; color: #1d5f1f;}
        .val { white-space: nowrap;}

    }
    .tel-freezed {
        display: flex; gap: 10px; align-items: center; padding: 5px; background-color: white; border-radius: 5px;
        .col-1 {
            display: flex; flex-direction: column; gap: 5px; flex: 1;
            .tel-lbl { font-size: 14px; color: grey;}
            .tel-val { font-size: 18px;}
        }
        .b-logout { margin-right: 10px; padding: 8px; border-radius: 4px; background-color: #e4e4e4; cursor: pointer; }
        .b-logout:hover { background-color: #e3eef6;}
    }
    .note-authed{
        background-color: white; padding: 10px; border-radius: 5px; display: flex;gap: 10px; align-items: center;
        .ico-chk { mask: url("/_template/default/smartphone-happy.svg") no-repeat center/24px; background-color: darkgreen; padding: 12px}
    }
    .cart-empty {
        display: flex; flex-direction: column; gap: 50px; align-items: center; padding: 50px; color: grey; font-size: 24px;
        .cart-empty-ico{ mask: url("/_template/default/checkout-empty.svg") no-repeat center/64px; background-color: grey; padding: 12px; padding: 40px; }
    }
}


main.page-order{
    .notyfy-login {
        display: flex; gap: 20px; align-items: center; padding: 10px; background-color: #ffd183; border-radius: 5px;
        .ico-attent { mask:url("/_template/default/attention.svg") no-repeat center/48px; padding: 32px; background-color: #bd846c;}
    }
    .st-holder {
        padding: 10px; border-radius: 5px; background-color: white; margin-bottom: 20px; display: flex;; flex-direction: column; gap: 10px;
        .st-status { font-size: 20px;}
        .st-payment-remained { font-size: 20px;}
        .pw-list {
            display: flex; flex-direction: column; gap: 10px; border-top: 1px solid lightgrey; padding-top: 10px;
            .pw-item { display: flex; gap: 20px;}
            .pw-txts { flex: 1;}
            .pw-name { font-size: 18px;}
        }
        .st-tracknum { font-size: 18px; font-weight: bold;}
    }

    .doc-holder { display: flex;; flex-direction: column; gap: 20px; padding: 10px; border-radius: 5px; background-color: white;}
    .doc-notfound { font-size: 18px; color: grey; text-align: center; padding: 50px;}
    .doc-noitems { font-size: 18px; color: grey; text-align: center; padding: 30px;}
    .doc-flexcols {
        display: flex; gap: 20px; >div:last-child { flex: 1} >div:first-child { flex: 2}
        .doc-amonunts-grid, .doc-form-grid { display: grid; grid-template-columns: 1fr 1fr; >div { padding: 5px; border-bottom: 1px dashed grey;} }
    }
    .doc-items-grid {
        display: grid; grid-template-columns: 20px 1fr 90px 90px 90px 120px;
        &:has(.i-hdr-cbk) { grid-template-columns: 20px 1fr 90px 90px 90px 90px 120px;}
        >div { border: 1px solid grey; padding: 5px;}
        .i-hdr { background-color: #dfdfdf;}
        .i-sku, .i-descr, .i-price-old, .i-discount, .i-cbk-perc { font-size: 13px;}
        .i-price-old { text-decoration: line-through; color: grey;}
        .i-notfound { color: grey;; font-style: italic;}
    }

    .hc-holder { display: flex;; flex-direction: column; gap: 20px; padding: 10px; border-radius: 5px; background-color: white; }
    .hc-items-grid {
        display: grid; grid-template-columns: 20px 1fr 90px 90px 90px; margin-bottom: 20px; margin-top: 20px;
        &:has(.i-hdr-cbk) { grid-template-columns: 20px 1fr 90px 90px 90px 90px; }
        >div { border: 1px solid grey; padding: 5px;}
        .i-hdr { background-color: #dfdfdf;}
        .i-sku, .i-descr, .i-price-old, .i-discount, .i-cbk-perc { font-size: 13px;}
        .i-price-old { text-decoration: line-through; color: grey;}
    }
    .hc-flexcols { display: flex; gap: 20px; >div:last-child { flex: 1} >div:first-child { flex: 2}}
    .hc-ttl { font-size: 20px; margin-bottom: 10px; font-weight: bold;}
    .hc-note-1 { font-size: 13px; background-color: #d6d6d6; padding: 10px; border-radius: 5px; margin-bottom: 20px;}
    .hc-amonunts-grid, .hc-form-grid { display: grid; grid-template-columns: 1fr 1fr; >div { padding: 5px; border-bottom: 1px dashed grey;} }
    .val-hidden { color: grey; font-style: italic;}

    .cancel-holder { padding: 10px; border-radius: 5px; background-color: white; margin-top: 20px; display: flex; gap: 20px; align-items: center; .cancel-note{ flex: 1}}

    @media screen and (max-width: 800px) {
        .doc-flexcols, .hc-flexcols {
            flex-wrap: wrap;
            >div:first-child { flex: 0 0 100%;}
        }
        .doc-items-grid, .hc-items-grid { overflow-x: scroll;}
    }
}


/* PAGE - CONTACTS */
.page-contacts{
    .v-comp-call{
        display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
        >div { display: flex; gap: 10px; padding: 10px; align-items: center; border: 1px solid grey; border-radius: 10px; cursor: pointer; transition: all .5s; &:hover { border-color: #1d5f1f; background-color: #e6ece4}  }
        .comm-tel::before { content: ""; mask: url('/_template/default/social-tel-wired-mask.svg') no-repeat left center/34px; padding: 20px; background-color: grey; transition: all .5s;}
        .comm-wa::before { content: ""; mask: url('/_template/default/social-whatsapp-wired-mask.svg') no-repeat left center/34px; padding: 20px;  background-color: grey; transition: all .5s;}
        .comm-tel:hover::before {  background-color: #005eff;}
        .comm-wa:hover::before {  background-color: #30b700;}
        .lnk { text-decoration: none; font-size: 18px; color: black; margin-top: 5px; display: block;}
    }
    .soc-sect {
        .soc-ttl { text-align: center; font-size: 24px; margin-top: 20px; margin-bottom: 20px;}
        .soc-lnks { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
        .soc-lnks>a {
            display: flex; flex-direction: column; gap: 10px; flex: 0 0 100px; text-align: center; color: black; text-decoration: none; font-size: 13px; cursor: pointer; padding: 10px; border: 1px solid transparent;
            &:hover { border: 1px solid grey; border-radius: 20px; }
        }
        .lnk-tg::before { content: ''; background: url('/_template/default/social-telegram.svg') no-repeat center top/44px; padding: 24px; }
        .lnk-ig::before { content: ''; background: url('/_template/default/social-instagram.svg') no-repeat center top/44px; padding: 24px;}
        .lnk-tt::before { content: ''; background: url('/_template/default/social-tiktok.svg') no-repeat center top/44px; padding: 24px;}
        .lnk-th::before { content: ''; background: url('/_template/default/social-threads.svg') no-repeat center top/44px; padding: 24px;}
        .lnk-yt::before { content: ''; background: url('/_template/default/social-youtube.svg') no-repeat center top/38px; padding: 24px;}
        .lnk-li::before { content: ''; background: url('/_template/default/social-linkedin.svg') no-repeat center top/44px; padding: 24px;}
    }
    .branches-sec {
        .branches-ttl { text-align: center; font-size: 24px; margin-top: 20px; margin-bottom: 20px;}
        .branches-list { display: flex;; flex-direction: column; gap: 10px;}
        .branch-item {
            background-color: white; padding: 20px; border-radius: 10px; display: flex; gap: 20px; flex-wrap: wrap;
            .i-txts {
                display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 300px;
                .branch-ttl { font-size: 20px;}
            }
            .i-point.maped{ flex: 0 0 400px; min-height: 300px;}
            .i-imgs:not(:empty){ flex: 0 0 400px;}
            @media screen and (max-width: 1200px) {
                &:has(.i-point:not(:empty)):has(.i-imgs:not(:empty)) {
                    .i-txts { flex: 0 0 100% }
                    .i-point.maped, .i-imgs { flex: 1}
                }
            }
            @media screen and (max-width: 800px) {
                .i-txts { flex: 1;}
                .i-point.maped, .i-imgs{ flex: 0 0 100%!important;}
            }
        }

    }
}

/* AUTHORIZATION */
.auth-win.winh {
    .main { padding: 20px; max-width: 400px; display: flex; flex-direction: column; gap: 20px;}
    .check-tel { text-align: center; font-size: 24px;}
    button { border: none; border-radius: 5px; cursor: pointer; transition: all .5s; font-size: 16px; padding: 5px; min-height: 48px; color: #4e4e4e; &:hover { background-color: #d1d1d1; color: black; }}
    .b-send, .b-telentered, .b-accept { background-color: #4c774c; color: white;  &:hover { background-color: #97aa98; color: white; } }
    .b-unavail, .b-cooldown-counter { font-size: 12px; display: none;}
    .b-send.disabled {.b-unavail{ display: block;} .b-recom { display: none;} }
    .b-send.cooldowned { .b-unavail{ display: none;} .b-cooldown-counter{ display: block;} }
    .b-recom { font-size: 12px;}
    .i-tel { border: 1px solid grey; input { font-size: 18px;}}

    .dlg-code-input{
        display: flex;; flex-direction: column; gap: 20px;
        .dlg-inf-ttl { font-size: 20px;}
        .dlg-inf-txts { display: flex; flex-direction: column; gap: 10px;}
        .i-code { align-self: center; border: 1px solid grey; max-width: 120px; input { font-size: 24px;}}
    }
    .dlg-cooldown {
        display: flex;; flex-direction: column; gap: 10px;
        .dlg-inf-ttl { font-size: 20px;}
        .dlg-inf-txts { display: flex; flex-direction: column; gap: 10px;}
    }
}










/* */

@media screen and (max-width: 1400px) {
    .awidth { width: 100%; margin-left: 0; margin-right: 0; }
    /* .hdr-holder { padding-left: 10px; padding-right: 10px;} */

}



/*
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
*/



/* BUTTONS */
button{
    padding: 10px; border-radius: 5px; border: 1px solid lightgrey; font-size: 16px; cursor: pointer; transition: all .5s; color: #373737;
    &:hover { background-color: #c5c5c5; color: black}
    &.disabled {
        background-color: #c9c9c9!important; color: #737373!important; pointer-events: none; cursor: not-allowed;
        :hover { background-color: #c9c9c9; color: #737373; }
    }

}
.b-buy { height: 48px; box-sizing: border-box; align-content: center; display: inline-block; padding: 10px; font-size: 18px; background: var(--fill); color: var(--color_contrast); border-radius: 5px; font-weight: bold; cursor: pointer; transition: all .5s;}
.b-buy:hover { opacity: .7; }





/* Input Switch */
.vw-switch { display: flex; user-select: none;}
.vw-switch .slider { font-size: 0; display: inline-block; vertical-align: middle; min-width: 60px; padding: 2px; border-radius: 18px; background-color: lightgrey; box-sizing: border-box; cursor: pointer; transition: all .2s ease-out;}
.vw-switch .handler { display: inline-block; padding: 10px; border-radius: 18px; background-color: #5b94e9; margin-left: calc(50% - 10px); transition: all .2s ease-out;}
.vw-switch.true .slider { background-color: #38873b; }
.vw-switch.true .handler { margin-left: calc(100% - 20px); background-color: white; }
.vw-switch.false .slider { background-color: #cc4017;margin-left:0; }
.vw-switch.false .handler { margin-left:0; background-color: white;}
.vw-switch .lbl { align-self: center; margin-left: 10px; font-size: 18px; display: inline-block; vertical-align: middle;}

/* Input Slider */
.vw-slider { display: inline-block; min-width: 220px; user-select: none;}
.vw-slider .lbl { font-size: 13px; width: 100%; color: grey;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;}
.vw-slider .slider { font-size: 0; display: flex; justify-content: space-between; height:7px; background-color: #cfcfcf; box-sizing: border-box; cursor: pointer; border-radius: 4px;}
.vw-slider .handler { display: inline-block; padding: 10px; border-radius: 18px; background-color: #5b94e9; margin-top: -7px; }
.vw-slider .handler:nth-child(1) { margin-left: 0;}
.vw-slider .handler:nth-child(2) { margin-right: 0;}
.vw-slider .lbl-range { display: flex; justify-content: space-between; margin-top: 8px; color: grey; font-weight: bold; font-size: 12px; height: 16px;}


/* InputView */
.vw-input {
    position: relative; background-color: white; padding: 5px; border-radius: 5px;
    input { width: 100%; position: relative; margin-top: 18px; background:transparent; border: none; font-size: 16px; outline: none; box-sizing: border-box;}
    &:not(:has(input:placeholder-shown)) .lbl { font-size: 13px; top: 5px; left: 5px;}
    &:has(input:focus) .lbl { font-size: 13px; top: 5px; left: 5px;}
    .lbl { width: 100%; position: absolute; color: grey; top: 18px; left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .1s ease-out; }
    .excl { color: orangered; }
    &.exclaimed {
        .lbl { color: #ffa088; }
        input { border-bottom-color: orangered; }
        .excl { display: block; font-size: 14px; font-weight: bold; }
    }
}

/* SelectView */
.vw-select {
    cursor: pointer; background-color: white; padding: 5px; border-radius: 5px;
    .hldr1 { display: flex; padding-bottom: 2px; }
    .lbl { color: grey; width: 100%; font-size: 13px; color: grey; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .val { flex: 1; padding-top: 4px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .val.empty { color: grey;}
    .ico {padding: 10px; margin-left: 4px; display: inline-block; background-size: 16px; background-repeat: no-repeat; background-position: center; cursor: pointer; opacity: .5;}
    .ico:hover { opacity: 1;}
    .del { background-image: url("/_template/default/ctrl-cross.svg"); }
    .dda { background-image: url("/_template/default/ctrl-ddarrow.svg");}
    .excl { color: orangered; }
    &.exclaimed .val { color: #ffa088; }
    &.exclaimed .hldr { border-bottom-color: orangered; }
    &.exclaimed .excl { display: block; font-size: 14px; font-weight: bold; }
}
.vw-select-win{
    >div { padding: 10px; border-bottom: 1px solid lightgray; cursor: pointer;}
    >div:hover { background-color: #f4f4f4; }
}

/* Toggle List */
.vw-togglelist {
    .lbl { margin-bottom: 5px; color: grey; width: 100%; font-size: 13px; color: grey; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
    .lst {
        display: flex; flex-direction: column; gap: 10px;
        >div { margin-bottom: 10px; cursor: pointer; background-color: white; border: 2px solid lightgrey; border-radius: 3px; padding: 10px; display: flex; flex-direction: column; gap: 2px;}
        >div.selected { background-color: #aff2b4; border-color: #1d5f1f; }
        >div .ttl { font-size: 18px; font-weight: bold;}
        >div .dsc { font-size: 14px; color: grey; }
        >div .prc { font-size: 14px; color: black; font-weight: bold }
        >div:hover { border-color: grey;  }
    }

    &.exclaimed{
        .item {
            border: 2px solid orangered;
            animation: vw-togglelist-pulse .5s ease-in-out infinite alternate;
        }
        .exclaimation, .lbl { color: orangered;}
    }
}
@keyframes vw-togglelist-pulse { from { border-color: orangered; }  to { border-color: #ffe578; } }


/* SPINNER */
.vw-spinner {
    display: flex; gap: 5px;
    input { field-sizing: content; -moz-appearance: textfield; border: none; font-size: 20px; }
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .b-less, .b-more, .b-trash { padding: 20px; background-color: grey; cursor: pointer; &:hover { background-color: black;}}
    .b-less { mask: url("/_template/default/ctrl-spinner-less.svg") no-repeat center/28px;}
    .b-more { mask: url("/_template/default/ctrl-spinner-more.svg") no-repeat center/28px;}
    .b-trash { mask: url("/_template/default/ctrl-spinner-trash.svg") no-repeat center/28px;}
}


/* WIN */
.winh {
    position: fixed; left: 0; top:0; right: 0; bottom: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center;
    .win { align-self: center; min-width: 300px; border-radius: 10px; overflow: hidden;}
    .header {
        display: flex; gap: 10px;  background-color: #cdcdcd; padding: 10px; font-size: 18px;
        .closer {  mask: url("/_template/default/ctrl-cross.svg") no-repeat center/18px; padding: 12px; background-color: #5e5e5e; cursor: pointer; transition: all .5s; &:hover{ background-color: black}}
    }
    .main { background-color: white; padding: 10px; overflow-y: auto;}
}



/* RTE */
.rtext quot { background-color: rgba(216, 226, 217, 0.63); padding: 20px; margin: 60px; display: block; }
.rtext figure { text-align: center;}
.rtext figure>div { display: inline-block; max-width:80%; font-size: 0;}
.rtext figure img { max-width: 100%; }
.rtext figure figcaption { font-style: italic; }




/* Informer - Ads */
.infor-ads .items { display: flex; overflow: hidden; }
.infor-ads .items>div { min-width: 100px; max-width: 120px; display: flex; flex-direction: column; border: 1px solid lightgrey; text-align: center; margin-right: 20px;}
.infor-ads .items>div img { height: 200px; object-fit: scale-down;}
.infor-ads .items>div a { text-decoration: none; color: black; font-weight: bold; font-size: 16px;}



/* POSTS */

.postslist>a {  display: flex; text-decoration: none; color: black; margin-bottom: 24px; }
.postslist>a .img { min-width: 200px; max-width: 200px; max-height: 120px; object-fit: cover; margin-right: 20px;}
.postslist>a .ttl { font-size: 22px;}
.postslist>a .dat { font-size: 14px; color: grey; font-style: italic; margin-top: 10px; margin-bottom: 10px;}