/* =========================================================
   NIGHT ANGELS — classic directory skin
   Плотная «каталожная» вёрстка: узкие отступы, таблицы,
   тёмная навигация, компактные карточки. Подключается
   ПОСЛЕ design-modern.css и перекрывает публичную часть.
   ========================================================= */

/* ---------- Tokens ---------- */
:root,
[data-theme="light"] {
  --brand:      #d61f3d;
  --brand-dark: #ab1730;
  --link:       #1668b3;
  --link-dark:  #0f4d85;
  --nav-bg:     #2f3336;
  --nav-ink:    #e8eaec;
  --subnav-bg:  #ededef;
  --page-bg:    #f4f5f7;
  --tbl-head:   #1f74b5;

  --bg:        var(--page-bg);
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f7f8f9;
  --card:      #ffffff;
  --card-2:    #f7f8f9;
  --card-bg:   #ffffff;
  --ink:       #24282d;
  --text:      #24282d;
  --ink-soft:  #4a5058;
  --muted:     #838b95;
  --gold:      var(--brand);
  --gold-2:    #e8425c;
  --gold-deep: var(--brand-dark);
  --wine:      var(--brand-dark);
  --line:      #d9dde2;
  --line-gold: #f1bcc6;
  --shadow:    rgba(20, 24, 30, 0.08);
  --on-gold:   #ffffff;
  --header-bg: #ffffff;
  --chip-bg:   #f2f3f5;
}

[data-theme="dark"] {
  --brand:      #e8425c;
  --brand-dark: #f2647a;
  --link:       #6bb2e8;
  --link-dark:  #8cc6f2;
  --nav-bg:     #17191c;
  --nav-ink:    #dcdfe3;
  --subnav-bg:  #1c1f23;
  --page-bg:    #101215;
  --tbl-head:   #1b4f7a;

  --bg:        var(--page-bg);
  --bg-2:      #16181c;
  --surface:   #191c20;
  --surface-2: #1f2328;
  --card:      #191c20;
  --card-2:    #1f2328;
  --card-bg:   #191c20;
  --ink:       #e9ebee;
  --text:      #e9ebee;
  --ink-soft:  #b7bdc5;
  --muted:     #838b95;
  --gold:      var(--brand);
  --gold-deep: var(--brand-dark);
  --line:      #2b3036;
  --line-gold: #582431;
  --header-bg: #16181c;
  --chip-bg:   #22262b;
}

:root {
  --sans:  Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --serif: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --display: var(--sans);
  --maxw: 1220px;
  --r-lg: 3px;
  --r-md: 2px;
  --r-sm: 2px;
}

/* ---------- Base ---------- */
body {
  background: var(--page-bg);
  font-size: 13px;
  line-height: 1.45;
}
.container { padding: 0 14px; }
a { color: var(--link); }
a:hover { color: var(--link-dark); }
h1, h2, h3, h4 { letter-spacing: 0; }

.btn {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 3px;
}
.btn-sm { padding: 6px 11px; font-size: 11px; }
.btn-gold { background: var(--brand); border-color: var(--brand); }
.btn-gold:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-blue { background: var(--link); border-color: var(--link); color: #fff; }
.btn-blue:hover { background: var(--link-dark); border-color: var(--link-dark); color: #fff; }

/* ---------- Logo ---------- */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.na-logo { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.na-logo-plate {
  display: inline-block; background: var(--brand); color: #fff;
  font: 900 20px/1 "Arial Black", Arial, sans-serif; letter-spacing: 0.5px;
  padding: 7px 9px 6px; border-radius: 3px;
}
.na-logo-word {
  font: 900 20px/1 "Arial Black", Arial, sans-serif; letter-spacing: 0.5px;
  color: var(--ink);
}
.na-logo-wings { width: 52px; height: 23px; flex: none; color: var(--ink); }
.na-logo-wings .na-wing { fill: currentColor; }
.na-logo-wings .na-heart { fill: var(--brand); }
.brand .brand-sub {
  display: block; font-size: 9px; letter-spacing: 0.06em; color: var(--muted);
  text-transform: uppercase; margin: 3px 0 0;
}
.brand-mark { font: 900 18px/1 "Arial Black", Arial, sans-serif; color: var(--ink); }
.na-logo-sm .na-logo-plate, .na-logo-sm .na-logo-word { font-size: 16px; }
.na-logo-sm .na-logo-plate { padding: 6px 7px 5px; }
.na-logo-sm .na-logo-wings { width: 38px; height: 18px; }
.footer-brand .brand-sub { margin-top: 8px; }

/* ---------- Header: top white strip ---------- */
.site-header {
  position: static; padding: 0; border-bottom: 0; background: transparent;
}
.na-top { background: #fff; border-bottom: 1px solid var(--line); }
[data-theme="dark"] .na-top { background: var(--surface); }
.na-top-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
  flex-wrap: wrap; min-height: 58px; padding-top: 6px; padding-bottom: 6px;
}
.na-top .brand { text-decoration: none; display: block; }
.na-top-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.na-top-link {
  font-size: 12px; color: var(--ink-soft); text-decoration: none; padding: 0 6px; white-space: nowrap;
}
.na-top-link:hover { color: var(--brand); }
.lang-switch button { padding: 6px 9px; font-size: 10px; }
.theme-toggle { width: 32px; height: 30px; }

/* On phones the switcher is moved into the dark bar by header.js — there is no
   room for it next to the logo, and the dark bar has plenty. */
.na-nav .lang-switch { align-self: center; border-color: rgba(255, 255, 255, 0.24); }
.na-nav .lang-switch button { background: transparent; color: var(--nav-ink); }
.na-nav .lang-switch button + button { border-left-color: rgba(255, 255, 255, 0.24); }
.na-nav .lang-switch button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.na-nav .lang-switch button.active { background: var(--brand); color: #fff; }

/* ---------- Header: dark nav bar ---------- */
.na-nav { background: var(--nav-bg); }
.na-nav-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; }
.site-header .nav-links {
  display: flex; gap: 0; margin: 0; flex-wrap: wrap; align-items: stretch;
}
.site-header .nav-links a {
  display: flex; align-items: center; padding: 0 13px; height: 38px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--nav-ink); text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.site-header .nav-links a:hover,
.site-header .nav-links a.is-active { background: var(--brand); color: #fff; }
.na-nav-side { display: flex; align-items: stretch; }
.na-nav-side a {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 38px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--nav-ink); text-decoration: none; white-space: nowrap;
}
.na-nav-side a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.na-nav-side .na-accent { color: #ffb3c0; }

/* ---------- Header: account state (rendered by auth.js) ---------- */
.na-auth-slot { display: flex; align-items: center; }
.na-auth-top { gap: 8px; }
.na-auth-side { display: flex; align-items: stretch; }
.na-auth-side .na-linklike {
  display: flex; align-items: center; padding: 0 12px; height: 38px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--nav-ink); background: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.na-auth-side .na-linklike:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.na-usermenu { position: relative; }
.na-usermenu-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 9px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 600;
  transition: border-color 0.15s, background-color 0.15s;
}
.na-usermenu-btn:hover { border-color: var(--brand); background: rgba(0, 0, 0, 0.03); }
[data-theme="dark"] .na-usermenu-btn:hover { background: rgba(255, 255, 255, 0.06); }
.na-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
}
.na-usermenu-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-usermenu-caret { opacity: 0.55; flex: none; }
.na-usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 80; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}
.na-usermenu-pop[hidden] { display: none; }
.na-usermenu-pop > a,
.na-usermenu-pop > button {
  display: block; width: 100%; text-align: left; padding: 9px 11px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); text-decoration: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
.na-usermenu-pop > a:hover,
.na-usermenu-pop > button:hover { background: rgba(0, 0, 0, 0.05); color: var(--brand); }
[data-theme="dark"] .na-usermenu-pop > a:hover,
[data-theme="dark"] .na-usermenu-pop > button:hover { background: rgba(255, 255, 255, 0.07); }
.na-usermenu-pop > button[data-na-logout] { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--ink-soft); }

/* ---------- Header: light sub nav ---------- */
.na-subnav { background: var(--subnav-bg); border-bottom: 1px solid var(--line); }
.na-subnav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0; min-height: 30px; }
.na-subnav a {
  font-size: 11.5px; color: var(--ink-soft); text-decoration: none; padding: 6px 11px; white-space: nowrap;
  position: relative;
}
.na-subnav a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--line);
}
.na-subnav a:hover { color: var(--brand); }

/* mobile nav toggle inside the dark bar */
.site-header .nav-toggle {
  border: 0; background: transparent; width: 42px; height: 38px; border-radius: 0;
}
.site-header .nav-toggle span { background: var(--nav-ink); }

/* ---------- Page shell ---------- */
.na-page { background: transparent; }
.na-sheet {
  background: var(--surface); border: 1px solid var(--line); border-top: 0;
  padding: 12px 14px 20px;
}

/* ---------- Breadcrumbs ---------- */
.na-crumbs { padding: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.na-crumbs a { color: var(--muted); text-decoration: none; }
.na-crumbs a:hover { color: var(--brand); }
.na-crumbs span + span::before { content: "•"; margin: 0 7px; color: var(--line); }

/* ---------- Page head ---------- */
.na-pagehead {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 10px 0 8px;
}
.na-pagehead h1 {
  font-size: 24px; font-weight: 700; color: var(--ink); margin: 0;
}
.na-pagehead .na-h1-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.na-loc-btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--link); color: #fff;
  border: 0; border-radius: 3px; cursor: pointer; padding: 9px 16px;
  font: 700 11.5px/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
}
.na-loc-btn:hover { background: var(--link-dark); }

/* country / city line */
.na-geo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 0 10px; font-size: 12px; }
.na-geo-country { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.na-geo-flag { width: 18px; height: 12px; border: 1px solid var(--line); object-fit: cover; }
.na-geo a { color: var(--link); text-decoration: none; }
.na-geo a:hover { text-decoration: underline; }
.na-geo a.is-active { color: var(--brand); font-weight: 700; }
.na-geo b { color: var(--muted); font-weight: 400; }

/* Narrower cuts of a city's catalogue ("с выездом", "армянки"), rendered by
   the server on /city/... pages. Deliberately reads as navigation rather than
   as the quick-filter chips below it: these change the address, those do not. */
.facet-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; }
.facet-links a {
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  padding: 6px 12px; font-size: 12px; color: var(--ink-soft); text-decoration: none;
}
.facet-links a:hover { border-color: var(--link); color: var(--link); }
/* the row below the facets: same shape, quieter, so the two read as two
   different questions rather than one long list of twenty-two links */
.facet-links-district { padding-top: 0; }
.facet-links-district a { border-style: dashed; font-size: 11.5px; }
@media (max-width: 560px) {
  .facet-links { gap: 5px; padding-bottom: 10px; }
  .facet-links a { padding: 5px 10px; font-size: 11.5px; }
}

/* ---------- Filter bar (horizontal dropdown row) ---------- */
.filter-bar {
  background: transparent; border: 0; border-bottom: 0; padding: 0; margin: 0 0 12px;
}
.filter-toggle {
  display: none; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--surface); padding: 10px 12px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em;
}
.filter-panel {
  padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
}
.filter-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; padding: 0 2px;
}
.filter-head-label {
  font: 700 12px/1 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.filter-count { font-size: 12px; }
.filter-count #resultsCount { font-size: 14px; font-family: var(--sans); color: var(--brand); font-weight: 700; }
.filter-reset {
  font-size: 11px; padding: 5px 10px; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 3px;
}

.filter-grid {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch;
}
.filter-grid label {
  flex: 1 1 138px; min-width: 118px; gap: 0; position: relative;
}
.filter-grid label > span { display: none; }
.filter-grid .f-search { flex: 1 1 190px; }

.filter-grid select,
.filter-grid input[type="text"] {
  height: 32px; font-size: 12px; border-radius: 3px; background: var(--surface);
  border: 1px solid var(--line); padding: 0 10px; text-transform: uppercase; letter-spacing: 0.03em;
}
.filter-grid input[type="text"] { text-transform: none; letter-spacing: 0; }
.filter-grid select:focus,
.filter-grid input:focus { box-shadow: none; border-color: var(--link); }
.filter-grid select:hover,
.filter-grid input:hover { border-color: #b9c0c8; }

/* styled dropdown button (built by script.js) */
.fsel-btn {
  height: 32px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 3px; padding: 0 26px 0 10px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink);
}
.fsel-btn:hover { border-color: #b9c0c8; }
.fsel.is-open .fsel-btn { border-color: var(--link); }
.fsel-btn.is-placeholder { color: var(--ink-soft); }
.fsel-menu { border-radius: 3px; }
.fsel-opt { font-size: 12px; padding: 7px 10px; }

.f-check {
  flex: 0 0 auto !important; min-width: 0 !important;
  flex-direction: row !important; align-items: center; gap: 6px !important;
  border: 1px solid var(--line); border-radius: 3px; padding: 0 11px; height: 32px; background: var(--surface);
}
.f-check > span { display: inline !important; font-size: 11.5px; white-space: nowrap; }

/* ---------- Quick chips (tag row like the competitor) ---------- */
.quick-chips { gap: 5px; margin: 0 0 10px; }
.qchip {
  padding: 5px 11px; border-radius: 3px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface); border: 1px solid var(--line);
}
.qchip:hover { border-color: var(--link); color: var(--link); }
.qchip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.qchip-dot { width: 7px; height: 7px; }

.saved-bar { gap: 6px; margin: 0 0 10px; }
.saved-bar .btn { font-size: 10.5px; padding: 5px 10px; }
.saved-chip { border-radius: 3px; }

/* ---------- Section headings in the catalog ---------- */
.na-sec-head {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 9px;
  font: 700 13px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.na-sec-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.na-sec-dot {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 17px;
  background: var(--brand); color: #fff; border-radius: 2px; font-size: 9.5px; letter-spacing: 0.06em; padding: 0 5px;
}

/* stories */
.stories-rail { gap: 10px; padding: 2px 2px 12px; }
.story-ring { width: 58px; height: 58px; padding: 2px; background: var(--brand); }
.story-ava { width: 64px; }
.story-ava-name { font-size: 11px; max-width: 64px; color: var(--link); }

/* vip rail */
.vip-rail-title, .recent-rail-title { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.vip-rail-badge { border-radius: 2px; font-size: 10px; padding: 2px 7px; }
.vip-card { flex-basis: 132px; }
.vip-card-img { border-radius: 2px; }
.vip-card-tier { border-radius: 2px; font-size: 9.5px; padding: 2px 6px; }
.vip-card-tier.is-vip { background: var(--brand); }
.vip-card-tier.is-top { background: #f0a500; color: #241c00; }
.vip-card-name { font-size: 12.5px; margin-top: 5px; }
.vip-card-loc { font-size: 11px; }
.recent-card, .recent-card-img { width: 96px; }
.recent-card-img { height: 128px; border-radius: 2px; }
.recent-split { font-size: 10px; padding-left: 10px; }

/* ---------- Catalog grid ---------- */
.catalog { padding: 0 0 32px; }
.profiles-grid {
  grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
  gap: 10px;
}
.catalog-note { margin-top: 26px; font-size: 11.5px; }
.catalog-empty { font-size: 14px; padding: 40px 0; }

/* ---------- Profile card ---------- */
.profile {
  border: 1px solid var(--line); border-radius: 2px; box-shadow: none;
  background: var(--surface); transform: none; opacity: 1;
}
.profile.in { transform: none; }
.profile:hover {
  transform: none; box-shadow: 0 2px 8px var(--shadow); border-color: #b9c0c8;
}
.profile-top {
  padding: 6px 8px 5px; text-align: center; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.profile-name {
  font-size: 13.5px; font-weight: 700; color: var(--link); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile:hover .profile-name { color: var(--brand); }
.profile-photo { aspect-ratio: 3 / 4; }

/* vertical badge stack — left side, like the competitor */
.profile-badges {
  top: 6px; left: 6px; right: auto; align-items: flex-start; gap: 3px; flex-direction: column;
}
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 3px 6px; border-radius: 2px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
}
.badge-vip { background: var(--brand); color: #fff; }
.badge-top { background: #f0a500; color: #241c00; }
.badge-premium { background: #2f6fd0; color: #fff; }
.badge-online { background: rgba(18, 22, 28, 0.7); color: #d6f5d8; }
.badge-video { background: #d63bb0; color: #fff; }
.badge-new { background: #e8425c; color: #fff; }

/* diagonal VERIFIED ribbon, bottom-right */
.profile-verified {
  top: auto; left: auto; right: -34px; bottom: 16px; z-index: 3;
  background: #2fa84f; color: #fff; padding: 3px 34px; border-radius: 0;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transform: rotate(-45deg); transform-origin: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Its opposite takes the same corner, so the two can never be read as two
   different kinds of mark — and so neither lands on the TOP/PREMIUM badges,
   which own the top-left. Grey and unbolded: a listing nobody vouched for is
   not being accused of anything, and a red ribbon would say it was. */
.profile-unchecked {
  top: auto; left: auto; right: -34px; bottom: 16px; z-index: 3;
  background: rgba(70, 76, 88, 0.85); color: #fff; padding: 3px 34px; border-radius: 0;
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  transform: rotate(-45deg); transform-origin: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* every part of the corner is stated here on purpose: with only top/right set
   the button fell back to the normal flow whenever the other stylesheet was
   missing or stale, which parked it in the middle of the photo's top edge */
.profile-fav { position: absolute; z-index: 3; top: 6px; right: 6px; left: auto; bottom: auto; width: 26px; height: 26px; }
.profile-fav svg { width: 14px; height: 14px; }

.profile-body { padding: 7px 8px 9px; text-align: center; }
.profile-loc { font-size: 11.5px; color: var(--ink-soft); margin: 0; font-weight: 400; }
.profile-loc b { color: var(--link); font-weight: 700; }
.profile-divider { display: none; }
.profile-phys { font-size: 11px; color: var(--muted); margin-top: 3px; }
.profile-travel { font-size: 10.5px; margin-top: 3px; }
.profile-tags { display: none; }
.profile-rating { font-size: 11px; color: var(--brand); }
.profile-rating i { font-size: 10px; }
.profile-hoverbtn { display: none; }

/* ---------- Profile page (анкета) ---------- */
.pp { padding: 0 0 40px; }
.pp-back { font-size: 12px; margin-bottom: 10px; }

/* centred title block */
.pp-titlebar { text-align: center; padding: 14px 0 10px; }
.pp-titlebar .pp-name {
  font-size: 30px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.pp-titlebar .pp-handle { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* the ring rides above the name: the title block is centred, so an avatar
   beside it the way Instagram does would sit off to one side of nothing */
.pp-story { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; margin: 0 auto 12px; padding: 0; border: none; background: none; cursor: pointer; }
.pp-story .story-ring { width: 72px; height: 72px; }
.pp-story-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.pp-story:hover .story-ring { filter: brightness(1.08); }
.pp-statbar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  margin: 12px auto 16px; width: fit-content; max-width: 100%;
}
.pp-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 20px; min-width: 96px;
}
.pp-stat + .pp-stat { border-left: 1px solid var(--line); }
.pp-stat i { font-style: normal; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pp-stat b { font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* two-column layout: media rail + content */
.pp-hero { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; margin-bottom: 18px; align-items: start; }
.pp-media { position: static; top: auto; align-self: start; }
.pp-stage { border-radius: 2px; }
.pp-thumbs { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pp-thumb { border-radius: 2px; }
.pp-badges { top: 8px; left: 8px; right: auto; align-items: flex-start; }
/* the heart sits in the free corner of the photo, the same place and shape as on
   the catalogue cards; the badges are on the left and the arrows mid-height */
.pp-stage-fav { top: 8px; right: 8px; width: 36px; height: 36px; }
.pp-stage-fav svg { width: 20px; height: 20px; }
.pp-verified {
  top: auto; bottom: 18px; left: auto; right: -38px; padding: 4px 38px;
  background: #2fa84f; border-radius: 0; transform: rotate(-45deg);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}

/* left rail widgets */
.pp-widget {
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  margin-top: 10px; overflow: hidden;
}
.pp-widget-head {
  background: var(--link); color: #fff; padding: 7px 10px;
  font: 700 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}
.pp-widget-body { padding: 10px; }
.pp-vote { display: flex; align-items: center; gap: 8px; }
.pp-vote-btn {
  width: 30px; height: 28px; border: 1px solid var(--line); background: var(--surface); border-radius: 3px;
  cursor: pointer; color: var(--ink-soft); font-size: 13px; line-height: 1;
}
.pp-vote-btn:hover { border-color: var(--brand); color: var(--brand); }
.pp-vote-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--chip-bg); overflow: hidden; }
.pp-vote-bar i { display: block; height: 100%; background: var(--brand); }
.pp-vote-num { font-size: 11px; color: var(--muted); text-align: center; margin-top: 5px; }

.pp-photocheck { display: flex; align-items: flex-start; gap: 9px; }
.pp-photocheck svg { flex: none; color: #2fa84f; }
.pp-photocheck b { display: block; font-size: 11.5px; color: var(--ink); }
.pp-photocheck span { font-size: 11px; color: var(--muted); }
/* The same block, saying the opposite. Grey rather than red: this is the
   absence of a vouch, not a warning about the person, and colouring it like a
   danger would make the site accuse someone it has no evidence against. */
.pp-photocheck--no svg { color: var(--muted); }
.pp-photocheck--no b { color: var(--muted); }

/* content column */
.pp-intro { gap: 0; }
.pp-header { margin-bottom: 12px; }
.pp-name { font-size: 22px; }
.pp-loc { font-size: 12px; margin-top: 5px; }
.pp-meta { font-size: 12px; gap: 12px; margin-top: 6px; }
.pp-tags { gap: 5px; margin-top: 10px; }
.pp-tags span { font-size: 11px; padding: 3px 9px; border-radius: 3px; }
.pp-quick { gap: 5px; margin-top: 10px; }
.pp-quick-item { padding: 6px 11px; border-radius: 3px; min-width: 54px; }
.pp-quick-item b { font-size: 14px; }
.pp-quick-item i { font-size: 9px; }

/* headline strip: short pitch + live chat */
.pp-pitch {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--link); padding: 0 0 10px; margin: 0 0 14px;
}
.pp-pitch-text { font-size: 14px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; }
.pp-pitch-sub { display: block; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 3px; }

/* contact block */
.pp-contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.pp-contact-rows { display: grid; gap: 7px; margin-bottom: 12px; }
.pp-crow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pp-crow-label { color: var(--brand); min-width: 62px; font-size: 11.5px; }
.pp-crow a { color: var(--link); text-decoration: none; font-weight: 700; }
.pp-crow a:hover { text-decoration: underline; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-actions .btn { flex: 1 1 auto; }
.pp-minor-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp-minor-actions button, .pp-minor-actions a {
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  color: var(--ink-soft); font: 400 11px/1 var(--sans); padding: 7px 10px; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pp-minor-actions button:hover, .pp-minor-actions a:hover { border-color: var(--brand); color: var(--brand); }

.pp-h-plain {
  background: none; color: var(--brand); padding: 0 0 6px; margin: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
.pp-widget-contact .pp-widget-note { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
/* The messenger icons sit under the contact rows, which are small type, so
   the 42px default from the shared sheet is scaled to match them. */
.pp-contact-grid .pp-socials { margin: 0 0 14px; gap: 8px; }
.pp-contact-grid .pp-social { width: 36px; height: 36px; }
.pp-hours { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.pp-hours b { display: block; color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.pp-hours a { color: var(--link); margin-right: 6px; }

/* cards → flat tables.

   The cards are short tables of unequal length, so a plain grid left holes:
   a tall Параметры next to a short Тарифы, and an empty half-row at the end.
   Two things keep the rows straight. Cards in a row are stretched to the same
   height, so their frames line up instead of hanging at random depths, and a
   card left alone on the last row is widened to the full width by profile.js
   (see markLastCardWide) rather than sitting next to a gap. What is inside the
   cards is laid out in two columns as well, which keeps the heights close
   enough that stretching costs almost no empty space. */
.pp-cards {
  columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: stretch;
}
.pp-cards .pp-card { margin: 0; }
.pp-cards > .pp-card-span { grid-column: 1 / -1; }
.pp-card {
  padding: 0; border: 1px solid var(--line); border-radius: 3px; box-shadow: none; overflow: hidden;
  background: var(--surface);
}
.pp-h {
  margin: 0; padding: 8px 11px; background: var(--tbl-head); color: #fff;
  font: 700 11.5px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
}
.pp-card > *:not(.pp-h) { margin-left: 11px; margin-right: 11px; }
.pp-card > .pp-about,
.pp-card > .pp-specs,
.pp-card > .pp-langs,
.pp-card > .pp-rates,
.pp-card > .pp-drow,
.pp-card > .pp-services,
.pp-card > .pp-reviews,
.pp-card > .pp-rating-summary,
.pp-card > .pp-review-form { margin-top: 10px; margin-bottom: 11px; }
.pp-about { font-size: 13px; line-height: 1.55; }
.pp-about-tr { font-size: 11.5px; }

/* auto-fit rather than a fixed pair of columns: the same rules then give two
   columns in a half-width card, more when a card is widened to the full width,
   and one on a phone, without a breakpoint for each case */
.pp-specs { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 26px; }
.pp-specs .spec-row { padding: 6px 0; border-bottom: 1px dotted var(--line); }
.pp-specs dt { font-size: 12px; color: var(--link); }
.pp-specs dd { font-size: 12px; font-weight: 400; color: var(--ink); }

/* rates as a real table */
.pp-rates { display: block; }
.pp-rate-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pp-rate-table th {
  background: var(--tbl-head); color: #fff; text-align: left; padding: 6px 9px;
  font: 700 11px/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
}
.pp-rate-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); color: var(--ink); }
.pp-rate-table tr:last-child td { border-bottom: 0; }
.pp-rate-table .pp-rate-dur { color: var(--link); font-weight: 700; }

/* services checklist */
.pp-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 26px; }
.pp-service {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 12.5px; color: var(--link);
}
.pp-service:last-child { border-bottom: 0; }
.pp-service::after { content: "✓"; color: #2fa84f; font-weight: 700; }

.pp-drow { padding: 8px 0; }
.pp-dlabel { flex-basis: 96px; font-size: 11.5px; color: var(--link); }
.pp-chips span { font-size: 11.5px; padding: 4px 10px; border-radius: 3px; }
.pp-lang-name { font-size: 12px; }
.pp-langs { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 26px; }
.pp-lang-row { padding: 6px 0; border-bottom: 1px dotted var(--line); }
.pp-card-wide { margin-top: 16px; }
.pp-similar-title { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; margin: 18px 0 10px; }
.pp-note { font-size: 11.5px; }

.pp-cta { padding: 12px; border-radius: 3px; border-color: var(--line); }
.pp-cta-price { font-size: 18px; margin-bottom: 10px; }
.pp-cta-points li { font-size: 12px; }

/* ---------- Footer ---------- */
.footer { background: var(--surface); border-top: 2px solid var(--brand); margin-top: 24px; }
.footer-top { padding: 26px 0 20px; gap: 22px; }
.footer-col h4 { font-size: 11px; letter-spacing: 0.07em; color: var(--ink); margin-bottom: 9px; }
.footer-col a, .footer-col span { font-size: 12px; margin-bottom: 6px; }
.footer-bottom { padding: 14px 0; }
.footer-bottom p { font-size: 11px; }

/* ---------- Misc pages ---------- */
.section { padding: 28px 0; }
.section-tight { padding: 14px 0 6px; }
.section-title { font-size: 22px; font-weight: 700; margin: 6px 0 8px; }
.section-lead { font-size: 13.5px; }
.eyebrow { font-size: 11px; letter-spacing: 0.09em; color: var(--brand); }
.contact-strip { padding: 30px 0; }
.strip-title { font-size: 22px; margin: 8px 0 8px; }
.strip-text { font-size: 13.5px; }
.gallery-intro { padding: 12px 0 4px; }
.gallery-intro .section-title { display: none; }
.gallery-intro .section-lead, .gallery-intro .eyebrow { display: none; }

/* ---------- Content pages (About / How / Pricing / Experiences / For women) ---------- */
.np-hero { border-bottom: 1px solid var(--line); }
.np-hero-inner { padding: 34px 0 30px; padding-left: 20px; border-left-width: 3px; }
.np-eyebrow { font-size: 11px; margin-bottom: 10px; }
.np-title { font-size: clamp(22px, 3.4vw, 34px); letter-spacing: -0.01em; }
.np-lead { font-size: clamp(13px, 1.3vw, 15px); margin-top: 14px; }
.np-section { padding: 32px 0; }
.np-stitle { font-size: clamp(19px, 2.4vw, 26px); letter-spacing: 0; }
.np-sublead { font-size: 13.5px; margin-top: 10px; }
.np-shead { margin-bottom: 22px; }
.np-prose p { font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
.np-quote { font-size: clamp(16px, 1.8vw, 20px); border-left-width: 3px; padding-left: 16px; margin-bottom: 20px; }
.np-card { padding: 18px 16px; border-radius: 3px; box-shadow: none; }
.np-card:hover { transform: none; box-shadow: 0 2px 8px var(--shadow); }
.np-card-ic { width: 34px; height: 34px; font-size: 16px; border-radius: 3px; margin-bottom: 12px; }
.np-card-t { font-size: 15px; }
.np-card-d { font-size: 13px; }
.np-step { padding: 16px 18px; border-radius: 3px; grid-template-columns: 42px 1fr; gap: 14px; }
.np-step:hover { transform: none; }
.np-step-n { width: 42px; height: 42px; font-size: 16px; }
.np-step-t { font-size: 15px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pp-hero { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* the sticky CTA sits on top of the page bottom — keep the footer reachable */
  .pp-sticky ~ .footer .footer-bottom { padding-bottom: 76px; }
  .pp-sticky { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .pp-sticky-name { font-size: 13px; }
  .pp-sticky-price { font-size: 11.5px; }
}
@media (max-width: 900px) {
  /* ---- header on phones ----
     One white row with the logo and the account button, one dark row with the
     menu, the section links and the language switcher. Nothing wraps, so the
     account button can no longer end up sitting under the logo. */
  .na-top-inner {
    flex-wrap: nowrap; gap: 10px; min-height: 54px;
    padding-top: 7px; padding-bottom: 7px;
  }
  .na-top .brand { min-width: 0; flex: 0 1 auto; }
  .na-top-right { flex: none; flex-wrap: nowrap; gap: 8px; }
  .na-top-link { display: none; }
  .na-subnav { display: none; }
  .na-nav { position: relative; }
  .na-nav-inner { align-items: center; gap: 6px; }
  /* the cabinet link stays; favourites and sign-out live in the account menu */
  .na-auth-side.is-auth a:not(.na-accent),
  .na-auth-side.is-auth .na-linklike { display: none; }
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .nav-links {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; margin: 0;
    background: var(--nav-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  }
  /* the menu carries the whole site on a phone, so let it scroll rather than
     wrap into columns once it outgrows the screen */
  .site-header.nav-open .nav-links {
    max-height: 70vh; opacity: 1; visibility: visible; padding: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .site-header .nav-links a {
    height: auto; padding: 12px 16px; font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .site-header .nav-links a:first-child { border-top: none; }
  /* the sub-nav and the support link are folded into the burger on phones */
  .site-header .nav-links a.nav-extra { color: rgba(232, 234, 236, 0.72); font-weight: 600; }
  .site-header .nav-links a.nav-extra-first { border-top: 3px solid rgba(255, 255, 255, 0.18); }
  .na-nav-side a { padding: 0 8px; font-size: 10px; }
  .na-pagehead h1 { font-size: 19px; }
  .pp-hero { grid-template-columns: 1fr; }
  .pp-cards { grid-template-columns: 1fr; }
  .pp-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .filter-toggle { display: flex; }
  /* The toggle the visitor just tapped already says "Фильтры"; repeating it as
     the first line of the panel it opened says nothing twice. */
  .filter-head-label { display: none; }
  .filter-bar:not(.open) .filter-panel { display: none; }
  .filter-bar.open .filter-panel { display: block; padding: 8px; }
  .filter-grid label { flex: 1 1 45%; }
  .profiles-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

  /* ---- profile page ---- */
  .pp-titlebar { padding: 10px 0 8px; }
  .pp-titlebar .pp-name { font-size: 21px; }
  .pp-titlebar .pp-handle { font-size: 11.5px; }
  .pp-story .story-ring { width: 62px; height: 62px; }
  .pp-statbar { margin-top: 10px; }
  .pp-stat { padding: 7px 10px; min-width: 0; }
  .pp-stat i { font-size: 9px; }
  .pp-stat b { font-size: 12px; }

  /* name and the write button are already shown below, in the contact block */
  #ppPitchMain, #chatOpenTop { display: none; }
  .pp-pitch { padding-bottom: 10px; margin-bottom: 12px; }
  .pp-pitch-sub { margin-top: 0; font-size: 11.5px; }

  .pp-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .pp-actions .btn { width: 100%; }
  .pp-minor-actions button, .pp-minor-actions a { flex: 1 1 100%; text-align: center; padding: 9px 10px; }
  .pp-contact-grid .pp-socials { justify-content: center; }
  .pp-widget { margin-top: 12px; }
  .pp-similar-title { margin: 16px 0 8px; }

  /* ---- footer ---- */
  .footer-top {
    grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: 20px 0 16px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h4 { margin-bottom: 7px; }
  .footer-col a, .footer-col span { margin-bottom: 5px; }
  .footer-bottom { padding: 12px 0; }
  .footer-bottom p { font-size: 10.5px; }
  .footer-admin { margin-top: 10px; }
}
@media (max-width: 560px) {
  .na-logo-plate, .na-logo-word { font-size: 17px; }
  .na-logo-plate { padding: 6px 7px 5px; }
  .na-logo { gap: 6px; }
  .na-logo-wings { width: 38px; height: auto; }
  .brand .brand-sub { font-size: 8.5px; letter-spacing: 0.04em; }
  /* the guest CTAs live in the nav bar below on phones; the account menu stays,
     because signing out has nowhere else to go */
  .na-top-right .btn { display: none; }
  .na-usermenu-name { display: none; }
  .na-usermenu-btn { padding: 3px; border-radius: 50%; }
  .na-usermenu-caret { display: none; }
  .na-avatar { width: 30px; height: 30px; font-size: 11.5px; }
  .na-nav-side a, .na-auth-side .na-linklike { padding: 0 9px; }
  /* These two sit in the nav bar, which is taller than they are; shrinking
     them further only made them harder to hit without buying any room. */
  .lang-switch button { padding: 9px 9px; font-size: 10.5px; }
  .theme-toggle { width: 36px; height: 34px; }
  .profiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-pagehead { gap: 8px; }
  .na-loc-btn { padding: 8px 12px; font-size: 10.5px; }
  .pp-statbar { width: 100%; }
  .pp-stat { flex: 1 1 40%; min-width: 0; padding: 7px 6px; }
  .pp-stat:nth-child(3) { border-left: 0; }
  .pp-thumbs { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .pp-crow-label { min-width: 56px; }
  .pp-quick-item { flex: 1 1 22%; min-width: 0; padding: 6px 4px; }

  .footer-top { gap: 14px 10px; }
  .footer-col h4 { font-size: 10.5px; }
  .footer-col a, .footer-col span { font-size: 11.5px; }
}