<!--https://dsgnmax.ru/useful/additional-options--> <style>

:root{
    /*Стили карточек опций*/
    --bgColorOption: #f7f7f7; /*Фоновый цвет*/
    --paddingOption: 15px; /*Внутренние отступы у карточки*/
    --gapOption: 15px;  /*Отступ между текстом и фото*/
    --borderRadiusOption: 12px; /*Скругление углов*/
    --outlineOption: 2px solid #15470A; /*Цвет обводки выбранной карточки*/
    
    
    /*Иконка галочки при выбранной опции*/
    --iconChecked: url(https://static.tildacdn.com/tild6463-6630-4166-b532-316166343735/checked.svg); /*Ссылка на иконку*/
    --iconWidthChecked: 20px;   /*Ширина иконки*/
    --topIconChecked: 10px;     /*Отступ сверху от самой карточки*/
    --rightIconChecked: 10px;   /*Отступ справа от самой карточки*/
    
} 


/*Стили заголовка для дополнительных опций*/
.js-product-multioption .js-product-option-name{    
    font-size: 18px;    /**/
    font-weight: 500;   /**/
    letter-spacing: -0.5px; /**/
    margin-bottom: 15px;    /**/
}
/*----------*/



/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));    /*перавое значение – это минимальная ширина карточки*/
    gap: 15px;  /*отступ между карточками*/
}

.js-product-multioption .t-checkbox__indicator {
    display: none !important;  /*Скрываем стандартный чекбокс*/
}
/*----------*/



/*Стили самих карточек*/
.js-product-multioption .t-checkbox__control {
    display: flex;
    flex-direction: column;
    gap: var(--gapOption);  /*Отступ между фото и названием*/
    margin: 0 !important;
    padding: var(--paddingOption);  /*Внутренние отступы*/
    background-color: var(--bgColorOption);  /*Фоновый цвет*/
    border-radius: var(--borderRadiusOption);    /*Радиус скругления углов*/
    position: relative;
}

/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
    font-size: 12px;    /*Размер текста*/
    line-height: 1.1;   /*Межстрочка*/
    font-weight: 400;   /*Толщина*/
    letter-spacing: -0.3px; /*Трекинг*/
}

/*Иконка галочки при выборе доп. опции*/
.js-product-multioption .t-checkbox__control:after{
    content:"";
    position: absolute;
    top: var(--topIconChecked);  /*Отступ сверху от самой карточки*/
    right: var(--rightIconChecked);    /*Отступ справа от самой карточки*/
    display: block;
    width: var(--iconWidthChecked);      /*Ширина иконки*/
    scale: 0;
    aspect-ratio: 1 / 1;
    background-image: var(--iconChecked);    /*Иконка галочки*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease-in;   /*плавность анимации появления*/
    transform-origin: center;
}

.js-product-multioption .t-checkbox {
    scale: 0 !important;    /*Изначальный размер иконки галочки*/
}

.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked):after{
    scale: 1;   /*Размер галочки при выбранной опции*/
}

.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked) {
    outline: var(--outlineOption); /*Цвет обводки у выбранной опции*/
}
/*----------*/



/* Общие настройки для фото опций */
.js-product-multioption .t-checkbox__control:before{
    content:"";
    display: block;
    width: 100%;    /*Ширина фотографии*/
    aspect-ratio: 1 / 1;    /*Соотношение сторон у фотографий опций*/
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box !important;
}

/*Фото для конкретных опций*/
/*Здесь вы можете добавлять и удалять лишние строчки кода. Чтобы фото подгружались, необходимо указать точное название, как в примере и вставить ссылку на изображение*/
.js-product-multioption .t-checkbox__control:has(input[name="Котлета"]):before{ 
    background-image: url(https://static.tildacdn.com/tild6533-6534-4763-a139-363638653530/1.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Лук"]):before{
    background-image: url(https://static.tildacdn.com/tild3464-6635-4438-a165-643861623636/2.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Бекон"]):before{
    background-image: url(https://static.tildacdn.com/tild6533-3931-4231-a134-363030653437/3.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Ветчина"]):before{
    background-image: url(https://static.tildacdn.com/tild6636-3565-4363-b134-643063343232/4.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Сыр"]):before{
    background-image: url(https://static.tildacdn.com/tild3734-3838-4136-b366-363233663463/5.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Помидоры"]):before{
    background-image: url(https://static.tildacdn.com/tild3738-3230-4861-b763-323335613565/6.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Шампиньоны"]):before{
    background-image: url(https://static.tildacdn.com/tild6566-3638-4636-b430-353365303432/7.png);
}

/*Соусы*/
.js-product-multioption .t-checkbox__control:has(input[name="Кетчуп"]):before{
    background-image: url(https://static.tildacdn.com/tild6164-6239-4532-b861-316561623066/11.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Сырный"]):before{
    background-image: url(https://static.tildacdn.com/tild3933-3963-4434-b436-343433663234/22.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Кисло-сладкий"]):before{
    background-image: url(https://static.tildacdn.com/tild3138-6336-4430-b534-363164666433/33.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Острый"]):before{
    background-image: url(https://static.tildacdn.com/tild6138-6332-4435-a366-653731326662/44.png);
}
/*----------*/


/*Отображение цены в карточках*/
.priceOption {
    position: absolute; /*Можно указать relative и тогда цена будет над название опции*/
    top: 10px;  /*Отступ сверху*/
    left: 10px; /*Отступ справа*/
    background-color: #C8F2C4;  /*Фоновый цвет*/
    border-radius: 100px;   /*Скругление углов*/
    padding: 2px 6px;   /*Отступы*/
    font-size: 12px;    /*Размер текста*/
    font-weight: 500;   /*Толщина текста*/
    color: #15470A; /*Цвет текста*/
}
/*----------*/


/*Стили для мобильных устройств*/
@media screen and (max-width: 480px){
      /*Стили для родительского контейнера с чекбоксами (карточками)*/
    .js-product-multioption .t-product__checkbox-wrap {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));    /*перавое значение – это минимальная ширина карточки*/
        gap: 10px;  /*отступ между карточками*/
    }  
    
    /*Стили текста для названий доп. опций*/
    .js-product-multioption .t-checkbox__control span{
        font-size: 10px;    /*Размер текста*/
        letter-spacing: -0.2px; /*Трекинг*/
        overflow-wrap: anywhere;    /*Если слово длинное, оно перенесется на другу строку*/
    }
}
</style> <script>
(function(){
  function render(){
    var inputs = document.querySelectorAll('input[data-product-variant-price]');
    console.log('[priceOption] found=', inputs.length);
    inputs.forEach(function(inp){
      var n = parseFloat(inp.getAttribute('data-product-variant-price'));
      if(!n) return;
      var parent = inp.closest('.t-checkbox__control')
                || inp.closest('.t-radio__control')
                || inp.closest('label')
                || inp.parentElement;
      if(!parent) return;
      var txt = (n > 0 ? '+ ' : '− ') + Math.abs(n).toLocaleString('ru-RU') + ' ₽';
      var ex = parent.querySelector('.priceOption');
      if(ex){ if(ex.textContent !== txt) ex.textContent = txt; return; }
      var d = document.createElement('div');
      d.className = 'priceOption';
      d.textContent = txt;
      parent.appendChild(d);
    });
  }
  function boot(){
    render();
    [300, 800, 1500, 3000, 6000].forEach(function(ms){ setTimeout(render, ms); });
    document.addEventListener('change', function(e){
      if(e.target && e.target.matches && e.target.matches('input[data-product-variant-price]')) setTimeout(render, 50);
    }, true);
    document.addEventListener('click', function(e){
      if(e.target && e.target.closest && e.target.closest('.js-product, .t-store__card, .t-product')) {
        setTimeout(render, 400);
        setTimeout(render, 1200);
      }
    }, true);
  }
  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
  else boot();
})();
</script>  

   <!--https://dsgnmax.ru/useful/additional-options--> <style>

:root{
    /*Стили карточек опций*/
    --bgColorOption: #f7f7f7; /*Фоновый цвет*/
    --paddingOption: 15px; /*Внутренние отступы у карточки*/
    --gapOption: 15px;  /*Отступ между текстом и фото*/
    --borderRadiusOption: 12px; /*Скругление углов*/
    --outlineOption: 2px solid #15470A; /*Цвет обводки выбранной карточки*/
    
    
    /*Иконка галочки при выбранной опции*/
    --iconChecked: url(https://static.tildacdn.com/tild6463-6630-4166-b532-316166343735/checked.svg); /*Ссылка на иконку*/
    --iconWidthChecked: 20px;   /*Ширина иконки*/
    --topIconChecked: 10px;     /*Отступ сверху от самой карточки*/
    --rightIconChecked: 10px;   /*Отступ справа от самой карточки*/
    
} 


/*Стили заголовка для дополнительных опций*/
.js-product-multioption .js-product-option-name{    
    font-size: 18px;    /**/
    font-weight: 500;   /**/
    letter-spacing: -0.5px; /**/
    margin-bottom: 15px;    /**/
}

.t-product__option.js-product-multioption {
    margin-bottom: 40px;    /*Отступ у блока с опциями снизу до следующего блока*/
}
/*----------*/



/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));    /*перавое значение – это минимальная ширина карточки*/
    gap: 15px;  /*отступ между карточками*/
}

.js-product-multioption .t-checkbox__indicator {
    display: none !important;  /*Скрываем стандартный чекбокс*/
}
/*----------*/



/*Стили самих карточек*/
.js-product-multioption .t-checkbox__control {
    display: flex;
    flex-direction: column;
    gap: var(--gapOption);  /*Отступ между фото и названием*/
    margin: 0 !important;
    padding: var(--paddingOption);  /*Внутренние отступы*/
    background-color: var(--bgColorOption);  /*Фоновый цвет*/
    border-radius: var(--borderRadiusOption);    /*Радиус скругления углов*/
    position: relative;
}out

/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
    font-size: 12px;    /*Размер текста*/
    line-height: 1.1;   /*Межстрочка*/
    font-weight: 400;   /*Толщина*/
    letter-spacing: -0.3px; /*Трекинг*/
}

/*Иконка галочки при выборе доп. опции*/
.js-product-multioption .t-checkbox__control:after{
    content:"";
    position: absolute;
    top: var(--topIconChecked);  /*Отступ сверху от самой карточки*/
    right: var(--rightIconChecked);    /*Отступ справа от самой карточки*/
    display: block;
    width: var(--iconWidthChecked);      /*Ширина иконки*/
    scale: 0;
    aspect-ratio: 1 / 1;
    background-image: var(--iconChecked);    /*Иконка галочки*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease-in;   /*плавность анимации появления*/
    transform-origin: center;
}

.js-product-multioption .t-checkbox {
    scale: 0 !important;    /*Изначальный размер иконки галочки*/
}

.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked):after{
    scale: 1;   /*Размер галочки при выбранной опции*/
}

.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked) {
    outline: var(--outlineOption); /*Цвет обводки у выбранной опции*/
}
/*----------*/



/* Общие настройки для фото опций */
.js-product-multioption .t-checkbox__control:before{
    content:"";
    display: block;
    width: 100%;    /*Ширина фотографии*/
    aspect-ratio: 1 / 1;    /*Соотношение сторон у фотографий опций*/
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box !important;
}


/*Фото для конкретных опций*/
/*Здесь вы можете добавлять и удалять лишние строчки кода. Чтобы фото подгружались, необходимо указать точное название, как в примере и вставить ссылку на изображение*/
.js-product-multioption .t-checkbox__control:has(input[name="Котлета"]):before{ 
    background-image: url(https://static.tildacdn.com/tild6533-6534-4763-a139-363638653530/1.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Лук"]):before{
    background-image: url(https://static.tildacdn.com/tild3464-6635-4438-a165-643861623636/2.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Бекон"]):before{
    background-image: url(https://static.tildacdn.com/tild6533-3931-4231-a134-363030653437/3.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Ветчина"]):before{
    background-image: url(https://static.tildacdn.com/tild6636-3565-4363-b134-643063343232/4.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Сыр"]):before{
    background-image: url(https://static.tildacdn.com/tild3734-3838-4136-b366-363233663463/5.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Помидоры"]):before{
    background-image: url(https://static.tildacdn.com/tild3738-3230-4861-b763-323335613565/6.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Шампиньоны"]):before{
    background-image: url(https://static.tildacdn.com/tild6566-3638-4636-b430-353365303432/7.png);
}

/*Соусы*/
.js-product-multioption .t-checkbox__control:has(input[name="Кетчуп"]):before{
    background-image: url(https://static.tildacdn.com/tild6164-6239-4532-b861-316561623066/11.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Сырный"]):before{
    background-image: url(https://static.tildacdn.com/tild3933-3963-4434-b436-343433663234/22.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Кисло-сладкий"]):before{
    background-image: url(https://static.tildacdn.com/tild3138-6336-4430-b534-363164666433/33.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Острый"]):before{
    background-image: url(https://static.tildacdn.com/tild6138-6332-4435-a366-653731326662/44.png);
}
/*----------*/


/*Отображение цены в карточках*/
.priceOption {
    position: absolute; /*Можно указать relative и тогда цена будет над название опции*/
    top: 10px;  /*Отступ сверху*/
    left: 10px; /*Отступ справа*/
    background-color: #C8F2C4;  /*Фоновый цвет*/
    border-radius: 100px;   /*Скругление углов*/
    padding: 2px 6px;   /*Отступы*/
    font-size: 12px;    /*Размер текста*/
    font-weight: 500;   /*Толщина текста*/
    color: #15470A; /*Цвет текста*/
}
/*----------*/


/*ВТОРОЙ НАБОР ОПЦИЙ*/

/*Иконка галочки при выборе доп. опции*/
.js-product-multioption:has(.t-checkbox[name="Кетчуп"]) .t-checkbox__control:after{
    background-image: url(https://static.tildacdn.com/tild3133-6563-4662-b233-663964636137/checked2.svg);    /*Иконка галочки*/
}
.js-product-multioption:has(.t-checkbox[name="Кетчуп"]) .t-checkbox__control:has(.t-checkbox:checked) {
    outline: 2px solid #D65D1A; /*Цвет обводки у выбранной опции*/
}

/*Отображение цены в карточках*/
.js-product-multioption:has(.t-checkbox[name="Кетчуп"]) .priceOption {
    background-color: #FFCFB4;  /*Фоновый цвет*/
    color: #D65D1A; /*Цвет текста*/
}
/*----------*/

/*Стили для мобильных устройств*/
@media screen and (max-width: 480px){
      /*Стили для родительского контейнера с чекбоксами (карточками)*/
    .js-product-multioption .t-product__checkbox-wrap {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));    /*перавое значение – это минимальная ширина карточки*/
        gap: 10px;  /*отступ между карточками*/
    }  
    
    /*Стили текста для названий доп. опций*/
    .js-product-multioption .t-checkbox__control span{
        font-size: 10px;    /*Размер текста*/
        letter-spacing: -0.2px; /*Трекинг*/
        overflow-wrap: anywhere;    /*Если слово длинное, оно перенесется на другу строку*/
    }
}
</style> <script>
(function(){
  function render(){
    var inputs = document.querySelectorAll('input[data-product-variant-price]');
    console.log('[priceOption] found=', inputs.length);
    inputs.forEach(function(inp){
      var n = parseFloat(inp.getAttribute('data-product-variant-price'));
      if(!n) return;
      var parent = inp.closest('.t-checkbox__control')
                || inp.closest('.t-radio__control')
                || inp.closest('label')
                || inp.parentElement;
      if(!parent) return;
      var txt = (n > 0 ? '+ ' : '− ') + Math.abs(n).toLocaleString('ru-RU') + ' ₽';
      var ex = parent.querySelector('.priceOption');
      if(ex){ if(ex.textContent !== txt) ex.textContent = txt; return; }
      var d = document.createElement('div');
      d.className = 'priceOption';
      d.textContent = txt;
      parent.appendChild(d);
    });
  }
  function boot(){
    render();
    [300, 800, 1500, 3000, 6000].forEach(function(ms){ setTimeout(render, ms); });
    document.addEventListener('change', function(e){
      if(e.target && e.target.matches && e.target.matches('input[data-product-variant-price]')) setTimeout(render, 50);
    }, true);
    document.addEventListener('click', function(e){
      if(e.target && e.target.closest && e.target.closest('.js-product, .t-store__card, .t-product')) {
        setTimeout(render, 400);
        setTimeout(render, 1200);
      }
    }, true);
  }
  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
  else boot();
})();
</script>