/* =============================================================================
   Стилизация мультиопций (дополнительных вариантов товара) в попапе карточки
   Источник: https://dsgnmax.ru/useful/additional-options
   -----------------------------------------------------------------------------
   В этом блоке описаны:
   — переменные :root для оформления опций;
   — сетка расположения чекбоксов;
   — внешний вид карточек опций с изображениями;
   — оформление галочек при выборе;
   — индивидуальные изображения опций по названию;
   — отображение цены на опциях;
   — адаптивные стили под мобильные;
   — изменение порядка элементов (поднятие кнопки вверх).
============================================================================= */

:root {
    /*Стили карточек опций*/
    --bgColorOption: #4E505C; /*Фоновый цвет*/
    --paddingOption: 15px; /*Внутренние отступы у карточки*/
    --gapOption: 15px;  /*Отступ между текстом и фото*/
    --borderRadiusOption: 12px; /*Скругление углов*/
    --outlineOption: 2px solid #FFC256; /*Цвет обводки выбранной карточки*/

    /*Иконка галочки при выбранной опции*/
    --iconChecked: url(https://static.tildacdn.com/tild3239-6363-4532-b461-633536376137/check.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;
    color: #ffffff;
}


/* Сетка карточек */
.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;
}


/* Карточка опции */
.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;
    color: #FFFFFF;
    text-align: center;
}


/* Галочка */
.js-product-multioption .t-checkbox__control:after {
    content: "";
    position: absolute;
    top: var(--topIconChecked);
    right: var(--rightIconChecked);
    display: block;
    width: var(--iconWidthChecked);
    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;
    scale: 0;
}

.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/tild6436-6532-4039-a632-393538303935/_.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Моцарелла"]):before{
    background-image: url(https://static.tildacdn.com/tild6463-3163-4461-a230-616362646466/photo.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Пармезан"]):before{
    background-image: url(https://static.tildacdn.com/tild3266-6263-4332-a332-343139316633/photo.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Дор-Блю"]):before{
    background-image: url(https://static.tildacdn.com/tild3761-3133-4332-a336-653034326464/-.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Чеддер"]):before{
    background-image: url(https://static.tildacdn.com/tild6336-3135-4730-b065-653836396338/photo.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Пеперони"]):before{
    background-image: url(https://static.tildacdn.com/tild3835-3562-4431-b739-653138343333/photo.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Салями"]):before{
    background-image: url(https://static.tildacdn.com/tild3565-3935-4230-a461-656435333761/photo.png);
}

/*Соусы*/
.js-product-multioption .t-checkbox__control:has(input[name="Ветчина"]):before{
    background-image: url(https://static.tildacdn.com/tild3561-3034-4861-b835-623631356535/photo.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Бекон"]):before{
    background-image: url(https://static.tildacdn.com/tild3931-3464-4531-b261-306163303830/photo.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Филе куриное"]):before{
    background-image: url(https://static.tildacdn.com/tild3438-6538-4032-a231-373635643639/_.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Колбаски охотничьи"]):before{
    background-image: url(https://static.tildacdn.com/tild3737-3130-4139-b864-616363616162/_.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Лук Крымский"]):before{
    background-image: url(https://static.tildacdn.com/tild3839-6632-4666-b466-356237303766/_.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Перец Халапеньо"]):before{
    background-image: url(https://static.tildacdn.com/tild3861-3735-4166-b165-653664646336/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Перец болгарский"]):before{
    background-image: url(https://static.tildacdn.com/tild3665-6537-4865-a138-633039633166/_.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Огурец маринованный"]):before{
    background-image: url(https://static.tildacdn.com/tild6636-3064-4366-b932-373938323262/_.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Шампиньоны"]):before{
    background-image: url(https://static.tildacdn.com/tild6331-6265-4131-b431-383064653965/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Помидор"]):before{
    background-image: url(https://static.tildacdn.com/tild3836-3165-4432-b961-323063613661/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Зелень"]):before{
    background-image: url(https://static.tildacdn.com/tild3336-6166-4539-b238-663466333133/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Маслины"]):before{
    background-image: url(https://static.tildacdn.com/tild6464-6665-4832-b032-333339656166/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Фасоль"]):before{
    background-image: url(https://static.tildacdn.com/tild6238-3331-4039-a464-666639616163/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Ананас"]):before{
    background-image: url(https://static.tildacdn.com/tild6232-6466-4462-b265-366335313033/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Креветки"]):before{
    background-image: url(https://static.tildacdn.com/tild3363-3131-4463-b831-336361666330/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Свинина"]):before{
    background-image: url(https://static.tildacdn.com/tild3166-3563-4039-b866-383164323538/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Говядина"]):before{
    background-image: url(https://static.tildacdn.com/tild3730-3239-4065-b663-653237323861/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Курица"]):before{
    background-image: url(https://static.tildacdn.com/tild3462-3865-4539-b035-336463383438/photo.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Морепродукты"]):before{
    background-image: url(https://static.tildacdn.com/tild3065-3034-4562-b562-653338663735/photo.png);
}

/* ЦЕННИК в карточках */
.priceOption {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #FFC256;
    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(110px, 1fr));
        gap: 10px;
    }

    .js-product-multioption .t-checkbox__control span {
        font-size: 12px;
        letter-spacing: -0.2px;
        overflow-wrap: anywhere;
    }
}


/* ИЗМЕНЕНИЕ ПОРЯДКА КНОПОК и ОПЦИЙ в попапе */
.t-store__prod-popup__info {
    display: flex;
    flex-direction: column;
}

.t-store__prod-popup__btn-wrapper.js-store-buttons-wrapper {
    order: 2;
}

.js-product-controls-wrapper {
    order: 3;
}



/* =============================================================================
   Адаптивная сетка для блока крошек (.t758)
   -----------------------------------------------------------------------------
   Здесь задаются размеры контейнера .t758 .t-container и стили для .t-col ul
   в зависимости от ширины экрана (брейкпоинты: 1360, 1200, 960, 640 пикселей).
============================================================================= */

/*сетка для крошек 1360*/
@media screen and (min-width: 1360px) {
    .t758 .t-container {
        width: 1320px !important;
        max-width: 1320px;
    }

    .t758 .t-col ul {
        margin-bottom: -5px !important;
    }
}

/*сетка для крошек 1200*/
@media screen and (min-width: 1200px) and (max-width: 1359px) {
    .t758 .t-container {
        width: 1160px !important;
        max-width: 1160px;
    }

    .t758 .t-col ul {
        margin-bottom: -5px !important;
    }
}

/*сетка для крошек 960*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
    .t758 .t-container {
        width: 940px !important;
        max-width: 940px;
    }

    .t758 .t-col ul {
        margin-bottom: -5px !important;
    }
}

/*сетка для крошек 640*/
@media screen and (min-width: 640px) and (max-width: 959px) {
    .t758 .t-container {
        width: 640px !important;
        max-width: 640px;
    }

    .t758 .t-col ul {
        margin-bottom: -5px !important;
    }

    .t-rec_pt_30 {
        padding-top: 20px !important;
    }
}


/* Скругление углов и отступы у вариантов товара в попапе */
.js-product .t-product__option-variants_buttons .t-product__option-item_simple {
    padding: 10px 15px;
    border-radius: 6px;
}

/* Активная кнопка варианта */
.t-product__option-item.t-product__option-item_active {
  background-color: #FFE6CA !important;
  border-color: #FFE6CA !important;
  color: #FFFFFF !important;
}

/* Толщина и размер текста */
.t-product__option-variants_buttons .t-product__option-item span {
  font-weight: 400;
  font-size: 14px;
}

/* Отступ заголовка от вариантов */
.t-store .t-product__option-title {
    padding-bottom: 10px;
}


/* ------------------- */
/* АДАПТИВНАЯ СЕТКА КАРТОЧЕК ТОВАРОВ В КАТАЛОГЕ */
/* ------------------- */

:root {
    /* Десктоп под 1360px */
    --grid1360: 1fr 1fr 1fr;
    --gap1360: 20px 20px;
    --heightImg1920: 280px !important;

    /* 1200–1359px */
    --gridDesktop: 1fr 1fr 1fr;
    --gapDesktop: 20px 20px;
    --heightImgDesktop: 240px !important;

    /* 960–1199px */
    --gridTabletLarge: 1fr 1fr 1fr;
    --gapTabletLarge: 20px 20px;
    --heightImgTabletLarge: 200px !important;
    --fontSizeTitleTabletLarge: 18px;
    --fontSizeDescrTabletLarge: 16px;
    --fontSizePriceTabletLarge: 20px;
    --fontSizeOldPriceTabletLarge: 14px;

    /* 640–959px */
    --gridTabletSmall: 1fr 1fr;
    --gapTabletSmall: 15px 15px;
    --heightImgTabletSmall: 200px !important;
    --fontSizeTitleTabletSmall: 18px;
    --fontSizeDescrTabletSmall: 15px;
    --fontSizePriceTabletSmall: 18px;
    --fontSizeOldPriceTabletSmall: 14px;

    /* до 640px */
    --gridMobile: 1fr;
    --gapMobile: 18px !important;
    --heightImgMobile: 250px !important;
    --fontSizeTitleMobile: 20px;
    --fontSizeDescrMobile: 16px;
    --fontSizePriceMobile: 24px;
    --fontSizeOldPriceMobile: 10px;
}

.js-store-grid-cont:before {
    display: none;
}

.t-store__card__wrap_all {
    height: 100% !important;
}

.t-store__grid-separator {
    display: none;
}

.js-product:not(.js-product-relevant), .t-store__stretch-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* >=1360px */
@media screen and (min-width: 1360px) {
    .js-store-grid-cont {
        max-width: 1360px;
        display: grid !important;
        grid-template-columns: var(--grid1360);
        grid-gap: var(--gap1360);
        padding: 0 20px;
        box-sizing: border-box;
    }
    .t-store__card__imgwrapper {
        height: var(--heightImg1920);
        padding-bottom: 0 !important;
    }
}

/* 1200–1359px */
@media (min-width: 1200px) and (max-width: 1359px) {
    .js-store-grid-cont {
        display: grid !important;
        grid-template-columns: var(--gridDesktop);
        grid-gap: var(--gapDesktop);
        padding: 0 20px;
        box-sizing: border-box;
    }
    .t-store__card__imgwrapper {
        height: var(--heightImgDesktop);
        padding-bottom: 0 !important;
    }
}

/* 960–1199px */
@media (min-width: 960px) and (max-width: 1199px) {
    .js-store-grid-cont {
        display: grid !important;
        grid-template-columns: var(--gridTabletLarge);
        grid-gap: var(--gapTabletLarge);
        padding: 0 15px;
        box-sizing: border-box;
    }
    .t-store__card__imgwrapper {
        height: var(--heightImgTabletLarge);
        padding-bottom: 0 !important;
    }
    .js-store-prod-name {
        font-size: var(--fontSizeTitleTabletLarge) !important;
    }
    .js-store-prod-descr {
        font-size: var(--fontSizeDescrTabletLarge) !important;
    }
    .js-product-price, .t-store__card__price-currency {
        font-size: var(--fontSizePriceTabletLarge) !important;
    }
    .t-store__card__price_old {
        font-size: var(--fontSizeOldPriceTabletLarge) !important;
    }
}

/* 640–959px */
@media (min-width: 640px) and (max-width: 959px) {
    .js-store-grid-cont {
        display: grid !important;
        grid-template-columns: var(--gridTabletSmall);
        grid-gap: var(--gapTabletSmall);
        padding: 0 10px;
        box-sizing: border-box;
    }
    .t-store__card__imgwrapper {
        height: var(--heightImgTabletSmall);
        padding-bottom: 0 !important;
    }
    .js-store-prod-name {
        font-size: var(--fontSizeTitleTabletSmall) !important;
    }
    .js-store-prod-descr {
        font-size: var(--fontSizeDescrTabletSmall) !important;
    }
    .js-product-price, .t-store__card__price-currency {
        font-size: var(--fontSizePriceTabletSmall) !important;
    }
    .t-store__card__price_old {
        font-size: var(--fontSizeOldPriceTabletSmall) !important;
    }
}

/* до 640px */
@media screen and (max-width: 639px) {
    .js-store-grid-cont {
        display: grid !important;
        grid-template-columns: var(--gridMobile);
        grid-gap: var(--gapMobile);
        padding: 0 10px;
        box-sizing: border-box;
    }
    .t-store__card__imgwrapper {
        height: var(--heightImgMobile);
        padding-bottom: 0 !important;
    }
    .js-store-prod-name {
        font-size: var(--fontSizeTitleMobile) !important;
    }
    .js-store-prod-descr {
        font-size: var(--fontSizeDescrMobile) !important;
    }
    .t-store__card__price {
        font-size: var(--fontSizePriceMobile) !important;
    }
    .t-store__card__price_old {
        font-size: var(--fontSizeOldPriceMobile) !important;
    }
}

/* Доп. уточнение заголовка в карточке */
@media (max-width: 640px) {
    .js-store-grid-cont a .t-store__card__title {
        font-size: 22px !important;
    }
}


/* === ПЕРЕНОС ЦЕНЫ РЯДОМ С КНОПКОЙ "В КОРЗИНУ" === */
/* https://club.dsgnmax.ru/ */

.js-store-price-wrapper {
    width: 100%;
    margin: 0 !important;
}

.t-store__card__btns-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.t-store__prod__quantity {
    margin: 0px 5px !important;
    padding: 0px 5px;
    background-color: #EFEFF6;
    border-color: #EFEFF6;
}

.js-store-prod-btn2 {
    margin: 0 !important;
    width: fit-content;
}

.t-store__card__price {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.t-store__card__price_old {
    margin: 0 !important;
}


/* === ИКОНКА В КНОПКЕ "ДОБАВИТЬ В КОРЗИНУ" И РАЗМЕРЫ КНОПКИ НА РАЗНЫХ ЭКРАНАХ === */
/* Источник иконки: https://static.tildacdn.com/... */

.js-store-prod-btn2 {
    margin: 0 !important;
    display: flex;
    gap: 5px;   /* отступ между кнопкой и иконкой */
    width: fit-content !important;  /* Можно указать 100%, если кнопка должна быть на всю ширину */
}

.js-store-prod-btn2:after {
    content: "";
    display: block;
    width: 24px;    /* Ширина иконки */
    height: 24px;   /* Высота иконки */
    background-image: url(https://static.tildacdn.com/tild3964-3737-4265-a630-653166383236/__.svg); /* Ссылка на иконку */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Размеры кнопки .t-btn_sm */
.t-btn_sm {
    height: 45px;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Адаптивные настройки для мобильных */
@media (max-width: 639px) {
    .t-btn_sm {
        height: 50px;
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* === СЕКЦИЯ "СМОТРЕТЬ ТАКЖЕ" (Карточки рекомендуемых товаров) === */

/* Фоновый цвет карточек в блоке "Смотреть также" */
.js-store div div div div .js-product-relevant > div {
    background-color: #262731 !important;
}

/* ----- >=1200px ----- */
@media screen and (min-width: 1200px) {
    .js-store div .js-product-relevant {
        max-width: 320px !important;
        margin-right: 0px;
        transform: translateX(0px) translateY(0px);
    }

    /* Скругление верхних углов у картинки */
    .js-store .js-product-relevant .loaded {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }
}

/* ----- 960–1199px ----- */
@media (min-width: 960px) and (max-width: 1199px) {
    .js-store div .js-product-relevant {
        max-width: 292px !important;
        transform: translateX(0px) translateY(0px);
        margin-right: 10px !important;
    }

    .js-store .js-product-relevant a .t-name {
        font-size: 20px !important;
    }

    .js-product-relevant > div > a > div div {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }
}

/* ----- 640–959px ----- */
@media (min-width: 640px) and (max-width: 959px) {
    #allrecords .t-rec .t778 .js-store .t-popup_show .t-popup__container-animated div div div div .js-product-relevant {
        width: 320px !important;
    }

    .js-store div .js-product-relevant {
        min-width: 54% !important;
    }

    .js-store .t-popup_show .t-popup__container-animated div div div div .js-product-relevant {
        margin-right: 0px !important;
    }

    .js-store .js-product-relevant a .t-name {
        font-size: 18px !important;
    }

    .js-product-relevant > div > a > div div {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }
}

@media (max-width:639px){

 /* Ширина одной карточки */
 .js-store div .js-product-relevant{
  min-width:90% !important;
 }
 
 /* отступ у карточки */
 .js-store .t-popup_show .t-popup__container-animated div div div div .js-product-relevant{
  margin-right:0px !important;
 }
 
 /* Размер шрифта заголовка */
 .js-store .js-product-relevant a .t-name{
  font-size:18px !important;
 }
 
 /* Скругление верхних углов картинки */
 .js-product-relevant > div > a > div div{
  border-top-left-radius:18px;
  border-top-right-radius:18px;
 }
 
}


/* Пометка Sale */
.t-store__card__mark {
    border-radius: 18px;
    width: 65px;
}

/* Анимация при наведении на карточку */
.js-product.t-store__card.t-col.t-col_4.t-align_left.t-item {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Эффект уменьшения карточки при наведении */
.js-product.t-store__card.t-col.t-col_4.t-align_left.t-item:hover {
    transform: scale(0.99);
}

/* === СТИЛИ ДЛЯ ПОПАПА ТОВАРА: ХАРАКТЕРИСТИКИ И КОЛИЧЕСТВО === */

/* Стили блока характеристик в попапе товара */
.js-store-prod-text .js-store-prod-all-charcs .js-store-prod-charcs {
    background-color: #EFEFF6;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 18px;
}

/* Фон обёртки поля выбора количества товара */
.js-store div .t-store__prod__quantity {
    background-color: #d3d3d8;
}

/* Толщина шрифта в поле ввода количества */
.js-store div input[type=number] {
    font-weight: 500;
}

/* === АДАПТИВНЫЕ РАЗМЕРЫ ШРИФТА В ПОПАПЕ ТОВАРА === */

/* --- Десктоп ≥1200px --- */
@media (min-width: 1200px) {
    .t-name_xl {
        font-size: 28px;
    }
    .t-name_md {
        font-size: 24px;
    }
    .t-descr_xxs {
        font-size: 17px;
    }
}

/* --- Планшеты и малые десктопы: 640px–1199px --- */
@media (min-width: 640px) and (max-width: 1199px) {
    .t-name_xl {
        font-size: 22px !important;
    }
    .t-name_md {
        font-size: 18px !important;
    }
    .t-descr_xxs {
        font-size: 16px !important;
    }
}

/* --- Мобильные устройства до 639px --- */
@media (max-width: 639px) {
    .t-name_xl {
        font-size: 23px !important;
    }
    .t-name_md {
        font-size: 23px !important;
    }
    .t-descr_xxs {
        font-size: 16px !important;
    }

    /* Заголовок секции "Смотреть также" */
    .t-store__relevants__title {
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 25px;
    }
}