.header-cart-noindex,
.header-cart {
    display: flex;
    height: 100%;
}

.header-cart__link {
    color: var(--text-light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.loaded .header-cart__link {
    transition: opacity .3s;
}

.header-cart__count {
    background-color: var(--bg-green-color);
    border-radius: 3.40282e38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .1875rem .28125rem .1875rem .34375rem;
    font-size: .5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    translate: 12% -12%;
}

@media (any-hover: hover) {
    .header-cart__link:hover {
        opacity: .5;
    }
}

@media (min-width: 80em) {
    .header-cart__link {
        padding: .75rem;
    }

    .header-cart__count {
        top: 1.3125rem;
        right: 0;
    }

    /* The Bitrix state marker sits between the link and the panel, so use a general sibling selector. */
    .header-cart.header-cart_open > .header__cart-panel,
    .header-cart > .header-cart__link:hover ~ .header__cart-panel,
    .header-cart > .header-cart__link:focus-visible ~ .header__cart-panel,
    .header-cart > .header__cart-panel:hover,
    .header-cart > .header__cart-panel:focus-within {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        translate: none;
    }
}

@media not (min-width: 80em) {
    .header-cart__link {
        padding: .875rem;
    }

    .header-cart__count {
        top: .875rem;
        right: .125rem;
    }
}