/* Круг + белая стрелка Arrow 2.svg (размеры как у .btn-more) */
/* <i class="arrow-icon arrow-icon--orange" aria-hidden="true"></i> */
.arrow-icon {
    display: inline-block;
    width: var(--btn-more-icon-circle);
    height: var(--btn-more-icon-circle);
    flex-shrink: 0;
    vertical-align: middle;
}

.arrow-icon::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url('../../img/Arrow%202.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--btn-more-icon-arrow) var(--btn-more-icon-arrow);
}

.arrow-icon--orange::before {
    background-color: var(--orange);
}

.arrow-icon--black::before {
    background-color: var(--black);
}

/* Кнопки «Подробнее» на оранжевых карточках: тёмный круг + Arrow 2.svg */
.btn-more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-more-icon-circle);
    height: var(--btn-more-icon-circle);
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(46, 46, 46, 1);
}

.btn-more-icon::after {
    content: '';
    width: var(--btn-more-icon-arrow);
    height: var(--btn-more-icon-arrow);
    background: url('../../img/Arrow%202.svg') center / contain no-repeat;
}