html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    --width-scrollbar: 17px;

    --theme-page-width: 1348px;
    --theme-page-width-padding: 30px;

    --theme-items-gap: 32px;
    --fixed-header: 80px;
}

html {
    width: 100%;
    height: 100%;
    scroll-padding-top: calc(var(--fixed-header, 0px) + var(--fixed-tabs, 0px));
    scroll-behavior: smooth;
    font-size: 20px;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 0;
    min-height: 100%;
    min-width: 300px;
    font-size: 15px;
}



.back-top {
    aspect-ratio: 1920 / 2028;
    background: url("../img/bg/summer/top.png")  no-repeat;
}

.back-top {
    top: 0;
    left: 0;
    background-size: contain !important;
    position: absolute;
    width: 100%;
    z-index: -1;
    max-height: 100%;
}

.back-bottom {
    bottom: 0;
    left: 0;
    aspect-ratio: 1920 / 1200;
    background: url("../img/bg/summer/bot.png") no-repeat;
    background-size: contain !important;
    position: absolute;
    width: 100%;
    z-index: -1;
    max-height: 100%;
}


@media screen and (min-width: 2000px) {
    .back-top {
        aspect-ratio: 3840 / 2028;
        background-repeat: repeat-x;
        background-position-x: center;
    }

    .back-bottom {
        aspect-ratio: 3840 / 1200;
        background-repeat: repeat-x;
        background-position-x: center;
    }
}

@media screen and (max-width: 1199px) {
    .back-top {
        aspect-ratio: 860 / 925;
        background: url("../img/bg/summer/top-m.png") no-repeat;
    }

    .back-bottom {
        aspect-ratio: 860 / 490;
        background: url("../img/bg/summer/bot-m.png") no-repeat;
    }
}


@media screen and (min-width: 1200px) {
    body.bg {
        background: url("../img/bg/pages/bg-default.jpg") no-repeat;
        background-attachment: fixed;
        background-position: center center;
        background-size: cover;
    }

    body.bg.top {
        background-position: center top 40%;
    }

    body.bg.bottom {
        background-position: center bottom 10%;
    }

    body.bg .back-top,
    body.bg .back-bottom {
        display: none;
    }
}

@media screen and (min-width: 1600px) {
    body.bg.top {
        /*background-position: center top 10%;*/
    }

    body.bg.bottom {
        background-position: center bottom 15%;
    }
}
/* / КОСТЫЛЬ ФОНА  */

body > .page-wrapper {
    flex-grow: 1;
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding-bottom: 6em;
}


/*  header  */


.header--bg {
    height: 65px;
    background: linear-gradient(360deg, #b72e22 -40%, #f48665 87%, #ffd977 180%);
    filter: drop-shadow(0px 7px 0px #7C2D00) drop-shadow(0 6px 5px rgba(163, 48, 36, 0.55));
    z-index: -1;
}

.header--bg-logo {
    aspect-ratio: 400 / 100;
    max-width: 365px;
    width: 100%;
    max-height: 86px;
    height: 100px;
    border-radius: 50px;
    background: linear-gradient(360deg, #b72e22 5%, #f48665 87%, #ffd977 180%);
    z-index: -1;
}

.header--bg-logo img {
    max-width: 265px;
}

header {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 77px;
}

/*    orange menu & btn   */
.menu {
    gap: 18px;
}

.sect--title {
    font-family: var(--font-accent);
    height: 70px;
    margin: 30px 20px;
    box-shadow: var(--shadow);
    border-radius: 15px;
    font-size: 40px;
    background: var(--color-white);
    padding-bottom: 5px;
}

@media screen and (max-width: 1199px) {
    .sect--title {
        margin: 10px 0 20px;
        font-size: 12px;
        height: auto;
        line-height: 22px;
        border-radius: 8px;
    }
}

.orange {
    top: 0;
    z-index: 120;
}

.orange .orange--btn {
    cursor: pointer;
}

.orange .orange--btn-inner {
    cursor: pointer;
    box-shadow: inset 0 6px 0 0 #fff, inset 0 -4px 0 0 rgba(0, 0, 0, 0.45), 0 5px 6px 0 rgba(163, 48, 36, 0.53);
    background: linear-gradient(360deg, #eb5649 0%, #f48665 47.12%, #ffd977 100%);
    width: 90px;
    height: 90px;
    border-radius: 150px;
    border: 2px solid #7C2D00;
    z-index: 10;
    position: relative;
    padding: 9px 10px 10px;
}

.orange .orange-dolls {
    top: calc(50% - var(--orange-size) / 1.7);
    left: calc(50% - var(--orange-size) / 2);
    transition: transform 0.9s 0.15s;
}

.orange:hover .orange-dolls {
    transform: rotate(180deg);
}

.orange .orange-dolls img {
    width: var(--orange-size);
    height: var(--orange-size);
}

.orange-menu {
    background: var(--color-white);
    box-shadow: var(--shadow);
    width: 186px;
    top: 77px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 0 0 var(--radius-25) var(--radius-25);
}

.orange-menu--inner {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.9s 0.15s;
}

.orange:hover .orange-menu--inner {
    max-height: 300px;
}

.orange-menu ul {
    padding: 3.1em 0 2em;
    margin: 0;
    list-style: none;
}

.orange-menu ul li {
    position: relative;
}

.orange-menu ul li:hover {

}

.orange-menu ul li:hover::before {
    content: "";
    width: 2px;
    height: 100%;
    background: var(--color-red);
    position: absolute;
}

.orange-menu ul li a {
    line-height: 38px;
    list-style: none;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    display: block;
}

.orange-menu ul li:hover a {
    color: var(--color-red);
    background: #F8F8F8;
}

/*  logo - main logo   */
.logo {
    aspect-ratio: 400 / 100;
    max-width: 400px;
    width: 100%;
    max-height: 100px;
    height: 100px;
}


/*.main-logo {*/
/*    background: url("../img/header/header_1_100.png");*/
/*    height: 100px;*/
/*    width: 300px;*/
/*    box-shadow: 0 5px 7px -5px #A3302487;*/
/*    z-index: 100;*/
/*}*/

/*.main-logo::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: 0;*/
/*    height: 10px;*/
/*    width: 100%;*/
/*    box-shadow: 0 5px 7px 0 #A3302487;*/
/*    z-index: -1;*/
/*}*/

/*.main-logo--inner {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

/*.main-logo-decor--left {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 36px;*/
/*    height: 30px;*/
/*    top: calc(100% - 30px);*/
/*    left: -34px;*/
/*    background: url("../img/header/header_round.png") no-repeat;*/
/*}*/

/*.main-logo-decor--left::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 12px;*/
/*    bottom: 10px;*/
/*    height: 40px;*/
/*    width: 56px;*/
/*    box-shadow: -13px 20px 5px 2px #a3302454;*/
/*    border-radius: 50%;*/
/*    transform: rotate(32deg);*/
/*    z-index: -1;*/
/*}*/

.main-logo-decor--right {
    position: relative;
    left: 100%;
    transform: scaleX(-1);
}

.main-logo-decor--right {
    position: absolute;
    width: 36px;
    height: 30px;
    top: calc(100% - 30px);
    left: 100%;
    background: url("../img/header/header_round.png") no-repeat;
    z-index: 1;
}

.main-logo-decor--right::after {
    content: '';
    position: absolute;
    left: 12px;
    bottom: 10px;
    height: 40px;
    width: 56px;
    box-shadow: -13px 20px 5px 2px #a3302454;
    border-radius: 50%;
    transform: rotate(32deg);
    z-index: -1;
}

/*  logo - second-logo */
.second-logo {
    font-family: var(--font-accent);
    color: var(--color-white);
}

.second-logo--name {
    font-size: 38px;
}

.second-logo--text {
    font-size: 11px;
}

/*  personal - head     */
.head-personal {
    gap: 12px;
    height: 60px;
}

.head-personal .mic .rt {
    font-size: 42px;
    color: var(--color-white);
}

.head-personal--action {
    width: 125px;
    height: 50px;
    background: var(--color-white);
    border-radius: var(--radius-20);
    box-shadow: 0 2px 8px 1px #00000040;
    color: var(--color-rose);
}

.personal--auth {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-rose);
}

.head-personal--action .rt {
    font-size: 32px;
    color: var(--color-rose);
}

.personal--cart {
    border-radius: 20px 5px 5px 20px;
    border: 3px solid #fff;
    position: relative;
}

.personal--cart:hover {
    box-shadow: inset 0 0 3px #A3302487;
}

.head-personal--action a {
    font-size: 16px;
}

.personal--profile {
    border-radius: 5px 20px 20px 5px;
    border: 3px solid #fff;
    position: relative;
}

.personal--profile:hover {
    box-shadow: inset 0 0 3px #A3302487;
}

.personal--profile::before {
    content: "";
    position: absolute;
    border: 1px solid #A3302487;
    height: 100%;
    left: -4px;
    box-shadow: 0 0 1px #A3302487;
}

.hp-link a {
    gap: 0;
}

.hp-link a span {
    font-size: 10px;
    color: var(--color-rose);
}



@media screen and (max-width: 1199px) {
    .head-title {
        font-size: 12px;
        -webkit-text-stroke: 1px #003F5F;
        text-stroke: 1px #003F5F;
        line-height: 24px;
        margin: 0;
    }

    .logo {
        height: auto;
    }

    .personal--profile::before {
        display: none;
    }

    .head-personal--action a {
        font-size: 16px;
    }

    .mobile-head {
        height: 45px;
        align-items: center;
        display: flex;
        background: #F06F57;
        color: #fff;
        border: none;
        padding: 0 12px;
    }

    .mobile-head .rt {
        font-size: 30px;
        font-weight: 700;
        color: var(--color-white);
    }

    .mobile-head-title {
        font-size: 19px;
        font-weight: 800;
    }

    .mobile-head-count {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        width: 23px;
        height: 23px;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    .order-layer,
    .basket-layer {
        padding: 0 !important;
    }

    .order-layer--inner,
    .basket-layer--inner {
        padding: 12px 12px 15px;
    }
}

/*  footer  */
footer {
    color: var(--color-white);
    position: relative;
    /*margin-top: 6em;*/
    /*background: #a3cfbb;*/
}

footer::before {
    content: "";
    border: 4px solid var(--color-rose);
    width: 29em;
    position: absolute;
    border-radius: 7px;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.footer-row {
    margin-top: 12px;
    margin-bottom: 64px;
}

.footer-logo img {
    max-width: 165px;
}

.social {
    gap: 14px;
}

.social img {
    width: 24px;
    height: auto;
}

.footer-logo {

}

.footer-contacts {
    /*gap: 8px;*/
}

.footer-contacts--item {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
}

.footer-contacts--item:hover span {
    /*color: var(--color-rose);*/
    text-decoration: underline;
}

.footer-contacts .rt {
    display: inline-flex;
    font-size: 25px;
    color: var(--color-rose);
}

.footer-contacts .footer-contacts--item:hover .rt {
    color: var(--color-white);
}

.footer-contacts .rt-mail {
    font-size: 28px;
}

@media screen and (max-width: 1199px) {
    footer {
        margin-top: 0;
    }

    footer::before {
        display: none;
    }

    .footer-row {
        margin: 0;
    }

    .social {
        gap: 4px;
    }

    .social img {
        width: 19px;
        height: 19px;
    }

    .footer-logo img {
        width: 110px;
    }

    footer {
        margin-top: 29px;
        margin-bottom: 10px;
    }

    .footer-contacts .rt-mail {
        font-size: 22px;
    }

    .footer-contacts .rt-sound-on {
        font-size: 22px;
        color: #ffffff;
    }

    .footer-contacts .rt-phone {
        font-size: 18px;
    }

    .footer-contacts {
         gap: 8px;
    }
}

.point::before {
    content: '';
    top: 14px;
    right: 18px;
    position: absolute;
    background-size: contain;
    display: inline-block;
    background: radial-gradient(ellipse at center, #F06F57 100%);
    width: 35px;
    height: 35px;
    background-color: #F06F57;
    border-radius: 50%;
    box-shadow: inset 0 0 4px 2px rgba(0, 0, 0, 0.5);
}

.balloon {
    --size: 270px;
}

.balloon::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/balloon.png);
    background-size: contain;
    width: var(--size);
    height: var(--size);
    z-index: -1;
    position: absolute;
    top: 0;
}

@media screen and (max-width: 1199px) {
    .point::before,
    .balloon::after {
        display: none;
    }
}


/*  START   */
.tooltip-container {
    position: relative;
    display: inline-block;
    margin: 0;
}

.person-image {
    display: block;
    cursor: pointer;
}

/* Базовый тултип */
.custom-tooltip {
    position: absolute;
    bottom: 100%;
    background: #fff;
    /*padding: 40px 15px 20px;*/
    border-radius: 8px;
    width: 240px;
    z-index: 999;
    display: block;
    padding: 34px 0 28px;
    box-shadow: -20px 30px 10px 0 #00000000,
    -13px 20px 9px 0 #00000005,
    -7px 11px 8px 0 #00000014,
    -3px 5px 6px 0 #00000021,
    -1px 1px 4px 0 #00000026;
}

/* Центр по умолчанию */
.custom-tooltip.center {
    left: 50%;
    transform: translateX(-50%);
}

/* Прижат к левому краю */
.custom-tooltip.align-left {
    left: 20px;
    transform: translateX(20px);
}

/* Прижат к правому краю */
.custom-tooltip.align-right {
    right: 20px;
    left: auto;
    transform: translateX(0);
    font-size: 18px;
    width: 266px;
}

/* Стрелочка по центру */
.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 18px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Стрелочка при выравнивании влево */
.custom-tooltip.align-left::after {
    left: 2.5em;
    margin-left: 0;
}

/* Стрелочка при выравнивании вправо */
.custom-tooltip.align-right::after {
    right: 2.7em;
    left: auto;
    margin-left: 0;
}

/* Кнопка закрытия */
/* По умолчанию — кнопка справа */
.tooltip-close {
    z-index: 2;
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--color-rose);
    border-radius: 4px;
    padding: 0 3px;
    box-shadow: 2px 1px 1px 0 #00000003, 1px 1px 1px 0 #00000014, 0 1px 1px 0 #00000047, 0 0 1px 0 #00000078;
}

/* Если тултип прижат к ЛЕВОМУ краю экрана → кнопка слева */
.custom-tooltip.align-right .tooltip-close {
    left: auto;
    right: 8px;
}

/* Если тултип прижат к ПРАВОМУ краю экрана → кнопка справа (по умолчанию) */
.custom-tooltip.align-left .tooltip-close {
    right: 8px;
    left: auto;
}

/* Центр — тоже справа (можно не задавать) */
.custom-tooltip.center .tooltip-close {
    right: 8px;
    left: auto;
}

@media screen and (max-width: 1199px) {
    .custom-tooltip {
        font-size: 7px;
        max-width: 92px;
        right: 5px;
        text-align: center;
        border-radius: 4px;
    }

    .custom-tooltip::after {
        border-width: 5px;
    }

    .custom-tooltip.align-left {
        left: -5px;
    }

    .custom-tooltip.align-right {
        right: 20px;
        left: auto;
        transform: translateX(0);
        font-size: 10px;
        width: 290px;
    }

    .custom-tooltip.align-left::after {
        left: 1.5em;
    }

    .custom-tooltip.align-right::after {
        right: 2.5em;
    }

    .tooltip-close {
        top: 4px;
        font-size: 6px;
        padding: 0 1px;
        border-radius: 2px;
    }
}

/*  END */

/*  GIFT    */
#gift {
    position: absolute;
    top: 10.2%;
    right: 0;
}

.gift-item {
    margin-top: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #ED6150;
    background: #fff;
    padding: 9px 5px;
    border-radius: 10px;
    cursor: pointer;
    gap: 18px;
}

.gift-item img {
    transition: width 0.4s;
}

.gift-item.open {
    border-radius: 12px 0 0 12px;
    padding-left: 10px;
}

.gift-item.open img {
    width: 52px;
    height: auto;
}

.gift-text {
    display: none;
    font-size: 11px;
    margin-right: 50px;
    max-width: 275px;
}

.gift-item.open .gift-text {
    display: block;
}

.prices {
    display: flex;
}

.prices {

}

@media screen and (max-width: 1199px) {
    #gift {
        top: 73px;
    }

    .gift-item {
        margin-top: 10px;
        padding: 4px 5px;
        border-radius: 6px;
    }

    .gift-item img {
        width: 20px;
    }

    .gift-text {
        font-size: 8px;
    }
}
/*  GIFT    */


#map {
    background-color: #FFFFFF;
}