/* ------------------------------------------------------------------
   The public professional profile.

   It sits inside the ordinary public page, under the site's own header
   and above its footer, so every rule here is scoped to .pv-scope. The
   reset in particular must not escape: a bare `* { box-sizing }` would
   reach the site menu and footer and shift them.

   Every size and colour is taken from the design: card radius 12/14,
   hairline #E4E7EC, ink #101828, muted #667085, brand #1668E3.
   ------------------------------------------------------------------ */

.pv-scope,
.pv-scope *,
.pv-scope *::before,
.pv-scope *::after { box-sizing: border-box; }

.pv-scope {
    width: 100%;
    min-width: 0;
    background: #F4F6F9;
    color: #101828;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* The theme colours and underlines every link, so links here take the colour of
   what they sit in.

   The colour is set on the resting state only. Adding :hover here made it
   (0,2,1), which outranks the (0,2,0) of .pv-scope .pv-btn and every other
   control, so hovering a button repainted its label with the page ink — a white
   label on green turning near-black. Left off, the control keeps its own colour
   through every state and the theme still cannot reach it. */
.pv-scope a { color: inherit; }

.pv-scope a,
.pv-scope a:hover,
.pv-scope a:focus { text-decoration: none; }

.pv-scope img { max-width: 100%; }

.pv-scope p { margin: 0; }

/* ---------- the preview bar ---------- */
.pv-bar {
    background: #101828;
    color: #FFFFFF;
    padding: 11px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pv-bar-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.pv-bar-actions {
    display: flex;
    gap: 9px;
}

.pv-scope .pv-bar-btn {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 7px;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
}

.pv-scope .pv-bar-btn-primary {
    background: #FFFFFF;
    color: #101828;
    font-weight: 600;
}

/* ---------- the page ----------
   The width is stated on every level rather than left to the ancestors: this
   sits inside the site's own content column, and a parent that turns out to be
   a flex or grid container would otherwise shrink it to its content. */
.pv-page {
    width: 100%;
    min-width: 0;
    padding: 24px 32px 40px;
    display: flex;
    justify-content: center;
}

.pv-shell {
    width: 100%;
    min-width: 0;
    max-width: 1020px;
}

.pv-card {
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
}

.pv-pad { padding: 24px; }

.pv-pad-side { padding: 20px; }

.pv-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.pv-section-title-gap { margin-bottom: 16px; }

.pv-section-note {
    font-size: 12.5px;
    color: #667085;
    margin-bottom: 16px;
    margin-top: -6px;
}

.pv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pv-section-head .pv-section-title { margin-bottom: 0; }

.pv-section-head-gap { margin-bottom: 16px; }

.pv-scope .pv-section-link {
    font-size: 12.5px;
    color: #1668E3;
    cursor: pointer;
}

/* ---------- hero ---------- */
.pv-hero {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}

.pv-cover {
    height: 170px;
    background-color: #EDF0F4;
    background-size: cover;
    background-position: center;
}

/* no banner uploaded: the design drops to a shorter brand band */
.pv-cover-plain {
    height: 110px;
    background: #1668E3;
}

/* only the avatar climbs into the banner. Pulling the whole row up took the name
   and tagline with it, and over a dark cover photo they became unreadable. */
.pv-hero-row {
    padding: 0 28px 24px;
    display: flex;
    gap: 22px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.pv-avatar {
  width: 118px;
  height: 118px;
  margin-top: -46px;
  border-radius: 50%;
  border: 4px solid #FFFFFF;
  flex: none;
  object-fit: contain;
  background: #EAF2FE;
}

.pv-avatar-initials {
    background: #EAF2FE;
    color: #1668E3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 600;
}

.pv-hero-text {
    flex: 1;
    min-width: 0;
    padding-bottom: 4px;
}

.pv-hero-name-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.pv-hero-name {
    font-size: 24px;
    font-weight: 600;
}

.pv-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    background: #EAF2FE;
    color: #1668E3;
    font-size: 11.5px;
    font-weight: 600;
}

.pv-hero-title {
  font-size: 15px;
  color: #475467;
  margin-bottom: 2px;
}

.pv-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #475467;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* whether bookings are open reads as its own statement, so it sits on its own line */
.pv-hero-status {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.pv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pv-meta-item strong { font-weight: 600; }

.pv-star { color: #F79009; display: inline-flex; }

.pv-star-off { color: #D0D5DD; display: inline-flex; }

.pv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D0D5DD;
}

.pv-dot-on { background: #12A150; }

.pv-avail-on { color: #087443; }

.pv-avail-off { color: #667085; }

.pv-hero-actions {
    display: flex;
    gap: 9px;
    padding-bottom: 4px;
    flex-wrap: wrap;
}

.pv-scope .pv-btn {
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.pv-scope .pv-btn-whatsapp { background: #1DA851; }

/* the shared brand mark paints itself green, which is invisible on the green
   button, so it is forced white here */
.pv-btn-glyph { display: inline-flex; }

.pv-btn-glyph svg { fill: #FFFFFF; width: 17px; height: 17px; }

.pv-scope .pv-btn-book { background: #1668E3; }

.pv-scope .pv-btn-icon {
    width: 42px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    color: #344054;
    justify-content: center;
}

/* ---------- the figures under the name ---------- */
.pv-trust {
    padding: 0 28px 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pv-trust-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F7F8FA;
    border-radius: 8px;
}

.pv-trust-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: #1668E3;
}

.pv-trust-text {
    font-size: 12.5px;
    color: #475467;
}

.pv-trust-text strong {
    color: #1D2939;
    font-weight: 600;
}

/* ---------- the profile tabs ---------- */
.pv-tabs {
    border-top: 1px solid #EEF0F3;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pv-tabs-label {
    font-size: 12px;
    color: #98A2B3;
    padding-right: 4px;
}

.pv-scope .pv-tab {
    padding: 13px 4px;
    border-bottom: 2px solid transparent;
    color: #667085;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pv-scope .pv-tab-on {
    border-bottom-color: #1668E3;
    color: #1668E3;
    font-weight: 600;
}

/* ---------- the two columns ---------- */
.pv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.pv-main,
.pv-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pv-side { position: sticky; top: 16px; }

/* ---------- about ---------- */
.pv-about {
    font-size: 14px;
    line-height: 1.7;
    color: #475467;
}

.pv-about p { margin: 0 0 10px; }

.pv-about p:last-child { margin-bottom: 0; }

/* ---------- statistics ---------- */
.pv-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 12px;
    min-width: 0;
}

.pv-stat {
    border: 1px solid #E4E7EC;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.pv-stat-value {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 3px;
}

.pv-stat-label {
    font-size: 12px;
    color: #667085;
    margin-bottom: 6px;
}

.pv-stat-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #1668E3;
    background: #EAF2FE;
    padding: 2px 8px;
    border-radius: 20px;
}

.pv-stat-self {
    font-size: 10.5px;
    color: #98A2B3;
}

/* ---------- featured tournaments ---------- */
.pv-tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px;
    min-width: 0;
}

.pv-tour {
    border: 1px solid #E4E7EC;
    border-radius: 10px;
    padding: 15px;
}

.pv-tour-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.pv-tour-logo {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    border: 1px solid #E4E7EC;
    background: #F6F8FA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: #8A93A0;
    letter-spacing: .5px;
}

.pv-tour-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 3px;
}

.pv-tour-summary {
    font-size: 11.5px;
    color: #98A2B3;
    margin-bottom: 9px;
}

.pv-tour-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #087443;
}

.pv-tour-note svg { color: #1668E3; flex: none; }

/* ---------- services ---------- */
.pv-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 10px;
    min-width: 0;
}

.pv-service {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: #344054;
}

.pv-service-tick {
    color: #12A150;
    display: inline-flex;
    flex: none;
}

/* ---------- gallery ---------- */
/* auto-fill, not auto-fit: auto-fit drops the empty tracks and lets the few tiles
   that are there stretch to fill the row, so three photos came out three times the
   size of seven. The empty tracks keep every tile at the same ~84px square. */
.pv-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    min-width: 0;
}

.pv-scope .pv-gallery-tile {
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    border: 1px solid #E4E7EC;
    overflow: hidden;
    display: block;
    background: #F6F8FA;
    position: relative;
}

/* the plus that invites a click, exactly as the portfolio gallery does it */
.pv-scope .pv-gallery-tile::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: .3s;
}

.pv-scope .pv-gallery-tile:hover::after {
    opacity: 1;
}

.pv-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- reviews ---------- */
.pv-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pv-review-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pv-review-score strong { font-size: 15px; }

.pv-review-count {
    font-size: 12.5px;
    color: #667085;
}

.pv-review-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #087443;
    margin-bottom: 12px;
}

.pv-review-trust svg { color: #1668E3; flex: none; }

.pv-review-range {
    font-size: 12px;
    color: #98A2B3;
    margin-bottom: 12px;
}

.pv-review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pv-review {
    border-bottom: 1px solid #EEF0F3;
    padding-bottom: 12px;
}

.pv-review:last-child { border-bottom: none; padding-bottom: 0; }

.pv-review-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.pv-review-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F2F4F7;
    color: #475467;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex: none;
}

.pv-review-who {
    flex: 1;
    min-width: 0;
}

.pv-review-name {
    font-size: 13.5px;
    font-weight: 600;
}

.pv-review-meta {
    font-size: 11.5px;
    color: #98A2B3;
}

.pv-review-stars {
    display: flex;
    gap: 2px;
}

.pv-review-text {
    font-size: 13.5px;
    color: #475467;
    line-height: 1.6;
}

.pv-review-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.pv-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #E7F6EE;
    color: #087443;
    font-size: 10.5px;
    font-weight: 600;
}

.pv-review-org {
    font-size: 11px;
    color: #98A2B3;
}

.pv-review-reply {
    margin-top: 10px;
    padding: 11px 12px;
    background: #F9FAFB;
    border-left: 2px solid #1668E3;
    border-radius: 0 8px 8px 0;
    font-size: 12.5px;
    color: #475467;
    line-height: 1.55;
}

.pv-review-reply strong {
    color: #1D2939;
    font-weight: 600;
}

/* ---------- review paging ---------- */
.pv-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
}

.pv-scope .pv-pager-btn {
    height: 36px;
    padding: 0 13px;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 13px;
    color: #344054;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pv-scope .pv-pager-off {
    color: #B7C0CD;
    cursor: default;
}

.pv-pager-pages {
    display: flex;
    gap: 6px;
}

.pv-scope .pv-pagenum {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    color: #344054;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.pv-scope .pv-pagenum:hover { background: #F7F8FA; }

.pv-scope .pv-pagenum-on {
    background: #1668E3;
    border-color: #1668E3;
    color: #FFFFFF;
    font-weight: 600;
}

.pv-scope .pv-pagenum-on:hover { background: #1668E3; }

/* ---------- side rail ---------- */
.pv-side-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.pv-side-note {
    font-size: 12px;
    color: #667085;
    margin-bottom: 13px;
    margin-top: -8px;
}

.pv-charge-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 2px;
}

.pv-charge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    background: #F7F8FA;
    border-radius: 9px;
}

.pv-charge-label {
    font-size: 13px;
    color: #475467;
}

.pv-charge-value {
    font-size: 14.5px;
    font-weight: 600;
}

.pv-charge-note {
    font-size: 11.5px;
    color: #98A2B3;
    margin-top: 10px;
}

.pv-charge-info {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 12px;
    background: #FFFBF0;
    border: 1px solid #FEC84B;
    border-radius: 9px;
    font-size: 12px;
    color: #7A5B22;
    line-height: 1.55;
}

.pv-charge-info-icon {
    color: #DC6803;
    flex: none;
    margin-top: 1px;
    display: inline-flex;
}

.pv-package-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pv-package {
    border: 1px solid #E4E7EC;
    border-radius: 9px;
    padding: 12px;
}

.pv-package-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
}

.pv-package-includes {
    font-size: 11.5px;
    color: #667085;
    margin-bottom: 8px;
}

.pv-package-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pv-package-figure {
    font-size: 15px;
    font-weight: 600;
}

.pv-package-unit {
    font-size: 11px;
    color: #98A2B3;
}

.pv-side-avail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 12px;
}

.pv-side-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--pvx-ink);
  margin-bottom: 6px;
}

.pv-city-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pv-city {
  padding: 5px 10px;
  background: #F2F4F7;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}

.pv-side-foot {
    font-size: 11.5px;
    color: #98A2B3;
    margin-top: 10px;
}

.pv-follow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pv-follow-item {
    width: 38px;
    height: 38px;
    border: 1px solid #E4E7EC;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-follow-item svg { width: 18px; height: 18px; }

/* ---------- the small note the two inert buttons leave ---------- */
.pv-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    background: #101828;
    color: #FFFFFF;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 8px;
    z-index: 60;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
}

.pv-toast[hidden] { display: none !important; }

/* ---------- narrow screens ---------- */
@media (max-width: 991px) {
    .pv-grid { grid-template-columns: minmax(0, 1fr); }

    .pv-side { position: static; }

    .pv-page { padding: 20px 16px 32px; }

    .pv-hero-row { padding: 0 18px 20px; }

    .pv-trust { padding: 0 18px 16px; }

    .pv-tabs { padding: 0 18px; }
}

/* ---------- the profile is not open to the public yet ---------- */
.pv-empty {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.pv-empty-box {
    max-width: 460px;
    text-align: center;
}

.pv-empty-glyph { color: #B7C0CD; }

.pv-empty-title {
    margin: 16px 0 8px;
    font-size: 22px;
    font-weight: 600;
}

.pv-empty-note {
    margin: 0 0 22px;
    font-size: 14px;
    color: #667085;
    line-height: 1.65;
}

.pv-scope .pv-empty-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    background: #1668E3;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
}

/* ---------- the share sheet ----------
   Sits over the whole page, so unlike everything else here it is not inside
   .pv-scope and carries its own box sizing. */
.pv-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(16, 24, 40, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: #101828;
}

.pv-sheet-backdrop[hidden] { display: none !important; }

.pv-sheet-backdrop *,
.pv-sheet-backdrop *::before,
.pv-sheet-backdrop *::after { box-sizing: border-box; }

.pv-sheet-backdrop a { text-decoration: none; }

.pv-sheet {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .22);
}

.pv-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pv-sheet-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 3px;
}

.pv-sheet-note {
    font-size: 12.5px;
    color: #667085;
}

.pv-sheet-close {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #667085;
    cursor: pointer;
    padding: 0;
}

.pv-sheet-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 7px 7px 12px;
    border: 1px solid #E4E7EC;
    border-radius: 9px;
    margin-bottom: 16px;
}

.pv-sheet-link-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #667085;
}

.pv-sheet-link-url {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: #344054;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-sheet-copy {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 15px;
    border: none;
    border-radius: 7px;
    background: #1668E3;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.pv-sheet-targets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.pv-sheet-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 13px 6px;
    border: 1px solid #E4E7EC;
    border-radius: 10px;
    background: #FFFFFF;
    color: #475467;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.pv-sheet-target:hover {
    border-color: #D0D5DD;
    background: #FCFCFD;
}

.pv-sheet-target-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 21px;
}

.pv-sheet-target-icon svg { display: block; }

.pv-sheet-target-name {
    font-size: 11px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-sheet-qr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #E4E7EC;
    border-radius: 10px;
}

.pv-sheet-qr-img {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    object-fit: contain;
}

.pv-sheet-qr-body { min-width: 0; }

.pv-sheet-qr-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.pv-sheet-qr-note {
    font-size: 12px;
    color: #667085;
    line-height: 1.5;
    margin-bottom: 10px;
}

.pv-sheet-qr-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #344054;
}

@media (max-width: 480px) {
    .pv-sheet-targets { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- the rating breakdown ---------- */
.pv-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 12px;
    min-width: 0;
    padding: 14px;
    background: #F9FAFB;
    border-radius: 10px;
    margin-bottom: 16px;
}

.pv-breakdown-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.pv-breakdown-label {
    font-size: 12px;
    color: #475467;
}

.pv-breakdown-score {
    font-size: 12.5px;
    font-weight: 600;
}

.pv-breakdown-bar {
    height: 6px;
    border-radius: 4px;
    background: #EDF0F4;
    overflow: hidden;
}

.pv-breakdown-bar span {
    display: block;
    height: 100%;
    background: #F79009;
    border-radius: 4px;
}

.pv-scope .pv-review-write {
    height: 36px;
    padding: 0 13px;
    background: #FFFFFF;
    border: 1px solid #1668E3;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1668E3;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* ---------- also operates ---------- */
.pv-side-kicker {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #98A2B3;
    margin-bottom: 12px;
}

.pv-business {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.pv-business-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #EAF2FE;
    color: #1668E3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-business-text { min-width: 0; }

.pv-business-name {
    font-size: 14px;
    font-weight: 600;
}

.pv-business-type {
    font-size: 11.5px;
    color: #98A2B3;
}

.pv-business-tag {
    font-size: 12.5px;
    color: #667085;
    line-height: 1.55;
    margin-bottom: 13px;
}

.pv-scope .pv-business-btn {
    width: 100%;
    height: 38px;
    background: #FFFFFF;
    border: 1px solid #1668E3;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1668E3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* ---------- the review form ---------- */
.pv-sheet-centred { text-align: center; }

.pv-done-mark {
    display: inline-flex;
    color: #1668E3;
    transform: scale(2.4);
    margin: 14px 0 22px;
}

.pv-done-title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pv-done-note {
    font-size: 13.5px;
    color: #667085;
    line-height: 1.6;
    margin-bottom: 20px;
}

.pv-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #344054;
    margin-bottom: 7px;
}

.pv-required { color: #D92D20; }

.pv-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pv-star-btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    color: #D0D5DD;
    line-height: 1;
}

.pv-star-btn.pv-star-on { color: #F79009; }

.pv-stars-count {
    margin-left: 10px;
    font-size: 13px;
    color: #667085;
}

.pv-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 10px;
    margin: 16px 0;
}

.pv-score {
    border: 1px solid #E4E7EC;
    border-radius: 9px;
    padding: 11px 12px;
}

.pv-score-label {
    font-size: 12.5px;
    color: #475467;
    margin-bottom: 6px;
}

.pv-textarea,
.pv-input {
    width: 100%;
    border: 1px solid #D0D5DD;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #101828;
}

.pv-textarea {
    min-height: 96px;
    resize: vertical;
}

.pv-counter {
    text-align: right;
    font-size: 11.5px;
    color: #98A2B3;
    margin: 5px 0 14px;
}

.pv-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 12px;
}

.pv-field-error {
    display: block;
    min-height: 16px;
    font-size: 11.5px;
    color: #D92D20;
    margin-top: 4px;
}

.pv-sheet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.pv-sheet-btn {
    height: 40px;
    padding: 0 18px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 13.5px;
    font-weight: 500;
    color: #344054;
    font-family: inherit;
    cursor: pointer;
}

.pv-sheet-btn-primary {
    background: #1668E3;
    border-color: #1668E3;
    color: #FFFFFF;
    font-weight: 600;
}

.pv-sheet-btn[disabled] { opacity: .6; cursor: default; }

/* ---------- reviews, before there are any ---------- */
.pv-review-blank {
    border: 1px dashed #E4E7EC;
    border-radius: 10px;
    padding: 22px;
    text-align: center;
}

.pv-review-blank-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.pv-review-blank-note {
    font-size: 12.5px;
    color: #667085;
}

/* ---------- a button that is working ----------
   The label stays where it is and the spinner appears beside it, so the button
   does not change width or lose what it says. */
.pv-sheet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pv-btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: pv-spin .6s linear infinite;
}

.pv-btn-loading .pv-btn-spinner { display: inline-block; }

@keyframes pv-spin {
    to { transform: rotate(360deg); }
}

/* the pager is buttons now, not links, so it needs the chrome resetting and a
   disabled state of its own at each end of the range */
.pv-scope .pv-pager-btn,
.pv-scope .pv-pagenum {
    font-family: inherit;
    cursor: pointer;
}

.pv-scope .pv-pager-btn[disabled] {
    color: #B7C0CD;
    cursor: default;
}

.pv-scope .pv-pager-btn[disabled] svg { opacity: .5; }

/* ---------- the pricing rules ---------- */
.pv-terms {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #EEF0F3;
}

.pv-terms-title {
    font-size: 11px;
    font-weight: 600;
    color: #98A2B3;
    margin-bottom: 11px;
}

.pv-term {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 11px;
}

.pv-term:last-child { margin-bottom: 0; }

.pv-term-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #1668E3;
}

.pv-term-text { min-width: 0; }

.pv-term-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #344054;
}

.pv-term-value {
    display: block;
    font-size: 11.5px;
    color: #667085;
    line-height: 1.5;
    margin-top: 1px;
}

/* a button is a button in every state: bootstrap underlines an anchor on hover and
   focus, which was reaching the WhatsApp button because it is a link */
.pv-scope .pv-btn,
.pv-scope .pv-btn:hover,
.pv-scope .pv-btn:focus,
.pv-scope .pv-btn:active {
    text-decoration: none;
}

/* dragging a link paints a ghost of its text beside the cursor; the button is for
   pressing, not for dragging into another window */
.pv-scope .pv-btn,
.pv-scope .pv-btn span {
    -webkit-user-select: none;
    user-select: none;
}

/* the reviewer's name comes from their account and cannot be edited */
.pv-scope .pv-input[readonly] {
    background: #F9FAFB;
    color: #475467;
    cursor: default;
}

/* a reel in the gallery: dark tile, thumbnail if YouTube offers one, play badge */
.pv-scope .pv-gallery-video {
    background: #101828;
}

.pv-scope .pv-gallery-video::after {
    content: "";
}

.pv-scope .pv-gallery-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-scope .pv-gallery-play-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(16, 24, 40, .72);
    color: #FFFFFF;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
}

/* the business introduction reads as a short note, never a wall: four lines,
   then an ellipsis */
.pv-scope .pv-business-tag {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- the professionals community directory ---- */
/* the masthead and its search row hold the top of the window while the
   results scroll beneath them; the white band runs the full width, its
   contents kept to the same column as the body below */
.pv-scope .pc-hero {
    position: sticky;
    top: 0;
    /* above the cards that scroll under it, but below the site header (9) so the
       account menu hanging down from it is not painted over */
    z-index: 5;
    background: #FFFFFF;
    box-shadow: 0 1px 0 #E4E7EC;
}

.pv-scope .pc-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 16px 20px;
}

.pv-scope .pc-title {
    font-size: 28px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 6px;
}

.pv-scope .pc-sub {
    font-size: 14px;
    color: #667085;
    margin: 0 0 18px;
}

.pv-scope .pc-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* the box and its glass travel together on the controls row */
.pv-scope .pc-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 380px;
    min-width: 0;
}

.pv-scope .pc-search-icon {
    position: absolute;
    left: 14px;
    color: #98A2B3;
    pointer-events: none;
}

.pv-scope .pc-search {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 1px solid #D0D5DD;
    border-radius: 10px;
    padding: 0 14px 0 40px;
    font-size: 14px;
}

.pv-scope .pc-select {
    /* the theme stretches bare selects to the full line; these stay on the row */
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    min-width: 170px;
    height: 44px;
    border: 1px solid #D0D5DD;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    background: #FFFFFF;
    color: #344054;
}

.pv-scope .pc-body {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 16px 40px;
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

.pv-scope .pc-filters {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* the filters keep their place too, sitting just under the search band */
    position: sticky;
    top: calc(var(--pc-hero-h, 180px) + 18px);
    align-self: flex-start;
}

.pv-scope .pc-filters-title {
    font-size: 15px;
    font-weight: 700;
    color: #101828;
    margin-bottom: 10px;
}

.pv-scope .pc-filters-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #98A2B3;
    margin: 14px 0 8px;
}

.pv-scope .pc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #344054;
    margin: 0 0 8px;
    cursor: pointer;
}

.pv-scope .pc-check-count {
    margin-left: auto;
    color: #98A2B3;
    font-size: 12px;
}

.pv-scope .pc-promo {
    background: #F5FAFF;
    border-color: #CFE0FB;
}

.pv-scope .pc-promo-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #101828;
    margin-bottom: 6px;
}

.pv-scope .pc-promo-note {
    font-size: 13px;
    color: #475467;
    margin-bottom: 12px;
}

.pv-scope .pc-promo-btn {
    display: inline-flex;
    justify-content: center;
    background: #1668E3;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
}

.pv-scope .pc-results {
    flex: 1 1 auto;
    min-width: 0;
    /* the theme pads bare sections; this one starts level with the filters */
    padding: 0;
    margin: 0;
}

.pv-scope .pc-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #475467;
}

.pv-scope .pc-grid {
    display: grid;
    /* auto-fit, not auto-fill: with one result the card takes the whole row and
       with two they split it, rather than huddling at 280px beside empty space */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

/* the card sets its own display, which would outrank the browser hiding it,
   so filtering out a card has to say so here */
.pv-scope .pc-card[hidden] { display: none !important; }

.pv-scope .pc-card {
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pv-scope .pc-card-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pv-scope .pc-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #EAF1FD;
    color: #1668E3;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pv-scope .pc-name {
    font-size: 15.5px;
    font-weight: 700;
    color: #101828;
}

.pv-scope .pc-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #1668E3;
    color: #FFFFFF;
    font-size: 9px;
    vertical-align: middle;
    margin-left: 3px;
}

.pv-scope .pc-rating {
    font-size: 13px;
    color: #344054;
    font-weight: 600;
}

.pv-scope .pc-rating-none {
    color: #98A2B3;
    font-weight: 400;
}

.pv-scope .pc-star {
    color: #F79009;
}

.pv-scope .pc-reviews {
    color: #667085;
    font-weight: 400;
}

.pv-scope .pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pv-scope .pc-chip {
    background: #F2F4F7;
    border: 1px solid #E4E7EC;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    color: #344054;
}

.pv-scope .pc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: #667085;
}

.pv-scope .pc-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* a hairline parts what they do from what it costs */
    border-top: 1px solid #E4E7EC;
    padding-top: 12px;
}

.pv-scope .pc-price {
    font-size: 17px;
    font-weight: 700;
    color: #101828;
}

.pv-scope .pc-price-unit {
    /* what the price buys sits under the figure, not beside it */
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #667085;
}

.pv-scope .pc-price-ask {
    font-size: 13px;
    font-weight: 500;
    color: #667085;
}

.pv-scope .pc-avail {
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
}

.pv-scope .pc-avail-on {
    background: #ECFDF3;
    color: #027A48;
}

.pv-scope .pc-avail-off {
    background: #F2F4F7;
    color: #667085;
}

.pv-scope .pc-actions {
    display: flex;
    gap: 10px;
}

.pv-scope .pc-actions .pv-btn {
    flex: 1 1 0;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 13.5px;
    font-weight: 600;
}

.pv-scope .pc-view {
    border: 1px solid #D0D5DD;
    background: #FFFFFF;
    color: #344054;
}

.pv-scope .pc-wa {
    background: #22C05C;
    color: #FFFFFF;
}

.pv-scope .pc-foot {
    background: #1668E3;
    color: #FFFFFF;
    text-align: center;
    padding: 12px 16px;
    font-size: 13.5px;
}

.pv-scope .pc-foot a {
    color: #FFFFFF;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .pv-scope .pc-body {
        flex-direction: column;
    }

    .pv-scope .pc-filters {
        flex: 1 1 auto;
        width: 100%;
        position: static;
    }
}

/* the community masthead row: title left, the way home on the right */
.pv-scope .pc-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pv-scope .pc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #1668E3;
    background: #FFFFFF;
    color: #1668E3;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pv-scope .pc-back:hover {
    background: #F5FAFF;
}

/* the community page's small marks: glyphs on chips and filters, the pin and
   calendar in the meta row, the pulse dot in the pill, the promo badge */
.pv-scope .pc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pv-scope .pc-chip svg,
.pv-scope .pc-check-icon svg,
.pv-scope .pc-meta svg {
    flex: 0 0 auto;
    color: #667085;
    vertical-align: -1px;
}

.pv-scope .pc-check-icon {
    display: inline-flex;
    color: #667085;
}

.pv-scope .pc-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pv-scope .pc-avail-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #12B76A;
    margin-right: 5px;
    vertical-align: 1px;
}

.pv-scope .pc-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* the mark inherits the button text: white glyph, tight beside the label */
.pv-scope .pc-wa svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: block;
}

.pv-scope .pc-promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #1668E3;
    color: #FFFFFF;
    margin-bottom: 10px;
}

/* ---- the filters' header and its way out ---- */
.pv-scope .pc-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pv-scope .pc-filters-head .pc-filters-title {
    margin-bottom: 0;
}

.pv-scope .pc-clear-link {
    border: 0;
    background: none;
    padding: 0;
    color: #1668E3;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pv-scope .pc-clear-link:hover {
    text-decoration: underline;
}

.pv-scope .pc-clear-link[hidden] { display: none !important; }

/* ---- what stands where the results would be ---- */
.pv-scope .pc-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 240px;
    padding: 40px 24px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
}

/* the card sets its own display, which would outrank the browser hiding it */
.pv-scope .pc-blank[hidden] { display: none !important; }

.pv-scope .pc-blank-icon {
    color: #98A2B3;
    margin-bottom: 6px;
}

.pv-scope .pc-blank-title {
    font-size: 17px;
    font-weight: 700;
    color: #101828;
}

.pv-scope .pc-blank-note {
    font-size: 13.5px;
    color: #667085;
}

.pv-scope .pc-blank-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    background: #1668E3;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
}

.pv-scope .pc-blank-btn:hover {
    background: #1257BE;
    color: #FFFFFF;
}

/* ---- explore professionals ---- */
.pv-scope .pe-tabs {
    background: #FFFFFF;
    border-bottom: 1px solid #E4E7EC;
}

.pv-scope .pe-tabs-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: flex-end;
    gap: 22px;
}

.pv-scope .pe-tab {
    padding: 14px 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #475467;
    border-bottom: 2px solid transparent;
}

.pv-scope .pe-tab-on {
    color: #1668E3;
    border-bottom-color: #1668E3;
}

.pv-scope .pe-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 16px 48px;
}

.pv-scope .pe-intro {
    text-align: center;
    margin-bottom: 30px;
}

.pv-scope .pe-title {
    font-size: 32px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 8px;
}

.pv-scope .pe-sub {
    font-size: 15px;
    color: #667085;
    margin: 0;
}

.pv-scope .pe-title-left,
.pv-scope .pe-sub-left {
    text-align: left;
}

.pv-scope .pe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.pv-scope .pe-tile {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    padding: 20px;
    transition: box-shadow .2s, border-color .2s;
}

.pv-scope .pe-tile:hover {
    border-color: #B2CCF6;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
}

.pv-scope .pe-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #EAF1FD;
    color: #1668E3;
    flex: 0 0 auto;
}

.pv-scope .pe-tile-name {
    font-size: 17px;
    font-weight: 700;
    color: #101828;
    margin: 14px 0 6px;
}

.pv-scope .pe-tile-blurb {
    font-size: 13.5px;
    color: #667085;
    line-height: 1.45;
    flex: 1 1 auto;
}

.pv-scope .pe-tile-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #E4E7EC;
    margin-top: 16px;
    padding-top: 12px;
    font-size: 13px;
    color: #98A2B3;
}

.pv-scope .pe-tile-arrow {
    color: #1668E3;
    font-size: 16px;
}

.pv-scope .pe-register {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    margin-top: 36px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 16px;
    overflow: hidden;
}

.pv-scope .pe-register-main {
    padding: 32px;
}

.pv-scope .pe-badge {
    display: inline-block;
    background: #EAF1FD;
    color: #1668E3;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
}

.pv-scope .pe-register-title {
    font-size: 24px;
    font-weight: 700;
    color: #101828;
    margin: 14px 0 10px;
}

.pv-scope .pe-register-note {
    font-size: 14.5px;
    color: #667085;
    line-height: 1.55;
    margin: 0 0 16px;
}

.pv-scope .pe-points {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.pv-scope .pe-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #344054;
    margin-bottom: 8px;
}

.pv-scope .pe-points svg {
    color: #12B76A;
    flex: 0 0 auto;
}

.pv-scope .pe-register-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pv-scope .pe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.pv-scope .pe-btn-primary {
    background: #1668E3;
    color: #FFFFFF;
}

.pv-scope .pe-btn-light {
    background: #FFFFFF;
    color: #344054;
    border: 1px solid #D0D5DD;
}

.pv-scope .pe-btn-wa {
    background: #22C05C;
    color: #FFFFFF;
}

.pv-scope .pe-steps {
    background: #F9FAFB;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.pv-scope .pe-steps-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #667085;
}

.pv-scope .pe-step {
    display: flex;
    gap: 12px;
}

.pv-scope .pe-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1668E3;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pv-scope .pe-step-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #101828;
}

.pv-scope .pe-step-note {
    font-size: 13px;
    color: #667085;
}

.pv-scope .pe-head {
    background: #FFFFFF;
    border-bottom: 1px solid #E4E7EC;
}

.pv-scope .pe-head-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 16px 22px;
}

.pv-scope .pe-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
}

.pv-scope .pe-head-text {
    min-width: 0;
}

.pv-scope .pe-back {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    color: #1668E3;
    white-space: nowrap;
}

.pv-scope .pe-role {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

@media (max-width: 575px) {
    .pv-scope .pe-head-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .pv-scope .pe-back {
        order: -1;
    }
}

.pv-scope .pe-role-name {
    font-size: 26px;
    font-weight: 700;
    color: #101828;
    margin: 0;
}

.pv-scope .pe-role-blurb {
    font-size: 14px;
    color: #667085;
}

.pv-scope .pe-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pv-scope .pe-wrap-list {
    padding-top: 24px;
}

/*full-width banner: icon, pitch, then the button pushed to the right*/
.pv-scope .pe-promo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #F5FAFF 0%, #EAF1FD 100%);
    border-color: #CFE0FB;
    border-radius: 14px;
}

.pv-scope .pe-promo .pc-promo-badge {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: 0;
    box-shadow: 0 4px 10px rgba(22, 104, 227, 0.25);
}

.pv-scope .pe-promo .pc-promo-badge svg {
    width: 20px;
    height: 20px;
}

.pv-scope .pe-promo-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pv-scope .pe-promo .pc-promo-title {
    font-size: 16px;
    margin-bottom: 4px;
}

.pv-scope .pe-promo .pc-promo-note {
    font-size: 13.5px;
    margin-bottom: 0;
}

.pv-scope .pe-promo .pc-promo-btn {
    flex: 0 0 auto;
    align-items: center;
    padding: 10px 20px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.pv-scope .pe-promo .pc-promo-btn:hover,
.pv-scope .pe-promo .pc-promo-btn:focus-visible {
    background: #1257C0;
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .pv-scope .pe-promo {
        flex-wrap: wrap;
        padding: 18px;
    }

    .pv-scope .pe-promo-text {
        flex-basis: calc(100% - 60px);
    }

    .pv-scope .pe-promo .pc-promo-btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .pv-scope .pe-promo {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pv-scope .pe-promo-text {
        flex-basis: auto;
    }
}

.pv-scope .pe-count {
    font-size: 14px;
    color: #475467;
    margin-bottom: 14px;
}

.pv-scope .pe-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pv-scope .pe-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    padding: 18px 20px;
}

/* the row sets its own display, which would outrank the browser hiding it */
.pv-scope .pe-row[hidden] { display: none !important; }

.pv-scope .pe-avatar {
    width: 52px;
    height: 52px;
}

.pv-scope .pe-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.pv-scope .pe-row-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #101828;
}

.pv-scope .pe-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    font-size: 13px;
    color: #667085;
}

.pv-scope .pe-row-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pv-scope .pe-row-also {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.pv-scope .pe-row-price {
    text-align: right;
    flex: 0 0 auto;
}

.pv-scope .pe-row-unit {
    font-size: 12px;
    color: #667085;
}

.pv-scope .pe-row-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

@media (max-width: 860px) {
    .pv-scope .pe-register {
        grid-template-columns: 1fr;
    }

    .pv-scope .pe-row {
        flex-wrap: wrap;
    }

    .pv-scope .pe-row-price {
        text-align: left;
    }

    .pv-scope .pe-row-actions {
        width: 100%;
    }

    .pv-scope .pe-row-actions .pe-btn {
        flex: 1 1 0;
    }
}

/* ---- explore list: tools, featured, hearts, empty state, map ---- */
.pv-scope .pe-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pv-scope .pe-list-head .pe-count {
    margin-bottom: 0;
}

.pv-scope .pe-list-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pv-scope .pe-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #D0D5DD;
    background: #FFFFFF;
    color: #344054;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.pv-scope .pe-save-on {
    background: #ECFDF3;
    border-color: #ABEFC6;
    color: #027A48;
}









.pv-scope .pe-row-actions {
    align-items: center;
}

.pv-scope .pe-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #D0D5DD;
    background: #FFFFFF;
    color: #667085;
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 auto;
}

.pv-scope .pe-heart-on {
    color: #F04438;
    border-color: #FECDCA;
    background: #FEF3F2;
}

.pv-scope .pe-heart-on svg path {
    fill: currentColor;
}

.pv-scope .pe-btn-wa {
    gap: 7px;
}

.pv-scope .pe-wa-mark {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.pv-scope .pe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px dashed #D0D5DD;
    border-radius: 14px;
    padding: 44px 24px;
    margin-top: 12px;
}

/* the empty state sets its own display, which would outrank the browser hiding it */
.pv-scope .pe-empty[hidden],
.pv-scope #pe-list-view[hidden] { display: none !important; }

.pv-scope .pe-empty-icon {
    color: #98A2B3;
    margin-bottom: 8px;
}

.pv-scope .pe-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: #101828;
}

.pv-scope .pe-empty-note {
    font-size: 13.5px;
    color: #667085;
    margin-bottom: 12px;
}








/* ---- explore list: compare the shortlist ---- */
.pv-scope .pe-compare {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #1668E3;
    background: #FFFFFF;
    color: #1668E3;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.pv-scope .pe-compare svg path {
    fill: currentColor;
}

.pv-scope .pe-compare[hidden] { display: none !important; }

.pv-scope .pe-compare-sheet {
    max-width: 900px;
}

.pv-scope .pe-compare-scroll {
    overflow-x: auto;
    margin-top: 14px;
}

.pv-scope .pe-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.pv-scope .pe-compare-table th,
.pv-scope .pe-compare-table td {
    border-bottom: 1px solid #E4E7EC;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    color: #344054;
    min-width: 170px;
}

.pv-scope .pe-compare-table .pe-compare-label {
    min-width: 110px;
    color: #667085;
    font-weight: 600;
}

.pv-scope .pe-compare-person {
    text-align: center;
}

.pv-scope .pe-compare-avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
}

.pv-scope .pe-compare-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #101828;
}

.pv-scope .pe-compare-actions {
    border-bottom: 0 !important;
}

.pv-scope .pe-compare-actions .pe-btn {
    margin: 0 6px 6px 0;
    padding: 8px 12px;
    font-size: 13px;
}

/* ---- explore list: the map, above the same list ---- */
.pv-scope .pe-toggle {
    display: inline-flex;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    overflow: hidden;
}

.pv-scope .pe-toggle-btn {
    border: 0;
    background: #FFFFFF;
    color: #475467;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.pv-scope .pe-toggle-on {
    background: #1668E3;
    color: #FFFFFF;
}