/* ============================================================================
   TANDEM · Попапы (система модалок из админки)
   Префикс классов: tp-  ·  движок: static/popups.js  ·  разметка: components/popup_types.html

   Токены задаются на корне .tp-root и переопределяются:
     1) пресетом      [data-preset="light|dark|brand"]
     2) продвинутым режимом — инлайн style="--tp-bg:…" (админка)
   Каждый цвет объявлен в базовом наборе, поэтому попап читается на любом фоне.
   Скруглений на сайте нет (минимализм Minotti) — --tp-radius по умолчанию 0.
   ========================================================================== */

.tp-root {
  /* — палитра (light) — */
  --tp-bg: #ffffff;
  --tp-text: #1a1a1a;
  --tp-muted: #4a4035;
  --tp-line: rgba(0, 0, 0, .18);
  --tp-accent: #5a3e29;          /* бренд: надзаголовок, фокус, чекбокс, ссылки */
  --tp-btn: #1a1a1a;             /* фон основной кнопки */
  --tp-btn-text: #ffffff;
  --tp-btn-hover: #5a3e29;
  --tp-error: #b04030;
  /* — геометрия — */
  --tp-radius: 0px;
  --tp-shadow: 0 30px 90px rgba(0, 0, 0, .18);
  --tp-pad: 3rem 2.6rem 2.4rem;
  --tp-width: 520px;
  --tp-overlay-color: 20, 18, 16;
  --tp-overlay-op: .55;

  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  padding: 1.2rem;
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.tp-root.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}

.tp-root[data-preset="dark"] {
  --tp-bg: #1c1a18;
  --tp-text: #f5f0eb;
  --tp-muted: rgba(245, 240, 235, .74);
  --tp-line: rgba(255, 255, 255, .22);
  --tp-accent: #c4a882;
  --tp-btn: #f5f0eb;
  --tp-btn-text: #1a1a1a;
  --tp-btn-hover: #c4a882;
  --tp-error: #e08a7a;
  --tp-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.tp-root[data-preset="brand"] {
  --tp-bg: #5a3e29;
  --tp-text: #f7f3ee;
  --tp-muted: rgba(247, 243, 238, .8);
  --tp-line: rgba(255, 255, 255, .28);
  --tp-accent: #e6d3ba;
  --tp-btn: #f7f3ee;
  --tp-btn-text: #5a3e29;
  --tp-btn-hover: #ffffff;
  --tp-error: #ffd2c6;
  --tp-shadow: 0 30px 90px rgba(48, 32, 20, .38);
}

/* ── затемнение ─────────────────────────────────────────────────────────── */
.tp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--tp-overlay-color), var(--tp-overlay-op));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.tp-root[data-overlay="0"] .tp-overlay { display: none; }

/* ── панель ─────────────────────────────────────────────────────────────── */
.tp-popup {
  position: relative;
  width: 100%;
  max-width: var(--tp-width);
  max-height: calc(100dvh - 2.4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--tp-bg);
  color: var(--tp-text);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1) .05s, opacity .45s ease .05s;
}

@supports not (max-height: 100dvh) {
  .tp-popup { max-height: calc(100vh - 2.4rem); }
}

.tp-root.is-open .tp-popup { opacity: 1; transform: none; }

/* размеры */
.tp-root[data-size="s"] { --tp-width: 400px; --tp-pad: 2.4rem 2rem 2rem; }
.tp-root[data-size="m"] { --tp-width: 520px; }
.tp-root[data-size="l"] { --tp-width: 720px; }

/* позиции */
.tp-root[data-placement="center"]       { align-items: center; justify-content: center; }
.tp-root[data-placement="bottom"]       { align-items: flex-end; justify-content: center; }
.tp-root[data-placement="bottom-right"] { align-items: flex-end; justify-content: flex-end; }
.tp-root[data-placement="bottom-left"]  { align-items: flex-end; justify-content: flex-start; }

/* угловые попапы компактнее и без затемнения по умолчанию */
.tp-root[data-placement="bottom-right"],
.tp-root[data-placement="bottom-left"] { --tp-width: 380px; --tp-pad: 2rem 1.8rem 1.8rem; }

/* анимации входа */
.tp-root[data-anim="slide-up"] .tp-popup { transform: translateY(20px); }
.tp-root[data-anim="fade"]     .tp-popup { transform: none; }
.tp-root[data-anim="zoom"]     .tp-popup { transform: scale(.94); }
/* Пара на одной мягкой кривой: «оседание» приходит чуть крупнее и садится в размер,
   «раскрытие» — то же движение наоборот, из чуть меньшего. */
.tp-root[data-anim="settle"] .tp-popup,
.tp-root[data-anim="expand"] .tp-popup {
  transition: transform .7s cubic-bezier(.16, .84, .28, 1) .04s, opacity .5s ease .04s;
}
.tp-root[data-anim="settle"] .tp-popup { transform: scale(1.06); }
.tp-root[data-anim="expand"] .tp-popup { transform: scale(.94); }
.tp-root[data-anim="none"]     .tp-popup { transform: none; transition: none; }
.tp-root[data-anim="none"]     { transition: visibility 0s; }

/* Конечное состояние объявлено после стартовых и с той же «силой» + .is-open,
   иначе попап застревает в начальной точке: у правил одинаковая специфичность,
   и стартовый transform, объявленный ниже, перебивал бы общий `transform: none`. */
.tp-root[data-anim].is-open .tp-popup { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tp-root, .tp-popup, .tp-bar { transition: opacity .15s linear !important; transform: none !important; }
}

/* ── крестик ────────────────────────────────────────────────────────────── */
.tp-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  opacity: .7;
  transition: opacity .25s ease, transform .25s ease;
}
.tp-close:hover { opacity: 1; transform: rotate(90deg); }
.tp-close:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: -4px; opacity: 1; }
.tp-close svg { width: 14px; height: 14px; display: block; }

/* крестик поверх картинки — на подложке, чтобы читался на любом фото */
.tp-root[data-image-pos="bg"] .tp-close,
.tp-root[data-type="video"] .tp-close,
.tp-root[data-media="1"][data-image-pos="top"] .tp-close,
.tp-root[data-media="1"][data-image-pos="right"] .tp-close {
  color: #fff;
  background: rgba(0, 0, 0, .35);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  top: 1rem;
  right: 1rem;
}

/* ── контент ────────────────────────────────────────────────────────────── */
.tp-body { padding: var(--tp-pad); display: flex; flex-direction: column; }

.tp-badge {
  align-self: flex-start;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tp-accent);
  margin: 0 0 1.1rem;
}

.tp-title {
  font-size: 1.55rem;
  font-weight: 300;
  letter-spacing: .015em;
  line-height: 1.25;
  color: var(--tp-text);
  margin: 0 0 .8rem;
  text-wrap: balance;
}

.tp-text {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--tp-muted);
  margin: 0 0 1.6rem;
}

.tp-text:last-child, .tp-title:last-child { margin-bottom: 0; }

.tp-root[data-size="s"] .tp-title { font-size: 1.3rem; }
.tp-root[data-size="l"] .tp-title { font-size: 1.9rem; }

/* ── медиа ──────────────────────────────────────────────────────────────── */
.tp-media { position: relative; overflow: hidden; background: rgba(0, 0, 0, .04); }
.tp-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* без картинки */
.tp-root[data-image-pos="none"] .tp-media { display: none; }

/* картинка сверху */
.tp-root[data-image-pos="top"] .tp-media { aspect-ratio: 3 / 2; }

/* картинка сбоку — две колонки, на мобайле стек (см. медиазапрос ниже).
   Колонка с текстом всегда шире картинки, поэтому пропорции зеркальные. */
.tp-root[data-image-pos="left"] .tp-popup,
.tp-root[data-image-pos="right"] .tp-popup {
  display: grid;
  align-items: stretch;
}
.tp-root[data-image-pos="left"]  .tp-popup { grid-template-columns: 42fr 58fr; }
.tp-root[data-image-pos="right"] .tp-popup { grid-template-columns: 58fr 42fr; }
.tp-root[data-image-pos="right"] .tp-media { order: 2; }
.tp-root[data-image-pos="left"] .tp-media,
.tp-root[data-image-pos="right"] .tp-media { aspect-ratio: auto; min-height: 100%; }

/* картинка фоном */
.tp-root[data-image-pos="bg"] .tp-popup { position: relative; }
.tp-root[data-image-pos="bg"] .tp-media { position: absolute; inset: 0; }
.tp-root[data-image-pos="bg"] .tp-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 9, .2) 0%, rgba(12, 10, 9, .55) 45%, rgba(12, 10, 9, .88) 100%);
}
.tp-root[data-image-pos="bg"] .tp-body {
  position: relative;
  min-height: 360px;
  justify-content: flex-end;
  /* собственная подложка под текстом: попап должен читаться на любом фото,
     в том числе на «шумном» рекламном кадре с крупной графикой */
  background: linear-gradient(180deg, rgba(12, 10, 9, 0) 0%, rgba(12, 10, 9, .72) 38%, rgba(12, 10, 9, .94) 100%);
  color: #fff;
  --tp-text: #fff;
  --tp-muted: rgba(255, 255, 255, .82);
  --tp-accent: #e6d3ba;
  --tp-line: rgba(255, 255, 255, .34);
}

/* ── форма ──────────────────────────────────────────────────────────────── */
.tp-form { display: flex; flex-direction: column; gap: 1.05rem; }

.tp-field { display: flex; flex-direction: column; gap: .35rem; }

.tp-field__label {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tp-text);
  opacity: .7;
}

.tp-field input,
.tp-field textarea {
  width: 100%;
  padding: .85rem 0;
  border: 0;
  border-bottom: 1px solid var(--tp-line);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tp-text);
  outline: none;
  transition: border-color .3s ease;
}
.tp-field textarea { resize: vertical; min-height: 3.4rem; line-height: 1.5; }
.tp-field input:focus,
.tp-field textarea:focus { border-bottom-color: var(--tp-accent); }
.tp-field input:focus-visible,
.tp-field textarea:focus-visible { outline: none; }
.tp-field.is-invalid input,
.tp-field.is-invalid textarea { border-bottom-color: var(--tp-error); }
.tp-field input::placeholder,
.tp-field textarea::placeholder { color: var(--tp-muted); opacity: .55; }

/* согласие + маркетинговая галочка */
.tp-check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--tp-muted);
  margin-top: .4rem;
  cursor: pointer;
}
.tp-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 2px 0 0;
  border: 1px solid var(--tp-line);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color .25s ease, background .25s ease;
}
.tp-check input[type="checkbox"]:checked {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
}
.tp-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--tp-bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.tp-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-check.is-invalid input[type="checkbox"] { border-color: var(--tp-error); }
.tp-check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tp-check a:hover { color: var(--tp-accent); }

.tp-error {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--tp-error);
  min-height: 1.2em;
  margin-top: -.2rem;
}
.tp-error:empty { min-height: 0; }

/* ── кнопки ─────────────────────────────────────────────────────────────── */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.6rem;
  background: var(--tp-btn);
  color: var(--tp-btn-text);
  border: 1px solid var(--tp-btn);
  border-radius: var(--tp-radius);
  font-family: inherit;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .25s ease;
}
.tp-btn:hover { background: var(--tp-btn-hover); border-color: var(--tp-btn-hover); color: var(--tp-btn-text); }
.tp-btn:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 3px; }
.tp-btn:disabled { opacity: .55; cursor: wait; }
.tp-form .tp-btn { margin-top: .6rem; }

.tp-btn--outline {
  background: transparent;
  color: var(--tp-text);
  border-color: currentColor;
}
.tp-btn--outline:hover { background: var(--tp-btn); border-color: var(--tp-btn); color: var(--tp-btn-text); }

.tp-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--tp-accent);
  padding-left: 0;
  padding-right: 0;
}
.tp-btn--text:hover { background: transparent; border-color: transparent; color: var(--tp-text); }

.tp-actions { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.4rem; }
.tp-body > .tp-actions:first-child { margin-top: 0; }

.tp-secondary {
  align-self: center;
  background: none;
  border: 0;
  padding: .2rem;
  font-family: inherit;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--tp-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .25s ease;
}
.tp-secondary:hover { color: var(--tp-text); }
.tp-secondary:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }

/* ── товар ──────────────────────────────────────────────────────────────── */
.tp-product { display: flex; flex-direction: column; }
.tp-product__media {
  background: #fff;                 /* фото товара всегда на белом — как в каталоге */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.tp-product__media img { width: 100%; height: 100%; object-fit: contain; }
.tp-product__name {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--tp-text);
  margin: 0 0 .3rem;
}
.tp-product__price { font-size: 1rem; color: var(--tp-text); margin: 0 0 .35rem; }
.tp-product__price span { opacity: .55; margin-right: .35em; }
.tp-product__price b { font-weight: 500; }
.tp-product__sizes {
  font-size: .74rem;
  line-height: 1.5;
  color: var(--tp-muted);
  opacity: .85;
  margin: 0;
}

/* ── таймер акции ───────────────────────────────────────────────────────── */
.tp-countdown {
  display: flex;
  gap: 1.4rem;
  margin: 0 0 1.5rem;
  font-variant-numeric: tabular-nums;
}
.tp-countdown__cell { display: flex; flex-direction: column; gap: .25rem; min-width: 2.6em; }
.tp-countdown__num { font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--tp-text); }
.tp-countdown__label {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tp-muted);
}

/* ── видео ──────────────────────────────────────────────────────────────── */
.tp-video { position: relative; background: #0d0c0b; aspect-ratio: 16 / 9; }
.tp-video video,
.tp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* фоновое видео — как hero на главной: без плеера, проявляется, когда готово */
.tp-video video[data-tp-bg] {
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.tp-video video[data-tp-bg].is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tp-video video[data-tp-bg] { transition: none; }
}
.tp-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .3s ease;
}
.tp-video__play:hover { background: rgba(0, 0, 0, .3); }
.tp-video__play:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.tp-video__play span {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.tp-video__play:hover span { transform: scale(1.06); }
.tp-video__play svg { width: 20px; height: 22px; margin-left: 3px; }

/* ── полоса (bar) ───────────────────────────────────────────────────────── */
.tp-root[data-type="bar"] {
  inset: auto 0 0 0;
  z-index: 9980;                    /* ниже cookie-баннера (9990) */
  padding: 0;
  display: block;
}
.tp-root[data-placement="top-bar"] { inset: 0 0 auto 0; }

.tp-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: .9rem 3.2rem .9rem 1.4rem;
  background: var(--tp-bg);
  color: var(--tp-text);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .1);
  opacity: 0;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}
.tp-root[data-placement="top-bar"] .tp-bar {
  transform: translateY(-100%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
}
.tp-root.is-open .tp-bar { opacity: 1; transform: translateY(0); }

.tp-bar__text { font-size: .92rem; line-height: 1.5; margin: 0; }
.tp-bar .tp-btn { padding: .7rem 1.4rem; font-size: .66rem; }
.tp-bar .tp-close { top: 50%; right: .5rem; transform: translateY(-50%); }
.tp-bar .tp-close:hover { transform: translateY(-50%) rotate(90deg); }

html.tp-bar-top { padding-top: var(--tp-bar-h, 0px); }
html.tp-bar-bottom { padding-bottom: var(--tp-bar-h, 0px); }

/* ── экран «спасибо» ────────────────────────────────────────────────────── */
.tp-success { align-items: center; text-align: center; gap: 1rem; }
.tp-success .tp-title, .tp-success .tp-text { margin: 0; }
.tp-success__check {
  color: var(--tp-accent);
  margin-bottom: .4rem;
  animation: tpCheckPop .55s cubic-bezier(.2, .7, .2, 1);
}
@keyframes tpCheckPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-success__check { animation: none; }
}

[data-tp-state][hidden] { display: none !important; }

/* ── мобайл ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tp-root { padding: 0; }
  .tp-root[data-type="bar"] { padding: 0; }

  /* любой модальный попап становится нижним листом */
  .tp-root:not([data-type="bar"]) { align-items: flex-end; justify-content: stretch; }
  .tp-root:not([data-type="bar"]) .tp-popup {
    max-width: 100%;
    max-height: 88dvh;
    border-radius: 2px 2px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(24px);
  }
  @supports not (max-height: 88dvh) {
    .tp-root:not([data-type="bar"]) .tp-popup { max-height: 88vh; }
  }

  .tp-root { --tp-pad: 2.2rem 1.5rem 1.8rem; }
  .tp-title { font-size: 1.3rem; }
  .tp-root[data-size="l"] .tp-title { font-size: 1.45rem; }
  .tp-text { font-size: .88rem; }

  /* боковая картинка уходит наверх */
  .tp-root[data-image-pos="left"] .tp-popup,
  .tp-root[data-image-pos="right"] .tp-popup { display: block; }
  .tp-root[data-image-pos="left"] .tp-media,
  .tp-root[data-image-pos="right"] .tp-media { aspect-ratio: 3 / 2; min-height: 0; }

  .tp-root[data-image-pos="bg"] .tp-body { min-height: 300px; }

  .tp-countdown { gap: 1rem; }
  .tp-countdown__num { font-size: 1.3rem; }

  .tp-bar { padding: .8rem 2.8rem .8rem 1rem; gap: .8rem; }
  .tp-bar__text { font-size: .86rem; }
}

/* при открытом попапе фон не скроллится (класс ставит движок) */
html.tp-lock, html.tp-lock body { overflow: hidden; }
html.tp-lock body { position: fixed; width: 100%; }