.cart {
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cart__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart__header .title {
    margin: 0;
}

.cart__header-count {
    font-weight: 500;
    font-size: clamp(15px, 13.286px + 0.536vw, 18px);
    line-height: 140%;
    color: var(--seryy);
    white-space: nowrap;
}

.cart__all {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    padding: 15px;
    font-weight: 500;
    font-size: clamp(15px, 13.286px + 0.536vw, 18px);
    line-height: 140%;
    color: var(--chernyy);
}

.cart__cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding: 0 15px 15px;
}

.cart__update-btn {
    background: var(--svetlo-seryy);
    color: var(--chernyy);
    border: 0;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
}

.cart__update-btn:hover {
    background: var(--temno-belyy, #e2e2e2);
}

.cart__empty {
    padding: 40px 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.cart__empty p {
    font-weight: 500;
    font-size: 18px;
    color: var(--chernyy);
}

.cart__bottom-confirm {
    text-decoration: none;
    text-align: center;
}

.details__confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    background: var(--firmennyy);
    color: var(--belyy);
    border: 0;
    padding: 15px;
    font-weight: 500;
    font-size: clamp(15px, 13px + 0.4vw, 18px);
    cursor: pointer;
}

.details__installments-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 1.5px solid var(--chernyy);
    padding: 12px 15px;
}

.details__summary-value--sale {
    color: var(--firmennyy);
}

.woocommerce-cart .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
}

.cart__attention-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.cart__bottom-menu {
    background: var(--belyy);
    z-index: 4;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.cart__bottom-instalments {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 15px;
    background: var(--svetlo-seryy);
    position: relative;
}

.cart__bottom-switch {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 140%;
    color: var(--chernyy);
}

.cart__bottom-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.cart__bottom-summary {
    font-family: var(--font-family);
    padding: 22px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart__bottom-count {
    font-weight: 400;
    font-size: 11px;
    line-height: 100%;
    color: var(--chernyy);
}

.cart__bottom-value {
    font-weight: 600;
    font-size: 20px;
    line-height: 120%;
    text-transform: uppercase;
}

.cart__bottom-confirm {
    background: var(--firmennyy);
    padding: 15px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 140%;
    color: var(--belyy);
    flex: 1;
}

.cart__switch-btn {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 23px;
}

.cart__switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cart__switch-slider {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 26px 0 rgba(224, 224, 224, 0.7);
    background: var(--temno-belyy);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.cart__switch-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2.67px;
    top: 2.4px;
    background: var(--belyy);
    border-radius: 50%;
    transition: 0.2s;
}

.cart__switch-input:checked + .cart__switch-slider {
    background: var(--firmennyy);
}

.cart__switch-input:checked + .cart__switch-slider::before {
    transform: translateX(16px);
}

@media (min-width: 768px) {
    .cart {
        gap: 30px;
    }
    .cart__header {
        gap: 20px;
        margin-bottom: 20px;
    }
    .cart__all {
        display: none;
    }

    .cart__bottom-menu {
        display: none;
    }

    .cart__attention-wrapper {
        margin-bottom: 20px;
    }
}

@media (min-width: 1200px) {
    .cart {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        grid-template-rows: repeat(3, auto);
        align-items: start;
        row-gap: 70px;
    }

    .cart__absence {
        grid-area: 2 / 2 / 3 / 3;
    }

    .cart__attention {
        grid-area: 2 / 1 / 3 / 3;
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        grid-template-rows: repeat(2, auto);
        column-gap: 30px;
        align-items: start;
    }

    .cart__attention-title {
        grid-area: 1/1/2/3;
    }

    .cart__attention-wrapper {
        grid-area: 2/1/3/2;
        margin: 0;
    }

    .cart__absence {
        grid-area: 2/2/3/3;
    }

    .cart__details {
        grid-area: 1 / 2 / 2 / 3;
        margin-top: 68px;
    }

    .cart__recommend {
        grid-area: 3 / 1 / 4 / 3;
    }

    .cart__compound {
        grid-area: 1 / 1 / 2 / 2;
    }

    /* Figma "Корзина": both buttons 65px high, 18px Medium; "Оформить в рассрочку" outlined in the brand red */
    .details__confirm-btn {
        min-height: 65px;
        padding: 20px;
        font: 500 18px/140% var(--font-family);
    }

    /* .cart_totals: details.css loads later and its plain .details__installments-btn border would win */
    .cart_totals .details__installments-btn {
        position: relative;
        height: 65px; /* as in Figma; the arrow icon must not stretch it */
        margin-top: 80px;
        padding: 0 25px;
        border: 2px solid var(--firmennyy); /* 1.5px is drawn as 1px and reads as black */
        font: 500 18px/140% var(--font-family);
        color: var(--chernyy);
    }

    /* Figma "Корзина": grey line 40px under "Перейти к оформлению" and 40px above this button */
    .cart_totals .details__installments-btn::before {
        content: "";
        position: absolute;
        top: -42px;
        left: -2px;
        right: -2px;
        height: 1px;
        background: var(--seryy);
    }
}

/* Button wording: "В рассрочку" on phones and tablets, "Оформить в рассрочку" on desktop (Figma) */
.details__installments-label--full {
    display: none;
}

@media (min-width: 1200px) {
    .details__installments-label--short {
        display: none;
    }

    .details__installments-label--full {
        display: inline;
    }
}

@media (min-width: 1900px) {
    .cart {
        grid-template-columns: 1fr 595px;
        grid-template-rows: repeat(3, auto);
        column-gap: 30px;
    }

    .cart__details {
        grid-area: 1 / 2 / 2 / 3;
        margin-top: 30px;
        max-width: 567px;
        min-width: 0;
    }

    .cart__recommend {
        grid-area: 3 / 1 / 4 / 2;
        margin-top: 80px;
        min-width: 0;
    }

    .cart__compound {
        grid-area: 1 / 1 / 2 / 2;
        min-width: 0;
    }
    .cart__attention {
        grid-area: 2 / 1 / 3 / 2;
        grid-template-columns: 353px 1fr;
        min-width: 0;
    }

    .cart__attention-wrapper {
        grid-area: 2 / 2 / 3 / 3;
        min-width: 0;
    }
    .cart__absence {
        grid-area: 2 / 1 / 3 / 2;
        min-width: 0;
    }
}

/* ---- "Обратите внимание" (Figma "Корзина" / "М. Корзина"): items that ran out + manager + call-back ---- */
.cart__attention {
    margin-top: 30px;
}

.cart__attention-title {
    margin-bottom: 15px;
}

/* the item photo is pale and the label grey, as in Figma */
.cart-card--absent .cart-card__media img {
    opacity: 0.5;
}

.cart-card__absent-label {
    font: 500 13px/140% var(--font-family);
    text-transform: uppercase;
    color: var(--seryy);
}

.cart-card__counter--static {
    display: flex;
    align-items: center;
    font: 500 15px/140% var(--font-family);
    color: var(--seryy);
}

.cart__absence {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background: var(--belyy);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
}

.cart__absence-text {
    margin: 0;
    font: 500 15px/140% var(--font-family);
    color: var(--chernyy);
}

.cart__absence-manager {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px;
    background: var(--svetlo-seryy);
}

.cart__absence-label {
    font: 500 15px/140% var(--font-family);
    color: var(--seryy);
}

.cart__absence-phone {
    font: 500 15px/140% var(--font-family);
    color: var(--chernyy);
}

.cart__absence-links {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.cart__absence-links img {
    width: 28px;
    height: 28px;
}

.cart__callback {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart__callback-row {
    display: flex;
}

.cart__callback-input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 2px solid var(--temno-belyy);
    border-right: 0;
    background: var(--belyy);
    font: 500 15px/140% var(--font-family);
    color: var(--chernyy);
}

.cart__callback-btn {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--firmennyy);
    cursor: pointer;
}

.cart__callback-btn:disabled {
    opacity: 0.6;
}

.cart__callback-message {
    margin: 0;
    font: 500 14px/140% var(--font-family);
    color: var(--chernyy);
}

.cart__callback-message.is-error {
    color: var(--firmennyy);
}

.cart--empty .cart__attention {
    margin-top: 40px;
}

@media (min-width: 768px) {
    .cart__attention-title {
        margin-bottom: 20px;
    }

    .cart__absence {
        padding: 20px;
    }
}

@media (min-width: 1200px) {
    .cart__attention {
        margin-top: 0;
    }

    .cart__absence-text,
    .cart__absence-phone,
    .cart__absence-label {
        font-size: 15px;
    }

    .cart__absence-manager {
        padding: 20px;
    }
}