/* Profile page v2 - the approved demo (Codes\docs\profile-page\profile-page-demo.html), applied by profile-v2.js.
 * Everything is scoped to .widget.public-profile.pv2 (the class the script adds), so without the script the page
 * keeps its current look. design-tokens.css styles these widgets with !important; rules that must win use the same
 * selector plus .pv2 and !important. */

.widget.public-profile.pv2 {
    --pv2-gold: var(--gold, #d4af37);
    --pv2-gold-light: var(--gold-light, #f0d060);
    --pv2-gold-dim: rgba(var(--gold-rgb, 212, 175, 55), .14);
    --pv2-gold-line: rgba(var(--gold-rgb, 212, 175, 55), .4);
    --pv2-card: var(--bg-card, #141419);
    --pv2-card2: var(--bg-elevated, #1a1a22);
    --pv2-input: #101015;
    --pv2-line: rgba(255, 255, 255, .1);
    --pv2-line2: rgba(255, 255, 255, .14);
    --pv2-text: var(--text-primary, #fff);
    --pv2-muted: var(--text-secondary, #a0a0b0);
    --pv2-label: #ccc;
    --pv2-ok: #4ade80;
    --pv2-info: #60a5fa;
    --pv2-warn: #fbbf24;
}

/* the sticky contact column: overflow:hidden on the grid and on .inner-public-profile made each a scroll container,
   so the column never stuck. clip keeps the clipping without that. */
.widget.public-profile.pv2 .inner-public-profile {
    overflow: clip !important;
    overflow-clip-margin: 24px;
}
.widget.public-profile.pv2 .profile-columns {
    overflow: clip !important;
    overflow-clip-margin: 24px;
}
/* 2026-10-03 (owner, phone: the section nav sat on "About me" and did not stay at the top while scrolling). The main
   column was still overflow:hidden (design-tokens.css), so it was the nav's sticky container: the nav never left it,
   and its top:56px pushed it 56px down from its own place onto the first section. clip, like the two above. */
.widget.public-profile.pv2 .profile-columns > .main-column {
    overflow: clip !important;
}
@media (min-width: 1024px) {
    .widget.public-profile.pv2 .profile-columns {
        grid-template-columns: minmax(0, 1fr) 360px !important;
    }
    .widget.public-profile.pv2 .profile-columns > .hidden-mobile {
        top: 84px !important;
    }
}

/* the main column in the demo's order: profile-v2.js sets each child's CSS order (About, Details, Location,
   Services, Touring, Reviews ...) - nothing is moved */
.widget.public-profile.pv2 .profile-columns > .main-column.pv2-flow {
    display: flex !important;
    flex-direction: column !important;
}
.widget.public-profile.pv2 .profile-columns > .main-column.pv2-flow > * {
    min-width: 0;
    /* anything added after profile-v2.js ran (no inline order) goes after the sections, not before the nav -
       vip-message-launch.js appends a contact CTA to Agency / Establishment pages later */
    order: 70;
}
.widget.public-profile.pv2 .profile-columns > .main-column.pv2-flow > .widget.profile-contact-me-cta {
    order: 80;
}
/* The hand-written "Contact me" artwork rises ~72px above the gold card. On a phone it sat at the card's left, over
   the centred "Report user" button above (owner's screenshots 10:39 / 11:22 / 11:35). Neither a margin (9b859fa9)
   nor padding (15e95045 - the widget has a fixed height 170px and .pink is aligned to its bottom, so padding moved
   nothing) cleared it. Owner: put it on the right and mirror the arrow - the artwork goes to the card's right edge,
   where the button above does not reach, and profile-v2.js swaps in contact-me-escort-cta-right.png (the arrow
   mirrored, pointing down-left at the name; text and heart unchanged). */
.widget.public-profile.pv2 .widget.profile-contact-me-cta .pink .inner img {
    left: auto !important;
    right: -6px !important;
}

/* the follow (heart) button, moved onto the hero; its inline style places it top-right of its container */
.widget.public-profile.pv2 .pv2-hero > .fav-btn-wrap {
    z-index: 2;
}
/* 2026-10-15: the name and its tags share one row (.pv2-name-row), so the heart's room is kept on the row */
.widget.public-profile.pv2 .pv2-hero:has(> .fav-btn-wrap) .pv2-name-row {
    padding-right: 48px;
}
.widget.public-profile.pv2 .pv2-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
    min-width: 0;
}
.widget.public-profile.pv2 .pv2-name-row > .pv2-badges { margin-bottom: 0; }

/* the header the hero replaces (name, tagline); the hero carries the name, headline and tag */
.widget.public-profile.pv2.pv2-has-hero .profile-columns > .main-column > .profile-header,
.widget.public-profile.pv2.pv2-has-hero .profile-columns > .main-column > .editable-section:has(> .profile-header),
.widget.public-profile.pv2 .public-profile-nav {
    display: none !important;
}

/* ---------------- hero ---------------- */
.widget.public-profile.pv2 .pv2-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    padding: 20px 22px;
    margin: 0 0 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--gold-rgb, 212, 175, 55), .10), rgba(168, 85, 247, .06) 60%, transparent), var(--pv2-card);
    border: 1px solid var(--pv2-line2);
    color: var(--pv2-text);
}
.widget.public-profile.pv2 .pv2-name {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: var(--pv2-text) !important;
    /* 2026-10-21 (owner: on a long name the verified badge dropped to its own line, at the left): plain inline text,
       so the badge follows the last word on whichever line that is. A flex row put the name in one box as wide as
       the card and wrapped the badge under it. Left-aligned like the rest of the hero - the centring was inherited
       from the site's h1 and only showed once a name ran to two lines. */
    display: block;
    text-align: left;
    overflow-wrap: anywhere;
}
.widget.public-profile.pv2 .pv2-name > .pv2-verified {
    margin-left: 10px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
/* 2026-10-14 (owner): the verified badge (a green rosette with its own tick) on its own - no circle behind it */
.widget.public-profile.pv2 .pv2-verified {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
}
.widget.public-profile.pv2 .pv2-verified svg { width: 24px; height: 24px; }
.widget.public-profile.pv2 .pv2-headline {
    color: var(--pv2-label);
    font-size: 16px;
    margin: 6px 0 12px;
}
.widget.public-profile.pv2 .pv2-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.widget.public-profile.pv2 .pv2-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.widget.public-profile.pv2 .pv2-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* 2026-10-03 (owner): Available Now looks the same everywhere - the home page card's tag (.lc-tag-now: the green
   gradient, white text, faint dark-green shadow from design-tokens' --available-now-*) */
.widget.public-profile.pv2 .pv2-b-now { color: #fff; background: var(--available-now-bg, linear-gradient(180deg, #2EDB6E 0%, #1FB85A 100%)); text-shadow: var(--available-now-text-shadow, 0 1px 1.5px rgba(11, 90, 42, .6)); }
/* 2026-10-03 (owner): the header's dot blinks like a chat app's "online now" light - this badge only, not the
   Availability block's flag */
.widget.public-profile.pv2 .pv2-b-now::before { animation: pv2-online 1.6s ease-out infinite; }
@keyframes pv2-online {
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
    50% { opacity: .35; }
    70% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .widget.public-profile.pv2 .pv2-b-now::before { animation: none; }
}
/* 2026-10-03 (owner: one thing, one look): touring is the Availability block's tag - design-tokens' .flag.touring-now
   (purple gradient, white, uppercase, date part not) in that block's typeface; verified is the gallery's
   "Verified" chip (green tint and border, the verified badge - 2026-10-14, owner) */
.widget.public-profile.pv2 .pv2-badges { align-items: center; }
.widget.public-profile.pv2 .pv2-badges > .flag.touring-now { font-family: 'Open Sans', var(--font-body, sans-serif); line-height: 1.2; }
.widget.public-profile.pv2 .pv2-badges > .verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid rgba(76, 175, 80, .4);
    border-radius: 999px;
    background: rgba(76, 175, 80, .12);
    color: #4caf50;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
    text-transform: none;
    text-shadow: none;
}
.widget.public-profile.pv2 .pv2-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--pv2-muted); font-size: 14px; }
.widget.public-profile.pv2 .pv2-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.widget.public-profile.pv2 .pv2-meta-item svg { width: 15px; height: 15px; color: var(--pv2-gold); flex: none; }
.widget.public-profile.pv2 .pv2-meta-item b { color: var(--pv2-text); font-weight: 600; }
.widget.public-profile.pv2 .pv2-works-at,
.widget.public-profile.pv2 .pv2-works-at:visited {
    color: var(--pv2-gold-light) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pv2-gold-line);
    text-underline-offset: 3px;
}
.widget.public-profile.pv2 .pv2-cta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* buttons */
.widget.public-profile.pv2 .pv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
}
.widget.public-profile.pv2 .pv2-btn-gold { background: linear-gradient(180deg, var(--gold-light, #f0d060), var(--gold, #d4af37)); color: #111 !important; }
.widget.public-profile.pv2 .pv2-btn-soft { background: var(--gold-2e2918, #2e2918); color: var(--pv2-gold-light) !important; }
.widget.public-profile.pv2 .pv2-btn-sm { height: 34px; padding: 0 12px; font-size: 12px; }
.widget.public-profile.pv2 .pv2-btn:focus-visible,
.widget.public-profile.pv2 .pv2-snav a:focus-visible,
.widget.public-profile.pv2 .pv2-tabs button:focus-visible,
.widget.public-profile.pv2 .pv2-more-link:focus-visible,
.widget.public-profile.pv2 .pv2-chip.pv2-more:focus-visible {
    outline: 2px solid var(--pv2-gold-light);
    outline-offset: 2px;
}

/* manage page: edit pills (the existing icon-only edit buttons become labelled pills) */
.widget.public-profile.pv2 .pv2-edit,
.widget.public-profile.pv2.pv2-manage .editable-section > .edit-button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px !important;
    border-radius: 999px;
    border: 1px solid var(--pv2-gold-line) !important;
    color: var(--pv2-gold-light) !important;
    background: var(--pv2-gold-dim) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    width: auto !important;
    line-height: 1;
}
.widget.public-profile.pv2 .pv2-edit svg { width: 13px; height: 13px; }
.widget.public-profile.pv2 .pv2-hero > .pv2-edit { position: absolute; top: 14px; right: 14px; }
.widget.public-profile.pv2.pv2-manage .editable-section > .edit-button::after {
    content: "Edit";
}
.widget.public-profile.pv2.pv2-manage .editable-section > .edit-button .icon {
    font-size: 12px !important;
}

/* ---------------- section nav ---------------- */
.widget.public-profile.pv2 .pv2-snav {
    position: sticky;
    top: 64px;
    z-index: 30;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0;
    margin: 0 0 8px;
    background: linear-gradient(var(--bg-dark, #0a0a0f) 70%, transparent);
}
.widget.public-profile.pv2 .pv2-snav::-webkit-scrollbar { display: none; }
.widget.public-profile.pv2 .pv2-snav a {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--pv2-line2);
    color: var(--pv2-label) !important;
    font-size: 13.5px;
    text-decoration: none !important;
}
.widget.public-profile.pv2 .pv2-snav a.pv2-on {
    background: var(--pv2-gold-dim);
    border-color: var(--pv2-gold-line);
    color: var(--pv2-gold-light) !important;
}
/* --pv2-snav-clear: the header at its full height + the section nav + 12 (profile-v2.js placeNav) */
.widget.public-profile.pv2 .pv2-section { scroll-margin-top: var(--pv2-snav-clear, 130px); }

/* ---------------- fact tiles ---------------- */
.widget.public-profile.pv2 .widget.profile-profile.pv2-done .grid-container { display: none !important; }
.widget.public-profile.pv2 .pv2-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1279px) {
    .widget.public-profile.pv2 .pv2-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .widget.public-profile.pv2 .pv2-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.widget.public-profile.pv2 .pv2-fact {
    background: var(--pv2-input);
    border: 1px solid var(--pv2-line);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 0;
}
.widget.public-profile.pv2 .pv2-fact small {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pv2-muted);
    margin-bottom: 3px;
}
.widget.public-profile.pv2 .pv2-fact b { font-weight: 600; font-size: 15px; color: var(--pv2-text); overflow-wrap: anywhere; }
.widget.public-profile.pv2 .pv2-facts-long { display: grid; gap: 10px; margin-top: 12px; }
.widget.public-profile.pv2 .pv2-long-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 767px) {
    .widget.public-profile.pv2 .pv2-long-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.widget.public-profile.pv2 .pv2-long-row > small {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pv2-muted);
    padding-top: 5px;
}
.widget.public-profile.pv2 .pv2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.widget.public-profile.pv2 .pv2-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--pv2-card2);
    border: 1px solid var(--pv2-line);
    font-size: 13px;
    color: var(--pv2-label);
    font-family: inherit;
}
.widget.public-profile.pv2 .pv2-chip.pv2-x { display: none; }
.widget.public-profile.pv2 .pv2-chips.pv2-all .pv2-chip.pv2-x { display: inline-block; }
.widget.public-profile.pv2 .pv2-chip.pv2-more { background: transparent; border-style: dashed; color: var(--pv2-gold-light); cursor: pointer; }

/* ---------------- services ---------------- */
.widget.public-profile.pv2 .widget.profile-read-more.pv2-services-host > .hidable,
.widget.public-profile.pv2 .widget.profile-read-more.pv2-services-host > .toggle-hideable-container {
    display: none !important;
}
.widget.public-profile.pv2 .pv2-svc-title { display: flex; align-items: center; gap: 10px; }
.widget.public-profile.pv2 .pv2-count {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--pv2-muted);
}
.widget.public-profile.pv2 .pv2-svc-search {
    width: 100%;
    height: 40px;
    border-radius: 10px !important;
    border: 1px solid var(--pv2-line2) !important;
    background: var(--pv2-input) !important;
    color: var(--pv2-text) !important;
    padding: 0 12px !important;
    margin: 0 0 10px !important;
    font: inherit;
    outline: none;
}
.widget.public-profile.pv2 .pv2-svc-search:focus { border-color: var(--pv2-gold-line) !important; }
.widget.public-profile.pv2 .pv2-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 767px) {
    .widget.public-profile.pv2 .pv2-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.widget.public-profile.pv2 .pv2-svc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--pv2-input);
    border: 1px solid var(--pv2-line);
    font-size: 13.5px;
    color: var(--pv2-label);
    min-width: 0;
}
.widget.public-profile.pv2 .pv2-svc svg { width: 14px; height: 14px; flex: none; color: var(--pv2-gold); }
.widget.public-profile.pv2 .pv2-svc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget.public-profile.pv2 .pv2-svc.pv2-x { display: none; }
.widget.public-profile.pv2 .pv2-svc-grid.pv2-all .pv2-svc.pv2-x,
.widget.public-profile.pv2 .pv2-svc-grid.pv2-searching .pv2-svc.pv2-x { display: flex; }
.widget.public-profile.pv2 .pv2-svc-grid .pv2-svc.pv2-miss { display: none !important; }

.widget.public-profile.pv2 .pv2-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--pv2-gold-light);
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
}
.widget.public-profile.pv2 .pv2-more-link svg { width: 15px; height: 15px; transition: transform .2s; }
.widget.public-profile.pv2 .pv2-more-link.pv2-open svg { transform: rotate(180deg); }

/* ---------------- About fold ---------------- */
.widget.public-profile.pv2 .widget.profile-read-more.pv2-fold:not(.pv2-fold-open) {
    max-height: 420px;
    overflow: hidden !important;
    position: relative;
    padding-bottom: 54px !important;
}
.widget.public-profile.pv2 .widget.profile-read-more.pv2-fold:not(.pv2-fold-open)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(transparent, var(--pv2-card) 70%);
    pointer-events: none;
}
.widget.public-profile.pv2 .widget.profile-read-more.pv2-fold .pv2-fold-btn {
    position: absolute;
    left: 20px;
    bottom: 16px;
    z-index: 2;
}
.widget.public-profile.pv2 .widget.profile-read-more.pv2-fold.pv2-fold-open .pv2-fold-btn { position: static; }

/* ---------------- rates ---------------- */
.widget.public-profile.pv2 .widget.profile-rates.pv2-done > .row-container { display: none !important; }
.widget.public-profile.pv2 .pv2-empty { display: none !important; }
.widget.public-profile.pv2 .pv2-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--pv2-input);
    margin-bottom: 10px;
}
.widget.public-profile.pv2 .pv2-tabs button {
    border: 0;
    background: none;
    padding: 7px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    color: var(--pv2-muted);
}
.widget.public-profile.pv2 .pv2-tabs button.pv2-on { background: var(--pv2-card2); color: var(--pv2-text); font-weight: 600; }
.widget.public-profile.pv2 .pv2-from { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; color: var(--pv2-muted); font-size: 13px; }
.widget.public-profile.pv2 .pv2-from b { color: var(--pv2-gold-light); font-size: 22px; font-weight: 600; }
.widget.public-profile.pv2 .pv2-rate {
    display: flex;
    justify-content: space-between;
    padding: 8px 2px;
    border-top: 1px solid var(--pv2-line);
    font-size: 14px;
}
.widget.public-profile.pv2 .pv2-rate:first-child { border-top: 0; }
.widget.public-profile.pv2 .pv2-rate span { color: var(--pv2-label); }
.widget.public-profile.pv2 .pv2-rate b { font-weight: 600; color: var(--pv2-text); }

/* ---------------- touring schedule: rows instead of a table ---------------- */
.widget.public-profile.pv2 .widget.profile-touring-locations table thead { display: none; }
.widget.public-profile.pv2 .widget.profile-touring-locations table,
.widget.public-profile.pv2 .widget.profile-touring-locations tbody,
.widget.public-profile.pv2 .widget.profile-touring-locations tr {
    display: block;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
}
.widget.public-profile.pv2 .widget.profile-touring-locations tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px 14px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--pv2-line) !important;
}
.widget.public-profile.pv2 .widget.profile-touring-locations tr:first-child { border-top: 0 !important; }
.widget.public-profile.pv2 .widget.profile-touring-locations td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pv2-muted);
    font-size: 13px;
}
.widget.public-profile.pv2 .widget.profile-touring-locations td:first-child a {
    color: var(--pv2-text) !important;
    font-weight: 600;
    font-size: 14.5px;
}
.widget.public-profile.pv2 .widget.profile-touring-locations td + td::before { content: "From "; color: var(--pv2-muted); }
.widget.public-profile.pv2 .widget.profile-touring-locations td + td + td::before { content: "To "; }
@media (max-width: 767px) {
    .widget.public-profile.pv2 .widget.profile-touring-locations tr { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Locations (2026-10-02): one page per advertiser, every place they work on it ----------------
   _MyLocations: base locations and tours, each with its "from" prices and its full rates behind a fold. A list card
   links to /escorts/{state}/{city}/{type}/{username}#loc-{suburb}; profile-v2.js marks that entry (.pl-target) and opens its rates. */
.widget.public-profile.pv2 .widget.profile-locations .pl-list { list-style: none; margin: 0; padding: 0; }
.widget.public-profile.pv2 .widget.profile-locations .pl-item {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--pv2-line);
    /* the sticky section nav would cover an entry scrolled to the top */
    scroll-margin-top: 120px;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-item:first-child { border-top: 0; }
.widget.public-profile.pv2 .widget.profile-locations .pl-item.pl-target {
    padding-left: 12px;
    box-shadow: inset 3px 0 0 var(--pv2-gold);
    background: linear-gradient(90deg, var(--pv2-gold-dim), transparent 80%);
    border-radius: 0 10px 10px 0;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.widget.public-profile.pv2 .widget.profile-locations .pl-place {
    color: var(--pv2-text) !important;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-place:hover { color: var(--pv2-gold-light) !important; }
.widget.public-profile.pv2 .widget.profile-locations .pl-kind {
    padding: 2px 9px;
    border: 1px solid var(--pv2-line2);
    border-radius: 999px;
    background: var(--pv2-card2);
    color: var(--pv2-label);
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-kind.pl-touring {
    border-color: var(--pv2-gold-line);
    background: var(--pv2-gold-dim);
    color: var(--pv2-gold-light);
}
.widget.public-profile.pv2 .widget.profile-locations .pl-shown { color: var(--pv2-ok); font-size: 12.5px; }
.widget.public-profile.pv2 .widget.profile-locations .pl-dates { margin-top: 5px; color: var(--pv2-label); font-size: 13.5px; }
.widget.public-profile.pv2 .widget.profile-locations .pl-from {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 6px;
    color: var(--pv2-muted);
    font-size: 13.5px;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-from b { color: var(--pv2-gold-light); font-weight: 600; }
.widget.public-profile.pv2 .widget.profile-locations .pl-from.pl-muted { font-style: italic; }
.widget.public-profile.pv2 .widget.profile-locations .pl-rates { margin-top: 8px; }
.widget.public-profile.pv2 .widget.profile-locations .pl-rates > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    color: var(--pv2-gold-light);
    font-size: 13.5px;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-rates > summary::-webkit-details-marker { display: none; }
.widget.public-profile.pv2 .widget.profile-locations .pl-rates > summary::before {
    content: "+";
    display: inline-block;
    width: 1em;
    font-weight: 700;
    text-align: center;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-rates[open] > summary::before { content: "\2212"; }
.widget.public-profile.pv2 .widget.profile-locations .pl-rtable {
    width: 100%;
    max-width: 440px;
    margin-top: 8px;
    border-collapse: collapse;
    background: transparent !important;
    font-size: 14px;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-rtable th,
.widget.public-profile.pv2 .widget.profile-locations .pl-rtable td {
    padding: 7px 8px;
    border: 0;
    border-top: 1px solid var(--pv2-line);
    background: transparent !important;
    text-align: left;
}
.widget.public-profile.pv2 .widget.profile-locations .pl-rtable thead th { border-top: 0; color: var(--pv2-muted); font-size: 12.5px; font-weight: 500; }
.widget.public-profile.pv2 .widget.profile-locations .pl-rtable tbody th { color: var(--pv2-label); font-weight: 400; }
.widget.public-profile.pv2 .widget.profile-locations .pl-rtable td { color: var(--pv2-text) !important; font-weight: 600; }

/* ---------------- "Our escorts" / "Also working at": the demo's 4-up cards ---------------- */
.widget.public-profile.pv2 .widget.our-escorts .list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 !important;
}
@media (max-width: 767px) {
    .widget.public-profile.pv2 .widget.our-escorts .list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.widget.public-profile.pv2 .widget.our-escorts .list a {
    width: auto !important;
    padding: 0 !important;
}
.widget.public-profile.pv2 .widget.our-escorts .list a .image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.widget.public-profile.pv2 .widget.our-escorts .list a .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------- availability: today highlighted ---------------- */
.widget.public-profile.pv2 .widget.profile-availability .row-container > .row:first-child {
    background: var(--pv2-gold-dim);
    border-radius: 8px;
}
/* 2026-10-03 (owner: "Available now - 1 minute ago" and "Now Touring - until 31 Oct" touched; Today / Available
   24hrs sat on the edges of its gold band - cramped on a computer, more so on a phone). The flags lose the global
   margin:0 (design-tokens .flag) and keep 8px apart; every row has inner side padding, so the days and hours line up
   inside the band and out of it; Today's band gets the gold line; the hours stay on one line. */
.widget.public-profile.pv2 .widget.profile-availability > .flag { margin: 0 8px 8px 0 !important; }
.widget.public-profile.pv2 .widget.profile-availability .row-container { margin-top: 6px; }
.widget.public-profile.pv2 .widget.profile-availability .row-container > .row {
    align-items: center;
    gap: 16px;
    padding: 11px 14px;
}
.widget.public-profile.pv2 .widget.profile-availability .row-container > .row:first-child {
    border: 1px solid var(--pv2-gold-line);
    border-radius: 10px;
    margin-bottom: 4px;
}
.widget.public-profile.pv2 .widget.profile-availability .row .column:last-child {
    text-align: right;
    white-space: nowrap;
}

/* ---------------- manage bar, notice ---------------- */
.widget.public-profile.pv2 .pv2-manage-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px;
    margin: 0 0 14px;
    border-radius: 14px;
    background: var(--pv2-card);
    border: 1px solid var(--pv2-gold-line);
    color: var(--pv2-text);
}
.widget.public-profile.pv2 .pv2-mb-title b { display: block; font-weight: 600; }
.widget.public-profile.pv2 .pv2-mb-title small { display: block; color: var(--pv2-muted); font-size: 12.5px; }
.widget.public-profile.pv2 .pv2-sp { flex: 1; }
.widget.public-profile.pv2 .pv2-loc-switch {
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--pv2-input);
    border: 1px solid var(--pv2-line2);
    color: var(--pv2-text);
    font: inherit;
    font-size: 14px;
    max-width: 100%;
}
.widget.public-profile.pv2 .pv2-notice {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: rgba(251, 191, 36, .08);
    border: 1px solid rgba(251, 191, 36, .35);
    color: #fde68a;
    font-size: 13.5px;
}
.widget.public-profile.pv2 .pv2-notice > svg { width: 18px; height: 18px; flex: none; color: var(--pv2-warn); }

/* ---------------- phone ---------------- */
@media (max-width: 1023px) {
    .widget.public-profile.pv2 .pv2-hero { grid-template-columns: minmax(0, 1fr); }
    .widget.public-profile.pv2 .pv2-cta { justify-content: flex-start; }
}
@media (max-width: 767px) {
    .widget.public-profile.pv2 .pv2-hero { padding: 16px; }
    .widget.public-profile.pv2 .pv2-name { font-size: 26px !important; }
    .widget.public-profile.pv2 .pv2-snav { top: 56px; }
    /* the fixed contact bar carries the buttons on a phone */
    .widget.public-profile.pv2:not(.pv2-manage) .pv2-cta { display: none; }
}

/* 2026-10-03 (owner: the breadcrumb sat against the menu with a wide gap under it - centre it between the two; then
   "the computer's is still not centred"). What the eye takes as the edge below is the profile's dark panel
   (.inner-public-profile, #0f0f14 on the black page), which starts right under the breadcrumb - on a computer the
   breadcrumb was 24px under the menu and 0px over the panel. Computer and tablet: 16px either side (header bottom ->
   breadcrumb -> panel; the tablet's header is 93px, the computer's 102px). Phone (the owner: centred, and the panel
   runs nearly edge to edge there): 12px under the menu, as before. */
.widget.public-profile .directory-breadcrumb.profile-breadcrumb { margin: 2px 0 16px; padding-top: 0; }
@media (max-width: 1023.98px) { .widget.public-profile .directory-breadcrumb.profile-breadcrumb { margin-top: -7px; } }
@media (max-width: 767px) { .widget.public-profile .directory-breadcrumb.profile-breadcrumb { margin: 17px 0 0; } }
/* 2026-10-07 (PageSpeed, CLS 0.34 on a phone): one line, whatever the font. In the fallback font the advertiser's name
   (the last item) wrapped to a second line on a 412px phone; when Outfit arrived after the first frame the breadcrumb
   went back to one line (49 -> 21px) and the whole profile moved up 28px. The name now shortens with an ellipsis
   instead of wrapping - the hero right below it shows it in full. */
.widget.public-profile .directory-breadcrumb.profile-breadcrumb .breadcrumb-list { flex-wrap: nowrap; overflow: hidden; }
.widget.public-profile .directory-breadcrumb.profile-breadcrumb .breadcrumb-list > li { flex: 0 0 auto; white-space: nowrap; }
.widget.public-profile .directory-breadcrumb.profile-breadcrumb .breadcrumb-list > li:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2026-10-06 (PageSpeed, profile phone LCP): the page's first layout - forced while profile-v2.js builds the hero, before
   the first frame - laid out every section of the profile, most of them a screen or more below the fold: about 0.65 s at
   pagespeed.web.dev's phone CPU (trace). The gallery and the main column's sections now skip layout and paint until they
   near the viewport; contain-intrinsic-size keeps the size each one last had. Lighthouse at PSI settings, three profile
   kinds x 3 rounds, twice: score up in 17 of 18 pairs, main thread 0.2-0.9 s less, CLS 0; the first layout 650 -> 490
   ms (trace). Section boxes, gallery loading, in-page links and the sticky contact column unchanged (cvcheck.js).
   .pv2-cv-off turns it off: a smooth scroll to a location (focusLocation) aimed at estimated positions that moved as
   the sections above were drawn - it landed 250-770 px off before this. */
.widget.public-profile:not(.pv2-cv-off) .widget.public-profile-gallery,
.widget.public-profile:not(.pv2-cv-off) .profile-columns > .main-column > .widget,
.widget.public-profile:not(.pv2-cv-off) .profile-columns > .main-column > .visible-mobile {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}
/* 2026-10-14 (owner: while the page loaded the main photo filled the screen, then shrank). On a desktop
   vip-profile-photos-layout.js (deferred) puts the main photo and the first two thumbnails in a 1.6fr : 1fr grid
   (vip-message-launch.css, itself added by a script). Until then the photo was the gallery column's full width - 728 x
   910 at 1370px - and then dropped to 454 x 568. Now, from the first paint and only where that grid will be built (a
   desktop, at least one thumbnail), the photo already has its grid width (its 4:5 is design-tokens'), the side column
   is two skeleton tiles, and the two thumbnails that will move there are held back. The grid replaces it all in place. */
@media (min-width: 901px) {
    .widget.public-profile .gallery-column:has(.public-profile-gallery .images > a):not(:has(.profile-photos-pc-grid)) > .main-image {
        position: relative;
        width: calc((100% - 10px) * 1.6 / 2.6);
    }
    .widget.public-profile .gallery-column:has(.public-profile-gallery .images > a):not(:has(.profile-photos-pc-grid)) > .main-image::after {
        content: "";
        position: absolute;
        top: 0;
        left: calc(100% + 10px);
        width: 62.5%;           /* 1fr : 1.6fr */
        aspect-ratio: 1 / 2;    /* two square-ish tiles as tall as the 4:5 photo */
        border-radius: var(--radius-sm, 8px);
        background: linear-gradient(to bottom,
            var(--bg-elevated, #1a1a22) 0 calc(50% - 5px),
            transparent calc(50% - 5px) calc(50% + 5px),
            var(--bg-elevated, #1a1a22) calc(50% + 5px) 100%);
        pointer-events: none;
    }
    .widget.public-profile .gallery-column:has(.public-profile-gallery .images > a):not(:has(.profile-photos-pc-grid)) .public-profile-gallery .images > a:nth-of-type(-n+2) {
        display: none;
    }
}
/* 2026-10-17 (owner, PageSpeed desktop): the photo grid's own rules, here as well as in vip-message-launch.css. main.js
   adds that stylesheet and vip-profile-photos-layout.js at the same time; when the script ran first, the grid was
   built with no rules - the two thumbnails stacked under the main photo - and moved beside it when the rules arrived:
   layout shift 0.096 in a third of Lighthouse's desktop runs. This file is in the page from the first paint, so the
   grid has its rules the moment it exists. Same selectors and declarations as there; the later copy changes nothing. */
@media (min-width: 901px) {
    .profile-photos-pc-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
        align-items: stretch;
    }
    .profile-photos-pc-grid > .profile-photos-pc-main {
        min-width: 0;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        position: relative;
    }
    .profile-photos-pc-grid > .profile-photos-pc-main > .main-image,
    .profile-photos-pc-grid > .profile-photos-pc-main > a {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
    }
    .profile-photos-pc-grid > .profile-photos-pc-main picture,
    .profile-photos-pc-grid > .profile-photos-pc-main .inner-container,
    .profile-photos-pc-grid > .profile-photos-pc-main .inner,
    .profile-photos-pc-grid > .profile-photos-pc-main .image {
        width: 100%; height: 100%;
    }
    .profile-photos-pc-grid > .profile-photos-pc-main img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
    }
    .profile-photos-pc-grid > .profile-photos-pc-side {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        min-height: 0;
    }
    .profile-photos-pc-grid > .profile-photos-pc-side > a {
        display: block;
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        min-height: 0;
    }
    .profile-photos-pc-grid > .profile-photos-pc-side > a > picture,
    .profile-photos-pc-grid > .profile-photos-pc-side > a > picture > img,
    .profile-photos-pc-grid > .profile-photos-pc-side > a > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}
/* 2026-10-14 (owner: the review dialog was covered). content-visibility:auto contains the section's paint, which makes
   the section the containing block of a position:fixed descendant: the review dialog (profile-reviews.js builds it
   inside the reviews section) came out as a 746x262 box under the section nav and the header instead of covering the
   screen. Off for the section holding the dialog while the dialog is open.
   The same containment clips paint at the section's edge: the "Also available in" list (a Semantic popup placed
   above its link) lost the part above the Location card. Off too while a popup in the section is showing. */
.widget.public-profile .profile-columns :is(.widget.public-profile-gallery, .main-column > .widget, .main-column > .visible-mobile):has(.profile-reviews-modal:not([hidden]), .ui.popup.visible, .ui.popup.animating) {
    content-visibility: visible !important;
}
/* 2026-10-14 (owner, batch 2): the side column reads Contact, Rates, Availability, then one card holding the photo vote
   and the report button. Order only - the four profile templates write the blocks as before, and the order holds from
   the first paint. Anything else in the column keeps its place after them; on the manage page each block sits in an
   .editable-section. Phones (under 1024px) get the same order for the copies in the main column. */
.widget.public-profile .profile-columns > .hidden-mobile > .contact-column {
    display: flex;
    flex-direction: column;
}
.widget.public-profile .contact-column > * { order: 10; }
.widget.public-profile .contact-column > :is(.widget.profile-contact-me, .editable-section:has(> .widget.profile-contact-me)) { order: 1; }
.widget.public-profile .contact-column > :is(.widget.profile-rates, .editable-section:has(> .widget.profile-rates)) { order: 2; }
.widget.public-profile .contact-column > :is(.widget.profile-rates-extras, .editable-section:has(> .widget.profile-rates-extras)) { order: 3; }
.widget.public-profile .contact-column > :is(.widget.profile-availability, .editable-section:has(> .widget.profile-availability)) { order: 4; }
.widget.public-profile .contact-column > .widget.real-or-fake { order: 5; }
.widget.public-profile .contact-column > .widget.report-user { order: 6; }
@media (max-width: 1023.98px) {
    .widget.public-profile .profile-columns > .main-column > .visible-mobile:has(> .widget.profile-availability) {
        display: flex;
        flex-direction: column;
    }
    .widget.public-profile .main-column > .visible-mobile:has(> .widget.profile-availability) > * { order: 10; }
    .widget.public-profile .main-column > .visible-mobile > .widget.profile-contact-me { order: 1; }
    .widget.public-profile .main-column > .visible-mobile > :is(a[name="rates"], .widget.profile-rates) { order: 2; }
    .widget.public-profile .main-column > .visible-mobile > .widget.profile-rates-extras { order: 3; }
    .widget.public-profile .main-column > .visible-mobile > :is(a[name="availability"], .widget.profile-availability) { order: 4; }
}
/* the vote and the report button as one card: the vote card opens at the bottom, the report block closes it */
.widget.public-profile .widget.real-or-fake:has(+ .widget.report-user) {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-bottom: 16px !important;
}
.widget.public-profile .widget.real-or-fake + .widget.report-user {
    background: var(--bg-card, #141419);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-top: 0;
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    padding: 0 20px 20px;
    margin: 0 0 var(--space-4, 16px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    /* its shadow only below and beside it, not over the vote above */
    clip-path: inset(0 -24px -24px -24px);
    text-align: center;
}
.widget.public-profile .widget.real-or-fake + .widget.report-user::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 0 16px;
    background: var(--border-color, rgba(255, 255, 255, 0.08));
}
/* 2026-10-14 (owner, batch 2): Quick facts in two groups, About and Looks (profile-v2.js buildFacts) */
.widget.public-profile.pv2 .pv2-fgroup + .pv2-fgroup { margin-top: 18px; }
.widget.public-profile.pv2 .pv2-fgroup-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pv2-gold-light) !important;
}
.widget.public-profile.pv2 .pv2-fgroup-title + .pv2-facts-long { margin-top: 0; }
/* 2026-10-14 (owner: one of "Location" and "Locations"): with the Locations section on the page the Location card is
   written without its heading and list (_MyLocation, MergedIntoLocations) - only its place, which the page header, the
   contact bar and the closing card read. Not shown. */
.widget.public-profile .widget.profile-location.pv2-loc-merged { display: none !important; }

/* ---------------- skeleton while main.js is on its way (2026-10-15, owner) ----------------
   On a profile main.js comes after the main photo (FirstWidgetPreload.LateMainScript, for the phone LCP), and every
   .widget stays at opacity 0 until main.js marks it .loaded - so a slow visit saw the hero and the main photo on an
   empty black page, then the header, the sidebar and the sections all at once. The widgets already hold their room
   (their sizes are in this stylesheet, applied from <head>), so each waiting widget now draws itself as a skeleton card
   in that room: its contents stay hidden, the card shows. Nothing moves when it loads (the same box), and the page's
   HTML is unchanged - what a search engine reads is the same text, in the same order.
   Only widgets that are cards on the page; the header gets its bar. Off when the visitor asks for less motion. */
.widget.public-profile.pv2 .widget:is(.profile-contact-me, .profile-rates, .profile-availability, .real-or-fake, .report-user,
    .public-profile-gallery, .profile-profile, .profile-read-more, .profile-location, .profile-contact-me-cta):not(.loaded):not(.pv2-loc-merged) {
    opacity: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pv2-card, #141419);
    box-shadow: inset 0 0 0 1px var(--pv2-line, rgba(255, 255, 255, .1));
}
.widget.public-profile.pv2 .widget:is(.profile-contact-me, .profile-rates, .profile-availability, .real-or-fake, .report-user,
    .public-profile-gallery, .profile-profile, .profile-read-more, .profile-location, .profile-contact-me-cta):not(.loaded) > * {
    visibility: hidden;
}
/* the sheen moves by transform, so the compositor draws it - no repaint every frame while the page is still loading */
.widget.public-profile.pv2 .widget:is(.profile-contact-me, .profile-rates, .profile-availability, .real-or-fake, .report-user,
    .public-profile-gallery, .profile-profile, .profile-read-more, .profile-location, .profile-contact-me-cta):not(.loaded):not(.pv2-loc-merged)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .045) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: pv2-skeleton 1.4s ease-in-out infinite;
    pointer-events: none;
}
/* the site header: its bar and bottom line, so the page has its frame before the menu and logo arrive */
body:has(.widget.public-profile.pv2-ready) .widget.header-new:not(.loaded) {
    opacity: 1;
    background: var(--bg-elevated, #121218);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
body:has(.widget.public-profile.pv2-ready) .widget.header-new:not(.loaded) > * {
    visibility: hidden;
}
@keyframes pv2-skeleton {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .widget.public-profile.pv2 .widget:not(.loaded)::after { animation: none; }
}