/* ==========================================================================
   ЦЫПА — карточка товара в каталогах (T778)
   Работает сразу во всех блоках T778: селекторы не привязаны к rec ID.
   Область действия ограничена сеткой каталога (.js-store-grid-cont),
   попап товара и корзина не затрагиваются.
   ========================================================================== */

/* --- Палитра -------------------------------------------------------------
   Красный задаётся здесь и только здесь — им же пользуется
   cypa-product-card.css. До этого в каталоге стоял #d50a06, а в карточке
   #c6272d, и на одном экране они не совпадали.

   Взят #d50a06: это цвет, на котором построен весь сайт — герой,
   навигация, счётчик корзины, все Zero Block'и. Их значения лежат
   в инлайновых стилях блоков, снаружи не переопределяются.

   В Figma токен bg-brand равен #c6272d. Если решите привести сайт
   к макету — перекрасьте Zero Block'и в интерфейсе Тильды, а здесь
   поменяйте одну строку ниже.
   -------------------------------------------------------------------- */
:root {
  --cypa-red: #d50a06;        /* основной акцент: кнопки, метки */
  --cypa-red-hover: #b00805;  /* наведение */
  --cypa-red-deep: #7a1113;   /* цены и текст на светлом, токен bg-brand-strong */
  --cypa-cream: #fff0d8;      /* подложка под фото */
}

/* --- Сетка --------------------------------------------------------------
   Штатная сетка Тильды даёт колонки фиксированной ширины (t-col_4 = 360px)
   и поля по 20px, то есть зазор 40. В макете зазор 20, а поля страницы 20.
   Переводим контейнер каталога на flex — тогда геометрия совпадает точно:
     десктоп  1200 - 40 = 1160 контента, 3 колонки по 373.3, зазор 20
     планшет   768 - 40 =  728 контента, 2 колонки по  354,  зазор 20
     мобильный 360 - 40 =  320 контента, 2 колонки по  158,  зазор 4
   Зазор одинаковый по обеим осям. Тильда форсит row-gap:60px !important,
   поэтому вертикальный зазор задаём тоже через !important.
   -------------------------------------------------------------------- */
.t778 .js-store-grid-cont {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}
.t778 .js-store-grid-cont .t-store__card-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 20px !important;
  width: 100%;
  align-items: stretch;
}
.t778 .js-store-grid-cont .t-store__grid-separator { display: none !important; }
.t778 .js-store-grid-cont .t-store__card {
  width: calc((100% - 40px) / 3) !important;
  max-width: none !important;                     /* .t-col ставит max-width:360px и режет ширину */
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;                          /* .t-col даёт боковой паддинг 10px и раздувает просвет */
  float: none !important;
}
.t778 .js-store-grid-cont .t-store__card__wrap_all { height: 100%; }

/* Тильда включает контейнер 960 px уже при max-width:1200px включительно,
   а заголовки секций (Zero Block) остаются на 1160. На 961–1200 сетка
   оказывалась 920 px по центру, а заголовки — у левого края. Снимаем
   ограничение на всём диапазоне: контент = ширина экрана минус поля 20. */
@media screen and (max-width: 1200px) {
  .t778 .js-store-grid-cont { max-width: 100% !important; }
}

@media screen and (max-width: 960px) {
  .t778 .js-store-grid-cont .t-store__card { width: calc((100% - 20px) / 2) !important; }
}

/* На мобильных зазор 4px: 320 - 4 = 316 -> колонки по 158 */
@media screen and (max-width: 640px) {
  .t778 .js-store-grid-cont .t-store__card-list {
    column-gap: 4px;
    row-gap: 4px !important;
  }
  .t778 .js-store-grid-cont .t-store__card { width: calc((100% - 4px) / 2) !important; }
}

/* --- Карточка ------------------------------------------------------------ */
.t778 .js-store-grid-cont .t-store__card__wrap_all {
  padding: 12px !important;
  border-radius: 24px !important;
  background-color: var(--uc-color-color-bcxElN, #ffffff) !important;
  box-shadow: 0 3px 12px rgba(122, 18, 20, .08) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.t778 .js-store-grid-cont .t-store__card__wrap_all:hover {
  box-shadow: 0 8px 20px rgba(122, 18, 20, .14) !important;
  transform: translateY(-2px);
}

/* --- Фото на кремовой подложке ------------------------------------------
   Контейнер квадратный: фотографии блюд сняты 800×800, поэтому при
   соотношении 1:1 они заполняют плитку целиком — ничего не обрезается
   и не остаётся пустых кремовых полей по бокам.

   cover, а не contain: в макете фото заполняет плитку под обрез. Для
   квадратного исходника в квадратном контейнере разницы нет, но если
   позже добавят кадр другой пропорции — плитка не «поедет».

   Кремовая рамка 6 px по периметру остаётся видимой за счёт inset.
   -------------------------------------------------------------------- */
.t778 .js-store-grid-cont .t-store__card__imgwrapper {
  padding-bottom: 100% !important;
  border-radius: 18px !important;
  background-color: var(--cypa-cream);
  overflow: hidden;
}
.t778 .js-store-grid-cont .t-store__card__bgimg {
  background-size: cover !important;
  background-position: 50% 50%;
  top: 6px; right: 6px; bottom: 6px; left: 6px;
  border-radius: 12px;
}

/* --- Плитка без фотографии -----------------------------------------------
   Когда у товара нет картинки, Тильда не рисует .t-store__card__imgwrapper
   вовсе — остаётся пустая ссылка , и плитка схлопывается до текста
   (158 px рядом с соседями по 467). Пока фото не пришли (16 позиций),
   рисуем на месте картинки кремовый квадрат с логотипом сайта. Два правила:
   :empty — для точного случая пустой ссылки, :has() — страховка, если
   Тильда положит внутрь пробел или служебный узел.
   -------------------------------------------------------------------- */
.t778 .js-store-grid-cont .t-store__card__wrap_all > a:first-child:empty,
.t778 .js-store-grid-cont .t-store__card__wrap_all > a:first-child:not(:has(.t-store__card__imgwrapper)) {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background-color: var(--cypa-cream);
  background-image: url("https://static.tildacdn.pub/tild6136-6337-4364-b163-346466616636/logo.svg"); /* логотип из шапки сайта */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50% auto;
  opacity: .9;
}
@media screen and (max-width: 640px) {
  .t778 .js-store-grid-cont .t-store__card__wrap_all > a:first-child:empty,
  .t778 .js-store-grid-cont .t-store__card__wrap_all > a:first-child:not(:has(.t-store__card__imgwrapper)) {
    border-radius: 14px;
  }
}

/* --- Бейдж «Метка» ------------------------------------------------------- */
.t778 .js-store-grid-cont .t-store__card__mark-wrapper {
  display: flex;
  width: max-content;
  max-width: calc(100% - 16px);
  top: 8px; left: 8px; right: auto;
}
.t778 .js-store-grid-cont .t-store__card__mark {
  display: flex; align-items: center;
  flex: 0 0 auto;
  width: auto !important;                         /* базовый CSS Тильды жёстко ставит width:50px */
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 15px !important;
  background-color: var(--cypa-red) !important;
  color: #ffffff !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Текстовый блок: колонка, цена прижата к низу ------------------------ */
.t778 .js-store-grid-cont .t-store__card__wrap_txt-and-btns { position: relative; }
.t778 .js-store-grid-cont .store__card__wrap_txt-and-opts {
  display: flex; flex-direction: column;
  padding: 12px 0 0 !important;
}
.t778 .js-store-grid-cont .store__card__wrap_txt-and-opts > a {
  display: flex; flex-direction: column; flex: 1;
  text-decoration: none;
}
.t778 .js-store-grid-cont .t-store__card__textwrapper {
  display: flex; flex-direction: column; flex: 1;
  padding: 0 !important;
  margin-bottom: 0;
}
.t778 .js-store-grid-cont .t-store__card__title {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 22px !important;
  font-weight: 800 !important;
}
.t778 .js-store-grid-cont .t-store__card__descr {
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

/* --- Строка «цена + кнопка» --------------------------------------------- */
.t778 .js-store-grid-cont .t-store__card__price-wrapper {
  display: flex; align-items: center;
  margin-top: auto !important;
  padding-top: 12px;
  padding-right: 56px;
  min-height: 36px;
  box-sizing: content-box;
}
.t778 .js-store-grid-cont .t-store__card__price {
  display: flex; align-items: baseline; gap: 0;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 800 !important;
}
/* «295 ₽», а не «295  ₽»: Тильда даёт валюте свой отступ слева. */
.t778 .js-store-grid-cont .t-store__card__price-currency {
  margin-left: .25em !important;
  padding-left: 0 !important;
}
.t778 .js-store-grid-cont .t-store__card__btns-wrapper {
  position: absolute;
  right: 0; bottom: 0; left: auto; top: auto;
  width: 44px !important;                         /* без явной ширины блок растягивается и накрывает цену */
  justify-content: flex-end;
  padding: 0 !important;
  margin: 0 !important;
}
.t778 .js-store-grid-cont .js-store-prod-btn2 {
  display: flex !important; align-items: center; justify-content: center;
  width: 44px !important; height: 36px !important;
  min-width: 0 !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 18px !important;
  border-style: none !important;
  --border-width: 0px;
  background-color: var(--cypa-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  position: relative;
  transition: background-color .2s ease, transform .1s ease;
}
.t778 .js-store-grid-cont .js-store-prod-btn2:hover { background-color: var(--cypa-red-hover) !important; }
.t778 .js-store-grid-cont .js-store-prod-btn2:active { transform: scale(.94); }

/* На мобильных Тильда дописывает кнопке рамку 1px правилом с id-селектором
   и !important (настройки блока для экрана 640). Перебиваем той же силой:
   #allrecords даёт нужную специфичность, иначе вокруг плюса тёмное кольцо. */
#allrecords .t778 .js-store-grid-cont .js-store-prod-btn2 {
  border: 0 !important;
  border-width: 0 !important;
  outline: 0 !important;
}

/* Плюс рисуем двумя полосками 14x2, а не текстовым глифом: глиф
   набирается шрифтом кнопки и сидит не по центру.
   По макету: иконка 14x14, обводка 2px, цвет icon/inverse (белый). */
.t778 .js-store-grid-cont .js-store-prod-btn2 .t-btnflex__text {
  font-size: 0 !important;
  line-height: 0 !important;
}
.t778 .js-store-grid-cont .js-store-prod-btn2::before,
.t778 .js-store-grid-cont .js-store-prod-btn2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  transform: translate(-50%, -50%);
}
.t778 .js-store-grid-cont .js-store-prod-btn2::before { width: 14px; height: 2px; }
.t778 .js-store-grid-cont .js-store-prod-btn2::after  { width: 2px;  height: 14px; }

/* --- Адаптив ------------------------------------------------------------- */
@media screen and (max-width: 960px) {
  .t778 .js-store-grid-cont .t-store__card__btn { width: 44px !important; }
}
@media screen and (max-width: 640px) {
  .t778 .js-store-grid-cont .t-store__card__wrap_all { padding: 10px !important; border-radius: 20px !important; }
  .t778 .js-store-grid-cont .t-store__card__imgwrapper { border-radius: 14px !important; }
  .t778 .js-store-grid-cont .t-store__card__title { font-size: 16px !important; line-height: 20px !important; }
  .t778 .js-store-grid-cont .t-store__card__descr { font-size: 13px !important; line-height: 18px !important; margin-top: 8px !important; }
  /* В макете 360 описание в одну-две строки; полный текст — в карточке.
     Без ограничения плитки вытягивались до 5 строк. */
  .t778 .js-store-grid-cont .t-store__card__descr {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .t778 .js-store-grid-cont .t-store__card__mark { height: 26px !important; font-size: 11px !important; padding: 0 10px !important; border-radius: 13px !important; }
}

/* --- Акцентная красная карточка ------------------------------------------
   Тильда не даёт классов по «Метке», но кладёт на карточку data-product-uid.
   Чтобы сделать блюдо акцентным, подставьте его uid вместо 000000000000
   и раскомментируйте блок.

.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .t-store__card__wrap_all {
  background-color: var(--cypa-red) !important;
}
.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .t-store__card__imgwrapper {
  background-color: #ffffff;
}
.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .t-store__card__title,
.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .t-store__card__descr,
.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .t-store__card__price {
  color: #ffffff !important;
}
.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .t-store__card__mark {
  background-color: var(--cypa-red-deep) !important;
}
.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .js-store-prod-btn2,
.t778 .js-store-grid-cont .t-store__card[data-product-uid="000000000000"] .js-store-prod-btn2 .t-btnflex__text {
  background-color: #ffffff !important;
  color: var(--cypa-red) !important;
}
--------------------------------------------------------------------------- */

/* ==========================================================================
   Навигация по меню — горизонтальный скролл чипсов (Zero Block #rec3422906801)
   Правило привязано к конкретному блоку: Zero Block раскладывает элементы
   абсолютным позиционированием, и артборд по умолчанию режет всё за краем
   (overflow:hidden). Ширина ряда уже посчитана Тильдой — 1748px,
   нужно только разрешить прокрутку.
   Блок показывается лишь на ширинах <= 640px (t-screenmax-640px),
   поэтому медиазапрос не нужен.
   ========================================================================== */
#rec3422906801 .t396__artboard {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;        /* инерционная прокрутка на старых iOS */
  scrollbar-width: none;                    /* Firefox */
  -ms-overflow-style: none;                 /* старый Edge */
}
#rec3422906801 .t396__artboard::-webkit-scrollbar { display: none; }

/* Блок прилипает к верху при прокрутке: доходим до него — он фиксируется
   под мобильной шапкой и остаётся видимым, пока идут каталоги.
   71px — измеренная высота фиксированной .tmenu-mobile (логотип 120x40).
   z-index ниже шапки (у неё 991), но выше карточек каталога (у них auto). */
@media screen and (max-width: 640px) {
  #rec3422906801 {
    position: sticky !important;
    top: 71px;
    z-index: 50;
  }

  /* Отцепление в конце каталогов делает скрипт из cypa-sticky-nav.js:
     контейнер для sticky — это #allrecords, то есть вся страница,
     и средствами CSS закончить липкость раньше нельзя.
     Скрипт двигает top этого блока, поэтому здесь top намеренно
     без !important — иначе инлайновое значение не применится. */
}

/* ==========================================================================
   ===== CYPA PRODUCT CARD: BEGIN ============================================
   Карточка товара по макету Figma «Цыпа v.4», node 2608:11963.
   Брейкпоинты макета: 1200 / 768 / 360.

   Работает в паре с cypa-product-card.js. Без него не будет плашки КБЖУ,
   чипсов вместо выпадающих списков и заголовка «О продукте»: Тильда
   отдаёт характеристики одной строкой «Ккал: 169», а варианты — тегом
   <select>, и разложить это одним CSS нельзя.

   Вставлять ПОСЛЕ cypa-catalog.css. Файл самостоятельный: чтобы откатить,
   удалите всё между маркерами BEGIN и END.
   ========================================================================== */

.js-store-product {
  /* Токены из Figma. Держим локально, чтобы не зависеть от того,
     какие переменные Тильда сгенерирует для темы сайта. */
  --cypa-text: #2a241f;
  --cypa-text-muted: #776f66;
  /* Палитра приходит из cypa-catalog.css, он подключается первым.
     Значения после запятой — на случай, если карточку открыли там,
     где каталога нет. */
  --cypa-text-brand: var(--cypa-red-deep, #7a1113);
  --cypa-brand: var(--cypa-red, #d50a06);
  --cypa-brand-hover: var(--cypa-red-hover, #b00805);
  --cypa-surface: #ffffff;
  --cypa-subtle: #fff9f0;
  --cypa-card: #f9e9da;
  --cypa-border: #dccfbd;
  --cypa-radius: 18px;
  --cypa-radius-sm: 14px;
  --cypa-shadow: 0 3px 12px rgba(122, 18, 20, .08);
  --cypa-font: 'Manrope', Arial, sans-serif;

  /* Размеры, меняющиеся по брейкпоинтам. Ниже переопределяются. */
  --cypa-title: 32px;
  --cypa-title-lh: 36px;
  --cypa-price: 24px;
  --cypa-price-lh: 29px;
  --cypa-label: 14px;
  --cypa-label-lh: 18px;
  --cypa-body: 14px;
  --cypa-body-lh: 20px;
  --cypa-gap: 20px;
  --cypa-inset: 32px;
  --cypa-btn-h: 56px;
}

/* --- Оболочка карточки ---------------------------------------------------
   В макете фото и правая колонка лежат на одной кремовой плашке со
   скруглением 18 px.

   Товар открывается двумя способами, и вложенность у них разная:
     страница — .t-store__product-snippet > .t-container > div > колонки
     попап    — .t-store__product-popup            > div > колонки
   Общий у них класс .js-store-product, на него и опираемся, а плашку
   рисуем на безымянной обёртке — единственном элементе, который в обоих
   случаях лежит прямо над колонками.
   -------------------------------------------------------------------- */
.js-store-product .t-container {
  margin-left: auto;
  margin-right: auto;
}

.js-store-product .t-container > div,
.js-store-product.t-store__product-popup > div {
  display: flex;
  align-items: stretch;
  background-color: var(--cypa-card);
  border-radius: var(--cypa-radius);
  box-shadow: var(--cypa-shadow);
  overflow: hidden;
}

/* max-width колонкам не снимаем: именно им Тильда держит ширину сетки.
   Без него трек слайдера (все кадры в ряд, 2240 px) распирает колонку
   и карточка растягивается на всю длину ленты. */
.js-store-product .t-store__prod-popup__col-left,
.js-store-product .t-store__prod-popup__col-right {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  max-width: 50%;
}

.js-store-product .t-store__prod-popup__col-left {
  flex: 0 0 50%;
  overflow: hidden;
}

/* --- Галерея -------------------------------------------------------------
   Фотографии сняты квадратом 800×800, поэтому и слот держим квадратным:
   кадр заполняет его целиком, ничего не обрезая. Так же сделано в плитке
   каталога (cypa-catalog.css).
   -------------------------------------------------------------------- */
.js-store-product .t-slds,
.js-store-product .t-slds__main,
.js-store-product .t-slds__container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Высоту слайдам Тильда проставляет скриптом по ширине кадра, поэтому
   фото получалось квадратным и не доставало до низа колонки — под ним
   оставалась кремовая полоса. Растягиваем всю цепочку слайдера на
   высоту колонки; кадр обрезается по центру, как в макете.
   Ширину здесь не трогаем: ею держится лента кадров. */
.js-store-product .t-store__prod-popup__col-left {
  display: flex;
  flex-direction: column;
}

.js-store-product .t-slds { flex: 1 1 auto; }

.js-store-product .t-slds__main,
.js-store-product .t-slds__container,
.js-store-product .t-slds__items-wrapper,
.js-store-product .t-slds__item,
.js-store-product .t-slds__wrapper,
.js-store-product .t-slds__imgwrapper {
  height: 100% !important;
}

/* Пропорция 1:1 — страховка для раскладок, где высоту колонке задать
   нечем. В две колонки высота приходит от растягивания (align-items:
   stretch) и пропорция игнорируется; когда колонки встают друг под
   друга, растягивать нечего — и квадрат не даёт фото схлопнуться в ноль.
   Без этого на мобильных картинка пропадала совсем. */
.js-store-product .t-store__prod-popup__col-left {
  aspect-ratio: 1 / 1;
}

/* Товар без фотографий: Тильда не рисует слайдер вовсе, и половина
   карточки оставалась пустой кремовой заливкой. Класс ставит скрипт. */
.js-store-product.cypa-pc__no-photo .t-store__prod-popup__col-left {
  display: none;
}

.js-store-product.cypa-pc__no-photo .t-store__prod-popup__col-right {
  max-width: 100%;
}

/* Квадрат кадру задаёт инлайновый padding-bottom: 100 % при нулевой
   высоте — приём «пропорция через отступ». Гасим его и задаём высоту
   явно, иначе фото так и останется квадратным. */
.js-store-product .t-slds__bgimg {
  background-size: cover !important;
  background-position: 50% 50%;
  height: 100% !important;
  padding-bottom: 0 !important;
}

/* Стрелок перелистывания в макете нет: кадры переключаются
   выбором варианта и миниатюрами. */
.js-store-product .t-slds__arrow_container { display: none !important; }

/* Миниатюр под фото в макете нет: кадр переключают плитки вариантов.
   Раньше миниатюры лежали поверх фото, но правило красило рамку всем
   сразу, и обе выглядели активными. Прячем прозрачностью, оставляя
   на прежнем месте внутри кадра: скрипт читает у миниатюр адреса
   картинок для плиток вариантов, а ленивая загрузка Тильды грузит их
   только когда они попадают во вьюпорт. Уведённые за экран миниатюры
   не грузились, и плитки оставались без фото. */
.js-store-product .t-slds__thumbsbullet-wrapper {
  position: absolute !important;
  left: 0; right: 0; bottom: 16px;
  z-index: 2;
  opacity: 0 !important;
  pointer-events: none !important;
}

.js-store-product .t-slds__thumbsbullet {
  width: 44px !important;
  height: 44px !important;
  overflow: hidden;
}

/* Подпись «← Назад» над попапом Тильда рисует мелким системным шрифтом
   в углу и дублирует крестик. На десктопе прячем; на мобильном она же
   становится верхней панелью со стрелкой — там нужна. */
@media screen and (min-width: 641px) {
  .t-store__product-popup .t-popup__close-text,
  .t-store__prod-popup__close-txt-wr,
  .t-store__prod-popup__close-txt { display: none !important; }
}

/* --- Правая колонка ------------------------------------------------------
   Порядок в вёрстке Тильды: заголовок, цена, опции, кнопка, текст.
   В макете кнопка стоит последней, под описанием и КБЖУ, — переставляем
   через flex order, не трогая разметку.
   -------------------------------------------------------------------- */
.js-store-product .t-store__prod-popup__col-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--cypa-gap);
  padding: 20px !important;
  min-width: 0;
}

.js-store-product .t-store__prod-popup__title-wrapper { order: 1; }
.js-store-product .js-store-price-wrapper { order: 2; }
.js-store-product .js-product-controls-wrapper { order: 3; }
.js-store-product .js-store-prod-text { order: 4; }
.js-store-product .t-store__prod-popup__btn-wrapper { order: 5; }
.js-store-product .t-store__prod-popup__links-wrapper { display: none; }

/* Тильда ставит колонкам собственные отступы между блоками —
   гасим, расстояние задаёт gap контейнера. */
.js-store-product .t-store__prod-popup__col-right > * {
  margin: 0 !important;
}

/* --- Заголовок и цена ---------------------------------------------------- */
.js-store-product .t-store__prod-popup__name {
  margin: 0 0 10px !important;
  font-family: var(--cypa-font) !important;
  font-size: var(--cypa-title) !important;
  line-height: var(--cypa-title-lh) !important;
  font-weight: 800 !important;
  color: var(--cypa-text) !important;
}

/* Артикул и бренд в макете не показываются. */
.js-store-product .t-store__prod-popup__sku,
.js-store-product .t-store__prod-popup__brand { display: none; }

.js-store-product .t-store__prod-popup__price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.js-store-product .t-store__prod-popup__price,
.js-store-product .t-store__prod-popup__price-value,
.js-store-product .t-store__prod-popup__price-currency {
  font-family: var(--cypa-font) !important;
  font-size: var(--cypa-price) !important;
  line-height: var(--cypa-price-lh) !important;
  font-weight: 800 !important;
  color: var(--cypa-text-brand) !important;
}

.js-store-product .t-store__prod-popup__price_old,
.js-store-product .t-store__prod-popup__price_old * {
  font-size: 16px !important;
  color: var(--cypa-text-muted) !important;
  font-weight: 500 !important;
}

/* --- Варианты и опции ----------------------------------------------------
   Тильда отдаёт их как . JS дорисовывает рядом чипсы и держит
   select в синхроне — он остаётся источником правды для корзины,
   поэтому просто прячем его, а не удаляем.
   -------------------------------------------------------------------- */
.js-store-product .js-product-controls-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--cypa-gap);
}

.js-store-product .t-product__option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
}

.js-store-product .t-product__option-title {
  font-family: var(--cypa-font) !important;
  font-size: var(--cypa-label) !important;
  line-height: var(--cypa-label-lh) !important;
  font-weight: 700 !important;
  color: var(--cypa-text) !important;
  margin: 0 !important;
}

/* Список остаётся в DOM ради логики Тильды, но убран с глаз.
   display:none ломает часть браузерных событий, поэтому прячем размером. */
.js-store-product .cypa-pc__has-chips select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* Стрелку «вниз» Тильда рисует псевдоэлементом обёртки. Список мы
   спрятали, а стрелка иначе осталась бы висеть поверх последнего чипса. */
.js-store-product .cypa-pc__has-chips .t-product__option-variants {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.js-store-product .cypa-pc__has-chips .t-product__option-variants::before,
.js-store-product .cypa-pc__has-chips .t-product__option-variants::after {
  content: none !important;
  display: none !important;
}

.cypa-pc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cypa-pc__chip {
  flex: 1 1 auto;
  min-width: 120px;
  /* Одинокий чипс в последнем ряду («Без соуса» шестым) иначе
     растягивается на всю строку. Половина ширины — предел. */
  max-width: calc(50% - 5px);
  padding: 14px 18px;
  border: 1px solid var(--cypa-border);
  border-radius: var(--cypa-radius-sm);
  background-color: var(--cypa-surface);
  font-family: var(--cypa-font);
  font-size: var(--cypa-label);
  line-height: var(--cypa-label-lh);
  font-weight: 700;
  color: var(--cypa-text);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.cypa-pc__chip:hover { border-color: var(--cypa-brand); }

.cypa-pc__chip.is-active {
  border: 2px solid var(--cypa-brand);
  color: var(--cypa-text-brand);
  /* компенсируем прибавку рамки, чтобы чипсы не прыгали */
  padding: 13px 17px;
}

/* Видимый фокус с клавиатуры: Тильда снимает outline у всего. */
.cypa-pc__chip:focus-visible,
.js-store-product .t-checkbox__control:focus-within,
.js-store-product .t-store__prod-popup__btn:focus-visible,
#allrecords .t778 .js-store-grid-cont .js-store-prod-btn2:focus-visible,
#allrecords .t778 .js-store-grid-cont .t-store__card__wrap_all a:focus-visible {
  outline: 2px solid var(--cypa-brand, #d50a06) !important;
  outline-offset: 2px !important;
}

/* --- Чипс варианта с фото и ценой ----------------------------------------
   Плитка из макета: слева квадрат с фото, справа название блюда и подпись
   вида «5 шт. · 330 ₽». Собирается скриптом только для вариантов товара —
   у дополнительных опций фото и цены нет, там остаются простые чипсы.
   -------------------------------------------------------------------- */
.cypa-pc__chip_rich {
  display: flex;
  align-items: center;
  gap: var(--cypa-chip-gap, 4px);
  min-height: var(--cypa-chip-h, 52px);
  padding: 0;
  overflow: hidden;
}

/* Рамка активного чипса съедает по пикселю с каждой стороны, но здесь
   компенсировать нечего: внутренних отступов у плитки нет. */
.cypa-pc__chip_rich.is-active { padding: 0; }

.cypa-pc__chip-thumb {
  flex: 0 0 var(--cypa-chip-thumb, 48px);
  align-self: stretch;
  background-color: var(--cypa-cream, #fff0d8);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 12px 0 0 12px;
}

.cypa-pc__chip-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;
  text-align: center;
}

.cypa-pc__chip-title,
.cypa-pc__chip-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.cypa-pc__chip-title {
  font-size: var(--cypa-chip-text, 14px);
  font-weight: 700;
  color: var(--cypa-text);
}

.cypa-pc__chip-sub {
  font-size: var(--cypa-chip-text, 14px);
  font-weight: 600;
  color: var(--cypa-text-muted);
}

/* Активный чипс перекрашивает только подпись-название — цена и вес
   остаются приглушёнными, как в макете. */
.cypa-pc__chip_rich.is-active .cypa-pc__chip-title { color: var(--cypa-text-brand); }

/* --- Опции с множественным выбором ---------------------------------------
   В сет входит несколько напитков и соусов, поэтому такие опции Тильда
   рисует не списком, а чекбоксами. Чипсами их не заменяем: галочки
   честнее показывают, что выбрать можно сразу несколько. Приводим их
   к виду карточки — те же рамки, скругления и шрифт.
   -------------------------------------------------------------------- */
.js-store-product .t-product__checkbox-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.js-store-product .t-checkbox__control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 14px;
  background-color: var(--cypa-surface);
  border: 1px solid var(--cypa-border);
  border-radius: var(--cypa-radius-sm);
  font-family: var(--cypa-font) !important;
  font-size: var(--cypa-label) !important;
  line-height: var(--cypa-label-lh) !important;
  font-weight: 700 !important;
  color: var(--cypa-text) !important;
  cursor: pointer;
  transition: border-color .15s ease;
}

.js-store-product .t-checkbox__control:hover { border-color: var(--cypa-brand); }

.js-store-product .t-checkbox__indicator {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  border: 2px solid var(--cypa-border);
  border-radius: 6px;
  background-color: var(--cypa-surface);
  transition: background-color .15s ease, border-color .15s ease;
}

.js-store-product .t-checkbox:checked + .t-checkbox__indicator {
  border-color: var(--cypa-brand);
  background-color: var(--cypa-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.5L5.5 10L11 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* --- Текстовый блок ------------------------------------------------------ */
.js-store-product .js-store-prod-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--cypa-font);
}

/* Описание, плашка КБЖУ, хранение и аллергены лежат внутри одного
   блока Тильды, а у него интервалов между абзацами нет — свои margin
   мы у них сняли. Поэтому расстояние задаём здесь, иначе всё слипается. */
.js-store-product .js-store-prod-all-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Плашке даём чуть больше воздуха, чем остальным строкам: она
   графическая и не должна прилипать к тексту сверху и снизу. */
.js-store-product .cypa-pc__nutrition {
  margin: 4px 0;
}

/* Характеристики скрипт переносит в плашку, и родной контейнер
   остаётся пустым — без этого он съедал бы ещё один интервал. */
.js-store-product .js-store-prod-all-charcs:empty { display: none; }

.cypa-pc__about-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--cypa-label);
  line-height: var(--cypa-label-lh);
  font-weight: 700;
  color: var(--cypa-text);
}

/* Шеврон нужен только в мобильном аккордеоне. */
.cypa-pc__about-head::after {
  content: '';
  display: none;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 6.75L9 12L14.25 6.75' stroke='%232a241f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% / contain;
  transition: transform .2s ease;
}

.js-store-product .cypa-pc__about {
  margin: 0 !important;
  padding-left: var(--cypa-inset);
  font-size: var(--cypa-body) !important;
  line-height: var(--cypa-body-lh) !important;
  font-weight: 500 !important;
  color: var(--cypa-text-muted) !important;
}

/* --- Плашка КБЖУ ---------------------------------------------------------
   Собирается скриптом из Ккал: 169</p>: верхняя строка — основа
   расчёта, нижняя — четыре колонки со значением и подписью.
   -------------------------------------------------------------------- */
.cypa-pc__nutrition {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cypa-pc__basis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--cypa-inset);
  background-color: var(--cypa-surface);
  border-radius: var(--cypa-radius) var(--cypa-radius) 0 0;
  white-space: nowrap;
}

.cypa-pc__basis-label {
  font-size: var(--cypa-body);
  line-height: var(--cypa-body-lh);
  font-weight: 500;
  color: var(--cypa-text-muted);
}

.cypa-pc__basis-value {
  font-size: 16px;
  line-height: 23px;
  font-weight: 700;
  color: var(--cypa-text);
}

.cypa-pc__specs {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 14px;
  background-color: var(--cypa-surface);
  border-radius: 0 0 var(--cypa-radius) var(--cypa-radius);
  text-align: center;
}

/* Если основы расчёта нет, плашка состоит из одних колонок —
   скругляем её целиком. */
.cypa-pc__nutrition_no-basis .cypa-pc__specs {
  border-radius: var(--cypa-radius);
}

.cypa-pc__spec {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cypa-pc__spec-value {
  font-size: 16px;
  line-height: 23px;
  font-weight: 700;
  color: var(--cypa-text);
}

.cypa-pc__spec-label {
  font-size: var(--cypa-body);
  line-height: var(--cypa-body-lh);
  font-weight: 500;
  color: var(--cypa-text-muted);
}

/* Габариты и вес для доставки в карточке не нужны. */
.js-store-product .js-store-prod-dimensions,
.js-store-product .js-store-prod-weight { display: none !important; }

/* --- Хранение и аллергены ------------------------------------------------ */
/* Отступ под иконку не может быть меньше её ширины с зазором: иконка
   20 px плюс 10 px просвета. На узких экранах --cypa-inset падает до
   8 px, и без max() текст наезжал бы на часы и восклицательный знак. */
.js-store-product .cypa-pc__shelf,
.js-store-product .cypa-pc__allergens {
  position: relative;
  margin: 0 !important;
  padding-left: max(var(--cypa-inset), 30px);
  min-height: 20px;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  color: var(--cypa-text-muted) !important;
}

.js-store-product .cypa-pc__shelf::before,
.js-store-product .cypa-pc__allergens::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 20px; height: 20px;
}

.js-store-product .cypa-pc__shelf::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' stroke='%23776f66' stroke-width='1.5'/%3E%3Cpath d='M10 5.83333V10L12.5 11.6667' stroke='%23776f66' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

.js-store-product .cypa-pc__allergens::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 18.3333C14.5833 18.3333 18.3333 14.5833 18.3333 10C18.3333 5.41667 14.5833 1.66667 10 1.66667C5.41667 1.66667 1.66667 5.41667 1.66667 10C1.66667 14.5833 5.41667 18.3333 10 18.3333Z' stroke='%23d50a06' stroke-width='1.5'/%3E%3Cpath d='M10 6.66667V10.8333' stroke='%23d50a06' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M9.99542 13.3333H10.0029' stroke='%23d50a06' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

.js-store-product .cypa-pc__allergens a {
  color: var(--cypa-text) !important;
  text-decoration: underline;
}

/* --- Кнопка «В корзину» -------------------------------------------------- */
.js-store-product .t-store__prod-popup__btn-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.js-store-product .t-store__prod-popup__btn {
  flex: 1 1 auto;
  height: var(--cypa-btn-h) !important;
  min-width: 0;
  padding: 0 24px !important;
  border: none !important;
  border-radius: var(--cypa-radius) !important;
  background-color: var(--cypa-brand) !important;
  font-family: var(--cypa-font) !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  transition: background-color .2s ease;
}

.js-store-product .t-store__prod-popup__btn:hover {
  background-color: var(--cypa-brand-hover) !important;
}

/* --- Степпер количества ---------------------------------------------------
   Включается в настройках блока каталога («Карточка товара»). Тильда
   рисует его серой рамкой 108×32 с минусом и плюсом из градиентов.
   В макете это пилюля высотой с кнопку, на кремовой подложке, слева
   от «В корзину»: 140×56 на десктопе, 120×46 на мобильном.
   Знаки рисуем теми же градиентами, только своим цветом и размером;
   ширину и высоту Тильда задаёт инлайновыми правилами — перебиваем.
   -------------------------------------------------------------------- */
.js-store-product .t-store__prod__quantity {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: var(--cypa-qty-w, 140px) !important;
  height: var(--cypa-btn-h) !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  /* В макете концы пилюли скруглены полностью. */
  border-radius: calc(var(--cypa-btn-h) / 2) !important;
  background-color: var(--cypa-subtle) !important;
  font-family: var(--cypa-font) !important;
}

.js-store-product .t-store__prod__quantity__minus-wrapper,
.js-store-product .t-store__prod__quantity__plus-wrapper {
  flex: 0 0 36px;
  width: 36px !important;
  height: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease;
}

.js-store-product .t-store__prod__quantity__minus-wrapper:hover,
.js-store-product .t-store__prod__quantity__plus-wrapper:hover {
  background-color: rgba(122, 18, 20, .06);
}

.js-store-product .t-store__prod__quantity__minus,
.js-store-product .t-store__prod__quantity__plus {
  display: block;
  width: 16px !important;
  height: 16px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
}

.js-store-product .t-store__prod__quantity__minus {
  background-image: linear-gradient(var(--cypa-text), var(--cypa-text)) !important;
  background-size: 14px 2px !important;
}

.js-store-product .t-store__prod__quantity__plus {
  background-image:
    linear-gradient(var(--cypa-text), var(--cypa-text)),
    linear-gradient(var(--cypa-text), var(--cypa-text)) !important;
  background-size: 14px 2px, 2px 14px !important;
}

.js-store-product .t-store__prod__quantity-input {
  flex: 1 1 auto;
  width: 40px !important;
  min-width: 0;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  font-family: var(--cypa-font) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: var(--cypa-text) !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.js-store-product .t-store__prod__quantity-input::-webkit-outer-spin-button,
.js-store-product .t-store__prod__quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.js-store-product .t-store__prod__quantity-input:focus-visible {
  outline: 2px solid var(--cypa-brand);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Тильда верстает подпись кнопки таблицей — снимаем её собственные
   размеры, иначе высота кнопки задаётся содержимым таблицы. */
.js-store-product .t-store__prod-popup__btn table,
.js-store-product .t-store__prod-popup__btn tbody,
.js-store-product .t-store__prod-popup__btn tr,
.js-store-product .t-store__prod-popup__btn td {
  height: auto !important;
  color: inherit !important;
  font: inherit !important;
}

/* ==========================================================================
   Планшет — 768
   ========================================================================== */
@media screen and (max-width: 960px) {
  .js-store-product {
    --cypa-title: 28px;
    --cypa-title-lh: 32px;
    --cypa-price: 22px;
    --cypa-price-lh: 26px;
    --cypa-inset: 20px;
    --cypa-btn-h: 52px;
    --cypa-qty-w: 128px;
  }

  /* На планшете карточка выше фото, и растянутый на всю высоту кадр
     обрезался бы почти до полосы. Оставляем квадрат сверху, как
     в макете, — остальное занимает кремовый фон. */
  .js-store-product .t-store__prod-popup__col-left {
    flex-basis: 45%;
    max-width: 45%;
    align-self: flex-start;
  }
  .js-store-product .t-store__prod-popup__col-right { max-width: 55%; }

  /* Два чипса в ряд. Сеткой, а не флексом: при базе calc(50% - 5px)
     сумма ровно равна ширине строки, и на дробных пикселях второй
     чипс срывается на новую строку. */
  .cypa-pc__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* В сетке ограничение половиной ширины (для одинокого чипса на
     десктопе) не нужно: ячейка сама задаёт ширину. */
  .cypa-pc__chip { min-width: 0; max-width: none; }

  .js-store-product {
    --cypa-chip-h: 48px;
    --cypa-chip-thumb: 44px;
    --cypa-chip-text: 13px;
  }

  .cypa-pc__specs { gap: 8px; padding: 8px 12px; }
}

/* ==========================================================================
   Мобильный — 360
   В макете фото уходит наверх во всю ширину, а «О продукте» сворачивается
   в аккордеон. Разворотом управляет JS, здесь только внешний вид.
   ========================================================================== */
@media screen and (max-width: 640px) {
  .js-store-product {
    --cypa-title: 24px;
    --cypa-title-lh: 28px;
    --cypa-price: 20px;
    --cypa-price-lh: 24px;
    --cypa-label: 13px;
    --cypa-label-lh: 17px;
    --cypa-body: 12px;
    --cypa-body-lh: 16px;
    --cypa-inset: 8px;
    --cypa-btn-h: 46px;
    --cypa-qty-w: 120px;
  }

  .js-store-product .t-container > div,
  .js-store-product.t-store__product-popup > div {
    flex-direction: column;
  }

  .js-store-product .t-store__prod-popup__col-left,
  .js-store-product .t-store__prod-popup__col-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .js-store-product .t-store__prod-popup__col-right {
    padding: 20px 10px !important;
  }

  .cypa-pc__chip {
    min-width: 0;
    font-size: 12px;
  }

  .js-store-product .t-product__checkbox-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Плитка варианта на узком экране: 45 px высотой, фото 41 px,
     подписи 12 px — размеры из мобильного макета. */
  .js-store-product {
    --cypa-chip-h: 45px;
    --cypa-chip-thumb: 41px;
    --cypa-chip-text: 12px;
  }

  /* Название товара в плитке шириной 145 px не помещается
     («Куриные но…»), а оно и так стоит заголовком выше. Оставляем
     подпись варианта и цену, подпись делаем основной строкой. */
  .cypa-pc__chip-title { display: none; }
  .cypa-pc__chip-sub {
    font-weight: 700;
    color: var(--cypa-text);
    font-size: 13px;
  }
  .cypa-pc__chip_rich.is-active .cypa-pc__chip-sub { color: var(--cypa-text-brand); }

  .cypa-pc__basis,
  .cypa-pc__specs { padding-left: 20px; padding-right: 20px; }

  .cypa-pc__specs { gap: 6px; }

  .cypa-pc__spec-value { font-size: 15px; line-height: 20px; }
  .cypa-pc__spec-label { font-size: 12px; line-height: 16px; }

  /* Аккордеон «О продукте» */
  .cypa-pc__about-head {
    cursor: pointer;
    user-select: none;
  }

  .cypa-pc__about-head::after { display: block; }

  .js-store-prod-text.is-collapsed .cypa-pc__about-head::after {
    transform: rotate(-90deg);
  }

  .js-store-prod-text.is-collapsed .cypa-pc__about,
  .js-store-prod-text.is-collapsed .cypa-pc__nutrition,
  .js-store-prod-text.is-collapsed .cypa-pc__shelf,
  .js-store-prod-text.is-collapsed .cypa-pc__allergens {
    display: none;
  }
}

/* ===== CYPA PRODUCT CARD: END ============================================= */