/* PURETOP: общие стили сайта */

/* 1. Пункты меню шапки и навигации подвала: при наведении подчёркивание линией 2 px. Если у пункта есть ссылка, текст лежит внутри : без ссылки подчёркивания нет, при наведении оно такое же, как у остальных */
#rec5455018901 [data-elem-id="1793750000000000002"],
#rec5455018901 [data-elem-id="1793750000000000003"],
#rec5455018901 [data-elem-id="1793750000000000004"],
#rec5455018901 [data-elem-id="1793750000000000005"],
#rec5455018901 [data-elem-id="1793750000000000006"],
#rec5455018901 [data-elem-id="1793750000000000007"],
[data-elem-id="1793669168911000030"],
[data-elem-id="1793669168912000031"],
[data-elem-id="1793669168913000032"],
[data-elem-id="1793669168913000033"],
[data-elem-id="1793669168914000034"] { cursor: pointer; }

#rec5455018901 [data-elem-id="1793750000000000003"] .tn-atom a,
#rec5455018901 [data-elem-id="1793750000000000004"] .tn-atom a,
#rec5455018901 [data-elem-id="1793750000000000006"] .tn-atom a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#rec5455018901 [data-elem-id="1793750000000000002"]:hover .tn-atom,
#rec5455018901 [data-elem-id="1793750000000000003"]:hover .tn-atom,
#rec5455018901 [data-elem-id="1793750000000000004"]:hover .tn-atom,
#rec5455018901 [data-elem-id="1793750000000000005"]:hover .tn-atom,
#rec5455018901 [data-elem-id="1793750000000000006"]:hover .tn-atom,
#rec5455018901 [data-elem-id="1793750000000000007"]:hover .tn-atom,
#rec5455018901 [data-elem-id="1793750000000000003"]:hover .tn-atom a,
#rec5455018901 [data-elem-id="1793750000000000004"]:hover .tn-atom a,
#rec5455018901 [data-elem-id="1793750000000000006"]:hover .tn-atom a,
[data-elem-id="1793669168911000030"]:hover .tn-atom,
[data-elem-id="1793669168912000031"]:hover .tn-atom,
[data-elem-id="1793669168913000032"]:hover .tn-atom,
[data-elem-id="1793669168913000033"]:hover .tn-atom,
[data-elem-id="1793669168914000034"]:hover .tn-atom,
[data-elem-id="1793669168911000030"]:hover .tn-atom *,
[data-elem-id="1793669168912000031"]:hover .tn-atom *,
[data-elem-id="1793669168913000032"]:hover .tn-atom *,
[data-elem-id="1793669168913000033"]:hover .tn-atom *,
[data-elem-id="1793669168914000034"]:hover .tn-atom * {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* 2. Вращающиеся круги: бесконечный плавный оборот ровно на 360° ВЛЕВО (против часовой), без скачка при перезапуске. Круги: первый экран, блок 02 (у каждого товара), «развиваем партнёрскую сеть» (на телефоне), «Партнёрская программа», финальный призыв. Скорость: 20 с на оборот, одинаковая у всех кругов (поверх базового вращения Zero 25 с на 560°). Новый круг: добавить id его элемента в список ниже. */
@keyframes ps-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: no-preference) {
  [data-elem-id="1793188401656000002"] .tn-atom,
  [data-elem-id="1793635523970000023"] .tn-atom,
  [data-elem-id="1793663925505000002"] .tn-atom,
  [data-elem-id="1794053264806000002"] .tn-atom,
  [data-elem-id="1793794560876000006"] .tn-atom,
  [data-elem-id="1793669755779000002"] .tn-atom {
    animation: ps-spin 20s linear infinite;
  }
}

/* 3. Общий футер («Профессионалы рекомендуют…», страница «Футер»): три банки дрейфуют как в лава-лампе: медленно, с разной скоростью и траекторией. Амплитуда не больше ~14 px, чтобы не заезжать на тексты. Лежит в общем CSS, потому что футер подключается на все страницы. */
@keyframes ps-lava-a{0%,100%{translate:0 0}22%{translate:7px -10px}48%{translate:-5px -14px}74%{translate:-10px -4px}}
@keyframes ps-lava-b{0%,100%{translate:0 0}30%{translate:-8px 7px}62%{translate:6px 12px}85%{translate:10px 3px}}
@keyframes ps-lava-c{0%,100%{translate:0 0}18%{translate:5px 9px}52%{translate:11px -6px}80%{translate:-6px -11px}}
@media screen and (prefers-reduced-motion:no-preference){
[data-elem-id="1793669168804000000"]{animation:ps-lava-a 14s ease-in-out infinite}
[data-elem-id="1793669168806000001"]{animation:ps-lava-b 19s ease-in-out -6s infinite}
[data-elem-id="1793669168949000043"]{animation:ps-lava-c 11s ease-in-out -9s infinite}
}

/* 4. Шапка не мерцает при переходах между страницами. Тильда масштабирует элементы Zero-блока только после полной загрузки страницы (около 2-3 с), до этого меню было мельче и стояло не на месте. Масштаб --ps-z считает маленький скрипт в head проекта сразу, этот CSS применяет его до первой отрисовки; когда Тильда ставит свой zoom, число то же самое, скачка нет. Полоса прокрутки включена всегда, чтобы ширина страницы не менялась при загрузке. */
html { overflow-y: scroll; }
#rec5455018901 .t396__elem { zoom: var(--ps-z, 1); }

/* 5. Логотип шапки на планшете и телефоне (до 959 px) двигается чистым CSS, без замеров и JS-сдвига (в Safari сдвиг, посчитанный скриптом при CSS zoom, уезжал по вертикали). Размеры задаются в Zero-редакторе блока «Хедер» двумя элементами: «Логотип PURETOP (большой…)» (класс ps-logo) и «Логотип сжатый…» (класс ps-logo-s, на сайте скрыт). Скрипт шапки (T123 на странице «Хедер») читает из них left/top/width в единицах артборда (атрибуты data-field-*, для 320 и 640) и пишет в логотип переменные --bx --by --bw (большой) и --sx --sy --sw (сжатый); ниже в значениях по умолчанию (до выполнения скрипта) стоят те же числа, что в редакторе. Состояние между ними задаёт --e (0..1): на главной её по скроллу пишет скрипт, на остальных страницах (атрибут data-ps-sub ставит скрипт в head проекта) она сразу 1. Единицы артборда умножает на масштаб сам zoom элемента, поэтому от --ps-z здесь ничего не зависит.
   Значения по умолчанию. Планшет (640-959): большой 16 / 46 / 608, сжатый 18 / 10 / 104. Телефон (до 639): большой 11 / 36 / 299, сжатый 13 / 11 / 68 (left / top / width). */
#rec5455018901 .ps-logo-s { display: none !important; }
@media (max-width: 959px) {
  #rec5455018901 .ps-logo {
    --e: 0;
    --bx: 16; --by: 46; --bw: 608;
    --sx: 18; --sy: 10; --sw: 104;
    transform: none !important;
    left: calc((var(--bx) + (var(--sx) - var(--bx)) * var(--e)) * 1px) !important;
    top: calc((var(--by) + (var(--sy) - var(--by)) * var(--e)) * 1px) !important;
    width: calc((var(--bw) + (var(--sw) - var(--bw)) * var(--e)) * 1px) !important;
  }
  html[data-ps-sub] #rec5455018901 .ps-logo { --e: 1; pointer-events: auto !important; }
  html[data-ps-sub] #rec5455018901 .ps-logo * { pointer-events: auto !important; }
}
@media (max-width: 639px) {
  #rec5455018901 .ps-logo {
    --bx: 11; --by: 36; --bw: 299;
    --sx: 13; --sy: 11; --sw: 68;
  }
}

/* 6. Анкета на странице «Партнёрская программа» (блок 5482380601, форма Zero): на телефоне Тильда по умолчанию ставит E-mail и телефон друг под другом, здесь они остаются в одной строке (две равные половины с зазором 10), как на рисунке. Левый отступ текста в полях на телефоне 16 вместо 20. Только эта форма, только телефон. */
@media (max-width: 639px) {
  #rec5482380601 .t-input-block .t-input { padding-left: 16px !important; }
  #rec5482380601 .t-form__inputsbox_inrow { column-gap: 10px !important; }
  #rec5482380601 .t-form__inputsbox_inrow .t-input-group_inonerow { width: calc(50% - 5.5px) !important; margin-right: 0 !important; }
}

/* 7. Страницы документов (политики, согласие; блок «Статья» TX24, класс .t1211): текст идёт на всю сетку сайта и встаёт на те же поля, что блоки Zero, на любой ширине. Zero растягивается на ширину окна, поэтому поля заданы долями ширины: от 1200 px — 20/1200, 960-1199 — 20/960, 640-959 — 16/640, до 639 — 10/320 (проверено: левый край текста совпадает с Zero на 1440, 1100, 768, 390). Новая страница документа: продублировать любую из этих страниц и заменить текст в блоке, ничего больше настраивать не нужно. */
.t1211 .t-container { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.t1211 .t-col { float: none !important; display: block !important; width: auto !important; max-width: none !important; margin-left: 1.6667% !important; margin-right: 1.6667% !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 1199px) { .t1211 .t-col { margin-left: 2.0833% !important; margin-right: 2.0833% !important; } }
@media (max-width: 959px) { .t1211 .t-col { margin-left: 2.5% !important; margin-right: 2.5% !important; } }
@media (max-width: 639px) { .t1211 .t-col { margin-left: 3.125% !important; margin-right: 3.125% !important; } }

/* 8. Cookie-баннер (T886, страница «Хедер», подключается на все страницы): компактный. Меньше поля внутри (8/12 вместо 15/25), кнопка ниже (высота 22 вместо 30). На телефоне и планшете (до 980 px) баннер на всю ширину экрана: это делает сам блок Тильды (width 100%, без скругления, прижат к низу). */
.t886__wrapper { padding: 8px 12px !important; }
.t886 .t886__btn { --height: 22px; padding-left: 12px !important; padding-right: 12px !important; font-size: 10px !important; }
.t886__text { padding-right: 8px !important; }