/* Внешний вид корзины. Логика — в cart.js (его правит соседний чат), здесь ТОЛЬКО стили.
   Свои правила cart.js вставляет <style> в head уже после загрузки страницы, поэтому
   каждый селектор ниже начинается с #hc-wrap / #hc-panel — id перевешивает их класс. */

/* --- появление --- */
@keyframes hc-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes hc-slide { from { transform: translateX(24px); opacity: .4 } to { transform: none; opacity: 1 } }
#hc-wrap.on #hc-bg { animation: hc-fade .18s ease both; background: rgba(17,19,24,.5); backdrop-filter: blur(3px) }
#hc-wrap.on #hc-panel { animation: hc-slide .28s cubic-bezier(.22,1,.36,1) both }

/* --- панель --- */
#hc-wrap #hc-panel {
  max-width: 452px; background: #f7f8fa; color: #14161c;
  border-radius: 18px 0 0 18px; overflow: hidden;
  box-shadow: -24px 0 60px rgba(16,24,40,.18);
  font: 15px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
}
#hc-wrap #hc-head {
  padding: 18px 20px 16px; background: #fff;
  border-bottom: 1px solid #ebeef3;
}
#hc-wrap #hc-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em }
#hc-wrap #hc-x {
  width: 34px; height: 34px; border-radius: 10px; font-size: 17px; color: #6D7380;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
#hc-wrap #hc-x:hover { background: #f1f3f7; color: #14161c }
#hc-wrap #hc-body { padding: 14px 16px; background: #f7f8fa; scrollbar-width: thin }
#hc-wrap #hc-body::-webkit-scrollbar { width: 8px }
#hc-wrap #hc-body::-webkit-scrollbar-thumb { background: #d9dee7; border-radius: 8px }

/* --- строка товара: карточка --- */
#hc-panel .hc-row {
  align-items: flex-start; gap: 12px; padding: 12px; margin-bottom: 10px;
  background: #fff; border: 1px solid #ebeef3; border-bottom: 1px solid #ebeef3;
  border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
/* ⛔ без min-width:0 длинное название распирает флекс — панель уезжала в бок */
#hc-panel .hc-row > div { min-width: 0 }
#hc-panel .hc-row img {
  width: 64px; height: 64px; padding: 6px; box-sizing: border-box;
  background: #f7f8fa; border: 1px solid #eef1f5; border-radius: 11px;
}
#hc-panel .hc-nm {
  font-size: 14px; font-weight: 600; line-height: 1.35; color: #14161c;
  margin: 1px 0 5px; overflow-wrap: anywhere;
}
#hc-panel .hc-pr { font-size: 14px; font-weight: 700; color: #14161c; font-variant-numeric: tabular-nums }

/* --- количество --- */
#hc-panel .hc-q { gap: 8px; margin-top: 10px }
#hc-panel .hc-q button[data-m], #hc-panel .hc-q button[data-p] {
  width: 30px; height: 30px; border: 1px solid #e2e7ef; border-radius: 9px;
  background: #fff; color: #14161c; font-size: 17px;
  transition: background .13s, border-color .13s;
}
#hc-panel .hc-q button[data-m]:hover, #hc-panel .hc-q button[data-p]:hover { background: #f4f6f9; border-color: #cfd6e2 }
#hc-panel .hc-q span { min-width: 22px; font-weight: 600; font-variant-numeric: tabular-nums }
#hc-panel .hc-del { color: #a2aab8; font-size: 12.5px; transition: color .13s }
#hc-panel .hc-del:hover { color: #e8174c; text-decoration: underline }

/* --- низ --- */
#hc-wrap #hc-foot {
  background: #fff; border-top: 1px solid #ebeef3;
  box-shadow: 0 -8px 24px rgba(16,24,40,.06);
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
}
#hc-panel .hc-sum { align-items: baseline; margin-bottom: 14px }
#hc-panel .hc-sum span:first-child { font-size: 15px; font-weight: 600; color: #6b7280 }
#hc-panel .hc-sum span:last-child { font-size: 23px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
#hc-panel .hc-btn {
  border-radius: 12px; padding: 16px; font-size: 16.5px;
  box-shadow: 0 8px 20px rgba(232,23,76,.26);
  transition: transform .12s, box-shadow .2s, background .2s;
}
#hc-panel .hc-btn:hover { background: #d4123f; box-shadow: 0 12px 26px rgba(232,23,76,.34); transform: translateY(-1px) }
#hc-panel .hc-btn:active { transform: none; box-shadow: 0 6px 14px rgba(232,23,76,.26) }
#hc-panel .hc-tg { border-radius: 12px; transition: background .18s }
#hc-panel .hc-tg:hover { background: #1c9ad9 }

/* --- форма --- */
#hc-panel .hc-f span { font-weight: 600; color: #4b5565 }
#hc-panel .hc-f input, #hc-panel .hc-f textarea {
  border-radius: 11px; border-color: #e2e7ef; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#hc-panel .hc-f input:focus, #hc-panel .hc-f textarea:focus { box-shadow: 0 0 0 3px rgba(232,23,76,.13) }
#hc-panel .hc-empty { padding: 56px 16px; font-size: 15px; line-height: 1.7 }

/* --- кнопка-бейдж --- */
#hc-badge {
  border-radius: 14px; padding: 13px 17px;
  box-shadow: 0 10px 28px rgba(232,23,76,.36);
  transition: transform .13s, box-shadow .2s;
}
#hc-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(232,23,76,.44) }

/* --- телефон --- */
@media (max-width: 520px) {
  #hc-wrap #hc-panel { border-radius: 0 }
  #hc-wrap #hc-body { padding: 12px }
  #hc-panel .hc-row { padding: 11px }
}
@media (prefers-reduced-motion: reduce) {
  #hc-wrap.on #hc-bg, #hc-wrap.on #hc-panel { animation: none }
  #hc-panel .hc-btn, #hc-badge { transition: none }
}

/* --- поправки после проверки в браузере --- */

/* виджет amoCRM сидит на z-index 100000 и перекрывал сумму и кнопку заказа */
#hc-wrap#hc-wrap { z-index: 100002 }
#hc-badge#hc-badge { z-index: 100001 }

/* «удалить» не помещалось в строку и вылезало за карточку — уводим крестиком в угол.
   Текст оставляем в разметке (text-indent), чтобы читалка его озвучивала. */
#hc-panel .hc-row { position: relative }
#hc-panel .hc-del {
  position: absolute; top: 8px; right: 8px; margin: 0;
  width: 28px; height: 28px; border-radius: 8px; border: 0; background: none;
  overflow: hidden; white-space: nowrap; text-indent: -999px;
  transition: background .13s;
}
#hc-panel .hc-del::after {
  content: "\2715"; position: absolute; inset: 0; text-indent: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #b3bac6;
}
#hc-panel .hc-del:hover { background: #fdf0f3; text-decoration: none }
#hc-panel .hc-del:hover::after { color: #e8174c }
#hc-panel .hc-nm { padding-right: 30px }

/* Виджет amoCRM ставит себе z-index на единицу выше самого высокого на странице —
   гонку не выиграть, поэтому фиксируем его ниже корзины (инлайн-стиль бьётся только
   через !important) и убираем с глаз, пока корзина открыта. Сам чат остаётся рабочим. */
.amo-button-holder { z-index: 99990 !important }
body:has(#hc-wrap.on) .amo-button-holder,
body:has(#hc-wrap.on) .gradus-mobbar { opacity: 0; pointer-events: none; transition: opacity .15s }

/* ================= липкая шапка =================
   Только на широких экранах: на телефоне снизу уже есть панель с телефоном и
   Telegram (.gradus-mobbar), а шапка высотой 113 px съедала бы треть экрана.
   Шапка — прямой ребёнок body, у родителей overflow: visible, поэтому sticky держится.
   Тень статичная: scroll-таймлайн (animation-timeline) в проверке не применился
   и подвешивал отрисовку — за красивое затемнение по прокрутке платить кадрами не стоит. */
@media (min-width: 769px) {
  .site-header {
    position: sticky; top: 0; z-index: 900;
    background: #fff;
    box-shadow: 0 1px 0 rgba(16,24,40,.08);
  }
}

/* ================= контраст (отчёт PageSpeed → Accessibility) =================
   Два случая, где глобальная замена цвета не годится: один и тот же цвет стоит
   на светлом и на тёмном фоне, и «сделать темнее» помогает только на одном из них. */

/* Меню в тёмном футере: синий темы на #0e1014 давал 3.85 — ОСВЕТЛЯЕМ до 4.53. */
.gradus-footer__col a { color: #3280c4 }

/* «Корзина» в шапке: розовый на светло-розовой плашке давал 3.71 — затемняем до 4.53. */
.gradus-cart__label { color: #BD2759 }