:root{--hc-accent:#2e6bf0;--hc-accent-soft:rgba(46,107,240,.4)}
/* Внешний вид корзины бренда. Сделан из скина эталонного бренда:
   правила бренда-эталона убраны, фирменные цвета заменены.
   Логика корзины — в cart.js, он общий и от бренда не зависит. */
/* Внешний вид корзины. Логика — в 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: #2e6bf0; 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(46,107,240,.26);
  transition: transform .12s, box-shadow .2s, background .2s;
}
#hc-panel .hc-btn:hover { background: #2557c8; box-shadow: 0 12px 26px rgba(46,107,240,.34); transform: translateY(-1px) }
#hc-panel .hc-btn:active { transform: none; box-shadow: 0 6px 14px rgba(46,107,240,.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(46,107,240,.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(46,107,240,.36);
  transition: transform .13s, box-shadow .2s;
}
#hc-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(46,107,240,.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: #2e6bf0 }
#hc-panel .hc-nm { padding-right: 30px }

/* Виджет amoCRM ставит себе z-index на единицу выше самого высокого на странице —
   гонку не выиграть, поэтому фиксируем его ниже корзины (инлайн-стиль бьётся только
   через !important) и убираем с глаз, пока корзина открыта. Сам чат остаётся рабочим. */
.amo-button-holder { z-index: 99990 !important }


/* ================= липкая шапка =================
   Только на широких экранах: на телефоне снизу уже есть панель с телефоном и
   Telegram в нижней панели, а шапка высотой 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);
  }
}



/* ===== замечания владельца по корзине с телефона (31.08) ===== */

/* «Плохо видно окно закрытия» — крестик был бледно-серый без фона.
   Делаем его тёмным, на светлой подложке и крупнее под палец. */
#hc-wrap #hc-x {
  width: 40px; height: 40px; border-radius: 12px;
  background: #f1f3f7; color: #14161c;
  font-size: 19px; font-weight: 600;
}
#hc-wrap #hc-x:hover, #hc-wrap #hc-x:active { background: #e4e7ee; color: #000 }

/* «Когда хочу вверх или вниз провести, то сзади двигается сайт» — пока корзина
   открыта, страница под ней прокручиваться не должна: палец промахивается мимо
   списка товаров и уезжает каталог, а вернувшись, человек теряет своё место. */
/* Прокрутку держит КОРНЕВОЙ элемент, не body — одного body мало,
   страница продолжала ехать под открытой панелью. */
html:has(#hc-wrap.on), body:has(#hc-wrap.on) { overflow: hidden }
#hc-wrap #hc-body { overscroll-behavior: contain }

/* ===== корзина: замечания владельца 31.08 ===== */

/* «Почему её по центру не сделать» — на широком экране панель у края выглядит
   обрубком. Делаем окном по центру, с полями вокруг и скруглением со всех сторон. */
@media (min-width: 641px) {
  #hc-wrap #hc-panel {
    top: 50%; right: 50%; bottom: auto;
    transform: translate(50%, -50%);
    max-width: 480px; max-height: min(760px, 88vh);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(16,24,40,.28);
  }
  @keyframes hc-slide {
    from { transform: translate(50%, -46%); opacity: 0 }
    to   { transform: translate(50%, -50%); opacity: 1 }
  }
}

/* «Без отступов» — воздуха не хватало и снаружи, и внутри карточек. */
#hc-wrap #hc-body { padding: 16px 18px }
#hc-wrap #hc-head { padding: 20px 20px 16px }
#hc-wrap #hc-foot { padding: 18px 20px 20px }
#hc-panel .hc-row { padding: 14px; margin-bottom: 12px; gap: 14px }

/* «Кнопка Корзина сливается» — на светлом фоне сайта её почти не видно.
   Добавляем контрастную обводку и тень поплотнее. */
#hc-badge {
  box-shadow: 0 10px 28px rgba(46,107,240,.42), 0 0 0 3px #fff;
  font-weight: 700;
}

/* Отклик кнопки «В корзину»: подтверждение видно на самой кнопке. */
.hc-added {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

/* ===== замечания владельца 31.08, вторая порция ===== */

/* Плавающая кнопка «Корзина» внизу перекрывала контент и терялась на фоне.
   Убираем её совсем: корзина живёт в шапке, там ей и место. */
#hc-badge, #hc-badge.on { display: none !important }

/* На «Магазине» товаров нет — там плитки категорий. Фильтр по цене фильтровать
   там нечего, поэтому на этой странице его не показываем (на категориях он остаётся). */
/* Фильтр цены на витрине «Магазин» работает по всему каталогу:
   применяешь границы — вместо плиток категорий показываются товары. */



/* ===== «положили в корзину» должно быть ВИДНО (замечание владельца 31.08) =====
   Раньше кнопка просто меняла надпись тем же бледно-розовым по прозрачному — на глаз
   ничего не происходило. Теперь она заливается зелёным с галочкой, а счётчик в шапке
   коротко подпрыгивает: понятно, что товар ушёл именно в корзину. */
/* Селектор длиннее, чем у темы: она красит кнопку каталога правилом
   `.woocommerce ul.products li.product .button{background:transparent!important}`,
   и короткий селектор с !important его не перебивал. */
.woocommerce ul.products li.product .button.hc-added,
.woocommerce ul.products li.product a.button.hc-added,
.single-product .single_add_to_cart_button.hc-added,
.add_to_cart_button.hc-added {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  animation: hc-pop .32s ease;
}
.add_to_cart_button.hc-added::before { content: "✓ "; font-weight: 700 }
@keyframes hc-pop {
  0%   { transform: scale(1) }
  45%  { transform: scale(1.06) }
  100% { transform: scale(1) }
}

@keyframes hc-bump {
  0%   { transform: scale(1) }
  35%  { transform: scale(1.45) }
  100% { transform: scale(1) }
}
@media (prefers-reduced-motion: reduce) {

}

/* ===== карточки категорий на «Магазине» (замечание владельца 31.08) =====
   Было тесно и не читалось как кнопка: картинка, название и счётчик жались друг к другу,
   нажимать было непонятно куда. Даём воздух и добавляем «Смотреть» — карточка целиком
   и так ссылка, кнопка лишь показывает это глазом. */
.woocommerce ul.products li.product.product-category > a {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px 18px; height: 100%; box-sizing: border-box;
  text-decoration: none;
}
.woocommerce ul.products li.product.product-category img {
  margin: 0 auto 16px !important;
}
.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title {
  margin: 0 0 4px; font-size: 17px; font-weight: 700; text-align: center;
}
.woocommerce ul.products li.product.product-category .count {
  color: #6f6f6f; font-size: 13px; background: none;
}
/* «Смотреть» рисуем через ::after у ссылки — разметку не трогаем */
.woocommerce ul.products li.product.product-category > a::after {
  content: "Смотреть";
  margin-top: 14px; padding: 9px 20px;
  border: 1.5px solid #2e6bf0; border-radius: 999px;
  color: #2e6bf0; font: 700 13px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  transition: background .15s, color .15s;
}
.woocommerce ul.products li.product.product-category > a:hover::after {
  background: #2e6bf0; color: #fff;
}





/* ===== телефон: корзина и липкая шапка (замечания владельца 31.08) =====
   На узком экране корзина уезжала внутрь свёрнутого меню — покупатель её не видел
   и не понимал, что товар добавлен. Вытаскиваем в шапку рядом с «гамбургером». */
@media (max-width: 768px) {

  .site-header .inside-header { position: relative }



  /* Шапка липкая и на телефоне — иначе, пролистав каталог, покупатель теряет
     и меню, и корзину. Делаем её компактнее, чтобы не съедала экран. */
  .site-header {
    position: sticky; top: 0; z-index: 900;
    background: #fff; box-shadow: 0 1px 0 rgba(16,24,40,.08);
  }
  .site-header .inside-header { padding-top: 10px; padding-bottom: 10px }
  .site-logo img, .header-image { max-height: 42px; width: auto }
}


/* счётчик остаётся белым кружком с красной цифрой */



/* Корзина в шапке телефона наезжала на «гамбургер», а счётчик срезался верхним
   краем шапки. Отодвигаем левее и разрешаем кружку выходить за границы. */
@media (max-width: 768px) {




  .site-header, .site-header .inside-header { overflow: visible }
}



@media (max-width: 768px) {
   /* дубли нижней панели */

  .main-navigation.sub-menu-right.toggled {
    position: relative; z-index: 950;
    width: 100% !important; max-width: none !important;
    background: #fff !important;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 18px 44px rgba(16,24,40,.30);
    padding-bottom: 4px;
  }
  .main-navigation.sub-menu-right.toggled::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(12,14,18,.62); z-index: -1;
  }
  .main-navigation.sub-menu-right.toggled .inside-navigation,
  .main-navigation.sub-menu-right.toggled .main-nav,
  .main-navigation.sub-menu-right.toggled ul.menu { width: 100% !important; max-width: none !important }
  .main-navigation.sub-menu-right.toggled ul.menu > li { width: 100%; border-top: 1px solid #f0f2f5 }
  .main-navigation.sub-menu-right.toggled ul.menu > li:first-child { border-top: 0 }
  .main-navigation.sub-menu-right.toggled ul.menu > li > a {
    padding: 17px 22px !important;
    font: 600 17px/1.2 -apple-system, "Segoe UI", system-ui, sans-serif;
    color: #14161c;
  }
  /* явная строка «Закрыть» — только у настоящего меню */
  .main-navigation.sub-menu-right.toggled::after {
    content: "✕  Закрыть";
    display: block; padding: 15px 22px;
    border-top: 1px solid #f0f2f5;
    color: #8b93a3; font: 600 15px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  }
  .header-image, .site-logo img {
    max-height: 40px !important; width: auto !important; height: auto !important;
    object-fit: contain; display: block;
  }
}


@media (max-width: 768px) {
  .site-header .inside-header { position: relative }
  .main-navigation.sub-menu-right.toggled {
    position: absolute !important;
    left: 0 !important; right: 0 !important; top: 100%;
    width: auto !important;
    border-radius: 0 0 18px 18px;
  }
}





/* ===== мобильное меню (замечания владельца 31.08: поля, тень, по центру) =====
   ⛔ .main-navigation в теме ДВА: обёртка кнопки и само меню (.sub-menu-right).
   На весь экран без полей текст упирался в левый край и обрезался — делаем карточку. */
@media (max-width: 768px) {


  .main-navigation.sub-menu-right.toggled {
    position: fixed !important;
    top: 74px; left: 12px; right: 12px; bottom: auto;
    width: auto !important; max-width: none !important;
    z-index: 940;
    background: #fff !important;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(16,24,40,.26);
    overflow: hidden;
    padding: 6px 0 !important;
    margin: 0 !important;
    animation: hc-menu .2s ease both;
  }
  @keyframes hc-menu { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }

  /* затемнение под карточкой, чтобы каталог не мешал читать */
  .main-navigation.sub-menu-right.toggled::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(12,14,18,.5); z-index: -1;
  }

  .main-navigation.sub-menu-right.toggled .inside-navigation,
  .main-navigation.sub-menu-right.toggled .main-nav,
  .main-navigation.sub-menu-right.toggled ul.menu {
    width: 100% !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important;
  }
  .main-navigation.sub-menu-right.toggled ul.menu > li {
    width: 100%; border-bottom: 1px solid #f1f3f6;
  }
  .main-navigation.sub-menu-right.toggled ul.menu > li:last-child { border-bottom: 0 }
  .main-navigation.sub-menu-right.toggled ul.menu > li > a {
    display: block; text-align: center;
    padding: 18px 20px !important;
    font: 600 17px/1.2 -apple-system, "Segoe UI", system-ui, sans-serif;
    color: #14161c;
  }
  .main-navigation.sub-menu-right.toggled ul.menu > li.current-menu-item > a,
  .main-navigation.sub-menu-right.toggled ul.menu > li > a:active {
    background: #fdeef2; color: #2e6bf0;
  }
  .main-navigation.sub-menu-right.toggled::after { content: none }
}

/* Тема перебивала поля и выравнивание меню своими правилами — ставим !important
   на позицию карточки и на центрирование пунктов. */
@media (max-width: 768px) {
  .main-navigation.sub-menu-right.toggled {
    left: 12px !important; right: 12px !important;
    top: 74px !important; bottom: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .main-navigation.sub-menu-right.toggled ul.menu > li > a,
  .main-navigation.sub-menu-right.toggled .main-nav ul li a {
    text-align: center !important;
    padding: 18px 20px !important;
  }
}

/* Пункт меню — flex-элемент: в нём центрирует justify-content, а не text-align,
   поэтому текст оставался слева. И затемнение уходило под страницу из-за
   отрицательного слоя — поднимаем его над содержимым, но под саму карточку. */
@media (max-width: 768px) {
  .main-navigation.sub-menu-right.toggled ul.menu > li > a,
  .main-navigation.sub-menu-right.toggled .main-nav ul li a {
    justify-content: center !important;
    display: flex !important; align-items: center;
  }
  .main-navigation.sub-menu-right.toggled::before {
    z-index: -1 !important;
    position: fixed !important; inset: 0 !important;
    background: rgba(12,14,18,.5) !important;
  }
  
}


/* ===== затемнение под меню + крестик кнопкой (замечания владельца 31.08) ===== */
@media (max-width: 768px) {
  /* Слой затемнения вешаем на body: псевдоэлемент самого меню с z-index:-1
     уходил под карточку вместе с ней и фон не темнел. */
  body:has(.main-navigation.sub-menu-right.toggled)::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(10,12,16,.55);
    z-index: 930; pointer-events: none;
  }
  .main-navigation.sub-menu-right.toggled { z-index: 940 !important }
  .main-navigation.sub-menu-right.toggled::before { content: none !important }
  /* шапка остаётся над затемнением: там корзина и крестик */
  .site-header { z-index: 950 !important }

  /* Крестик — такая же кнопка, как корзина: размер, скругление, фирменный цвет */
  .menu-toggle {
    width: 46px !important; height: 40px !important;
    border-radius: 12px !important;
    background: #FDE7EC !important;
    color: #2e6bf0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .menu-toggle:active { background: #f9d3dc !important }
  .menu-toggle svg, .menu-toggle .gp-icon { width: 22px; height: 22px }
}

/* Внутри шторки лежит второй экземпляр кнопки меню — он рисовался строкой «✕ Меню»
   над пунктами и дублировал крестик в шапке. Внутри карточки он не нужен. */
@media (max-width: 768px) {
  .main-navigation.sub-menu-right.toggled .menu-toggle,
  .main-navigation.sub-menu-right .menu-toggle { display: none !important }
}


@media (max-width: 700px) {

}