/* The desktop layout starts at 900 px, and also on a phone turned sideways (640+ px wide, at most 500 px high);
   every 900/899 query below carries both conditions. */
/* Figtree (interface) and Playfair Display (logo, big titles), SIL OFL 1.1, self-hosted: CSP allows no external fonts
   and no visitor data goes to a font CDN. Licences: fonts/OFL-*.txt */
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2-variations"), url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url("fonts/figtree-latin.woff2") format("woff2-variations"), url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("fonts/playfair-latin-ext.woff2") format("woff2-variations"), url("fonts/playfair-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("fonts/playfair-latin.woff2") format("woff2-variations"), url("fonts/playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Brand tokens. One palette, two moods: porcelain day and aubergine night. */
:root {
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #20232b;
  --ink-soft: #6b7280;
  --line: #e9eaf0;
  --plum: #e8335f;       /* accent, sampled from the mockup */
  --plum-dark: #c81e4a;
  --plum-ink: #ffffff;
  --tint: #fdf0f5;       /* light accent background */
  --diamond: #2f6fa3;
  --elite: #a87a1c;
  --ok: #22a35a;
  --warn: #9a5b00;
  --bad: #b42335;
  --radius-photo: 14px;
  --radius-ui: 10px;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans); /* interface headings stay in Figtree */
  --display: "Playfair Display", Georgia, "Times New Roman", serif; /* logo and big titles */
  color-scheme: light;
}
/* Light only: no dark theme */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--plum); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; }
.muted { color: var(--ink-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead */
.mast { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
@supports not (background: color-mix(in srgb, red, blue)) { .mast { background: var(--surface); } }
.mast .wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand small { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--ink-soft); margin-left: 8px; }
.langs { display: flex; gap: 4px; }
.langs a { padding: 4px 8px; border-radius: var(--radius-ui); text-decoration: none; color: var(--ink-soft); font-size: .9rem; }
.langs a[aria-current] { color: var(--ink); background: var(--paper); font-weight: 600; }

/* Buttons and forms */
.btn { transition: background-color .15s, color .15s, border-color .15s, transform .1s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--plum); border-radius: var(--radius-ui); background: var(--plum); color: var(--plum-ink);
  font: 600 .95rem var(--sans); text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--plum); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: .85rem; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 4px; }
.field { margin-bottom: 16px; }
.field .hint { font-size: .85rem; color: var(--ink-soft); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: 16px var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ui); }
textarea { min-height: 120px; resize: vertical; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; width: 18px; height: 18px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.notice { padding: 12px 16px; border-radius: var(--radius-ui); margin: 16px 0; background: var(--surface); border-left: 4px solid var(--ok); }
.notice.error { border-left-color: var(--bad); }
.notice ul { margin: 0; padding-left: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ui); padding: 20px; margin-bottom: 20px; }

/* Catalog top: district chips and the filter button first, then a short heading and line of text */
.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero .wrap { padding-top: 4px; padding-bottom: 14px; }
.hero h1 { margin: 6px 0 4px; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; }
.hero-text { margin: 0; max-width: 70ch; color: var(--ink-soft); font-size: .9rem; }
.hero-sub { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-soft); font-size: .82rem; }
.hero-sub .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.chips-row { display: flex; align-items: center; gap: 8px; }
.chips-row .rail { flex: 1; min-width: 0; }
.rail a[aria-current] { background: var(--plum) !important; border-color: var(--plum) !important; color: var(--plum-ink) !important; }
.filter-btn { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.filter-btn[aria-expanded="true"] { border-color: var(--plum); color: var(--plum); }

/* District rail: one scrollable line on phones */
.rail { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail a { flex: 0 0 auto; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
  color: var(--ink); background: var(--paper); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.rail a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rail a span { color: var(--ink-soft); margin-left: 4px; }
.rail a[aria-current] span { color: inherit; opacity: .7; }

.lead { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 24px; padding: 16px 0 8px; }
.lead h1 { margin: 0; flex: 1 1 420px; }
/* old */ .x-filters summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; padding: 12px 0; }

/* Groups by package, each with its own heading and line of text. */
.group { padding: 8px 0 12px; }
.group-head { display: grid; gap: 2px; margin: 18px 0 14px; }
.group-head h2 { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.group-head p { margin: 0; color: var(--ink-soft); max-width: 70ch; }
.group-elite .group-head h2 { color: var(--elite); }
.group-diamond .group-head h2 { color: var(--diamond); }
.group-paused { margin-top: 12px; border-top: 1px solid var(--line); }
.group-paused .group-head h2 { color: var(--ink-soft); }

/* The board: cards with the photo on top and the facts below. */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px 10px; padding-bottom: 24px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .board { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 18px; } }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .group-elite .board { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-photo); overflow: hidden; }
.card.diamond { border: 2px solid var(--diamond); }
.card.elite { border: 2px solid var(--elite); box-shadow: 0 18px 40px -22px rgba(168,122,28,.7); }
/* The photo is the card: tall 2:3 frame, name and place on it */
.tile { position: relative; display: block; aspect-ratio: 2 / 3; background: var(--line); overflow: hidden; color: #fff; text-decoration: none; }
@supports not (aspect-ratio: 1) { .tile { height: 0; padding-bottom: 150%; } .tile img { position: absolute; inset: 0; } }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .tile:hover img { transform: scale(1.04); } }
.tags { position: absolute; top: 10px; left: 10px; right: 46px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #24102a; background: rgba(255,255,255,.92); }
.tag.diamond { color: #fff; background: #2f6fa3; }
.tag.elite { color: #241500; background: linear-gradient(90deg, #8a5f10, #e8c770 50%, #b8892b); }
.mark.ok { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #2e7d4f; }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 64px 12px 12px;
  background: linear-gradient(to top, rgba(22,8,24,.9) 0%, rgba(22,8,24,.5) 55%, rgba(22,8,24,0) 100%); }
.tile .who { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.15; }
.card.elite .tile .who { font-size: 1.25rem; }
.tile .age { font-family: var(--sans); font-size: .78em; font-weight: 400; opacity: .85; margin-left: .35em; }
.tile .where { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; opacity: .9; }
.paused-tag { justify-self: start; margin-top: 4px; padding: 2px 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-size: .72rem; }
.card.off .tile img { filter: grayscale(.9) brightness(.85); }
/* Compact strip under the photo */
.info { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 8px 10px 10px; }
/* The listing's own words: visible to visitors and search engines */
.blurb { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.elite .blurb { -webkit-line-clamp: 3; font-size: .86rem; }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: auto; }
.reach { min-width: 0; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reach a { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); text-decoration: none; }
.price { font-size: .86rem; font-weight: 700; color: var(--plum); white-space: nowrap; }
.price small { font-size: .7rem; font-weight: 500; color: var(--ink-soft); }
.card.off .info { opacity: .8; }
@media (max-width: 420px) { .foot-row { flex-wrap: wrap; } }
.ico { flex: 0 0 auto; vertical-align: -3px; }
.empty { padding: 48px 0; text-align: center; color: var(--ink-soft); }
.pager { display: flex; gap: 8px; justify-content: center; padding-bottom: 32px; }
.intro { max-width: 72ch; padding: 8px 0 32px; color: var(--ink-soft); }
.intro h2 { color: var(--ink); }

/* Listing page */
.ad { display: grid; gap: 24px; padding: 24px 0 40px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .ad { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } .ad aside { position: sticky; top: 16px; } }
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.shots img, .shots video { width: 100%; border-radius: var(--radius-photo); background: var(--line); }
.shots > :first-child { grid-column: 1 / -1; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 600; }
.contact { display: grid; gap: 8px; margin: 16px 0; }
.contact .btn { min-height: 50px; font-size: 1.05rem; }
.paused { padding: 16px; border-radius: var(--radius-ui); background: var(--paper); border: 1px dashed var(--line); }
.prose { white-space: pre-line; overflow-wrap: anywhere; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .8rem; font-weight: 700; background: var(--paper); border: 1px solid var(--line); }
.badge.diamond { color: var(--diamond); border-color: var(--diamond); }
.badge.elite { color: var(--elite); border-color: var(--elite); }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.bad { color: var(--bad); border-color: var(--bad); }
details.report { margin-top: 24px; }

/* Footer */
.foot { margin-top: 24px; padding: 32px 0 40px; font-size: .88rem; color: var(--ink-soft); background: var(--surface); border-top: 1px solid var(--line); }
.foot .brand { color: #fff; display: inline-block; margin-bottom: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.foot a { color: var(--ink); }

/* Age gate and cookie note (shown by site.js only when not yet accepted) */
.gate { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(28,19,34,.92); }
.gate.on { display: flex; }
.gate .box { max-width: 460px; background: var(--surface); color: var(--ink); border-radius: var(--radius-photo); padding: 28px; }
.gate .box .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: none; max-width: 560px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ui); padding: 14px 16px; box-shadow: 0 6px 24px rgba(28,19,34,.18); }
.cookie.on { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cookie p { margin: 0; flex: 1 1 240px; font-size: .9rem; }

/* Account and admin tables */
.list { width: 100%; border-collapse: collapse; background: var(--surface); }
.list th, .list td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.list th { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.scroll { overflow-x: auto; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.tabs a { padding: 6px 12px; border-radius: var(--radius-ui); text-decoration: none; border: 1px solid var(--line); background: var(--surface); }
.tabs a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs figure { margin: 0; width: 120px; }
.thumbs img { width: 120px; height: 160px; object-fit: cover; border-radius: var(--radius-ui); }
.thumbs figcaption { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; font-size: .8rem; }
.inline { display: inline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mod { display: grid; gap: 16px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .mod { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.doc { padding: 24px 0 40px; }

/* Phones: keep the first photo shorter so the name and contacts are within one scroll */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .shots > :first-child { max-height: 62vh; object-fit: cover; }
}
@media (max-width: 480px) {
  .mast .wrap { gap: 8px; }
  .brand { font-size: 1.35rem; }
  .brand small { display: none; }
  .mast .btn.small { padding: 0 10px; }
}

.btn:active { transform: translateY(1px); }
.contact .btn { justify-content: flex-start; padding: 0 18px; }
.contact .btn.whatsapp { background: #1f8f55; border-color: #1f8f55; color: #fff; }
.contact .btn.telegram { background: #2a7fb8; border-color: #2a7fb8; color: #fff; }
.ad h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }

/* Paid banners: always labelled as advertising */
.promo { position: relative; margin: 12px 0 20px; }
.promo a { display: block; border-radius: var(--radius-ui); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.promo img { width: 100%; max-height: 320px; object-fit: cover; }
.promo-label { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 2px 8px; border-radius: 4px; font-size: .7rem; font-weight: 600;
  color: #fff; background: rgba(22,8,24,.7); }
.board-promo { grid-column: 1 / -1; }
.board-promo .promo { margin: 0; }
.thumb-wide { width: 160px; height: auto; border-radius: 6px; }
.preview-wide { width: 100%; height: auto; border-radius: var(--radius-ui); }
input[type=datetime-local] { width: 100%; min-height: 44px; padding: 10px 12px; font: 16px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ui); }

/* Logo */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.logo { display: inline-flex; align-items: baseline; gap: 8px; color: var(--plum); }
.logo-mark { flex: 0 0 auto; align-self: center; }
.logo-word { font-family: var(--serif); font-size: 1.35rem; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.logo-a { font-weight: 700; color: var(--ink); }
.logo-b { font-weight: 700; color: var(--plum); }
.logo-tld { font-weight: 500; font-size: .8em; color: var(--ink-soft); }
@media (max-width: 480px) { .logo-word { font-size: 1.2rem; } }
/* Narrow phones: one header row; sign-in stays reachable from the "Post an ad" page */
@media (max-width: 420px) { .mast .login-link { display: none; } .mast .wrap { flex-wrap: nowrap; } }
.mast .btn { white-space: nowrap; }
.upload-bar { display: block; width: 100%; height: 8px; margin: 8px 0; accent-color: var(--plum); }

/* ---------- Profile page: phone first, cards; desktop adds a right column ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 10px; font-size: .8rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.profile { display: grid; gap: 14px; padding-bottom: 20px; }
.profile-main { display: grid; gap: 14px; min-width: 0; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.p-heading { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 16px 15px 13px; }
.p-heading h1 { margin: 0 0 4px; font-size: 1.5rem; letter-spacing: -.02em; }
.p-location { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .85rem; color: var(--ink-soft); }
.p-hero { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--line); }
.profile.elite .p-hero { border-top: 3px solid var(--elite); }
.profile.diamond .p-hero { border-top: 3px solid var(--diamond); }
.p-note { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 12px 15px; font-size: .78rem; color: var(--ink-soft); }
.p-verified { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ok); }
.p-paused { margin: 0; padding: 0 15px 14px; font-size: .85rem; color: var(--ink-soft); }
.p-section .p-paused { padding: 10px 0 0; font-weight: 600; }
.p-section { padding: 18px 15px; }
.p-section h2 { margin: 0 0 12px; font-size: 1rem; letter-spacing: -.01em; }
.p-sep { height: 1px; background: var(--line); }
.p-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.p-stats > div { padding: 12px 13px; border-radius: 8px; background: var(--paper); }
.p-stats small { display: block; margin-bottom: 2px; font-size: .7rem; color: var(--ink-soft); }
.p-stats strong { font-size: .9rem; }
.p-text { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.p-actions { display: flex; gap: 9px; margin-top: 18px; }
.p-phone { margin: 10px 0 0; text-align: center; font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.p-gallery-title { margin: 0; padding: 15px; font-size: 1.05rem; }
/* Photos in their own proportions, one under another */
.p-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 7px 7px; }
.p-media video { grid-column: 1 / -1; width: 100%; max-height: 80vh; border-radius: 10px; background: #120a15; }
.p-media a { display: block; border-radius: 10px; overflow: hidden; background: var(--line); cursor: zoom-in; }
.p-media img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.p-gallery-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.p-gallery-title small { font: 400 .78rem var(--sans); color: var(--ink-soft); }
.only-desktop { display: none; }
details.report { margin: 4px 0 24px; font-size: .9rem; }
@media (min-width: 760px) {
  .profile { grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); align-items: start; gap: 20px; }
  .only-phone { display: none; }
  .only-desktop { display: block; }
  .profile-aside { position: sticky; top: 76px; }
  .p-heading h1 { font-size: 1.85rem; }
  .p-section { padding: 22px; }
  .p-gallery-title { padding: 20px; }
  .p-media { gap: 10px; }
}
@media (min-width: 1050px) { .profile { grid-template-columns: minmax(0, 660px) minmax(0, 420px); } }

/* Sticky call bar on phones */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.callbar .btn { flex: 1; min-height: 48px; }
.callbar .btn.ghost { background: var(--surface); }
@media (min-width: 760px) { .callbar { display: none; } }
@media (max-width: 759px) { body:has(.callbar) .foot { padding-bottom: 96px; } }

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12,6,14,.96); }
.lightbox::backdrop { background: rgba(12,6,14,.9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; }
.lightbox .nav, .lightbox .close { position: fixed; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); cursor: pointer; }
.lightbox .prev { left: 14px; top: calc(50% - 24px); } .lightbox .next { right: 14px; top: calc(50% - 24px); } .lightbox .close { top: 14px; right: 14px; }

/* ---------- Add an ad: one page, phone first ---------- */
.add-form { display: grid; gap: 14px; }
.add-step { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-photo); background: var(--surface); }
.add-step h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin-bottom: 14px; }
.step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .9rem; color: var(--plum-ink); background: var(--plum); }
.add-step .row { grid-template-columns: 1fr; }
@media (min-width: 600px) { .add-step .row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.pass { display: flex; gap: 8px; }
.pass input { flex: 1; }
.drop { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; border: 2px dashed var(--line); border-radius: var(--radius-photo);
  color: var(--plum); cursor: pointer; font-weight: 400; }
.drop strong { font-size: 1.05rem; }
.drop .muted { font-size: .82rem; }
.drop:focus-within, .drop:hover { border-color: var(--plum); }
.previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 600px) { .previews { grid-template-columns: repeat(4, 1fr); } }
.previews img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.previews p { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--ink-soft); }
.btn.big { width: 100%; min-height: 54px; font-size: 1.1rem; }
.add-send .check { font-size: .92rem; }
.help { margin-top: 20px; }
.help h2 { font-size: 1.05rem; }
.filters[hidden] { display: none; }
.filters { margin: 4px 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-ui); background: var(--paper); }

/* Favourite heart on cards and on the profile */
.card { position: relative; }
.fav { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  color: #fff; background: rgba(0,0,0,.18); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fav[aria-pressed="true"] { color: #fff; background: var(--plum); }
.fav[aria-pressed="true"] .ico path { fill: currentColor; }
.tags { right: 52px; }
.tag.ok { display: inline-grid; place-items: center; padding: 3px 6px; color: #fff; background: var(--ok); }
.live { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: #3ddc84; vertical-align: 2px; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.tile .who { font-size: 1.05rem; }
.tile .where .ico { color: var(--plum); }

/* Phone tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 95%, transparent);
  border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 4px 0; font-size: .7rem; text-decoration: none; color: var(--ink-soft); }
.tabbar a[aria-current] { color: var(--plum); font-weight: 600; }
body:has(.tabbar) .foot { padding-bottom: 96px; }
body:has(.callbar) .tabbar { display: none; }
@media (min-width: 760px) { .tabbar { display: none; } body:has(.tabbar) .foot { padding-bottom: 40px; } }

/* Profile actions: one main Call button, round icon buttons beside it */
.btn.call { flex: 1; min-height: 50px; border-radius: 999px; font-size: 1rem; background: var(--plum); border-color: var(--plum); color: var(--plum-ink); }
.round { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  color: var(--ink); background: var(--paper); cursor: pointer; text-decoration: none; }
.round.small { width: 38px; height: 38px; }
.round[data-done] { color: var(--ok); }
.fav-inline[aria-pressed="true"] { color: var(--plum); }
.fav-inline[aria-pressed="true"] .ico path { fill: currentColor; }
.p-head-actions { display: flex; align-items: center; gap: 6px; }
.p-heading h1 .live { width: 10px; height: 10px; vertical-align: 4px; box-shadow: none; }
.p-location .ico { color: var(--plum); }
.p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 420px) { .p-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-stats > div { background: var(--tint); }
.callbar { gap: 10px; }
.callbar .btn.call { flex: 1; }
@media (min-width: 760px) { .profile-aside .p-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-stats strong { white-space: nowrap; }

/* District chips: a few first, "More" unfolds the rest */
.rail.fold .extra { display: none; }
.rail.fold.open { flex-wrap: wrap; overflow: visible; }
.rail.fold.open .extra { display: inline-block; }
.more-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 500 .9rem var(--sans); cursor: pointer; white-space: nowrap; }
.rail.fold.open .more-chip .ico { transform: rotate(180deg); }
/* Top photo banner on the first page */
.spotlight { position: relative; margin: 6px 0 12px; border-radius: var(--radius-photo); overflow: hidden; background: #1a1418; aspect-ratio: 4 / 3; max-height: 460px; width: 100%; }
@media (min-width: 760px) { .spotlight { aspect-ratio: 21 / 9; } }
.spotlight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.spotlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,6,10,.72) 0%, rgba(10,6,10,.35) 55%, rgba(10,6,10,0) 100%); }
.spot-text { position: absolute; left: 18px; right: 18px; bottom: 20px; z-index: 1; color: #fff; max-width: 520px; }
.spot-text h1 { margin: 0 0 6px; color: #fff; font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 600; line-height: 1.1; }
.spot-text p { margin: 0 0 14px; font-size: .95rem; opacity: .9; }
.spot-cta { border-radius: 999px; background: var(--plum); border-color: var(--plum); color: #fff; }
.spot-who { position: absolute; right: 12px; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.35); text-decoration: none; }

/* ---------- Cards v3: photo with badges, caption underneath ---------- */
.board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 760px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; } }
@media (min-width: 1100px) { .board { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.group-elite .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .group-elite .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .group-elite .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.card.diamond, .card.elite { border: 0; box-shadow: none; }
.card .tile { aspect-ratio: 3 / 4; border-radius: 12px; }
.card.elite .tile { box-shadow: 0 0 0 2px var(--elite); }
.card.diamond .tile { box-shadow: 0 0 0 2px var(--diamond); }
.verified-pill, .paused-pill { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px;
  border-radius: 999px; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(20,20,24,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.verified-pill i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.paused-pill { left: auto; right: 8px; }
.card .info { padding: 8px 2px 0; gap: 2px; }
.card .who { margin: 0; font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.25; }
.card .who a { color: var(--ink); text-decoration: none; }
.card .who .live { margin-left: 6px; box-shadow: none; }
.card .where { display: flex; align-items: center; gap: 3px; margin: 0; font-size: .8rem; color: var(--ink-soft); }
.card .where .ico { color: var(--plum); }
.card.off .info { opacity: .75; }
.fav { top: 8px; right: 8px; }
.card .blurb { margin-top: 2px; font-size: .78rem; -webkit-line-clamp: 1; }

.p-hero-wrap { position: relative; }
.p-counter { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(20,20,24,.6); text-decoration: none; }
.verified-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; vertical-align: 5px;
  font: 600 .72rem var(--sans); color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.verified-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.more-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 24px; }
.more-head h2 { margin: 0; font-size: 1.2rem; }
.more-head a { display: inline-flex; align-items: center; gap: 2px; font-size: .85rem; font-weight: 600; color: var(--plum); text-decoration: none; }
.similar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
@media (min-width: 760px) { .similar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Desktop header: district links, search and favourites */
.mast-nav { display: none; gap: 18px; margin-right: auto; font-size: .88rem; font-weight: 500; }
.mast-nav a { color: var(--ink); text-decoration: none; }
.mast-nav a:hover { color: var(--plum); }
.mast-icon { display: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); text-decoration: none; }
.mast-icon:hover { background: var(--paper); color: var(--plum); }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .mast-nav { display: flex; } .mast-icon { display: grid; } .mast .brand { margin-right: 24px; } }
/* Footer in columns */
.foot-grid { display: grid; gap: 22px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-grid h2 { margin: 0 0 8px; font-size: .9rem; color: var(--ink); }
.foot-grid nav { display: grid; gap: 6px; align-content: start; }
.foot-grid nav a { color: var(--ink-soft); text-decoration: none; font-size: .86rem; }
.foot-grid nav a:hover { color: var(--plum); }
.foot-grid p { font-size: .82rem; }

/* Pagination: big "load more" on phones, numbers on desktop */
.pages { display: grid; justify-items: center; gap: 10px; padding: 8px 0 28px; }
.pages-count { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.load-more { width: 100%; max-width: 420px; border-radius: 999px; }
.page-numbers { display: none; gap: 6px; align-items: center; }
.page-numbers a, .page-numbers span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; font-size: .88rem; color: var(--ink); text-decoration: none; }
.page-numbers a:hover { background: var(--surface); }
.page-numbers a[aria-current] { background: var(--plum); color: var(--plum-ink); font-weight: 700; }
@media (min-width: 760px) { .load-more { display: none; } .page-numbers { display: flex; } }

/* Display face: logo and the big titles only */
.logo-word { font-family: var(--display); letter-spacing: -.01em; }
.logo-a, .logo-b { font-weight: 600; }
img.logo-mark { border-radius: 22%; }
.logo-tld { font-family: var(--display); font-weight: 500; }
.hero h1, .spot-text h1, .doc > h1 { font-family: var(--display); font-weight: 600; letter-spacing: 0; }
.spot-text h1 { font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1.08; }
h1, h2, h3 { letter-spacing: -.01em; }
@media (min-width: 340px) and (max-width: 759px) { .p-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .p-stats > div { padding: 10px; } .p-stats strong { font-size: .85rem; white-space: normal; } }

/* ================= Exact mockups (phone: mockup 1, desktop: mockup 4) ================= */
.only-d { display: none !important; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .only-d { display: revert !important; } .only-m { display: none !important; } }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .chips-row .only-d, .mast .only-d { display: inline-flex !important; } .d-hero.only-d { display: block !important; } .board-wide.only-d { display: block !important; } .count.only-d { display: block !important; } .mast-nav.only-d { display: flex !important; } }
/* Header */
.mast { background: var(--surface); }
.mast-row { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.mast .brand { margin-right: auto; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .mast .brand { margin-right: 28px; } .mast-row { min-height: 68px; } }
.mast-nav { gap: 22px; align-items: center; margin-right: auto; font-size: .9rem; font-weight: 500; }
.mast-nav a, .mast-more summary { color: var(--ink); text-decoration: none; cursor: pointer; }
.mast-more { position: relative; }
.mast-more summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.mast-more summary::-webkit-details-marker { display: none; }
.mast-menu { position: absolute; top: 30px; left: 0; z-index: 40; display: grid; gap: 2px; min-width: 180px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.mast-menu a { padding: 6px 10px; border-radius: 8px; }
.mast-menu a:hover { background: var(--paper); }
.mast-actions { display: flex; align-items: center; gap: 4px; }
.mast-icon { display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; text-decoration: none; }
.mast-icon.only-d { display: none !important; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .mast-icon.only-d { display: grid !important; } .mast-icon.only-m { display: none !important; } }
.btn.pill { border-radius: 999px; background: var(--plum); border-color: var(--plum); color: #fff; min-height: 38px; padding: 0 18px; font-size: .88rem; }
.mast.is-profile .mast-row { justify-content: space-between; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .mast.is-profile .brand { margin: 0 auto; } }
.langs { display: none; }
/* Drawer menu on phones */
.drawer { width: min(86vw, 360px); height: 100vh; max-height: none; margin: 0 0 0 auto; padding: 16px; border: 0; background: var(--surface); color: var(--ink); }
.drawer::backdrop { background: rgba(0,0,0,.35); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.drawer-links { display: grid; gap: 4px; }
.drawer-links a { padding: 12px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.drawer-links .btn.pill { margin-bottom: 8px; border: 0; color: #fff; justify-content: center; }
.drawer-langs, .foot-langs { display: flex; gap: 10px; margin-top: 16px; }
.drawer-langs a, .foot-langs a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.drawer-langs a[aria-current], .foot-langs a[aria-current] { color: var(--plum); }
/* Catalog: chips row */
.chips-row { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.rail { padding: 0; }
.rail .m-hide { display: none; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .rail .m-hide { display: inline-block; } .rail .d-hide { display: none; } .rail { flex: 0 1 auto; } }
.rail a { padding: 6px 14px; font-size: .82rem; background: var(--paper); border-color: transparent; }
.chip-btn { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 .82rem var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.count { margin: 0 0 0 auto; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.sort select { min-height: 34px; padding: 4px 28px 4px 12px; border-radius: 999px; font-size: .82rem; width: auto; }
/* Desktop banner */
.d-hero { position: relative; margin-top: 18px; border-radius: 14px; overflow: hidden; height: 300px; background: linear-gradient(110deg, #3b2a2e, #8b6b5d); }
.d-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.d-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,15,18,.78) 0%, rgba(25,15,18,.45) 45%, rgba(25,15,18,0) 75%); }
.d-hero-text { position: absolute; left: 48px; top: 50%; z-index: 1; transform: translateY(-50%); color: #fff; max-width: 470px; }
.d-hero-text h1 { margin: 0 0 8px; font-family: var(--display); font-size: 2.6rem; font-weight: 500; line-height: 1.1; color: #fff; }
.d-hero-text p { margin: 0 0 18px; font-size: .9rem; opacity: .92; }
.d-search { display: flex; align-items: center; background: #fff; border-radius: 999px; padding: 4px 4px 4px 16px; }
.d-search input { flex: 1; min-height: 36px; border: 0; padding: 0; background: none; color: #222; font-size: .88rem; }
.d-search button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--plum); color: #fff; cursor: pointer; }
/* Wide slot inside the grid */
.board-wide { grid-column: 1 / -1; }
.board-wide .promo { margin: 0; }
.promo-own { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 150px; padding: 18px; border-radius: 14px; overflow: hidden;
  color: #fff; text-decoration: none; background: #1d1719; }
.promo-own img { position: absolute; right: 0; top: 0; width: 60%; height: 100%; object-fit: cover; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.promo-own-text { position: relative; display: grid; gap: 8px; max-width: 60%; }
.promo-own-text strong { font-family: var(--display); font-size: 1.45rem; font-weight: 500; line-height: 1.15; }
.promo-own-text span { font-size: .82rem; opacity: .9; }
.promo-own .btn.pill { position: relative; align-self: end; min-height: 34px; font-size: .8rem; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .promo-own { min-height: 104px; padding: 22px 26px; grid-template-columns: 1fr auto; } .promo-own-text { max-width: 50%; } .promo-own-text strong { font-size: 1.7rem; } }
/* Cards exactly: no tier rings */
.card .tile, .card.elite .tile, .card.diamond .tile { box-shadow: none; border-radius: 10px; }
.board { gap: 14px 8px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 14px; } }
.card .who { font-size: .95rem; }
/* Footer */
.foot { background: #faf9fa; }
.foot-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .foot-grid > div:first-child { grid-column: auto; } }
.foot-adult { margin: 18px 0 0; font-size: .75rem; color: var(--ink-soft); }

/* ---------- Profile, exactly per mockups ---------- */
.p-top { justify-content: space-between; align-items: center; padding-top: 14px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .p-top.only-d { display: flex !important; } }
.crumbs { padding: 0; font-size: .78rem; }
.crumbs span[aria-hidden] { color: var(--ink-soft); }
.p-prevnext { display: flex; gap: 18px; margin: 0; font-size: .82rem; }
.p-prevnext a { display: inline-flex; align-items: center; gap: 4px; color: var(--plum); text-decoration: none; }
.profile { display: grid; gap: 14px; padding: 12px 0 28px; grid-template-columns: none; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .profile { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 16px; } }
@media (min-width: 1100px) { .profile { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.p-hero-wrap { position: relative; border-radius: 14px; overflow: hidden; background: var(--line); }
.p-hero-wrap a { display: block; cursor: zoom-in; }
.p-hero { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border: 0 !important; }
.p-counter { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 8px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(20,20,24,.55); }
.p-arrow, .p-expand { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #333; background: rgba(255,255,255,.85); cursor: pointer; }
.p-arrow.prev { left: 10px; top: calc(50% - 17px); } .p-arrow.next { right: 10px; top: calc(50% - 17px); }
.p-expand { right: 10px; bottom: 10px; border-radius: 8px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .p-arrow.only-d, .p-expand.only-d { display: grid !important; } .p-grid.only-d { display: grid !important; } }
.p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.p-grid a { display: block; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.p-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.p-info { min-width: 0; }
.p-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-name h1 { margin: 0; font-family: var(--sans); font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .p-name h1 { font-size: 1.9rem; } }
.p-name .live { width: 9px; height: 9px; margin: 0; box-shadow: none; }
.verified-chip { margin: 0; vertical-align: baseline; background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.p-heart { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--plum); cursor: pointer; }
.p-heart[aria-pressed="true"] .ico path { fill: currentColor; }
.p-location { display: flex; align-items: center; gap: 5px; margin: 4px 0 14px; font-size: .9rem; color: var(--ink-soft); }
.p-location .ico { color: var(--plum); }
.p-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; }
.p-stats > div { padding: 10px 12px; border-radius: 10px; background: var(--tint); }
.p-stats small { display: block; font-size: .72rem; color: var(--ink-soft); }
.p-stats strong { display: block; margin-top: 2px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .p-stats .only-d { display: block !important; } }
.p-block { padding: 16px 0 0; }
.p-block h2 { margin: 0 0 8px; font-family: var(--sans); font-size: 1.1rem; font-weight: 600; }
.p-text { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.p-actions-row { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 6px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .p-actions-row { margin: 6px 0 18px; } .only-d > .p-actions-row { display: flex; } }
.p-actions-row .btn.call { flex: 0 1 auto; min-width: 150px; min-height: 46px; padding: 0 26px; border-radius: 999px; font-size: .95rem; box-shadow: 0 8px 18px -10px var(--plum); }
.act { display: grid; justify-items: center; gap: 4px; font-size: .72rem; color: var(--ink); text-decoration: none; cursor: pointer; }
.act span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); }
.more-act { position: relative; }
.more-act summary { display: grid; justify-items: center; gap: 4px; list-style: none; }
.more-act summary::-webkit-details-marker { display: none; }
.act-menu { position: absolute; right: 0; top: 56px; z-index: 20; display: grid; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.act-menu a, .act-menu button { padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: .85rem var(--sans); text-decoration: none; cursor: pointer; }
.act-menu a:hover, .act-menu button:hover { background: var(--paper); }
.p-paused-box { margin: 14px 0; }
.p-media-block { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.p-media-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.p-media-head span { font-size: .78rem; color: var(--ink-soft); }
.p-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; }
.p-media a { display: block; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.p-media a img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.p-video { position: relative; grid-column: span 1; border-radius: 10px; overflow: hidden; background: #120a15; }
.p-video video { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; max-height: none; }
.p-video-label { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: .72rem; color: #fff; background: rgba(0,0,0,.55); pointer-events: none; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .p-media { grid-template-columns: 1fr; } .p-video video { aspect-ratio: 16 / 9; } }
.similar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; margin-top: 10px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .similar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.similar .fav { width: 30px; height: 30px; }
details.report { margin-top: 20px; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .p-stats strong { white-space: normal; font-size: .85rem; } }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .profile { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px; } .p-media-block.only-m { display: none !important; } }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .p-media-block:not(.only-m) { display: block; } }

/* ---- Desktop mockup, second pass ---- */
.d-hero { margin: 0; border-radius: 0; height: 250px; background: linear-gradient(100deg, #5a463f, #a07e6c); }
.d-hero-text { left: max(48px, calc((100vw - 1320px) / 2 + 48px)); max-width: 440px; }
.d-hero-text h1 { font-weight: 400; font-size: 2.5rem; line-height: 1.12; }
.d-hero-text p { font-size: .82rem; }
.d-search { max-width: 300px; padding: 3px 3px 3px 14px; }
.d-search input { min-height: 32px; font-size: .78rem; }
.d-search button { width: 30px; height: 30px; }
.chips-row { padding: 14px 0 16px; }
.rail a { background: #f3f3f5; font-size: .76rem; padding: 6px 13px; }
.rail a[aria-current] { background: var(--plum) !important; }
.chip-btn { font-size: .76rem; background: #f3f3f5; border-color: transparent; }
.count { font-size: .72rem; }
.sort select { font-size: .76rem; min-height: 30px; background-color: var(--surface); }
/* Card heart: just a white outline */
.fav { width: 32px; height: 32px; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.fav[aria-pressed="true"] { color: #fff; background: none !important; }
.fav[aria-pressed="true"] .ico path { fill: var(--plum); stroke: #fff; }
.verified-pill { font-size: .66rem; padding: 2px 8px 2px 6px; }
.card .who { font-size: .88rem; }
.card .where { font-size: .74rem; }
/* Own promo: dark band, photo on the right, serif title, pink button */
.promo-own { min-height: 104px; background: #1c1a1d; }
.promo-own-text strong { font-weight: 400; }
/* Header heart in brand colour */
.mast-icon[data-fav-link], .mast .fav-inline { color: var(--plum); }
/* Profile tiles: light grey as in the mockup */
.p-stats > div { background: #f5f5f7; }
.p-top .crumbs a:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; border: 1.5px solid var(--plum); vertical-align: 0; }
.d-hero-text h1 { max-width: 400px; font-size: 2.6rem; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .promo-own { min-height: 116px; padding: 22px 30px; } .promo-own-text strong { max-width: 280px; font-size: 1.9rem; line-height: 1.1; } .promo-own .btn.pill { align-self: center; margin-right: 30%; } }

/* ===== Desktop, refined: the mockup is light and fine, keep sizes modest ===== */
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) {
  .wrap { max-width: 1320px; padding: 0 28px; }
  .mast-row { min-height: 70px; }
  .logo-word { font-size: 1.6rem; }
  .mast-nav { gap: 24px; font-size: .88rem; }
  .mast-actions { gap: 6px; }
  .mast .btn.pill { min-height: 38px; padding: 0 20px; font-size: .85rem; box-shadow: none; }
  .d-hero { height: 300px; }
  .d-hero-text { left: max(56px, calc((100vw - 1320px) / 2 + 56px)); max-width: 520px; }
  .d-hero-text h1 { max-width: 460px; margin-bottom: 10px; font-size: 2.9rem; line-height: 1.12; }
  .d-hero-text p { margin-bottom: 20px; font-size: .9rem; }
  .d-search { max-width: 430px; padding: 4px 4px 4px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
  .d-search input { min-height: 38px; font-size: .86rem; }
  .d-search button { width: 38px; height: 38px; }
  .chips-row { gap: 8px; padding: 18px 0 20px; }
  .count { font-size: .76rem; }
  .sort select { min-height: 34px; padding: 0 30px 0 14px; font-size: .8rem; font-weight: 500; border: 1px solid var(--line); }
  .board { gap: 24px 18px; }
  .card .tile { border-radius: 8px; aspect-ratio: 3 / 4.1; }
  .card .info { padding-top: 9px; gap: 3px; }
  .card .who { font-size: .95rem; font-weight: 600; }
  .card .where { font-size: .8rem; }
  .fav { top: 8px; right: 8px; width: 30px; height: 30px; }
  .fav .ico { width: 22px; height: 22px; }
  .verified-pill { left: 8px; bottom: 8px; padding: 3px 9px 3px 7px; font-size: .7rem; }
  .verified-pill i { width: 8px; height: 8px; }
  .promo-own { min-height: 150px; padding: 26px 36px; border-radius: 10px; }
  .promo-own-text strong { max-width: 320px; font-size: 2rem; }
  .promo-own-text span { font-size: .85rem; }
  .promo-own .btn.pill { min-height: 40px; padding: 0 22px; font-size: .85rem; margin-right: 34%; }
  .page-numbers a, .page-numbers span { min-width: 36px; height: 36px; font-size: .85rem; }
  .p-top { padding-top: 18px; }
  .crumbs { font-size: .8rem; gap: 8px; }
  .p-prevnext { gap: 18px; font-size: .82rem; }
  .p-prevnext a + a { padding-left: 18px; border-left: 1px solid var(--line); }
  .profile { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 30px; padding-top: 20px; }
  .p-hero-wrap { border-radius: 10px; }
  .p-hero { aspect-ratio: 3 / 4; }
  .p-counter { top: 12px; right: 12px; padding: 4px 9px; font-size: .78rem; border-radius: 7px; background: rgba(30,30,30,.6); }
  .p-arrow { width: 36px; height: 36px; background: rgba(255,255,255,.75); }
  .p-arrow.prev { left: 12px; } .p-arrow.next { right: 12px; }
  .p-expand { right: 12px; bottom: 12px; width: 34px; height: 34px; color: #fff; background: rgba(30,30,30,.55); }
  .p-grid { gap: 10px; margin-top: 10px; }
  .p-name { gap: 10px; }
  .p-name h1 { font-size: 1.85rem; font-weight: 600; }
  .p-name .live { width: 9px; height: 9px; }
  .verified-chip { padding: 3px 10px 3px 8px; font-size: .74rem; color: var(--ink); background: #f3f3f5; border: 0; }
  .verified-chip i { width: 8px; height: 8px; border: 2px solid var(--ok); background: none; }
  .p-heart .ico { width: 28px; height: 28px; }
  .p-location { gap: 6px; margin: 6px 0 18px; font-size: .95rem; }
  .p-location .ico { width: 16px; height: 16px; }
  .p-actions-row { gap: 12px; margin: 0 0 24px; }
  .p-actions-row .btn.call { min-width: 160px; min-height: 48px; font-size: .95rem; gap: 8px; box-shadow: 0 8px 18px -12px var(--plum); }
  .act { gap: 5px; font-size: .76rem; font-weight: 500; }
  .act span { width: 48px; height: 48px; border: 0; background: #f3f3f5; }
  .act .ico { width: 22px; height: 22px; }
  .p-stats { gap: 10px; }
  .p-stats > div { padding: 12px 14px; border-radius: 9px; }
  .p-stats small { font-size: .74rem; }
  .p-stats strong { margin-top: 3px; font-size: .92rem; }
  .p-block { padding-top: 20px; }
  .p-block h2 { font-size: 1.15rem; margin-bottom: 8px; }
  .p-text { font-size: .88rem; line-height: 1.6; }
  .p-stats + .p-block { margin-top: 20px; border-top: 1px solid var(--line); }
  .more-head h2 { font-size: 1.15rem; }
  .similar { gap: 12px; }
  .foot { padding: 36px 0 32px; }
  .foot .logo-word { font-size: 1.5rem; }
  .foot-grid h2 { font-size: .85rem; margin-bottom: 10px; }
  .foot-grid nav { gap: 7px; }
  .foot-grid nav a { font-size: .8rem; }
}
.verified-pill i { border-radius: 3px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) {
  .rail { gap: 8px; overflow: visible; }
  .rail a, .chip-btn { padding: 0 15px; line-height: 32px; font-size: .78rem; font-weight: 600; }
  .chip-btn { margin-left: 8px; }
  .chips-row { flex-wrap: nowrap; }
  .count { margin-left: auto; }
}
@media (min-width: 900px) and (max-width: 1199px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) and (max-width: 1199px) { .rail a { padding: 0 10px; font-size: .74rem; } }

/* ===== Pixel pass against the phone mockup (measured at 1:1 on a ~400 px screen) ===== */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .wrap { padding: 0 17px; }
  /* header */
  .mast { border-bottom: 0; }
  .mast-row { min-height: 62px; gap: 6px; }
  .logo-word { font-size: 1.75rem; letter-spacing: -.02em; }
  .mast-icon { width: 44px; height: 44px; }
  .mast-icon .ico { width: 26px; height: 26px; stroke-width: 2; }
  .mast.is-profile .logo-word { font-size: 1.6rem; }
  /* chips */
  .chips-row { gap: 7px; padding: 6px 0 16px; }
  .rail { gap: 7px; }
  .rail a { padding: 0 15px; line-height: 30px; font-size: .82rem; font-weight: 600; background: #f4f1f2; border: 0; }
  .filter-btn { width: 46px; height: 30px; border: 0; background: #f4f1f2; }
  /* cards */
  .board { gap: 20px 10px; }
  .card .tile { aspect-ratio: 186 / 245; border-radius: 7px; }
  .card .info { padding-top: 10px; gap: 4px; }
  .card .who { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
  .card .where { gap: 5px; font-size: .92rem; }
  .card .where .ico { width: 15px; height: 15px; }
  .fav { top: 9px; right: 9px; width: 30px; height: 30px; }
  .fav .ico { width: 22px; height: 22px; }
  .verified-pill { left: 8px; bottom: 8px; padding: 3px 9px 3px 6px; font-size: .74rem; font-weight: 600; background: rgba(30,30,30,.55); }
  .verified-pill i { width: 10px; height: 10px; border-radius: 50%; background: #2fd07a; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
  /* own promo band */
  .promo-own { display: block; min-height: 165px; padding: 22px 18px; border-radius: 7px; background: #1a1d24; }
  .promo-own img { width: 62%; }
  .promo-own-text { max-width: 58%; gap: 6px; }
  .promo-own-text strong { font-size: 1.45rem; line-height: 1.15; font-weight: 400; }
  .promo-own-text span { font-size: .92rem; line-height: 1.4; }
  .promo-own .btn.pill { position: absolute; right: 74px; bottom: 26px; min-height: 30px; padding: 0 14px; font-size: .8rem; }
  /* profile */
  .profile { gap: 0; padding: 0 0 24px; }
  .p-hero-wrap { border-radius: 8px; }
  .p-hero { aspect-ratio: 374 / 447; }
  .p-counter { top: 10px; right: 10px; padding: 4px 9px; font-size: .85rem; border-radius: 7px; background: rgba(40,40,40,.6); }
  .p-info { padding-top: 14px; }
  .p-name { gap: 10px; }
  .p-name h1 { font-size: 1.55rem; }
  .p-name .live { display: none; }
  .verified-chip { padding: 3px 10px 3px 8px; font-size: .78rem; color: var(--ink); background: #f3f2f2; border: 0; }
  .verified-chip i { width: 9px; height: 9px; background: #2fd07a; }
  .p-heart .ico { width: 26px; height: 26px; }
  .p-location { margin: 4px 0 14px; font-size: .95rem; }
  .p-stats { gap: 9px; }
  .p-stats > div { padding: 10px 12px; border-radius: 7px; background: #f6f3f3; }
  .p-stats small { font-size: .82rem; color: #555; }
  .p-stats strong { margin-top: 3px; font-size: .98rem; font-weight: 700; }
  .p-block { padding-top: 22px; }
  .p-block h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
  .p-text { font-size: .92rem; line-height: 1.45; color: #666; }
  .p-actions-row { gap: 10px; margin: 18px 0 0; }
  .p-actions-row .btn.call { flex: 0 0 auto; width: 162px; min-width: 0; min-height: 46px; padding: 0; justify-content: center; font-size: 1rem; gap: 10px; box-shadow: none; }
  .act { flex: 1; gap: 5px; font-size: .78rem; font-weight: 500; }
  .act span { width: 46px; height: 46px; border: 0; background: #f5f3f3; }
  .p-media-block { margin-top: 20px; padding-top: 18px; }
  .p-media-head h2 { font-size: 1.2rem; }
  .p-media-head span { font-size: .85rem; }
  .p-media { gap: 9px; margin-top: 12px; }
  .p-media a, .p-video { border-radius: 7px; }
}
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .rail a { padding: 0 13px; font-size: .8rem; }
  .p-stats > div { padding: 10px 10px 10px 12px; }
  .p-stats strong { white-space: nowrap; font-size: .92rem; letter-spacing: -.01em; }
}
/* Subtle surfaces that used the page colour */
.filters, .drawer-langs a { background: #f7f7f9; }
.page-numbers a:hover { background: #f4f1f2; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .rail, .chips-row { gap: 6px; } .rail a { padding: 0 11px; letter-spacing: -.01em; } .filter-btn { width: 42px; } .p-text { color: #6b6b6b; } }
.p-video-label { top: 8px; bottom: auto; }
.mast-menu { max-height: 70vh; overflow-y: auto; min-width: 240px; }
.mast-menu a.sub { padding-left: 22px; font-size: .85rem; color: var(--ink-soft); }

/* Filters button on the right end of the chips row */
.chips-row .filter-btn, .chips-row .chip-btn { margin-left: auto; }
.chips-row .rail { flex: 1 1 auto; }
.mast-nav a[aria-current] { color: var(--plum); }
@media (min-width: 900px) and (max-width: 1180px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) and (max-width: 1180px) { .mast-nav { gap: 14px; font-size: .8rem; } }
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0 0 16px; }
.kind-pick legend { margin-bottom: 8px; }
.kind-opt { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 400; cursor: pointer; }
.kind-opt:has(input:checked) { border-color: var(--plum); background: var(--tint); }
.kind-opt span { display: grid; gap: 2px; }
.kind-opt small { color: var(--ink-soft); font-size: .78rem; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .chips-row .rail { flex-wrap: nowrap; overflow: visible; } .rail a { padding: 0 13px; } }

/* Colours sampled from the mockup */
.p-stats > div { background: #f6f2f2; }
.p-text { color: #8a8a8b; }
.card .where, .p-location { color: #8a8a8b; }
.ico { stroke-width: 1.7; }
.btn.call, .btn.pill, .rail a[aria-current] { background: var(--plum) !important; border-color: var(--plum) !important; }
.promo-own .btn.pill { white-space: nowrap; } @media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .promo-own { grid-template-columns: 1fr auto; } .promo-own .btn.pill { margin-right: 28%; } }

/* Favourites link with a counter */
.fav-link { position: relative; }
.mast .fav-link { color: var(--plum); }
.mast .fav-link.has-favs .ico path { fill: currentColor; }
.fav-count { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; font: 700 .65rem/17px var(--sans); text-align: center; color: #fff; background: var(--plum); }
.mast .fav-count { box-shadow: 0 0 0 2px var(--surface); }
.tabbar .fav-count { top: 0; right: calc(50% - 22px); }
.fav-count[hidden] { display: none; }

/* Share and save: same quiet buttons next to the name, a clear hover */
.p-tools { display: flex; gap: 8px; margin-left: auto; }
.p-tool { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px;
  color: var(--ink); background: #f5f3f3; cursor: pointer; transition: background-color .15s, color .15s, transform .1s; }
.p-tool:hover { background: #ffe3eb; color: var(--plum); }
.p-tool:active { transform: scale(.96); }
.p-tool:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.p-tool .ico { width: 20px; height: 20px; }
.p-tool.p-heart { margin: 0; width: 42px; height: 42px; color: var(--plum); }
.p-tool.p-heart[aria-pressed="true"] { background: var(--plum); color: #fff; }
.p-tool.p-heart[aria-pressed="true"] .ico path { fill: currentColor; }
.p-tool[data-done] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, #fff); }
.p-tool:hover { background: var(--plum); color: #fff; } .p-tool.p-heart:hover .ico path { fill: currentColor; }
.p-verified-pill { left: 12px; top: 12px; bottom: auto; z-index: 2; font-size: .78rem; padding: 4px 11px 4px 8px; }
.p-hero-wrap .gallery-paused { top: auto; bottom: 12px; }
/* SMS: own button on desktop, inside "More" on phones */
.act-sms { display: none; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .act-sms { display: grid; } .act-menu .sms-in-more { display: none; } }

/* Messenger buttons: brand logo in its colour, brand fill on hover */
.act span { transition: background-color .15s, color .15s, transform .1s; }
.act-wa span { color: #25d366; }
.act-tg span { color: #26a5e4; }
.act-sms span { color: #34c759; }
.act:hover span { color: #fff; transform: translateY(-1px); }
.act-wa:hover span { background: #25d366; }
.act-tg:hover span { background: #26a5e4; }
.act-sms:hover span { background: #34c759; }
.more-act:hover span { background: #e9e6e6; }
.act:hover { color: var(--ink); }

/* Call button shows the number itself */
.btn.call .call-num { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.p-actions-row .btn.call { width: auto !important; padding: 0 22px !important; }
/* Phones: the number needs the full width, so the call button gets its own line above the round buttons */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .p-actions-row { flex-wrap: wrap; }
  .p-actions-row .btn.call { flex: 1 0 100%; justify-content: center; }
  .p-actions-row .act { flex: 1 1 0; }
}
/* Longer parameter values ("Escort, Erotická masáž") wrap inside their tile */
.p-stats strong { white-space: normal !important; overflow-wrap: break-word; }

/* Ad form: narrow column, logical groups, at most two fields side by side */
.doc.reg { max-width: 640px; margin-inline: auto; }
.add-form .add-step { padding: 20px; }
.fgroup { border: 0; padding: 0; margin: 0; min-width: 0; }
.fgroup + .fgroup { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.fgroup > legend { padding: 0; margin-bottom: 12px; font-size: .95rem; font-weight: 600; color: var(--ink); }
.fgroup fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.fgroup fieldset.field > legend { padding: 0; margin-bottom: 6px; font-size: .85rem; font-weight: 500; }
.pair { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.pair.keep { grid-template-columns: 1fr 1fr; }
@media (min-width: 480px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair > .field, .duo > select { min-width: 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-form input:not([type=checkbox]):not([type=radio]):not(.sr), .add-form select, .add-form textarea { width: 100%; }
/* Chosen photos before sending: cover first, buttons to reorder */
.previews .pv { position: relative; }
.previews .pv img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.pv-cover img { outline: 3px solid var(--plum); outline-offset: -3px; }
.pv-tag { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; color: #fff; background: var(--plum); }
.pv-bar { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; justify-content: center; gap: 4px; }
.pv-btn { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; font: 600 .95rem/1 var(--sans); color: #1d1d1f; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.pv-btn:hover { background: #fff; }
.pv-star { color: var(--plum); }
/* Profile header = home header with a back arrow before the logo */
.mast.is-profile .mast-row { justify-content: flex-start; }
.mast.is-profile .brand { margin: 0 auto 0 0 !important; min-width: 0; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .mast.is-profile .mast-icon.back { width: 30px; margin-left: -6px; }
  .mast.is-profile .logo-word { font-size: 1.5rem; }
}
/* Phones: call and SMS are round buttons too, all in one row */
.act-call { display: none; }
.act-call span { background: var(--plum) !important; color: #fff; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .p-actions-row { flex-wrap: nowrap; }
  .p-actions-row .btn.call { display: none; }
  .p-actions-row .act-call, .p-actions-row .act-sms { display: grid; }
  .act-menu .sms-in-more { display: none; }
}
@media (max-width: 359px) {
  .p-actions-row { gap: 4px; }
  .p-actions-row .act { font-size: .68rem; min-width: 0; }
  .p-actions-row .act span { width: 42px; height: 42px; }
}

/* ---------- Registration and login (mockup) ---------- */
.req { color: var(--plum); font-weight: 600; }
.reg-hero { background: linear-gradient(120deg, #f7e7ea 0%, #fbf1f2 55%, #fff 100%); padding: 40px 0 72px; }
.reg-hero h1 { font-family: var(--display); font-size: clamp(2.3rem, 6vw, 3.6rem); font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.reg-lead { max-width: 30ch; margin: 0 0 22px; font-family: var(--display); font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.35; color: #3a3a3c; }
.reg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reg-points li { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: #3a3a3c; }
.reg-points .ico, .reg-benefit .ico, .media-plus .ico { color: var(--plum); }
.reg-card { position: relative; margin: -44px auto 32px; max-width: 1000px; display: grid; gap: 20px; padding: 20px; border-radius: 18px; background: var(--surface); box-shadow: 0 18px 40px -24px rgba(60, 20, 35, .35); }
@media (min-width: 860px) { .reg-card { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); padding: 24px; } }
.reg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.reg-tabs a { padding: 11px 8px; border-radius: 10px 10px 0 0; text-align: center; font-weight: 600; color: var(--ink); text-decoration: none; background: #f6f5f6; border-bottom: 2px solid transparent; }
.reg-tabs a[aria-current] { color: var(--plum); background: #fcecf0; border-bottom-color: var(--plum); }
.reg-form { display: grid; gap: 14px; }
.reg-form .field { margin: 0; }
.reg-field { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: end; }
.reg-field > .ico { width: 40px; height: 40px; padding: 10px; margin-bottom: 2px; border-radius: 10px; background: #f6f5f6; color: #6b6b70; }
.reg-form input:not([type=checkbox]), .wiz input:not([type=checkbox]):not([type=radio]):not(.sr), .wiz select, .wiz textarea { width: 100%; }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 46px; }
.pass-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #6b6b70; cursor: pointer; }
.reg-form .check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.reg-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .92rem; }
.btn.reg-submit, .wiz-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.reg-submit { width: 100%; min-height: 50px; border-radius: 999px; }
.reg-alt { margin: 4px 0 0; text-align: center; font-size: .92rem; }
.reg-link { margin-top: 16px; font-size: .92rem; }
.reg-link summary { cursor: pointer; color: var(--plum); }
.reg-link form { display: grid; gap: 10px; margin-top: 10px; }
.reg-side { display: grid; align-content: start; gap: 22px; padding: 22px; border-radius: 14px; background: #fcf1f3; }
.reg-benefit { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.reg-benefit strong { display: block; margin-bottom: 2px; }
.reg-benefit span { font-size: .88rem; color: var(--ink-soft); }
.reg-band { margin-top: 8px; padding: 34px 0; color: #fff; background: linear-gradient(110deg, #2a1b20 0%, #4a2a33 100%); }
.reg-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.reg-band p { max-width: 18ch; margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.2; }
.reg-band .btn { display: inline-flex; gap: 8px; align-items: center; border-radius: 999px; }

/* ---------- Kind choice and the new-ad wizard ---------- */
.wiz { max-width: 820px; padding-top: 24px; padding-bottom: 40px; }
.wiz-head h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; }
.wiz-lead { max-width: 60ch; margin: 0 0 24px; color: var(--ink-soft); }
.wiz-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 24px; padding: 0; position: relative; }
.wiz-steps::before { content: ""; position: absolute; top: 15px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line); }
.wiz-steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; }
.wiz-steps a { display: contents; color: inherit; text-decoration: none; }
.wiz-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: #f1f0f2; border: 2px solid #fff; }
.wiz-steps .done .wiz-dot { color: #fff; background: #f08aa6; }
.wiz-steps .now .wiz-dot { color: #fff; background: var(--plum); box-shadow: 0 0 0 4px #fcdbe3; }
.wiz-label { font-size: .78rem; color: var(--ink-soft); line-height: 1.25; }
.wiz-steps .now .wiz-label { color: var(--ink); font-weight: 600; }
.wiz-card { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
@media (min-width: 700px) { .wiz-card { padding: 26px 28px; } }
.wiz-card h2 { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; margin: 0; }
.wiz-card .wiz-sub { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.wiz-sub small { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.wiz-note { margin: -6px 0 4px; font-size: .88rem; color: var(--ink-soft); }
.wiz-card .field { margin: 0; }
.wiz-card fieldset.field { border: 0; padding: 0; min-width: 0; }
.wiz-card fieldset.field > legend { padding: 0; margin-bottom: 8px; font-size: .9rem; font-weight: 500; }
.pair.wide-first { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.wiz-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.wiz-actions.end { justify-content: flex-end; }
.wiz-actions .btn { min-height: 46px; padding: 0 24px; border-radius: 999px; }
.wiz-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.kind-cards { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; }
@media (min-width: 600px) { .kind-cards { grid-template-columns: 1fr 1fr; } }
.kind-card { position: relative; display: grid; gap: 6px; padding: 20px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.kind-card input { position: absolute; top: 18px; right: 18px; }
.kind-card .kind-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--plum); background: #fcecf0; }
.kind-card strong { font-size: 1.05rem; }
.kind-card small { color: var(--ink-soft); }
.kind-card:has(input:checked) { border-color: var(--plum); background: #fff7f9; }

/* Photos and video step */
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.media-add label, .media-video label { display: grid; place-content: center; justify-items: center; gap: 6px; height: 100%; min-height: 200px; padding: 12px; text-align: center; border: 1.5px dashed #f0a3b7; border-radius: 12px; background: #fff8fa; cursor: pointer; }
.media-video label { min-height: 140px; }
.media-add strong, .media-video strong { font-size: .92rem; }
.media-add small, .media-video small { font-size: .75rem; color: var(--ink-soft); }
.media-add:focus-within label, .media-video:focus-within label { outline: 3px solid var(--plum); outline-offset: 2px; }
.media-item { position: relative; margin: 0; }
.media-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: #f3f1f2; }
.media-item.is-cover img { outline: 3px solid var(--plum); outline-offset: -3px; }
.media-del { position: absolute; top: 8px; right: 8px; }
.media-del button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(20, 15, 18, .65); cursor: pointer; }
.media-cover { position: absolute; left: 8px; bottom: 44px; display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; background: rgba(20, 15, 18, .7); }
.media-cover .ico { color: #ffd166; fill: #ffd166; }
.media-item figcaption form { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.media-item figcaption button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); cursor: pointer; }
.media-item figcaption .media-star { color: var(--plum); }
.media-tips { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 16px; border-radius: 12px; background: #fcf1f3; font-size: .88rem; }
.media-tips .ico { color: var(--plum); }
.media-tips ul { margin: 6px 0 0; padding-left: 18px; color: #4a4a4f; }
.media-video-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.media-video-row .ico { color: var(--plum); }
.media-video-row form { margin-left: auto; }

/* Review step */
.review { display: grid; gap: 16px; }
@media (min-width: 600px) { .review { grid-template-columns: 180px minmax(0, 1fr); } }
.review-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
.review-body h3 { font-family: var(--sans); font-size: 1.3rem; margin: 0 0 4px; }
.review-about { margin: 0; white-space: pre-line; color: #4a4a4f; }

/* Phones (mobile mockup): start screen with two buttons, then the form on its own */
.reg-hero { position: relative; overflow: hidden; }
.reg-hero .wrap { position: relative; z-index: 1; }
.reg-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; }
.reg-hero.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,0) 75%); }
.reg-start { display: grid; gap: 12px; margin-top: 26px; }
.reg-start .btn { min-height: 50px; border-radius: 999px; justify-content: center; }
.reg-start p { margin: 4px 0 0; text-align: center; font-size: .92rem; }
.reg-mtitle h1 { font-family: var(--display); font-size: 2rem; font-weight: 600; margin: 0 0 6px; }
.reg-mtitle p { margin: 0 0 18px; color: var(--ink-soft); }
@media (max-width: 859px) {
  .reg-page.show-start .reg-hero { display: flex; align-items: flex-end; min-height: calc(100svh - 140px); padding: 32px 0 28px; }
  .reg-page.show-start .reg-card, .reg-page.show-start .reg-band { display: none; }
  .reg-hero.has-photo::after { background: linear-gradient(180deg, rgba(20,10,14,0) 30%, rgba(20,10,14,.55) 60%, rgba(20,10,14,.85) 100%); }
  .reg-hero.has-photo h1, .reg-hero.has-photo .reg-lead, .reg-hero.has-photo .reg-points li, .reg-hero.has-photo .reg-start p { color: #fff; }
  .reg-hero.has-photo .reg-start a:not(.btn) { color: #ff9bb5; }
  .reg-hero.has-photo .reg-start .btn.ghost { color: #fff; border-color: #fff; background: transparent; }
  .reg-page.show-form .reg-hero, .reg-page.show-form .reg-band, .reg-page.show-form .reg-side, .reg-page.show-form .reg-tabs { display: none; }
  .reg-page.show-form .reg-card { margin: 0 auto 24px; padding: 24px 0 0; box-shadow: none; border-radius: 0; background: transparent; }
}
@media (min-width: 860px) { .reg-start, .reg-mtitle { display: none !important; } }
.media-head small { font-size: .85rem; font-weight: 400; color: var(--ink-soft); }
.checks.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (min-width: 600px) { .checks.two { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .media-add label { min-height: 0; aspect-ratio: 3 / 4; padding: 6px; } .media-add small { display: none; } .media-item figcaption button { width: 26px; height: 26px; } }
/* Review: the profile as visitors will see it */
.preview { display: grid; gap: 10px; }
.preview-photo { position: relative; }
.preview-photo img { width: 100%; max-height: 520px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.preview-tag, .preview-count { position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; background: rgba(20, 15, 18, .65); }
.preview-tag { left: 10px; }
.preview-count { right: 10px; }
.preview h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-family: var(--sans); font-size: 1.4rem; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #34c759; }
.preview-loc { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-soft); }
.preview-loc .ico { color: var(--plum); }
.preview-contact { margin: 0; font-size: .92rem; }
.preview h4 { margin: 6px 0 0; font-size: 1rem; }
.preview-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 8px; }
.preview-thumbs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }

/* Sent: thank-you screen */
.sent { max-width: 460px; padding-top: 48px; padding-bottom: 48px; text-align: center; }
.sent-check { display: inline-grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; color: #fff; background: var(--plum); box-shadow: 0 0 0 10px #fde3ea; }
.sent-check .ico { stroke-width: 2.6; }
.sent h1 { margin: 28px 0 12px; font-family: var(--display); font-size: clamp(1.8rem, 6vw, 2.3rem); font-weight: 600; }
.sent p { color: var(--ink-soft); }
.sent-actions { display: grid; gap: 12px; margin: 28px 0 40px; }
.sent-actions .btn { min-height: 50px; border-radius: 999px; justify-content: center; }
.sent-thanks { display: grid; justify-items: center; gap: 10px; margin: 0; }
.sent-thanks .ico { color: var(--plum); }
.sent-thanks span { font-family: var(--display); font-size: 1.5rem; line-height: 1.25; color: var(--plum); }
/* Drawer for a signed-in advertiser */
.drawer-me { display: flex; align-items: center; gap: 14px; padding: 6px 0 16px; border-bottom: 1px solid var(--line); }
.drawer-me img, .drawer-initial { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.drawer-initial { display: grid; place-items: center; font-size: 1.4rem; font-weight: 600; color: var(--plum); background: #fcecf0; }
.drawer-me strong { display: block; font-size: 1.05rem; }
.drawer-me a { font-size: .9rem; color: var(--plum); }
.drawer-account { display: grid; padding: 6px 0; border-bottom: 1px solid var(--line); }
.drawer-account a, .drawer-account button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.drawer-account a::after { content: "›"; margin-left: auto; font-size: 1.3rem; color: var(--ink-soft); }
.drawer-account .is-accent { color: var(--plum); }
.drawer-account .is-accent .ico { color: var(--plum); }
.drawer-promo { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; margin: 16px 0; padding: 16px; border-radius: 14px; background: #fcf1f3; }
.drawer-promo .ico { color: var(--plum); }
.drawer-promo strong { display: block; font-family: var(--display); font-size: 1.1rem; }
.drawer-promo span { font-size: .85rem; color: var(--ink-soft); }
.drawer-promo .btn { grid-column: 1 / -1; justify-content: center; border-radius: 999px; margin-top: 6px; }
/* Wizard follows the mockups: up to three short fields per row on computers,
   short pairs on phones, longer fields full width */
.wiz .trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 700px) { .wiz .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wiz .pair { gap: 14px; }
@media (max-width: 559px) { .wiz .pair.wide-first { grid-template-columns: 1fr; } }
@media (max-width: 559px) {
  .wiz-actions { flex-wrap: nowrap; }
  .wiz-actions > .btn:last-child, .wiz-actions > form:last-child, .wiz-actions > form:last-child .btn { flex: 1; width: 100%; }
  .wiz-actions.stack { flex-direction: column-reverse; align-items: stretch; }
  .wiz-actions.stack .btn { width: 100%; }
}
/* Photos behind the sign-up title: dark room, text in white */
.reg-hero.has-photo { background: #1a1013; }
.reg-hero.has-photo h1, .reg-hero.has-photo .reg-lead, .reg-hero.has-photo .reg-points li { color: #fff; }
@media (min-width: 860px) {
  .reg-hero.has-photo { padding: 64px 0 110px; }
  .reg-hero-photo { object-position: 75% 30%; }
  .reg-hero.has-photo::after { background: linear-gradient(90deg, rgba(18,10,13,.9) 0%, rgba(18,10,13,.7) 38%, rgba(18,10,13,0) 68%); }
}
@media (max-width: 859px) { .reg-hero-photo { object-position: 50% 15%; } }
/* Small hero above the wizard and the kind step: title and steps apart from the form */
.wiz-hero { background: linear-gradient(120deg, #f7e7ea 0%, #fbf1f2 55%, #fdf8f9 100%); border-bottom: 1px solid #f3dfe4; }
.wiz-hero .wiz { padding-top: 32px; padding-bottom: 26px; }
.wiz-hero .wiz-lead { margin-bottom: 22px; color: #5a5a60; }
.wiz-hero .wiz-head:last-child .wiz-lead { margin-bottom: 0; }
.wiz-hero .wiz-steps { margin-bottom: 0; }
.wiz-hero .wiz-steps::before { background: #ecd2d9; }
.wiz-hero .wiz-dot { border-color: #fbf1f2; }
.wiz-hero + .wiz { padding-top: 24px; }
@media (min-width: 700px) { .wiz-hero .wiz { padding-top: 44px; padding-bottom: 32px; } .wiz-hero + .wiz { padding-top: 32px; } }
/* Sign-up form screen and sign-in on phones: small hero above the form; computers keep the photo hero */
.reg-mhero { display: none; }
@media (max-width: 859px) {
  .reg-page.show-form .reg-mhero { display: block; }
  .reg-page.show-form .reg-card { padding-top: 20px; }
}
.trio.contact-trio, .fgroup .trio { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 700px) { .trio.contact-trio, .fgroup .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wiz .trio.contact-trio { grid-template-columns: 1fr; }
@media (min-width: 700px) { .wiz .trio.contact-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-trio .hint { margin: 4px 0 0; font-size: .78rem; color: var(--ink-soft); }
/* Add-photo tile keeps to its column; the label text wraps */
.media-add, .media-video { min-width: 0; }
.media-add label, .media-video label { grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; overflow: hidden; }
.media-add strong, .media-video strong { overflow-wrap: anywhere; hyphens: auto; line-height: 1.25; }
.trio.contact-trio { gap: 14px; }
/* Add tile: same shape as a photo, words wrap at spaces only */
.media-add { align-self: start; }
.media-add label { height: auto; min-height: 0; aspect-ratio: 3 / 4; }
.media-add strong, .media-video strong { hyphens: manual; overflow-wrap: normal; }
@media (max-width: 559px) { .media-add strong { font-size: .8rem; } .media-plus .ico { width: 26px; height: 26px; } }

/* Checkboxes and radios in the site style: soft rounded box, pink when ticked */
input[type=checkbox]:not(.sr), input[type=radio]:not(.sr) {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center;
  width: 20px; height: 20px; margin: 0; vertical-align: -4px; cursor: pointer;
  border: 1.5px solid #cfc9cc; border-radius: 6px; background: #fff center / 14px 14px no-repeat;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
input[type=radio]:not(.sr) { border-radius: 50%; }
input[type=checkbox]:not(.sr):hover, input[type=radio]:not(.sr):hover { border-color: var(--plum); }
input[type=checkbox]:not(.sr):checked {
  border-color: var(--plum); background-color: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
input[type=radio]:not(.sr):checked { border-color: var(--plum); box-shadow: inset 0 0 0 4px #fff; background-color: var(--plum); }
input[type=checkbox]:not(.sr):focus-visible, input[type=radio]:not(.sr):focus-visible { outline: 3px solid #f6b7c7; outline-offset: 2px; }
input[type=checkbox]:not(.sr):disabled, input[type=radio]:not(.sr):disabled { opacity: .45; cursor: not-allowed; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.reg-form .check { align-items: flex-start; }
.reg-form .check input { margin-top: 1px; }

/* ---------- Account: my profiles ---------- */
.acc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 22px; }
.acc-nav > a, .acc-nav > form > button { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font: 500 .9rem/1 var(--sans); color: var(--ink); text-decoration: none; background: var(--surface); cursor: pointer; }
.acc-nav > a[aria-current] { color: #fff; border-color: var(--plum); background: var(--plum); }
.acc-nav > form { margin: 0; }
.acc-langs { display: flex; gap: 4px; margin-left: auto !important; }
.acc-langs button { min-width: 38px; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font: 600 .78rem/1 var(--sans); color: var(--ink-soft); background: transparent; cursor: pointer; }
.acc-langs button[aria-current] { color: var(--plum); border-color: var(--plum); cursor: default; }
.acc-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; }
.acc-stats li { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .75); }
.acc-stats strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.acc-stats span { font-size: .8rem; color: var(--ink-soft); }
.acc-free { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; font-size: .9rem; color: #4a4a4f; background: #fcf1f3; }
.acc-free .ico { flex: none; color: var(--plum); }
.acc-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
@media (min-width: 600px) { .acc-card { grid-template-columns: 132px minmax(0, 1fr); padding: 18px; } }
.acc-photo { display: block; align-self: start; border-radius: 12px; overflow: hidden; background: #f6f2f3; }
.acc-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.acc-nophoto { display: grid; place-content: center; justify-items: center; gap: 6px; aspect-ratio: 3 / 4; padding: 8px; font-size: .72rem; text-align: center; color: var(--plum); border: 1.5px dashed #f0a3b7; border-radius: 12px; background: #fff8fa; }
.acc-body h2 { margin: 0 0 2px; font-family: var(--sans); font-size: 1.2rem; font-weight: 600; }
.acc-loc { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: .85rem; color: var(--ink-soft); }
.acc-loc .ico { color: var(--plum); }
.acc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .82rem; }
.acc-hint { margin: 0 0 12px; font-size: .86rem; color: #5a5a60; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-actions form { margin: 0; }
.acc-actions .btn { border-radius: 999px; }
.acc-packages { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-package { display: grid; gap: 2px; padding: 10px; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; background: #fff; cursor: pointer; }
.acc-package strong { font-size: .95rem; }
.acc-package span { font-size: .75rem; color: var(--ink-soft); }
.acc-package em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--plum); }
.acc-package.is-diamond { border-color: #b9d3ea; }
.acc-package.is-elite { border-color: #ecd18f; background: #fffbf1; }
.acc-package:hover:not([disabled]) { border-color: var(--plum); }
.acc-package[disabled] { opacity: .5; cursor: not-allowed; }
.acc-empty { display: grid; justify-items: center; gap: 6px; padding: 32px 16px; text-align: center; }
.acc-empty .ico { color: var(--plum); }
.acc-empty h2 { margin: 6px 0 0; font-family: var(--display); font-size: 1.5rem; }
.acc-empty p { margin: 0; color: var(--ink-soft); }
.acc-add { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; text-align: center; text-decoration: none; color: var(--ink); border: 1.5px dashed #f0a3b7; border-radius: 16px; background: #fff8fa; }
.acc-add .ico { color: var(--plum); }
.acc-add span { font-size: .85rem; color: var(--ink-soft); }
.acc-add:hover { border-color: var(--plum); }
/* Visibility block on a published profile: packages and boost */
.acc-boost { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-boost-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.acc-boost h3 { margin: 0; font-family: var(--sans); font-size: 1rem; }
.acc-boost-head span { font-size: .82rem; color: var(--ink-soft); }
.acc-boost .acc-packages { padding-top: 0; border-top: 0; }
.acc-package.is-current { border-color: var(--plum); background: #fff7f9; opacity: 1; }
.acc-package.is-current em { color: var(--ink); }
.acc-boost-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.acc-boost-btn .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; }
.acc-boost-btn span, .acc-boost-note { font-size: .8rem; color: var(--ink-soft); }
.acc-boost-note { margin: 0; }
@media (max-width: 420px) { .acc-package { padding: 8px; } .acc-package span { font-size: .7rem; } }
.acc-package { color: var(--ink); }
.acc-package.is-current strong, .acc-package.is-current span { color: var(--ink); }
/* "Add a new profile" as a banner, not an upload box */
.acc-promo { position: relative; overflow: hidden; display: grid; gap: 16px; align-items: center; margin: 6px 0 0; padding: 24px 22px; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #c93a62 0%, rgba(201,58,98,0) 55%), linear-gradient(115deg, #2a1b20 0%, #4a2a33 100%); }
@media (min-width: 600px) { .acc-promo { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 30px; } }
.acc-promo h2 { margin: 0 0 6px; font-family: var(--display); font-size: clamp(1.35rem, 4vw, 1.7rem); font-weight: 600; color: #fff; }
.acc-promo p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.8); }
.acc-promo .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; white-space: nowrap; }
.acc-promo .btn .ico { color: #fff; }
/* Editing an existing ad: same sections as tabs, a way back, delete at the end */
.wiz-back { margin: 0 0 10px; font-size: .88rem; }
.wiz-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); text-decoration: none; }
.wiz-back a:hover { color: var(--plum); }
.wiz-head .acc-badges { margin: 0 0 20px; }
.wiz-steps.is-tabs a .wiz-dot { background: #fff; color: var(--ink); border-color: #ecd2d9; }
.wiz-steps.is-tabs a:hover .wiz-label { color: var(--plum); }
.wiz-danger { margin: 20px 0 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; font-size: .9rem; }
.wiz-danger summary { cursor: pointer; color: #b3261e; font-weight: 500; }
.wiz-danger form { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }
.preview-thumbs { grid-auto-columns: 84px; justify-content: start; }
@media (min-width: 700px) { .preview-thumbs { grid-auto-columns: 110px; } .preview-photo img { max-width: 420px; } }
/* Review: the real profile page in a frame */
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .wiz.is-review { max-width: 1320px; } }
.preview-frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.preview-frame iframe { display: block; width: 100%; height: 78vh; border: 0; transform-origin: 0 0; }
.is-embed .gate, .is-embed .cookie, .is-embed .notice { display: none !important; }
/* Fold-out sections: our own chevron instead of the browser triangle */
.wiz-danger summary, .reg-link summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; }
.wiz-danger summary::-webkit-details-marker, .reg-link summary::-webkit-details-marker { display: none; }
.wiz-danger summary::after, .reg-link summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.wiz-danger[open] summary::after, .reg-link[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.reg-link summary { justify-content: flex-start; }

/* ---------- Admin frame: side menu, light cards, readable tables ---------- */
body.admin { background: #f7f5f6; }
.adm { min-height: 100vh; }
.adm-side { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.adm-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); }
.adm-brand .logo-word { font-size: 1.35rem; }
.adm-brand em { font-style: normal; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; color: var(--plum); background: #fcecf0; }
.adm-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: .9rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.adm-nav a .ico { color: var(--ink-soft); }
.adm-nav a:hover { background: #f6f2f3; }
.adm-nav a[aria-current] { color: var(--plum); background: #fcecf0; }
.adm-nav a[aria-current] .ico { color: var(--plum); }
.adm-nav b { min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: .72rem; text-align: center; color: #fff; background: var(--plum); }
.adm-foot { display: none; }
.adm-main { padding: 20px 16px 48px; max-width: 1200px; }
.adm-main .wrap { max-width: none; padding: 0; }
.adm-main .doc { max-width: none; margin: 0; }
.adm-main h1 { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 600; margin: 0 0 14px; }
.adm-main h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; margin: 28px 0 12px; }
.adm-main h3 { font-family: var(--sans); font-size: 1.05rem; margin: 0 0 4px; }
.adm-main .panel { border-radius: 14px; padding: 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(30, 10, 18, .04); }
.adm-main .notice { border-radius: 12px; }
.adm-main .badge { border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: .75rem; }
.adm-main .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-main .btn { border-radius: 999px; }
.adm-main input:not([type=checkbox]):not([type=radio]):not([type=file]), .adm-main select, .adm-main textarea { max-width: 100%; }
.adm-main .scroll, .adm-main > .wrap > .doc > table.list { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.adm-main table.list { width: 100%; border-collapse: collapse; background: #fff; }
.adm-main .list th { position: sticky; top: 0; background: #faf8f9; font-size: .78rem; text-transform: none; }
.adm-main .list tr:hover td { background: #fdf9fa; }
.adm-main .list td { font-size: .9rem; }
.adm-main .list a { font-weight: 500; }
.adm-main form.filters, .adm-main .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 14px; }
/* Moderation: text left, photos right; photo cards with small round tools */
.adm-main .mod { gap: 18px; }
@media (min-width: 1000px) { .adm-main .mod { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.adm-main .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.adm-main .thumbs figure { width: auto; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.adm-main .thumbs img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.adm-main .thumbs figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.adm-main .thumbs figcaption form { display: inline-flex; gap: 4px; margin: 0; }
.adm-main .thumbs .btn.small { display: inline-grid; place-items: center; min-width: 30px; min-height: 30px; padding: 0 8px; font-size: .75rem; }
.adm-main .thumbs .badge { margin-right: auto; }
.adm-main video { max-width: 100%; border-radius: 10px; background: #000; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) {
  .adm { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .adm-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 22px 16px; border-bottom: 0; border-right: 1px solid var(--line); gap: 22px; }
  .adm-nav { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 2px; }
  .adm-nav a { width: 100%; min-height: 40px; }
  .adm-nav b { margin-left: auto; }
  .adm-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; }
  .adm-foot > a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); text-decoration: none; }
  .adm-foot .acc-langs { margin-left: 0 !important; }
  .adm-me { margin: 0; overflow-wrap: anywhere; color: var(--ink-soft); }
  .adm-main { padding: 32px 36px 60px; }
}

.adm-main .list form.actions { flex-wrap: nowrap; }
.adm-main .list select { min-width: 140px; }
.adm-main form.actions > input[type=text] { flex: 1; min-width: 200px; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .adm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; }
  .adm-foot > a { color: var(--ink-soft); text-decoration: none; }
  .adm-foot .acc-langs { margin-left: auto !important; }
  .adm-me { display: none; }
}
/* Admin forms: one size for every field, roomy buttons, uploads as tiles */
.adm-main input[type=text], .adm-main input[type=email], .adm-main input[type=password], .adm-main input[type=number], .adm-main input[type=tel], .adm-main input[type=url], .adm-main input[type=datetime-local], .adm-main select, .adm-main textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: 16px/1.4 var(--sans); border: 1px solid var(--line); border-radius: 10px; background-color: #fff;
}
.adm-main textarea { min-height: 110px; }
.adm-main input:focus, .adm-main select:focus, .adm-main textarea:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px #fbe1e8; }
.adm-main .field { margin: 0 0 14px; }
.adm-main .field > label, .adm-main fieldset.field > legend { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; }
.adm-main .hint { margin: 4px 0 0; font-size: .78rem; color: var(--ink-soft); }
.adm-main .btn { min-height: 42px; padding: 0 18px; }
.adm-main .btn.small { min-height: 34px; padding: 0 12px; }
.adm-main .actions .btn + .btn, .adm-main .actions form + form { margin-left: 0; }
.adm-edit { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .adm-edit { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); } }
.adm-form .fgroup + .fgroup { margin-top: 18px; padding-top: 18px; }
.adm-save { position: sticky; bottom: 0; margin: 18px -18px -18px; padding: 14px 18px; background: rgba(255, 255, 255, .95); border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
.adm-aside { display: grid; gap: 14px; }
.adm-aside .panel { margin: 0; }
.adm-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: start; }
.adm-grid3 .adm-span { grid-column: 1 / -1; }
.adm-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.adm-uploads .media-add label { aspect-ratio: auto; min-height: 110px; }
.adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adm-actions form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.adm-main input[type=file]:not(.sr) { width: 100%; padding: 8px; font: 14px var(--sans); color: var(--ink-soft); border: 1.5px dashed #f0a3b7; border-radius: 10px; background: #fff8fa; }
.adm-main input[type=file]:not(.sr)::file-selector-button { margin-right: 12px; padding: 8px 14px; font: 600 13px var(--sans); color: #fff; border: 0; border-radius: 999px; background: var(--plum); cursor: pointer; }
.adm-main .thumbs figcaption { display: grid; gap: 6px; }
.adm-main .thumbs figcaption .badge { justify-self: start; margin: 0; }
.adm-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-tools form { display: contents; }
.adm-main .thumbs .adm-tools .btn.small { width: 30px; min-width: 0; min-height: 30px; padding: 0; border-radius: 50%; }
.adm-main .thumbs .adm-tools form { display: contents; }
.adm-main .thumbs .badge.bad { font-size: .68rem; }

/* Safari and iOS draw their own form controls and ignore height, padding and radius;
   switch the native look off everywhere and draw our own chevron on selects */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input[type=search], input[type=datetime-local], textarea, select {
  -webkit-appearance: none; appearance: none; border-radius: var(--radius-ui);
}
select, .adm-main select {
  padding-right: 38px; line-height: 1.3; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
select::-ms-expand { display: none; }
.adm-main input[type=text], .adm-main input[type=email], .adm-main input[type=password], .adm-main input[type=number], .adm-main input[type=tel], .adm-main select, .adm-main textarea { border-radius: 10px; }
/* Owner's preview: the ad alone, without the site frame */
.is-embed .mast, .is-embed .foot, .is-embed .tabbar, .is-embed .drawer, .is-embed .promo { display: none !important; }
.is-embed body { padding-bottom: 0 !important; }
.is-embed main > .wrap { padding-top: 16px; padding-bottom: 16px; }
/* Credits */
.acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .acc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acc-stats a { display: block; color: inherit; text-decoration: none; }
.acc-stats li:last-child { box-shadow: inset 0 0 0 1.5px #f3c3d0; }
.acc-nav-n { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .72rem; color: var(--plum); background: #fcecf0; }
.acc-nav > a[aria-current] .acc-nav-n { color: var(--plum); background: #fff; }
.drawer-account .acc-nav-n { margin-left: 0; }
.cr-balance { display: inline-grid; margin-top: 18px; padding: 14px 22px; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px -16px rgba(60, 20, 35, .4); }
.cr-balance span { font-size: .8rem; color: var(--ink-soft); }
.cr-balance strong { font-family: var(--display); font-size: 2.4rem; line-height: 1.1; color: var(--plum); }
.cr-balance em { font-style: normal; font-size: .85rem; color: var(--ink-soft); }
.wiz.acc .wiz-card + .wiz-card { margin-top: 14px; }
.cr-bank { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border-radius: 12px; background: #fcf1f3; }
.cr-bank div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.cr-bank dt { color: var(--ink-soft); font-size: .88rem; }
.cr-bank dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-bank .is-vs dd { color: var(--plum); font-size: 1.1rem; }
.cr-chip { display: inline-block; margin: 2px 4px; padding: 2px 10px; border-radius: 999px; font-weight: 600; background: #f6f2f3; }
.cr-prices { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.cr-prices li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.cr-prices li.is-diamond { border-color: #b9d3ea; }
.cr-prices li.is-elite { border-color: #ecd18f; background: #fffbf1; }
.cr-prices span { font-size: .82rem; color: var(--ink-soft); }
.cr-prices em { font-style: normal; font-weight: 600; color: var(--plum); white-space: nowrap; }
.cr-history { list-style: none; margin: 0; padding: 0; }
.cr-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cr-when { grid-column: 1 / -1; font-size: .75rem; color: var(--ink-soft); }
.cr-what small { display: block; font-size: .78rem; color: var(--ink-soft); }
.cr-history b { justify-self: end; font-variant-numeric: tabular-nums; }
.cr-history .is-plus { color: var(--ok); }
.cr-history .is-minus { color: #b3261e; }
.cr-after { grid-column: 2; justify-self: end; font-size: .75rem; color: var(--ink-soft); }
.adm-balance { display: block; margin-bottom: 6px; font-size: 1rem; }
.adm-credit { display: grid; grid-template-columns: 90px 120px minmax(120px, 1fr) auto; gap: 6px; min-width: 460px; }
.adm-credit input, .adm-credit select { min-height: 38px !important; padding: 6px 10px !important; }
/* Photo verification offer in the account */
.acc-verify { grid-column: 1 / -1; display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: #f1f9f4; border: 1px solid #cfe9d8; font-size: .9rem; }
.acc-verify-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acc-verify h3 { margin: 0; font-family: var(--sans); font-size: 1rem; }
.acc-verify p { margin: 0; }
.acc-verify .verified-pill { position: static; }
.acc-verify-paper { list-style: none; display: grid; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px dashed #9fd2b2; }
.acc-verify-paper li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.acc-verify-paper span { color: var(--ink-soft); }
.acc-verify-paper b { font-family: var(--display); font-size: 1.05rem; }
.acc-verify-note { font-size: .8rem; color: var(--ink-soft); }
.acc-verify form { margin: 0; }
.acc-verify label.btn { display: inline-flex; gap: 6px; border-radius: 999px; cursor: pointer; }
.acc-verify-state { font-weight: 500; color: #2f7a4b; }
.adm-verify { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 10px 0 14px; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .adm-verify { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.adm-verify-photo { margin: 0; }
.adm-verify-photo img { width: 100%; max-height: 520px; object-fit: contain; border-radius: 12px; background: #111; }
.adm-verify-photo figcaption { margin-top: 4px; font-size: .78rem; color: var(--ink-soft); }
.adm-verify-ad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.adm-verify-ad img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
.wiz-need { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; font-size: .92rem; font-weight: 500; color: #8c1d18; background: #fdeceb; border: 1px solid #f6c7c4; }
.wiz-need .ico { flex: none; color: #b3261e; }
/* Price list on the profile */
.p-prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 0 0 12px; }
.p-prices div { padding: 10px 12px; border-radius: 10px; background: #f5f5f7; }
.p-prices dt { font-size: .75rem; color: var(--ink-soft); }
.p-prices dd { margin: 2px 0 0; font-weight: 600; }
.price-trio { gap: 14px; }
/* District outline map (home and InCall) */
.dmap { position: relative; margin: 8px 0 28px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.dmap-head h2 { margin: 0 0 4px; font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 600; }
.dmap-head p { margin: 0 0 12px; font-size: .88rem; }
.dmap-svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; }
.dmap-area path { stroke: #fff; stroke-width: 3; stroke-linejoin: round; transition: fill .15s; }
.dmap-area.lv0 path { fill: #f4eff1; }
.dmap-area.lv1 path { fill: #f8d3dd; }
.dmap-area.lv2 path { fill: #f1a2b7; }
.dmap-area.lv3 path { fill: #e66a8c; }
.dmap-area:hover path, .dmap-area:focus-visible path { fill: var(--plum); }
.dmap-area text { text-anchor: middle; pointer-events: none; font-family: var(--sans); }
.dmap-name { font-size: 34px; font-weight: 700; fill: #3a2a30; }
.dmap-area.lv3 text, .dmap-area:hover text { fill: #fff; }
.dmap-area:focus-visible { outline: none; }
.dmap-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.dmap-legend a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .85rem; color: var(--ink); text-decoration: none; background: #f6f2f3; }
.dmap-legend a b { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: .75rem; text-align: center; color: #fff; background: var(--plum); }
.dmap-legend a.is-empty { color: var(--ink-soft); }
.dmap-legend a.is-empty b { color: var(--ink-soft); background: #e9e4e6; }
.dmap-legend a:hover { background: #fcecf0; }
/* Map data credit behind the info icon, top right of the map card */
.dmap-head { padding-right: 40px; }
.dmap-info { position: absolute; top: 14px; right: 14px; z-index: 2; }
.dmap-info summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-soft); list-style: none; cursor: pointer; }
.dmap-info summary::-webkit-details-marker { display: none; }
.dmap-info summary:hover, .dmap-info[open] summary { color: var(--plum); background: #fcecf0; }
.dmap-info p { position: absolute; top: 38px; right: 0; margin: 0; padding: 8px 12px; border-radius: 10px; font-size: .78rem; white-space: nowrap; background: #fff; box-shadow: 0 8px 24px -10px rgba(40, 10, 20, .35); border: 1px solid var(--line); }
.dmap-info a { color: var(--ink); }
/* Phones: the same hero, lower, so every catalog page has its title */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .d-hero { display: block; height: 190px; margin: 0; border-radius: 0; }
  .d-hero::after { background: linear-gradient(90deg, rgba(25,15,18,.82) 0%, rgba(25,15,18,.55) 55%, rgba(25,15,18,.15) 100%); }
  .d-hero-text { left: 17px; right: 17px; max-width: none; }
  .d-hero-text h1 { max-width: 15ch; margin: 0 0 6px; font-size: 1.65rem; line-height: 1.12; }
  .d-hero-text p { margin: 0 0 12px; font-size: .8rem; }
  .d-search input { min-height: 40px; font-size: 16px; }
}
/* All districts in the chips row; on phones it scrolls sideways, with a soft fade at the edge */
.chips-row .rail { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.chips-row .rail a { scroll-snap-align: start; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .chips-row .rail { mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 16px; } }
/* Search in the hero: the round button sits with the same gap on every side */
.d-search { padding: 4px 4px 4px 16px; }
.d-search input { min-height: 36px; }
.d-search button { width: 36px; height: 36px; flex: none; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .d-hero-text h1 { max-width: 18ch; }
  .d-search { padding: 5px 5px 5px 16px; }
  .d-search input { min-height: 38px; }
  .d-search button { width: 38px; height: 38px; }
}
/* Drawer: account first, then one list of the site (favourites once), then small info links */
.drawer { overflow-y: auto; }
.drawer-guest { display: grid; gap: 8px; margin-bottom: 8px; }
.drawer-guest .btn { justify-content: center; border-radius: 999px; min-height: 46px; }
.drawer-guest .btn.pill { border: 0; color: #fff; }
.drawer-label { margin: 18px 0 4px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); }
.drawer-links a.drawer-fav { display: flex; align-items: center; gap: 8px; }
.drawer-links a.drawer-fav .ico { color: var(--plum); }
.drawer-small { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 8px; }
.drawer-small a { padding: 4px 0; font-size: .86rem; color: var(--ink-soft); text-decoration: none; }
.drawer-small a:hover { color: var(--plum); }
.drawer:focus, .drawer:focus-visible { outline: none; }
/* Two banners side by side after every 10 cards (stacked on narrow phones) */
.board-pair { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .board-pair { grid-template-columns: 1fr 1fr; gap: 14px; } }
.board-pair .promo { margin: 0; }
.board-pair .promo img { height: 100%; max-height: 220px; }
.board-pair .promo-own { display: grid; grid-template-columns: 1fr; align-content: space-between; min-height: 150px; padding: 20px; }
.board-pair .promo-own-text { max-width: 62%; }
.board-pair .promo-own .btn.pill { position: relative; right: auto; bottom: auto; justify-self: start; margin: 0; }
.promo-ad { background: var(--plum) !important; }
.promo-ad .promo-own-text { max-width: 100%; }
/* Banner block after the last card: 2 cells, or 4 when more than 3 banners are bought */
.board-bottom { margin: 4px 0 24px; }
.board-bottom.is-four { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .board-bottom.is-four { grid-template-columns: repeat(4, 1fr); } }
/* No focus ring or grey tap flash on touch and mouse; the ring stays only for keyboard users */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
.lightbox { touch-action: none; overscroll-behavior: contain; } .lightbox img { will-change: transform; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
/* Phones without the bottom tab bar: four header icons fit next to the logo */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .mast-actions { gap: 0; }
  .mast-icon { width: 38px; height: 38px; }
  .mast-icon .ico { width: 23px; height: 23px; }
  .logo-word { font-size: 1.5rem; }
  .mast.is-profile .logo-word { font-size: 1.3rem; }
}
@media (max-width: 380px) { .logo-word { font-size: 1.3rem; } .mast.is-profile .logo-word { font-size: 1.15rem; } }
/* Profile on phones: contacts pinned to the bottom of the screen */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .p-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; padding: 10px 17px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
  .p-dock .p-actions-row { margin: 0; }
  body:has(.p-dock .p-actions-row) .foot { padding-bottom: 120px; }
}
.p-dock:not(:has(.p-actions-row)) { display: none !important; }
/* Hero search: one ring around the whole pill instead of a second frame on the field */
.d-search input, .d-search input:focus, .d-search input:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; }
.d-search:focus-within { box-shadow: 0 0 0 3px rgba(219, 71, 124, .45); }
/* Filters: two columns on phones, every field the same height, labels on one line */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .filters select, .filters input:not([type=checkbox]) { width: 100%; }
  .filters label:not(.check) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .filters .check { align-self: center; }
  .filters .actions { grid-column: 1 / -1; }
}
/* Banners in the catalogue on phones: low strips, so they do not take a whole screen */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .board-pair { gap: 8px; }
  .board-pair .promo img { max-height: 110px; }
  .board-pair .promo-own { min-height: 0; padding: 14px 16px; gap: 8px; }
  .board-pair .promo-own-text { max-width: 64%; gap: 4px; }
  .board-pair .promo-own-text strong { font-size: 1.1rem; }
  .board-pair .promo-own-text span { font-size: .76rem; line-height: 1.35; }
  .board-pair .promo-own .btn.pill { min-height: 28px; padding: 0 12px; font-size: .74rem; }
  .board-bottom.is-four .promo img { max-height: 90px; }
}
.p-block + .board-bottom, .board-bottom { margin: 16px 0; }
.board-bottom.is-one { grid-template-columns: 1fr; }
/* Lightbox strip: previous / current / next photo side by side, moved as one */
.lightbox .lb-track { position: absolute; inset: 0; will-change: transform; }
.lightbox .lb-track img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 96vw; max-height: 92vh; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.lightbox .lb-0 { transform: translateX(-100vw); }
.lightbox .lb-2 { transform: translateX(100vw); }
.lightbox .nav, .lightbox .close { z-index: 2; }
.more-act .act-menu { z-index: 40; } .act-menu a, .act-menu button { cursor: pointer; }
/* Phones: slimmer header and a slim pinned contact bar */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .mast-row { min-height: 52px !important; }
  .p-dock { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  .p-dock .p-actions-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; margin: 0; }
  .p-dock .act { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 8px;
    border-radius: 999px; background: #f3f3f5; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
  .p-dock .act span { width: auto; height: auto; border: 0; background: none !important; color: inherit; }
  .p-dock .act .ico { width: 18px; height: 18px; }
  .p-dock .act-call { background: var(--plum); color: #fff; }
  .p-dock .act-wa span { color: #25d366; }
  .p-dock .act-tg span { color: #229ed9; }
  body:has(.p-dock .p-actions-row) .foot { padding-bottom: 80px; }
}
/* Report modal */
.report-modal { width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 18px 20px 20px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.report-modal::backdrop { background: rgba(20,12,22,.55); }
.report-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.report-head h2 { margin: 0; font-size: 1.15rem; }
.report-modal .field { margin-bottom: 12px; }
.report-modal select, .report-modal textarea, .report-modal input[type=text] { width: 100%; }
.report-modal textarea { min-height: 96px; }
.report-modal .btn { width: 100%; }
.report-modal .hint { margin: 10px 0 0; font-size: .78rem; }
/* "Your ad here": a photo banner, not a plain coloured box */
.promo-ad { background: #1a1418 !important; }
.promo-ad img { position: absolute; inset: 0; width: 100% !important; height: 100%; object-fit: cover; object-position: 70% 30%; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.promo-ad::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,12,22,.92) 0%, rgba(26,12,22,.7) 45%, rgba(219,71,124,.15) 100%); }
.promo-ad .promo-own-text, .promo-ad .btn.pill { position: relative; z-index: 1; }
.promo-ad .promo-own-text { max-width: 62% !important; }
.promo-ad .btn.pill { background: #fff !important; color: var(--plum) !important; }
.promo-ad .btn.pill .ico { color: var(--plum); }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .promo-ad .promo-own-text span { display: none; } .promo-ad .promo-own-text strong { font-size: 1.3rem; } }
.act-label { font-style: normal; }
/* Pinned bar: long call button with the number + round SMS / WhatsApp / Telegram icons */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .p-dock .act { flex: 0 0 44px; width: 44px; padding: 0; gap: 0; border-radius: 50%; }
  .p-dock .act-label { display: none; }
  .p-dock .act-call { flex: 1 1 auto; width: auto; padding: 0 16px; gap: 8px; border-radius: 999px; font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
  .p-dock .act-call .ico { width: 20px; height: 20px; }
  .p-dock .act-sms span { color: var(--plum); }
  .p-dock .act-sms .ico { width: 26px; height: 26px; }
  .p-dock .act-wa .ico, .p-dock .act-tg .ico { width: 22px; height: 22px; }
}
.field-error { margin: 4px 0 0; font-size: .8rem; color: #c0263f; }
/* Footer: all districts in a two-column block; on phones it comes last, full width */
.foot-grid .foot-places { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.foot-places h2 { grid-column: 1 / -1; }
@media (max-width: 759px) { .foot-grid .foot-places { grid-column: 1 / -1; order: 9; } }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1.6fr 1fr; } }
/* Small hero on inner pages */
.page-hero .wrap { padding-top: 26px; padding-bottom: 22px; }
.page-hero .wiz-head h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: 6px; }
.page-hero .wiz-lead { margin: 0; }
@media (min-width: 700px) { .page-hero .wrap { padding-top: 38px; padding-bottom: 30px; } }
.page-body { padding-top: 22px; padding-bottom: 32px; }
.page-body .doc { padding-top: 0; }
.page-body .doc > h1:first-child { display: none; }
/* Contact page */
.contact-cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: 1fr 1fr; gap: 16px; } }
.contact-card { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.contact-card h2 { margin: 0; font-size: 1.02rem; }
.contact-card p { margin: 0 0 4px; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.contact-card .btn.pill { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.contact-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fcecf0; color: var(--plum); }
.contact-note { margin: 18px 0 0; font-size: .86rem; color: var(--ink-soft); }
.contact-operator { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .88rem; }
.contact-operator h2 { margin: 0 0 6px; font-size: .95rem; }
.contact-operator p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.doc-date { font-size: .82rem; color: var(--ink-soft); }
/* "Advertising platform only" notice */
.platform-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: #fdf3f6; border: 1px solid #f3dfe4; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.platform-note .ico { flex: none; margin-top: 2px; color: var(--plum); }
.platform-note.small { margin: 18px 0; font-size: .82rem; color: var(--ink-soft); }
/* Internal links block under the catalog text */
.seo-links { display: grid; gap: 18px; margin: 8px 0 32px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .seo-links { grid-template-columns: 2fr 1fr; } }
.seo-links h2 { margin: 0 0 10px; font-size: 1rem; }
.seo-links ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seo-links a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: #f6f4f6; color: var(--ink); text-decoration: none; font-size: .84rem; }
.seo-links a:hover { background: #fcecf0; color: var(--plum); }
/* Filters on desktop: one tidy row, equal fields, labels on one line, button as tall as the fields */
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) {
  .filters:not(.adm-main *) { grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 14px 16px; align-items: end;
    margin: 6px 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(20, 10, 20, .05); }
  .filters:not(.adm-main *) > div:not(.actions) { display: grid; gap: 6px; min-width: 0; }
  .filters:not(.adm-main *) label:not(.check) { margin: 0; font-size: .78rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .filters:not(.adm-main *) select, .filters:not(.adm-main *) input:not([type=checkbox]) { width: 100%; height: 44px; min-height: 44px; margin: 0; }
  .filters:not(.adm-main *) .check { display: flex; align-items: center; gap: 8px; height: 44px; margin: 0; white-space: nowrap; font-size: .88rem; }
  .filters:not(.adm-main *) .actions { display: flex; align-items: center; gap: 14px; height: 44px; }
  .filters:not(.adm-main *) .actions .btn { height: 44px; min-height: 44px; padding: 0 22px; }
  .filters:not(.adm-main *) .actions a { white-space: nowrap; font-size: .86rem; }
}
@media (min-width: 900px) and (max-width: 1199px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) and (max-width: 1199px) {
  .filters:not(.adm-main *) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filters:not(.adm-main *) .check { grid-column: 1 / 3; }
  .filters:not(.adm-main *) .actions { grid-column: 3 / 5; justify-self: end; }
}
/* Banners under an ad: full page width, two side by side */
.p-banners { margin: 8px 0 28px; }
@media (min-width: 600px) { .p-banners { grid-template-columns: 1fr 1fr; } }
.promo-join img { object-position: 70% 25%; }
/* Phones: the hero grows with its text (no fixed height), with breathing room above and below */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .d-hero { height: auto; min-height: 190px; }
  .d-hero-text { position: relative; top: auto; left: auto; right: auto; transform: none; padding: 24px 17px 26px; }
  .d-hero-text p { margin-bottom: 16px; }
}
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { article.profile { padding-top: 14px !important; } }
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .d-hero { height: auto; min-height: 300px; display: flex; align-items: center; } .d-hero-text { position: relative; top: auto; transform: none; padding: 40px 0; max-width: 640px; } .d-hero-text h1 { max-width: 640px; } }
/* Similar ads under the banners, full width: 2 per row on phones, 4 on tablets, 5 on desktop */
.p-similar { margin: 0 0 28px; }
.p-similar .similar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-similar .similar > :nth-child(5) { display: none; }
@media (min-width: 760px) { .p-similar .similar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .p-similar .similar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 14px; } .p-similar .similar > :nth-child(5) { display: block; } }
/* Package sections inside the catalogue grid */
.board > .group-head { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 6px; }
.board > .group-head + * { margin-top: 0; }
.board > .group-head:not(:first-child) { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.board > .group-head h2 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 500; }
.board > .group-elite h2::before, .board > .group-diamond h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.board > .group-elite h2 { color: var(--elite); }
.board > .group-diamond h2 { color: var(--diamond); }
.board > .group-head p { font-size: .86rem; }
/* Package badge on the card photo: crown (Elite), diamond (Diamond) */
.tier-badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(20, 12, 18, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tier-badge.elite { color: #f2c14e; }
.tier-badge.diamond { color: #8fd3ff; }
/* Age gate as in the owner's mockup: white card, logo, 18+ ring, serif title, pink button, underlined leave link */
.gate { background: rgba(28, 20, 26, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gate .box { position: relative; width: min(448px, 100%); max-width: none; padding: 30px 32px 26px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.gate-x { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); }
.gate-x:hover { background: #f4f1f3; }
.gate-logo { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.gate-logo .logo-word { font-size: 1.55rem; }
.gate-18 { display: grid; place-items: center; width: 72px; height: 72px; margin: 22px auto 14px; border: 2px solid var(--plum); border-radius: 50%; color: var(--plum); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.gate .box h2 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 500; line-height: 1.15; color: var(--ink); }
.gate .box p { margin: 0 auto 20px; max-width: 34ch; font-size: .9rem; line-height: 1.5; color: #5a5a60; }
.gate-yes { display: flex; justify-content: center; width: 100%; min-height: 52px; border-radius: 999px; font-size: 1rem; }
.gate-no { display: inline-block; margin-top: 16px; font-size: .88rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Desktop hero text lines up with the page content (same box as .wrap), no extra indent */
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) { .d-hero-text { left: 0; right: auto; width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 28px; } .d-hero-text h1, .d-hero-text p, .d-hero-text .d-search { max-width: 640px; } }
/* Themed hero photos: taller on big screens so the scene is not cut into a thin strip; subject sits on the right */
.d-hero img.hero-themed { object-position: 75% 40%; }
@media (min-width: 1200px) { .d-hero { min-height: 380px; } }
@media (min-width: 1600px) { .d-hero { min-height: 440px; } }
/* Massage: show the table and hands, not just the face */
.d-hero img.hero-massage { object-position: 75% 55%; }
/* Phones: the hero is about as wide as the photo, so object-position alone cannot move it; widen the photo and shift it */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .d-hero img.hero-massage { width: 140%; max-width: none; left: -10%; right: auto; object-position: 50% 55%; } }
/* Language switch with flags */
.lang-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .84rem; font-weight: 500; text-decoration: none; }
.lang-switch a[aria-current] { border-color: var(--plum); color: var(--plum); font-weight: 600; }
.lang-switch .flag { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
/* Phones: the gap above the district chips equals the side gutter */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .chips-row { padding-top: 17px !important; } }

/* Desktop: the page text uses the full width in two columns instead of a narrow strip */
@media (min-width: 1000px) {
  .intro { max-width: none; column-count: 2; column-gap: 56px; }
  .intro h2 { break-after: avoid; -webkit-column-break-after: avoid; }
  .intro h2:first-child { margin-top: 0; }
  .intro p { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

/* Dark footer, always */
.foot { background: #1a1418 !important; color: #b9adb4; border-top: 0; }
.foot .logo-a { color: #fff; }
.foot .logo-tld { color: #9d8f97; }
.foot-grid h2 { color: #fff; }
.foot-grid nav a, .foot a { color: #cfc3ca; }
.foot-grid nav a:hover, .foot a:hover { color: #fff; }
.foot-grid p, .foot-adult { color: #9d8f97; }
.foot .lang-switch a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e9e1e6; }
.foot .lang-switch a[aria-current] { border-color: var(--plum); color: #fff; background: rgba(219,71,124,.18); }
.foot .foot-adult { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; }

/* "Not available now" sits in the middle of the photo */
.paused-pill { left: 50% !important; right: auto !important; top: 50%; bottom: auto !important; transform: translate(-50%, -50%); white-space: nowrap; }
/* Package icons next to Diamond and Elite in the account */
.pkg-ico { vertical-align: -3px; margin-right: 6px; }
.is-elite .pkg-ico { color: var(--elite); }
.is-diamond .pkg-ico { color: var(--diamond); }
.cr-prices li > strong, .acc-package > strong { display: inline-flex; align-items: center; white-space: nowrap; }
/* Account sheet (person icon) */
.drawer-title { font-family: var(--display); font-size: 1.3rem; font-weight: 500; }
/* Account pages on phones: the tabs stay on one line and scroll sideways, like an app */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .acc-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -17px 18px; padding: 2px 17px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-nav > * { flex: none; }
  .acc-nav > a, .acc-nav > form > button { min-height: 40px; }
}
.lang-switch button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 500 .84rem/1 var(--sans); cursor: pointer; }
.lang-switch button[aria-current] { border-color: var(--plum); color: var(--plum); font-weight: 600; }
.foot .lang-switch button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e9e1e6; }
.foot .lang-switch button[aria-current] { border-color: var(--plum); color: #fff; background: rgba(219,71,124,.18); }
form.lang-switch { margin: 0; }
/* Account on phones: compact verification and packages */
.acc-verify > summary { list-style: none; cursor: pointer; }
.acc-verify > summary::-webkit-details-marker { display: none; }
.acc-verify-head { display: flex; align-items: center; gap: 10px; }
.acc-verify-head h3 { flex: 1; min-width: 0; margin: 0; font-size: .95rem; }
.acc-verify-chev { flex: none; color: var(--ink-soft); transition: transform .15s; }
.acc-verify[open] .acc-verify-chev { transform: rotate(180deg); }
.acc-verify:not([open]) { padding-top: 12px !important; padding-bottom: 12px !important; }
.acc-verify[open] > summary { margin-bottom: 10px; }
.acc-verify-line { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px !important; font-size: .85rem; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .acc-packages { grid-template-columns: 1fr; gap: 6px; }
  .acc-package { grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; }
  .acc-package strong { font-size: .92rem; }
  .acc-package span { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acc-package em { font-size: .78rem; text-align: right; white-space: nowrap; }
  .acc-boost { gap: 8px; }
  .acc-boost-note { font-size: .74rem; line-height: 1.4; }
}
/* "What's new" links on the home page */
.news { margin: 8px 0 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.news h2 { margin: 0 0 10px; font-size: 1rem; }
.news ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .news ul { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.news li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .9rem; }
.news a { font-weight: 600; color: var(--ink); text-decoration: none; }
.news a:hover { color: var(--plum); }
.news span { font-size: .8rem; color: var(--ink-soft); }
.news h2 small { font-size: .78rem; font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.news-more > summary { display: inline-block; margin-top: 10px; font-size: .86rem; font-weight: 600; color: var(--plum); cursor: pointer; list-style: none; }
.news-more > summary::-webkit-details-marker { display: none; }
.news-more[open] > summary { margin-bottom: 8px; }
/* "Available now" and discount */
.now-pill { position: absolute; right: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(20, 12, 18, .66); color: #fff; font-size: .72rem; font-weight: 600; }
.now-pill i, .p-now i, .acc-available .btn i { width: 8px; height: 8px; border-radius: 50%; background: #3ccb6c; box-shadow: 0 0 0 3px rgba(60,203,108,.25); }
.p-now { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: .88rem; font-weight: 600; color: #1d7a3e; }
.deal { display: inline-block; margin: 4px 0 0; padding: 2px 8px; border-radius: 6px; background: #fcecf0; color: var(--plum); font-size: .76rem; font-weight: 600; }
.p-deal { margin: 8px 0 14px; padding: 4px 10px; font-size: .85rem; }
.acc-available { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.acc-available .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; }
.acc-available .btn.ghost i { background: #b9b2b6; box-shadow: none; }
.acc-available .btn.is-on { background: #1d7a3e; border-color: #1d7a3e; color: #fff; }
.acc-available span { font-size: .8rem; color: var(--ink-soft); }
/* Offers strip at the bottom of the home page: wide horizontal cards with the offer on a ribbon */
.deals { margin: 6px 0 26px; }
.deals h2 { margin: 0 0 12px; font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.deals-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .deals-strip { grid-auto-columns: 78%; margin: 0 -17px; padding: 0 17px 6px; scroll-snap-type: x mandatory; } .deal-card { scroll-snap-align: start; } }
.deal-card { position: relative; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: linear-gradient(120deg, #2a1622, #4a2338); color: #fff; text-decoration: none; overflow: hidden; }
.deal-card img { grid-row: 1 / 3; width: 96px; height: 120px; object-fit: cover; border-radius: 10px; }
.deal-tag { align-self: end; justify-self: start; padding: 4px 10px; border-radius: 999px; background: #f2c14e; color: #2a1622; font-size: .8rem; font-weight: 700; line-height: 1.25; }
.deal-who { align-self: start; display: grid; gap: 2px; }
.deal-who b { font-size: .95rem; }
.deal-who small { font-size: .76rem; color: #d9c6d0; }
/* Phones: the hero title may use the full width, so the city does not drop to a third line */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .d-hero-text h1 { max-width: none !important; } }
/* Phones: a long hero title shrinks with the screen width so it stays on two lines */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .d-hero-text h1.long { font-size: min(1.65rem, calc((100vw - 34px) * .07)); } }
/* "Verified" is a white label with a blue seal, so it never looks like the dark "Available now" pill with its green dot */
.card .verified-pill, .p-hero-wrap .verified-pill, .acc-verify .verified-pill { gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #fff; color: #1c1c22;
  font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 5px rgba(0,0,0,.28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.verified-pill .ico { flex: none; color: #2563eb; }
.who-seal { display: inline-flex; margin-left: 4px; vertical-align: -3px; color: #2563eb; }

/* ---- Advertise: sales page for advertisers (dark aubergine hero with gold, like the offers strip) ---- */
.adv-hero { background: radial-gradient(120% 140% at 85% 0%, #5a2a45 0%, #2a1622 55%, #1d0f18 100%); color: #fff; }
.adv-hero-in { display: grid; gap: 28px; padding-top: 30px; padding-bottom: 34px; }
.adv-eyebrow { margin: 0 0 10px; color: #f2c14e; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.adv-pitch h1 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.8rem); font-weight: 500; line-height: 1.12; }
.adv-lead { margin: 0 0 20px; color: #ead9e2; font-size: 1.02rem; max-width: 34em; }
.adv-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn.adv-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-size: 1.02rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(232, 51, 95, .35); }
.adv-link { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.adv-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: #ead9e2; font-size: .88rem; }
.adv-trust li { display: inline-flex; align-items: center; gap: 6px; }
.adv-trust .ico { color: #3ccb6c; }
.adv-mock { justify-self: center; width: min(250px, 100%); margin: 0; }
.adv-mock figcaption { margin-bottom: 10px; color: #f2c14e; font-size: .78rem; font-weight: 600; text-align: center; }
.adv-mock-card { border-radius: 18px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.45); transform: rotate(-2deg); }
.adv-mock-photo { position: relative; aspect-ratio: 4 / 4.2; background:
  radial-gradient(60% 50% at 50% 38%, rgba(255,255,255,.28), transparent 70%),
  linear-gradient(160deg, #e8a7b8 0%, #b45a7c 45%, #4a2338 100%); }
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .adv-mock-photo { aspect-ratio: 4 / 3; } }
.adv-mock-info { display: grid; gap: 8px; padding: 12px 14px 14px; }
.adv-mock-info b { font-size: 1.05rem; }
.adv-mock-deal { justify-self: start; padding: 3px 10px; border-radius: 999px; background: #f2c14e; color: #2a1622; font-size: .78rem; font-weight: 700; }
.adv-mock-call { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 40px; border-radius: 999px; background: var(--plum); color: #fff; font-weight: 700; font-size: .9rem; }
.adv-body { padding-top: 0; padding-bottom: 40px; }
.adv-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: -18px 0 8px; padding: 0; list-style: none; position: relative; }
.adv-facts li { display: grid; gap: 2px; padding: 14px 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(42,22,34,.12); text-align: center; }
.adv-facts b { font-family: var(--display); font-size: 1.6rem; font-weight: 500; color: var(--plum); line-height: 1.1; }
.adv-facts span { color: var(--ink-soft); font-size: .8rem; line-height: 1.3; }
.adv-block { margin-top: 44px; scroll-margin-top: 84px; }
.adv-block h2, .adv-final h2 { margin: 0 0 8px; font-family: var(--display); font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 500; }
.adv-sub { margin: 0 0 18px; color: var(--ink-soft); }
.adv-features { display: grid; gap: 12px; margin-top: 16px; }
.adv-feature { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.adv-feature .adv-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--plum); }
.adv-f-seal .adv-ico { background: #eaf0fe; color: #2563eb; }
.adv-f-now .adv-ico { background: #e7f8ee; color: #1f9d55; }
.adv-f-deal .adv-ico { background: #fdf3da; color: #a8740f; }
.adv-feature h3 { margin: 2px 0 4px; font-size: 1rem; }
.adv-feature p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.adv-plans { display: grid; gap: 14px; }
.adv-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.adv-plan h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; }
.adv-plan.diamond { border: 2px solid var(--plum); box-shadow: 0 12px 30px rgba(232,51,95,.14); }
.adv-plan.diamond h3 .ico { color: var(--diamond); }
.adv-plan.elite { background: linear-gradient(160deg, #2a1622, #4a2338); border-color: #4a2338; color: #fff; }
.adv-plan.elite h3 .ico { color: #f2c14e; }
.adv-popular { position: absolute; top: -12px; left: 20px; padding: 3px 12px; border-radius: 999px; background: var(--plum); color: #fff; font-size: .74rem; font-weight: 700; }
.adv-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; }
.adv-price b { font-family: var(--display); font-size: 2rem; font-weight: 500; line-height: 1; }
.adv-price b.was { font-size: 1.2rem; text-decoration: line-through; opacity: .55; }
.adv-price span { color: var(--ink-soft); font-size: .88rem; }
.adv-plan.elite .adv-price span { color: #d9c6d0; }
.adv-promo { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: 999px; background: #f2c14e; color: #2a1622; font-size: .82rem; font-weight: 700; }
.adv-plan ul { display: grid; gap: 8px; margin: 4px 0 6px; padding: 0; list-style: none; font-size: .93rem; }
.adv-plan li { display: flex; gap: 8px; align-items: flex-start; }
.adv-plan li .ico { flex: none; margin-top: 3px; color: var(--ok); }
.adv-plan.elite li .ico { color: #f2c14e; }
.adv-plan .btn { margin-top: auto; justify-content: center; min-height: 46px; border-radius: 999px; font-weight: 700; }
.adv-plan.elite .btn.ghost { border-color: #f2c14e; color: #f2c14e; }
.adv-steps { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: none; }
.adv-steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.adv-steps span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--plum); color: #fff; font-weight: 700; }
.adv-steps h3 { margin: 2px 0 2px; font-size: 1rem; }
.adv-steps p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.adv-final { margin-top: 48px; padding: 28px 20px; border-radius: 20px; background: linear-gradient(140deg, #2a1622, #5a2a45); color: #fff; text-align: center; }
.adv-final p { margin: 0 0 18px; color: #ead9e2; }
.adv-more { margin-top: 44px; }
.adv-more h2 { font-family: var(--display); font-weight: 500; }
.adv-more h3 { margin: 18px 0 6px; font-size: 1.02rem; }
@media (min-width: 760px) {
  .adv-features { grid-template-columns: repeat(2, 1fr); }
  .adv-steps { grid-template-columns: repeat(3, 1fr); }
  .adv-steps li { grid-template-columns: 1fr; row-gap: 8px; }
  .adv-steps span { grid-row: auto; }
}
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) {
  .adv-hero-in { grid-template-columns: 1.25fr .75fr; align-items: center; padding-top: 56px; padding-bottom: 64px; }
  .adv-features { grid-template-columns: repeat(3, 1fr); }
  .adv-plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .adv-final { padding: 40px; }
  .adv-more { max-width: 760px; }
}
/* Profile: the address is one tile across the whole width, not a cell of the 3-column grid */
.p-stats.p-address { grid-template-columns: 1fr; margin: 12px 0; }
.p-address strong { white-space: normal !important; }
/* Banners are pictures in one fixed proportion, 685:160; they scale with the width like any picture.
   Our own text cards in empty cells keep the same box. */
.board-pair > .promo-own, .board-pair > .promo { aspect-ratio: 685 / 160; height: auto; min-height: 0; overflow: hidden; }
.board-pair > .promo a, .board-pair > .promo img { width: 100%; height: 100%; max-height: none; }
.board-pair > .promo img { object-fit: cover; }
.board-pair > .promo-own { padding: 10px 16px; gap: 4px; align-content: center; }
.board-pair > .promo-own .promo-own-text { gap: 2px; }
.board-pair > .promo-own .promo-own-text strong { max-width: none; font-size: 1.1rem; }
.board-pair > .promo-own .promo-own-text span, .board-pair > .promo-own .btn.pill { display: none; }
@media (min-width: 1100px) {
  .board-pair > .promo-own { padding: 14px 22px; }
  .board-pair > .promo-own .promo-own-text strong { font-size: 1.5rem; }
  .board-pair > .promo-own .promo-own-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Short confirmation, e.g. "Link copied" after the share button */
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px;
  background: #20232b; color: #fff; font-size: .9rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: none; }
/* Desktop chips between 640 and 960 px scroll sideways instead of running off the page */
@media (min-width: 900px) and (max-width: 959px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) and (max-width: 959px) {
  .chips-row .rail { overflow-x: auto; min-width: 0; }
}
/* Desktop layout up to 968 px (phones sideways, small windows): the category links give way to the
   menu button, and the call button says "Call" instead of showing the number */
.call-word { display: none; }
@media (min-width: 900px) and (max-width: 968px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) and (max-width: 968px) {
  .btn.call .call-num { display: none; }
  .btn.call .call-word { display: inline; }
  .mast .mast-nav.only-d { display: none !important; }
  .mast .mast-icon.only-m[data-menu] { display: grid !important; }
  .mast .mast-row { flex-wrap: nowrap; }
  .mast .brand { flex-shrink: 0; margin-right: auto !important; }
}
/* Phone turned sideways: nothing in the menus should need scrolling on a low screen */
@media (orientation: landscape) and (max-height: 500px) {
  #acct { width: min(94vw, 720px); padding: 10px 18px; }
  #acct .drawer-head { margin-bottom: 6px; }
  /* The site menu drops down under the header as one band of links: info pages, sign-in and
     languages stay in the footer, as on the desktop */
  #menu { position: fixed; inset: 61px 0 auto 0; width: 100%; max-width: 100%; height: auto; max-height: calc(100vh - 61px); margin: 0; padding: 0;
    border: 0; box-shadow: 0 12px 24px rgba(0,0,0,.12); }
  #menu[open] { display: block; }
  #menu::backdrop { background: linear-gradient(transparent 61px, rgba(0,0,0,.35) 61px); } /* the header stays undimmed; a tap on it still closes the menu */
  #menu > :not(.drawer-links) { display: none !important; }
  #menu .drawer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; padding: 10px 24px; }
  #menu .drawer-links a { padding: 10px 0; border: 0; font-weight: 500; }
  #acct .drawer-account { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  #acct .drawer-account a, #acct .drawer-account button { padding: 8px 2px; }
}
/* Help pages (FAQ, rules, safety, contact) in the look of the advertise page */
.info-wrap { max-width: 1040px; }
.info-hero .wrap { padding-top: 34px; padding-bottom: 46px; }
.info-hero h1 { margin: 0 0 10px; font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 500; line-height: 1.12; }
.info-hero .adv-lead { margin: 0; }
.info-body { position: relative; margin-top: -22px; padding-bottom: 40px; }
.faq-grid, .info-cards { display: grid; gap: 12px; }
.faq-card, .info-card { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(42,22,34,.06); }
.faq-n { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--plum); }
.faq-card h2, .info-card h2 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
.faq-card p, .info-card p { margin: 0 0 6px; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.faq-card p:last-child, .info-card p:last-child { margin-bottom: 0; }
.info-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.info-card > :not(.info-ico) { grid-column: 2; }
.info-ico { grid-row: 1 / 99; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fcecf0; color: var(--plum); }
.info-card ul { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.info-card li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: .93rem; line-height: 1.5; }
.info-card li .ico { flex: none; margin-top: 3px; }
.kind-yes .info-ico { background: #e7f8ee; color: #1f9d55; } .kind-yes li .ico { color: #1f9d55; }
.kind-no .info-ico { background: #fde8ea; color: #d23246; } .kind-no li .ico { color: #d23246; }
.kind-who .info-ico, .kind-visitors .info-ico { background: #eaf0fe; color: #2563eb; }
.kind-note { background: #faf7f8; box-shadow: none; }
.kind-urgent { border: 0; background: linear-gradient(140deg, #2a1622, #5a2a45); color: #fff; box-shadow: 0 12px 30px rgba(42,22,34,.25); }
.kind-urgent .info-ico { background: #d23246; color: #fff; }
.kind-urgent h2 { font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.kind-urgent p { color: #ead9e2; font-size: .98rem; }
.kind-urgent p:first-of-type { color: #fff; font-weight: 600; font-size: 1.05rem; }
.info-contact .platform-note, .info-contact .contact-cards { position: relative; }
.info-contact .contact-card { box-shadow: 0 6px 20px rgba(42,22,34,.06); border-radius: 16px; background: #fff; }
.info-contact .contact-card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
.info-contact .contact-card > :not(.contact-ico) { grid-column: 2; }
.info-contact .contact-ico { grid-row: 1 / span 3; width: 44px; height: 44px; }
.info-more { margin-top: 36px; }
.info-more > p { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.info-more > div { display: grid; gap: 10px; }
.info-more a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
.info-more a > .ico:last-child { margin-left: auto; color: var(--ink-soft); }
.info-more .info-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; }
.info-more a:hover { border-color: var(--plum); }
@media (max-width: 759px) {
  .info-card, .info-contact .contact-card { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  .info-card .info-ico, .info-contact .contact-ico { width: 36px; height: 36px; border-radius: 10px; }
}
@media (min-width: 760px) {
  .info-hero .wrap { padding-top: 48px; padding-bottom: 64px; }
  .info-body { margin-top: -30px; }
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .faq-card, .info-card { padding: 22px 24px; }
  .info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .info-rules .info-cards { grid-template-columns: 1fr; }
  .info-rules .kind-no ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .info-safety .kind-urgent { grid-column: 1 / -1; }
  .info-more > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .info-safety .info-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Legal documents (terms, privacy, cookies): one white sheet; on wide screens the list of sections stays beside it */
.legal-doc { padding: 20px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(42,22,34,.06); }
.legal-doc .doc-date { display: inline-block; margin: 0 0 6px; padding: 4px 12px; border-radius: 999px; background: #fcecf0; color: var(--plum); font-size: .8rem; font-weight: 600; }
.legal-doc h2 { margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 1.25rem; font-weight: 500; scroll-margin-top: 84px; }
.legal-doc h2:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }
.legal-doc p { margin: 0 0 10px; color: #3b3a41; font-size: .95rem; line-height: 1.65; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-toc { display: none; }
@media (min-width: 760px) { .legal-doc { padding: 32px 36px; } }
@media (min-width: 1000px) {
  .legal.has-toc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
  .legal-toc { position: sticky; top: 90px; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(42,22,34,.06); }
  .legal-toc a { padding: 7px 10px; border-radius: 8px; color: var(--ink-soft); font-size: .86rem; line-height: 1.35; text-decoration: none; }
  .legal-toc a:hover { background: #fcecf0; color: var(--plum); }
  .legal:not(.has-toc) { max-width: 820px; }
}
/* Admin: own statistics */
.stats-note { margin: -4px 0 18px; color: var(--ink-soft); font-size: .86rem; }
.stats-tiles { display: grid; gap: 12px; }
@media (min-width: 700px) { .stats-tiles { grid-template-columns: repeat(3, 1fr); } }
.stats-tiles section, .stats-block { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stats-tiles h2, .stats-block h2 { margin: 0 0 10px; font-size: .95rem; }
.stats-tiles p { margin: 2px 0; color: var(--ink-soft); font-size: .88rem; }
.stats-tiles b { color: var(--ink); font-size: 1.25rem; }
.stats-block { margin-top: 16px; }
.stats-chart { display: block; width: 100%; height: 180px; }
.stats-chart rect.v { fill: #f6c6d3; } .stats-chart rect.u { fill: var(--plum); }
.stats-axis { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: .72rem; color: var(--ink-soft); }
.stats-legend { display: flex; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: .8rem; color: var(--ink-soft); }
.stats-legend i { display: inline-block; width: 10px; height: 10px; margin-right: -8px; border-radius: 2px; }
.stats-legend i.v { background: #f6c6d3; } .stats-legend i.u { background: var(--plum); }
.stats-pair { display: grid; gap: 0 16px; }
@media (min-width: 900px) { .stats-pair { grid-template-columns: 1fr 1fr; } }
.stats-list { margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.stats-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.stats-list li:last-child { border-bottom: 0; }
.stats-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Account: what each published ad got in the last 30 days */
.acc-month { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.acc-month dt { flex-basis: 100%; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.acc-month div { display: grid; min-width: 64px; padding: 6px 10px; border-radius: 10px; background: #faf7f8; text-align: center; }
.acc-month dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.acc-month span { font-size: .72rem; color: var(--ink-soft); }

/* Blog: list of articles as cards below the hero (no overlap), the article on the white sheet of the legal pages */
.blog-page.info-body { margin-top: 0; }
.blog-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 32px 0 40px; }
.blog-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 2px 10px rgba(32, 35, 43, .05); transition: box-shadow .2s, border-color .2s; }
.blog-card:hover { border-color: var(--plum); box-shadow: 0 8px 24px rgba(32, 35, 43, .1); }
.blog-card h2 { margin: 0; font-family: var(--display); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.blog-card h2 a { color: var(--ink); text-decoration: none; }
.blog-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.blog-card p { margin: 0; color: var(--ink-soft); }
.blog-more { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--plum); }
.blog-date { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.blog-doc { max-width: 760px; margin: 28px auto; }
.blog-doc h2 { margin-top: 1.6em; }
.blog-doc a { font-weight: 600; }
/* Admin blog editor: one box per language, a tall text field */
.blog-lang { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.blog-lang legend { padding: 0 6px; font-weight: 700; }
.blog-body { min-height: 360px; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.blog-help { margin: 0 0 16px; }
.blog-help summary { cursor: pointer; font-weight: 600; }
/* Breadcrumbs on the dark hero (blog) */
.hero-crumbs { margin: 0 0 12px; padding: 0; color: rgba(255, 255, 255, .6); }
.hero-crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.hero-crumbs a:hover { color: #fff; text-decoration: underline; }
.hero-crumbs span:last-child { overflow: hidden; max-width: 46ch; white-space: nowrap; text-overflow: ellipsis; }