/* ═══════════════════════════════════════════════════════════════
   Жанна Романова — оживление карточек Zero-блоков
   Исходник: tilda/project.css в проекте. Правим там, потом сюда.

   Карточка 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 !important; }
.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. Светлая точка по рамке ──────────────────────────────── */

.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 в подвале)
   Тексты, поля, цвета полей и кнопка настроены в самом блоке.
   Здесь — фон всплывашки (своего поля у блока нет) и шрифт.
   ═══════════════════════════════════════════════════════════════ */

.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; }