/* WonderBaby CRO — доп. стили ночного захода 2026-09-01.
   Кнопка «Купить сейчас» + блок «Дополните заказ» в корзине.
   Спокойная типографика, без агрессивных красных акцентов (brief §16). */

/* ===== «Купить сейчас» на карточке товара ===== */
.wbcro-buynow-button.button {
    display: block;
    width: 100%;
    max-width: 340px; /* ровно под «пилюлей» количество+В корзину */
    margin-top: 10px;
    background: transparent;
    color: var(--wb-accent, #191919);
    border: 1.5px solid var(--wb-accent, #191919);
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 999px; /* та же форма, что у пилюли выше */
    text-align: center;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.wbcro-buynow-button.button:hover,
.wbcro-buynow-button.button:focus {
    background: var(--wb-accent, #191919);
    color: #fff;
}
.wbcro-buynow-button.button.disabled,
.wbcro-buynow-button.button:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* На мобильном штатная и «Купить сейчас» идут в столбик — уже блочные. */

/* ===== «Дополните заказ» в корзине ===== */
.wbcro-crosssell {
    margin: 32px 0 8px;
    clear: both;
}
.wbcro-crosssell__title {
    font-size: 1.25rem;
    margin: 0 0 16px;
}
.wbcro-crosssell__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.wbcro-crosssell__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .9rem;
}
.wbcro-crosssell__link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.wbcro-crosssell__link img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin-bottom: 8px;
    background: #f4f4f4;
}
.wbcro-crosssell__name {
    display: block;
    line-height: 1.3;
    min-height: 2.6em;
    overflow: hidden;
}
.wbcro-crosssell__price {
    font-weight: 700;
}
.wbcro-crosssell__price del {
    font-weight: 400;
    opacity: .6;
    margin-right: 6px;
}
.wbcro-crosssell__add.button {
    margin-top: 4px;
    text-align: center;
    font-size: .85rem;
    padding: 8px 10px;
}

@media (max-width: 768px) {
    .wbcro-crosssell__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}