/* Делаем кнопки вариаций гибкими и выравниваем в ряды */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item {
    width: calc(50% - 8px) !important; /* Ровно по 2 кнопки в ряд с учетом отступа */
    height: auto !important;           /* Высота подстроится под текст */
    text-align: center;                /* Текст строго по центру */
    margin-bottom: 8px !important;     /* Отступ между рядами */
}

/* На мобильных телефонах растягиваем на всю ширину для удобства нажатия */
@media (max-width: 480px) {
    .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item {
        width: 100% !important;
    }
}

/* Выделяем цветом 2, 4 и 6 кнопки (все продления) в лавандовый стиль */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(2),
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(4),
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(6) {
    background-color: #f3effa !important; /* Нежный пастельный лавандовый фон */
    border-color: #dcd0ef !important;     /* Мягкая сиреневая рамка */
    color: #4a3e56 !important;            /* Темно-сиреневый читаемый текст */
}

/* Эффект при наведении на лавандовые кнопки */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(2):hover,
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(4):hover,
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(6):hover {
    background-color: #eaddf7 !important; /* Чуть более насыщенный лавандовый при наведении */
    border-color: #c9b4e8 !important;     
}

/* Базовые настройки для контейнера, чтобы маркеры позиционировались ровно */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item {
    position: relative;
    margin-top: 20px !important; /* Освобождаем место сверху под маркер */
}

/* Маркер для первой кнопки: 1 год (новая) */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(1)::before {
    content: "ПОПУЛЯРНО";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    background-color: #e28743; /* Мягкий оранжевый под цвет кнопки корзины */
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Маркер для второй кнопки: 1 год (продление) */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:nth-child(2)::before {
    content: "ВЫГОДНО";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    background-color: #8c73aa; /* Лавандово-пурпурный маркер */
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    line-height: 1;
}