/* =========================================================
   PROPERTY LISTING CARD — v2 (rentz4.0 Figma redesign)
   Ported 1:1 from website html/index/buy-sell-listing-v2.html (.lcard,
   node 5749:23026 desktop / node 5840:16825 mobile). Colors, spacing,
   type sizes and breakpoints are copied verbatim from that file — do
   not "improve" values here without updating the source design first.

   Rendered by _propertyCardV2.blade.php. All tokens are scoped on
   .lcard itself (not :root) so this file can be loaded on pages that
   already define their own globals without clobbering them.

   Intentionally NOT ported from the source file: the nearby-landmark
   chips row (.lcard-chips) — not needed yet, see _propertyCardV2.blade.php.
   ========================================================= */

.lcard{
  --primary:#FF5403;
  --primary-tint:#FEF8F6;
  --primary-wash:rgba(255,84,3,.1);
  --ink:#333333;
  --ink-soft:#676767;
  --stroke-card:#E5E5E5;
  --stroke-mcard:#EBEBEB;
  --icon-stroke:#666666;
  --spec-div:#797979;
  --card-foot:#F7F7F7;
  --scrim:rgba(0,0,0,.6);
  --success:#009960;
  --wa-green:#0B851B;
  --radius:14px;
}

.pc2-listing-list{display:flex;flex-direction:column;gap:24px;margin-bottom: 25px;}

.lcard{display:flex;background:#fff;border:1px solid var(--stroke-card);border-radius:10px;overflow:hidden;transition:box-shadow .2s ease;font-family:var(--lr-font);color:var(--ink);}
.lcard:hover{box-shadow:0 14px 34px -22px rgba(18,18,26,.35);}

/* Fixed height (not min-height/stretch) so every card's photo is exactly
   the same height regardless of how tall that card's own body content
   (title/address wrapping, specs, etc.) happens to be - min-height+stretch
   was making the image grow to match each card's own row height
   individually, so image height varied card to card. The one tradeoff:
   on a card whose body genuinely needs more than 265px, the row will be
   taller than the image, leaving a sliver of this box's own background
   below the photo - accepted as the rarer case now that the specs-row
   wrapping bug (the main cause of tall bodies) is fixed; common enough
   pattern on real listing sites (Zillow, Airbnb) to not be worth
   reintroducing per-card image height variance to avoid entirely.
   img is position:absolute (not height:100%) so it isn't affected by
   which sizing mode this box uses; inset:0 fills the fixed 265px exactly,
   object-fit:cover crops any source photo to fit. */
.lcard-media{position:relative;flex:none;width:328px;height:265px;background:#EDEDF3;overflow:hidden;}
.lcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.lcard-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to top,rgba(12,12,18,.72),transparent);pointer-events:none;}
/* article.lcard .lcard-save (not just .lcard-save) deliberately: this
   button also carries .lp-card-save to keep the wishlist click handler
   working (see listing.blade.php), and ".lp-preview .lp-card-save" in
   style1.css is a higher-specificity rule for the OLD save-button look
   (circular, dark, 38px). This compound selector has to out-specificity
   that rule, not just out-order it. */
article.lcard .lcard-save{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;background:#fff;border:1.2px solid var(--primary);color:var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background .18s;padding:0;}
article.lcard .lcard-save:hover{background:var(--primary-tint);}
/* Saved state stays white/orange (not an inverted orange fill) - the
   solid vs outline icon swap below is what signals "saved" now. */
article.lcard .lcard-save.active,
article.lcard .lcard-save.pd-fav-active{background:#fff;color:var(--primary);}

/* Save/bookmark pop animation - technique from
   https://uiverse.io/Omar-Molotov/thin-rat-38, recolored to --primary
   and keyed off .active (our AJAX-driven state) instead of a checkbox's
   :checked. Both icons sit stacked (absolute) in the same spot; toggling
   which one is display:block re-triggers its keyframe pop. */
article.lcard .lcard-save svg{position:absolute;width:24px;height:24px;animation:pc2-save-pop .35s;transform-origin:center;}
article.lcard .lcard-save .save-solid{display:none;}
article.lcard .lcard-save.active .save-regular,
article.lcard .lcard-save.pd-fav-active .save-regular{display:none;}
article.lcard .lcard-save.active .save-solid,
article.lcard .lcard-save.pd-fav-active .save-solid{display:block;}
@keyframes pc2-save-pop{
  0%{transform:scale(0);opacity:0;}
  60%{transform:scale(1.25);}
  100%{transform:scale(1);opacity:1;}
}

.lcard-status{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;background:var(--scrim);color:#fff;font-size:10px;font-weight:500;padding:5px 8px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 4px rgba(0,0,0,.3);letter-spacing:-.2px;}
.lcard-status i{position:relative;width:5px;height:5px;border-radius:50%;background:#2ECC71;flex:none;}
/* Orange instead of green once the listing hasn't been updated in 10+
   days (see $isStale in _propertyCardV2.blade.php) - still says
   "Available", just a softer heads-up that it hasn't been reconfirmed
   lately. */
.lcard-status i.stale{background:var(--primary);}
/* An unavailable listing gets a muted dot and no live-ping - the pulsing green
   badge asserted "available" on homes that were already rented. Grey rather than
   red: this is a fact about the listing, not an error. */
.lcard-status--unavailable{background:rgba(38,38,44,.78);}
.lcard-status--unavailable i.stale{background:#B8B8C2;}
.lcard-status--unavailable i::after{display:none;animation:none;}
/* Expanding ring pulses out from the solid dot - "live" indicator feel. */
.lcard-status i::after{content:'';position:absolute;inset:0;border-radius:50%;background:#2ECC71;animation:pc2-live-ping 1.6s ease-out infinite;}
.lcard-status i.stale::after{background:var(--primary);}
@keyframes pc2-live-ping{
  0%{transform:scale(1);opacity:.7;}
  100%{transform:scale(3.2);opacity:0;}
}
.lcard-status em{font-style:normal;opacity:.5;}

.lcard-capbar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px;}
.lcard-tenant{color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.lcard-count{margin-left:auto;color:#fff;font-size:12.5px;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.lcard-updated{display:none;align-items:center;gap:10px;color:rgba(255,255,255,.92);font-size:10px;font-weight:500;white-space:nowrap;}
.lcard-updated::before{content:'';width:1px;height:12px;background:rgba(255,255,255,.45);}

.lcard-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.lcard-inner{padding:20px 24px 18px;flex:1;position:relative;display:flex;flex-direction:column;gap:11px;}
/* Desktop order: society -> title -> location -> price -> specs
   (mobile reorders these to society -> price -> title -> location) */
.lcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;order:1;}
.lcard-title{order:2;}
.lcard-loc{order:3;}
.lcard-price{order:4;}
.lcard-specs{order:5;}
.lcard-society{font-size:14.5px;color:var(--ink-soft);font-weight:500;}

/* Variant: listing with no society name — title becomes the first row and
   shares it with the PID ribbon; 118px keeps a long title from running
   underneath the ribbon. */
.lcard--no-society .lcard-title{padding-right:118px;}

/* Desktop: grey ribbon pinned top-right. Lives at the END of .lcard-price
   in the DOM so the price reads correctly; absolute positioning lifts it out. */
.lcard-pid{position:absolute;top:18px;right:0;background:#E7E7EC;color:var(--ink-soft);font-size:13px;font-weight:500;line-height:1;padding:7px 14px 7px 22px;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(100% - 88px) 50%);}
.lcard-pid b{color:var(--ink);font-weight:700;}

/* Single line + ellipsis (not a natural 2-line wrap) so every card's body
   height stays constant - a long title wrapping to 2 lines made that
   card's body taller than .lcard-media's fixed 265px, leaving a gap of
   the media box's own background below the photo on that card only. */
.lcard-title{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.4;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lcard-loc{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-soft);font-weight:500;min-width:0;}
.lcard-loc svg{flex:none;}
.lcard-loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.lcard-price{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.lcard-price .amt{font-size:21px;font-weight:700;letter-spacing:-.01em;}
.lcard-price .unit{font-size:15px;color:var(--ink);font-weight:400;margin-left:-4px;}
.lcard .verified{display:inline-flex;align-items:center;gap:3px;background:var(--success);color:#fff;font-size:11px;font-weight:700;padding:4px 9px 4px 7px;border-radius:100px;letter-spacing:.45px;}

/* Grid (not flex-wrap) on purpose: real bedroom labels vary a lot more
   than the reference demo's short "×BHK" strings - "2 Room with Kitchen"
   plus "Semi Furnished" is wide enough that the 4th item (Floor) had
   nowhere to go and wrapped onto its own orphan row. A 4-equal-column
   grid can't produce that - long text wraps inside its own column
   instead (min-width:0 lets it actually shrink there). */
.lcard-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:5px 0 0;padding:0;list-style:none;}
.lcard-specs li{padding:0 18px;border-left:1px solid var(--spec-div);min-width:0;}
.lcard-specs li:first-child{padding-left:0;border-left:none;}
/* Same single-line-ellipsis reasoning as .lcard-title just above - a long
   value like "2 Room with Kitchen" wrapping to 2 lines within its grid
   column (see .lcard-specs above) still grew that card's overall body
   height even though the 4-column grid already stopped it from breaking
   into an orphan row. */
.lcard-specs li span{display:block;font-size:13.5px;color:var(--ink-soft);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lcard-specs li b{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.lcard-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;background:var(--card-foot);padding:12px 24px;min-height:51px;}
.lcard-lister{display:flex;align-items:center;gap:14px;margin-right:auto;}
.lcard-lister .lister-col span{display:block;font-size:10px;color:var(--ink-soft);font-weight:400;}
.lcard-lister .lister-col b{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-top:4px;}
.lcard-lister .lister-sep{width:1px;height:30px;background:#DEDEE6;flex:none;}
.lcard-lister .lister-time{font-size:13.5px;color:var(--ink-soft);}

/* height:33px + flex-centered text (not padding+line-height) so this
   lines up exactly with .icon-sq's fixed 33px height instead of drifting
   with font metrics. */
.lcard .btn-number{display:inline-flex;align-items:center;justify-content:center;height:33px;background:#fff;border:1px solid var(--primary);color:var(--primary);font-size:13px;font-weight:500;border-radius:6px;padding:0 14px;cursor:pointer;transition:.18s;font-family:inherit;}
.lcard .btn-number:hover{background:var(--primary);color:#fff;}
.lcard .icon-sq{width:33px;height:33px;border-radius:6px;background:#fff;border:1px solid var(--icon-stroke);display:flex;align-items:center;justify-content:center;color:var(--icon-stroke);cursor:pointer;flex:none;transition:.18s;padding:0;}
.lcard .icon-sq:hover{border-color:var(--ink);color:var(--ink);}
.lcard .icon-sq.wa{border-color:var(--wa-green);color:var(--wa-green);}
.lcard .icon-sq.wa:hover{background:var(--wa-green);color:#fff;}

@media (max-width:1200px){
  .lcard-media{width:270px;}
}
/* Same compact image treatment, but reacting to the card's own column
   width (see .property-listings's container-type in style1.css) instead
   of the viewport - the filter sidebar eats a variable chunk of the
   viewport across Bootstrap's md/lg breakpoints, so e.g. an 800px-wide
   tablet with the sidebar visible leaves only ~507px for cards, well
   under what the viewport query above would ever notice. */
@container (max-width:900px){
  .lcard-media{width:270px;}
}
/* Below ~750px the body column is too narrow for the 4-column specs
   grid and the footer's text+3-buttons row to fit without wrapping into
   overlapping lines - same simplification the mobile breakpoint already
   makes (specs hidden, lister trimmed to just "Listed By: X"), applied
   here for the same reason: not enough width, just via a narrow tablet
   column instead of a phone screen. */
@container (max-width:750px){
  .lcard-specs{display:none;}
  .lcard-foot{flex-wrap:wrap;row-gap:8px;}
  .lcard-lister .lister-sep,.lcard-lister .lister-time{display:none;}
}
/* Body content is a fixed height at a given breakpoint now that title/specs
   are single-line-ellipsis (see .lcard-title/.lcard-specs above) - the one
   exception is this range, where the specs row itself (hidden below
   750px) adds ~5px more than .lcard-media's base 265px, which otherwise
   reintroduced a small (uniform, but non-zero) gap under the photo on
   every card at wider widths. Matches that exact height instead. */
@container (min-width:750.01px){
  .lcard-media{height:270px;}
}

/* ============ MOBILE LISTING CARD (node 5840:16825) ============ */
@media (max-width:760px){
  .lcard{flex-direction:column;border-radius:var(--radius);border-color:var(--stroke-mcard);}
  .lcard:hover{box-shadow:none;}

  .lcard-media{width:100%;height:auto;aspect-ratio:348/322;align-self:auto;}
  .lcard-media::after{display:none;}
  .lcard-capbar{background:var(--scrim);padding:6px 10px;gap:8px;}
  .lcard-tenant,.lcard-count{text-shadow:none;font-size:10px;font-weight:500;letter-spacing:-.2px;}
  .lcard-updated{display:inline-flex;}
  article.lcard .lcard-save{top:14px;right:14px;width:28px;height:28px;border-radius:6px;border:1px solid var(--icon-stroke);color:var(--icon-stroke);background:#fff;}
  article.lcard .lcard-save svg{width:17px;height:17px;}
  article.lcard .lcard-save:hover{background:#fff;}
  article.lcard .lcard-save.active,
  article.lcard .lcard-save.pd-fav-active{background:#fff;border-color:var(--primary);color:var(--primary);}
  .lcard-status{top:12px;left:12px;}

  /* society -> price -> title -> location */
  .lcard-inner{padding:14px 10px 12px;gap:11px;}
  .lcard-head{order:1;}
  .lcard-society{font-size:14px;font-weight:600;color:var(--ink);}
  .lcard-price{order:2;gap:6px;}
  .lcard-price .amt{font-size:21px;font-weight:700;}
  .lcard-price .unit{font-size:14.5px;margin-left:-2px;}
  .lcard-title{order:3;font-size:13px;font-weight:600;line-height:1.4;}
  /* PID is static on mobile, so the title needs no clearance */
  .lcard--no-society .lcard-title{padding-right:0;}
  .lcard-loc{order:4;font-size:14px;align-items:flex-start;}
  .lcard-specs{display:none;}

  /* PID becomes a left-rounded orange tab, flush to the card edge */
  .lcard-pid{position:static;order:9;margin-left:auto;margin-right:-10px;background:var(--primary-wash);color:var(--primary);font-size:10px;font-weight:500;line-height:1.2;padding:6px 10px;border-radius:6px 0 0 6px;clip-path:none;}
  .lcard-pid b{color:var(--primary);font-weight:500;}

  .lcard-foot{padding:10px;gap:8px;min-height:0;}
  .lcard-lister{gap:0;margin-right:auto;}
  .lcard-lister .lister-sep,.lcard-lister .lister-time{display:none;}
  /* radius/font-size/height already match the base .btn-number rule -
     no override needed now that height (not padding) drives its size. */
}

/* ============ COMPACT CARD (homepage carousel) ============
   Same stacked layout as the mobile card above, applied unconditionally
   (not viewport-gated) and sized to fit a fixed-width horizontal-scroll
   slot instead of a full-width phone screen - see
   front/home/recommended-rent-listing-preview.blade.php. Width matches
   the .hp-prop-card slot it replaces (style1.css/responsive1.css) so the
   row doesn't jump when other tabs (Buy/Flatmate) still render their own
   .hp-prop-card in the same track. */
/* Measured: at 300px the footer (Listed By + View Number + WhatsApp +
   Share) already fits with ~50px to spare - Listed By stacks its two
   lines ("Listed By"/"Owner") instead of running them side by side, so
   it's only ~43px wide, not as much room as it looks like it needs.
   +20px anyway now that Listed By shows to every viewer (not just
   paid) - more breathing room, not a fix for an actual overflow. */
.lcard--compact{flex:0 0 320px;width:320px;flex-direction:column;border-radius:16px;border-color:var(--stroke-mcard);}
.lcard--compact:hover{box-shadow:0 14px 34px -26px rgba(0,0,0,.4);}

/* aspect-ratio, not a fixed height - same proportions as the real mobile
   card (node 5840:16825) instead of the flatter 190px the old .hp-prop-card
   used, per the source design. */
.lcard--compact .lcard-media{width:100%;height:auto;aspect-ratio:348/322;align-self:auto;}
.lcard--compact .lcard-media::after{display:none;}
.lcard--compact .lcard-capbar{background:var(--scrim);padding:6px 10px;gap:8px;}
.lcard--compact .lcard-tenant,.lcard--compact .lcard-count{text-shadow:none;font-size:10px;font-weight:500;letter-spacing:-.2px;}
.lcard--compact .lcard-updated{display:inline-flex;}
.lcard--compact.lcard .lcard-save{top:14px;right:14px;width:28px;height:28px;border-radius:6px;border:1px solid var(--icon-stroke);color:var(--icon-stroke);background:#fff;}
.lcard--compact.lcard .lcard-save svg{width:17px;height:17px;}
.lcard--compact.lcard .lcard-save:hover{background:#fff;}
.lcard--compact.lcard .lcard-save.active,
.lcard--compact.lcard .lcard-save.pd-fav-active{background:#fff;border-color:var(--primary);color:var(--primary);}
.lcard--compact .lcard-status{top:12px;left:12px;}

.lcard--compact .lcard-inner{padding:14px 10px 12px;gap:11px;}
.lcard--compact .lcard-head{order:1;}
.lcard--compact .lcard-society{font-size:14px;font-weight:600;color:var(--ink);}
.lcard--compact .lcard-price{order:2;gap:6px;}
.lcard--compact .lcard-price .amt{font-size:21px;font-weight:700;}
.lcard--compact .lcard-price .unit{font-size:14.5px;margin-left:-2px;}
/* Icon-only (see blade partial) - drop the text gap/padding so it reads
   as a small round tick badge instead of a pill with empty space. */
.lcard--compact .verified{gap:0;padding:5px;}
.lcard--compact .lcard-title{order:3;font-size:15px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lcard--compact.lcard--no-society .lcard-title{padding-right:0;}
.lcard--compact .lcard-loc{order:4;font-size:14px;align-items:flex-start;}
.lcard--compact .lcard-specs{display:none;}

.lcard--compact .lcard-pid{position:static;order:9;margin-left:auto;margin-right:-10px;background:var(--primary-wash);color:var(--primary);font-size:10px;font-weight:500;line-height:1.2;padding:6px 10px;border-radius:6px 0 0 6px;clip-path:none;}
.lcard--compact .lcard-pid b{color:var(--primary);font-weight:500;}

.lcard--compact .lcard-foot{padding:10px;gap:8px;min-height:0;flex-wrap:wrap;row-gap:8px;}
.lcard--compact .lcard-lister{gap:0;margin-right:auto;}
.lcard--compact .lcard-lister .lister-sep,.lcard--compact .lcard-lister .lister-time{display:none;}

@media (max-width:767px){
  .lcard--compact{flex:0 0 292px;width:292px;}
  /* 272px is tight enough that a wider rent figure (5-6 digits, e.g.
     ₹1,05,000) plus the verified tick plus PID can still overflow onto
     a second line even with the icon-only badge - trim the price row's
     own sizes a bit further here rather than widen the card again. */
  .lcard--compact .lcard-price{gap:4px;}
  .lcard--compact .lcard-price .amt{font-size:18px;}
  .lcard--compact .lcard-price .unit{font-size:12.5px;margin-left:-1px;}
  .lcard--compact .verified{padding:4px;}
  .lcard--compact .lcard-pid{font-size:9px;padding:5px 8px;}
}

/* =========================================================
   EMPTY STATE — rendered by listingLoadSearchV2.blade.php when a v2
   search returns nothing.

   Every rule is scoped under .lp-empty-state on purpose. style1.css
   already defines bare .lp-chip / .lp-empty-chips / .lp-similar-heading
   for the OLD listingLoad.blade.php empty state, and it loads after this
   file - at equal specificity those would win and this block would
   silently do nothing. Scoping raises specificity to 0,2,0 and, just as
   importantly, leaves the v1 template's styling exactly as it is.

   Tokens are redeclared here because .lcard defines them on itself
   rather than on :root, and the empty state is a sibling of the cards.

   The count beside each chip is the number of homes that come back if
   that filter is removed - server-computed, not decoration.
   ========================================================= */

.lp-empty-state{
  --primary:#FF5403;
  --primary-tint:#FEF8F6;
  --primary-wash:rgba(255,84,3,.22);
  --ink:#333333;
  --ink-soft:#676767;
  --stroke-card:#E5E5E5;

  font-family:var(--lr-font);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
  padding:8px 0 4px;
}

.lp-empty-state .lp-empty-title{
  font-size:19px;
  font-weight:700;
  line-height:1.3;
  margin:0;
  color:var(--ink);
}

.lp-empty-state .lp-empty-sub{
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-soft);
  margin:-10px 0 0;
}

.lp-empty-state .lp-empty-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:10px;
  margin:0;
}

.lp-empty-state .lp-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--primary-tint);
  border:1px solid var(--primary-wash);
  border-radius:999px;
  padding:7px 8px 7px 14px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
  max-width:100%;
}

/* Badge treatment so the number never reads as part of the filter label. */
.lp-empty-state .lp-chip-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.lp-empty-state .lp-chip-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:background .18s ease,color .18s ease;
}

.lp-empty-state .lp-chip-remove:hover{
  background:var(--primary);
  color:#fff;
}

.lp-empty-state .lp-chip-remove:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.lp-empty-state .lp-similar-heading{
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  padding-top:16px;
  border-top:1px solid var(--stroke-card);
  margin:4px 0 0;
  text-align:left;
}

/* .pc2-listing-list already supplies the 24px column gap. */
.lp-empty-state .lp-similar-cards{
  margin-top:2px;
}

@media (max-width:760px){
  .lp-empty-state{gap:14px;}
  .lp-empty-state .lp-empty-title{font-size:17px;}
  .lp-empty-state .lp-empty-sub{font-size:14px;}
  .lp-empty-state .lp-chip{font-size:13.5px;padding:6px 7px 6px 12px;}
  .lp-empty-state .lp-similar-heading{font-size:15px;}
}

@media (prefers-reduced-motion:reduce){
  .lp-empty-state .lp-chip-remove{transition:none;}
}
/* Rented-out cards drop the whole-card <a> for a <div> (see _propertyCardV2),
   so the wrapper is restated at the inline display the <a> resolved to on
   every surface - the block <article> inside does the actual layout, so this
   keeps the swap visually byte-identical rather than introducing a new block
   box. Expired listings keep their link and never get this class. */
.pc2-card-link--dead{display:inline;cursor:default;}