/* Общие настройки для всех 4 иконок */
.tn-elem[data-elem-id="1792510000000000003"] .tn-atom,
.tn-elem[data-elem-id="1792529803491000003"] .tn-atom,
.tn-elem[data-elem-id="1792610000000000129"] .tn-atom,
.tn-elem[data-elem-id="1792610000000000130"] .tn-atom {
    position: relative;
    display: block;
}

/* Исходные иконки */
.tn-elem[data-elem-id="1792510000000000003"] .tn-atom__img,
.tn-elem[data-elem-id="1792529803491000003"] .tn-atom__img,
.tn-elem[data-elem-id="1792610000000000129"] .tn-atom__img,
.tn-elem[data-elem-id="1792610000000000130"] .tn-atom__img {
    transition: opacity 0.35s ease-in-out;
}

/* PHOTO */
.tn-elem[data-elem-id="1792510000000000003"] .tn-atom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://static.tildacdn.com/tila6239-6139-4033-a234-623331623539/photo.svg") center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
}
.tn-elem[data-elem-id="1792510000000000003"]:hover .tn-atom__img {
    opacity: 0;
}
.tn-elem[data-elem-id="1792510000000000003"]:hover .tn-atom::after {
    opacity: 1;
}

/* INFO */
.tn-elem[data-elem-id="1792529803491000003"] .tn-atom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://static.tildacdn.com/tila6661-3936-4633-a539-373931656638/info.svg") center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
}
.tn-elem[data-elem-id="1792529803491000003"]:hover .tn-atom__img {
    opacity: 0;
}
.tn-elem[data-elem-id="1792529803491000003"]:hover .tn-atom::after {
    opacity: 1;
}

/* VK */
.tn-elem[data-elem-id="1792610000000000129"] .tn-atom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://static.tildacdn.com/tild3437-3134-4963-a239-623963356131/vk_hover.svg") center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
}
.tn-elem[data-elem-id="1792610000000000129"]:hover .tn-atom__img {
    opacity: 0;
}
.tn-elem[data-elem-id="1792610000000000129"]:hover .tn-atom::after {
    opacity: 1;
}

/* RUTUBE */
.tn-elem[data-elem-id="1792610000000000130"] .tn-atom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://static.tildacdn.com/tild3437-3464-4633-b334-353864303665/rutube_hover.svg") center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
}
.tn-elem[data-elem-id="1792610000000000130"]:hover .tn-atom__img {
    opacity: 0;
}
.tn-elem[data-elem-id="1792610000000000130"]:hover .tn-atom::after {
    opacity: 1;
}


/* ==== YOSHIMI: плавное появление / скрытие шапки (#rec5015103401) ====
   Класс .show-fixed-zero ставит/снимает Annexx ANX016 (порог 1080px, скрытие у #rec5006788501).
   Здесь мы только отдаём ему красивую анимацию. */

/* 1. Отключаем «родную» анимацию Zero-блока (fixslide, 0.15s) и обёрточный fade Annexx —
      иначе две системы анимируют одну шапку одновременно и дёргаются. */
#rec5015103401[class*="fixed-zero"] {
  opacity: 1 !important;
  transition: none !important;
}

/* 2. Скрытое состояние: шапка уехала вверх, прозрачна, недоступна для кликов и Tab */
#rec5015103401 .t396__artboard,
#rec5015103401 .t396__artboard.t396__artboard-fixed-active {
  transform: translate3d(0, -110%, 0) !important;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* УХОД: чуть быстрее появления, ускоряется к концу (ease-in) */
  transition:
    transform  .45s cubic-bezier(.5, 0, .75, 0),
    opacity    .30s cubic-bezier(.4, 0, 1, 1),
    visibility 0s linear .45s !important;
}

/* 3. Видимое состояние: мягко выезжает и «садится» на место (ease-out) */
#rec5015103401.show-fixed-zero .t396__artboard,
#rec5015103401.show-fixed-zero .t396__artboard.t396__artboard-fixed-active {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1;
  visibility: visible;
  /* ПОЯВЛЕНИЕ: долгий мягкий выезд (easeOutQuint) + быстрый fade-in */
  transition:
    transform  .7s cubic-bezier(.22, 1, .36, 1),
    opacity    .4s cubic-bezier(0, 0, .2, 1),
    visibility 0s linear 0s !important;
}

/* 4. Для тех, кто отключил анимации в системе — только плавный fade */
@media (prefers-reduced-motion: reduce) {
  #rec5015103401 .t396__artboard,
  #rec5015103401 .t396__artboard.t396__artboard-fixed-active,
  #rec5015103401.show-fixed-zero .t396__artboard,
  #rec5015103401.show-fixed-zero .t396__artboard.t396__artboard-fixed-active {
    transform: none !important;
    transition: opacity .25s linear, visibility 0s linear .25s !important;
  }
  #rec5015103401.show-fixed-zero .t396__artboard {
    transition: opacity .25s linear, visibility 0s linear 0s !important;
  }
}


/* ==== YOSHIMI: блок 06 «Как подавать» — слайдер рецептов (#rec4992166501) ====
   Прокручиваемая область (#molecule-…009) раньше была ровно по ширине сетки (320px / 1781px),
   поэтому карточки обрезались не по краю экрана, а на отступе, а на планшете прокрутки не было вовсе.
   Теперь область растянута на всю ширину экрана, а отступы сетки вернул padding —
   сам механизм прокрутки (overflow-x + scroll-snap) не тронут. */

/* Мобильный: 360–767 */
@media screen and (max-width: 767px) {
  #rec4992166501 #molecule-1792550000000000009 {
    width: 360px !important;          /* ширина артборда в этом диапазоне */
    margin-left: -20px !important;    /* выходим за отступ сетки до края экрана */
    padding: 0 20px !important;       /* возвращаем отступ первой/последней карточки */
    box-sizing: border-box !important;
    scroll-padding-inline: 20px;      /* карточка «прилипает» с тем же отступом */
  }
}

/* Планшет: 768–1199 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #rec4992166501 #molecule-1792550000000000009 {
    width: 768px !important;
    margin-left: -40px !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    scroll-padding-inline: 40px;
  }
}

/* Убираем серую полосу прокрутки внутри карточек (скролл остаётся рабочим) */
@media screen and (max-width: 1199px) {
  #rec4992166501 #molecule-1792550000000000009 {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #rec4992166501 #molecule-1792550000000000009::-webkit-scrollbar {
    display: none;
  }
}