/* --- 1. Общий блок вариантов --- */
.t-store__product-variants-wrapper {
    margin-bottom: 25px; /* Отступ снизу */
}

/* --- 2. Названия свойств (Размер, Цвет) --- */
.t-store__product-variant-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px;
    margin-bottom: 12px !important;
    color: #1a1a1a;
    text-transform: uppercase; /* ЗАГЛАВНЫЕ буквы как на фото */
}

/* --- 3. Кнопки размера (цифры) --- */
.t-store__variant-btn {
    min-width: 52px !important;  /* Ширина */
    height: 52px !important;     /* Высота */
    padding: 0 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: 1.5px solid #e0e0e0 !important; /* Светлая рамка */
    border-radius: 8px !important; /* Слегка скругленные углы */
    background: #fff !important;
    color: #1a1a1a !important;
    transition: all 0.2s ease !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
}

/* Эффект при наведении */
.t-store__variant-btn:hover {
    border-color: #b0b0b0 !important;
    background: #f7f7f7 !important;
}

/* Активное состояние (выбранный размер) */
.t-store__variant-btn.t-store__variant-btn_active {
    border-color: #000 !important;
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* Легкая тень */
}

/* --- 4. Кружки цвета --- */
.t-store__variant-color-wrapper {
    margin-right: 12px !important; /* Отступ между кружками */
}

.t-store__variant-color {
    width: 44px !important;    /* Размер кружка */
    height: 44px !important;
    border-radius: 50% !important; /* Идеальный круг */
    border: 2px solid #e8e8e8 !important; /* Серая рамка */
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}

/* Эффект при наведении на цвет */
.t-store__variant-color-wrapper:hover .t-store__variant-color {
    transform: scale(1.05); /* Легкое увеличение */
    border-color: #aaa !important;
}

/* Активное состояние (выбранный цвет) */
.t-store__variant-color-wrapper.t-store__variant-btn_active .t-store__variant-color {
    border-color: #000 !important;
    border-width: 3px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
    transform: scale(1.04);
}

/* --- 5. Галочка внутри активного кружка (опционально) --- */
.t-store__variant-color-wrapper.t-store__variant-btn_active .t-store__variant-color::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}