/* pro.css — визуал SSR-страниц витрины/профиля: минимальный header мастера (.pp-mh) +
   watermark-футер + anti-flash reveal. Линкуется в SSR-шаблонах (shop/profile/product/category)
   поверх pop.css. Токены — из tokens.css (не хардкод). Имя файла историческое (был Pro-визуал). */

/* ── watermark-футер «Powered by BunnySplit» (WP-11) — ТОЛЬКО Free ({% if not is_pro %}) ──
   Скромный, не кричит; тонкая ссылка на площадку. Тёплый разделитель, muted-текст. */
.pp-wm {
  margin: 40px auto 24px; max-width: 680px; padding: 16px 20px 4px;
  border-top: 1px solid var(--line, rgba(20,20,20,.08));
  text-align: center; font: 500 13px var(--font, 'Inter', sans-serif); color: var(--ink2, #5B5B66);
}
.pp-wm a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink2, #5B5B66); text-decoration: none; font-weight: 700;
  transition: color .15s ease-out;
}
.pp-wm a:hover { color: var(--violet, #7C5CFF); }
.pp-wm-logo {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px;
  background: linear-gradient(135deg, #FF5E7E, #7C5CFF);
  display: inline-block; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .pp-wm a { transition: none; } }

/* ── Минимальный header МАСТЕРА на витрине /@handle/shop (Phase A, ux-pro) ─────────
   Заменяет платформенный .pp-nav (Биржа/Сообщество/Кабинет/Войти + глоб-бренд): цель —
   ощущение «личный сайт продавца», а не «я внутри агрегатора». Бренд мастера доминирует;
   возврат в экосистему — тонким «Powered by BunnySplit» под именем (только Free; Pro =
   white-label без нашей марки). Один источник для SSR shop_ssr.html и гидрации profile.js
   (обе поверхности линкуют pro.css). Токены — из tokens.css. ─────────────────────────── */
.pp-mh {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  min-height: 60px; padding: 10px 20px;
  background: rgba(255, 253, 247, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, rgba(20, 20, 20, .08));
}
/* Бренд-блок = доминанта (аватар/лого + имя мастера + тонкий powered-by) */
.pp-mh-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pp-mh-home { flex: none; display: inline-flex; border-radius: 12px; text-decoration: none; }
.pp-mh-ava {
  width: 38px; height: 38px; border-radius: 12px; flex: none; object-fit: cover;
  background: var(--bg2, #F6F2EA); box-shadow: 0 4px 12px -5px rgba(20, 20, 20, .3);
}
.pp-mh-ava.is-init {
  display: grid; place-items: center; color: #fff;
  font: 800 17px var(--font-display, 'Unbounded', sans-serif);
  background: var(--grad-hero, linear-gradient(135deg, #FF5E7E, #7C5CFF));
}
.pp-mh-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-mh-name {
  font: 800 18px var(--font-display, 'Unbounded', sans-serif);
  letter-spacing: -.02em; color: var(--ink, #141414); line-height: 1.12;
  text-decoration: none; display: inline-flex; align-items: center;
  max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-mh-name:hover { color: var(--violet, #7C5CFF); }
.pp-mh-pb {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 11px var(--font, 'Inter', sans-serif); color: var(--ink2, #5B5B66);
  text-decoration: none; opacity: .72; transition: opacity .15s, color .15s;
}
.pp-mh-pb:hover { opacity: 1; color: var(--violet, #7C5CFF); }
.pp-mh-pb-logo {
  width: 13px; height: 13px; flex: none; border-radius: 4px;
  background: var(--grad-hero, linear-gradient(135deg, #FF5E7E, #7C5CFF));
}
/* Anchor-навигация по ЕГО секциям — тихий (tertiary) вес, не спорит с CTA/брендом */
.pp-mh-nav { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.pp-mh-link {
  appearance: none; background: transparent; border: 0; cursor: pointer; text-decoration: none;
  font: 600 14px var(--font, 'Inter', sans-serif); color: var(--ink2, #5B5B66);
  padding: 8px 12px; border-radius: 10px; min-height: 40px;
  display: inline-flex; align-items: center; transition: color .15s, background .15s;
}
.pp-mh-link:hover { color: var(--ink, #141414); background: rgba(20, 20, 20, .05); }
/* Правый край: один primary CTA (+ бургер на мобиле) */
.pp-mh-right { margin-left: auto; display: flex; align-items: center; gap: 10px; position: relative; }
.pp-mh-cta {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  font: 700 14px var(--font, 'Inter', sans-serif); color: #fff;
  background: var(--grad-hero, linear-gradient(135deg, #FF5E7E, #7C5CFF));
  border-radius: var(--pill, 999px); padding: 11px 18px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(124, 92, 255, .7);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
.pp-mh-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(124, 92, 255, .85); }
/* Доступность: видимый фокус на всех интерактивных (не удаляем outline) */
.pp-mh-link:focus-visible, .pp-mh-home:focus-visible,
.pp-mh-name:focus-visible, .pp-mh-pb:focus-visible, .pp-mh-mlink:focus-visible {
  outline: 2px solid var(--violet, #7C5CFF); outline-offset: 2px; border-radius: 10px;
}
.pp-mh-cta:focus-visible, .pp-mh-burger:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--bg, #FFFDF7), 0 0 0 5px var(--violet, #7C5CFF);
}
/* Бургер + выпадающее меню (мобайл) */
.pp-mh-burger {
  display: none; appearance: none; border: 1px solid var(--line2, rgba(20, 20, 20, .14));
  background: var(--card, #fff); color: var(--ink, #141414); cursor: pointer;
  width: 44px; height: 44px; border-radius: 12px; place-items: center;
}
.pp-mh-burger svg { width: 22px; height: 22px; }
.pp-mh-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; z-index: 60;
  background: var(--card, #fff); border: 1px solid var(--line2, rgba(20, 20, 20, .14));
  border-radius: 16px; box-shadow: var(--shadow-lg, 0 20px 50px -20px rgba(124, 92, 255, .35));
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.pp-mh-menu[hidden] { display: none; }
.pp-mh-mlink {
  appearance: none; background: transparent; border: 0; cursor: pointer; width: 100%;
  text-align: left; text-decoration: none; display: flex; align-items: center; gap: 8px;
  font: 600 15px var(--font, 'Inter', sans-serif); color: var(--ink, #141414);
  padding: 11px 14px; min-height: 44px; border-radius: 10px;
}
.pp-mh-mlink:hover { background: rgba(20, 20, 20, .05); }
.pp-mh-mlink.is-cta {
  justify-content: center; color: #fff; margin-top: 4px;
  background: var(--grad-hero, linear-gradient(135deg, #FF5E7E, #7C5CFF));
  box-shadow: 0 8px 20px -8px rgba(124, 92, 255, .7);
}
.pp-mh-menu-pb {
  margin-top: 6px; padding: 10px 14px 4px; border-top: 1px solid var(--line, rgba(20, 20, 20, .08));
  display: flex; justify-content: center;
}
@media (max-width: 640px) {
  .pp-mh { gap: 10px; padding: 8px 14px; }
  .pp-mh-nav { display: none; }
  .pp-mh-cta { display: none; }               /* CTA переезжает в бургер-меню */
  .pp-mh-brand .pp-mh-pb { display: none; }    /* powered-by переезжает в меню */
  .pp-mh-burger { display: grid; }
  .pp-mh-name { max-width: 56vw; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-mh-cta, .pp-mh-link, .pp-mh-pb { transition: none; }
  .pp-mh-cta:hover { transform: none; }
}

/* ── Ссылка «👤 Профиль» в шапке витрины (site-smith wave-2, ux-pro gate) ───────────
   Всегда видима в правом кластере как ВТОРИЧНОЕ действие (§14.A): tertiary-ghost вес,
   не спорит с primary «✉️ Написать». Токены с hex-fallback → внутри [data-r] темы
   --violet/--ink ремапятся на акцент витрины. На мобиле уезжает в бургер (.pp-mh-mlink). */
.pp-mh-profile {
  appearance: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 14px var(--font, 'Inter', sans-serif); color: var(--ink2, #5B5B66);
  background: transparent; border: 1px solid var(--line2, rgba(20, 20, 20, .14));
  border-radius: var(--pill, 999px); padding: 10px 15px; min-height: 44px;
  transition: color .15s, background .15s, border-color .15s;
}
.pp-mh-profile:hover {
  color: var(--ink, #141414); background: rgba(20, 20, 20, .05);
  border-color: var(--violet, #7C5CFF);
}
.pp-mh-profile:focus-visible {
  outline: 2px solid var(--violet, #7C5CFF); outline-offset: 2px;
}
@media (max-width: 640px) { .pp-mh-profile { display: none; } } /* в бургер-меню */
@media (prefers-reduced-motion: reduce) { .pp-mh-profile { transition: none; } }

/* ── Подвал витрины: копирайт + дубль ссылки на профиль (решение владельца 2026-07-17).
   Структура задана inline (profile.js shopFooterHTML) на var-контракте (--sline/--smut/--acc);
   здесь — только доводка: hover-состояние ссылки + видимый фокус (§6). ─────────────── */
.pp-shop-foot-link {
  transition: opacity .15s ease-out;
  border-radius: var(--rad-xs, 6px);
}
.pp-shop-foot-link:hover { opacity: .72; text-decoration: underline; }
.pp-shop-foot-link:focus-visible {
  outline: 2px solid var(--acc, var(--violet, #7C5CFF)); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .pp-shop-foot-link { transition: none; } }

/* ── Анти-content-flash витрины /@handle/shop (site-smith механизм, ux-pro CSS-контракт) ──
   Inline-скрипт в <head> shop_ssr.html ставит `html.shop-hydrating` ДО первого кадра
   (+4s safety-timeout сам снимает); profile.js revealShop() снимает класс, когда гидрация
   домонтировала полный сайт (17 блоков) поверх 2-блочного SSR-каркаса.

   Цель: пока класс висит — НЕ показывать промежуточный 2-блочный кадр тела витрины, но
   держать бренд мгновенно (шапка .pp-mh + тема-фон #app с data-r остаются видимы, без
   бланка/спиннера). Снятие класса → тело плавно проявляется (fade-in).

   Инварианты контракта:
   · Селектор СТРОГО `html.shop-hydrating …` (условный, НЕ безусловный) — если JS сдох и
     inline-скрипт не отработал, класс не добавится → тело сразу видимо; а если добавился,
     но revealShop() не вызвался, 4s-таймер снимет класс → тело не залипнет. Fail-open.
   · opacity, НЕ display:none — нет reflow, reveal остаётся плавным fade (не «прыжок»).
   · pointer-events:none на скрытом теле — невидимый каркас не перехватывает клики до reveal.
   · Мотив-токенов длительности в tokens.css нет (файл несёт только цвет/spacing/radius/type-
     шкалы; тайминги в pro.css — литералы, как .15s/.18s). Длительность reveal вынесена в
     локальный контракт-var --pp-shop-reveal-* → одно место правки; появится --dur-* в
     tokens.css → перецелить фолбэк сюда. Значение по канону движения: ~.35s ease. ─────────── */
.pp-main-site,
.pp-wm {
  --pp-shop-reveal-dur: .35s;
  --pp-shop-reveal-ease: ease;
  transition: opacity var(--pp-shop-reveal-dur) var(--pp-shop-reveal-ease);
}
html.shop-hydrating .pp-main-site,
html.shop-hydrating .pp-wm {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pp-main-site,
  .pp-wm { transition: none; }   /* reveal мгновенный, без fade */
}