/* The profile page for the owner and every non-Seeker member (owner-profile.js; docs/owner-profile.md). One layout, two looks:
   .op-v1 Classic (light cards, teal, dark text) and .op-v2 Glass (dark liquid glass over a blurred,
   darkened copy of the cover, white text). Everything is scoped to .op-page. */
.op-page { --op-ink: #13302f; --op-muted: #536b68; --op-teal: #13958a; --op-teal-deep: #0b6e69;
  --op-card: #fff; --op-card-line: #dbe5ea; --op-shadow: 0 10px 30px rgba(20, 40, 45, .08);
  position: relative; color: var(--op-ink); padding-bottom: 40px; }
.op-page .op-bg { display: none; }
/* v2 Glass: the cover, blurred and darkened, fills the screen behind the page. */
.op-v2 { --op-ink: #fff; --op-muted: rgba(255, 255, 255, .74); --op-card: rgba(255, 255, 255, .1); --op-card-line: rgba(255, 255, 255, .38);
  --op-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 0, 0, .3); }
.op-v2 .op-bg { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #1b2326; }
.op-v2 .op-bg::before { content: ''; position: absolute; inset: -60px; background: var(--op-cover) center / cover; filter: blur(40px) saturate(1.5) brightness(.5); transform: scale(1.1); }
.op-v2 .op-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 16, .42), rgba(8, 14, 16, .66)); }
body:has(#profileView.active-view .op-v2) { background: #1b2326; }
.op-glass { background: var(--op-card); border: 1px solid var(--op-card-line); border-radius: 26px; box-shadow: var(--op-shadow); }
.op-v2 .op-glass, .op-v2 .op-grid .property-card, .op-v2 .op-btn:not(.op-primary), .op-v2 .op-tabs {
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .12)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  border: 1px solid var(--op-card-line) !important; box-shadow: var(--op-shadow) !important; }
.op-v2 .op-glass { border-radius: 32px; }
/* Phones without blur, or set to reduce transparency: nearly solid dark panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .op-v2 .op-glass, .op-v2 .op-grid .property-card, .op-v2 .op-tabs { background: rgba(28, 34, 36, .94) !important; } }
@media (prefers-reduced-transparency: reduce) { .op-v2 .op-glass, .op-v2 .op-grid .property-card, .op-v2 .op-tabs { background: rgba(28, 34, 36, .96) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }

.op-page h1, .op-page h2, .op-page h3, .op-page h4 { color: var(--op-ink); }
.op-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.op-owner-bar { max-width: 1200px; margin: 6px auto 10px; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--op-muted); }
.op-owner-note b { color: var(--op-ink); }
.op-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.op-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--op-card-line); background: var(--op-card); color: var(--op-ink); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.op-btn.op-primary { background: linear-gradient(110deg, var(--op-teal), #008076); color: #fff; border: 0; min-height: 50px; font-size: 15.5px; box-shadow: 0 10px 24px rgba(0, 128, 118, .26); }
.op-v2 .op-btn.op-primary { background: linear-gradient(160deg, #fff, #e9f3f2); color: #0b4e49; box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(0, 0, 0, .28); }
.op-btn:disabled { opacity: .55; cursor: default; }
.op-design { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(120, 140, 140, .16); border: 1px solid var(--op-card-line); }
.op-design button { border: 0; background: transparent; color: var(--op-ink); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.op-design button.on { background: var(--op-teal); color: #fff; }
.op-v2 .op-design button.on { background: #fff; color: #0b4e49; }

/* The cover: full width, moved and zoomed with object-position and scale. */
.op-cover { position: relative; height: 400px; overflow: hidden; border-radius: 0 0 40px 40px; background: #cfd8da; }
.op-cover img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.op-cover.op-editing { cursor: grab; touch-action: none; outline: 3px solid var(--op-teal); outline-offset: -3px; }
.op-cover.op-editing:active { cursor: grabbing; }
.op-cover-bar { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 22px; background: rgba(15, 25, 28, .78); color: #fff; font-size: 13px; font-weight: 700; z-index: 3; max-width: calc(100% - 24px); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.op-cover-bar .op-btn { min-height: 38px; background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
.op-cover-bar .op-btn.op-primary { background: #fff; color: #0b4e49; }
.op-zoom { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.op-zoom input { width: 140px; accent-color: #34c759; }

/* The name card, overlapping the bottom of the cover. */
.op-card { position: relative; margin-top: -90px; padding: 28px 30px 26px 212px; display: flex; gap: 24px; align-items: flex-start; z-index: 2; }
.op-photo-wrap { position: absolute; left: 30px; top: -46px; width: 156px; height: 156px; }
.op-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 5px solid rgba(255, 255, 255, .9); box-shadow: 0 12px 30px rgba(20, 40, 45, .25); }
.op-photo-wrap .profile-presence-dot { position: absolute; right: 10px; bottom: 12px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; }
.op-photo-wrap .fd-seal { position: absolute; right: -2px; top: 4px; }
.op-id { flex: 1; min-width: 0; }
.op-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.op-badges { align-items: center; }
/* The account type ("Real Estate Agent"), for everyone but the owner. */
.op-role { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 999px; background: #e5f4f2; color: var(--op-teal-deep); font-size: 13px; font-weight: 800; border: 1px solid #c4e5e0; }
.op-v2 .op-role { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .4); }
.op-photo-wrap .fl-seal { position: absolute; right: -2px; top: 4px; }
.op-prc p, .op-viewers p { margin: 6px 0; font-size: 14px; color: var(--op-muted); }
.op-prc p b { color: var(--op-ink); }
.op-prc small { font-size: 12.5px; color: var(--op-muted); }
.op-prc a { color: var(--op-teal); font-weight: 700; }
.op-v2 .op-prc a { color: #fff; }
.op-viewers .op-pill-btn { margin-top: 6px; }
.op-v2 .op-badges .fd-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .4); }
.op-id h1 { font-size: 44px; line-height: 1.05; margin: 2px 0 8px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.op-check { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #34c759; color: #fff; font-size: 17px; font-weight: 900; vertical-align: middle; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.op-intro { font-size: 16px; line-height: 1.5; margin: 0 0 12px; color: var(--op-muted); max-width: 660px; }
.op-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--op-muted); }
.op-meta b, .op-meta a { color: var(--op-ink); text-decoration: none; }
.op-page .op-meta .profile-stat { display: inline-flex !important; align-items: baseline; gap: 5px; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--op-muted) !important; }
.op-page .op-meta .profile-stat b { display: inline !important; font-size: inherit !important; line-height: inherit !important; color: var(--op-ink) !important; }
.op-page .op-meta .profile-stat span { display: inline !important; font-size: inherit !important; color: inherit !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.op-presence.is-online { color: #22a06b; font-weight: 700; }
.op-v2 .op-presence.is-online { color: #7dffb0; }
.op-actions { display: grid; gap: 10px; width: 250px; flex: 0 0 auto; }
.op-actions .op-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.op-actions [data-report-profile] { min-height: 36px; font-size: 13px; }

.op-tabs { position: sticky; top: 72px; z-index: 4; display: inline-flex; gap: 4px; padding: 6px; margin: 26px 0 6px; border-radius: 999px; background: #fff; border: 1px solid var(--op-card-line); box-shadow: var(--op-shadow); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.op-v2 .op-tabs { background: linear-gradient(160deg, rgba(40, 46, 48, .88), rgba(28, 34, 36, .82)) !important; }
.op-tabs a { padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--op-ink); text-decoration: none; white-space: nowrap; }
.op-tabs a.on { background: var(--op-teal); color: #fff; }
.op-v2 .op-tabs a.on { background: linear-gradient(160deg, #fff, #e9f3f2); color: #0b4e49; }
.op-m { display: none !important; }

.op-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.op-side { position: sticky; top: 140px; display: grid; gap: 16px; margin-top: 28px; }
.op-section { scroll-margin-top: 150px; }
.op-section h2 { font-size: 26px; margin: 28px 0 4px; letter-spacing: -.02em; }
.op-sub { margin: 0 0 14px; color: var(--op-muted); font-size: 14px; }
.op-panel { padding: 22px 24px; }
.op-panel h3 { margin: 0 0 10px; font-size: 19px; }
.op-panel p { margin: 0; line-height: 1.6; font-size: 14.5px; color: var(--op-muted); overflow-wrap: anywhere; }
.op-muted { color: var(--op-muted); }
.op-facts { display: grid; gap: 10px; font-size: 13.5px; }
.op-facts div { display: flex; justify-content: space-between; gap: 12px; }
.op-facts span { color: var(--op-muted); }
.op-facts b { text-align: right; }
.op-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-weight: 700; font-size: 13.5px; }
.op-links a { color: var(--op-teal-deep); }
.op-v2 .op-links a, .op-v2 .op-link { color: #8ef0c8; }
.op-contact { display: grid; gap: 14px; }
.op-contact .op-btn { width: 100%; }
.op-link { border: 0; background: none; padding: 0; margin-top: 8px; font: inherit; font-weight: 800; font-size: 13.5px; color: var(--op-teal-deep); cursor: pointer; }
.op-seeall { display: flex; justify-content: center; margin-top: 16px; }
.op-pill-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--op-card-line); background: var(--op-card); color: var(--op-ink); font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.op-v2 .op-pill-btn { background: rgba(255, 255, 255, .14); }

/* Listing cards: the profile's thumbnail cards (mobile-property-feed.css), 3 per row on computers,
   2 on phones, every card showing all its details; Featured shows 3 (4 on phones), Listings 6. */
.op-page .profile-section { background: none; border: 0; box-shadow: none; padding: 0; }
.op-page .profile-section .listing-grid.compact-grid.op-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; gap: 14px !important; }
.op-page .profile-section .listing-grid.compact-grid.op-featured-grid:not(.op-show-all) > .property-card:nth-child(n+4),
.op-page .profile-section .listing-grid.compact-grid.op-listing-grid > .property-card:nth-child(n+7) { display: none !important; }
.op-grid .property-card-featured { border-color: rgba(201, 160, 60, .75) !important; }
.op-v2 .op-grid .property-card .card-price, .op-v2 .op-grid .property-card .card-title { color: #fff !important; }
.op-v2 .op-grid .property-card .card-location, .op-v2 .op-grid .property-card .card-footer { color: rgba(255, 255, 255, .74) !important; }
.op-v2 .op-grid .property-card .zp-deal-was, .op-v2 .op-grid .property-card [class*="was"] { color: #8ef0c8; }

.op-team { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--op-ink); margin-bottom: 10px; }
.op-team-mark { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-weight: 900; font-size: 19px; background: linear-gradient(135deg, #13958a, #0b524d); color: #fff; flex: 0 0 auto; }
.op-team-info { flex: 1; display: grid; gap: 3px; min-width: 0; }
.op-team-info b { font-size: 17px; }
.op-team-info small, .op-team-info em { font-size: 13px; color: var(--op-muted); font-style: normal; }
.op-reviews .profile-layout { display: block; margin: 0; padding: 0; }
.op-reviews .profile-layout > main { display: grid; gap: 14px; }
.op-reviews .profile-section { background: var(--op-card) !important; border: 1px solid var(--op-card-line) !important; border-radius: 26px !important; box-shadow: var(--op-shadow) !important; padding: 20px 22px !important; color: var(--op-ink); }
.op-v2 .op-reviews .profile-section { -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9); }
.op-v2 .op-reviews .profile-section :is(h2, b, strong) { color: #fff; }
.op-v2 .op-reviews .profile-section :is(p, small, span) { color: rgba(255, 255, 255, .78); }

.op-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.op-photos img, .op-add-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; cursor: zoom-in; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.op-add-photo { display: grid; place-items: center; border: 2px dashed var(--op-card-line); cursor: pointer; font-size: 26px; color: var(--op-muted); }
.op-strength-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.op-strength-top small { display: block; color: var(--op-muted); font-size: 13px; }
.op-ring { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#34c759 calc(var(--op-strength) * 1%), rgba(120, 140, 140, .2) 0); flex: 0 0 auto; }
.op-ring b { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--op-card); }
.op-v2 .op-ring b { background: rgba(20, 30, 34, .7); }
.op-strength ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--op-muted); }
.op-strength li.ok { color: #16835e; font-weight: 700; }
.op-v2 .op-strength li.ok { color: #9ff0bd; }

/* Sheets (Teams on my profile) and Edit profile counters. */
.op-sheet-shade { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 10, 12, .5); display: grid; place-items: center; padding: 12px; }
/* The sheet is outside .op-page, so it carries the Classic colours itself (owner report 2026-10-10:
   its Save button was white text on white). */
.op-sheet { --op-ink: #13302f; --op-muted: #536b68; --op-teal: #13958a; --op-teal-deep: #0b6e69; --op-card: #fff; --op-card-line: #dbe5ea; }
.op-sheet .op-btn.op-primary { background: linear-gradient(110deg, #13958a, #008076); color: #fff; }
.op-sheet { width: min(520px, 100%); max-height: calc(100vh - 24px); overflow: auto; background: #fff; color: #13302f; border-radius: 26px; padding: 22px 24px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.op-sheet-head { display: flex; justify-content: space-between; align-items: center; font-size: 19px; margin-bottom: 8px; }
.op-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #eef2f3; font-size: 16px; cursor: pointer; }
.op-hint { margin: 0 0 14px; font-size: 13.5px; color: #536b68; line-height: 1.45; }
.op-small { font-size: 12px; margin-top: 10px; }
.op-switch-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid #dbe5ea; margin-bottom: 8px; cursor: pointer; }
.op-switch-row > span:not(.op-team-mark) { flex: 1; display: grid; gap: 2px; }
.op-switch-row small { color: #536b68; font-size: 12px; }
.op-switch-row .op-team-mark { width: 42px; height: 42px; border-radius: 12px; font-size: 15px; }
.op-switch-row.op-master { background: #f4f8fa; }
.op-switch-row.op-off { opacity: .45; }
.op-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.op-switch-row i { width: 50px; height: 30px; border-radius: 999px; background: #cfd8da; position: relative; flex: 0 0 auto; transition: background .2s; }
.op-switch-row i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: left .2s; }
.op-switch-row input:checked + i { background: #34c759; }
.op-switch-row input:checked + i::after { left: 23px; }
.op-switch-row input:focus-visible + i { outline: 3px solid #13958a; outline-offset: 2px; }
.op-sheet-error { color: #c0263b; font-size: 13px; min-height: 1em; margin: 6px 0; }
.op-sheet-save { width: 100%; }
.op-edit-field { display: grid; gap: 6px; }
.op-edit-field small { font-weight: 500; color: #536b68; }
.op-count { justify-self: end; display: block; text-align: right; font-size: 12px; font-weight: 700; color: #536b68; }
.op-count.op-over { color: #c0263b; }
input.op-over, textarea.op-over { border-color: #e05a6b !important; background: #fff4f5 !important; }

@media (max-width: 760px) {
  .op-m { display: block !important; }
  .op-tabs a.op-m { display: inline-flex !important; }
  .op-d { display: none !important; }
  .op-wrap, .op-owner-bar { padding: 0 12px; }
  .op-owner-actions { width: 100%; }
  .op-owner-actions .op-btn { flex: 1 1 45%; min-height: 40px; font-size: 13px; }
  .op-design { width: 100%; justify-content: center; }
  .op-design button { flex: 1; }
  .op-cover { height: 230px; border-radius: 0 0 28px 28px; }
  .op-cover-bar { bottom: 54px; font-size: 12px; }
  .op-cover-bar span { width: 100%; text-align: center; }
  .op-card { margin-top: -50px; padding: 92px 18px 18px; flex-direction: column; gap: 16px; text-align: center; }
  .op-photo-wrap { left: 50%; transform: translateX(-50%); top: -66px; width: 136px; height: 136px; }
  .op-badges, .op-meta { justify-content: center; }
  .op-id h1 { font-size: 34px; }
  .op-intro { font-size: 15px; margin-left: auto; margin-right: auto; }
  .op-actions { width: 100%; }
  .op-about-short { margin-top: 14px; padding: 18px; }
  .op-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .op-clamp.op-open { display: block; }
  .op-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .op-chips span { font-size: 12.5px; padding: 7px 11px; border-radius: 999px; background: rgba(120, 140, 140, .12); border: 1px solid var(--op-card-line); }
  .op-about-short h4 { margin: 14px 0 8px; font-size: 15px; }
  .op-about-short .op-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .op-page .op-about-short .op-photos > * { flex: 0 0 31%; min-width: 0; width: 31%; scroll-snap-align: start; }
  .op-tabs { display: flex; top: 64px; width: 100%; }
  .op-cols { grid-template-columns: 1fr; gap: 0; }
  .op-side { position: static; margin-top: 18px; gap: 14px; }
  .op-page .profile-section .listing-grid.compact-grid.op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .op-page .profile-section .listing-grid.compact-grid.op-featured-grid:not(.op-show-all) > .property-card:nth-child(4) { display: flex !important; }
  .op-page .profile-section .listing-grid.compact-grid.op-featured-grid:not(.op-show-all) > .property-card:nth-child(n+5) { display: none !important; }
  .op-section h2 { font-size: 22px; }
  .op-team { flex-wrap: wrap; }
  .op-team .op-pill-btn { width: 100%; justify-content: center; }
}

/* Readable on any cover (owner report 2026-10-10: a bright cover made the glass pale and the white
   text hard to read). The background is darker, and every glass panel and card has a dark tint
   under its shine, so white text keeps its contrast even over a white wall or sky. */
.op-v2 .op-glass, .op-v2 .op-grid .property-card, .op-v2 .op-btn:not(.op-primary), .op-v2 .op-reviews .profile-section {
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .09)), rgba(14, 20, 22, .46) !important; }
.op-v2 .op-grid .property-card .card-body { background: transparent !important; }
.op-v2 .op-grid .property-card { color: #fff; }
.op-v2 .op-grid .property-card :is(.card-title, .card-price) { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
/* Inside the profile pop-up (visitors, View as visitor): the pop-up is the page. Its whole area
   is dark with the blurred cover, not just the first screen. */
.op-v2.op-in-modal { isolation: isolate; background: #1b2326; border-radius: 26px; overflow: hidden; }
.op-v2.op-in-modal .op-bg { position: absolute; inset: 0; z-index: -1; }
#profileModal:has(.op-v2) { background: #1b2326 !important; }
#profileModal:has(.op-v1) { background: #f4f8fa !important; }
/* The type label on each card photo ("Rent · Retail Space") stays readable on any photo (owner
   report 2026-10-10: in the Glass look it was white text on a light chip). */
.op-page .op-grid .property-card .card-badge { background: rgba(10, 18, 20, .72) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; text-shadow: none !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.op-v2 .op-grid .zp-was-line s { color: #ff9aa8 !important; } .op-v2 .op-grid .zp-was-line span { color: #8ef0c8 !important; }
/* Edit cover photo (owner only): a small button on the cover's top right; on phones just the
   camera. Its menu offers a ZamPlace cover, an upload, or moving the current one. */
.op-cover-edit { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(15, 25, 28, .55); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.op-cover-edit:hover { background: rgba(15, 25, 28, .72); }
.op-cover-menu { position: absolute; top: 54px; right: 14px; z-index: 5; display: grid; min-width: 230px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }
.op-cover-menu > * { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 0; border-radius: 11px; background: none; color: #13302f; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.op-cover-menu > *:hover, .op-cover-menu > *:focus-visible { background: #eef6f5; }
.op-cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.op-cover-tile { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 10; background: #dfe7e9; }
.op-cover-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-cover-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 11.5px; font-weight: 700; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.op-cover-tile.on { box-shadow: 0 0 0 3px #34c759; }
.op-sheet:has(.op-cover-grid) { width: min(640px, 100%); }
@media (max-width: 760px) {
  .op-cover-edit { top: 10px; right: 10px; width: 34px; padding: 0; justify-content: center; font-size: 15px; }
  .op-cover-edit span { display: none; }
  .op-cover-menu { top: 50px; right: 10px; }
  .op-cover-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  /* One slim row on phones so most of the cover stays visible while moving it. */
  .op-cover-bar { top: 10px; bottom: auto; flex-wrap: nowrap; gap: 6px; padding: 6px 8px; border-radius: 999px; width: calc(100% - 20px); }
  .op-cover-bar span { display: none; }
  .op-cover-bar .op-zoom { flex: 1; min-width: 0; font-size: 15px; gap: 4px; }
  .op-cover-bar .op-zoom input { width: 100%; min-width: 0; }
  .op-cover-bar .op-btn { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
}
/* Card photo labels: type and spaces left on the bottom line, the discount or rush sale just above
   with a small gap; all the same size (owner-profile.js tidyPhotoTags). */
.op-page .op-tags { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.op-page .op-tags .zp-deal-badges { position: static !important; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.op-page .op-tags .zp-deal-badges:empty { display: none; }
.op-page .op-tags-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; max-width: 100%; min-width: 0; }
.op-page .op-grid .op-tags :is(.card-badge.card-badge, .zp-deal-badge.zp-deal-badge) { position: static !important; inset: auto !important; display: inline-flex !important; align-items: center; margin: 0 !important; max-width: 100%; height: 22px; padding: 0 8px !important; font-size: 10px !important; line-height: 1 !important; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px !important; box-sizing: border-box; }

.op-page .op-grid .op-tags-row .card-badge.card-badge { flex: 0 1 auto; min-width: 0; max-width: 100% !important; }
.op-page .op-tags-row .zp-deal-badge { flex: 0 0 auto; }
.op-page .op-tags .zp-deal-badge .zp-long { display: none !important; }
.op-page .op-tags .zp-deal-badge .zp-short { display: inline !important; }
.op-page .op-tags .zp-deal-badges { gap: 5px; }
/* Narrow cards (phones): with a count beside it, the type label shows just "Retail Space". */
.op-page .op-tags .op-mode { white-space: pre; }
@container (max-width: 210px) {
  .op-page .op-tags-row:has(.zp-deal-badge) .op-mode { display: none; }
  .op-page .op-grid .op-tags :is(.card-badge.card-badge, .zp-deal-badge.zp-deal-badge) { font-size: 9.5px !important; padding: 0 7px !important; }
  .op-page .op-tags-row { gap: 4px; }
}