@charset "UTF-8";

.wf-new .selector {
    --selected-border-size: 1.5px;
    --border-size: 1px;
    display: flex;
    gap: var(--pack-gap);
    margin-bottom: 32px;
    padding: 0 var(--page-padding-inline);
    --pack-gap: 8px
}

@media screen and (min-width:1240px) {
    .wf-new .selector {
        padding: 0
    }
}

.wf-new .selector__pack,
.wf-new .selector__series {
    border: none;
    margin: 0;
    padding: 0
}

.wf-new .selector__series {
    margin-bottom: 48px
}

@media screen and (min-width:768px) {
    .wf-new .selector__series {
        display: flex;
        flex-flow: row nowrap;
        width: 100%
    }
}

@media screen and (min-width:1240px) {
    .wf-new .selector__series {
        display: block
    }
}

@media screen and (min-width:1536px) {
    .wf-new .selector__series {
        display: flex
    }
}

.wf-new .selector__pack {
    display: contents;
    margin-bottom: 32px
}

.wf-new .selector__series-label {
    background: linear-gradient(180deg, #151517, #090909);
    border: 1.5px solid #282828;
    border-radius: 16px;
    display: grid;
    flex: 0 0 50%;
    grid-template: auto/auto 1fr;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 20px 24px;
    position: relative
}

@media screen and (min-width:768px) {
    .wf-new .selector__series-label {
        grid-template: auto 1fr min-content/auto
    }

    .wf-new .selector__series-label:first-of-type {
        border-radius: 16px 0 0 16px
    }

    .wf-new .selector__series-label:last-of-type {
        border-radius: 0 16px 16px 0
    }
}

@media screen and (min-width:1240px) {
    .wf-new .selector__series-label:first-of-type {
        border-radius: 16px
    }

    .wf-new .selector__series-label:last-of-type {
        border-radius: 16px
    }
}

@media screen and (min-width:1536px) {
    .wf-new .selector__series-label {
        grid-template: auto 1fr min-content/auto
    }

    .wf-new .selector__series-label:first-of-type {
        border-radius: 16px 0 0 16px
    }

    .wf-new .selector__series-label:last-of-type {
        border-radius: 0 16px 16px 0
    }
}

.wf-new .selector__series-name {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .036px;
    line-height: 140%;
    margin-bottom: 2px
}

@media screen and (min-width:768px) {
    .wf-new .selector__series-name {
        font-size: 20px;
        letter-spacing: .04px
    }
}

@media screen and (min-width:1240px) {
    .wf-new .selector__series-name {
        font-size: 21px;
        letter-spacing: .042px
    }
}

.wf-new .selector__series-input:checked+.selector__series-label {
    border: 1.5px solid #3da8e6
}

.wf-new .selector__series-input:checked+.selector__series-label .selector__series-name {
    background: var(--gradient-button);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.wf-new .selector__pack-input,
.wf-new .selector__series-input {
    display: none
}

.wf-new .selector__series-name-value {
    color: var(--color-white)
}

.wf-new .selector__series-input:checked+.selector__series-label .selector__series-name-value {
    background: var(--gradient-button);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.wf-new .selector__series-price {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08px;
    line-height: 120%
}

.wf-new .selector__series-title {
    flex-grow: 0
}

.wf-new .selector__series-badges {
    align-self: flex-start;
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 8px
}

@media screen and (min-width:768px) {
    .wf-new .selector__series-badges {
        grid-row: 3;
        justify-content: flex-start
    }
}

.wf-new .selector__series-badge {
    background: #232323;
    border-radius: 8px;
    color: #949498;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .14px;
    line-height: 120%;
    opacity: .8;
    padding: 4px 8px
}

@media screen and (min-width:768px) {
    .wf-new .selector__series-badge {
        white-space: nowrap
    }
}

.wf-new .selector__series-badge_delivery {
    padding-left: 24px;
    position: relative
}

.wf-new .selector__series-badge_delivery:before {
    background-image: url(/img/pricing/box.png);
    background-size: 13px 15px;
    content: "";
    display: block;
    height: 15px;
    left: 8px;
    position: absolute;
    top: calc(50% - var(--selected-border-size)*2 - var(--border-size)*2);
    width: 13px
}

@media only screen and (resolution >=192dpi),
only screen and (resolution >=2dppx) {
    .wf-new .selector__series-badge_delivery:before {
        background-image: url(/img/pricing/box@2x.png)
    }
}

.wf-new .selector__series-caption {
    color: var(--color-gray-light);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    grid-column: span 2;
    letter-spacing: .21px;
    line-height: 130%;
    padding-top: 24px
}

@media screen and (min-width:768px) {
    .wf-new .selector__series-caption {
        grid-area: 2/1;
        margin-bottom: 20px
    }
}

.wf-new .selector__pack-label {
    background: linear-gradient(180deg, #223d4a, #1b3543);
    border-radius: 16px;
    box-sizing: border-box;
    display: block;
    height: max-content;
    line-height: 1;
    min-height: 92px;
    padding: 16px;
    position: relative;
    width: calc(50% - var(--pack-gap) - 2px)
}

@media screen and (min-width:768px) {
    .wf-new .selector__pack-label {
        padding: 20px
    }
}

.wf-new .selector__pack-label:before {
    background: linear-gradient(180deg, #bdbdbd, #585858);
    border-radius: 16px;
    content: "";
    display: flex;
    inset: calc(var(--border-size)*-1);
    position: absolute;
    z-index: -1
}

.wf-new .selector__pack-input_hidden~.selector__pack-label {
    visibility: hidden
}

.wf-new .selector__pack-name {
    color: var(--color-white);
    display: inline;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .043px;
    line-height: 22.1px;
    margin-bottom: 4px
}

.wf-new .selector__pack-prices {
    align-items: center;
    display: flex;
    gap: 6px;
    min-height: 22.1px;
    text-align: center
}

.wf-new .selector__pack-price {
    color: var(--color-white);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.0043em;
    line-height: 22.1px;
    margin-right: 6px
}

.wf-new .selector__pack-oldprice {
    color: #6c6c70;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -.0023em;
    line-height: 20.25px;
    text-decoration: line-through
}

.wf-new .selector__pack-input:checked+.selector__pack-label {
    background: linear-gradient(180deg, #223d4a, #1b3543)
}

.wf-new .selector__pack-input:checked+.selector__pack-label:before {
    background: linear-gradient(180deg, #3da8e6, #008ae6);
    inset: calc(var(--selected-border-size)*-1)
}

.wf-new .selector__pack-legend {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .08px;
    line-height: 120%;
    margin-bottom: 12px
}

.wf-new .selector__pack-caption {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -.0023em;
    line-height: 20.25px;
    margin-bottom: 20px
}

.сard-design {
    flex-shrink: 0;
    height: max-content;
    overflow-x: auto;
    padding-inline: var(--page-padding-inline)
}

@media screen and (min-width:1240px) {
    .сard-design {
        padding-inline: 0
    }
}

.сard-design img {
    display: block
}

.card-design__label {
    color: #a6a5ac;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.0008em;
    line-height: 16.25px
}

.card-design__name {
    color: #6c6c70;
    margin-left: 4px
}

.selector__card-input {
    display: none
}

.card-design__wrapper {
    display: flex;
    margin-bottom: 32px;
    margin-top: 12px;
    min-height: 56px;
    overflow: hidden;
    position: relative;
    white-space: normal
}

.card-design__wrapper:after,
.card-design__wrapper:before {
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 60px;
    z-index: 2
}

.card-design__wrapper:after {
    background: linear-gradient(-90deg, #010101cc, #01010100);
    right: -1px
}

.card-design__wrapper:before {
    background: linear-gradient(90deg, #010101cc, #01010100);
    left: -1px
}

.card-design__wrapper:has(:first-child.swiper-slide-visible):before,
.card-design__wrapper:has(:last-child.swiper-slide-visible):after {
    display: none
}

.card-design__item {
    --card-border-radius: 9px;
    align-items: center;
    border-radius: var(--card-border-radius);
    display: flex;
    flex-shrink: 0;
    height: 56px;
    justify-content: center;
    position: relative;
    width: 90px
}

.selector__card-label {
    border-radius: var(--card-border-radius);
    padding: 5px
}

.selector__card-input:checked+.selector__card-label {
    background: linear-gradient(180deg, #15191b, #090909);
    border: 1px solid #09f
}

.skeleton__wrapper {
    display: flex
}

.skeleton__item {
    --card-shift: 6px;
    background-color: #525255;
    border-radius: 9px;
    height: 44px;
    margin: var(--card-shift) calc(var(--card-shift)*3) var(--card-shift) var(--card-shift);
    position: relative;
    width: 66px
}

.skeleton__item:after,
.skeleton__item:before {
    border-radius: 10px;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

.skeleton__item:before {
    background-color: #2e2e30;
    right: calc(var(--card-shift)*-1);
    z-index: -1
}

.skeleton__item:after {
    background: #222224;
    right: calc(var(--card-shift)*-2);
    z-index: -2
}

.slider__wrapper {
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    height: var(--wf-image-height);
    justify-content: center;
    margin-bottom: 20px;
    max-height: 50vh;
    max-width: 100%;
    overflow: hidden;
    white-space: unset;
    width: 100%
}

@media screen and (min-width:1240px) {
    .slider__wrapper {
        border-radius: 0;
        bottom: 0;
        flex: 0 0 var(--width-cell-5);
        margin-bottom: 0;
        margin-right: var(--width-cell-1);
        max-height: calc(100vh - var(--header-nav-height));
        object-position: center;
        position: sticky;
        top: var(--header-nav-height)
    }
}

.slider__container {
    height: 100%;
    white-space: normal;
    width: 100%
}

.slider__item {
    display: flex;
    height: 100%;
    max-height: calc(100vh - var(--header-nav-height));
    position: relative;
    width: 100%
}

.slider__item img {
    margin: 0 auto;
    object-fit: contain;
    width: 100%
}

.search-input__label {
    display: block
}

.search-input__input {
    border: 1px solid transparent;
    color: var(--color-white);
    outline: none
}

.search-input__input::-webkit-search-cancel-button,
.search-input__input::-webkit-search-decoration,
.search-input__input::-webkit-search-results-button,
.search-input__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none
}

.search-input__input::placeholder {
    color: var(--color-gray)
}

.search-input__wrapper {
    position: relative
}

.search-input__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.search-input__button-clear {
    background: #6c6c70;
    border: 0;
    border-radius: 50%;
    height: 14px;
    outline: 0;
    padding: 0;
    position: absolute;
    right: 11px;
    top: calc(50% - 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 14px
}

.search-input__button-clear:after,
.search-input__button-clear:before {
    background: #1c1c1d;
    content: "";
    height: 1px;
    position: absolute;
    right: 3px;
    top: 6.5px;
    transform: rotate(45deg);
    width: 8px
}

.search-input__button-clear:after {
    transform: rotate(-45deg)
}

.search-input__input:not([data-value])+.search-input__button-clear,
.search-input__input[data-value=""]+.search-input__button-clear {
    display: none
}

.delivery__text {
    color: #a6a5ac;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -.0023em;
    line-height: 20.25px;
    margin-top: 16px;
    padding-left: 24px;
    text-align: center;
    text-wrap: pretty
}

.delivery__text :first-child:before {
    content: url(/svg/icons/box.svg);
    display: block;
    height: 20px;
    left: -24px;
    position: absolute;
    top: 0;
    width: 20px
}

.delivery__button {
    background: none;
    border: none;
    padding: 0
}

.popup__container {
    background-color: #151515;
    height: 100dvh;
    overflow: hidden;
    padding-top: 32px;
    position: relative;
    width: 100vw
}

@media screen and (min-width:768px) {
    .popup__container {
        border: 1px solid #262627;
        border-radius: 16px;
        height: 403px;
        width: 499px
    }
}

.popup__close-button {
    background: #1f1f1f;
    border: none;
    border-radius: 12px;
    height: 24px;
    outline: none;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 28px
}

.popup__close-button:after,
.popup__close-button:before {
    background: #fff;
    content: "";
    height: 1.5px;
    left: 8px;
    position: absolute;
    top: 11px;
    transform: rotate(45deg);
    width: 13px
}

.popup__close-button:after {
    transform: rotate(-45deg)
}

.search__wrapper {
    padding-inline: 24px
}

.search__container__label {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.0043em;
    line-height: 22.1px;
    margin-bottom: 16px;
    text-align: left
}

.search__container__icon {
    height: 14px;
    padding-left: 11px;
    width: 14px
}

.search__container__input {
    background-color: #1c1c1d;
    border-radius: 12px;
    box-sizing: border-box;
    color: var(--color-white);
    font-size: 17px;
    font-weight: 400;
    height: 100%;
    letter-spacing: -.0043em;
    line-height: 22.1px;
    outline: none;
    padding: 8px 8px 6px 36px;
    text-align: left;
    width: 100%
}

.search__container__input:focus {
    background: linear-gradient(92deg, #262627 48.92%, #16161700 98.7%), #1c1c1d;
    border: 1px solid #656565;
    border-radius: 14px
}

.country-list__wrapper {
    border-radius: 10px;
    display: flex;
    height: 100%;
    padding-bottom: 80px;
    padding-top: 8px
}

@media screen and (min-width:768px) {
    .country-list__wrapper {
        max-height: 296px;
        padding-bottom: 8px
    }
}

.country-list__list {
    overflow-y: auto;
    position: relative;
    width: 100%;
    z-index: 1
}

@media screen and (min-width:768px) {
    .country-list__list {
        max-width: calc(100vw - (var(--page-padding-inline-base))*4)
    }
}

.country-list__img {
    border-radius: 50%
}

.country-list__text {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.0043em;
    line-height: 22px;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap
}

.country-list__item {
    align-items: center;
    background-color: transparent;
    border: 0;
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
    height: 56px;
    margin: 0;
    max-width: 100%;
    outline: 0;
    overflow: hidden;
    padding: 18px 24px 16px;
    width: 100%
}

.country-list__item:focus-visible,
.country-list__item:hover {
    background-color: #2c2c2d
}

.country-list__item_selected {
    background-image: url(/svg/icons/tick.svg);
    background-position: 95%;
    background-repeat: no-repeat
}

.country-list__empty {
    color: #a6a5ac;
    font-size: 17px;
    font-weight: 400;
    left: 50%;
    letter-spacing: -.0043em;
    line-height: 22.1px;
    position: absolute;
    text-align: center;
    top: 220px;
    transform: translate(-50%)
}

:root {
    --wf-image-height: 480px
}

@media screen and (min-width:768px) {
    :root {
        --wf-image-height: 633px
    }
}

.delivery__text {
    color: #a6a5ac;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -.0023em;
    line-height: 20.25px;
    margin-top: 16px;
    text-align: center;
    text-wrap: pretty
}

.delivery__text :first-child {
    position: relative
}

.delivery__text :first-child:before {
    content: url(/svg/icons/box.svg);
    display: block;
    height: 20px;
    left: -24px;
    position: absolute;
    top: 0;
    width: 20px
}

.hidden {
    display: none
}

.wf-new {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100vw
}

@media screen and (min-width:1240px) {
    .wf-new {
        flex-direction: row;
        justify-content: center;
        max-width: var(--page-max-width);
        padding-bottom: 48px;
        padding-left: var(--page-padding-inline-base);
        padding-right: var(--page-padding-inline-base);
        position: relative
    }
}

.wf-new .wf__container {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.wf-new .wf__container::-webkit-scrollbar {
    display: none
}

@media screen and (min-width:1240px) {
    .wf-new .wf__container {
        flex: 0 0 var(--width-cell-4)
    }
}

.wf-new .wf__title-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    left: var(--page-padding-inline);
    position: absolute;
    top: -60px;
    width: calc(100% - var(--page-padding-inline)*2);
    z-index: 2
}

@media screen and (min-width:1240px) {
    .wf-new .wf__title-container {
        margin-bottom: 16px;
        margin-top: 8px;
        position: static;
        width: unset
    }
}

.wf-new .wf__title {
    color: var(--color-white);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.0026em;
    line-height: 115%;
    text-align: left
}

@media screen and (min-width:1240px) {
    .wf-new .wf__title {
        font-size: 40px
    }
}

.wf-new .checkout__discount-value_bg {
    background-color: #f8f32b;
    border-radius: 6px;
    color: #1f1f1f;
    display: block;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    height: 24px;
    letter-spacing: -.0008em;
    line-height: 24px;
    padding-inline: 8px;
    text-align: center
}

.wf-new .checkout {
    padding: 0 var(--page-padding-inline)
}

@media screen and (min-width:768px) {
    .wf-new .checkout {
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between
    }
}

@media screen and (min-width:1240px) {
    .wf-new .checkout {
        padding: 0
    }
}

.wf-new .checkout__payment {
    margin-top: 5px
}

@media screen and (min-width:768px) {
    .wf-new .checkout__payment {
        width: 100%
    }
}

.wf-new .checkout__payment-input {
    display: none
}

.wf-new .checkout__payment-value {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    justify-content: space-between;
    letter-spacing: .135px;
    line-height: 120%
}

.wf-new .checkout__payment-value_hidden {
    display: none
}

.wf-new .checkout__payment-label {
    align-items: center;
    background: linear-gradient(180deg, #223d4a, #1b3543);
    border: 1.5px solid #132832;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0;
    padding: 16px 20px;
    position: relative;
    width: 100%
}

@media screen and (min-width:768px) {
    .wf-new .checkout__payment-label {
        padding: 19px 24px
    }
}

.wf-new .checkout__payment-input:checked+.checkout__payment-label {
    border: 1.5px solid #3da8e6
}

.wf-new .checkout__payment-value-text {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.wf-new .checkout__payment-value-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    margin: 0
}

.wf-new .checkout__payment-value-img {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 2px;
    max-width: 118px
}

.wf-new .checkout__payment-value-img svg {
    flex-shrink: 0
}

@media screen and (min-width:768px) {
    .wf-new .checkout__payment-value-img {
        gap: 8px;
        margin-left: 24px;
        margin-top: 0;
        max-width: none
    }
}

.wf-new .checkout__payment-caption {
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08px;
    line-height: 120%;
    margin-bottom: 12px
}

.wf-new .checkout__discount {
    padding-top: 16px;
    position: relative
}

.wf-new .checkout__discount:before {
    background: linear-gradient(90deg, #585858, #30303500 94.22%);
    content: "";
    height: 1px;
    position: absolute;
    top: 0;
    width: 100%
}

.wf-new .checkout__total-buy {
    border: none;
    font-size: 20px;
    font-weight: 500;
    gap: var(--checkout-gap);
    letter-spacing: -.0043em;
    line-height: 22.1px;
    margin-top: 24px;
    outline: none;
    padding-block: 12px;
    position: relative;
    white-space: break-spaces;
    width: 100%;
    --checkout-gap: 17px;
    color: white;
    padding: 15px;
}

@media screen and (min-width:1240px) {
    .wf-new .checkout__total-buy {
        margin-top: 32px
    }
}

.wf-new .checkout__total-order-text {
    opacity: 1;
    position: relative
}

.wf-new .checkout__total-order-text:after {
    --bullet-size: 3px;
    background-color: #ffffff80;
    content: "";
    display: block;
    height: var(--bullet-size);
    position: absolute;
    right: calc((var(--checkout-gap) + var(--bullet-size))*-1/2);
    top: 50%;
    width: var(--bullet-size)
}

.wf-new .checkout__payment-fieldset {
    border: 0;
    display: grid;
    gap: 8px;
    grid-template: auto/100%;
    margin: 0;
    padding: 0;
    width: 100%
}

.wf-new .checkout__total-notes {
    color: #647984;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 140%;
    padding-top: 12px;
    text-align: center;
    width: 100%
}

.wf-new .checkout__sticky-container {
    padding-bottom: 34px;
    padding-inline: var(--page-padding-inline)
}

@media screen and (min-width:1240px) {
    .wf-new .checkout__sticky-container {
        padding: 0
    }
}

.wf-new .button.button__loading.checkout__total-buy .checkout__total-order-text:after {
    display: none
}

.wf-new .checkout__button-text_hidden {
    display: none
}

.wf-new .skeleton {
    --skeleton-color: #2c2c2c;
    overflow: hidden;
    position: relative
}

.wf-new.wf_loadable .checkout__total-order-text {
    opacity: 0
}

.wf-new.wf_loadable .skeleton:before {
    background: var(--skeleton-color);
    border-radius: 8px;
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 2
}

.wf-new.wf_loadable .skeleton_sm {
    height: 22px;
    width: 67px
}