/* ==========================================================================
   Базовые стили — подсветка активного пункта мобильного меню
   ========================================================================== */
.mobile-nav .header__nav-item:nth-child(2) i {
  color: #01A572;
}
.mobile-nav .header__nav-item:nth-child(2) span {
  color: #01A572;
}

/* ==========================================================================
   CSS-переменные (те же что в cart.css)
   ========================================================================== */
:root {
  --c-brand:        #01A572;
  --c-brand-dark:   #018055;
  --c-brand-light:  #e6f8f2;
  --c-accent:       #FF7700;
  --c-text:         #0f172a;
  --c-muted:        #64748b;
  --c-border:       #c5cdd9; /* было #e2e8f0 - контраст ~1.15:1, границы не читались */
  --c-bg:           #f8fafc;
  --c-white:        #ffffff;
  --c-danger:       #ef4444;
  --c-danger-light: #fef2f2;
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      20px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:      0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:      0 10px 40px rgba(0,0,0,.12);
}

/* ==========================================================================
   PAGE
   ========================================================================== */
.favorites-page {
  padding-bottom: 40px;
}

/* Отступ задаём через .fav-header — чтобы не перебить main's padding-top
   (компенсация под фиксированную шапку сайта). */
.fav-header { margin-top: 20px; }
@media (max-width: 768px) {
  .fav-header { margin-top: 14px; }
}

/* ==========================================================================
   HEADER — заголовок + кнопки (стиль cart-header)
   ========================================================================== */
.fav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}

/* H1 ПО ШКАЛЕ - см. тот же комментарий в css/cart.css. */
.fav-header h1 {
  font-size: var(--zd-text-2xl, 28px);
  font-weight: var(--zd-fw-bold, 700);
  color: var(--zd-ink, #1F1F1F);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fav-header h1 i {
  font-size: 24px;
  color: var(--c-brand);
}

/* Бейдж с количеством товаров */
.fav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: var(--c-brand);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* Группа кнопок справа */
.fav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Кнопка «Сравнение» — outlined зелёная */
.btn-compare {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* Поимённо вместо `all` (DESIGN.md, «Движение») - на наведении меняются
     только цвета. */
  transition: background var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease),
              color var(--zd-dur-fast) var(--zd-ease);
  background: transparent;
  border: 1.5px solid var(--c-brand);
  /* --c-brand (#01A572) - заливочный зелёный: как ТЕКСТ на белом он даёт
     3.2:1, ниже нормы 4.5:1. Рамке этого хватает, надписи - нет. Замер.
     */
  color: #01A572;
  text-decoration: none;
}

.btn-compare i {
  font-size: 16px;
  color: inherit;
}

.btn-compare:hover,
.btn-compare.active {
  background: var(--c-brand);
  color: #fff;
}

/* Счётчик сравниваемых */
.btn-compare #compare-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: var(--c-brand);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  transition: background .2s;
}

.btn-compare:hover #compare-count,
.btn-compare.active #compare-count {
  background: rgba(255,255,255,.3);
}

/* Кнопка «Очистить» — outlined серая, красная при ховере */
.btn-clear-favorites {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease),
              color var(--zd-dur-fast) var(--zd-ease);
  background: transparent;
  border: 1.5px solid var(--c-border);
  color: var(--c-muted);
}

.btn-clear-favorites:hover {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background: var(--c-danger-light);
}

/* ==========================================================================
   ITEMS SECTION — белая карточка-обёртка (стиль cart-items-section)
   ========================================================================== */
.fav-items-section {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* Список товаров внутри секции */
.favorites-items {
  /* контейнер без лишних отступов — карточки сами имеют padding */
}

/* ==========================================================================
   СТИЛИ ЗВЁЗД И РЕЙТИНГА (не трогаем)
   ========================================================================== */
.rating-value {
  font-weight: 700;
  color: #2c3e50;
  font-size: 14px;
}

.stars-small {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  font-family: 'zeldomkz';
  color: #01A572;
  font-size: 13px;
}

.review-count {
  color: #7f8c8d;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.stars-small i {
  width: 13px;
  height: 13px;
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА В ИЗБРАННОМ — НЕ ТРОГАТЬ
   ========================================================================== */

.favorite-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  padding: 20px 0;
  background: #fff;
  border-radius: 16px;
  align-items: center;
  will-change: transform;
  min-height: 190px;
  border-bottom: 1px solid var(--c-border);
  transition: background .15s;
}

.favorite-item:last-of-type {
  border-bottom: none;
}

.favorite-item:hover {
  background: #fafcff;
  /* Без сдвигов margin/padding — карточка не «юлозит». Только цвет фона. */
}

.favorite-item-image {
  width: 140px;
  height: 140px;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-bg);
  flex-shrink: 0;
}

.favorite-item-image img {
  width: 100%;
  height: 100%;
  /* cover - см. решение в css/card.css (.image-track img). */
  object-fit: cover;
}

.favorite-item-info {
  padding-right: 16px;
  min-width: 0;
}

.favorite-item-title {
  margin: 0 0 8px 0;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.favorite-item-name-en {
  color: #666;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.favorite-item-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0px;
  border-radius: 8px;
  transition: background var(--zd-dur) var(--zd-ease),
              color var(--zd-dur) var(--zd-ease);
}

.favorite-item-brand {
  display: inline-flex;
  align-items: center;
  height: 24px;
  max-width: 120px;
  flex-shrink: 0;
}

.favorite-item-brand img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(0.3);
  opacity: 0.9;
}

.favorite-item-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  height: 32px;
}

/* Краткие характеристики товара — горизонтальные пилюли (тип, срок, грунт) */
.favorite-item-props {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 8px;
  padding: 0;
  list-style: none;
}
.favorite-item-props li {
  font-size: 12px;
  font-weight: 500;
  color: #4b4b4b;
  background: #f4f5f7;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .favorite-item-props { gap: 4px; margin: 4px 0 6px; }
  .favorite-item-props li { font-size: 11px; padding: 3px 8px; }
}
@media (max-width: 480px) {
  .favorite-item-props { display: none; } /* на узких экранах — скрываем, чтобы не теснить */
}

/* color/decoration/font-weight для price/old-price идут из блока card-base
   в main.css (был отдельным файлом card-base.css, слит). Здесь — только
   overrides размеров под layout избранного.
   */
.favorite-item-price {
  font-size: 22px;
  letter-spacing: -0.5px;
  min-width: 100px;
}

.favorite-item-old-price {
  font-size: 18px;
  font-weight: 500;
  min-width: 70px;
}

.favorite-item-discount {
  background-color: #ff7700;
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  height: 28px;
  display: flex;
  align-items: center;
}

.favorite-item-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.btn-add-to-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FF7700;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  white-space: nowrap;
  min-width: 160px;
  justify-content: center;
}

.btn-add-to-cart i {
  font-size: 18px;
  color: white;
}

.btn-add-to-cart.added {
  background: #01A572;
  cursor: default;
}

.btn-remove-favorite {
  background: transparent;
  border: 1.5px solid var(--c-border);
  color: var(--c-muted);
  /* 32px были ниже минимальной зоны нажатия проекта (44px, под
     аудиторию 40-65+): в «Избранном» это единственная кнопка удаления, и
     промахнуться по ней на телефоне было легче, чем попасть.
     */
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease),
              color var(--zd-dur-fast) var(--zd-ease);
  flex-shrink: 0;
  font-size: 15px;
  align-self: flex-end;
}

.btn-remove-favorite:hover {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background: var(--c-danger-light);
}

.favorite-item-brand-logo {
  display: inline-flex;
  align-items: center;
  height: 25px;
  max-width: 130px;
  padding: 4px 0px;
  border-radius: 6px;
  flex-shrink: 0;
}

.favorite-item-brand-logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(0.3);
  opacity: 0.9;
}

/* ==========================================================================
   СКЕЛЕТОН - пока api/products/by-ids.php отвечает (js/favorites-page.js).
   Повторяет grid .favorite-item 1:1 (140px фото | инфо | auto кнопки, см.
   .favorite-item выше) - подменяется реальными карточками или
   .favorites-empty через innerHTML, когда данные приходят, отдельно убирать
   не нужно. .skel - общий шиммер из css/main.css.
   ==========================================================================
   */
.favorite-item--skel {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  padding: 20px 0;
  align-items: center;
  min-height: 190px;
  border-bottom: 1px solid var(--c-border);
}
.favorite-item--skel:last-of-type { border-bottom: none; }
.favorite-item--skel .skel-photo { width: 140px; height: 140px; border-radius: 12px; }
.favorite-item--skel .skel-info { display: flex; flex-direction: column; gap: 10px; padding-right: 16px; }
.favorite-item--skel .skel-title-1 { height: 18px; width: 85%; }
.favorite-item--skel .skel-title-2 { height: 18px; width: 55%; }
.favorite-item--skel .skel-brand { height: 20px; width: 90px; margin-top: 6px; }
.favorite-item--skel .skel-price { height: 24px; width: 110px; margin-top: 6px; }
.favorite-item--skel .skel-controls { display: flex; flex-direction: column; gap: 8px; width: 140px; }
.favorite-item--skel .skel-btn { height: 40px; width: 100%; border-radius: 9px; }
@media (max-width: 640px) {
  .favorite-item--skel { grid-template-columns: 90px 1fr; min-height: 120px; gap: 14px; }
  .favorite-item--skel .skel-photo { width: 90px; height: 90px; }
  .favorite-item--skel .skel-controls { display: none; }
}

/* ==========================================================================
   ПУСТОЕ ИЗБРАННОЕ (стиль cart-empty)
   ========================================================================== */
.favorites-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
}

.favorites-empty i {
  font-size: 56px;
  color: var(--c-border);
  margin-bottom: 16px;
  display: block;
}

.favorites-empty p {
  color: var(--c-muted);
  font-size: 16px;
  margin: 0 0 24px;
}

.btn-back-to-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-brand);
  color: #fff;
  padding: 16px 32px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s;
}

.btn-back-to-shop:hover {
  background: var(--c-brand-dark);
}

/* Окно подтверждения переехало в css/confirm-modal.css - оно одинаковое у
   корзины, избранного, сравнения и карточки товара. */

/* ==========================================================================
   МОБИЛЬНАЯ ФИКСИРОВАННАЯ ПАНЕЛЬ (над нижним меню)
   ========================================================================== */
.mobile-fav-bar {
  display: none;
  position: fixed;
  bottom: calc(65px + var(--zd-nav-lift));
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 16px 16px 22px;
  z-index: 998;
  box-shadow: 0px 13px 52px 36px rgba(0,0,0,.12);
}

.mobile-fav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--c-brand);
  padding: 16px 24px;
  border-radius: 16px;
  width: 100%;
  gap: 16px;
}

.mobile-fav-count-block {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Прозрачность съедала и без того невысокий контраст на зелёном:
   полупрозрачный белый 12px читался хуже всего на экране. Кегль на ступень
   выше, белый - чистый. Замер.
   */
.mobile-fav-label {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.mobile-fav-num {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.mobile-fav-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.mobile-fav-action i {
  font-size: 20px;
  color: #fff;
}

/* ==========================================================================
   АДАПТИВНОСТЬ
   ========================================================================== */

/* Планшеты и мобильные (≤ 1024px) */
@media screen and (max-width: 1024px) {
  .favorites-page { padding-bottom: 180px; }

  .mobile-fav-bar { display: block; }

  /* Мобильных ступеней у заголовка НЕТ вовсе. Сначала их было четыре
     (22/20/18/17px) - на Pixel 7 заголовок страницы выходил МЕЛЬЧЕ текста в
     карточках под ним. Их свели к одной, 22px, и следующий замер показал
     вторую половину беды: каталог и корзина - списки того же уровня - на
     телефоне остаются 28px, потому что мобильных переопределений у них нет
     совсем. Убрана и последняя ступень: списки держат 28px из базового правила
     на любой ширине. Замер.
     */

  .fav-actions { width: 100%; justify-content: flex-end; }

  .favorite-item {
    grid-template-columns: 120px 1fr auto;
    gap: 20px;
    padding: 20px 0;
    min-height: 170px;
  }

  .favorite-item:hover {
    margin: 0;
    padding: 20px 0;
    border-radius: 0;
  }

  .favorite-item-image {
    width: 120px;
    height: 120px;
  }

  .favorite-item-title { font-size: 18px; }
  .favorite-item-price { font-size: 20px; min-width: 90px; }

  .btn-add-to-cart {
    min-width: 140px;
    padding: 12px 16px;
    font-size: 16px;
  }
}

/* Мобильные (≤ 768px) */
@media screen and (max-width: 768px) {
  .fav-header { flex-direction: column; align-items: flex-start; margin-bottom: 28px; padding-bottom: 20px; }
  .fav-actions { width: 100%; }
  .btn-compare,
  .btn-clear-favorites { flex: 1; justify-content: center; }

  .fav-items-section { padding: 16px; }

  .favorite-item {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 16px 0;
  }

  .favorite-item-image {
    width: 100px;
    height: 100px;
    grid-row: 1;
    grid-column: 1;
  }

  .favorite-item-info {
    grid-row: 1;
    grid-column: 2;
    padding-right: 0;
  }

  .favorite-item-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
    min-width: unset;
  }

  .favorite-item-title { font-size: 16px; }
  .favorite-item-name-en { font-size: 14px; }
  .favorite-item-price { font-size: 18px; min-width: auto; }
  .favorite-item-old-price { font-size: 15px; min-width: auto; }

  .btn-add-to-cart {
    min-width: 120px;
    padding: 12px 12px;
    font-size: 14px;
  }

  .btn-add-to-cart i { font-size: 13px; }

  .mobile-fav-bar { bottom: calc(65px + var(--zd-nav-lift)); }
}

/* Маленькие телефоны (≤ 576px) */
@media screen and (max-width: 576px) {
  .favorites-page { padding-bottom: 200px; }
  .fav-items-section { padding: 12px; }

  .favorite-item {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 16px 0;
  }

  .favorite-item-image { width: 80px; height: 80px; }
  .favorite-item-title { font-size: 15px; }
  .favorite-item-name-en { font-size: 14px; }
  .favorite-item-price { font-size: 16px; }
  .favorite-item-old-price { font-size: 13px; }
  .favorite-item-discount { font-size: 11px; padding: 2px 8px; height: 22px; }

  .favorites-empty { padding: 40px 15px; }
  .favorites-empty i { font-size: 48px; }
  .favorites-empty p { font-size: 16px; }
  .btn-back-to-shop { width: 100%; justify-content: center; padding: 12px 20px; }

  .mobile-fav-bar { bottom: calc(60px + var(--zd-nav-lift)); padding: 10px 12px 18px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
  .mobile-fav-content { padding: 10px 18px; border-radius: 12px; }
  .mobile-fav-num { font-size: 18px; }
  /* min-height - зона нажатия: сама ссылка была 23px высотой, попасть
     пальцем в неё на телефоне почти нельзя. */
  .mobile-fav-action { font-size: 15px; min-height: 44px; }
}

/* Очень маленькие (≤ 440px) */
@media screen and (max-width: 440px) {

  .favorite-item {
    grid-template-columns: 70px 1fr;
    gap: 12px;
    padding: 12px 0;
  }

  .favorite-item-image { width: 70px; height: 70px; }
  .favorite-item-title { font-size: 14px; }
  .favorite-item-price { font-size: 15px; }
}

/* ==========================================================================
   Хлебные крошки (стили из info-pages.css)
   ========================================================================== */

/* =========================================================
   Модификаторы состояний карточки в избранном.
   Мягкий градиент справа налево: цвет у кнопок → прозрачный
   у картинки. Без рамки, без теней, без анимаций.
   Состояние ставит PHP по флагу из БД (in_stock / restocked).
   - --soldout    : фиолетовая подсветка, «Ждём поступления»
   - --restocked  : зелёная подсветка, «Снова в наличии!»
   ========================================================= */
.favorite-item--soldout,
.favorite-item--restocked {
  position: relative;
  border: none;
  border-bottom: 1px solid transparent;
  padding-right: 8px;  /* лёгкий запас справа, чтобы плашки не упирались в край */
  margin-bottom: 14px; /* «дышит» между подсвеченными карточками */
}
.favorite-item--soldout + .favorite-item--restocked,
.favorite-item--restocked + .favorite-item--soldout {
  margin-top: 4px; /* небольшой дополнительный отступ когда две подряд */
}
.favorite-item--soldout {
  background: linear-gradient(to left,
                              rgba(229, 211, 245, 0.55) 0%,
                              rgba(241, 232, 251, 0.3) 45%,
                              rgba(244, 238, 252, 0) 85%);
}
.favorite-item--soldout .favorite-item-image img {
  filter: grayscale(0.55) brightness(0.96);
}
.favorite-item--soldout .favorite-item-title,
.favorite-item--soldout .favorite-item-name-en {
  opacity: 0.85;
}
.favorite-item--restocked {
  background: linear-gradient(to left,
                              rgba(194, 237, 211, 0.55) 0%,
                              rgba(221, 244, 231, 0.3) 45%,
                              rgba(227, 246, 235, 0) 85%);
}

/* Hover на soldout/restocked — фон не меняется на серый #fafcff,
   сохраняется тот же градиент. */
.favorite-item--soldout:hover {
  background: linear-gradient(to left,
                              rgba(229, 211, 245, 0.55) 0%,
                              rgba(241, 232, 251, 0.3) 45%,
                              rgba(244, 238, 252, 0) 85%);
}
.favorite-item--restocked:hover {
  background: linear-gradient(to left,
                              rgba(194, 237, 211, 0.55) 0%,
                              rgba(221, 244, 231, 0.3) 45%,
                              rgba(227, 246, 235, 0) 85%);
}

/* Тег-плашка состояния (правый верхний угол). Без теней, без анимаций. */
.fav-status-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
.fav-status-tag i {
  font-size: 12px;
  line-height: 1;
}
.fav-status-tag--soldout {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
}
.fav-status-tag--restocked {
  background: linear-gradient(135deg, #01A572 0%, #019060 100%);
}

/* Статус вместо цены у товара без остатка.
   Фиолетовый - «ждём поступления», зелёный - «уже подписан»: покупателю
   должно быть видно, что его заявка принята, не вчитываясь в текст. */
.favorite-item-restock-hint {
  /* Подсказка про поступление - текст, который читают, а не подпись иконки:
     порог читаемости проекта 14px. */
  font-size: 14px;
  font-weight: 600;
  color: #5B21B6;
  line-height: 1.35;
}
.favorite-item-restock-hint--on {
  color: #0F7A44;
}

/* Кнопка «Уведомить» -> «Уведомим».
   После отправки заявки она меняет цвет на зелёный, как «Добавлено» у
   корзины: оранжевый остаётся приглашением к действию, зелёный - отметкой
   о сделанном. Одинаковый вид до и после не давал понять, прошла ли заявка.
   Кнопка при этом остаётся кликабельной - второй клик отменяет уведомление
   (с подтверждением, js/catalog.js). */
.btn-add-to-cart--notify.is-active {
  background: #01A572;
}
.btn-add-to-cart--notify.is-active:hover {
  background: #E11D48;
}
/* На наведении зелёная кнопка становится «отменить» - цвет предупреждает,
   что следующий клик снимет подписку, а не повторит её. */
.btn-add-to-cart--notify.is-active:hover .notify-text::after {
  content: ' - отменить';
}

/* Disabled-кнопка «Нет в наличии» */
.btn-add-to-cart--disabled,
.btn-add-to-cart[disabled] {
  background: #EDE7F8;
  color: #6D28D9;
  cursor: not-allowed;
  opacity: 1;
}
.btn-add-to-cart--disabled:hover,
.btn-add-to-cart[disabled]:hover {
  background: #EDE7F8;
  transform: none;
}

@media (max-width: 600px) {
  .fav-status-tag {
    top: 8px;
    right: 8px;
    height: 24px;
    padding: 0 12px;
    font-size: 10px;
    gap: 4px;
  }
  .fav-status-tag i { font-size: 11px; }
}

/* ------------------------------------------------------------------
   ДОГОВОРНАЯ ЦЕНА В ИЗБРАННОМ
   ------------------------------------------------------------------
   Те же значения, что на витрине (.hot-price--contract и .hot-add--contract
   в product-page.css): «Цена договорная» серым 16px вместо числа, кнопка
   синяя «Узнать цену» вместо оранжевой «В корзину» - синий здесь значит
   «связаться», а не «купить». Держим внешний вид одинаковым: покупатель
   видит один и тот же товар в двух списках и не должен решать, где правда. */
.favorite-item-price--contract {
  font-size: 16px;
  font-weight: 700;
  color: #616161;
  white-space: nowrap;
}
.btn-add-to-cart--contract {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #1E88E5;
}
.btn-add-to-cart--contract:hover { background: #1976D2; }


/* ===== Избранное на телефоне (И2): переключатель «Избранное / Сравнение», строки со своим фоном, круглая корзина ===== */
.fav-clear-bottom { display: none; }
@media screen and (max-width: 768px) {
  .zd-cabbar ~ .container .breadcrumbs, .zd-cabbar ~ .container nav[aria-label*="рошки"] { display: none; }
  .favorites-page .fav-header {
    display: flex; flex-direction: row; align-items: stretch; gap: 0;
    margin: 0 0 14px; padding: 3px; border: 0; border-radius: 16px; background: #F2F2F2;
  }
  .favorites-page .fav-header h1 {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin: 0; padding: 0; border-radius: 13px; background: #fff;
    font-size: 15px; font-weight: 700; color: #017A55; box-shadow: 0 1px 4px rgba(17, 24, 39, .12);
  }
  .favorites-page .fav-header h1 i { display: none; }
  .favorites-page .fav-actions { display: contents; }
  .favorites-page .btn-compare {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 13px; background: transparent;
    font-size: 15px; font-weight: 700; color: #4B5563;
  }
  .favorites-page .btn-compare i { display: none; }
  .favorites-page .btn-compare #compare-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: 12px; background: #E5E7EB; color: #374151; font-size: 14px; font-weight: 700;
  }
  .favorites-page .fav-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: 12px; background: #E6F3EC; color: #017A55; font-size: 14px; font-weight: 700; margin: 0;
  }
  .favorites-page #clear-favorites { display: none; }
  .favorites-page .fav-clear-bottom {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    min-height: 48px; margin-top: 14px; border-radius: 14px;
  }
  .favorites-page .fav-clear-bottom[hidden] { display: none; }

  .favorites-page .fav-items-section { padding: 0; }
  .favorites-page .favorite-item {
    grid-template-columns: 72px 1fr auto; grid-template-rows: auto; gap: 12px; align-items: center;
    padding: 10px; margin: 0 0 8px; min-height: 0; border: 0; border-radius: 16px; background: #F2F2F2;
  }
  .favorites-page .favorite-item:hover { margin: 0 0 8px; padding: 10px; border-radius: 16px; }
  .favorites-page .favorite-item-image { width: 72px; height: 72px; grid-row: 1; grid-column: 1; }
  .favorites-page .favorite-item-info { grid-row: 1; grid-column: 2; min-width: 0; }
  .favorites-page .favorite-item-name-en { display: none; }
  .favorites-page .favorite-item-title { font-size: 15px; line-height: 1.25; }
  .favorites-page .favorite-item-price { font-size: 16px; }
  .favorites-page .favorite-item-controls {
    grid-column: 3; grid-row: 1; flex-direction: column; align-items: center; justify-content: center;
    width: auto; min-width: 0; padding: 0; border: 0; gap: 4px;
  }
  /* Корзина кружком: подпись скрыта, остаётся значок. Кнопки «Уведомить» и «Узнать цену» держат текст. */
  .favorites-page button.btn-add-to-cart[data-action="cart"] {
    width: 44px; min-width: 0; height: 44px; padding: 0; border-radius: 50%; font-size: 0; gap: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .favorites-page button.btn-add-to-cart[data-action="cart"] i { font-size: 22px; }
  .favorites-page .btn-remove-favorite { width: 44px; height: 36px; background: transparent; color: #6B7280; }
  .mobile-fav-bar { display: none; }
  .favorites-page { padding-bottom: calc(var(--zd-nav-base, 65px) + var(--zd-nav-lift, 14px) + 24px); }
}

@media screen and (max-width: 768px) {
  .favorites-page .fav-items-section { border: 0; background: transparent; box-shadow: none; }
  .favorites-page .favorite-item-meta { margin: 2px 0 4px; }
  .favorites-page .favorite-item-brand-logo img { height: 18px; width: auto; max-width: 96px; }
}

/* ===== Узкие экраны (320 и 280px): ничего не вылезает за край, все блоки видны ===== */
/* Избранное: зона крестика 44px. */
@media (max-width: 768px) {
  .favorites-page .btn-remove-favorite { height: 44px; }
}


/* Корзина в строке избранного - наш стандарт скругления (12px), не круг. */
@media screen and (max-width: 768px) {
  .favorites-page button.btn-add-to-cart[data-action="cart"] { border-radius: 12px; }
}
/* Компактный размер до 400px. */
@media screen and (max-width: 400px) {
  .favorites-page .fav-header { margin-bottom: 10px; }
  .favorites-page .fav-header h1, .favorites-page .btn-compare { min-height: 40px; font-size: 14px; }
  .favorites-page .favorite-item { grid-template-columns: 60px 1fr auto; gap: 10px; padding: 8px; border-radius: 14px; }
  .favorites-page .favorite-item-image { width: 60px; height: 60px; }
  .favorites-page .favorite-item-title { font-size: 14px; }
  .favorites-page .favorite-item-price { font-size: 15px; }
  .favorites-page .favorite-item-old-price { font-size: 12px; }
  .favorites-page button.btn-add-to-cart[data-action="cart"] { width: 40px; height: 40px; }
  .favorites-page button.btn-add-to-cart[data-action="cart"] i { font-size: 20px; }
  .favorites-page .btn-remove-favorite { width: 40px; height: 40px; }
  .favorites-page .fav-clear-bottom { min-height: 44px; font-size: 14px; }
}

/* Компьютер: шапка «Избранное / Сравнение» - вкладки, как у сравнения (css/comparison.css, .cmp-switch).
   «Избранное» - активная вкладка, «Сравнение» - соседняя вкладка-ссылка, «Очистить» справа. Значок у заголовка убран. */
@media screen and (min-width: 769px) {
  .favorites-page .fav-header { align-items: flex-end; margin-top: 0; padding-bottom: 0; border-bottom: 1px solid #E5E7EB; gap: 28px; }
  .favorites-page .fav-header h1 {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 -1px; padding: 0 2px 12px;
    border-bottom: 3px solid #01A572; font-size: 26px; font-weight: 700; line-height: 1.2; color: #111827;
  }
  .favorites-page .fav-header h1 i { display: none; }
  .favorites-page .fav-actions { display: contents; }
  .favorites-page .btn-compare {
    display: inline-flex; align-items: center; gap: 10px; height: auto; margin: 0 0 -1px; padding: 0 2px 12px;
    border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
    font-size: 26px; font-weight: 700; line-height: 1.2; color: #6B7280;
  }
  .favorites-page .btn-compare:hover { color: #111827; background: none; }
  .favorites-page .btn-compare i { display: none; }
  .favorites-page .fav-badge, .favorites-page .btn-compare #compare-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px;
    border-radius: 14px; font-size: 15px; font-weight: 700;
  }
  .favorites-page .fav-badge { background: #E6F3EC; color: #017A55; }
  .favorites-page .btn-compare #compare-count { background: #F3F4F6; color: #4B5563; }
  .favorites-page #clear-favorites { margin-left: auto; margin-bottom: 0; align-self: flex-start; }
}

/* Гостевое избранное (без меню кабинета) - колонка всегда во всю ширину. Тело страницы флексовое, и без этого ширина шла от содержимого:
   скелетон, пустой список и список с товаром были разной ширины - колонка прыгала при загрузке. */
body:not(:has(> aside)) > main.favorites-page { flex: 1 1 auto; min-width: 0; align-self: stretch; box-sizing: border-box; width: 100%; }

/* Скелетон строки на телефоне - форма настоящей карточки: серая, фото 60, справа две кнопки 40. */
@media (max-width: 640px) {
  .favorite-item--skel { grid-template-columns: 60px 1fr 40px; gap: 10px; min-height: 100px; padding: 8px; margin-bottom: 8px; border: 0; border-radius: 14px; background: #F2F2F2; align-items: center; }
  .favorite-item--skel .skel-photo { width: 60px; height: 60px; border-radius: 10px; }
  .favorite-item--skel .skel-info { gap: 8px; padding-right: 0; }
  .favorite-item--skel .skel-title-2, .favorite-item--skel .skel-brand { display: none; }
  .favorite-item--skel .skel-title-1 { height: 16px; width: 80%; }
  .favorite-item--skel .skel-price { height: 20px; width: 80px; margin-top: 0; }
  .favorite-item--skel .skel-controls { display: flex; width: 40px; gap: 4px; }
  .favorite-item--skel .skel-btn { width: 40px; height: 40px; border-radius: 9px; }
}
/* Скругления скелетона = скругления настоящей карточки (замер). */
.favorite-item--skel { border-radius: 16px; }
.favorite-item--skel .skel-btn { border-radius: 8px; }
@media (max-width: 640px) {
  .favorite-item--skel { border-radius: 14px; }
  .favorite-item--skel .skel-photo { border-radius: 12px; }
  .favorite-item--skel .skel-btn { border-radius: 12px; }
}