/* Popular Properties — theme-agnostic styles, scoped under .pp-root */
.pp-root { --pp-primary:#CB39FF; --pp-primary-rgb:203,57,255; --pp-primary-soft:#f7e8ff; --pp-fg:#1a1a2e; --pp-muted:#6b7280; --pp-border:#ececf3; --pp-bg:rgba(255,255,255,.35); --pp-radius:16px; --pp-shadow:0 12px 32px -14px rgba(var(--pp-primary-rgb),.32); color:var(--pp-fg); font-family:inherit; box-sizing:border-box; background:transparent; }
.pp-root *, .pp-root *::before, .pp-root *::after { box-sizing:border-box; }
.pp-wrap { max-width:1200px; margin:0 auto; padding:56px 20px; background:transparent; }
.pp-header { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.pp-title { font-size:clamp(22px,3vw,30px); font-weight:900; margin:0; letter-spacing:-.01em; }
.pp-sub { color:var(--pp-muted); font-size:14px; margin:6px 0 0; }
.pp-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pp-filters { display:flex; flex-wrap:wrap; gap:8px; }
.pp-chip { border:1px solid rgba(var(--pp-primary-rgb),.4); background:#fff; color:var(--pp-primary); padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:.2s; }
.pp-chip:hover { background:var(--pp-primary-soft); }
.pp-chip.is-active { background:var(--pp-primary); color:#fff; border-color:var(--pp-primary); }
.pp-nav { display:flex; align-items:center; gap:10px; }
.pp-btn { width:36px; height:36px; border-radius:999px; border:1px solid rgba(var(--pp-primary-rgb),.4); background:#fff; color:var(--pp-primary); display:grid; place-items:center; cursor:pointer; transition:.2s; }
.pp-btn:hover { background:var(--pp-primary); color:#fff; }
.pp-count { font-weight:700; color:var(--pp-primary); font-size:14px; }
.pp-viewport { overflow-x:hidden; overflow-y:visible; margin-top:28px; padding-top:8px; margin-bottom:-8px; }
.pp-track { display:flex; gap:20px; transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.pp-slide { flex:0 0 100%; min-width:0; }
@media(min-width:560px){ .pp-slide{ flex-basis:calc(50% - 10px); } }
@media(min-width:768px){ .pp-slide{ flex-basis:calc(33.333% - 14px); } }
@media(min-width:1024px){ .pp-slide{ flex-basis:calc(33.333% - 14px); } }
.pp-slide.is-hidden { display:none; }

.pp-card { position:relative; aspect-ratio:3/3.1; border-radius:24px; overflow:hidden; box-shadow:0 1px 3px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.1); transition:transform .3s ease, box-shadow .3s ease; }
.pp-card:hover { transform:translateY(-4px); box-shadow:none; }
.pp-media { position:absolute; inset:0; overflow:hidden; }
.pp-media img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .3s ease; }
.pp-card:hover .pp-media img { transform:scale(1.05); }
.pp-scrim { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.62) 32%, rgba(0,0,0,0) 64%); }
.pp-badge { position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.15); border:1px solid #fff; color:#A855F7; font-size:10px; font-weight:700; padding:6px 9px; border-radius:999px; }
.pp-badge svg { flex-shrink:0; }
.pp-tags { position:absolute; top:14px; right:14px; z-index:3; display:flex; gap:6px; }
.pp-tag { background:rgba(255,255,255,.15); color:#A855F7; font-size:10px; font-weight:700; padding:6px 9px; border-radius:999px; border:1px solid #fff; }
.pp-tag-sale { background:rgba(255,255,255,.15); color:#A855F7; border-color:#fff; }
.pp-tag-rent { background:rgba(255,255,255,.15); color:#A855F7; border-color:#fff; }
.pp-media-link { position:absolute; inset:0; z-index:2; }
.pp-info { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 20px 18px; display:flex; flex-direction:column; gap:2px; pointer-events:none; }
.pp-info a, .pp-info button { pointer-events:auto; }
.pp-h { font-size:19px; font-weight:700; margin:0; color:#fff; line-height:1.3; letter-spacing:-.01em; }
.pp-h a { color:inherit; text-decoration:none; }
.pp-h-price { margin:0; font-size:19px; font-weight:900; color:#fff; line-height:1.3; }
.pp-price-prefix { font-weight:400; font-size:0.7em; color:rgba(255,255,255,.65); letter-spacing:0; }
.pp-price-value { font-weight:900; color:#fff; }
.pp-loc { display:flex; align-items:center; gap:6px; font-size:14px; color:rgba(255,255,255,.9); margin:0; }
.pp-loc svg { color:#fff; flex-shrink:0; }
.pp-divider { height:1px; background:rgba(255,255,255,.28); margin:0; }
.pp-stats { display:flex; align-items:center; flex-wrap:wrap; gap:14px; font-size:14px; font-weight:500; color:#fff; }
.pp-stat { display:inline-flex; align-items:center; gap:6px; }
.pp-stat svg { color:#fff; flex-shrink:0; }
.pp-dot { color:rgba(255,255,255,.6); font-weight:700; }
.pp-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px; position:relative; z-index:2; }
.pp-price { font-size:23px; font-weight:900; color:var(--pp-primary); letter-spacing:-.01em; }
.pp-view-btn { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--pp-primary); color:var(--pp-primary); background:#fff; font-size:13px; font-weight:700; padding:10px 16px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:.2s; }
.pp-view-btn:hover { background:var(--pp-primary); color:#fff; }
.pp-bottom-actions { gap:8px; }
.pp-mini-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:12px; font-weight:700; padding:9px 6px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:.2s; }
.pp-mini-wa { background:linear-gradient(135deg, #CB39FF, #7C1FD9); border:1px solid transparent; color:#fff; }
.pp-mini-wa:hover { filter:brightness(1.1); }
.pp-mini-call { background:linear-gradient(135deg, #CB39FF, #7C1FD9); border:1px solid transparent; color:#fff; }
.pp-mini-call:hover { filter:brightness(1.1); }
.pp-mini-email { background:linear-gradient(135deg, #CB39FF, #7C1FD9); border:1px solid transparent; color:#fff; }
.pp-mini-email:hover { filter:brightness(1.1); }

.pp-dots { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:24px; }
.pp-dot-btn { width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--pp-border); cursor:pointer; transition:.2s; }
.pp-dot-btn.is-active { background:var(--pp-primary); width:22px; border-radius:5px; }

@media(max-width:600px){
  .pp-wrap { padding:36px 16px; }
  .pp-header { gap:14px; }
  .pp-controls { width:100%; justify-content:space-between; }
  .pp-filters { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; }
  .pp-filters::-webkit-scrollbar { display:none; }
  .pp-chip { flex:0 0 auto; }
  .pp-track { gap:14px; }
  .pp-info { padding:14px 16px 16px; }
  .pp-bottom { flex-wrap:wrap; }
}

/* ==================== Single property detail page ==================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

.pp-single {
  --pp-s-bg:#f6f5f1; --pp-s-panel: rgba(255,255,255,.5); --pp-s-panel-hover: rgba(255,255,255,.7);
  --pp-s-border: rgba(20,18,12,.09); --pp-s-border-2: rgba(20,18,12,.15);
  --pp-s-text:#1c1c1e; --pp-s-dim:#5b5d64; --pp-s-faint:#8b8d95;
  --pp-s-violet:#9b30e0; --pp-s-violet-dim:#7a25b3; --pp-s-violet-soft: rgba(155,48,224,.10);
  --pp-s-gold:#a9700f; --pp-s-gold-soft: rgba(169,112,15,.12);
  --pp-s-r-lg:22px; --pp-s-r-md:16px; --pp-s-r-sm:10px;
  --pp-s-font-d: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pp-s-font-b: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  max-width:1220px; margin:0 auto; padding:0 24px 60px; width:100%;
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(155,48,224,.06), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(169,112,15,.05), transparent 55%),
    transparent;
  color:var(--pp-s-text); font-family:var(--pp-s-font-b); line-height:1.55;
}
@media(max-width:600px){
  .pp-single { padding:0 14px 90px; }
  .pp-panel { padding:20px 18px 22px; margin-bottom:16px; }
  .pp-layout { gap:16px; padding-top:24px; }
  .pp-cta-card { padding:20px; }
}
.pp-single h1,.pp-single h2,.pp-single h3 { font-family:var(--pp-s-font-d); font-weight:600; margin:0; color:var(--pp-s-text); letter-spacing:-.01em; overflow-wrap:break-word; }
.pp-single img { max-width:100%; display:block; }
.pp-single, .pp-single * { min-width:0; }
.pp-single p, .pp-single span, .pp-single a { overflow-wrap:break-word; }

.pp-back-row { padding:20px 0 0; }
.pp-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--pp-s-dim); text-decoration:none; }
.pp-back:hover { color:var(--pp-s-text); }

/* Hero gallery */
.pp-gallery { padding:20px 0 0; }
.pp-gallery-grid { display:grid; gap:10px; height:clamp(230px, 44vw, 520px); grid-template-columns:1.55fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.pp-tile { position:relative; border-radius:var(--pp-s-r-md); overflow:hidden; border:1px solid var(--pp-s-border); cursor:pointer; }
.pp-tile:nth-child(n+6) { display:none; }
.pp-tile img { width:100%; height:100%; object-fit:cover; }
.pp-tile-main { grid-column:1; grid-row:1 / 3; }
.pp-tile-count { position:absolute; inset:0; background:rgba(11,14,20,.55); color:#fff; font-family:var(--pp-s-font-d); font-size:26px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.pp-gallery-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.pp-viewall { display:inline-flex; align-items:center; gap:8px; background:var(--pp-s-panel); border:1px solid var(--pp-s-border-2); color:var(--pp-s-text); padding:11px 20px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; backdrop-filter:blur(6px); font-family:var(--pp-s-font-b); }
.pp-viewall:hover { background:var(--pp-s-panel-hover); }
@media(max-width:680px){
  .pp-gallery-grid {
    display:flex; grid-template-columns:unset; grid-template-rows:unset; height:auto;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:10px; padding-bottom:6px; scrollbar-width:none;
  }
  .pp-gallery-grid::-webkit-scrollbar { display:none; }
  .pp-tile, .pp-tile:nth-child(n+6) {
    display:block; flex:0 0 82%; scroll-snap-align:center;
    height:clamp(190px, 58vw, 320px); grid-column:unset; grid-row:unset;
    cursor:default;
  }
  .pp-tile-count { display:none; }
  .pp-gallery-actions { display:none; }
}

/* Layout */
.pp-layout { display:grid; grid-template-columns:1fr 340px; gap:36px; padding:36px 0 0; align-items:start; }
@media(max-width:980px){ .pp-layout { grid-template-columns:1fr; } }
.pp-panel { background:var(--pp-s-panel); border:1px solid var(--pp-s-border); border-radius:var(--pp-s-r-lg); padding:28px 28px 30px; backdrop-filter:blur(14px); margin-bottom:24px; }
.pp-panel h2 { font-size:22px; font-weight:700; }
.pp-panel-head { margin-bottom:20px; }

/* Overview */
.pp-ov-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin-bottom:24px; }
.pp-eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--pp-s-gold); font-weight:700; margin:0 0 8px; }
.pp-ov-title h1 { font-size:clamp(24px,3.2vw,32px); }
.pp-ov-title .pp-dev { color:var(--pp-s-dim); font-size:14px; margin:8px 0 0; }
.pp-status-pill { align-self:flex-start; background:var(--pp-s-gold-soft); color:var(--pp-s-gold); border:1px solid rgba(169,112,15,.3); padding:8px 16px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.pp-ov-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--pp-s-border); border:1px solid var(--pp-s-border); border-radius:var(--pp-s-r-md); overflow:hidden; }
@media(max-width:900px){ .pp-ov-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .pp-ov-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .pp-ov-grid { grid-template-columns:1fr; } }
.pp-ov-item { background:rgba(255,255,255,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:16px 18px; }
.pp-ov-icon { color:var(--pp-s-violet); margin-bottom:10px; }
.pp-ov-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--pp-s-faint); margin:0 0 4px; }
.pp-ov-value { font-size:14px; font-weight:700; color:var(--pp-s-text); margin:0; }

/* Property details */
.pp-about p { color:var(--pp-s-dim); font-weight:400; font-size:15px; margin:0 0 14px; }
.pp-about p:last-child { margin-bottom:0; }

/* Agents */
.pp-agents-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .pp-agents-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .pp-agents-grid { grid-template-columns:1fr; } }
.pp-agent-card { background:rgba(255,255,255,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--pp-s-border); border-radius:var(--pp-s-r-md); padding:20px; text-align:center; }
.pp-agent-avatar { width:64px; height:64px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:var(--pp-s-font-d); font-weight:600; font-size:19px; color:#fff; background:linear-gradient(135deg,var(--pp-s-gold),var(--pp-s-violet)); object-fit:cover; }
.pp-agent-name { font-weight:700; font-size:15px; margin:0 0 2px; }
.pp-agent-role { font-size:12px; color:var(--pp-s-faint); margin:0 0 16px; }
.pp-agent-wa { display:inline-flex; align-items:center; gap:6px; justify-content:center; width:100%; background:rgba(37,211,102,.12); color:#1a8f4c; border:1px solid rgba(37,211,102,.3); padding:9px 10px; border-radius:var(--pp-s-r-sm); font-size:13px; font-weight:700; text-decoration:none; }
.pp-agent-wa:hover { background:rgba(37,211,102,.2); }

/* Payment plan */
.pp-pay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .pp-pay-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .pp-pay-grid { grid-template-columns:1fr; } }
.pp-pay-card { border-radius:var(--pp-s-r-md); padding:22px; border:1px solid var(--pp-s-border); }
.pp-pay-pct { font-family:var(--pp-s-font-d); font-size:38px; font-weight:600; margin:0 0 6px; }
.pp-pay-title { font-size:14px; font-weight:700; margin:0 0 4px; }
.pp-pay-sub { font-size:12px; color:var(--pp-s-faint); margin:0; }
.pp-pay-1 { background:var(--pp-s-violet-soft); }
.pp-pay-1 .pp-pay-pct { color:var(--pp-s-violet); }
.pp-pay-2 { background:rgba(20,18,12,.04); }
.pp-pay-3 { background:var(--pp-s-gold-soft); }
.pp-pay-3 .pp-pay-pct { color:var(--pp-s-gold); }

/* Floor plans accordion */
.pp-accordion { display:flex; flex-direction:column; gap:10px; }
.pp-acc-item { border:1px solid var(--pp-s-border); border-radius:var(--pp-s-r-md); overflow:hidden; background:rgba(255,255,255,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pp-acc-trigger { width:100%; background:none; border:0; color:var(--pp-s-text); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; text-align:left; font-family:var(--pp-s-font-b); }
.pp-acc-info { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pp-acc-bed { font-weight:700; font-size:15px; }
.pp-acc-size { font-size:13px; color:var(--pp-s-dim); }
.pp-acc-chev { transition:transform .25s; color:var(--pp-s-faint); flex-shrink:0; }
.pp-acc-item.is-open .pp-acc-chev { transform:rotate(180deg); }
.pp-acc-panel { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.pp-acc-item.is-open .pp-acc-panel { max-height:480px; }
.pp-acc-panel-inner { padding:0 20px 22px; }
.pp-acc-plan-img { width:100%; max-height:420px; object-fit:contain; border-radius:var(--pp-s-r-sm); border:1px solid var(--pp-s-border); background:#fff; }
.pp-acc-plan-empty { border:1px dashed var(--pp-s-border-2); border-radius:var(--pp-s-r-sm); padding:30px; text-align:center; color:var(--pp-s-faint); font-size:13px; }

/* Sticky CTA */
.pp-cta-card { position:sticky; top:24px; background:var(--pp-s-panel); border:1px solid var(--pp-s-border-2); border-radius:var(--pp-s-r-lg); padding:26px; backdrop-filter:blur(16px); }
.pp-cta-label { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--pp-s-faint); margin:0 0 6px; }
.pp-cta-price { font-family:var(--pp-s-font-d); font-size:28px; font-weight:600; color:var(--pp-s-text); margin:0 0 22px; }
.pp-cta-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border-radius:var(--pp-s-r-sm); padding:14px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; border:1px solid transparent; margin-bottom:10px; font-family:var(--pp-s-font-b); }
.pp-cta-primary { background:linear-gradient(135deg,var(--pp-s-violet),var(--pp-s-violet-dim)); color:#fff; }
.pp-cta-primary:hover { opacity:.92; }
.pp-cta-ghost { background:rgba(20,18,12,.03); border-color:var(--pp-s-border-2); color:var(--pp-s-text); }
.pp-cta-ghost:hover { background:rgba(20,18,12,.06); }
.pp-cta-wa { background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.3); color:#1a8f4c; }
.pp-cta-wa:hover { background:rgba(37,211,102,.2); }
.pp-cta-divider { height:1px; background:var(--pp-s-border); margin:16px 0; }
.pp-cta-agent { display:flex; align-items:center; gap:12px; }
.pp-cta-agent .pp-agent-avatar { width:40px; height:40px; font-size:13px; margin:0; flex-shrink:0; }
.pp-cta-agent-name { font-size:13px; font-weight:700; margin:0; }
.pp-cta-agent-role { font-size:11px; color:var(--pp-s-faint); margin:0; }

/* Mobile sticky bar */
.pp-mobile-bar { display:none; }
@media(max-width:980px){
  .pp-mobile-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; gap:10px; background:rgba(255,255,255,.65); border-top:1px solid var(--pp-s-border-2); backdrop-filter:blur(14px); padding:12px 16px; align-items:center; font-family:var(--pp-s-font-b); }
  .pp-mb-price { flex:1; }
  .pp-mb-l { font-size:10px; color:var(--pp-s-faint); text-transform:uppercase; letter-spacing:.08em; }
  .pp-mb-v { font-family:var(--pp-s-font-d); font-size:17px; font-weight:600; }
  .pp-mb-btn { padding:12px 18px; border-radius:var(--pp-s-r-sm); font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; text-decoration:none; }
  .pp-mb-primary { background:linear-gradient(135deg,var(--pp-s-violet),var(--pp-s-violet-dim)); color:#fff; }
  .pp-mb-wa { background:rgba(37,211,102,.14); color:#1a8f4c; }
  body:has(.pp-mobile-bar) { padding-bottom:78px; }
  .pp-cta-card { display:none; }
}

/* Lightbox */
.pp-lightbox { position:fixed; inset:0; z-index:2147483647; background:#000; display:none; flex-direction:column; padding:0; }
.pp-lightbox.is-open { display:flex; }
.pp-lb-stage { flex:1; min-height:0; width:100%; display:flex; flex-direction:column; }
.pp-lb-frame { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pp-lb-frame img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pp-lb-caption { flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); color:rgba(255,255,255,.7); font-size:13px; font-family:var(--pp-s-font-b, inherit); }
.pp-lb-close { position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.pp-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.pp-lb-prev { left:16px; } .pp-lb-next { right:16px; }
@media(max-width:640px){ .pp-lb-nav{ width:38px; height:38px; } .pp-lb-prev{ left:8px; } .pp-lb-next{ right:8px; } .pp-lb-close{ width:36px; height:36px; } .pp-lb-caption{ padding:10px 16px calc(10px + env(safe-area-inset-bottom)); font-size:12px; } }