/* Кнопка «Скинченджер» в шапке.
   Размеры сняты с соседней .pay_button живой темы (23.08.2026): высота 41,
   padding 0 20, радиус 8, gap 8, иконка 20x20, текст 14/500. Отличается только
   цветом: фон --span-10, текст и иконка --span (у кнопки пополнения — --money),
   чтобы две кнопки рядом не сливались. */
.sc-button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 41px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--br-8, 8px);
    background: var(--span-10, rgba(118, 171, 41, .1));
    color: var(--span, #76ab29);
    font-size: var(--font-size-m, 14px);
    font-weight: var(--font-weight-5, 500);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition-ease-2, all .2s ease);
}
.sc-button:hover {
    border-color: var(--span-10, rgba(118, 171, 41, .1));
    background: var(--span-middle, rgba(118, 171, 41, .18));
    color: var(--span, #76ab29);
    text-decoration: none;
}

/* <use> в flex схлопывается без явного размера — нужен и flex-basis */
.sc-button svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: var(--span, #76ab29);
}

.sc-button__text { color: var(--span, #76ab29); }

/* Тот же брейкпоинт, на котором тема прячет подпись у кнопки пополнения */
@media (max-width: 768.9px) {
    .sc-button { padding: 0 .657rem; }
    .sc-button__text { display: none; }
}