/* ============================================================
   ИЗБРАННОЕ И СРАВНЕНИЕ ТЕХНИКИ
   Иконки в шапке, кнопки на карточках и странице товара,
   два модальных окна — «Избранное» и «Сравнение».
   ============================================================ */

/* пункт «Каталог» в мобильном меню — включается только на узких экранах */
.nav__link--catalog{
  display:none;
  width:100%;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

/* ---------- иконки в шапке ---------- */
.header__ico{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--ink-600);
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.header__ico svg{display:block;width:19px;height:19px}
.header__ico:hover{
  color:var(--red-600);
  border-color:rgba(227,30,36,.35);
  background:var(--red-050);
}
.header__ico.is-on{color:var(--red-600)}
.header__ico-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:var(--red-600);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  box-shadow:0 0 0 2px var(--white);
  pointer-events:none;
}
.header__ico-badge[hidden]{display:none}

/* ---------- кнопки на карточке товара ---------- */
.prod{position:relative}
.prod__acts{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.prod__act{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--ink-600);
  box-shadow:0 1px 4px rgba(23,25,28,.08);
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
.prod__act-ico{display:flex;align-items:center;justify-content:center}
.prod__act svg{display:block;width:17px;height:17px}
.prod__act:hover{
  color:var(--red-600);
  border-color:rgba(227,30,36,.4);
  background:#fff;
}
.prod__act.is-on{
  color:#fff;
  background:var(--red-600);
  border-color:var(--red-600);
}
.prod__act.is-on:hover{
  background:var(--red-700);
  border-color:var(--red-700);
  color:#fff;
}

/* ---------- кнопки на странице товара ---------- */
.pp-act{
  gap:9px;
}
.pp-act__ico{display:flex;align-items:center}
.pp-act svg{display:block;width:18px;height:18px}
.pp-act.is-on{
  color:var(--red-600);
  border-color:rgba(227,30,36,.4);
  background:var(--red-050);
}
.pp-act.is-on:hover{
  background:var(--red-050);
  border-color:var(--red-600);
}

/* ---------- всплывающая подсказка ---------- */
.fav-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:200;
  transform:translate(-50%,16px);
  max-width:calc(100vw - 32px);
  padding:12px 20px;
  border-radius:10px;
  background:var(--ink-900);
  color:#fff;
  font-size:13.5px;
  font-weight:500;
  line-height:1.3;
  box-shadow:0 14px 40px rgba(23,25,28,.3);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events:none;
}
.fav-toast.is-on{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

/* ============================================================
   МОДАЛЬНЫЕ ОКНА
   ============================================================ */
.modal__panel--fav{max-width:560px}
.modal__panel--cmp{max-width:1020px}

/* ---------- пустое состояние ---------- */
.pick-empty{
  padding:34px 20px;
  border:1px dashed var(--line);
  border-radius:var(--radius-md);
  text-align:center;
}
.pick-empty__title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  color:var(--ink-900);
}
.pick-empty__text{
  margin-top:6px;
  font-size:13px;
  line-height:1.45;
  color:var(--ink-400);
}
.pick-empty__text b{color:var(--red-600)}

/* ---------- список избранного ---------- */
.pick-list{display:grid;gap:8px}
.pick{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pick:hover{border-color:transparent;box-shadow:var(--shadow-md)}
.pick__media{
  display:block;
  overflow:hidden;
  border-radius:8px;
  background:var(--surface);
}
.pick__thumb{display:block;aspect-ratio:3/2}
.pick__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pick__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.pick__title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:13.5px;
  line-height:1.3;
  color:var(--ink-900);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pick__title:hover{color:var(--red-600)}
.pick__price{font-size:13px;font-weight:700;color:var(--ink-900)}
.pick__acts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.pick__btn{
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  font-size:12px;
  font-weight:600;
  color:var(--ink-600);
  white-space:nowrap;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.pick__btn:hover{color:var(--red-600);border-color:rgba(227,30,36,.4);background:var(--red-050)}
.pick__btn.is-on{color:var(--red-600);border-color:rgba(227,30,36,.35);background:var(--red-050)}
.pick__btn--del:hover{color:var(--ink-900);border-color:var(--ink-300);background:var(--surface)}

/* подвал списка избранного */
.pick-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.pick-foot[hidden]{display:none}
.pick-foot .btn{flex:0 0 auto}

/* ============================================================
   СРАВНЕНИЕ
   ============================================================ */
.cmp__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 -4px;
  padding:0 4px 4px;
}
.cmp__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.cmp__table th,
.cmp__table td{
  padding:11px 12px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
/* первая колонка — названия характеристик, прилипает при прокрутке */
.cmp__corner,
.cmp__name{
  position:sticky;
  left:0;
  z-index:2;
  width:180px;
  background:var(--white);
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-400);
}
.cmp__corner{border-bottom:0}
.cmp__name{font-weight:500}
.cmp__col{
  position:relative;
  /* 180 + 4×190 = 940 — четыре колонки влезают в окно 1020 без прокрутки */
  width:190px;
  padding-top:16px !important;
  padding-bottom:14px !important;
  vertical-align:top;
  border-bottom:0;
}
.cmp__del{
  position:absolute;
  top:4px;
  right:4px;
  z-index:3;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:50%;
  /* лежит на углу фотографии — белая подложка, чтобы читалось на любом кадре */
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(23,25,28,.18);
  font-size:18px;
  line-height:1;
  color:var(--ink-600);
  transition:color .18s ease, background-color .18s ease;
}
.cmp__del:hover{color:#fff;background:var(--red-600)}
.cmp__media{
  display:block;
  overflow:hidden;
  border-radius:8px;
  background:var(--surface);
}
.cmp__thumb{display:block;aspect-ratio:3/2}
.cmp__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cmp__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:9px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  color:var(--ink-900);
}
.cmp__title:hover{color:var(--red-600)}
.cmp__price{
  display:block;
  margin-top:5px;
  font-size:13px;
  font-weight:700;
  color:var(--ink-900);
}
.cmp__val{
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink-900);
}
.cmp__dash{color:#C8CCD0;font-weight:400}
.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td{border-bottom:0}

/* подсказка появляется только там, где таблица действительно прокручивается */
.cmp__swipe{
  display:none;
  margin-top:10px;
  font-size:12px;
  color:var(--ink-400);
}

.cmp__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.cmp__clear{
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-600);
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.cmp__clear:hover{color:var(--red-600);border-color:rgba(227,30,36,.4);background:var(--red-050)}
.cmp__hint{font-size:12.5px;color:var(--ink-400);white-space:nowrap}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:820px){
  .header__ico{width:36px;height:36px}
  .header__ico svg{width:18px;height:18px}
  /* телефон в шапке дублирует тот, что в топбаре, а место нужно иконкам */
  .header__phone{display:none}
}

/* на телефоне в шапке семь элементов — поджимаем иконки и зазоры,
   иначе строка не влезает и бургер уезжает за экран */
@media (max-width:560px){
  .header__in{gap:6px}
  .header__actions{gap:6px}
  .header__ico{width:32px;height:32px}
  .header__ico svg{width:16px;height:16px}
  .header__ico-badge{top:-5px;right:-5px;min-width:16px;height:16px;line-height:16px;font-size:10px}
  .logo__img{height:30px}
}

@media (max-width:560px){
  .modal__panel--fav,
  .modal__panel--cmp{padding:30px 18px 22px}
  .pick{grid-template-columns:64px minmax(0,1fr);gap:10px}
  .pick__acts{grid-column:1 / -1;flex-direction:row}
  .pick__btn{flex:1 1 0;text-align:center}
  .pick-foot{flex-wrap:wrap}
  .pick-foot .btn{flex:1 1 0;justify-content:center}
  .cmp__corner,
  .cmp__name{width:132px;font-size:11.5px}
  .cmp__col{width:180px}
  .cmp__table th,
  .cmp__table td{padding:9px 10px}
  .cmp__foot{flex-wrap:wrap}
  .cmp__swipe{display:block}
  .fav-toast{left:16px;right:16px;transform:translate(0,16px);text-align:center}
  .fav-toast.is-on{transform:translate(0,0)}
}

/* в 390–480 px лого, «Каталог», поиск, избранное, сравнение и бургер
   в одну строку не влезают — «Каталог» уходит первым пунктом меню */
@media (max-width:480px){
  .catalog-btn{display:none}
  .nav--open .nav__link--catalog{
    display:block;
    font-weight:700;
    color:var(--red-600);
  }
  .nav--open .nav__link--catalog::before{
    content:"";
    display:inline-block;
    width:16px;height:2px;
    margin-right:8px;
    vertical-align:middle;
    background:currentColor;
    box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
}

@media (max-width:400px){
  .header__ico{width:30px;height:30px}
  .header__ico svg{width:15px;height:15px}
  .prod__act{width:30px;height:30px}
  .prod__act svg{width:15px;height:15px}
}