/* ═══════════════════════════════════════════════════════════════
   Жанна Романова — оживление карточек Zero-блоков

   Что делает:
   1. Кадр внутри карточки медленно наезжает при наведении,
      не вылезая за рамку.
   2. По золотой рамке карточки бесконечно ходит светлая точка —
      медленно, по кругу.

   Куда класть: Настройки сайта → Ещё → CSS-код сайта.
   Этот файл — исходник, в Tilda заливается через MCP
   (update_project_css_code). Правим здесь, потом заливаем.

   Важно: карточка Zero — это <a class="t396__group">, она уже
   спозиционирована самой Тильдой. position ей не переопределяем,
   иначе плитки на свободном артборде разъедутся.
   ═══════════════════════════════════════════════════════════════ */

/* @property --zr-ang живёт в коде сайта (Настройки → Ещё → HTML-код
   в head): парсер CSS Тильды вырезает это правило, а без него
   conic-gradient(from var(--zr-ang)) невалиден и точка не рисуется. */

/* Рамка карточки обрезает наезжающий кадр.
   !important обязателен: Тильда задаёт молекуле overflow:visible
   селектором с двумя id (#rec… #molecule-…), перебить иначе нечем. */
.t396 a.t396__group > .tn-molecule { overflow: hidden !important; }


/* ─── 1. Наезд кадра ─────────────────────────────────────────── */

/* Плитки главной: кадр лежит фоном на молекуле, поэтому двигаем
   не её саму (уедет рамка), а слой-двойник под содержимым. */
.t396 a.t396__group > .tn-molecule.t-bgimg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-position: inherit;
  background-size: cover;
  transform: scale(1);
  z-index: 0;
}
.t396 a.t396__group > .tn-molecule.t-bgimg > * {
  position: relative;
  z-index: 1;
}

/* Каталог подкастов: кадр — обычная картинка внутри карточки.
   Обрезаем по её собственной ячейке, чтобы не наползала на текст. */
.t396 a.t396__group .tn-atom:has(> .tn-atom__img) { overflow: hidden; }
.t396 a.t396__group .tn-atom__img { transform: scale(1); }

/* Наезд — только там, где есть настоящее наведение мышью.
   На телефоне он бессмыслен и только дёргает картинку. */
@media (hover: hover) and (pointer: fine) {
  .t396 a.t396__group > .tn-molecule.t-bgimg::before,
  .t396 a.t396__group .tn-atom__img {
    transition: transform 1s cubic-bezier(.22, .61, .24, 1);
  }
  .t396 a.t396__group:hover > .tn-molecule.t-bgimg::before,
  .t396 a.t396__group:hover .tn-atom__img {
    transform: scale(1.06);
  }
}


/* ─── 2. Светлая точка по рамке ──────────────────────────────── */

/* Приём: конический градиент крутится вокруг центра, а маска
   оставляет от него только рамку в 1 px. Получается светлый
   отрезок, который обходит карточку по периметру. */
.t396 a.t396__group::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;              /* = толщина рамки карточки */
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(from var(--zr-ang),
      rgba(224, 193, 120, 0)    0deg,
      rgba(224, 193, 120, 0)    298deg,
      rgba(224, 193, 120, .45)  332deg,
      rgba(255, 243, 214, 1)    350deg,
      rgba(224, 193, 120, .45)  357deg,
      rgba(224, 193, 120, 0)    360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: zr-spark 11s linear infinite;
}

/* чтобы точки не шли строем */
.t396 a.t396__group:nth-of-type(2n)::after { animation-delay: -3.7s; }
.t396 a.t396__group:nth-of-type(3n)::after { animation-delay: -7.4s; }

@keyframes zr-spark { to { --zr-ang: 360deg; } }


/* ─── Уважаем настройку «меньше движения» ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t396 a.t396__group::after { animation: none; opacity: 0; }
  .t396 a.t396__group > .tn-molecule.t-bgimg::before,
  .t396 a.t396__group .tn-atom__img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   КОРЗИНА (блок ST100 в подвале)

   Тексты, поля и галочки согласия настроены в самом блоке.
   Здесь только тёмная шкура: панель корзины по умолчанию белая,
   отдельного поля «цвет фона всплывашки» у блока нет.

   Цвета полей ввода (фон, рамка, подписи) выставляются в
   настройках блока — Form input style. Значения, которые туда
   идут, записаны в СТАТУС ПРОЕКТА.md.
   ═══════════════════════════════════════════════════════════════ */

/* панель и подложка */
.t706__cartwin-content {
  background-color: #141414;
  color: #f4f1ea;
}
.t706__cartwin { background-color: rgba(6, 6, 6, .86); }

/* заголовок и крестик */
.t706__cartwin-heading { color: #f4f1ea; }

/* Корзина — вся основным текстовым шрифтом. Антиква уместна
   в заголовках сайта, но в форме заказа мешает читать цифры. */
.t706__cartwin-heading,
.t706__product-title,
.t706__product-title__option,
.t706__product-amount,
.t706__product-quantity,
.t706__cartwin-prodamount-wrap,
.t706__cartwin-prodamount,
.t706__cartwin-prodamount-label,
.t706__cartwin-totalamount-wrap,
.t706__cartwin-totalamount,
.t706__cartwin-totalamount-label,
.t706__orderform .t-input-title,
.t706__orderform .t-input-subtitle,
.t706__orderform .t-input,
.t706__orderform .t-checkbox__control,
.t706__form-bottom-text {
  font-family: var(--t-text-font, Arial), sans-serif !important;
}
.t706__cartwin-top { border-bottom-color: rgba(203, 161, 74, .22); }
.t706__cartwin-close,
.t706__close-txt { color: #f4f1ea; }

/* строки товаров */
.t706__cartwin-products { border-bottom-color: rgba(203, 161, 74, .22); }
.t706__product { border-bottom-color: rgba(203, 161, 74, .16); }
.t706__product-title { color: #f4f1ea; }
.t706__product-title__option,
.t706__product-quantity { color: #9d9d9b; }
.t706__product-amount,
.t706__cartwin-prodamount,
.t706__cartwin-totalamount { color: #e0c178; }
.t706__cartwin-prodamount-label,
.t706__cartwin-totalamount-label { color: #9d9d9b; }

/* плюс / минус / удалить — обводки и крестик */
.t706__product-plus,
.t706__product-minus,
.t706__product-del {
  border-color: rgba(203, 161, 74, .45);
  color: #e0c178;
  opacity: 1;
}
.t706__product-plus:hover,
.t706__product-minus:hover,
.t706__product-del:hover { background-color: rgba(203, 161, 74, .12); }
.t706__product-plus svg *,
.t706__product-minus svg *,
.t706__product-del svg * { stroke: #e0c178; fill: #e0c178; }

/* подписи полей и мелкий текст под формой */
.t706__orderform .t-input-title { color: #f4f1ea; }
.t706__orderform .t-input-subtitle { color: #9d9d9b; }
.t706__form-bottom-text,
.t706__form-bottom-text a { color: #9d9d9b; }
.t706__orderform .t-checkbox__control { color: #c9c5bc; }
.t706__orderform .t-checkbox__control a {
  color: #e0c178;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* галочка согласия */
.t706__orderform .t-checkbox__indicator {
  background-color: transparent;
  border: 1px solid rgba(203, 161, 74, .45);
}
.t706__orderform .t-checkbox:checked + .t-checkbox__indicator {
  background-color: #cba14a;
  border-color: #cba14a;
}

/* поле с ошибкой */
.t706__orderform .t-input-error { color: #e0a0a0; }


/* ═══════════════════════════════════════════════════════════════
   Искра на карточках без ссылки

   В Zero кликабельная карточка — это <a class="t396__group">, её
   правило выше достаёт по тегу. Карточка без ссылки остаётся ,
   и «все группы с рамкой» средствами CSS не выбрать: толщина рамки
   приходит из сгенерированных Тильдой правил, не из атрибута.
   Поэтому класс вешает скрипт из кода сайта, а здесь — отдельное
   правило. Именно отдельное: списком селекторов через запятую
   парсер Тильды его выбрасывает, оставляя только первый селектор.
   ═══════════════════════════════════════════════════════════════ */

.zr-spark::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(from var(--zr-ang),
      rgba(224, 193, 120, 0)    0deg,
      rgba(224, 193, 120, 0)    298deg,
      rgba(224, 193, 120, .45)  332deg,
      rgba(255, 243, 214, 1)    350deg,
      rgba(224, 193, 120, .45)  357deg,
      rgba(224, 193, 120, 0)    360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: zr-spark 11s linear infinite;
}

.zr-spark:nth-of-type(2n)::after { animation-delay: -3.7s; }
.zr-spark:nth-of-type(3n)::after { animation-delay: -7.4s; }


/* ═══════════════════════════════════════════════════════════════
   БАННЕР COOKIE (блок T972 в подвале) — компактный на телефоне

   По умолчанию три кнопки встают столбиком, и баннер закрывает
   почти треть экрана. Здесь кнопки в одну строку: 256 → ~150 px.
   Каждое правило отдельно — списки селекторов парсер Тильды режет.
   Добавлено Техспецом JL 14.10.2026.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  .t972__banner { padding: 14px 16px 12px !important; }
  .t972__buttons { margin-top: 10px !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; }
  .t972__buttons-wrap { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; display: flex !important; flex-direction: row !important; gap: 8px !important; }
  .t972__accept-btn { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; height: 36px !important; padding: 0 8px !important; }
  .t972__reject-btn { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; height: 36px !important; padding: 0 8px !important; }
  .t972__settings-btn { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════
   Видеовиджет (T1035) — крупнее на компьютере.

   Размер превью Тильда ставит инлайном из скрипта: для вертикального
   кадра max-width 125px. Инлайн перебивается только !important.
   На мобильных оставляем как есть — там 125px и так занимают заметную
   часть экрана.
   ═══════════════════════════════════════════════════════════════ */

@media screen and (min-width: 961px) {
  .t1035__thumb-wrapper { max-width: 170px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   Куки-баннер (T972) и видеовиджет (T1035) не спорят за угол

   Оба по умолчанию прибиты в правый нижний: у баннера
   right:34px/bottom:34px, у виджета — свои отступы из настроек.
   На компьютере уводим баннер в левый угол, виджет остаётся справа.
   На телефоне баннер растягивается во всю ширину полосой, увести
   некуда — поэтому поднимаем над ним виджет, пока баннер показан.
   Класс t972__banner_show вешает скрипт блока в момент показа.
   ═══════════════════════════════════════════════════════════════ */

@media screen and (min-width: 641px) {
  .t972 { left: 34px !important; right: auto !important; }
}

@media screen and (max-width: 640px) {
  body:has(.t972__banner_show) .t-rec .t1035 { bottom: 230px !important; }
  body:has(.t972__settings_show) .t-rec .t1035 { display: none !important; }
}