/* Phones: the cover photo fills the top of the screen, edge to edge. The header floats over it
     (back arrow, logo and menu in see-through grey circles) and turns into the cream bar once you
     scroll, like the homepage. */
  .lp-back { display: none; }
  /* desktop: the listing name stays on one line; long names are scaled down to fit (see lpFitTitle) */
  @media (min-width: 1025px) {
    .title-block:not(.tb-in-about) h1#pName { max-width: none; white-space: nowrap; }
    .title-block:not(.tb-in-about) h1#pName br { display: none; }
    .title-block:not(.tb-in-about) h1#pName.lp-fit-wrap { white-space: normal; }
  }
  @media (max-width: 640px) {
    html.lp-imm .announcement, html.lp-imm main .breadcrumb { display: none !important; }
    html.lp-imm body > header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent !important; border-bottom: 1px solid transparent !important;
      -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
    html.lp-imm body > header.scrolled { background: rgba(242, 235, 221, .97) !important; border-bottom-color: var(--line, rgba(28,24,16,.12)) !important; box-shadow: 0 8px 24px -18px rgba(28,24,16,.5); }
    html.lp-imm.sg-dark body > header.scrolled { background: rgba(28, 24, 16, .97) !important; }
    html.lp-imm body > header .nav { position: relative; min-height: 64px; }
    html.lp-imm body > header .nav-cta .btn-cedar, html.lp-imm body > header .sg-auth-slot { display: none !important; }
    /* the three floating buttons */
    html.lp-imm .lp-back { display: grid; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
    html.lp-imm .lp-back, html.lp-imm body > header .logo, html.lp-imm body > header #navToggle {
      width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; place-items: center; color: #FBF7EE;
      background: rgba(40, 36, 32, .38) !important; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; transition: background .3s ease, color .3s ease, box-shadow .3s ease; cursor: pointer; }
    html.lp-imm body > header .logo { display: grid; }
    html.lp-imm body > header .logo-mark, html.lp-imm body > header .logo-mark img { width: 24px !important; height: 24px !important; }
    html.lp-imm body > header .logo-mark img { object-fit: contain; filter: brightness(0) invert(1); transition: filter .3s ease; }
    html.lp-imm body > header #navToggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
    html.lp-imm body > header #navToggle .nav-toggle-bar { width: 18px; margin: 0; background: #FBF7EE; }
    html.lp-imm .lp-back svg { width: 20px; height: 20px; }
    html.lp-imm body > header .sg-ev-btn { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
    /* scrolled: plain bar, dark icons */
    /* at the top: no circles, just soft white icons over the photo (a little faded) */
    html.lp-imm body > header:not(.scrolled) .lp-back, html.lp-imm body > header:not(.scrolled) .logo, html.lp-imm body > header:not(.scrolled) #navToggle {
      background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
      opacity: .55; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); transition: opacity .25s ease; }
    html.lp-imm body > header:not(.scrolled) .lp-back:hover, html.lp-imm body > header:not(.scrolled) .logo:hover, html.lp-imm body > header:not(.scrolled) #navToggle:hover { opacity: 1; }
    html.lp-imm body > header:not(.scrolled) .lp-back svg { width: 24px; height: 24px; }
    html.lp-imm body > header:not(.scrolled) .logo-mark, html.lp-imm body > header:not(.scrolled) .logo-mark img { width: 30px !important; height: 30px !important; }
    html.lp-imm body > header:not(.scrolled) #navToggle .nav-toggle-bar { width: 22px; height: 2px; }
    html.lp-imm body > header.scrolled .lp-back, html.lp-imm body > header.scrolled .logo, html.lp-imm body > header.scrolled #navToggle { opacity: 1; filter: none; }
    /* scrolled bar: a bigger back arrow and logo */
    /* scrolled bar: back arrow, logo, sun/moon and menu all the same size (44px buttons, 26px icons) */
    html.lp-imm body > header.scrolled .lp-back, html.lp-imm body > header.scrolled .logo, html.lp-imm body > header.scrolled #navToggle,
    html.lp-imm body > header.scrolled .sg-ev-btn { width: 44px !important; height: 44px !important; min-width: 0; padding: 0 !important; display: grid !important; place-items: center; border-radius: 50%; }
    html.lp-imm body > header.scrolled .lp-back svg { width: 26px; height: 26px; stroke-width: 2.3; }
    html.lp-imm body > header.scrolled .logo-mark, html.lp-imm body > header.scrolled .logo-mark img { width: 30px !important; height: 30px !important; }
    html.lp-imm body > header.scrolled #navToggle { display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
    html.lp-imm body > header.scrolled #navToggle .nav-toggle-bar { width: 24px; height: 2.2px; margin: 0; }
    html.lp-imm body > header.scrolled .sg-ev-btn svg { width: 22px !important; height: 22px !important; }
    html.lp-imm body > header.scrolled .lp-back, html.lp-imm body > header.scrolled .logo, html.lp-imm body > header.scrolled #navToggle { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
    html.lp-imm body > header.scrolled .logo-mark img { filter: none; }
    html.lp-imm.sg-dark body > header.scrolled .logo-mark img { filter: brightness(0) invert(1); }
    html.lp-imm body > header.scrolled #navToggle .nav-toggle-bar { background: var(--ink); }
    html.lp-imm body > header.scrolled .sg-ev-btn { opacity: 1; visibility: visible; }
    html.lp-imm .lp-back:focus-visible, html.lp-imm body > header .logo:focus-visible, html.lp-imm body > header #navToggle:focus-visible { outline: 2px solid #E9C98F; outline-offset: 2px; }
    /* the photo: full width, from the very top, a little over half the screen */
    html.lp-imm main > .wrap > .m-cover.mc-immersive { width: 100vw; margin: 0 0 0 calc(50% - 50vw); border-radius: 0; box-shadow: none; }
    html.lp-imm .m-cover.mc-immersive .m-cover-img { aspect-ratio: auto; height: max(62svh, 420px); }
    html.lp-imm .m-cover.mc-immersive .m-cover-img::after { background: linear-gradient(to bottom, rgba(20,16,10,.42) 0%, rgba(20,16,10,0) 20%, rgba(20,16,10,0) 40%, rgba(20,16,10,.55) 66%, rgba(20,16,10,.9) 100%); }
    html.lp-imm .m-cover.mc-immersive .mc-bars { top: calc(env(safe-area-inset-top, 0px) + 70px); left: 16px; right: 16px; }
    html.lp-imm .m-cover.mc-immersive > .title-actions { top: calc(env(safe-area-inset-top, 0px) + 84px); right: 16px; }
    html.lp-imm .m-cover.mc-immersive > .title-actions .icon-btn { background: rgba(40,36,32,.38) !important; color: #FBF7EE !important; border: 0 !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
    html.lp-imm .m-cover.mc-immersive .m-cover-row { padding: 0 20px 22px; }
  }
  /* phones: the listing's name sits large and centred on the cover, its category in spaced capitals
     underneath; the About box slides up over the bottom of the photo like a card */
  .lp-cover-title { display: none; }
  /* verified: just the check badge next to the name, no "Verified" pill */
  #pVerified { display: none !important; }
  /* ===== About box, idea A: heading → @username · languages → (phones) location & reviews pills → "Hosted by" strip → description ===== */
  #aboutSection > .lp-idline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; font-size: 14px; color: var(--muted, #6F6552); }
  #aboutSection > .lp-idline > * { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  #aboutSection > .lp-idline .practitioner-sub { font-size: 13.5px; color: var(--muted, #6F6552); }
  #aboutSection > .lp-idline .practitioner-handle { font-size: 14.5px; font-weight: 600; }
  #aboutSection > .lp-idline .practitioner-sub::before { content: "·"; margin-right: 10px; color: var(--line-strong, rgba(28,24,16,.3)); }
  #aboutSection > .lp-idline .practitioner-handle:empty + .practitioner-sub::before, #aboutSection > .lp-idline .practitioner-handle[style*="none"] + .practitioner-sub::before { content: none; }
  #aboutSection > .lp-host { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 10px 16px 10px 10px; border-radius: 18px; border: 1px solid var(--line, rgba(28,24,16,.14)); background: #FFFDF8; width: max-content; max-width: 100%; }
  html.sg-dark #aboutSection > .lp-host { background: #231C14; }
  #aboutSection > .lp-host .lp-faces { display: inline-flex; flex: none; }
  #aboutSection > .lp-host .lp-face { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-left: -10px; border: 2px solid var(--paper, #FAF6EC); background: center / cover no-repeat;
    font: 500 12.5px/1 var(--display); color: #FBF7EE; }
  #aboutSection > .lp-host .lp-face:first-child { margin-left: 0; }
  #aboutSection > .lp-host p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft, #3A3326); }
  #aboutSection > .lp-host p b { color: var(--ink); font-weight: 700; }
  #aboutSection > .lp-host a { margin-left: 6px; font: 700 13px var(--sans); color: var(--cedar, #8A5A37); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
  #aboutSection > .lp-idline ~ #pAboutText { margin-top: 20px !important; }
  /* the profile block is now empty apart from the photo (which floats on the edge): no gap, no line */
  #aboutSection > .about-profile.lp-empty { margin: 0 !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; height: 0; }
  #aboutSection > .about-profile.lp-empty::after, #aboutSection > .about-profile.lp-empty::before { display: none !important; }
  #aboutSection > .about-profile.lp-empty .practitioner-block { margin: 0 !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; }
  #aboutSection > .lp-host .lp-face { margin-left: -7px; font-size: 11.5px; letter-spacing: -.02em; }
  #aboutSection > .lp-host .lp-face:first-child { margin-left: 0; }
  @media (max-width: 640px) {
    #aboutSection > .lp-host { width: 100%; }
    /* location / reviews / rank as soft pills */
    #aboutSection > .title-block.tb-in-about { margin-top: 14px !important; }
    #aboutSection > .title-block.tb-in-about .title-meta { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
    #aboutSection > .title-block.tb-in-about .title-meta .dot { display: none !important; }
    #aboutSection > .title-block.tb-in-about .title-meta .rs-rating::before, #aboutSection > .title-block.tb-in-about .title-meta .rs-rank::before, #aboutSection > .title-block.tb-in-about .title-meta .rs-rating::after, #aboutSection > .title-block.tb-in-about .title-meta .rs-rank::after { content: none !important; display: none !important; }
    #aboutSection > .title-block.tb-in-about .title-meta .rank-strip { display: contents !important; }
    #aboutSection > .title-block.tb-in-about .title-meta .hero-loc, #aboutSection > .title-block.tb-in-about .title-meta .rs-rating, #aboutSection > .title-block.tb-in-about .title-meta .rs-rank {
      display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 7px 12px !important; border-radius: 999px; background: #F1E9DA; font-size: 13px !important; font-weight: 600; color: var(--ink-soft) !important; border: 0 !important; }
    html.sg-dark #aboutSection > .title-block.tb-in-about .title-meta .hero-loc, html.sg-dark #aboutSection > .title-block.tb-in-about .title-meta .rs-rating, html.sg-dark #aboutSection > .title-block.tb-in-about .title-meta .rs-rank { background: #2E261C; color: #E9DFCC !important; }
    #aboutSection > .title-block.tb-in-about .title-meta .tl-item { padding: 7px 12px 7px 10px; border: 0; background: #F1E9DA; font-size: 13px; font-weight: 600; color: var(--ink-soft); gap: 6px; }
    #aboutSection > .title-block.tb-in-about .title-meta .tl-item svg { width: 15px; height: 15px; }
    #aboutSection > .title-block.tb-in-about .title-meta .tl-item small { font-weight: 500; }
    html.sg-dark #aboutSection > .title-block.tb-in-about .title-meta .tl-item { background: #2E261C; color: #E9DFCC; }
  }
  .name-row.lp-dup-name > h1 { display: none !important; }
  .name-row.lp-dup-name { margin: 0 !important; min-height: 0 !important; }
  #pAboutTitle > .claim-pill.lp-claim-about { vertical-align: middle; margin-left: 0; position: relative; top: -4px; font: 800 10.5px/1 var(--sans); letter-spacing: .1em; white-space: nowrap; }
  @media (max-width: 640px) {
    html.lp-imm .m-cover.mc-immersive .m-cover-row { display: none !important; }
    html.lp-imm .m-cover.mc-immersive .mc-count { display: none; }
    /* gallery indicator: dots + "2 / 5" in a frosted pill, bottom-right of the photo, just above the box */
    html.lp-imm .lp-gal { position: absolute; right: 16px; bottom: 64px; z-index: 20; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 11px; border-radius: 999px;
      background: rgba(40,36,32,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #FBF7EE; }
    html.lp-imm .lp-gal .mc-dots { position: static !important; display: flex !important; gap: 5px !important; left: auto; right: auto; bottom: auto; }
    /* each photo as a little round thumbnail; the one showing gets a gold ring */
    html.lp-imm .lp-gal { padding: 5px 12px 5px 6px; gap: 9px; }
    html.lp-imm .lp-gal .mc-dots { gap: 0 !important; }
    html.lp-imm .lp-gal .mc-dots button { width: 26px !important; height: 26px !important; margin-left: -6px; border-radius: 50% !important; background: #3E352B center / cover no-repeat !important;
      background-image: var(--th) !important; box-shadow: 0 0 0 2px rgba(40,36,32,.85) !important; opacity: .72; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease !important; }
    html.lp-imm .lp-gal .mc-dots button:first-child { margin-left: 0; }
    html.lp-imm .lp-gal .mc-dots button.on { width: 26px !important; opacity: 1; transform: scale(1.12); z-index: 1; box-shadow: 0 0 0 2px #E9C98F, 0 0 0 4px rgba(40,36,32,.85) !important; }
    html.lp-imm .lp-gal .mc-dots button:nth-child(n+6) { display: none; }
    html.lp-imm .lp-gal .mc-count { display: inline-flex !important; position: static !important; align-items: center; gap: 5px; padding: 0; background: none !important; font: 600 12px/1 var(--sans); color: #FBF7EE; letter-spacing: .02em; }
    html.lp-imm .lp-gal .mc-count svg { width: 13px; height: 13px; opacity: .9; }

    html.lp-imm .lp-cover-title { display: flex; position: absolute; z-index: 2; left: 24px; right: 24px; top: 64px; bottom: 120px; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; color: #FBF7EE; pointer-events: none; }
    html.lp-imm .lp-cover-title b { display: block; font: 400 clamp(34px, 11vw, 46px)/1.02 var(--display); letter-spacing: -.015em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.35);
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    html.lp-imm .lp-cover-title b i { display: inline-grid; place-items: center; width: .4em; height: .4em; margin-left: .2em; vertical-align: .1em; border-radius: 50%; background: #4A5D4F; box-shadow: 0 0 0 2px rgba(251,247,238,.85); }
    html.lp-imm .lp-cover-title b i svg { width: 62%; height: 62%; }
    html.lp-imm .lp-cover-title span { display: block; margin-top: 16px; font: 600 11.5px/1.4 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: rgba(251,247,238,.9); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
    html.lp-imm .m-cover.mc-immersive .m-cover-img::after { background:
      linear-gradient(to bottom, rgba(24,18,12,.42) 0%, rgba(24,18,12,0) 22%, rgba(24,18,12,0) 62%, rgba(24,18,12,.45) 100%) !important; }
    html.lp-imm main .main-grid { position: relative; z-index: 3; margin-top: -132px !important; pointer-events: none; }
    html.lp-imm main .main-grid > :not(.col-main), html.lp-imm main .main-grid > .col-main > * { pointer-events: auto; }
    html.lp-imm main .main-grid > .col-main { pointer-events: none; }
    html.lp-imm .lp-cover-title { display: none !important; }   /* the photo speaks for itself: no name over it */
    html.lp-imm #aboutSection { box-shadow: 0 -18px 40px -26px rgba(0,0,0,.55) !important;
      width: 100vw; max-width: none; box-sizing: border-box; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important;
      border-left: 0 !important; border-right: 0 !important; border-radius: 30px 30px 30px 30px !important; padding-left: 22px !important; padding-right: 22px !important; }
    html.lp-imm #aboutSection > .title-actions.lp-in-about { right: 18px; }
    /* every box on the page goes edge to edge, like the About box */
    html.lp-imm main .col-main > section:not(#aboutSection), html.lp-imm main .main-grid > aside > section, html.lp-imm main .main-grid > .col-side > section {
      width: 100vw; max-width: none; box-sizing: border-box; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important;
      border-left: 0 !important; border-right: 0 !important; border-radius: 30px !important; padding-left: 22px !important; padding-right: 22px !important; }
  }
  @media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    html.lp-imm .lp-cover-title { animation: lpTitleIn .7s cubic-bezier(.2,.7,.2,1) both .1s; }
    @keyframes lpTitleIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  }
  /* phones: share / save / report sit in the About box's top corner, next to the profile photo */
  @media (max-width: 640px) {
    html.lp-imm #aboutSection > .title-actions.lp-in-about { position: absolute; top: 16px; right: 16px; left: auto; bottom: auto; z-index: 4; display: flex; gap: 6px; margin: 0; }
    html.lp-imm #aboutSection > .title-actions.lp-in-about .icon-btn { width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%;
      background: var(--paper, #FAF6EC) !important; color: var(--ink) !important; border: 1px solid var(--line, rgba(28,24,16,.14)) !important; box-shadow: 0 6px 14px -10px rgba(28,24,16,.5) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.lp-imm #aboutSection > .title-actions.lp-in-about .icon-btn svg { width: 14px; height: 14px; }
    html.lp-imm #aboutSection > .title-actions.lp-in-about .icon-btn-report { color: #B4432B !important; }
    html.lp-imm #aboutSection > .title-actions.lp-in-about .icon-btn.saved { color: var(--cedar, #8A5A37) !important; border-color: var(--cedar, #8A5A37) !important; }
    html.lp-imm.sg-dark #aboutSection > .title-actions.lp-in-about .icon-btn { background: #231C14 !important; }
  }
  @media (max-width: 640px) and (prefers-reduced-motion: reduce) { html.lp-imm body > header, html.lp-imm body > header * { transition: none !important; } }

  /* About panel: rounder corners, and its top edge curves around the profile photo */
  #aboutSection:has(.about-profile .practitioner-avatar) { border-radius: 30px !important; }
  #aboutSection .about-profile .practitioner-avatar .lp-notch { display: none; }
  /* the box's top edge rises in a smooth arch around the photo (a half-circle in the box's own colour and outline) */
  .lp-notch { position: absolute; z-index: -2; left: 50%; top: 50%; width: calc(100% + 26px); height: calc(100% + 26px); transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--lp-card, #FAF6EC); box-shadow: inset 0 0 0 1px var(--lp-edge, rgba(28,24,16,.12)); clip-path: inset(0 0 calc(50% - 2px) 0); pointer-events: none; }
  #aboutSection .about-profile .practitioner-avatar > .lp-notch { display: block; }
  #aboutSection .about-profile .practitioner-avatar:has(> .lp-notch) { left: 44px; }
  #aboutSection .about-profile .practitioner-avatar:has(> .lp-notch)::before { inset: -3px !important; filter: blur(3px) !important; opacity: .55 !important; }
  @media (max-width: 640px) { #aboutSection .about-profile .practitioner-avatar:has(> .lp-notch) { left: 36px; } }
  /* desktop: leave room above the panel so the arch around the photo never runs into the photos above it */
  @media (min-width: 1025px) { .main-grid:has(#aboutSection .about-profile .practitioner-avatar) { padding-top: 104px; } }