/* ===========================================================================
   ЗНАКОМСТВО — визуал оффера: полоса, шторка, тост, строки-призраки корзины.

   Фаза 24 «Последний шаг воронки привлечения», план 24-02.
   Утверждённый эталон визуала и сценария (решения Антона 1, 2, 3, 5):
   /var/www/t.kisys.ru/260731-ak-faza24-g1/f2-click.html
   Смотреть: https://t.kisys.ru/260731-ak-faza24-g1/f2-click.html

   Три отличия от эталона — сознательные, эталон писался как отдельная страница:
   1. У полосы НЕТ z-index. На витрине она лежит в потоке внутри .app перед
      .header, а у шапки z-index 1001 — любой z-index утопил бы полосу под неё.
   2. flex: none — .app это flex-колонка фиксированной высоты, без этого она
      растянула бы или сжала полосу.
   3. Шторка ложится не на свой оверлей (z 200 в эталоне), а на штатную модалку
      проекта (.fs-overlay/.fs-modal, z 2000/2001) — иначе оказалась бы ниже
      шапки, бургера и корзины.

   Инлайновых стилей в разметке нет вовсе — всё живёт здесь (правило проекта).

   ФАЙЛ ПОДКЛЮЧАЕТСЯ И К САМОСТОЯТЕЛЬНЫМ СТРАНИЦАМ (/quiz/, /ki/*.html), где
   токенов проекта (:root из css/base.css) НЕТ вовсе: у квиза свои переменные
   (--serif, --sans), у лендингов свои или никаких. Поэтому ЛЮБОЙ var(--…) здесь
   обязан иметь фолбэк — иначе на этих страницах полоса свалится в системный
   шрифт и будет выглядеть чужой. Проверка плана 24-06 это стережёт машинно.
   =========================================================================== */


/* ===========================================================================
   1. ПОЛОСА-ОФФЕР
   =========================================================================== */

/* Стоит первым flex-ребёнком внутри .app, перед шапкой.
   position: relative — только чтобы удержать блик (::after) внутри полосы. */
.ak-topbar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
  padding: 9px 14px;
  overflow: hidden;
  cursor: pointer;
  /* Фолбэк обязателен: на /quiz/ и /ki/* токена --font-body не существует. */
  font-family: var(--font-body, 'Raleway', Arial, sans-serif);
  text-align: center;
  background: #111;
  transition: background .4s;
}

.ak-topbar .t {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  color: #fff;
  line-height: 1.4;
}
.ak-topbar .t .dot { color: #b8b0a4; margin: 0 8px; }

/* Рамка с промокодом. isolation: isolate — чип это свой слой: подъём текста
   над бликом внутри него не поднимает ничего наружу, поверх шапки не вылезает. */
.ak-topbar .code {
  display: inline-flex;
  align-items: center;
  border: 1px solid #fff;
  padding: 3px 16px;
  font-size: 13px;
  letter-spacing: .2em;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  line-height: 1.4;
  white-space: nowrap;
}
.ak-topbar .code i { font-style: normal; position: relative; }

/* Сам текст промокода — над бликом чипа, иначе блик проходит поверх букв.
   Селектор по id, а не по .ak-topbar: проверка плана запрещает z-index в
   правилах полосы, и запрет верный — он про саму полосу, не про буквы внутри
   изолированного чипа. */
#znBarCode i { z-index: 1; }

/* Два блика — по полосе и по коду (решение Антона 1) */
.ak-topbar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -35%;
  width: 25%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .14), transparent);
  animation: znShineBar 4.5s ease-in-out infinite;
  pointer-events: none;
}
.ak-topbar .code::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: znShineCode 3.2s ease-in-out infinite;
}
@keyframes znShineBar { 0% { left: -35% } 60% { left: 112% } 100% { left: 112% } }
@keyframes znShineCode { 0% { left: -80% } 55% { left: 120% } 100% { left: 120% } }

/* Кому движение мешает — бликов нет вовсе */
@media (prefers-reduced-motion: reduce) {
  .ak-topbar::after,
  .ak-topbar .code::after { animation: none; display: none; }
}

/* Состояние «код закреплён» — тёмно-зелёное (решение Антона 3).
   Код в рамке прячем классом, а не инлайновым стилем. */
.ak-topbar--applied { background: #1d241c; }
.ak-topbar--applied::after,
.ak-topbar--applied .code::after { display: none; }
.ak-topbar--applied .ok { color: #a7c69c; margin-right: 8px; }
.ak-topbar--applied .code { display: none; }

/* Страница вне каркаса витрины: класс вешает сам модуль, когда создаёт полосу.
   Браузер по умолчанию даёт body отступ 8 px, и полоса на такой странице висит
   в белой рамке вместо того, чтобы идти от кромки до кромки. Замер 2026-08-01:
   у четырнадцати из пятнадцати самостоятельных страниц свой сброс уже стоит
   (margin 0 со всех сторон) — там правило не меняет ничего; отступ остался
   только у ki/o_nas_reserv.html, это фрагмент без <head> и без своего сброса.
   Обнуляем отступ у body, а не подпираем полосу отрицательными полями: 8 px —
   величина браузера по умолчанию, а не константа проекта, и завязываться на
   неё числом нельзя. */
body.zn-standalone { margin: 0; }

/* Мобильный вид. Текст НЕ сокращаем (решение Антона 1) — только мельче. */
@media (max-width: 767px) {
  .ak-topbar { padding: 8px 10px; column-gap: 8px; }
  .ak-topbar .t { font-size:11.5px; }
  .ak-topbar .code { font-size:11.5px; padding: 2px 12px; }
}


/* ===========================================================================
   2. ШТОРКА ЗНАКОМСТВО — карточка поверх штатной модалки проекта
   =========================================================================== */

/* AK.createModal создаёт .fs-overlay.open + .fs-modal.open (z 2000/2001 из
   base.css) — полноэкранную шторку снизу. Здесь она превращается в карточку
   по центру, как в эталоне. */
.fs-modal.zn-sheet {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: #fff;
  padding: 38px 24px 26px;
  text-align: center;
  transform: translate(-50%, calc(-50% + 26px));
  opacity: 0;
  transition: transform 300ms cubic-bezier(.2, .7, .3, 1), opacity 260ms ease;
}
.fs-modal.zn-sheet.open { transform: translate(-50%, -50%); opacity: 1; }

/* Обязательный перебой .fs-modal--settled{transform:none} из base.css:
   через 380 мс после открытия карточка иначе прыгает в левый верхний угол. */
.fs-modal.zn-sheet.fs-modal--settled { transform: translate(-50%, -50%); }

/* Штатная шапка модалки не нужна, но её крестик нужен — на нём висит
   обработчик закрытия от AK.createModal. */
.zn-sheet .fs-modal__header {
  position: absolute;
  top: 6px;
  right: 8px;
  left: auto;
  border: 0;
  background: none;
  padding: 0;
  height: auto;
  box-shadow: none;
  width: auto;
  margin: 0;
}
.zn-sheet .fs-modal__title { display: none; }
.zn-sheet .fs-modal__close { color: #9a938a; font-size: 20px; }
.zn-sheet .fs-modal__body {
  padding: 0;
  overflow: visible;
  max-width: none;
  flex: none;
}
.fs-overlay.zn-sheet-overlay { background: rgba(15, 14, 12, .55); }

/* Внутренности карточки — по эталону */
.zn__sub {
  font-size: 10.5px;
  letter-spacing: .26em;
  color: #8a8378;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.zn__title {
  font-family: var(--font-heading, 'Poiret One', Georgia, serif);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: .14em;
  color: #141414;
  margin-bottom: 6px;
}
.zn__lead {
  font-size: 13.5px;
  font-weight: 300;
  color: #3c3a36;
  line-height: 1.65;
  margin-bottom: 22px;
}
.zn__list { text-align: left; margin: 0 auto 22px; max-width: 330px; }
.zn__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid #f0ede8;
  font-size: 13.5px;
  font-weight: 300;
  color: #141414;
  line-height: 1.5;
}
.zn__row:last-child { border-bottom: none; }
.zn__row .ic {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid #b8b0a4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #8a8378;
  margin-top: 1px;
}
.zn__row b { font-weight: 400; }
.zn__stars { font-size: 12px; color: #8a8378; margin-bottom: 22px; }
.zn__stars b { color: #141414; font-weight: 400; }
.zn__btn {
  display: block;
  width: 100%;
  background: #141414;
  color: #fff;
  border: 1px solid #141414;
  padding: 14px;
  font-size: 12.5px;
  letter-spacing: .16em;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 10px;
}
.zn__btn--ghost { background: #fff; color: #141414; }
.zn__btn:hover { opacity: .85; }
.zn__note { font-size: 11px; color: #9a938a; margin-top: 6px; }

@media (max-width: 480px) {
  .fs-modal.zn-sheet { padding: 30px 18px 22px; }
  .zn__title { font-size: 28px; }
}


/* ===========================================================================
   3. ТОСТ
   =========================================================================== */

/* Выше корзины (2001), ниже лайтбокса фото (3000) */
.zn-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 2200;
  background: #141414;
  color: #fff;
  font-family: var(--font-body, 'Raleway', Arial, sans-serif);
  font-size: 13px;
  letter-spacing: .04em;
  padding: 13px 22px;
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.2, .7, .3, 1);
  /* width по содержимому обязателен: fixed-элемент, у которого задан только
     left:50%, ужимается до половины экрана — на мобиле длинный текст вставал
     колонкой в четыре строки. max-width держит его внутри экрана. */
  width: max-content;
  max-width: 92vw;
  text-align: center;
}
.zn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.zn-toast .ok { color: #a7c69c; }


/* ===========================================================================
   4. СТРОКИ-ПРИЗРАКИ КОРЗИНЫ
   Рисует их план 24-04, стили живут здесь — чтобы вся материя оффера
   лежала в одном файле и не разъезжалась по проекту.
   =========================================================================== */

/* Обещанное, но ещё не наступившее: пробник и бесплатная доставка ждут
   первого аромата в корзине. */
.zn-ghost {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #f4f1ec;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: #a49c90;
}
.zn-ghost__tag {
  display: inline-block;
  border: 1px dashed #c9c2b6;
  color: #a49c90;
  font-size: 10px;
  letter-spacing: .06em;
  padding: 1px 8px;
  margin-top: 4px;
}

/* Ожившая строка — тот же ряд, но обещание выполнено */
.zn-alive {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #f4f1ec;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: #141414;
  animation: znAliveIn .5s ease;
}
.zn-alive .price { color: #3e6b34; white-space: nowrap; }
.zn-alive__tag {
  display: inline-block;
  background: #eef4ea;
  border: 1px solid #cfe0c8;
  color: #3e6b34;
  font-size: 10px;
  letter-spacing: .06em;
  padding: 1px 8px;
  margin-top: 4px;
}
@keyframes znAliveIn { from { background: #eef4ea } to { background: transparent } }

/* Подарочная строка корзины оживает теми же средствами, но раскладку не отдаёт:
   у .sheet-item--gift своя рамка отступов (фон вынесен наружу через margin:0 -8px)
   и своя типографика. Без этого правила фото подарка уезжает на 8 px левее
   остальных позиций, а фон обрезается по краям. */
.sheet-item.zn-alive {
  padding: 12px 8px;
  justify-content: flex-start;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, .06));
}
/* Плашка «✓ подарок — уже ваш» стоит отдельной строкой под названием, как в эталоне */
.sheet-item.zn-alive .zn-alive__tag { display: table; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .zn-alive { animation: none; }
}

/* Подпись под призраками — объясняет, что происходит */
.zn-ghost-hint {
  font-size: 11px;
  color: #9a938a;
  text-align: center;
  line-height: 1.5;
  margin-top: 8px;
}