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

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

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

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

    /* до 640px */
    --gridMobile: 1fr;
    --gapMobile: 18px !important;
    --heightImgMobile: 280px !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;
}

/* общий контейнер списка карточек */
.js-store-grid-cont .t-store__card-list {
    width: 100%;
    box-sizing: border-box;
}

/* >=1360px */
@media screen and (min-width: 1360px) {
    .js-store-grid-cont {
        max-width: 1360px;
        padding: 0 20px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--grid1360);
        grid-gap: var(--gap1360);
        row-gap: var(--gap1360) !important;
        column-gap: var(--gap1360) !important;
    }

    .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 {
        padding: 0 20px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridDesktop);
        grid-gap: var(--gapDesktop);
        row-gap: var(--gapDesktop) !important;
        column-gap: var(--gapDesktop) !important;
    }

    .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 {
        padding: 0 15px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridTabletLarge);
        grid-gap: var(--gapTabletLarge);
        row-gap: var(--gapTabletLarge) !important;
        column-gap: var(--gapTabletLarge) !important;
    }

    .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 {
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridTabletSmall);
        grid-gap: var(--gapTabletSmall);
        row-gap: var(--gapTabletSmall) !important;
        column-gap: var(--gapTabletSmall) !important;
    }

    .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 {
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridMobile);
        grid-gap: var(--gapMobile);
        row-gap: var(--gapMobile) !important;
        column-gap: var(--gapMobile) !important;
    }

    .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; 
    }
}


/* ===== Мобилка: выровнять высоту "кол-во" и кнопки в попапе ===== */
@media screen and (max-width: 480px) {
  /* Родительская строка */
  .t-store__prod-popup__btn-wrapper {
    align-items: stretch; /* растягиваем детей по высоте строки */
  }

  /* Счётчик и кнопка получают одинаковую высоту */
  .t-store__prod-popup__btn-wrapper .t-store__prod__quantity,
  .t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn {
    height: 50px !important;   /* при необходимости подгони 48–56px */
  }

  /* Убираем лишний вертикальный паддинг у кнопки,
     чтобы она не была выше из-за внутренних отступов */
  .t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center; /* центрируем текст и иконку по вертикали */
  }
}




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

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

    /*Иконка галочки при выбранной опции*/
    --iconChecked: url(https://static.tildacdn.com/tild3933-6264-4362-a561-383736663263/checkmark.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: #000000;
}


/* Сетка карточек */
.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: #000000;
    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="Российский сыр 50г"]):before{ 
    background-image: url(https://static.tildacdn.com/tild3536-3439-4566-b032-383133623665/_.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Моцарелла 50г"]):before{
    background-image: url(https://static.tildacdn.com/tild6666-6435-4231-b631-393737383061/_.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Пармезан 50г"]):before{
    background-image: url(https://static.tildacdn.com/tild3764-3834-4830-a339-346332623431/_.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Маринованные огурцы 30г"]):before{
    background-image: url(https://static.tildacdn.com/tild6661-3034-4537-b937-363964336436/_.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Лук Марс 10г"]):before{
    background-image: url(https://static.tildacdn.com/tild3533-3835-4766-b765-613061666464/_.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Шампиньоны 30г"]):before{
    background-image: url(https://static.tildacdn.com/tild3866-3863-4038-a366-313561333230/photo.png);
}

.js-product-multioption .t-checkbox__control:has(input[name="Свежие томаты 50г"]):before{
    background-image: url(https://static.tildacdn.com/tild3764-6530-4565-b136-613164316336/_.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;
}