/* Клей-стили модалок ingriafarm (перенос app.css из Vue-вёрстки, без Vue-специфики) */

/* Modal overlay — replaces the remodal.js overlay/wrapper while reusing
   the production .remodal / .modal-* styling from modals.css */
.if-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(43, 46, 56, 0.95);
}

.if-overlay .remodal {
  margin: auto;
  width: 100%;
}

/* The cart popup (.b-overlay) gets its overlay positioning from the shop's JS
   libs in production; supply it here since those libs are not loaded. */
.b-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

/* Close button glyph (remodal.css is not loaded) */
.remodal-close {
  position: absolute;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  background: transparent;
  transition: color 0.2s ease;
}
.remodal-close::before {
  content: "\00d7";
  display: block;
  font-family: Arial, "Helvetica CY", sans-serif;
  font-size: 28px;
  line-height: 35px;
  text-align: center;
}

/* --- Степпер количества (страница товара) ------------------------------- */
.if-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(4, 0, 0, .15);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.if-qty__btn {
  width: 34px;
  height: 36px;
  font: 700 18px/1 'Montserrat', sans-serif;
  color: #181411;
  cursor: pointer;
}
.if-qty__btn:disabled { opacity: .35; cursor: default; }
.if-qty__input {
  width: 44px;
  height: 36px;
  border: 0;
  text-align: center;
  font: 600 15px/1 'Montserrat', sans-serif;
  color: #181411;
  background: transparent;
}
.if-qty__total { font: 700 15px/1 'Montserrat', sans-serif; white-space: nowrap; }
.theme-dark .if-qty { background: #2D2D2D; border-color: rgba(255, 255, 255, .18); }
.theme-dark .if-qty__btn, .theme-dark .if-qty__input { color: #fff; }

/* --- Мини-корзина: строки с картинкой и степпером ----------------------- */
/* modals.css задаёт .cart-prev-product-item под старую вёрстку (колонка:
   remove-btn/название/строка кол-во+цена, крестик — position:absolute в
   углу карточки). Новая строка (картинка | название | степпер+цена+крестик)
   этому явно противоречит, поэтому ниже намеренно перекрываем:
   — flex-direction (иначе останется column из modals.css и раскладка не
     станет строкой);
   — position/top/right у remove-btn (иначе крестик, вложенный теперь
     внутрь .cart-prev-product-item-right, всё равно улетит в угол всей
     карточки поверх степпера — position:absolute «пробивает» до ближайшего
     position:relative, коим остаётся сам .cart-prev-product-item);
   — display у .cart-prev-product-item-name (там висит легаси
     -webkit-box/-webkit-line-clamp:3 под многострочный заголовок; имя
     теперь оборачивает два блочных элемента — ссылку и цену за штуку —
     и это не тот тип содержимого, для которого задумывался line-clamp).
   theme-extra.css подключается в shop.blade.php ПОСЛЕ modals.css, так что
   при равной специфичности (один класс) эти правила побеждают. */
.cart-prev-product-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  /* Метрики старой карточки-колонки компактной строке не нужны:
     min-height 107px давал пустоту, а паддинг 34px справа резервировал
     место под абсолютный крестик в углу (теперь крестик в потоке). */
  min-height: 0;
  padding: 12px 16px;
}
.cart-prev-product-item-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
.cart-prev-product-item-name {
  display: block;
  min-width: 0;
}
.cart-prev-product-item-name a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-prev-product-item-unit {
  display: block;
  font-size: 12px;
  opacity: .6;
}
.cart-prev-product-item-right {
  display: flex;
  /* row явно: медиазапрос ≤500px в modals.css переводит -right в column
     (степпер/цена/крестик встали бы столбиком) — строка нужна на всех ширинах. */
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}
.if-qty--cart .if-qty__btn { width: 28px; height: 30px; font-size: 16px; }
.if-qty--cart .if-qty__input { width: 36px; height: 30px; font-size: 14px; }
/* Тёмная тема: `.theme-dark #body .cart-prev-product-item-qty-input` из
   modals.css (специфичность с #body) красит инпут в серый бокс #414141 —
   перебиваем той же специфичностью, инпут внутри степпера прозрачный. */
.theme-dark #body .if-qty--cart .cart-prev-product-item-qty-input {
  background: transparent;
  border: 0;
}
.cart-prev-product-item-remove-btn {
  position: relative;
  top: auto;
  right: auto;
  flex: none;
  /* Хит-зона под палец: сам крестик 11px, кликабельная область — 40×40 */
  width: 40px;
  height: 40px;
  margin: -10px;
}
/* На совсем узкой панели (≤400px) правой группе (степпер+цена+крестик) не
   хватает места рядом с названием — переносим её на свою строку вправо. */
@media (max-width: 400px) {
  .cart-prev-product-item { flex-wrap: wrap; row-gap: 8px; }
  .cart-prev-product-item-right { flex-basis: 100%; justify-content: flex-end; }
}
/* Пальцевые тап-таргеты модалок и степперов на touch-устройствах.
   Селектор с .if-cartm — та же специфичность, что у премиум-слоя
   (cart-modal.css), но позже по каскаду: чип крестика растёт и там. */
@media (pointer: coarse) {
  .if-qty--cart .if-qty__btn { width: 38px; height: 40px; }
  .if-qty--cart .if-qty__input { height: 40px; font-size: 16px; }
  #body .b-popup__edit, #body .if-cartm .b-popup__edit { width: 40px; height: 40px; }
}


/* --- Карточка каталога: композиция как на account-factory.com -----------
   Слева кликабельные лого+название (ссылка на товар), справа вертикально:
   [наличие-бейдж] [живая цена], ниже [степпер] [корзинка]. Отдельной кнопки
   «Купить» нет — карточка сама ссылка. Живую цену пересчитывает [data-if-qty] JS. */

/* Левая часть — ссылка на страницу товара (была <div>, стала <a>). */
.product__name { text-decoration: none; color: inherit; }

/* Правая колонка карточки-ряда. */
.product__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 190px;
}
.product__side-info { display: flex; align-items: center; gap: 10px; }
.product__side-buy { display: flex; align-items: center; gap: 8px; }

/* Живая цена (пересчитывается степпером). */
.product__price-live {
  font-weight: 700;
  font-size: 17px;
  color: #181411;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.theme-dark .product__price-live { color: #fff; }

/* Наличие — бейдж: в наличии / мало / нет. */
.if-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.1;
}
.if-badge--in { background: rgba(46, 158, 91, .12); color: #2e9e5b; border: 1px solid rgba(46, 158, 91, .3); }
.if-badge--low { background: rgba(243, 155, 43, .14); color: #c9790a; border: 1px solid rgba(243, 155, 43, .4); }
.if-badge--out { background: #f0ece6; color: #8a8377; border: 1px solid rgba(4, 0, 0, .12); }
.theme-dark .if-badge--in { background: rgba(46, 158, 91, .16); }
.theme-dark .if-badge--out { background: rgba(255, 255, 255, .06); color: #948c7f; border-color: rgba(255, 255, 255, .14); }

/* Степпер на карточке — по высоте кнопок каталога (42px). */
.if-qty--card { border-radius: 10px; flex: none; }
.if-qty--card .if-qty__btn { width: 30px; height: 42px; font-size: 16px; }
.if-qty--card .if-qty__input { width: 32px; height: 42px; font-size: 14px; }

/* Корзинка ровно по высоте степпера. */
.product__side-buy .product__basket-btn-row { height: 42px; width: 46px; box-sizing: border-box; }

/* Recommend (колонка): инфо-строка распахнута по ширине, действия во всю ширину. */
.recommend__top { text-decoration: none; color: inherit; }
/* Обёртка контролов ВО ВСЮ ШИРИНУ карточки на любой ширине. Без явного width
   обёртка (flex-элемент .product-block, align-items:center) брала fit-content
   по содержимому: «интринзик»-ширина инпута степпера (~170px) распирала её
   ШИРЕ карточки (265px), и корзинка выезжала за правый край (десктоп-сайдбар
   «Рекомендованные»). Тогда .product__side-info / .product__side-buy width:100%
   считались от раздутой обёртки, а не от карточки. */
.recommend__controls { width: 100%; box-sizing: border-box; }
.recommend .product__side-info { justify-content: space-between; width: 100%; padding: 0; margin: 10px 0 0; }
.recommend .product__side-buy { width: 100%; margin-top: 8px; }
.recommend .if-qty--card { flex: 1; }
.recommend .if-qty--card .if-qty__input { flex: 1; width: auto; }
/* Степпер обязан сжиматься в узкой карточке: у flex-элементов min-width:auto
   держит инпут на его контентной ширине и ломает раскладку — гасим в 0. */
.recommend .if-qty--card, .recommend .if-qty--card .if-qty__input { min-width: 0; }

/* Планшет/крупный телефон и уже: инфо-строку и «покупку» сливаем в ОДИН ряд
   карточки — [♥ наличие цена] слева, [− n + 🛒] справа (space-between).
   Ставим ту же точку 991px, на которой карточки каталога уходят во всю ширину
   (style.css: .product / .product-block становятся full-width при ≤991px).
   ВАЖНО: раньше этот блок жил на 600px, и в зазоре 601–991px рекомендованная
   карточка теряла раскладку — .recommend__controls оставался без стилей, а
   десктоп-правила узкого блока (info width:100% + степпер flex:1) попадали на
   уже full-width карточку → степпер растягивался во всю строку, инфо-строка
   разъезжалась. Десктоп (>991px) не трогаем: там карточки узкие (ряд ~190px,
   рекомендованная ~265px), контролы остаются в два ряда. */
@media (max-width: 991px) {
  /* Карточка-ряд: .product__side уже обнимает инфо+покупку. */
  .product__side {
    min-width: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  /* Рекомендованная: инфо+покупка обёрнуты в .recommend__controls (партиал). */
  .recommend__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
  }
  /* Кластеры: инфо жмётся к содержимому слева, покупка — фикс справа. */
  .product__side-info { flex: 0 1 auto; justify-content: flex-start; }
  .product__side-buy { flex: 0 0 auto; }
  .recommend .product__side-info { margin: 0; width: auto; justify-content: flex-start; }
  .recommend .product__side-buy { margin: 0; width: auto; }
  /* Гасим десктоп-растяжку степпера рекомендованной (flex:1 у .if-qty--card и
     flex:1 у её input) — иначе на full-width карточке степпер занимает всю
     строку. Натуральная ширина, покупка — компактный кластер справа. */
  .if-qty--card { flex: 0 0 auto; }
  .recommend .if-qty--card .if-qty__input { flex: 0 0 auto; width: 32px; }
}

/* Настоящие телефоны: дополнительно ужимаем степпер и корзину, чтобы весь ряд
   гарантированно помещался на узких экранах (на очень узких покупка мягко
   переносится вниз flex-wrap — безопасный откат к двухстрочному виду). */
@media (max-width: 600px) {
  .product__side-info { gap: 6px; }
  .product__side-buy { gap: 6px; }
  .if-qty--card .if-qty__btn { width: 24px; height: 40px; font-size: 15px; }
  .if-qty--card .if-qty__input { width: 24px; height: 40px; flex: 0 0 auto; }
  .recommend .if-qty--card .if-qty__input { width: 24px; }
  .product__side-buy .product__basket-btn-row { height: 40px; width: 44px; }
}

/* --- «Кошачья тропинка» — история просмотров (.if-trail) ------------------
   Личная лента: компактные мини-карточки, между ними отпечатки лапок —
   «шаги» кота вразнобой. Заметно отличается от каталожных рядов: это
   утилита-возвращалка, а не листинг. Оранжевый — только акценты. */
.if-trail {
  margin-top: 34px;
  text-transform: none; /* капс .main__content — не для личной ленты */
}
.if-trail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.if-trail__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11px/1 'Montserrat', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c9790a;
}
.if-trail__kicker svg { width: 14px; height: 14px; }
.if-trail__title {
  margin: 6px 0 0;
  font: 700 22px/1.2 'Montserrat', sans-serif;
  color: #181411;
}
.if-trail__hint {
  margin: 4px 0 0;
  font: 500 13px/1.5 'Montserrat', sans-serif;
  opacity: .55;
}
.theme-dark .if-trail__title { color: #fff; }
.theme-dark .if-trail__hint { color: #fff; }
.if-trail__clear {
  flex: none;
  font: 600 12px/1 'Montserrat', sans-serif;
  color: #8a8377;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(4, 0, 0, .25);
  transition: color .2s ease, border-color .2s ease;
}
.if-trail__clear:hover { color: #c9790a; border-color: #F39B2B; }

/* Лента: горизонтальный скролл со snap (мобильный — свайп) */
.if-trail__track {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(4, 0, 0, .18) transparent;
}

/* Мини-карточка: картинка, имя в 2 строки, цена + наличие + время */
.if-trail__card {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(4, 0, 0, .08);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.if-trail__card:hover {
  border-color: #F39B2B;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(4, 0, 0, .08);
}
.theme-dark .if-trail__card { background: #2D2D2D; border-color: rgba(255, 255, 255, .12); }
.theme-dark .if-trail__card:hover { border-color: #F39B2B; }
.if-trail__pic {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F5;
}
.theme-dark .if-trail__pic { background: rgba(255, 255, 255, .06); }
.if-trail__pic img { width: 38px; height: 38px; object-fit: contain; }
.if-trail__name {
  font: 600 12px/1.4 'Montserrat', sans-serif;
  color: #181411;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.theme-dark .if-trail__name { color: #fff; }
.if-trail__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.if-trail__price {
  font: 700 13px/1 'Montserrat', sans-serif;
  color: #181411;
  font-variant-numeric: tabular-nums;
}
.theme-dark .if-trail__price { color: #fff; }
.if-trail__stockdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.if-trail__stockdot.is-in { background: #2e9e5b; }
.if-trail__stockdot.is-out { background: rgba(4, 0, 0, .2); }
.theme-dark .if-trail__stockdot.is-out { background: rgba(255, 255, 255, .25); }
.if-trail__time {
  margin-left: auto;
  font: 500 11px/1 'Montserrat', sans-serif;
  opacity: .5;
  white-space: nowrap;
}

/* Лапки-шаги между карточками: вразнобой, как след кота */
.if-trail__paw {
  flex: none;
  width: 18px;
  height: 18px;
  color: rgba(24, 20, 17, .3);
  transform: translateY(-7px) rotate(105deg); /* «идёт» вдоль ленты */
}
.if-trail__paw--alt { transform: translateY(7px) rotate(75deg); }
.theme-dark .if-trail__paw { color: rgba(255, 255, 255, .28); }
.if-trail__paw svg { width: 100%; height: 100%; display: block; }

@media (max-width: 640px) {
  .if-trail__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .if-trail__card { width: 170px; }
}

/* --- Поиск: лупа в шапке + оверлей ---------------------------------------
   Лупа — белый контур на оранжевой ленте (в ряд с сердцем избранного).
   Оверлей — тёмная подложка, бумажная панель, поле с оранжевым акцентом. */
.header__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
  cursor: pointer;
}
.if-searchlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(24, 20, 17, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  /* Панель с чипами категорий может быть выше экрана (ландшафт телефона) —
     низ достижим скроллом самого оверлея */
  overflow-y: auto;
}
.if-searchlay.is-open { opacity: 1; pointer-events: auto; }
.if-searchlay__panel {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(4, 0, 0, .08);
  box-shadow: 0 24px 60px rgba(4, 0, 0, .28);
  padding: 18px;
  transform: translateY(-8px);
  transition: transform .2s ease;
}
.if-searchlay.is-open .if-searchlay__panel { transform: translateY(0); }
.theme-dark .if-searchlay__panel { background: #2D2D2D; border-color: rgba(255, 255, 255, .12); }
.if-searchlay__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(4, 0, 0, .18);
  color: #181411;
  background: #fff;
}
.if-searchlay__field:focus-within { border-color: #F39B2B; }
.if-searchlay__field input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: 500 15px/1 'Montserrat', sans-serif;
  color: inherit;
  text-transform: none;
}
.if-searchlay__field kbd {
  font: 600 11px/1 'Montserrat', sans-serif;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid rgba(4, 0, 0, .18);
  opacity: .6;
}
.theme-dark .if-searchlay__field { background: #2D2D2D; color: #fff; border-color: rgba(255, 255, 255, .2); }
.theme-dark .if-searchlay__field kbd { border-color: rgba(255, 255, 255, .25); }
.if-searchlay__hint {
  margin: 10px 2px 0;
  font: 500 12px/1.4 'Montserrat', sans-serif;
  opacity: .55;
}
.theme-dark .if-searchlay__hint { color: #fff; }
.if-searchlay__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Поле поиска на странице результатов + подпись запроса */
.if-search-page { max-width: 480px; margin: 16px 0 6px; }
.if-search-q { opacity: .55; font-weight: 700; }
.if-search-note {
  margin: 14px 0 0;
  font: 500 15px/1.6 'Montserrat', sans-serif;
  text-transform: none;
}

/* --- Страница категории: шапка, описание, сортировка ---------------------
   Оранжевый — только акценты (активный чип, точка тумблера), фон бумажный. */
.if-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.if-cat-count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
}
.if-cat-desc {
  margin: 14px 0 4px;
  max-width: 720px;
  line-height: 1.6;
  /* .main__content красит контент капсом (прод-стиль карточек) — текст
     описания должен читаться обычным регистром */
  text-transform: none;
  font-weight: 500;
  font-size: 15px;
}
.if-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
}
.if-sort__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(4, 0, 0, .18);
  color: #181411;
  font: 600 13px/1 'Montserrat', sans-serif;
  text-transform: none; /* капс .main__content — не для чипов */
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .15s ease;
}
.if-sort__chip:hover { border-color: #F39B2B; color: #c9790a; transform: translateY(-1px); }
.if-sort__chip.is-active { border-color: #F39B2B; color: #c9790a; font-weight: 700; }
.if-sort__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(4, 0, 0, .3);
}
.if-sort__chip--toggle.is-active .if-sort__dot { background: #2e9e5b; border-color: #2e9e5b; }
.theme-dark .if-sort__chip { color: #fff; border-color: rgba(255, 255, 255, .25); }
.theme-dark .if-sort__chip:hover, .theme-dark .if-sort__chip.is-active { border-color: #F39B2B; color: #F39B2B; }
.theme-dark .if-sort__dot { border-color: rgba(255, 255, 255, .4); }

/* --- Заголовок секции каталога — ссылка на страницу категории ------------
   Наследует вид h4; стрелка выезжает на ховере (оранжевый — акцент). */
.product-section__title-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-section__title-arrow {
  font-size: 0.8em;
  color: #F39B2B;
  transform: translateX(-4px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.product-section__title-link:hover .product-section__title-arrow {
  transform: translateX(0);
  opacity: 1;
}
/* Без ховера (тач) стрелка видна всегда — ссылку должно быть видно */
@media (hover: none) {
  .product-section__title-arrow { transform: none; opacity: 1; }
}

/* --- Страница товара (.if-pp) -------------------------------------------
   Прод-карточка: слева картинка в мягкой рамке, справа h1 + бейдж остатка +
   цена + степпер с AJAX-кнопкой (механика как у карточек каталога).
   Оранжевый — только акценты/рамки, фон остаётся бумажным. */
.if-pp {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(4, 0, 0, .08);
}
.theme-dark .if-pp { background: #2D2D2D; border-color: rgba(255, 255, 255, .12); }
.if-pp__media {
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F5;
  border: 1px solid rgba(4, 0, 0, .06);
}
.theme-dark .if-pp__media { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.if-pp__media img { width: 96px; height: 96px; object-fit: contain; }
.if-pp__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.if-pp__toprow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.if-pp__title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
.if-pp__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.if-pp__price {
  font: 700 28px/1 'Montserrat', sans-serif;
  color: #181411;
  font-variant-numeric: tabular-nums;
}
.theme-dark .if-pp__price { color: #fff; }
.if-pp__buyrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.if-pp__desc { margin-top: 4px; }
.if-pp__related { margin-top: 12px; }
@media (max-width: 640px) {
  .if-pp { flex-direction: column; }
  .if-pp__media { width: 100%; }
}

/* --- «Сообщить о поступлении» (.if-alert) --------------------------------
   Пунктирная оранжевая рамка (акцент без заливки); состояние «подписан» —
   спокойный зелёный, в цветах бейджа наличия. */
.if-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px dashed rgba(243, 155, 43, .55);
  background: rgba(243, 155, 43, .06);
  max-width: 480px;
}
.theme-dark .if-alert { background: rgba(243, 155, 43, .08); }
.if-alert--done {
  flex-direction: row;
  align-items: center;
  border-style: solid;
  border-color: rgba(46, 158, 91, .4);
  background: rgba(46, 158, 91, .08);
  color: #2e9e5b;
  font-weight: 700;
}
.if-alert__head { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.if-alert__ic { display: inline-flex; color: #F39B2B; }
.if-alert--done .if-alert__ic { color: #2e9e5b; }
.if-alert__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.if-alert__input {
  flex: 1;
  min-width: 180px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(4, 0, 0, .15);
  padding: 0 14px;
  font: 500 14px/1 'Montserrat', sans-serif;
  color: #181411;
  background: #fff;
}
.theme-dark .if-alert__input { background: #2D2D2D; color: #fff; border-color: rgba(255, 255, 255, .18); }
.if-alert__btn { height: 42px; padding: 0 18px; }
.if-alert__ch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.if-alert__err { margin: 0; color: #c0392b; font-size: 13px; }

/* --- Избранное: сердечки (.if-fav) ---------------------------------------
   Контурное чернильное сердце; активное — оранжевое (заливка только у
   иконки, не у кнопки — оранжевый в теме работает акцентом). */
.if-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid rgba(4, 0, 0, .15);
  border-radius: 12px;
  background: transparent;
  color: #181411;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .15s ease;
}
.if-fav svg { fill: none; stroke: currentColor; stroke-width: 2; }
.if-fav:hover { border-color: #F39B2B; color: #F39B2B; transform: translateY(-1px); }
.if-fav.is-on { color: #F39B2B; border-color: #F39B2B; }
.if-fav.is-on svg { fill: #F39B2B; }
.theme-dark .if-fav { color: #fff; border-color: rgba(255, 255, 255, .25); }
.theme-dark .if-fav.is-on { color: #F39B2B; border-color: #F39B2B; }
/* Компактное сердечко в карточках каталога — по высоте бейджей */
.if-fav--card { width: 34px; height: 34px; border-radius: 10px; }
.if-fav--card svg { width: 16px; height: 16px; }
/* Крупное сердце страницы товара — рядом с h1 */
.if-fav--lg { width: 44px; height: 44px; }

/* Сердце в шапке (оранжевая лента): белый контур + чернильный счётчик —
   как контр-лента, без белых пилюль в меню. */
.header__fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
}
.header__fav svg { fill: none; stroke: currentColor; stroke-width: 2; }
.header__fav-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #181411;
  color: #fff;
  font: 700 11px/18px 'Montserrat', sans-serif;
  text-align: center;
}
/* Pop бейджа — пружинистый (перелёт 1.35 → откат 0.92 → 1), а не линейный. */
.header__fav-count.if-pop { animation: if-fav-pop .45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes if-fav-pop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.35); }
  80% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* Один «удар сердца» при добавлении в избранное (класс вешает
   ingri-favorites.js только на увеличение счётчика). */
.header__fav.if-beat svg { animation: if-fav-beat .5s ease-in-out; transform-origin: 50% 55%; }
@keyframes if-fav-beat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.25); }
  45% { transform: scale(0.95); }
  65% { transform: scale(1.12); }
}

/* Мини-сердечко, летящее от кнопки товара к сердцу шапки (WAAPI ведёт
   transform/opacity; тут только вид). Чернильное, как счётчик. */
.if-fly-heart {
  position: fixed;
  z-index: 2147483001;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: #181411;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .header__fav-count.if-pop { animation: none; }
  .header__fav.if-beat svg { animation: none; }
}

/* Страница избранного: пустое состояние */
.if-fav-empty { padding: 22px 0; font-size: 15px; }
.if-fav-empty a { color: #F39B2B; font-weight: 700; text-decoration: none; }

/* --- Мини-прелоадер жёстких переходов (nav-overlay.js, Vite-бандл
   ingriafarm-nav.js). Показывается, когда Swup отдаёт переход браузеру
   (корзина/логин, возврат на главную) и тот длится дольше ~250 мс.
   База .af-navlay живёт в app.css кабинета, который витрина не грузит —
   поэтому здесь блок целиком: позиционирование + IF-вид (кремовый фон,
   Montserrat, тёмная «I» + оранжевая «F» — как бут-заставка кабинета
   #af-boot). Зеркало IF-вида для кабинета — resources/css/skins/ingriafarm.css;
   правки синхронизировать руками. */
.af-navlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(246, 243, 239, .86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.af-navlay.is-on { opacity: 1; pointer-events: auto; }
.af-navlay__box { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.af-navlay__mono {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700;
  font-size: 40px; letter-spacing: .12em; line-height: 1; color: #181411;
  /* «Дыхание»: опэсити + лёгкий масштаб */
  animation: if-navlay-breath 1.15s ease-in-out infinite;
}
.af-navlay__mono-f { color: #F39B2B; }
.af-navlay__bar { width: 148px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(24, 20, 17, .12); }
/* Полоса-«бегунок» (indeterminate): светящийся сегмент бесконечно пробегает
   трек, пока оверлей виден (.is-on). Честного прогресса при полной перезагрузке
   не бывает, а псевдо-заливка на коротких переходах выглядела застывшей пустой
   полоской — бегунок живёт при любой длительности ожидания и без JS. */
.af-navlay__bar i {
  display: block; height: 100%; width: 38%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #F39B2B 30%, #ffd9a1 70%, transparent);
  transform: translateX(-110%); will-change: transform;
}
.af-navlay.is-on .af-navlay__bar i { animation: af-navlay-run 1.05s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes af-navlay-run { from { transform: translateX(-110%); } to { transform: translateX(400%); } }
/* Лапки по бокам монограммы: кот «переминается» в ожидании — шаги чередуются
   (::after в противофазе). Тот же 5-эллипсный след, что у большого прелоадера. */
.af-navlay__box { position: relative; }
.af-navlay__box::before,
.af-navlay__box::after {
  content: ""; position: absolute; width: 34px; height: 34px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23F39B2B'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: if-navlay-paw 1.7s ease-out infinite;
}
.af-navlay__box::before { left: -50px; top: -4px; transform: rotate(-24deg); }
.af-navlay__box::after { right: -50px; bottom: 2px; transform: rotate(22deg); animation-delay: .85s; }
@keyframes if-navlay-breath {
  0%, 100% { opacity: .65; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.045); }
}
@keyframes if-navlay-paw {
  0% { opacity: 0; }
  14% { opacity: .34; }
  60% { opacity: .18; }
  100% { opacity: 0; }
}
.theme-dark .af-navlay { background: rgba(15, 12, 10, .86); }
.theme-dark .af-navlay__mono { color: #f4f0ea; }
.theme-dark .af-navlay__bar { background: rgba(255, 255, 255, .12); }
@media (prefers-reduced-motion: reduce) {
  .af-navlay__mono { animation: none; transform: none; }
  .af-navlay.is-on .af-navlay__bar i { animation: none; }
  .af-navlay__bar i { width: 100%; transform: none; background: linear-gradient(90deg, #F39B2B, #ffd9a1); }
  .af-navlay__box::before,
  .af-navlay__box::after { display: none; }
}

/* --- Мини-корзина: служебные плашки над позициями ----------------------- */
/* «Заказ ожидает оплаты» — ссылка на продолжение оплаты (ingri-theme.js
   рендерит её из summary) и «остаток изменился» — сервер ужал количества. */
.cart-prev-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 13px;
  border: 2px solid #F39B2B;
  border-radius: 12px;
  font: 700 13.5px/1.35 'Montserrat', sans-serif;
  color: inherit;
  text-decoration: none;
}
.cart-prev-pending span { color: #b25e00; white-space: nowrap; }
.cart-prev-pending:hover span { text-decoration: underline; text-underline-offset: 3px; }
.theme-dark .cart-prev-pending span { color: #f6b96b; }
.cart-prev-notice {
  margin: 0 0 12px;
  padding: 9px 13px;
  border: 1px solid rgba(4, 0, 0, .16);
  border-left: 4px solid #F39B2B;
  border-radius: 10px;
  font: 600 12.5px/1.45 'Montserrat', sans-serif;
}
.theme-dark .cart-prev-notice { border-color: rgba(255, 255, 255, .2); border-left-color: #F39B2B; }

/* --- Шапка: меню всегда в одну строку (десктоп) ---
   Пункты меню не должны ломаться в две строки («Dolphin / Anty», «2- / FA»):
   после появления сердечка «Избранное» суммарная ширина перестала влезать,
   и флекс сжимал пункты до переноса текста. Рецепт жил в home.css под скоупом
   главной — перенесён сюда, на ВСЕ страницы: переносы запрещены, разрядка
   контейнера ужата, гэп меню плавный от вьюпорта. Вид ссылок не меняется.
   Только десктоп: мобильный дропдаун живёт своей вёрсткой в style.css. */
@media (min-width: 1200px) {
  .main-header .header__container { gap: 28px; }
  /* Максимумы гэпов подрезаны (32→26, 22→18) после появления поиска в
     actions (+60px): иначе на широких экранах меню упиралось в тумблер
     темы вплотную (3px). Экономия ~46px = видимый воздух между блоками.
     Граница 1200 — как у бургера (style.css): ниже полного меню нет. */
  .main-header .header__menu { gap: clamp(18px, 2.4vw, 26px); }
  .main-header .header__link { white-space: nowrap; }
  .main-header .header__actions { gap: 18px; white-space: nowrap; }
}

/* --- Тумблер темы «небо»: кноб — само солнце/луна -----------------------
   Текстовой подписи больше нет (экономит ~110px шапки — заодно снят бывший
   здесь костыль скрытия подписи на 1200–1319). Штатный чёрный/белый кноб
   ПОГАШЕН (чёрный круг под солнцем читался как затмение и выбивался из
   светлой темы): телом кноба служат сами иконки-<i> — оранжевое солнце с
   лениво вращающимися лучами днём, кремовая луна с кратерами и мягким
   свечением ночью. Пилюля — «небо»: кремовый день с облачком, чернильная
   ночь со звёздами. Иконки едут вместе с позицией кноба (left, как у
   ::after в style.css) и морфятся кроссфейдом с полуоборотом. */
.theme-block .button-theme-change::after { background-image: none !important; }
.tc-ico {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 19px;
  height: 19px;
  z-index: 1; /* над кнобом-::after (пседвоэлемент рисуется после детей) */
  pointer-events: none;
  background: center / contain no-repeat;
  transition: left 0.3s ease, opacity 0.25s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tc-ico--sun {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23F39B2B' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='12' y1='0.9' x2='12' y2='3.6'/%3E%3Cline x1='12' y1='20.4' x2='12' y2='23.1'/%3E%3Cline x1='0.9' y1='12' x2='3.6' y2='12'/%3E%3Cline x1='20.4' y1='12' x2='23.1' y2='12'/%3E%3Cline x1='4.2' y1='4.2' x2='6.1' y2='6.1'/%3E%3Cline x1='17.9' y1='17.9' x2='19.8' y2='19.8'/%3E%3Cline x1='4.2' y1='19.8' x2='6.1' y2='17.9'/%3E%3Cline x1='17.9' y1='6.1' x2='19.8' y2='4.2'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='5.6' fill='%23F39B2B'/%3E%3C/svg%3E");
  animation: tc-sunspin 60s linear infinite; /* «оно живое»: лучи еле заметно плывут */
}
.tc-ico--moon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23F2ECDF'/%3E%3Ccircle cx='9' cy='8.6' r='2.1' fill='%2322242E' fill-opacity='0.35'/%3E%3Ccircle cx='15.2' cy='13.2' r='1.5' fill='%2322242E' fill-opacity='0.3'/%3E%3Ccircle cx='10.3' cy='15.3' r='1.1' fill='%2322242E' fill-opacity='0.25'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 3px rgba(244, 238, 220, 0.55)); /* лунное свечение */
  opacity: 0;
  transform: rotate(-120deg);
}
.theme-dark .tc-ico { left: 22px; }
.theme-dark .tc-ico--sun { opacity: 0; transform: rotate(120deg); animation: none; }
.theme-dark .tc-ico--moon { opacity: 1; transform: rotate(0deg); }
@keyframes tc-sunspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Пилюля-небо: кремовый день с облачком на дорожке / чернильная ночь.
   Специфичность с .main-header — чтобы перебить transition из motion.css
   (он грузится позже) и цвета style.css. Облачко — background-image:
   меняется мгновенно, но смена прикрыта проездом солнца/луны. */
.main-header .theme-block .button-theme-change::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 10a3.5 3.5 0 1 1 .6-6.95A5 5 0 0 1 17.2 4.8 3 3 0 0 1 17 10z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat 26px 9px / 13px 7px #FFF3DF;
  box-shadow: inset 0 1px 3px rgba(4, 0, 0, 0.1);
  transition: background-color 0.4s ease, box-shadow 0.3s ease;
}
.theme-dark .main-header .theme-block .button-theme-change::before {
  background: #0A0C16; /* ночное небо — чуть синее чистого чёрного */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Звёздочки на чёрной дорожке — псевдоэлементы месяца (он виден только в
   тёмной теме, поэтому и звёзды живут/гаснут вместе с ним). */
.tc-ico--moon::before,
.tc-ico--moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}
.tc-ico--moon::before { width: 2px; height: 2px; left: -9px; top: 5px; }
.tc-ico--moon::after { width: 2px; height: 2px; left: -13px; top: 12px; transform: scale(0.75); }
.theme-dark .tc-ico--moon::before,
.theme-dark .tc-ico--moon::after {
  opacity: 0.9;
  animation: tc-twinkle 2.6s ease-in-out infinite alternate;
}
.theme-dark .tc-ico--moon::after { animation-delay: 1.1s; }
@keyframes tc-twinkle {
  from { opacity: 0.9; }
  to { opacity: 0.35; }
}

/* Пресс — лёгкий сквиш всей кнопки. */
.theme-block .button-theme-change { transition: transform 0.15s ease; }
.theme-block .button-theme-change:active { transform: scale(0.93); }

/* Ховер-нудж кноба (motion.css) — иконки едут вместе с ним (те же 8/18px). */
@media (hover: hover) {
  .theme-block .button-theme-change:hover .tc-ico { left: 8px; }
  .theme-dark .theme-block .button-theme-change:hover .tc-ico { left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-ico { transition: none; }
  .tc-ico--sun { animation: none; }
  .tc-ico--moon,
  .theme-dark .tc-ico--sun,
  .theme-dark .tc-ico--moon { transform: none; }
  .theme-dark .tc-ico--moon::before,
  .theme-dark .tc-ico--moon::after { animation: none; }
  .theme-block .button-theme-change { transition: none; }
  .theme-block .button-theme-change:active { transform: none; }
  .theme-block .button-theme-change:hover .tc-ico { left: 4px; }
  .theme-dark .theme-block .button-theme-change:hover .tc-ico { left: 22px; }
}

/* --- Единая шапка витрины: тонкая лента + живая волна (дефолт ВСЕХ страниц) ---
   История: полный декор-герой (467px, кот и пузыри УТП) съедал первый экран
   внутренних страниц (аудит 23.07.2026: h1 на 582–693px за фолдом), а
   компакт-вариант со сплющенной статичной кляксой .bgs-header-fly выглядел
   третьим дизайном рядом с лентами главной и корзины. Теперь дефолт темы —
   рецепт главной: оранжевая лента высотой по контенту, под ней живая волна
   .if-topwave «оранжевый → бумага» (разметка в layouts/shop, ВНЕ #if-content —
   переживает Swup-подмены, дрейф не перезапускается). Исключение одно:
   на главной волна схлопнута — оранжевый лентой не заканчивается, а
   перетекает в сцену героя, своя волна (.if-hero__topwave) стоит у её низа.
   Скоуп body:has(.if-home) гаснет сам вместе с контентом при Swup-уходе. */
.header.main-header {
  /* Контекст наложения НАД контентом: открытое моб-меню (.header__collapse,
     absolute z:auto) раньше рисовалось ПОД более поздними в DOM позиционир.
     hero/.if-topwave. z:200 — выше контента (0–4), ниже оверлеев/модалок (1000+). */
  position: relative;
  z-index: 200;
  height: auto;
  margin-bottom: 0; /* дальше — волна .if-topwave, стык без просвета */
  padding: 22px 0 10px;
  background-color: #F39B2B;
}
.if-topwave {
  position: relative;
  width: 100%;
  /* -2px сверху: нахлёст на ленту глушит субпиксельный просвет на стыке */
  margin: -2px 0 20px;
  height: clamp(2.6rem, 4vw, 4.2rem);
  background: #F39B2B;
  /* Swup-переходы главная ↔ внутренние: волна разворачивается/схлопывается
     высотой плавно, а не прыжком (слои растут %-высотами вместе с
     контейнером). На полной загрузке transition не играет — страница
     сразу рендерится в конечном состоянии. */
  transition: height 0.35s ease, margin-bottom 0.35s ease;
}
body:has(.if-home) .if-topwave {
  height: 0;
  margin-bottom: 0;
}
.if-topwave__layer {
  position: absolute;
  left: 0;
  /* Запас +1200px (период узора) справа: дрейф — transform-ом на композиторе,
     а не background-position-x (репейнт каждый кадр). Свес за правый край
     скрыт body { overflow-x: hidden }. */
  right: -1200px;
  /* Запас снизу: передний слой «дышит» translate ±4px */
  bottom: -6px;
  background: repeat-x center bottom / 1200px 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C160,105 360,15 600,60 C840,105 1040,15 1200,60 L1200,120 L0,120 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  animation: if-topwave-drift 22s linear infinite;
  will-change: transform;
}
.if-topwave__back {
  height: 150%;
  opacity: .22;
  animation-duration: 40s;
  animation-direction: reverse;
}
.if-topwave__mid {
  height: 128%;
  opacity: .42;
  animation-duration: 30s;
}
.if-topwave__front {
  height: 112%;
  animation: if-topwave-drift 22s linear infinite,
             if-topwave-swell 6s ease-in-out infinite alternate;
}
/* Пена по гребню передней волны: своей анимации нет — едет вместе с
   родителем (их скорости дрейфа и были одинаковыми, 22s) */
.if-topwave__front::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: repeat-x center bottom / 1200px 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C160,105 360,15 600,60 C840,105 1040,15 1200,60' fill='none' stroke='%23FFD79A' stroke-width='3.5'/%3E%3C/svg%3E");
  opacity: .55;
}
/* Тёмная тема: «бумага» страницы тёмная — низ ленты перекрашивается в неё */
.theme-dark .if-topwave__layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C160,105 360,15 600,60 C840,105 1040,15 1200,60 L1200,120 L0,120 Z' fill='%23222222'/%3E%3C/svg%3E");
}
/* Дрейф — transform на композиторе (0 репейнтов), «дыхание» — отдельным
   свойством translate: у переднего слоя обе анимации живут одновременно */
@keyframes if-topwave-drift {
  from { transform: translateX(-1200px); }
  to { transform: translateX(0); }
}
@keyframes if-topwave-swell {
  from { translate: 0 4px; }
  to { translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .if-topwave { transition: none; }
  .if-topwave__layer,
  .if-topwave__front::after { animation: none; }
}

/* --- Undo-тост корзины (витрина и /cart) --------------------------------- */
/* «Позиция убрана — Вернуть»: рисует ingri-theme.js (модалка) и ingri-cart.js
   (страница корзины). Полоска снизу тает 5с — время на передумать. */
.if-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(92vw, 440px);
  padding: 13px 16px;
  border: 1px solid rgba(243, 155, 43, 0.4);
  border-radius: 14px;
  background: #fff;
  color: #181411;
  font: 600 13.5px/1.35 'Montserrat', sans-serif;
  box-shadow: 0 16px 40px rgba(30, 16, 2, 0.25);
  overflow: hidden;
  animation: if-toast-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.theme-dark .if-toast { background: #2a2622; color: #f4f0ea; border-color: rgba(243, 155, 43, 0.5); }
.if-toast__text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.if-toast__undo {
  flex: none;
  padding: 8px 14px;
  border: 1.5px solid #F39B2B;
  border-radius: 10px;
  font: 700 13px/1 'Montserrat', sans-serif;
  color: #b25e00;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.if-toast__undo:hover { background: rgba(243, 155, 43, 0.12); }
.theme-dark .if-toast__undo { color: #f6b96b; }
.if-toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: #F39B2B;
  transform-origin: left;
  animation: if-toast-run 5s linear forwards;
}
.if-toast.is-leaving { opacity: 0; transform: translateX(-50%) translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; }
@keyframes if-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes if-toast-run { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .if-toast { animation: none; }
}

/* ============================================================
   Адаптив-доводка (аудит 23.07.2026): пальцевые тап-таргеты,
   clamp-типографика товара, ландшафт телефона. Блок в хвосте
   файла — переопределяет базовые правила выше по каскаду.
   ============================================================ */

/* Заголовок и цена товара масштабируются на узких экранах */
.if-pp__title { font-size: clamp(20px, 5vw, 26px); overflow-wrap: anywhere; }
.if-pp__price { font-size: clamp(22px, 6vw, 28px); }

/* Хвост hero-заголовка: без JS (fitTail) nowrap обрезал бы длинную фразу —
   даём переносу работать, пока сцена не помечена как управляемая скриптом */
.if-hero__scene:not(.if-hero__scene--js) .if-hero__rotate { white-space: normal; }

/* Тап-таргеты ≥40px на touch-устройствах. Иконки остаются прежнего
   размера — растёт кликабельная область (паддинги/размер бокса). */
@media (pointer: coarse) {
  .header__search, .header__fav { width: 44px; height: 44px; }
  .header__toggler { width: 44px; height: 44px; }
  .header__lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .if-sort__chip { min-height: 40px; }
  .if-fav--card { width: 44px; height: 44px; }
  .if-trail__clear { padding: 12px 4px; }
  .if-searchlay__field input { font-size: 16px; } /* iOS-зум при <16px */
  .if-searchlay__field kbd { display: none; }     /* клавиатурная подсказка без клавиатуры */
}

/* Ландшафтный компакт-блок шапки удалён: тонкая лента (высота по контенту)
   и так не съедает экран, а клякса .bgs-header-fly ушла из разметки —
   см. «Единая шапка витрины» выше. */