/* v47: пустая корзина не оставляет в DOM ни кнопку, ни служебный слот.
   Кнопка создается только при наличии товаров и удаляется при пустой корзине. */
html:not(.taomed-basket-ui-ready) .header-bottom-group-basket,
html.taomed-basket-ui-empty .header-bottom-group-basket {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

html.taomed-basket-ui-has-items .header-bottom-group-basket {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Корзина стала пустой прямо под курсором: скрываем сам popup немедленно,
   не дожидаясь mouseleave. Отдельный класс выставляется JS как страховка Safari. */
html.taomed-basket-ui-empty .basket-popup,
html.taomed-basket-ui-empty .basket-popup-container,
.basket-popup.taomed-basket-popup-force-hidden,
.basket-popup-container.taomed-basket-popup-force-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

.basket-btn-container {
    position: relative;
}

/* До загрузки JS сохраняем прежнее hover-поведение. После инициализации
   открытием управляет один класс, поэтому Safari не может самопроизвольно
   закрыть/переоткрыть popup при быстрой перерисовке счётчика. */
html:not(.taomed-basket-popup-js-controlled) header:has(.basket-btn-container:hover) .basket-popup,
html:not(.taomed-basket-popup-js-controlled) header:has(.header-bottom-group-basket:hover) .basket-popup,
html:not(.taomed-basket-popup-js-controlled) header .basket-popup:hover,
html.taomed-basket-popup-js-controlled header .basket-popup.taomed-basket-popup-open {
    opacity: 1;
    pointer-events: all;
}

html.taomed-basket-popup-js-controlled header .basket-popup:not(.taomed-basket-popup-open) {
    opacity: 0 !important;
    pointer-events: none !important;
}

.basket-btn {
    display: block;
    font-family: Inter;
    font-weight: 400;
    font-size: 13px;
    line-height: 148%;
    letter-spacing: 0%;
    text-transform: uppercase;
    padding: 10px 32px;
    border: 1px solid #ccdcdf;
    background: #fff;
    transition: 0.8s;
    cursor: pointer;
}

@media (hover: hover) {
    .basket-btn:hover {
        background: var(--hover-btn);
        color: #fff;
    }
}

.basket-popup {
    position: absolute;
    right: 210px;
    top: 67px;
    padding-top: 8px;
    z-index: 21;
    transition: 0.8s;
    opacity: 0;
    pointer-events: none;
}
.basket-popup-list {
    max-height: 60vh;
    overflow-y: auto;
    width: calc(100% + 8px);
}
.basket-popup *::-webkit-scrollbar {
    width: 4px;
    height: calc(100% - 24px);
}

.basket-popup *::-webkit-scrollbar-track {
    background: #ececec;
    padding-left: 2px;
}

.basket-popup *::-webkit-scrollbar-thumb {
    background-color: #368b91;
    border-radius: 17px;
}

.scroll .basket-popup {
    top: 143px;
    right: 192px;
}

@media screen and (max-width: 1750px) {
    .basket-popup {
        right: 180px;
    }
    .scroll .basket-popup {
        right: 162px;
    }
}

@media screen and (max-width: 1650px) {
    .basket-popup {
        right: 190px;
    }
    .scroll .basket-popup {
        right: 142px;
    }
}

@media screen and (max-width: 1550px) {
    .basket-popup {
        right: 180px;
    }
    .scroll .basket-popup {
        right: 142px;
    }
}

@media screen and (max-width: 1500px) {
    .basket-popup {
        right: 170px;
    }
    .scroll .basket-popup {
        right: 122px;
    }
}

@media screen and (max-width: 1320px) {
    .basket-popup {
        right: 180px;
    }
}

.basket-popup-container {
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 12px 0px #0000001f;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.basket-popup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.basket-popup-list-item {
    width: 363px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    background: #ffffff;
    padding: 12px;
    transition: 0.8s;
}

.basket-popup-list-item:hover {
    background: #f5f5f5;
}

.repaint .header-top {
    z-index: 21;
}

.basket-popup-list-item-img {
    display: block;
    width: 56px;
    height: 56px;
    background: #d9d9d9;
}

.basket-popup-list-item-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.basket-popup-list-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
}

.basket-popup-list-item-info-static {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.basket-popup-list-item-info-title {
    font-family: "RobotoRegular";
    font-weight: 400;
    font-size: 13px;
    line-height: 124%;
    color: #000000;
}

.basket-popup-list-item-info-type {
    font-family: "RobotoRegular";
    font-weight: 400;
    font-size: 12px;
    line-height: 124%;
    color: #646464;
}

.basket-popup-list-item-info-price {
    font-family: "RobotoRegular";
    font-weight: 500;
    font-size: 15px;
    line-height: 104%;
    color: #000000;
}

.basket-popup-list-item-controls {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4px;
}

.basket-popup-list-item-counter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: max-content;
}

.counter-decrease,
.counter-increase {
    background: #f4f4f4;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.basket-popup-list-item:hover .counter-decrease,
.basket-popup-list-item:hover .counter-increase,
.basket-popup-list-item:hover .basket-popup-list-item-controls-delete {
    background: #e7e7eb;
    border-radius: 4px;
}

.basket-popup-list-item-controls-delete {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.8s;
    border-radius: 0px;
    cursor: pointer;
}

.basket-popup-list-item-controls-delete svg {
    width: 7px;
    height: 7px;
}

.basket-popup-info-container {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.basket-popup-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.basket-popup-info-row:last-child p {
    color: #000000;
    font-weight: 400;
    font-size: 20px;
    line-height: 124%;
    letter-spacing: 0%;
    text-align: right;
    text-transform: capitalize;
}
.basket-popup-info-row p {
    font-weight: 400;
    font-size: 13px;
    line-height: 124%;
    letter-spacing: 2%;
    color: #646464;
    white-space: nowrap;
    position: relative;
}

.basket-popup-info-row span {
    width: 100%;
    height: 0px;
    border-bottom: 2px dashed #0000003d;
}
.basket-popup-info-row p span {
    font-weight: 600;
    font-size: 14px;
    line-height: 124%;
    letter-spacing: 0%;
    text-align: right;
    border-bottom: none;
}
.basket-popup-info-row:last-child p span {
    font-weight: 400;
    font-size: 20px;
    text-align: right;
    text-transform: capitalize;
}

.basket-popup-make-order {
    font-family: "RobotoRegular";
    font-weight: 500;
    font-size: 15px;
    line-height: 113%;
    letter-spacing: 4%;
    text-align: center;
    vertical-align: middle;
    color: #ecf7f5;
    background: #528892;
    padding: 14px 32px;
    border-radius: 4px;
    width: max-content;
    margin-left: auto;
    border: 1px solid #528892;
    cursor: pointer;
}

.basket-popup-make-order:hover {
    color: #ecf7f5;
    background: #487780;
}

.basket-count {
    position: absolute;
    top: 4px;
    right: 12px;
    background: #ff5959;
    font-family: Inter;
    font-weight: 700;
    font-size: 8px;
    line-height: 148%;
    text-transform: capitalize;
    padding: 0px 3px;
    border-radius: 1000px;
    width: 20px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
}

.header-bottom-group-basket {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #5288924d;
    padding: 7px 12px;
    position: relative;
    transition: 0.5s;
    cursor: pointer;
}

.header-bottom-group-basket .basket-count {
    top: -2px;
    right: -2px;
}

.header-bottom-group-basket:hover {
    border-color: var(--hover-btn);
    background-color: var(--hover-btn);
}

.header-bottom-group-basket g rect:nth-child(2) {
    transition: 0.5s;
}

.header-bottom-group-basket:hover g rect:nth-child(2) {
    fill: white;
}

.basket-popup-list-item-info-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.basket-popup-list-item-info-rows-item {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.basket-popup-list-item-info-rows-item:last-of-type {
    align-items: flex-start;
}

.basket-header-card-items-bottom-info {
    position: relative;
}

.basket-header-card-items-bottom-list-btn {
    padding: 6px 8px 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    background-color: #f5f5f5;
    cursor: pointer;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    font-size: 12px;
    line-height: 124%;
    transition: 0.4s;
}
.basket-header-card-items-bottom-list-btn:hover {
    background-color: #ebebeb;
}
.basket-header-card-items-bottom-info:has(
        .basket-header-card-items-bottom-list-btn:hover
    )
    .basket-header-card-items-bottom-list__wrapper._open {
    background-color: #ebebeb;
}
.basket-header-card-items-bottom-info:has(
        .basket-header-card-items-bottom-list__wrapper._open:hover
    )
    .basket-header-card-items-bottom-list-btn {
    background-color: #ebebeb;
}
.basket-header-card-items-bottom-list__wrapper._open:hover {
    background-color: #ebebeb;
}

.basket-header-card-items-bottom-list-btn svg {
    transition: 0.4s;
}

.basket-header-card-items-bottom-info:has(._open)
    .basket-header-card-items-bottom-list-btn
    svg {
    transform: rotate(-180deg);
}

.basket-header-card-items-bottom-list__wrapper {
    border-radius: 4px;
    background-color: #f5f5f5;
    opacity: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: 0.4s;
    overflow: hidden;
}

.basket-header-card-items-bottom-list__wrapper._open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.basket-header-card-items-bottom-list {
    display: flex;
    flex-direction: column;
    padding: 29px 24px 12px 8px;
    min-width: 120px;
}
.basket-header-card-items-bottom-list li {
    list-style-type: unset;
    font-size: 10px;
    line-height: 136%;
}
.basket-header-card-items-bottom-list li::marker {
    font-size: 10px;
    line-height: 136%;
    color: #646464;
}
.basket-header-card-items-bottom-list-item:not(:hover) {
    color: #646464;
}

.basket-header-card-items-bottom-list-item {
    transition: 0.4s;
    font-size: 10px;
    line-height: 136%;
}

.basket-header-card-items-bottom-info:has(
        .basket-header-card-items-bottom-list__wrapper
    )
    + .basket-wrapper-card-items-basket {
    margin-top: 12px;
}

.repaint .header-top._mobile {
    display: none;
}

@media screen and (max-width: 1210px) {
    .basket-popup-info-container {
        margin: 0px 24px;
    }

    .header-top .basket-btn-container {
        display: none;
    }

    .repaint .header-top:not(._mobile) {
        display: none;
    }

    .repaint .header-top._mobile {
        display: flex;
    }

    #modal-basket .modal-order__content {
        padding: unset;
        background: unset;
        box-shadow: unset;
        width: 344px;
        top: unset;
        position: unset;
        height: 100%;
        display: flex;
        padding-top: 50px;
    }

    .basket-popup-container {
        max-height: calc(100dvh - 100px);
        padding-top: 32px;
        position: relative;
    }

    .basket-popup-close-cross {
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px 10px;
        height: 34px;
    }

    .basket-popup {
        position: unset;
        opacity: 1;
        pointer-events: all;
        width: 100%;
        padding-top: 0px;
    }

    header .basket-popup {
        display: none;
    }

    .basket-popup-list-item {
        width: 100%;
    }

    .basket-btn-container-js {
        background: #fff;
        border: 1px solid #5288924d;
        transition: 0.8s;
    }

    .basket-btn-container {
        width: max-content;
        margin: 0px auto;
    }

    .basket-btn {
        text-align: center;
        width: max-content;
        border: unset;
        padding: 10px 0px;
        background: transparent;
    }

    .basket-btn:hover {
        background: unset;
        color: unset;
    }

    .basket-count {
        right: 0px;
        transform: translateX(100%);
    }

    .basket-btn-container-js:hover {
        background: var(--hover-btn);
    }

    .basket-btn-container-js:hover .basket-btn {
        color: #fff;
    }

    .basket-popup-make-order {
        margin: 0 24px;
        width: calc(100% - 48px);
    }
}

/* v40: мобильная строка корзины в нижнем меню — на всю ширину,
   счетчик привязан к надписи «КОРЗИНА», а не к краю экрана. */
@media screen and (max-width: 1210px) {
    .mobile-menu-footer-basket-btn {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-menu-footer-basket-btn > .basket-btn-container-js {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #5288924d !important;
        overflow: visible !important;
    }

    .mobile-menu-footer-basket-btn .basket-btn-container {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: max-content !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .mobile-menu-footer-basket-btn .basket-btn {
        display: block !important;
        width: auto !important;
        max-width: max-content !important;
        padding: 10px 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        background: transparent !important;
        border: 0 !important;
    }

    .mobile-menu-footer-basket-btn .basket-count {
        top: 2px !important;
        right: -18px !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* v43: нижняя мобильная кнопка корзины показывается только на странице Protect. */
@media screen and (max-width: 1210px) {
    .mobile-menu-footer-basket-btn {
        display: none !important;
    }

    html.fitolavka-protect-route .mobile-menu-footer-basket-btn,
    body.fitolavka-protect-route .mobile-menu-footer-basket-btn {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* 2026-07-15: на сенсорных устройствах :hover может оставаться активным после тапа.
   При белом фоне это делало обновлённую надпись «В корзину» белой и визуально скрытой
   до следующей прокрутки. Правило действует только для мобильной кнопки Protect. */
@media screen and (max-width: 1210px) and (hover: none),
       screen and (max-width: 1210px) and (pointer: coarse) {
    html.fitolavka-protect-route .mobile-menu-footer-basket-btn > .basket-btn-container-js,
    html.fitolavka-protect-route .mobile-menu-footer-basket-btn > .basket-btn-container-js:hover,
    html.fitolavka-protect-route .mobile-menu-footer-basket-btn > .basket-btn-container-js:active,
    body.fitolavka-protect-route .mobile-menu-footer-basket-btn > .basket-btn-container-js,
    body.fitolavka-protect-route .mobile-menu-footer-basket-btn > .basket-btn-container-js:hover,
    body.fitolavka-protect-route .mobile-menu-footer-basket-btn > .basket-btn-container-js:active {
        background: #ffffff !important;
    }

    html.fitolavka-protect-route .mobile-menu-footer-basket-btn .basket-btn,
    html.fitolavka-protect-route .mobile-menu-footer-basket-btn .basket-btn:hover,
    html.fitolavka-protect-route .mobile-menu-footer-basket-btn .basket-btn:active,
    body.fitolavka-protect-route .mobile-menu-footer-basket-btn .basket-btn,
    body.fitolavka-protect-route .mobile-menu-footer-basket-btn .basket-btn:hover,
    body.fitolavka-protect-route .mobile-menu-footer-basket-btn .basket-btn:active {
        color: #1a4556 !important;
        -webkit-text-fill-color: #1a4556 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* 2026-07-16: мобильная кнопка корзины доступна на любой странице сайта,
   но только когда в реально сохранённой корзине есть хотя бы один товар. */
@media screen and (max-width: 1210px) {
    html:not(.taomed-basket-ui-ready) .mobile-menu-footer-basket-btn,
    html.taomed-basket-ui-empty .mobile-menu-footer-basket-btn {
        display: none !important;
    }

    html.taomed-basket-ui-has-items .mobile-menu-footer-basket-btn {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .mobile-menu-footer-basket-btn .basket-btn {
        color: #1a4556 !important;
        -webkit-text-fill-color: #1a4556 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Safe cart-only override; avoids replacing global repaint.css. */
.repaint .header-bottom-group {
    width: max-content;
    display: flex;
    gap: 12px;
}

/* v50: мобильная строка корзины располагается над штатным нижним меню.
   Существующие условия показа/скрытия корзины не меняются. */
@media screen and (max-width: 1210px) {
    .mobile-menu-footer-basket-btn {
        position: fixed !important;
        right: 0 !important;
        bottom: 55px !important;
        left: 0 !important;
        z-index: 101 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
}

/* v55: возвращаем штатный верхний мобильный header.
   Ранее правило .header-top:not(._mobile) скрывало единственный header-top,
   хотя отдельного элемента .header-top._mobile в шаблоне нет. */
@media screen and (max-width: 1210px) {
    .repaint header > .header-top:not(._mobile) {
        display: flex !important;
    }
}

/* v56: на мобильных страницах корзины и оформления заказа
   отдельная нижняя строка корзины не показывается. Штатное нижнее меню остается. */
@media screen and (max-width: 1210px) {
    body.basket-page .mobile-menu-footer-basket-btn,
    html.taomed-checkout-no-marketing-popups .mobile-menu-footer-basket-btn {
        display: none !important;
    }
}

/* v59: единое оформление нижней мобильной кнопки корзины на всех страницах.
   Меняется только цвет; условия показа, текст и обработчики остаются прежними. */
@media screen and (max-width: 1210px) {
    .mobile-menu-footer-basket-btn > .basket-btn-container-js,
    .mobile-menu-footer-basket-btn > .basket-btn-container-js:focus,
    .mobile-menu-footer-basket-btn > .basket-btn-container-js:focus-visible,
    .mobile-menu-footer-basket-btn > .basket-btn-container-js:active {
        background: #528892 !important;
        border-color: #528892 !important;
    }

    .mobile-menu-footer-basket-btn .basket-btn,
    .mobile-menu-footer-basket-btn .basket-btn:hover,
    .mobile-menu-footer-basket-btn .basket-btn:focus,
    .mobile-menu-footer-basket-btn .basket-btn:focus-visible,
    .mobile-menu-footer-basket-btn .basket-btn:active {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media screen and (max-width: 1210px) and (hover: hover) and (pointer: fine) {
    .mobile-menu-footer-basket-btn > .basket-btn-container-js:hover {
        background: #6C8995 !important;
        border-color: #6C8995 !important;
    }
}