/*Меняем внешний вид отображения вариантов товара*/

/*Делаем значение варианта на одной строке с его свойством*/
.js-product .t-product__option {
    display: flex;
    justify-content: space-between;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}    

/* Стили для кнопок каждого варианта */
/*Общие стили кнопок*/
.t-product__option-item.t-product__option-item_buttons{
    background-color: white;
    border-radius: 12px !important;
    border: none !important;
    transition: all 0.2s ease-in !important;
    outline: 2px solid #B38642;
}

.t-product__option-item:not(.t-product__option-item_color) {
    /*Отступы внутри кнопки для вариантов, но кроме цветов*/
    padding: 10px 20px !important;   
}
/*Стили кнопок с цветами*/
.t-product__option-item_color { 
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 5px 5px 5px 5px;
}
 /*Обводка активного варианта */
.t-product__option-item_active {
    outline: 2px solid #B38642 !important;
} 

/*Убираем отступы у вариантов*/
.js-product .t-product__option-variants_buttons .t-product__option-item_simple{
    margin-bottom: 8px !important;
    padding: 5px !important;
    min-width: auto !important;
    min-height: auto !important;
    border: none !important;
    background-color: transparent !important;
    pointer-events: none;
    font-family: 'Onest';
    font-weight: 400;
}

/*Размер текста названия свойства и их названий*/
/*Название свойства*/
.js-product-edition-option-name{
    font-size: 16px !important;
    padding-left: 22px;
}
/*Значение свойства*/
.t-product__option-title_buttons{
    font-size: 16px !important;
    font-weight: 500;
}

@media screen and (max-width: 480px){
     .t-product__option-title_buttons,
     .js-product-edition-option-name{
        font-size: 14px !important;
    }
    .js-store-prod-name{
       font-size: 24px !important;   
    }
    .t-product__option-item.t-product__option-item_buttons{
    background-color: white;
    border-radius: 12px !important;
    border: none !important;
    transition: all 0.2s ease-in !important;
    outline: 2px solid #B38642;
}

.t-product__option-item:not(.t-product__option-item_color) {
    /*Отступы внутри кнопки для вариантов, но кроме цветов*/
    padding: 10px 20px !important;   
}
/*Стили кнопок с цветами*/
.t-product__option-item_color { 
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 5px 5px 5px 5px;
}
 /*Обводка активного варианта */
.t-product__option-item_active {
    outline: 2px solid #B38642 !important;
} 
}

/*Отступ вниз от цены*/
.t-store__card__textwrapper{
    margin-bottom: 15px !important;
}

/*Отступ вниз от цены в попапе*/
.t-store__prod-popup__price-wrapper{
    margin-bottom: 15px !important;
}

/*Иконки у вариантов*/

/*Первая иконка*/
.js-product-controls-wrapper .js-product-edition-option:nth-child(1):before{
    content: "";
    display: block;
    position: absolute;
    background-image:url("https://static.tildacdn.com/tild3763-6137-4833-b038-353039646263/ruble-svgrepo-com.svg");
    background-size: cover;
    top: 3px;
    width: 16px;
    height: 16px;
}
/*Вторая иконка*/
.js-product-controls-wrapper .js-product-edition-option:nth-child(2):before{
    content: "";
    display: block;
    position: absolute;
    background-image:url("https://static.tildacdn.com/tild6236-3062-4665-a439-326366393038/clock-1-svgrepo-com_.svg");
    background-size: cover;
    top: 3px;
    width: 16px;
    height: 16px;
}
/*Третья иконка*/
.js-product-controls-wrapper .js-product-edition-option:nth-child(3):before{
    content: "";
    display: block;
    position: absolute;
    background-image:url("https://static.tildacdn.com/tild3430-3131-4031-a166-383632623036/people-svgrepo-com_1.svg");
    background-size: cover;
    top: 3px;
    width: 16px;
    height: 16px;
}