:root {
    --bg-body: gainsboro;
    --bg-section: white;
    /* --bg-header: hsl(213, 84%, 25%); */
    --bg-header: hsl(0, 0%, 3%);
    --bg-light-blue: #ebf6ff;
    --bg-light-grey: #f5f5f6;
    --bg-light-blue-border: #e0e0e0;
    --bg-light-grey-boder: #eaeaec;
    --color-border: #eee;
    --color-border-light: #f1f1f1;
    --color-primary: #1e9e04;
    --color-secondary: hotpink;
    --color-link: #007af5;
    --color-link-hover: #0059b3;
    --color-text: #333;
    --color-text-semi-dark: #181818;
    --color-text-dark: #000;
    --color-text-slight-light: #4e5665;
    --color-text-semi-light: #666;
    --color-text-light: #757575;
    --color-text-steel-light: #7f8f9f;
    --color-text-extra-light: #888;
    --color-price: darkgreen;
    --color-drop-red: #b12704;
    --color-rank1: #008c00;
    --color-rank2: #9acd32;
    --color-rank3: #f2bf00;
    --color-rank4: #de530f;
    --color-rank5: #db3131;
    --color-success: #008c00;
    --color-warning: #f2bf00;
    --color-danger: #db3131;
    --color-info: #2196f3;
    --main-width: 1220px;
    --font-size: 14px;
    --pv: 10px;
    --ph: 12px;
    --nph: calc(-1 * var(--ph));
    --phh: var(--ph);
    --nphh: calc(-1 * var(--phh));
    --mv: 6px;
    --bottom-0: 0px
}

@media (max-width: 350px) {
    :root {
        --font-size: 13px
    }
}

@media (min-width: 750px) {
    :root {
        --font-size: 15.45px;
        --bg-body: #f1f3f6;
        --pv: 12px;
        --ph: 16px;
        --mv: 16px
    }
}

@media (min-width: 750px) and (max-width: 1124px) {
    :root {
        --font-size: 14px;
        --pv: 10px;
        --ph: 12px;
        --mv: 12px
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

table {
    border-collapse: collapse;
    width: 100%
}

ul,
ol {
    list-style: none
}

button {
    background: transparent;
    border: 0
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
    font-size: var(--font-size);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--bg-body);
    height: 100%;
    overscroll-behavior-x: none;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

main {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--main-width);
    margin: 0 auto
}

a {
    text-decoration: none;
    color: var(--color-link);
    cursor: pointer
}

a:hover {
    color: var(--color-link-hover)
}

a.disabled,
*[role=button].disabled {
    opacity: .55;
    cursor: default;
    pointer-events: none
}

h1 {
    font-size: 1.5715rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-text-dark)
}

main>h1,
main>.h1 {
    padding: 12px 12px 10px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden
}

main>h1>h1,
main>.h1>h1 {
    flex: 1
}

main>h1+small,
main>.h1+small {
    padding: 0 12px 10px;
    margin-top: -8px;
    display: block;
    color: #777;
    font-size: 12px
}

h1>small {
    font-size: .9286rem;
    position: relative;
    top: -1px;
    color: var(--color-text-light);
    margin: 0 2px
}

*[class^=clamp-],
*[class*=" clamp-"],
*[class*=i-clamp-]>* {
    box-sizing: content-box;
    display: block;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    max-height: 3em
}

.clamp-1,
.i-clamp-1>* {
    max-height: 1.5em;
    -webkit-line-clamp: 1
}

.clamp-2,
.i-clamp-2>* {
    max-height: 3em;
    -webkit-line-clamp: 2
}

.clamp-3,
.i-clamp-3>* {
    max-height: 4.5em;
    -webkit-line-clamp: 3
}

.clamp-4 {
    max-height: 6em;
    -webkit-line-clamp: 4
}

.clamp-5 {
    max-height: 7.5em;
    -webkit-line-clamp: 5
}

.c-t {
    text-align: center
}

.c-h {
    display: flex;
    justify-content: center
}

.c-v {
    display: flex;
    align-items: center
}

.c-b {
    display: flex;
    align-items: center;
    justify-content: center
}

.h-100 {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%
}

.wh-100 {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%
}

.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.scroll::-webkit-scrollbar {
    display: none
}

br.l {
    content: "";
    display: block;
    height: 8px
}

.m-0.m-0 {
    margin: 0
}

[data-overlay] {
    position: relative
}

[data-overlay]:before {
    content: attr(data-overlay);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    border-radius: inherit
}

.rank-0 {
    color: #aaa !important
}

.rank-1 {
    color: #008c00 !important
}

.rank-2 {
    color: #9acd32 !important
}

.rank-3 {
    color: #f2bf00 !important
}

.rank-4 {
    color: #de530f !important
}

.rank-5 {
    color: #db3131 !important
}

.rank-0-bg {
    background: #aaa !important;
    color: #fff
}

.rank-1-bg {
    background: #008c00 !important;
    color: #fff
}

.rank-2-bg,
.success-bg {
    background: #9acd32 !important;
    color: #fff
}

.rank-3-bg,
.warning-bg {
    background: #f2bf00 !important;
    color: #fff
}

.rank-4-bg,
.error-bg {
    background: #de530f !important;
    color: #fff
}

.rank-5-bg {
    background: #db3131 !important;
    color: #fff
}

.white-bg {
    background: white
}

.dim {
    color: var(--color-text-light)
}

.pg-mob,
.pg-mobw {
    max-width: 600px
}

@media (max-width: 750px) {
    aside {
        margin-top: 6px;
        display: none
    }

    .only-desktop {
        display: none !important
    }

    .pg-mobw {
        background: white
    }
}

@media (min-width: 750px) {
    main {
        padding: var(--mv) 10px
    }

    h1 {
        font-size: 28px;
        line-height: 1.25
    }

    h1+.wh-100,
    .h1+.wh-100 {
        margin-top: 4px
    }

    .only-mobile {
        display: none !important
    }

    aside {
        --ph: 8px;
        --phh: 12px;
        --mv: 8px
    }

    .aside-320 {
        --aside-w: 320px;
        display: grid;
        grid-template-columns: 1fr var(--aside-w);
        grid-gap: var(--mv)
    }

    .aside-320>* {
        min-width: 0
    }

    .aside-360 {
        --aside-w: 360px;
        display: grid;
        grid-template-columns: 1fr var(--aside-w);
        grid-gap: var(--mv)
    }

    .aside-360>* {
        min-width: 0
    }

    .aside-left {
        grid-template-columns: var(--aside-w) 1fr;
        grid-template-areas: "aside rest"
    }

    .aside-left>* {
        grid-area: rest
    }

    .aside-left>aside {
        grid-area: aside
    }

    .aside-sticky>aside {
        position: sticky;
        top: calc(var(--top-fixed) - 4px);
        height: 100vh;
        background: var(--bg-header);
        background: linear-gradient(180deg, rgba(10, 58, 117, 1) 0%, hsl(210, 14%, 78%) 149px, hsl(208, 100%, 96%) 100%);
        box-shadow: 1px 1px 2px -1px #ccc;
        border: 1px solid gainsboro;
        padding: 8px;
        overflow: hidden;
        z-index: 1;
        border-radius: 4px
    }
}

@media (min-width: 750px) and (max-width: 1124px) {
    .aside-320 {
        --aside-w: 25%
    }

    .aside-360,
    .aside-320.aside-imp {
        --aside-w: 30%
    }
}

@media (min-width: 750px) and (max-width: 960px) {
    h1 {
        font-size: 24px
    }

    .no-tablet {
        display: none !important
    }

    .aside-360:not(.aside-imp),
    .aside-320:not(.aside-imp) {
        grid-template-columns: 1fr;
        grid-gap: 0
    }

    .aside-360:not(.aside-imp) aside,
    .aside-320:not(.aside-imp) aside {
        display: none
    }

    .aside-360.aside-small-below,
    .aside-320.aside-small-below {
        grid-template-areas: "rest" "aside"
    }

    .aside-360.aside-small-below aside,
    .aside-320.aside-small-below aside {
        display: block;
        columns: 2;
        margin-top: 12px;
        column-gap: 10px
    }

    .aside-360.aside-small-below aside>*,
    .aside-320.aside-small-below aside>* {
        break-inside: avoid
    }
}

.sm-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: #323232;
    font-size: 14px;
    position: fixed;
    z-index: 19;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 4px;
    min-height: 48px;
    padding: 8px 16px;
    box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
    transition: opacity .2s cubic-bezier(0, 0, .2, 1)
}

.sm-toast.error {
    background: #e32626
}

.sm-toast .sm-btn {
    flex: 0 0 auto;
    margin: 0 -12px 0 16px;
    height: auto;
    min-width: auto;
    width: auto;
    padding: 4px 12px
}

@media (min-width: 750px) {
    .sm-toast {
        font-size: 16px;
        bottom: auto;
        left: auto;
        top: 110px;
        width: 420px
    }
}

.sm-noi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex: 1;
    background: white
}

.sm-noi>div {
    text-align: center
}

.pg-err-status {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-danger)
}

@media (min-width: 750px) {
    .pg-err {
        font-size: 16px
    }

    .pg-err h1 {
        font-size: 40px
    }

    .pg-err-status {
        font-size: 120px
    }
}

.sm-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #000;
    transition-duration: 2s;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.sm-drawer {
    width: 75%;
    height: 100%;
    max-width: 360px;
    min-width: 260px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translate3d(-100%, 0, 0);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    will-change: transform;
    background: var(--bg-section);
    z-index: 9;
    opacity: .001;
    box-shadow: 3px 0 16px -3px #0006
}

.sm-drawer.d-right {
    left: auto;
    right: 0;
    transform: translate3d(100%, 0, 0)
}

.sm-drawer>.content {
    height: 100%;
    position: relative;
    overflow-y: auto;
    background: #f5f6f7
}

.sm-drawer .drawer-heading {
    background: var(--color-primary);
    color: #fff;
    padding: 12px var(--ph);
    font-size: 16px;
    font-weight: 700
}

@media (min-width: 750px) {
    .sm-drawer .drawer-heading {
        font-size: 20px
    }
}

.sm-lnav>.head {
    background: var(--color-primary);
    color: #fff
}

.sm-lnav>.sm-box {
    margin: 0;
    border-top: 0
}

.sm-lnav-user {
    display: grid;
    grid-gap: 1px 10px;
    font-size: .9286rem;
    padding: 12px;
    align-items: center;
    grid-template: "avatar name" "avatar points" / 46px 1fr
}

.sm-lnav-user .avatar {
    grid-area: avatar;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover
}

.sm-lnav-user .name {
    grid-area: name;
    font-weight: 700;
    font-size: 1.2858rem
}

.sm-lnav-user .points {
    grid-area: points;
    color: #fffc
}

.sm-lnav-umenu {
    display: flex;
    flex-flow: row wrap;
    border-top: 1px dashed rgba(255, 255, 255, .15);
    padding: 6px 12px
}

.sm-lnav-umenu>li {
    width: 50%;
    display: flex;
    align-items: center;
    font-size: 1.0715rem;
    padding: 8px 0
}

.sm-lnav-umenu>li>.icon {
    --s: 26px;
    margin-right: 7px
}

.sm-lnav-umenu.login>li {
    font-size: 1.4287rem;
    font-weight: 700
}

.sm-social-login {
    padding: .8572rem
}

.sm-social-login>div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.1431rem;
    border-radius: 0 3px 3px 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    margin-left: 3.4289rem;
    margin-bottom: .7143rem;
    cursor: pointer
}

.sm-social-login>div:before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: -3.4289rem;
    height: 3.1431rem;
    width: 3.4289rem;
    border-radius: 3px 0 0 3px;
    background: center / 50% no-repeat white
}

.sm-social-login>div:last-child {
    margin-bottom: 0
}

.sm-social-login>div:hover {
    box-shadow: 1px 1px 5px -1px #777
}

.sm-social-login>.google {
    background: #4285f4
}

.sm-social-login>.google:before {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533.5 544.3'%3E%3Cpath d='M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z' fill='%234285f4'/%3E%3Cpath d='M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z' fill='%2334a853'/%3E%3Cpath d='M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z' fill='%23fbbc04'/%3E%3Cpath d='M272.1 107.7c38.8-.6 76.3 14 104.4 40.8h0l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z' fill='%23ea4335'/%3E%3C/svg%3E");
    background-size: 28px;
    background-color: #fff;
    border: 1px solid #4285f4
}

.sm-social-login>.fb {
    background: #4d69a2
}

.sm-social-login>.fb:before {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13 10h3v3h-3v7h-3v-7H7v-3h3V8.745c0-1.19.374-2.69 1.118-3.512S12.79 4 13.904 4H16v3h-2.1a.9.9 0 0 0-.9.899V10z'/%3E%3C/svg%3E");
    background-size: 36px;
    background-color: #3d5a96
}

.sm-bottom-popup {
    background: #f5faff;
    box-shadow: 0 7px 7px 7px #0000004d;
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 11;
    opacity: 0;
    transform: translateZ(0);
    will-change: transform;
    transition: transform .2s ease-out;
    display: flex;
    flex-direction: column;
    max-height: 90%
}

.sm-bottom-popup>.content {
    display: flex;
    flex-direction: column;
    flex: 1
}

.sm-bottom-popup>.content>* {
    min-width: 100%
}

.sm-bottom-popup>.content>*:only-child {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto
}

.sm-bottom-popup>.content>*:only-child>section {
    overflow: auto
}

.sm-popup-head {
    display: flex;
    align-items: center;
    background: rgb(2, 123, 227);
    color: #fff;
    z-index: 3;
    flex: 0
}

.sm-popup-head .close {
    padding: 10px
}

.sm-popup-head .title {
    flex: 1;
    padding: 0 12px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sm-popup-head .close+.title {
    padding-left: 6px
}

.sm-popup-head .actions {
    padding-right: 10px
}

.sm-popup-head+div {
    min-height: 0
}

.sm-popup-head+div>*:only-child {
    height: 90vh
}

.sm-popup-foot {
    flex: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-top: 1px solid #eaeaec;
    background: #f7fafd;
    z-index: 2
}

@media (min-width: 750px) {
    .sm-bottom-popup {
        max-width: 620px;
        left: calc(50% - 310px);
        border-radius: 14px 14px 0 0
    }

    .sm-bottom-popup.wide {
        max-width: 710px;
        left: calc(50% - 355px)
    }

    .sm-bottom-popup.w50rem {
        max-width: 50rem;
        left: calc(50% - 25rem)
    }

    .sm-popup-head {
        border-radius: 9px 9px 0 0
    }
}

@media (min-width: 840px) {
    .sm-bottom-popup.wide {
        max-width: 800px;
        left: calc(50% - 400px)
    }
}

.sm-aac-items {
    overflow: auto;
    margin-top: 6px;
    flex: 1
}

.sm-aac-items>div:first-child>div:first-child {
    border-top: 0
}

.sm-compq>.empty {
    padding: 12px;
    text-align: center;
    font-size: 14px
}

.sm-compq>.btn-wrap {
    text-align: center;
    margin: 12px 0
}

.sm-compq-actions {
    padding: 8px 0;
    text-align: center;
    border-top: 1px solid #eee
}

.sm-compq-actions>.sm-btn {
    padding: 0 12px
}

.sm-search-header {
    margin: 8px;
    display: flex
}

.sm-mobile-app .sm-search-header {
    display: none
}

.sm-search-suggest {
    position: absolute;
    top: var(--search-h);
    left: 0;
    background: white;
    border-radius: 0 0 4px 4px;
    width: 100%;
    box-shadow: 1px 1px 3px #00000059;
    z-index: 9
}

.sm-search-suggest:before {
    display: block;
    content: "";
    position: absolute;
    top: -.2857rem;
    left: 0;
    width: 100%;
    height: .2857rem;
    background: white;
    border-bottom: 1px solid #eee
}

.sm-search-suggestions {
    padding: .5rem 0;
    font-size: 15px;
    max-height: 400px;
    overflow: auto
}

.sm-search-suggestions>li {
    display: grid;
    grid-template: "icon text" 1fr "icon cat" / auto 1fr;
    align-items: center;
    padding: .5rem .5714rem;
    cursor: pointer
}

.sm-search-suggestions>li:hover,
.sm-search-suggestions>li.current {
    background: #cee5ff
}

.sm-search-suggestions>li>.icon {
    grid-area: icon;
    margin-right: 8px;
    color: #aaa !important
}

.sm-search-suggestions>li>span {
    grid-area: text;
    color: var(--color-text-semi-light)
}

.sm-search-suggestions>li>small {
    grid-area: cat;
    color: var(--color-text-extra-light);
    margin-top: 4px
}

.sm-search-suggestions>li>small>b {
    color: var(--color-link);
    font-weight: 400
}

.sm-search-bar {
    --search-h: 46px;
    height: var(--search-h);
    background: #f5fffa;
    color: var(--color-text-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    box-shadow: 1px 1px 3px #00000059;
    position: relative;
    z-index: 5;
    width: 100%;
    cursor: text
}

.sm-search-bar>.icon,
.sm-search-bar .i-search {
    padding: 6px;
    margin: 0 -2px;
    --s: 26px
}

.sm-search-bar>.i-vert {
    margin-right: -8px
}

.sm-search-bar .i-back {
    display: none
}

.sm-search-bar .sm-input {
    flex: 1;
    display: none
}

.sm-search-bar .i-menu,
.sm-search-bar .i-back {
    margin: 0 2px 0 -6px
}

.sm-search-bar.open {
    background: white
}

.sm-search-bar.open .i-menu,
.sm-search-bar.open .i-search,
.sm-search-bar.open .i-vert,
.sm-search-bar.open .logo {
    display: none
}

.sm-search-bar.open .i-back,
.sm-search-bar.open .sm-input {
    display: block
}

.sm-search-bar form {
    flex: 1;
    width: 100%;
    position: relative;
    height: var(--search-h);
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.sm-search-bar .logo {
    display: block;
    position: absolute;
    left: 46px;
    top: 0;
    height: 40px;
    width: 124px;
    opacity: .7
}

.sm-search-bar .logo>img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: left
}

.sm-search-bar .sm-input input,
.sm-search-bar .sm-input input:focus {
    padding: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
    font-size: 15px;
    line-height: 24px
}

.sm-desktop-header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    margin: -8px 0
}

.sm-desktop-header-right>* {
    padding: 0 12px;
    font-size: 16px;
    font-weight: 500
}

.sm-d-header-user {
    width: 160px;
    justify-content: flex-end
}

.sm-d-header-user .uname {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

sm-dap[pos=d_all_header_button] {
    margin: 0 0 0 10px;
    padding: 0;
    width: 256px;
    height: 40px;
    box-shadow: 1px 1px 3px #5c72ab
}

sm-dap[pos=d_all_header_button]:hover {
    box-shadow: 2px 2px 6px #8696c1
}

@media (max-width: 750px) {

    .sm-desktop-header-right,
    .sm-search-bar.has-q .logo {
        display: none
    }

    .sm-search-bar.has-q .sm-input {
        display: block
    }

    .sm-search-bar.has-q:not(.open) .sm-input>.input {
        color: #59809f
    }

    .sm-search-bar form:active .sm-input {
        display: block
    }

    .sm-search-bar form:active .i-search {
        display: none
    }

    .sm-search-bar .i-menu:active,
    .sm-search-bar .i-back:active,
    .sm-search-bar .i-vert:active {
        display: inline-block
    }

    .sm-search-bar:focus-within {
        background: white
    }

    .sm-search-bar:focus-within .i-menu,
    .sm-search-bar:focus-within .i-search,
    .sm-search-bar:focus-within .i-vert,
    .sm-search-bar:focus-within .logo {
        display: none
    }

    .sm-search-bar:focus-within .i-back,
    .sm-search-bar:focus-within .sm-input {
        display: block
    }
}

@media (min-width: 750px) {
    .sm-search-header {
        max-width: var(--main-width);
        margin: .5714rem auto;
        padding: 0 2px 0 218px
    }

    .sm-search-bar {
        --search-h: 40px;
        width: 50vw;
        max-width: 450px
    }

    .sm-search-bar .i-menu,
    .sm-search-bar .i-vert {
        display: none
    }

    .sm-search-bar .i-search {
        margin-right: -5px
    }

    .sm-search-bar .logo {
        left: -200px;
        top: -8px;
        opacity: 1;
        height: 51px;
        width: 159px;
        cursor: pointer
    }

    .sm-search-bar .sm-input {
        display: block;
        padding-left: 6px
    }

    .sm-search-bar.open .logo,
    .sm-search-bar .i-search.i-search {
        display: block;
        cursor: pointer
    }

    .sm-search-bar.open .i-back {
        display: none
    }

    .sm-search-suggestions {
        max-height: none
    }
}

@media (min-width: 750px) and (max-width: 1120px) {
    .sm-search-header {
        padding-left: 190px
    }

    .sm-search-bar .logo {
        left: -180px
    }

    .sm-desktop-header-right>* {
        padding: 0 8px;
        font-size: 14px
    }

    .sm-d-header-user {
        width: 140px
    }

    sm-dap[pos=d_all_header_button] {
        display: none
    }
}

@media (min-width: 920px) and (max-width: 1180px) {
    sm-dap[pos=d_all_header_button] {
        display: flex;
        width: 200px
    }
}

@media (min-width: 920px) and (max-width: 1020px) {
    sm-dap+*+.sm-d-header-more {
        display: none
    }
}

.sm-top-tabs {
    display: flex;
    height: 40px
}

.sm-top-tabs>a {
    padding: 8px 0;
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px
}

.sm-top-tabs>a.icon {
    box-sizing: border-box
}

.sm-top-tabs>a.icon .icon {
    top: -1px
}

.sm-top-tabs>a.new>span {
    position: relative
}

.sm-top-tabs>a.new>span:after {
    content: ".";
    position: absolute;
    top: -15px;
    right: -10px;
    color: #7cfc00;
    font-size: 3em;
    line-height: 0
}

header {
    background: var(--bg-header);
    color: #fff
}

@media (min-width: 750px) {
    :root {
        --top-fixed: 56px
    }

    header {
        position: sticky;
        top: 0;
        z-index: 4;
        height: 56px
    }

    .sm-mobile-app header {
        display: none
    }
}

@media (max-height: 550px) {
    :root {
        --top-fixed: 0px
    }

    header {
        position: static
    }
}

.sm-desktop-nav {
    /* background: #0c468d;
    background: linear-gradient(120deg, #0a3a75 0%, #0c468d 25%, #0c468d 75%, #0a3a75 100%); */
    background: linear-gradient(135deg, #139c31, #3b971f);;
    font-size: 14px;
    font-weight: 500;
    border-top: 1px solid #258b2d;
    color: #f6f6f7
}

.sm-desktop-nav>ul>li>a {
    color: #fafafa;
    padding: 0 8px
}

.sm-desktop-nav>ul>li>a:hover,
.sm-desktop-nav>ul>li:hover {
    color: #fff
}

.sm-desktop-nav>ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    grid-gap: 17px;
    max-width: var(--main-width);
    margin: 0 auto;
    padding: 0 16px;
    height: 40px
}

.sm-desktop-nav>ul>li {
    position: relative;
    cursor: pointer
}

.sm-desktop-nav>ul>li,
.sm-desktop-nav>ul>li>a {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 17px
}

.sm-desktop-nav>ul>li>a {
    text-align: center
}

.sm-desktop-nav>ul>li.new:after {
    content: ".";
    position: absolute;
    top: -1px;
    right: -2px;
    color: #7cfc00;
    font-size: 3em;
    line-height: 0
}

.sm-desktop-nav .sm-dropdown {
    --top: 38px
}

.sm-desktop-nav .sm-menu {
    --img-size: 32px
}

.sm-desktop-nav .sm-dn-menu {
    position: relative;
    right: -25%
}

.sm-desktop-nav .sm-menu>a>img {
    background: none;
    border-radius: 0
}

@media (max-width: 1160px) {
    .sm-desktop-nav>ul {
        grid-gap: 12px
    }
}

@media (max-width: 1100px) {
    .sm-desktop-nav>ul {
        grid-gap: 10px
    }
}

@media (max-width: 1060px) {
    .sm-desktop-nav>ul {
        font-size: 13px;
        grid-gap: 8px
    }

    .sm-desktop-nav .sm-menu a {
        font-size: 14px
    }
}

@media (max-width: 980px) {
    .sm-desktop-nav>ul>li:nth-child(n + 13) {
        display: none
    }
}

@media (max-width: 918px) {
    .sm-desktop-nav>ul>li:nth-child(n + 12) {
        display: none
    }
}

@media (max-width: 870px) {
    .sm-desktop-nav>ul>li:nth-child(n + 11) {
        display: none
    }
}

@media (max-width: 810px) {
    .sm-desktop-nav>ul {
        grid-gap: 8px;
        font-size: 12px
    }
}

@media (max-width: 750px) {
    .sm-desktop-nav {
        display: none
    }
}

footer {
    background: var(--bg-header);
    color: #fff;
    font-size: .9286rem
}

.sm-mobile-app footer,
.way-item-initial footer,
.way-item-loading footer {
    display: none
}

.sm-footer {
    max-width: var(--main-width);
    margin: 0 auto;
    padding: var(--mv) var(--ph)
}

.sm-footer a {
    color: #b9d6f9
}

.sm-footer a:hover {
    color: #7abdff;
    text-decoration: underline
}

.sm-footer .logo {
    display: block;
    margin: calc(-1 * var(--mv)) 0 20px 0;
    width: 186px;
    height: 60px
}

.sm-footer-social {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    grid-gap: 20px 0
}

.sm-footer-social a {
    display: flex
}

.sm-footer-social svg {
    --s: 32px
}

.sm-footer-c {
    padding-top: 16px;
    display: flex;
    border-top: 1px solid hsl(220, 2%, 49%);
    margin-top: 16px
}

.sm-footer-nav,
.sm-footer-top {
    display: flex;
    justify-content: space-between
}

.sm-footer-top>div:first-child {
    width: 210px
}

.sm-footer-nav {
    flex: 1;
    margin-left: 110px
}

.sm-footer-nav>div {
    display: grid;
    grid-auto-rows: min-content;
    grid-gap: 4px
}

.sm-footer-nav h3 {
    margin-bottom: 6px;
    font-size: 20px
}

sm-dap[pos=m_all_bottom_fixed] {
    position: absolute;
    bottom: var(--bottom-0);
    left: 0;
    margin: 0;
    z-index: 2;
    box-shadow: #00000026 0 -3px 4px -2px;
    background: white;
    border-top: 1px solid #e0e0e0;
    box-sizing: border-box;
    transition: transform .2s ease-out
}

sm-dap[pos=m_all_bottom_fixed].s {
    padding: 4px;
    height: calc((100vw * var(--h) / var(--w)) + 8px)
}

sm-dap[pos=m_all_bottom_fixed].s>div {
    transform: scale(calc((var(--window-width) - 8) / var(--w)));
    border-radius: 4px;
    overflow: hidden
}

@media (max-height: 450px) {
    sm-dap[pos=m_all_bottom_fixed] {
        display: none
    }
}

@media (max-width: 750px) {
    footer {
        margin-top: var(--mv)
    }

    sm-dap+footer {
        margin-top: 0
    }

    .sm-footer {
        padding-top: 16px;
        padding-bottom: 12px
    }

    .sm-footer-nav,
    .sm-footer .logo {
        display: none
    }

    .sm-footer-top>div:first-child {
        width: 100%
    }

    .sm-footer-social {
        grid-template-columns: repeat(8, auto)
    }

    .sm-footer-social a {
        padding: 8px;
        margin: -8px
    }

    .sm-footer-social svg {
        --s: 24px
    }

    .sm-footer-c {
        flex-direction: column;
        gap: 6px
    }
}

@media (min-width: 750px) and (max-width: 960px) {
    .sm-footer-nav>div:nth-child(3) {
        display: none
    }
}

.sm-comp-bubble {
    --bs-o: 10%;
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 2;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 7px;
    margin: -7px
}

.sm-comp-bubble>div {
    background: white;
    box-shadow: 0 6px 10px -2px #1b1f2733, 0 4px 74px #1b1f2759, 0 0 0 6px rgb(0 0 0 / var(--bs-o));
    border-radius: 25px;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative
}

.sm-comp-bubble:hover {
    --bs-o: 25%
}

.sm-comp-bubble .imgs {
    width: 46px;
    height: 46px;
    margin: 3px;
    background: #cdd0d6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 3px;
    overflow: hidden
}

.sm-comp-bubble .imgs.count-1 {
    justify-content: center
}

.sm-comp-bubble img {
    max-height: calc(100% - calc(20% * calc(var(--n) - 1)));
    margin-left: calc(-3% * var(--n))
}

.sm-comp-bubble span {
    padding: 0 6px 0 20px
}

.sm-comp-bubble i {
    position: absolute;
    top: -4px;
    right: -3px;
    padding: 1px 6px;
    background: #f11382;
    color: #fff;
    z-index: 2;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    font-style: normal
}

@media (max-width: 600px) {
    .sm-comp-bubble {
        left: -12px;
        bottom: -6px
    }

    .sm-comp-bubble span {
        display: none
    }
}

.sm-comment {
    display: grid;
    grid-template: "avatar name date" min-content "avatar points date" min-content "content content content" 1fr "actions actions actions" min-content / auto min-content 1fr;
    grid-gap: 2px 12px;
    font-size: .8929rem
}

.sm-comment.type-review {
    grid-template: "avatar name date" min-content "avatar points rating" min-content "h3 h3 h3" min-content "content content content" 1fr "imgs imgs imgs" min-content "link link link" min-content "actions actions actions" min-content / auto min-content 1fr
}

.sm-comment .u-wrap {
    display: contents;
    cursor: pointer
}

.sm-comment .avatar {
    grid-area: avatar;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    object-fit: cover
}

.sm-comment .name {
    grid-area: name;
    font-weight: 700;
    color: #666;
    white-space: nowrap;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis
}

.sm-comment .points {
    grid-area: points;
    color: #888;
    white-space: nowrap
}

.sm-comment .date {
    grid-area: date;
    justify-self: end;
    color: #888;
    white-space: nowrap
}

.sm-comment .rating {
    grid-area: rating;
    --size: 16px;
    justify-self: end
}

.sm-comment {
    padding: 3px 0
}

.sm-comment>h3 {
    grid-area: h3;
    color: #333;
    font-size: 1.1715rem;
    margin: 6px 0 2px;
    line-height: 24px
}

.sm-comment>.content {
    grid-area: content;
    color: #4e5665;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 8px;
    font-size: 1.0001rem
}

.sm-comment>h3+.content {
    margin-top: 0
}

.sm-comment>.images {
    grid-area: imgs;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    grid-gap: 6px;
    margin: 8px 0 2px
}

.sm-comment>.images>img {
    height: 48px;
    width: 100%;
    object-fit: cover;
    border-radius: 3px
}

.sm-comment>.link {
    grid-area: link;
    margin-top: 4px;
    font-size: .9286rem
}

.sm-comment .actions {
    grid-area: actions;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8572rem;
    margin-top: 8px;
    color: #89a;
    margin-bottom: -4px
}

.sm-comment .actions>div {
    display: flex;
    align-items: center
}

.sm-comment .actions>div:first-child>div {
    display: flex;
    align-items: center
}

.sm-comment .actions>div:first-child>div:first-child:hover {
    color: var(--color-success)
}

.sm-comment .actions>div:first-child>div:last-child:hover {
    color: var(--color-danger)
}

.sm-comment .actions .icon+span {
    margin-left: 4px
}

.sm-comment .actions .btn {
    padding: 8px;
    margin: -8px;
    cursor: pointer
}

.sm-comment .actions .btn.reply:hover {
    color: var(--color-link)
}

.sm-comment>.content+.actions {
    margin-top: 4px
}

.sm-comment>.reply-wrap {
    margin: 12px 0 -4px 12px;
    grid-area: 5 / 1 / 5 / 4
}

.sm-comment.type-review>.reply-wrap {
    grid-area: 8 / 1 / 8 / 4
}

.sm-comment.type-comment {
    padding: 0
}

@media (min-width: 750px) {
    @supports (display: contents) {
        .sm-comment {
            grid-template: "avatar name points date" min-content "avatar content content content" 1fr "avatar actions actions actions" min-content / auto min-content min-content 1fr;
            grid-gap: 2px 14px
        }

        .sm-comment.type-review {
            grid-template: "avatar name points date" min-content "avatar rating rating rating" min-content "h3 h3 h3 h3" 1fr "content content content content" min-content "imgs imgs imgs imgs" min-content "link link link link" min-content "actions actions actions actions" min-content / auto min-content 1fr min-content
        }
    }

    .sm-comment>.content {
        margin-top: 4px
    }

    .sm-comment .actions {
        justify-content: flex-start
    }

    .sm-comment .actions>*+* {
        margin-left: 24px !important
    }

    .sm-comment .avatar {
        width: 50px;
        height: 50px
    }

    .sm-comment .rating {
        justify-self: start;
        --size: 20px
    }

    .sm-comment>.reply-wrap {
        grid-area: 4 / 2 / 4 / 5
    }

    .sm-comment.type-review>.reply-wrap {
        grid-area: 8 / 1 / 8 / 5
    }
}

.sm-thread {
    padding: 9px var(--ph)
}

.sm-thread.comment:last-child {
    margin-bottom: 8px;
    padding-bottom: 0
}

.sm-thread.comment+.sm-box-item {
    margin-top: 8px
}

.sm-thread.review {
    border-top: 1px solid #e5e5e5
}

.sm-thread.review>.sm-thread-replies {
    margin-top: 15px
}

.sm-thread-replies {
    border-left: 3px solid #e5e5e5;
    margin: 18px 0 0 6px
}

.sm-thread-replies>.sm-thread {
    padding-right: 0
}

.sm-thread-replies>.sm-thread:first-child {
    padding-top: 0
}

.sm-thread-more {
    font-size: 1.0001rem;
    padding: 8px 0 0 12px;
    color: #007af5;
    cursor: pointer
}

.sm-thread-more:first-child {
    padding-top: 0
}

@media (min-width: 750px) {
    .sm-thread {
        padding: 12px var(--ph)
    }

    .sm-thread-replies {
        margin: 22px 0 0 37px
    }
}

.sm-discuss:not(.empty) {
    margin-bottom: 18px
}

.sm-discuss-head {
    margin-bottom: 8px
}

.sm-discuss-empty-text {
    padding: 6px var(--ph) 10px var(--ph);
    color: var(--color-text-light);
    font-size: 14px
}

.sm-feat {
    --icon: var(--icon-check);
    font-size: .8572rem;
    color: var(--color-text-light)
}

.sm-feat>li {
    display: flex;
    align-items: center;
    break-inside: avoid;
    overflow: hidden
}

.sm-feat>li:not(:first-child) {
    margin-top: 5px
}

.sm-feat>li.s-no {
    --icon: var(--icon-close-circle);
    color: var(--color-danger)
}

.sm-feat>li:before {
    content: "";
    background: var(--icon);
    margin-right: 6px;
    opacity: .7;
    flex: 0 0 13px;
    height: 13px
}

@media (min-width: 940px) {
    .sm-feat {
        columns: 2
    }
}

.sm-btn {
    --btn-color: #fb641b;
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.0358rem;
    line-height: 1.4;
    font-weight: 500;
    justify-content: center;
    max-width: 100%;
    outline: 0;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    height: 2.5717rem;
    min-width: 50px;
    padding: 0 16px;
    color: #fff;
    box-sizing: border-box
}

.sm-btn.disabled {
    opacity: .6;
    pointer-events: none
}

.sm-btn.dim {
    opacity: .6
}

.sm-btn.loading>.icon,
.sm-btn.loading>img {
    animation: shake .8s linear infinite;
    transform-origin: 50% 100%
}

.sm-btn .icon {
    --s: 24px;
    margin-right: 4px
}

.sm-btn:hover {
    color: #fff;
    filter: brightness(115%);
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f
}

input.sm-btn {
    outline: none;
    border: none;
    font-family: inherit
}

.sm-btn.size-s {
    font-size: .9286rem;
    height: 2.2859rem
}

.sm-btn.size-s .icon {
    --s: 21px
}

.sm-btn.size-xs {
    font-size: .7857rem;
    height: 2.143rem;
    padding: 0 12px
}

.sm-btn.size-xs .icon {
    --s: 18px
}

.sm-btn.size-l {
    font-size: 1.2144rem;
    height: 3.0003rem;
    padding: 0 18px
}

.sm-btn.raised {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f
}

.sm-btn.raised,
.sm-btn.flat {
    background: var(--btn-color)
}

.sm-btn.outline {
    border: 1px solid var(--btn-color);
    color: var(--btn-color)
}

.sm-btn.text {
    color: var(--btn-color)
}

.sm-btn.primary {
    --btn-color: var(--color-primary)
}

.sm-btn.danger {
    --btn-color: var(--color-danger)
}

.sm-btn.secondary.outline {
    --btn-color: var(--color-secondary)
}

.sm-btn.white {
    --btn-color: white
}

.sm-btn.white-grad {
    --btn-color: linear-gradient(180deg, #fdfefe, #f0f1f2);
    color: #505c77 !important;
    border: 1px solid #ccc;
    border-color: #ccc #c0c1c2 #bdbec0
}

.sm-btn.white-grad:hover {
    border-color: #b3b3b3 #a6a8a9 #a3a4a7;
    box-shadow: inset 0 2px #fff, 0 1px 2px #0003;
    filter: none
}

.sm-btn.with-icon {
    min-width: 24px
}

.sm-btn.with-icon.no-txt {
    padding: 0 6px;
    border-radius: 50%
}

.sm-btn.with-icon.no-txt .icon {
    margin: 0
}

.sm-btn+.sm-btn {
    margin-left: 6px
}

@keyframes shake {
    0% {
        transform: translate(2px, 1px) rotate(0)
    }

    10% {
        transform: translate(-1px, -2px) rotate(-2deg)
    }

    20% {
        transform: translate(-3px) rotate(3deg)
    }

    30% {
        transform: translateY(2px) rotate(0)
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg)
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg)
    }

    60% {
        transform: translate(-3px, 1px) rotate(0)
    }

    70% {
        transform: translate(2px, 1px) rotate(-2deg)
    }

    80% {
        transform: translate(-1px, -1px) rotate(4deg)
    }

    90% {
        transform: translate(2px, 2px) rotate(0)
    }

    to {
        transform: translate(1px, -2px) rotate(-1deg)
    }
}

.sm-product-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    margin-top: 8px
}

.sm-product-actions>* {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 110px;
    padding: 8px;
    cursor: pointer
}

.sm-product-actions>*>img {
    border-radius: 50%
}

.sm-product-actions>button:hover,
.sm-product-actions>a:not(.sm-btn):hover {
    background: #dbeeff;
    border-radius: 4px
}

.sm-product-actions>*:last-child {
    margin-right: 0
}

.sm-product-actions>.store-logo {
    width: 6.0006rem;
    height: 2.143rem;
    padding: 0
}

.sm-product-actions>.buy-sp-btn {
    margin-top: 8px;
    width: 90px
}

.sm-product-actions small {
    display: inline-block;
    margin-left: 4px;
    font-size: .9072rem;
    color: var(--color-text-light)
}

.sm-product-actions>.store img {
    width: 17px;
    height: 17px;
    margin-right: 4px
}

@media (min-width: 750px) {
    .sm-product-actions {
        flex-direction: row;
        align-items: center;
        background: aliceblue;
        border-radius: 4px;
        margin: 12px 0 4px
    }

    .sm-product-actions>* {
        padding: 10px 16px;
        max-width: 140px
    }

    .sm-product-actions>.buy-sp-btn {
        margin-top: 0;
        margin-left: 16px;
        width: 90px
    }

    .sp .sm-product-actions {
        background: inherit
    }

    .sp .sm-product-actions>* {
        padding: 0
    }

    .sm-product.oos .sm-product-actions {
        background: #ececec
    }
}

.sm-product {
    display: grid;
    grid-template: "img img" var(--img-height) "name name" 1fr "price menu" auto "drop drop" auto "rating rating" auto "actions actions" auto / 1fr 17px;
    grid-gap: 0;
    align-items: center;
    flex: 0 0 var(--item-width);
    font-size: .8572rem;
    padding: 0 8px;
    position: relative;
    cursor: pointer
}

.grid .has-actions.sm-product .sm-product-actions {
    flex-direction: row;
    justify-content: center;
    justify-self: start;
    background: aliceblue;
    border-radius: 4px;
    margin: 6px 0 0
}

.grid .has-actions.sm-product .sm-product-actions>:not(:first-child) {
    display: none
}

.grid .has-actions.sm-product .sm-product-actions>* {
    padding: 5px 8px
}

.grid .has-actions.sm-product .rating+.sm-product-actions {
    margin-top: 9px
}

.list .sm-product {
    flex: 1;
    grid-gap: 4px 12px;
    grid-template: "img name name name" auto "img price drop drop" auto "img rating rating rating" auto "img tags tags tags" auto "img actions actions actions" 1fr / 130px auto auto 1fr;
    align-items: start;
    grid-gap: 0 12px;
    padding: 8px;
    border-top: 1px solid #eee
}

.list .sm-product.has-features {
    grid-template: "img name name name" auto "img price drop drop" auto "img rating rating rating" auto "img tags tags tags" auto "img specs specs specs" 1fr "actions specs specs specs" auto / 130px auto auto 1fr
}

.list.img-wide .sm-product {
    grid-template: "img name name name" auto "img price drop drop" auto "img rating rating rating" auto "img actions actions actions" 1fr "tags actions actions actions" auto / 160px auto auto 1fr
}

.list.img-wide .sm-product.has-features {
    grid-template: "img name name name" auto "img price drop drop" auto "img rating rating rating" auto "img specs specs specs" 1fr "tags specs specs specs" auto "actions specs specs specs" auto / 160px auto auto 1fr
}

.list.size-s .sm-product {
    grid-template-columns: 60px auto auto 1fr
}

.list.size-s.img-wide .sm-product {
    grid-template-columns: 80px auto auto 1fr
}

.list.size-xs .sm-product {
    grid-template-columns: 40px auto auto 1fr;
    padding: 6px 8px
}

.sm-product.oos {
    filter: grayscale(1);
    opacity: .75;
    background: #f3f3f3
}

.list .sm-product.oos+.sm-product.oos {
    border-top-color: #e3e3e3
}

.grid .sm-product {
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 8px 10px
}

.grid.per-compare .sm-product {
    border: 0
}

.grid.per-row-2 .sm-product,
.grid.per-compare .sm-product {
    grid-template: "img img img" var(--img-height) "name name name" 1fr "price drop menu" auto "rating rating rating" auto / auto 1fr 17px
}

.grid.per-row-2 .sm-product>.sm-pdrop,
.grid.per-compare .sm-product>.sm-pdrop {
    margin-left: 6px
}

.count-4.grid.per-compare.fixed .sm-product {
    grid-template: "img" var(--img-height) "name" 1fr "price" auto / auto;
    padding: 6px 4px
}

.count-4.grid.per-compare.fixed .sm-product>.name {
    font-size: 12px;
    margin-top: 4px
}

.count-4.grid.per-compare.fixed .sm-product>.price {
    font-size: 12px
}

.count-4.grid.per-compare.fixed .sm-product>.sm-img-wrap {
    justify-self: center
}

.count-4.grid.per-compare.fixed .sm-product>.icon {
    display: none
}

.sm-product>.name {
    grid-area: name;
    color: var(--color-text);
    margin: .6429rem 0 1px;
    font-size: .9286rem
}

.sm-product>.name:hover {
    color: #2874f0
}

.sm-product>.name>h2 {
    font-size: inherit;
    font-weight: inherit
}

.list .sm-product>.name {
    font-size: 1.0286rem;
    font-weight: 500;
    margin: 0
}

.list .sm-product.has-features>.name {
    font-size: 1.1715rem
}

.size-s .sm-product>.name {
    font-size: .9572rem;
    font-weight: 400
}

.size-xs .sm-product>.name {
    font-size: .8572rem;
    font-weight: 400
}

.sm-product>.tags {
    grid-area: tags;
    justify-self: start;
    display: flex;
    align-items: stretch;
    white-space: nowrap;
    flex-flow: wrap;
    margin-top: 4px;
    font-size: 13px
}

.sm-product>.tags>div,
.sm-product>.tag {
    padding: 2px 8px;
    background: var(--color-rank2);
    border-radius: 3px;
    color: #fff;
    line-height: 1.4287rem;
    justify-self: start;
    margin: 4px 4px 0 0;
    display: flex;
    align-items: center
}

.sm-product>.tags>div.tag,
.sm-product>.tag.tag {
    font-weight: 700;
    background: #ffb733
}

.sm-product>.tags>div.val,
.sm-product>.tag.val {
    background: #03b1f0
}

.sm-product>.tags>div>b,
.sm-product>.tag>b {
    font-size: 16px
}

.sm-product>.tags>div.score>b,
.sm-product>.tag.score>b {
    font-size: 1.3572rem
}

.sm-product>.tags>div>small,
.sm-product>.tag>small {
    font-size: 13px;
    opacity: .9;
    margin-left: 6px
}

.sm-product>.tag {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border-radius: 0 0 3px
}

.sm-product.oos>.tag {
    background: #f35858
}

.sm-product>.price {
    grid-area: price;
    display: block;
    font-size: 1.0358rem;
    font-weight: 500;
    color: var(--color-price);
    margin-top: 2px
}

.sm-product>.sm-pdrop {
    grid-area: drop;
    display: block;
    font-size: .7143rem;
    margin-top: 3px;
    text-align: left
}

.list .sm-product>.price {
    font-size: 1.2858rem;
    margin-top: 5px;
    align-self: center
}

.list .sm-product.has-features>.price {
    font-size: 1.4287rem
}

.list .sm-product>.sm-pdrop {
    margin: 5px 0 0 -4px;
    align-self: center;
    font-size: .8143rem
}

.list .sm-product.has-features>.sm-pdrop {
    font-size: .8858rem
}

.size-s.list .sm-product>.price {
    font-size: 1.0715rem;
    margin-top: 3px
}

.size-xs.list .sm-product>.price {
    font-size: .9572rem
}

.size-xs .sm-product>.price {
    font-size: .8572rem;
    margin-top: 3px
}

.size-s .sm-product>.sm-pdrop,
.size-xs .sm-product>.sm-pdrop {
    margin-top: 3px
}

.sm-product>.rating {
    grid-area: rating;
    display: flex;
    align-items: center;
    margin-top: 3px
}

.list .sm-product>.rating {
    margin-top: 4px
}

.list .sm-product>.rating .sm-rating {
    --size: 1.1429rem
}

.sm-product>.rating>.count {
    font-size: .7857rem;
    color: var(--color-text-light);
    margin-left: 6px
}

.sm-product>.specs {
    grid-area: specs;
    align-self: start;
    margin-top: 8px
}

.sm-product>.sm-img-wrap {
    grid-area: img;
    padding: 0 4px;
    justify-self: center;
    width: 100%;
    height: var(--img-height);
    object-fit: scale-down
}

.list .sm-product>.sm-img-wrap {
    height: 100%
}

.size-m.list .sm-product>.sm-img-wrap {
    min-height: 120px
}

.sm-product>.icon {
    grid-area: menu;
    background: transparent;
    opacity: .3;
    padding: 6px 3px 6px 6px;
    margin: -4px -3px -6px 0;
    color: #000;
    --s: 17px !important;
    overflow: hidden;
    cursor: pointer
}

.sm-product>.icon:hover {
    opacity: 1
}

.list .sm-product>.icon {
    position: absolute;
    bottom: 3px;
    right: 6px
}

.sm-product:hover>.sm-img-wrap {
    transform: scale(1.07)
}

@media (max-width: 750px) {
    .list.size-s .sm-product-actions {
        flex-direction: row;
        justify-content: space-between
    }

    .list.img-wide .sm-product>.tags {
        flex-direction: column;
        margin-top: 4px
    }

    .list.img-wide .sm-product>.tags>div {
        margin: 4px 0 0
    }
}

@media (min-width: 750px) {
    .grid .sm-product {
        padding: 10px 16px
    }

    .list .sm-product {
        padding: 8px var(--ph);
        grid-template: "img name name name" auto "img price drop drop" auto "img rating rating tags" auto "img actions actions actions" 1fr / 130px auto auto 1fr
    }

    .list .sm-product>.tags,
    .list .sm-product>.rating {
        margin: 0 !important;
        align-self: center
    }

    .list .sm-product.has-features {
        --img-width: 130px;
        padding: 14px 20px;
        grid-gap: 0 22px;
        grid-template: "img name name price" "img rating tags drop" "img actions actions actions" "img specs specs specs" 1fr "img specs specs specs" / var(--img-width) auto 1fr auto !important
    }

    .list .sm-product.has-features>.tags>div {
        margin-top: 0
    }

    .list .sm-product.has-features>.name {
        margin-bottom: 8px
    }

    .list .sm-product.has-features>.price {
        font-size: 1.5501rem;
        margin-top: 0
    }

    .list .sm-product.has-features>.sm-pdrop {
        margin: 0;
        text-align: right
    }

    .list .sm-product.has-features>.tags {
        margin-left: -10px !important
    }

    .list .sm-product.has-features>.tags>div.val:last-child {
        margin-right: -40px
    }

    aside .list .sm-product {
        border: 0
    }
}

@media (min-width: 960px) {
    .list.img-wide .sm-product.has-features {
        --img-width: 240px
    }
}

.sm-cpdt {
    display: flex;
    width: 100%;
    position: relative;
    border-top: 1px solid #eee
}

.sm-cpdt.fixed {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    will-change: transform;
    background: var(--bg-section);
    transition: opacity .3s ease-in;
    box-shadow: 0 1px 6px 1px #ccc;
    border: 0;
    width: 100%;
    align-items: stretch;
    z-index: 3
}

.sm-cpdt.fixed.show {
    display: flex;
    opacity: 1
}

.sm-cpdt>div {
    flex: 0 0 50%
}

.sm-cpdt>small {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 16px;
    font-weight: 700;
    padding: 6px 9px;
    border-radius: 50%;
    background: #eee;
    margin: -24px 0 0 -16px
}

@supports (width: min(2px, 3px)) {
    .count-3.sm-cpdt>small {
        top: min(50%, 84px)
    }

    @media (min-width: 750px) {
        .count-3.sm-cpdt>small {
            top: min(50%, 116px)
        }
    }
}

.sm-cpdt>.item.item {
    border-left: 1px solid #eee;
    overflow: hidden
}

.sm-cpdt>.item.dap {
    border: 2px solid #f2bf00;
    border-bottom: 1px solid #eee;
    background: beige;
    opacity: .7
}

.sm-cpdt>.item {
    position: relative;
    --item-width: 100%;
    --img-height: 140px
}

.sm-cpdt>.item:first-child {
    border-left: 0
}

.sm-cpdt>.item.empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.1429rem 0;
    min-height: 154px;
    cursor: pointer
}

.sm-cpdt>.item.empty>span {
    margin-top: .2857rem
}

.sm-cpdt>.item>b {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: #eee;
    border-bottom-right-radius: 4px;
    padding: 2px 6px
}

.sm-cpdt>.item>.x {
    color: #789;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 4px;
    margin: -4px;
    cursor: pointer
}

.sm-cpdt>.item>.x:hover {
    color: var(--color-danger)
}

.sm-cpdt>.item>.dap-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px
}

.pg-cmp-landing .sm-cpdt>.item {
    min-height: 246px !important;
    display: flex;
    align-items: center
}

.sm-comp-float .sm-cpdt>.item {
    min-height: 180px !important;
    display: flex;
    align-items: center
}

.sm-cpdt.fixed>.item,
.sm-cpdt.size-s>.item {
    --img-height: 90px
}

.sm-cpdt.fixed>.item.empty,
.sm-cpdt.size-s>.item.empty {
    min-height: 80px
}

@media (max-width: 750px) {
    .sm-cpdt>div:first-child {
        display: none
    }

    .sm-cpdt>.item>.x {
        top: 2px;
        right: 1px
    }

    .count-2 .item:nth-child(n + 4) {
        display: none
    }

    .count-3 .item:nth-child(n + 5) {
        display: none
    }

    .count-3.sm-cpdt>div {
        flex: 0 0 33.3333%
    }

    .count-3.sm-cpdt>small:nth-of-type(1) {
        left: 33.3333%
    }

    .count-3.sm-cpdt>small:nth-of-type(2) {
        left: 66.6666%
    }

    .count-3.sm-cpdt>.item {
        --img-height: 120px
    }

    .count-4.sm-cpdt>div {
        flex: 0 0 25%
    }

    .count-4.sm-cpdt>small {
        font-size: 13px;
        padding: 3px 5px;
        margin: -34px 0 0 -11px
    }

    .count-4.sm-cpdt>small:nth-of-type(1) {
        left: 25%
    }

    .count-4.sm-cpdt>small:nth-of-type(2) {
        left: 50%
    }

    .count-4.sm-cpdt>small:nth-of-type(3) {
        left: 75%
    }

    .count-4.sm-cpdt>.item {
        --img-height: 80px
    }
}

@media (min-width: 750px) {

    .sm-cpdt,
    .sm-cpdt.fixed.show {
        display: grid;
        grid-template-columns: var(--cmp-left-col) repeat(4, 1fr);
        border: 1px solid #eee;
        border-radius: 4px
    }

    .sm-cpdt>.item {
        --img-height: 170px
    }

    .sm-comp-float .sm-cpdt {
        grid-template-columns: 0 repeat(4, 1fr)
    }

    .sm-comp-float .grid .sm-product {
        padding: 8.5px 16px
    }

    .sm-cpdt.fixed {
        top: var(--top-fixed);
        max-width: calc(var(--main-width) - 20px);
        left: auto
    }

    .sm-cpdt.size-s .sm-product>.name {
        font-size: 13px
    }

    .sm-cpdt.size-s .sm-product>.price {
        font-size: 14px
    }

    .sm-cpdt>small {
        font-size: 18px;
        padding: 8px 12px;
        margin: -24px 0 0 -20px
    }

    .sm-cpdt>.item>b {
        padding: 2px 10px;
        font-size: 20px
    }

    .sm-cpdt>small:nth-of-type(1) {
        left: calc((100% - var(--cmp-left-col)) * .25 + var(--cmp-left-col))
    }

    .sm-cpdt>small:nth-of-type(2) {
        left: calc((100% - var(--cmp-left-col)) * .5 + var(--cmp-left-col))
    }

    .sm-cpdt>small:nth-of-type(3) {
        left: calc((100% - var(--cmp-left-col)) * .75 + var(--cmp-left-col))
    }

    .pg-cmp-landing .sm-cpdt>.item {
        min-height: 289px !important
    }
}

@media (min-width: 750px) and (max-width: 1220px) {
    .sm-cpdt.fixed {
        left: 10px;
        right: 10px;
        width: auto
    }
}

@media (min-width: 1200px) {
    .sm-cpdt>.item>.dap-actions {
        flex-direction: row;
        margin-bottom: 8px
    }
}

.sm-comp-float>.head {
    padding: 8px 12px;
    font-size: 15px;
    line-height: 22px;
    background: #eee;
    display: flex;
    align-items: center
}

.sm-comp-float>.head *:first-child {
    flex: 1
}

.sm-comp-float>.btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-top: 1px solid #eee
}

.sm-comp-float>.btn-wrap .sm-btn {
    font-size: 14px;
    height: 34px
}

.sm-comp-float>.btn-wrap .sm-btn.cn-btn {
    font-size: 15px;
    height: 36px
}

@media (min-width: 750px) {
    .sm-comp-float>.head {
        border-radius: 8px 8px 0 0
    }
}

.sm-img {
    max-width: 100%;
    max-height: 100%;
    font-size: 0;
    object-fit: contain
}

.sm-img:not([src]) {
    visibility: hidden
}

.sm-img.cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

.sm-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%
}

.sm-img-wrap>img {
    display: block;
    position: absolute
}

sm-dap {
    --bg: inital;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--mv) 0;
    position: relative;
    height: calc(1px * var(--h));
    box-sizing: content-box;
    background: var(--bg, transparent);
    max-width: 100%
}

sm-dap>div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    background: var(--bg, ghostwhite);
    --aw: calc(1px * var(--w));
    width: var(--aw, 100%);
    height: calc(1px * var(--h))
}

sm-dap>div>*:only-child:not(img) {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

sm-dap>a,
sm-dap a.hfl {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1
}

sm-dap:first-child {
    margin-top: 0
}

sm-dap:last-child {
    margin-bottom: 0
}

sm-dap img {
    display: block;
    max-width: 100%;
    max-height: 100%
}

sm-dap .ipx {
    position: absolute;
    width: 1px;
    height: 1px;
    bottom: 0;
    right: 0
}

sm-dap .cb {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    background: #2f4f4f;
    border-radius: 0 0 0 3px;
    width: 19px;
    height: 20px
}

sm-dap .cb:after {
    content: "";
    display: block;
    background: var(--icon-close-circle);
    width: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    filter: invert(98%) sepia(4%) saturate(365%) hue-rotate(254deg) brightness(114%) contrast(100%)
}

sm-dap .expand {
    position: absolute;
    top: 0;
    right: 0;
    background: #2f4f4f;
    border-radius: 0 4px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 1px 8px;
    box-shadow: -3px 1px 6px #0000004d;
    z-index: 2;
    cursor: pointer
}

sm-dap .expand:hover {
    background: white;
    color: #2f4f4f
}

sm-dap.t-d {
    overflow: hidden
}

sm-dap.t-d>div {
    overflow: hidden
}

sm-dap.t-b>div {
    max-width: 100%
}

sm-dap.t-h>div {
    background: transparent;
    height: 100%;
    max-width: 100%
}

sm-dap.expanded {
    z-index: 9;
    overflow: visible !important
}

sm-dap.expanded>div {
    overflow: visible !important;
    align-items: flex-start
}

sm-dap.expanded>div>*:only-child:not(img) {
    width: 100%;
    height: auto
}

sm-dap.expanded img {
    display: none
}

sm-dap.expanded a.expando {
    display: block !important
}

sm-dap.expanded a.expando img {
    display: block !important;
    max-height: none;
    width: 100%;
    height: auto;
    box-shadow: 2px 2px 6px 1px #0006
}

sm-dap:not(.s)>div {
    border-radius: 4px
}

sm-dap:not(.s) img {
    border-radius: 4px
}

sm-dap.multi-v>div,
sm-dap.multi-h>div {
    background: transparent;
    padding-bottom: var(--mv);
    margin-bottom: calc(-1 * var(--mv))
}

sm-dap.multi-v sm-dap>div,
sm-dap.multi-h sm-dap>div {
    box-shadow: 1px 1px 2px 1px #aaa
}

sm-dap.multi-v sm-dap:hover>div,
sm-dap.multi-h sm-dap:hover>div {
    box-shadow: 2px 2px 4px 1px #777
}

sm-dap.multi-v>div {
    flex-direction: column
}

sm-dap.multi-h>div {
    width: 100%;
    justify-content: space-between
}

sm-dap.multi-h sm-dap {
    margin: 0
}

.sm-swiper sm-dap {
    margin: 0
}

@media (max-width: 750px) {
    sm-dap.p-d {
        display: none !important
    }

    sm-dap.p-m+.sm-box,
    .sm-box+sm-dap.p-m,
    sm-dap.p-m+sm-dap.p-m {
        margin-top: 0
    }

    sm-dap.s {
        width: 100vw;
        max-width: 100vw;
        height: calc(100vw * var(--h) / var(--w))
    }

    sm-dap.s>div {
        transform: scale(calc(var(--window-width) / var(--w)))
    }

    .sm-box.padded sm-dap.s {
        margin-left: calc(-1 * var(--phh));
        margin-right: calc(-1 * var(--phh))
    }

    sm-dap.multi-h {
        margin-left: var(--mv);
        margin-right: var(--mv)
    }

    sm-dap.multi-h>div {
        overflow: auto;
        gap: 6px;
        justify-content: start
    }

    sm-dap.multi-h sm-dap {
        width: 100%
    }
}

@media (min-width: 750px) {
    sm-dap.p-m {
        display: none !important
    }

    sm-dap.p-d+.sm-box,
    .sm-box+sm-dap.p-d,
    sm-dap.p-d+sm-dap.p-d {
        margin-top: 0
    }

    sm-dap:not(.s) {
        border-radius: 4px
    }
}

.sm-cats {
    --per-row: 5;
    display: grid;
    grid-template-columns: repeat(var(--per-row), 1fr);
    grid-gap: 8px 0;
    width: 100%;
    padding: 8px 4px
}

.sm-cats.scrl {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(91% / var(--per-row));
    overflow: auto
}

.sm-cats>a {
    box-sizing: border-box;
    padding: 0 4px;
    text-align: center;
    font-size: .9286rem;
    overflow: hidden;
    color: var(--color-text);
    width: 100%;
    max-width: 124px;
    display: flex;
    flex-direction: column
}

.sm-cats>a>img {
    width: 100%;
    height: auto;
    max-height: none;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 4px
}

.sm-cats>a:hover {
    text-shadow: -.05ex 0 currentColor, .05ex 0 currentColor
}

.sm-cats>a:hover>img {
    transform: scale(1.08)
}

.sm-cats.icon-s {
    grid-gap: 16px 0
}

.sm-cats.icon-s>a>img {
    padding: 4px 16px
}

.sm-cats.round>a>img {
    border-radius: 50%
}

.sm-cats>a>span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px
}

.sm-box-header+.sm-cats {
    padding-top: 2px
}

@supports (-webkit-backdrop-filter: blur(1px)) {
    .sm-cats>a>img {
        padding: 0;
        width: calc(100% - 4px);
        margin: 2px auto
    }

    .sm-cats.icon-s>a>img {
        padding: 0;
        width: calc(100% - 32px);
        margin: 4px auto
    }
}

@media (min-width: 750px) {
    .sm-cats {
        --per-row: 10;
        grid-auto-columns: 1fr !important
    }

    .sm-cats>a {
        font-size: 1.0358rem
    }

    .sm-cats>a>img {
        padding: 8px
    }

    .sm-cats.icon-s>a>img {
        padding: 4px 16px 12px !important
    }

    .aside-320 .sm-cats>a {
        font-size: .9286rem
    }

    .aside-320 .sm-cats>a>img {
        padding: 5px
    }

    aside:not(#_) .sm-cats>a {
        font-size: 13px
    }

    aside:not(#_) .sm-cats>a>img {
        padding: 2px
    }

    @supports (-webkit-backdrop-filter: blur(1px)) {
        .sm-cats>a>img {
            padding: 0;
            width: calc(100% - 16px);
            margin: 8px auto
        }

        .sm-cats.icon-s>a>img {
            padding: 0 !important;
            width: calc(100% - 32px);
            margin: 4px auto 12px
        }

        .aside-320 .sm-cats>a>img {
            padding: 0 !important;
            width: calc(100% - 10px);
            margin: 5px auto
        }

        aside:not(#_) .sm-cats>a>img {
            padding: 0 !important;
            width: calc(100% - 4px);
            margin: 2px auto
        }
    }
}

.sm-form {
    position: relative
}

.sm-form>.error {
    margin-bottom: 12px;
    border-radius: 4px
}

.sm-form.padded {
    padding: 0 var(--ph)
}

.sm-form.submitting:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .4)
}

.sm-box.padded>.sm-form>.error,
.sm-form.padded>.error {
    margin: 0 -12px 12px;
    width: calc(100% + 24px);
    border-radius: 0
}

.sm-input {
    width: 100%;
    max-width: 600px;
    --isize: 24px
}

.sm-input.type-rating {
    padding-bottom: 2px
}

.sm-input>label {
    display: block;
    margin-bottom: 2px;
    color: var(--color-text-light)
}

.sm-input>.input,
.sm-input select {
    display: block;
    padding: 7px 10px;
    border: 1px solid #d2d2d2;
    border-top-color: silver;
    background: #f0fff0;
    color: #000;
    width: 100%;
    font-size: 14px;
    line-height: 21px;
    max-height: 300px;
    box-shadow: inset 0 0 6px #ddd;
    border-radius: 3px;
    font-family: inherit
}

.sm-input>.input:focus,
.sm-input select:focus {
    outline: none;
    background: #ffc;
    border-color: #cea75b;
    box-shadow: inset 0 0 6px #dfdf9b
}

.sm-input>.input:disabled,
.sm-input select:disabled {
    opacity: .6
}

.sm-input>.input[readonly],
.sm-input select[readonly] {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 2px 0
}

.sm-input>.input::selection,
.sm-input select::selection {
    background: #3271e7;
    color: #fff
}

.sm-input.has-error>.input {
    background: #ffcece;
    border: 1px solid #df8f8f
}

.sm-input select {
    appearance: none;
    background: white;
    box-shadow: none
}

.sm-input select:focus {
    background: white;
    box-shadow: none
}

.sm-input select.empty {
    color: #888
}

.sm-input select option {
    color: #000
}

.sm-input>.select-wrap {
    position: relative
}

.sm-input>.select-wrap:after {
    content: "";
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23363636"><path d="M7,10L12,15L17,10H7Z"/></svg>');
    background-size: contain;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    right: 8px;
    bottom: 0;
    margin: auto 0;
    pointer-events: none
}

.sm-input>.check-wrap {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer
}

.sm-input>.check-wrap>input {
    display: none
}

.sm-input>.check-wrap>.label {
    order: 2;
    flex: 1
}

.sm-input>.check-wrap>i {
    order: 1;
    margin-right: calc(var(--isize) / 4)
}

.sm-input>.check-wrap>i:before {
    display: block;
    content: "";
    background: var(--icon-checkbox-blank);
    width: var(--isize);
    height: var(--isize)
}

.sm-input>.check-wrap>input:checked+i:before {
    background: var(--icon-checkbox)
}

.sm-input>.submit-wrap {
    display: inline-block
}

.sm-input.type-count {
    width: 90px
}

.sm-input>.count-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90px;
    font-size: 16px;
    font-weight: 500
}

.sm-input>.count-wrap>button {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    background: #44b50c;
    color: #fff;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700
}

.sm-input>.count-wrap>button:disabled {
    background: #bdbdbd;
    pointer-events: none
}

.sm-input>.help,
.sm-input>.error {
    margin-top: 2px;
    text-align: right
}

.sm-input>.help {
    color: #b8860b
}

.sm-input>.error {
    color: var(--color-danger)
}

.sm-input.size-s {
    font-size: .8572rem;
    --isize: 18px
}

.sm-box-item>.sm-input>.check-wrap>i {
    margin: 0 0 0 8px;
    order: 3
}

.sm-input+.sm-input {
    margin-top: 12px
}

.sm-input.no-label+.sm-input {
    margin-top: 9px
}

.sm-input-group {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 600px
}

.sm-input-group>.sm-input {
    width: auto;
    margin-top: 0
}

.sm-input-group+.sm-input,
.sm-input+.sm-input-group,
.sm-input-group+.sm-input-group {
    margin-top: 12px
}

@media (min-width: 750px) {

    .sm-input>.input,
    .sm-input select {
        font-size: 15px;
        line-height: 23px;
        padding: 8px 12px
    }
}

.sm-sech {
    background: linear-gradient(120deg, rgba(255, 195, 36, 1) 0%, rgba(255, 183, 35, 1) 70%, rgba(255, 153, 32, 1) 100%);
    font-size: 14px
}

.sm-sech>nav {
    display: flex;
    align-items: center;
    padding: 0 calc(var(--ph) - 6px);
    max-width: var(--main-width);
    margin: 0 auto
}

.sm-sech>nav>a:first-child {
    font-size: 18px;
    flex: 1;
    min-width: 90px
}

.sm-sech>nav>div {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    align-items: center;
    grid-gap: 20px
}

.sm-sech a {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #4c4f89;
    font-weight: 500;
    padding: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sm-sech a .icon {
    --s: 22px
}

.sm-sech a:hover {
    color: #242642
}

@media (max-width: 1060px) {
    .sm-sech>nav>div {
        grid-gap: 10px
    }
}

@media (max-width: 370px) {
    .sm-sech>nav>div {
        grid-gap: 6px
    }
}

.sm-install-app-popup {
    padding: 12px 16px 16px
}

.sm-install-app-popup p {
    margin: 4px 0 16px
}

.sm-install-app-popup .actions {
    display: flex;
    justify-content: space-between
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative
}

#app>.loading {
    max-height: 0;
    overflow: visible;
    z-index: 2;
    position: fixed;
    width: 100%;
    top: 54px;
    display: flex;
    justify-content: center
}

#app>.loading>div {
    width: 46px;
    min-height: 46px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px #0006;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 10px
}

sm-dap[pos=m_all_header_button],
sm-dap[pos=m_all_header_button_row] sm-dap {
    --bg: #1f78f4;
    align-items: flex-start;
    margin: var(--mv);
    border-radius: 4px;
    box-shadow: 1px 1px 3px #888
}

sm-dap[pos=m_all_header_button]>div,
sm-dap[pos=m_all_header_button_row] sm-dap>div {
    box-shadow: none !important
}

sm-dap[pos=m_all_header_button]:after,
sm-dap[pos=m_all_header_button_row] sm-dap:after {
    content: "";
    background: var(--icon-chevron-right) no-repeat center/contain;
    position: absolute;
    right: -2px;
    width: 28px;
    top: 0;
    bottom: 0;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)
}

sm-dap[pos=m_all_header_button] {
    height: calc((100vw - 24px - (2 * var(--mv))) * var(--h) / var(--w))
}

sm-dap[pos=m_all_header_button]>div {
    height: 100%;
    width: calc(100% - 24px)
}

sm-dap[pos=m_all_header_button_row] sm-dap {
    padding: 0 8px 0 0;
    margin: 0
}

sm-dap[pos=d_all_header_button_row] sm-dap {
    width: calc(25vw - 15px);
    height: calc(.15625*(25vw - 15px));
    max-width: 291px;
    max-height: 45px
}

@media (min-width: 750px) {
    #app>sm-dap {
        width: calc(100% - 20px);
        max-width: calc(var(--main-width) - 20px);
        align-self: center
    }
}

:root {
    --icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>');
    --icon-close-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23DB3131"><path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/></svg>');
    --icon-star-outline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23CCAD00"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>');
    --icon-star: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23CCAD00"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>');
    --icon-checkbox-blank: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23007AF5"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"/></svg>');
    --icon-checkbox: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23007AF5"><path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"/></svg>');
    --icon-plus-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/></svg>');
    --icon-minus-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/></svg>');
    --icon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg>');
    --icon-chevron-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/></svg>');
    --icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>');
    --icon-offer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2326a541' fill-rule='evenodd' d='M11.646 5.748l-5.4-5.4A1.192 1.192 0 0 0 5.4 0H1.2C.54 0 0 .54 0 1.2v4.2c0 .33.132.63.354.852l5.4 5.4c.216.216.516.348.846.348.33 0 .63-.132.846-.354l4.2-4.2C11.868 7.23 12 6.93 12 6.6c0-.33-.138-.636-.354-.852zM2.625 3.75A1.123 1.123 0 0 1 1.5 2.625c0-.622.502-1.125 1.125-1.125s1.125.503 1.125 1.125S3.248 3.75 2.625 3.75z'/%3E%3C/svg%3E%0A")
}

.icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    fill: currentColor;
    position: relative;
    box-sizing: content-box;
    display: inline-block;
    line-height: 1
}

.icon.hover {
    cursor: pointer
}

.icon.hover:hover {
    opacity: 1;
    filter: brightness(.5)
}

.icon[disabled],
.icon.disabled {
    opacity: .5;
    cursor: default !important
}

.sm-rating {
    display: inline-flex;
    align-items: center;
    --size: 1.0001rem;
    --rating: 5
}

.sm-rating>.text {
    font-size: 13px;
    padding: 0 7px;
    background: green;
    color: #fff;
    border-radius: 3px;
    font-weight: 700;
    margin-right: 6px
}

.sm-rating>i {
    display: block;
    background: var(--icon-star-outline) left/var(--size);
    width: calc(var(--size) * 5);
    height: var(--size)
}

.sm-rating>i:after {
    content: "";
    display: block;
    background: var(--icon-star) left/var(--size);
    width: calc(var(--size) * var(--rating));
    height: 100%
}

.sm-box {
    position: relative;
    border: 1px solid gainsboro;
    border-width: 1px 0;
    background: white;
    margin: var(--mv) 0
}

.sm-box>* {
    z-index: 1
}

.sm-box.c-b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.sm-box.f-h {
    display: flex;
    flex-direction: row
}

.sm-box.padded {
    padding: var(--pv) var(--phh)
}

.sm-box:not(.padded)>h1,
.sm-box:not(.padded)>h2 {
    padding: 12px var(--phh) 6px var(--phh)
}

.sm-box>h1,
.sm-box>h2 {
    padding: 4px 0 12px
}

.sm-box>h3 {
    padding: 0 0 10px
}

.sm-box.no-margin {
    margin: 0
}

.sm-box.no-margin+.no-margin {
    border-top: 0
}

.sm-box>.description {
    margin: 0 0 12px;
    padding: 0 var(--phh)
}

.sm-box>.padded {
    padding: 0 var(--phh)
}

.sm-box>.unpadded {
    padding: 0
}

.sm-box.notice {
    font-size: 1.08rem;
    line-height: 1.4;
    padding: var(--pv) var(--phh)
}

.sm-box.notice-info {
    background: #e4f2fe
}

.sm-box.notice-warning {
    background: #fff3e0;
    color: #79561f
}

.sm-box.notice-success {
    background: #e7f5d0;
    color: #015a01
}

.sm-box.notice-error,
.sm-box.notice-danger {
    background: #fad7d7;
    color: #871d03
}

.sm-box.notice-palegoldenrod {
    background: #f2edbb;
    color: #4d480f
}

*>.sm-box:first-child {
    margin-top: 0
}

*>.sm-box:last-child {
    margin-bottom: 0
}

.sm-box::-webkit-scrollbar {
    display: none
}

.sm-box-header {
    display: flex;
    align-items: center;
    padding: var(--pv) var(--phh)
}

.sm-box-header+.sm-box,
.sm-box+.sm-box {
    margin-top: 0
}

.padded>.sm-box-header {
    padding: 0 0 var(--pv) 0
}

.collapse>.sm-box-header:after {
    display: block;
    font-weight: 700;
    content: "\2212";
    font-size: 24px;
    height: 24px;
    margin: 0 0 0 4px;
    line-height: 24px
}

.collapse>.sm-box-header {
    cursor: pointer
}

.collapse.closed>.sm-box-header:after {
    content: "+"
}

.collapse.closed.padded>.sm-box-header {
    padding-bottom: 0
}

.sm-box.collapse.closed>*:not(.sm-box-header) {
    display: none
}

.sm-box-title {
    flex: 1
}

.sm-box-actions {
    font-size: .9286rem;
    text-align: right
}

.sm-box-header h2,
.sm-box>h3 {
    font-size: 1.2858rem;
    font-weight: 500;
    line-height: 1.3333
}

.sm-box-header small {
    display: block;
    font-size: .8572rem;
    line-height: 1.3333;
    margin-top: 2px;
    color: #777
}

.size-s .sm-box-header h2 {
    font-size: 1.0001rem
}

.size-s .sm-box-header small {
    font-size: .7857rem
}

.sm-box-root>.sm-box:first-child {
    margin-top: 0
}

.sm-box-root>.sm-box:last-child {
    margin-bottom: 0
}

.sm-box.no-bg {
    background: transparent;
    border: 0;
    box-shadow: none
}

@media (max-width: 750px) {
    .sm-box {
        width: 100%
    }

    .sm-box.notice {
        border-width: 0
    }

    .sm-box.inside {
        width: auto;
        border-radius: 4px;
        margin: 0 var(--phh);
        border-width: 1px;
        box-shadow: 1px 1px 2px -1px #ccc
    }

    .sm-box.padded>.sm-box.notice:not(.inside) {
        margin-left: var(--nphh);
        margin-right: var(--nphh);
        width: calc(100% + 2 * var(--phh))
    }
}

@media (min-width: 750px) {
    .sm-box {
        border-width: 1px;
        border-radius: 4px;
        box-shadow: 1px 1px 2px -1px #ccc
    }

    .sm-box-group {
        display: grid;
        grid-auto-flow: column;
        grid-gap: var(--phh)
    }

    .sm-box-group .sm-box {
        margin: 0
    }
}

.sm-box-item {
    position: relative;
    border-top: 1px solid #eee;
    padding: .8572rem var(--ph);
    font-size: 1.0429rem
}

.sm-box-item>.subtext,
.sm-box-item>.sm-input .subtext {
    display: block;
    font-size: .9rem;
    color: var(--color-link);
    margin-top: 3px
}

.sm-box-item>.subtext>.tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px dashed #ccc;
    border-radius: 3px;
    margin: 4px 10px 0 0
}

.sm-box-item>.img {
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px
}

.sm-box-item>a:only-child {
    display: block;
    margin: -.8572rem calc(-1 * var(--ph));
    padding: .8572rem var(--ph)
}

.sm-box-item.type-sub-heading {
    background: #eaeafa;
    border: none;
    padding: .2857rem var(--ph);
    font-size: 1.1429rem;
    font-weight: 700
}

.sm-box-item.type-sub-heading+.sm-box-item {
    border-top: 0
}

.sm-box-item.type-app-link {
    font-weight: 700;
    cursor: pointer
}

.sm-box-item.type-app-link>a {
    color: var(--color-text)
}

.sm-box-item.type-app-link:after {
    content: "";
    background: var(--icon-chevron-right) no-repeat center/contain;
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    width: 20px
}

.sm-box-item.type-app-link:hover {
    background: whitesmoke
}

.sm-box-item:first-child {
    border-top: none
}

.sm-box.padded>.sm-box-item {
    margin: 12px -12px 0
}

.sm-box.padded>.sm-box-item+.sm-box-item {
    margin-top: 0
}

.sm-box.padded>.sm-box-item:first-child {
    margin-top: -10px
}

.sm-box.padded>.sm-box-item:last-child {
    margin-bottom: -12px
}

.sm-menu-wrap {
    display: none;
    position: absolute;
    transition: opacity .2s ease-out;
    max-width: 80%;
    z-index: 11
}

.sm-menu {
    --img-size: 24px;
    display: grid;
    background: white;
    padding: 8px 0;
    border-radius: 3px;
    overflow-y: auto;
    overflow-x: hidden;
    contain: content;
    box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f
}

.sm-menu>a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    position: relative;
    text-decoration: none;
    user-select: none;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text)
}

.sm-menu>a:hover {
    background: #ebebff
}

.sm-menu>a.bold {
    font-weight: 700
}

.sm-menu>a.subHeading {
    font-weight: 700;
    font-size: 16px;
    border-width: 1px 0;
    margin-bottom: -4px;
    flex-direction: row-reverse
}

.sm-menu>a.subHeading:not(:first-child) {
    margin-top: 4px
}

.sm-menu>a>.text {
    color: var(--color-text);
    flex: 1;
    white-space: nowrap
}

.sm-menu>a>.count {
    font-size: .8572rem;
    margin: 0 -4px 0 16px;
    padding: 1px 7px;
    background: #e7e7e7;
    border-radius: 4px;
    color: var(--color-text-light)
}

.sm-menu>a>.icon {
    margin: 0 8px 0 -3px;
    color: #888
}

.sm-menu>a>img {
    width: var(--img-size);
    height: var(--img-size);
    margin: 0 10px 0 -3px;
    background: #888;
    border-radius: 50%;
    max-width: var(--img-size);
    max-height: var(--img-size);
    object-fit: cover
}

.sm-menu>a.subHeading>img {
    margin: 0 -3px 0 10px
}

.sm-menu>.sep {
    border-top: 1px solid #ddd;
    margin: 8px 0;
    cursor: default
}

.sm-menu-column {
    grid-area: 1 / var(--n) / 1 / var(--n);
    margin: -8px 0;
    display: flex;
    flex-direction: column
}

.sm-menu-column>.title {
    padding: 9px 16px;
    font-size: 16px;
    background: aliceblue
}

.sm-menu-column .sm-menu {
    box-shadow: none;
    border: none;
    padding-top: 2px
}

.sm-dropdown {
    --top: 52px;
    display: flex;
    align-items: center;
    position: relative;
    height: 100%
}

.sm-dropdown>.icon:first-child {
    margin-right: 6px
}

.sm-dropdown>img:first-child {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background: lightblue;
    border-radius: 50%
}

.sm-dropdown>.d {
    --s: 14px;
    opacity: .7;
    margin-left: 3px;
    transition: all .1s ease-out
}

.sm-dropdown.visible>.d {
    transform: rotate(180deg);
    opacity: 1
}

.sm-dropdown>.x {
    display: none;
    position: absolute;
    top: var(--top);
    z-index: 10;
    right: 0
}

.sm-dropdown>.x:before {
    content: "";
    display: block;
    border: 10px solid transparent;
    border-bottom: 10px solid white;
    width: 0;
    position: absolute;
    top: -20px;
    right: 38px;
    z-index: 1
}

.sm-dropdown.visible>.x {
    display: block
}

.sm-content {
    font-size: 1.0001rem
}

.sm-content p {
    margin: 0 0 9px;
    overflow-x: auto
}

.sm-content p.bold {
    margin-top: 18px
}

.sm-content p+p.bold {
    margin-bottom: 6px
}

.sm-content .bold,
.sm-content strong,
.sm-content b {
    font-weight: 600
}

.sm-content h1,
.sm-content h2,
.sm-content h3,
.sm-content h4,
.sm-content h5,
.sm-content h6 {
    font-weight: 600;
    line-height: 1.3333;
    margin: 26px 0 9px
}

.sm-content h1 {
    font-size: 1.5714em
}

.sm-content h2 {
    font-size: 1.3571em
}

.sm-content h3 {
    font-size: 1.1423em
}

.sm-content h4 {
    font-size: 1em
}

.sm-content h5,
.sm-content h6 {
    font-size: .8572em
}

.sm-content>*:first-child {
    margin-top: 0 !important
}

.sm-content>*:last-child {
    margin-bottom: 0 !important
}

.sm-content blockquote {
    clear: both;
    margin: 14px 0;
    padding: 10px 8px 10px 13px;
    background-color: #e9e9e9;
    border-left: 5px solid #cfcfcf;
    overflow: hidden;
    border-radius: 4px
}

.sm-content blockquote>*:first-child {
    margin-top: 0 !important
}

.sm-content blockquote>*:last-child {
    margin-bottom: 0 !important
}

.sm-content a {
    color: var(--color-link);
    text-decoration: none;
    cursor: pointer
}

.sm-content a:visited {
    color: var(--color-link)
}

.sm-content ul {
    list-style-type: circle;
    margin: 2px 0 8px 24px
}

.sm-content ol {
    list-style-type: decimal;
    margin: 2px 0 8px 24px
}

.sm-content li:not(:first-child) {
    margin-top: 3px
}

.sm-content code,
.sm-content pre {
    font-family: Consolas, Menlo, Monaco, Hack, Lucida Console, Liberation Mono, DejaVu Sans Mono, monospace
}

.sm-content code {
    white-space: pre-wrap;
    display: block;
    padding: 5px 10px;
    color: #222;
    background: #e9e9e9;
    max-height: 500px;
    border-radius: 4px
}

.sm-content table {
    font-size: inherit;
    width: 100%;
    color: inherit;
    margin-bottom: 9px
}

.sm-content caption {
    margin-bottom: 8px;
    font-weight: 700
}

.sm-content th,
.sm-content td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    text-align: left
}

.sm-content th {
    border-bottom: 2px solid #ddd;
    border-top: 2px solid #ddd;
    font-weight: 700
}

.sm-content table>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}

.sm-content img,
.sm-content video {
    display: block;
    max-width: 100%;
    max-height: 500px;
    height: auto;
    object-fit: contain;
    margin: 10px auto;
    border-radius: 4px
}

.sm-content video[poster] {
    object-fit: cover
}

.sm-content figure,
.sm-content figure>a,
.sm-content figure>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 1em 0
}

.sm-content figure+figure,
.sm-content figure:first-child {
    margin-top: 0
}

.sm-content figure img,
.sm-content figure video,
.sm-content figure>a:only-of-type,
.sm-content figure>div:only-of-type {
    margin: 0
}

.sm-content figcaption {
    margin-top: 7px;
    font-size: 12px;
    font-style: italic;
    color: #555
}

.sm-content iframe,
.sm-content>div {
    max-width: 100%
}

.sm-content sm-dap {
    margin: 18px 0
}

.sm-content sm-dap img {
    margin: 0;
    max-height: 100%
}

@media (max-width: 750px) {

    .sm-content img,
    .sm-content video {
        width: 100%
    }
}

.sm-desc {
    position: relative;
    padding: 0 var(--ph);
    margin-bottom: 12px;
    font-size: 13px
}

.sm-desc>div {
    max-height: 4.5em;
    color: #757575;
    overflow: hidden;
    font-size: 13px
}

.sm-desc>span {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 37%, rgba(255, 255, 255, 0) 100%);
    width: 160px;
    text-align: right
}

.sm-ldesc {
    padding: 12px var(--ph);
    color: #4e5665
}

.sm-ldesc,
.sm-show-more {
    position: relative;
    --h: 604px
}

.sm-ldesc>div,
.sm-show-more>div {
    max-height: var(--h, 604px);
    overflow: hidden
}

.sm-ldesc>span,
.sm-show-more>span {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100px
}

.sm-ldesc>span>.sm-btn,
.sm-show-more>span>.sm-btn {
    position: absolute;
    bottom: 14px;
    border-radius: 40px;
    background: #f8f8ff;
    color: var(--color-primary)
}

.sm-box-header+.sm-ldesc {
    padding-top: 6px
}

.sm-desc.open>div,
.sm-ldesc.open>div,
.sm-show-more.open>div {
    max-height: none
}

.sm-desc.open>span,
.sm-ldesc.open>span,
.sm-show-more.open>span {
    display: none
}

.sm-tabs {
    display: flex;
    flex-direction: column;
    height: 100%
}

.sm-tabs-content {
    padding: 0;
    flex: 1;
    overflow: auto
}

.sm-tabs-head {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.0715rem;
    font-weight: 700;
    color: #576369;
    background: lavender;
    overflow-x: auto
}

.sm-tabs-head::-webkit-scrollbar {
    display: none
}

.sm-tabs-head>div {
    position: relative;
    padding: 12px 16px;
    transition: color .2s ease;
    cursor: pointer
}

.sm-tabs-head>div:hover {
    color: #008acf
}

.sm-tabs-head>div:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    opacity: 0;
    transform: scaleX(0);
    transition: all .2s ease;
    width: 100%;
    background: #2196f3
}

.sm-tabs-head>div.active {
    color: #2196f3
}

.sm-tabs-head>div.active:after {
    opacity: 1;
    transform: scaleX(1)
}

.sm-pdrop {
    color: green
}

.sm-pdrop:before {
    content: "\25bc";
    margin-right: .2em
}

.sm-pdrop.red {
    color: var(--color-drop-red)
}

.sm-pdrop.red:before {
    content: "\25b2"
}

.sm-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.sm-loading>div {
    margin-top: 6px
}

.sm-loading.full {
    flex: 1;
    height: 100%
}

main>.sm-loading {
    background: white
}

@media (min-width: 750px) {
    main>.sm-loading {
        border-radius: 4px;
        border: 1px solid gainsboro;
        box-shadow: 1px 1px 2px -1px #ccc
    }

    h1+.sm-loading,
    .h1+.sm-loading {
        margin-top: 4px
    }
}

.sm-page-actions {
    background: #eee
}

h1+.sm-page-actions {
    margin-top: 6px
}

.sm-page-actions>ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    padding: 0 10px
}

.sm-page-actions li {
    flex: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    font-size: 15px;
    line-height: 20px;
    color: #ff69b4;
    cursor: pointer
}

.sm-page-actions li>span {
    margin-left: 4px
}

.sm-page-actions li:hover {
    color: var(--color-link)
}

@media (max-width: 350px) {
    .sm-page-actions.product li {
        font-size: 13px
    }
}

@media (max-width: 750px) {
    .sm-page-actions .edit {
        margin-right: 6px
    }

    .sm-page-actions .edit span {
        display: none
    }
}

@media (min-width: 750px) {
    .sm-page-actions {
        border-radius: 0 0 4px 4px;
        padding: 0 12px;
        background: hsl(208, 100%, 96%)
    }

    .sm-page-actions>ul {
        justify-content: end;
        grid-gap: 50px
    }

    .sm-page-actions.comparison {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 0 0 4px;
        padding: 0 8px
    }

    .sm-page-actions.comparison>ul {
        grid-auto-flow: row;
        grid-gap: 0
    }

    .sm-page-actions.deal {
        border-radius: 4px
    }

    .sm-page-actions.deal>ul {
        grid-gap: 0;
        justify-content: space-between
    }
}

.sm-load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2858rem;
    background: aliceblue;
    height: 3.3575rem;
    flex: 0 0 3.3575rem;
    border: 1px solid #eaeaea;
    border-width: 1px 0 0 0;
    color: var(--color-link);
    font-weight: 700;
    cursor: pointer
}

.sm-load-more:hover {
    color: var(--color-link-hover)
}

.sm-box>.sm-links {
    margin: -2px var(--ph) 7px calc(var(--ph) - 3px)
}

.sm-box.padded>.sm-links {
    margin: -2px 0 -3px -3px
}

.sm-links>a {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.5;
    padding: 4px 0 3px;
    margin-bottom: 1px
}

.sm-links>a:before {
    content: "\2022";
    position: relative;
    font-size: 26px;
    line-height: 24px;
    color: #dfe1e8;
    padding-right: 8px
}

.sm-box>.sm-links.no-dot {
    margin-left: var(--ph)
}

.sm-links.no-dot>a {
    display: block
}

.sm-links.no-dot>a:before {
    display: none
}

.sm-block-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    gap: 6px;
    padding: 0 var(--ph) 10px var(--ph)
}

.sm-block-links.scrl {
    grid-template-columns: repeat(3, 94px);
    grid-auto-flow: column;
    grid-auto-columns: 94px;
    overflow: auto
}

.sm-block-links>a {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border: 1px solid #d5d6d7;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #0000001a;
    background: rgba(255, 255, 255, .6)
}

.sm-block-links>a strong {
    font-size: 1.07em
}

.sm-block-links>a:hover {
    box-shadow: 2px 2px 3px #0003;
    border-color: var(--color-link)
}

@media (min-width: 750px) {
    .sm-block-links {
        grid-template-columns: repeat(6, 1fr)
    }

    .sm-block-links.scrl {
        grid-template-columns: 1fr;
        grid-auto-columns: 1fr
    }
}

.sm-slider-arrow {
    --size: 32px;
    z-index: 3
}

.sm-slider-arrow>div {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px #0000001c;
    border-radius: 4px 0 0 4px;
    width: var(--size);
    height: calc(var(--size) * 2);
    position: absolute;
    top: calc(50% - var(--size));
    right: 0;
    background: rgba(255, 255, 255, .7);
    user-select: none
}

.sm-slider-arrow>div:after {
    content: "";
    background: var(--icon-chevron-right);
    width: var(--size);
    height: var(--size)
}

.sm-slider-arrow>div:first-child {
    border-radius: 0 4px 4px 0;
    right: auto;
    left: 0
}

.sm-slider-arrow>div:first-child:after {
    background: var(--icon-chevron-left)
}

@media (max-width: 750px) {
    .sm-slider-arrow {
        display: none
    }
}

.sm-swiper-wrapper {
    position: relative;
    height: 50vw;
    display: flex;
    flex-direction: column
}

.sm-swiper {
    display: flex;
    width: 100%;
    flex: 1;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none
}

.sm-swiper::-webkit-scrollbar {
    display: none
}

.sm-swiper>* {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always
}

.sm-swiper-indicators {
    position: absolute;
    bottom: .2857rem;
    left: 0;
    width: 100%;
    z-index: 1;
    text-align: right;
    padding: 0 .4286rem;
    box-sizing: border-box
}

.sm-swiper-indicators>ul {
    background: rgba(0, 0, 0, .2);
    padding: .2143rem .4286rem;
    border-radius: .4286rem;
    display: inline-grid;
    grid-gap: .2143rem;
    grid-auto-flow: column
}

.sm-swiper-indicators>ul>li {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    background: #555;
    border-radius: 50%
}

.sm-swiper-indicators>ul>li.on {
    background: white
}

.sm-swiper-thumbs {
    margin-top: 10px;
    overflow: hidden;
    position: relative
}

.sm-swiper-thumbs>ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    grid-gap: 5px;
    overflow: auto;
    scrollbar-width: none
}

.sm-swiper-thumbs>ul::-webkit-scrollbar {
    display: none
}

.sm-swiper-thumbs>ul>li {
    width: 60px;
    height: 60px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.sm-swiper-thumbs>ul>li.on {
    border: 2px solid var(--color-primary);
    padding: 4px
}

.sm-swiper-thumbs .sm-slider-arrow {
    --size: 24px
}

.sm-swiper-thumbs.has-more>ul {
    padding: 0 32px;
    justify-content: start
}

@media (min-width: 750px) {
    .sm-swiper-indicators {
        display: none
    }

    .sm-swiper img {
        border-radius: 4px
    }
}

.sm-article {
    --img-w: 108px;
    display: grid;
    grid-gap: 2px 14px;
    grid-template: "image title" min-content "image info" min-content "image desc" min-content "image tags" 1fr / var(--img-w) 1fr;
    margin-top: 16px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5
}

.sm-article:first-child {
    margin-top: 0 !important
}

.sm-article>img {
    grid-area: image;
    border-radius: 4px;
    height: 81px;
    object-fit: cover;
    width: 100%
}

.sm-article>a {
    grid-area: title;
    font-size: 15px;
    font-weight: 700;
    color: #444
}

.sm-article>p {
    grid-area: desc;
    color: #777
}

.sm-article>.tag {
    position: absolute;
    top: 0;
    left: 0;
    background: #007dfa;
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px 0;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    max-width: 98px;
    overflow: hidden;
    white-space: nowrap
}

.sm-article:hover>img {
    transform: scale(1.07)
}

.sm-article:hover>a {
    color: #2874f0
}

.sm-article>.tags {
    grid-area: tags;
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap
}

.sm-article>.tags>a {
    padding: 0 9px;
    border-radius: 4px;
    font-size: 12px;
    height: 21px;
    line-height: 21px;
    border: 1px solid #ccc;
    color: #777;
    white-space: nowrap
}

.sm-article>.tags>a:hover {
    background: var(--color-link-hover);
    color: #fff
}

.sm-article>.info {
    grid-area: info;
    color: #777;
    margin: 4px 0
}

.sm-article>.info a {
    color: #444
}

.sm-article>.info a:hover {
    color: var(--color-link-hover)
}

.sm-article.size-l {
    --img-w: 120px;
    margin-top: 26px
}

.sm-article.size-l>img {
    height: 120px
}

.sm-article.size-l>a {
    font-size: 17px
}

.sm-article.size-s {
    --img-w: 70px;
    margin-top: 12px;
    grid-gap: 0 10px;
    align-items: center;
    grid-template: "image title" 1fr / var(--img-w) 1fr
}

.sm-article.size-s>img {
    height: 50px
}

.sm-article.size-s>a {
    font-size: 14px;
    font-weight: 500
}

.sm-article.text-on-image {
    grid-template: "title" "info";
    height: 150px;
    position: relative;
    align-content: end;
    padding: 4px 12px;
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px
}

.sm-article.text-on-image:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .8) 100%)
}

.sm-article.text-on-image>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.sm-article.text-on-image>a {
    z-index: 2;
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 20%)
}

.sm-article.text-on-image:hover>a {
    color: wheat
}

.sm-article.text-on-image>.info {
    z-index: 2;
    color: #eee;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 20%)
}

.sm-article.text-on-image>.info a {
    color: #fff
}

.sm-article.text-on-image>p {
    display: none !important
}

.sm-article.text-on-image>.tags {
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 4px
}

.sm-article.text-on-image>.tags a {
    color: #f9f9f9;
    border-color: #e3e3e3
}

.sm-article.text-on-image>.icon {
    --s: 48px;
    fill: #fff;
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1
}

.sm-article.text-on-image>.tags+.icon {
    left: auto;
    right: 4px
}

@media (min-width: 750px) {
    .sm-article.size-l {
        --img-w: 250px;
        grid-gap: 4px 20px;
        margin-top: 32px
    }

    .sm-article.size-l>img {
        height: 200px
    }

    .sm-article.size-l>a {
        font-size: 22px
    }

    .sm-article.size-l>p {
        font-size: 15px
    }
}

.sm-box .sm-articles {
    padding: 0 var(--ph) 10px var(--ph)
}

.sm-articles.scroll {
    display: grid;
    grid-auto-columns: 66.67%;
    grid-auto-columns: min(66.6667%, 290px);
    grid-auto-flow: column;
    grid-gap: 8px;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.sm-articles.scroll.len-1 {
    grid-auto-columns: 100%
}

.sm-articles.scroll .sm-article {
    margin: 0
}

.sm-articles.scroll::-webkit-scrollbar {
    display: none
}

.sm-box>.sm-articles.scroll {
    padding-bottom: .5714rem
}

.sm-box>.sm-articles.scroll:first-child {
    padding-top: .5714rem
}

@media (min-width: 750px) {
    .sm-articles.scroll {
        --per-row: 3;
        grid-auto-flow: row;
        grid-template-columns: repeat(var(--per-row), 1fr);
        padding: 0 var(--ph)
    }

    .sm-articles.scroll.len-4,
    .sm-articles.scroll.len-8 {
        --per-row: 4
    }
}

.sm-comp-with>a {
    display: grid;
    grid-template: "name1 img1 vs img2 name2" minmax(36px, auto) / 1fr 36px 36px 36px 1fr;
    font-size: 13px;
    line-height: 18px;
    align-items: center;
    padding: 8px var(--ph);
    border-top: 1px solid #eee;
    color: #333
}

.sm-comp-with>a>img:nth-child(1) {
    grid-area: img1;
    max-width: 36px;
    max-height: 36px;
    justify-self: center
}

.sm-comp-with>a>img:nth-child(2) {
    grid-area: img2;
    max-width: 36px;
    max-height: 36px;
    justify-self: center
}

.sm-comp-with>a>span:nth-child(3) {
    grid-area: name1;
    padding-right: 6px
}

.sm-comp-with>a>span:nth-child(4) {
    grid-area: vs;
    justify-self: center;
    color: #708090;
    font-weight: 700
}

.sm-comp-with>a>span:nth-child(5) {
    grid-area: name2;
    text-align: right;
    padding-left: 6px
}

.sm-comp-with>a:hover {
    background: honeydew;
    color: var(--color-link-hover)
}

.sm-products {
    display: flex;
    --per-row: 3;
    --item-width: calc(100% / var(--per-row));
    --img-height: calc(250px / var(--per-row))
}

.sm-products.img-long {
    --img-height: calc(532px / var(--per-row))
}

.sm-products.scroll {
    --per-row: 3.5
}

.sm-products.list {
    display: block;
    overflow: hidden
}

.sm-products.grid {
    flex-flow: row wrap;
    overflow: hidden;
    position: relative
}

.sm-products.scroll {
    padding: 0 .2143rem
}

.sm-box>.sm-products.scroll {
    padding-bottom: .5714rem
}

@media (max-width: 750px) {
    .sm-products.grid.max-row-2 .sm-product:nth-child(n + 7) {
        display: none
    }
}

@media (min-width: 750px) {
    .sm-products {
        --per-row: 4;
        --img-height: calc(600px / var(--per-row))
    }

    .sm-products.per-row-5 {
        --per-row: 5
    }

    .sm-products.grid.per-row-5.len-6 .sm-product:nth-child(n + 6) {
        display: none
    }

    .sm-products.grid {
        right: -2px;
        margin-left: -2px
    }

    .sm-products.scroll {
        --per-row: 4.5
    }

    .sm-products.grid.len-5 {
        --per-row: 5
    }

    .sm-products.img-long {
        --img-height: calc(800px / var(--per-row))
    }

    @supports (width: min(2px, 3px)) {
        .sm-products.img-long {
            --img-height: min(calc(900px / var(--per-row)), 200px)
        }
    }
}

.sm-deal {
    position: relative;
    padding: 12px;
    display: grid;
    align-items: center;
    grid-gap: 2px 14px;
    grid-template: "img name name" auto "img price mrp" auto "img liner liner" auto / 90px auto 1fr;
    background: white;
    font-size: 13px;
    border-top: 1px solid #eaeaea;
    cursor: pointer
}

.sm-deal:hover {
    box-shadow: 0 0 4px 1px #ccc;
    z-index: 2;
    border-radius: 4px
}

.sm-deal:first-child {
    border: 0
}

.sm-deal>.sm-img-wrap {
    grid-area: img;
    height: auto;
    align-self: stretch
}

.sm-deal>.sm-img-wrap img {
    border-radius: 4px
}

.sm-deal>.name {
    grid-area: name;
    font-weight: 700
}

.sm-deal>.sm-btn {
    grid-area: btn
}

.sm-deal>.price {
    grid-area: price;
    color: green;
    font-weight: 700
}

.sm-deal>.mrp {
    grid-area: mrp;
    text-decoration: line-through;
    color: #707070;
    font-size: 11px
}

.sm-deal>.liner {
    grid-area: liner;
    font-size: 12px;
    color: gray;
    line-height: 16px
}

.sm-deal>.store {
    display: flex;
    align-items: center;
    gap: 5px
}

.sm-deal>.store>span {
    flex: 1;
    font-weight: 700;
    color: #7f8f9f;
    font-size: 13px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.sm-deal>.store>.sm-btn {
    height: 26px
}

.grid .sm-deal {
    grid-template: "img img" 160px "name name" 4.5em "price mrp" auto "liner liner" auto "store store" auto / 1fr auto
}

.grid .sm-deal>.price {
    margin-top: 3px;
    font-size: 16px
}

.grid .sm-deal>.name {
    font-weight: 400;
    filter: brightness(.7)
}

.grid .sm-deal>.store {
    grid-area: store;
    margin-top: 7px
}

.list .sm-deal>.store>span {
    position: absolute;
    bottom: 4px;
    right: 6px
}

.list .sm-deal>.store>.sm-btn {
    display: none
}

.sm-deals {
    display: flex;
    flex-direction: column
}

.sm-deals.grid {
    --per-row: 4;
    flex-direction: row;
    flex-flow: row wrap
}

.sm-deals.grid>div {
    flex: 0 0 50%
}

.sm-deals.grid.len-5 {
    --per-row: 5
}

@media (max-width: 750px) {
    .sm-deals.grid.len-5>div:nth-child(n + 5) {
        display: none
    }
}

@media (min-width: 750px) {
    .sm-deals.grid>div {
        flex: 0 0 calc(100% / var(--per-row))
    }
}

.flex-column {
    display: flex;
    flex-direction: column
}

.sm-dyn-section>div+* {
    margin-top: 0
}

.sm-dyn-section+.sm-dyn-section {
    margin-top: 1.8573rem
}

.flex-column>.sm-dyn-section {
    margin-top: 0
}

.sm-dyn-section>.head h2 {
    font-size: 26px
}

.sm-dyn-section>.head h3 {
    font-size: 20px
}

@media (max-width: 750px) {
    .sm-dyn-section>.head h2 {
        font-size: 20px
    }

    .sm-dyn-section>.head h3 {
        font-size: 17px
    }

    .sm-dyn-content.m-full>* {
        margin-left: var(--nphh) !important;
        margin-right: var(--nphh) !important;
        width: 100vw;
        max-width: 100vw
    }

    .sm-dyn-content.m-full>*[style*="100%"] {
        width: 100vw !important;
        max-width: 100vw !important
    }

    .sm-dyn-content.m-full>.sm-dyn-section>.head {
        margin-left: var(--phh);
        margin-right: var(--phh)
    }
}

.sm-cnt-bar {
    display: table;
    font-size: 12px;
    color: #777
}

.sm-cnt-bar:first-child {
    margin-top: 0
}

.sm-cnt-bar>.text {
    display: table-cell;
    text-align: right;
    vertical-align: middle
}

.sm-cnt-bar>.bar {
    display: table-cell;
    width: 100%
}

.sm-cnt-bar>.bar>div {
    background: #ebf5ff;
    height: 9px;
    margin: 6px 6px 6px 12px;
    border-radius: 3px
}

.sm-cnt-bar>.bar>div>div {
    height: 9px;
    min-width: 3%;
    border-radius: 3px
}

.sm-cnt-bar>.count {
    display: table-cell;
    vertical-align: middle;
    font-weight: 700;
    white-space: nowrap
}

.sm-cnt-bar-group .sm-cnt-bar {
    display: table-row
}

@media (min-width: 750px) {
    .sm-cnt-bar {
        font-size: 15px
    }

    .sm-cnt-bar>.bar>div {
        height: 14px;
        margin: 7px 12px
    }

    .sm-cnt-bar>.bar>div>div {
        height: 14px
    }
}

.sm-cnt-bar-group {
    display: table;
    width: 100%
}