.kismet-scope {
  /* Inherit the host page's font (third-party hosts); DM Sans stays loaded as a
     fallback. This sheet is enqueued AFTER kismet-tailwind.css with no dep array, so
     it must also resolve to `inherit` or it re-forces DM Sans on the .kismet-scope
     root and every element consuming these tokens. See docs/ARCHITECTURE-ISSUES.md AI-6. */
  --vr-font-body: inherit;
  --vr-font-heading: inherit;
  font-family: inherit;
  box-sizing: border-box;
}

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

@media (hover: hover) {
  .kismet-scope [data-kismet-sr="share"],
  /* A favorited heart (data-favorited="true") persists when un-hovered — it opts
     out of this hide. The selector has the same specificity as Tailwind's
     .opacity-100, so it's the :not() exclusion (not !important) that lets the
     liked state win the cascade. Share has no persisted state, so it still hides. */
  .kismet-scope [data-kismet-sr="favorite"]:not([data-favorited="true"]) {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="card"]:hover [data-kismet-sr="share"],
  .kismet-scope [data-kismet-sr="card"]:hover [data-kismet-sr="favorite"],
  .kismet-scope [data-kismet-sr="card"]:focus-within [data-kismet-sr="share"],
  .kismet-scope [data-kismet-sr="card"]:focus-within [data-kismet-sr="favorite"] {
    opacity: 1;
  }

  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Previous image"],
  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Next image"] {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="carousel"]:hover button[aria-label="Previous image"],
  .kismet-scope [data-kismet-sr="carousel"]:hover button[aria-label="Next image"] {
    opacity: 1;
  }

  .kismet-scope [data-kismet-sr="carousel"] [aria-label^="Image "] {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="carousel"]:hover [aria-label^="Image "] {
    opacity: 1;
  }
}

@media (hover: none) {
  .kismet-scope [data-kismet-sr="share"],
  .kismet-scope [data-kismet-sr="favorite"] {
    opacity: 1;
  }

  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Previous image"],
  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Next image"] {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="carousel"] [aria-label^="Image "] {
    opacity: 1;
  }
}

.kismet-scope .bg-black\/25 {
  background-color: rgba(0, 0, 0, 0.25);
}

.kismet-scope .hover\:bg-black\/35:hover {
  background-color: rgba(0, 0, 0, 0.35);
}

.kismet-scope .bg-white\/60 {
  background-color: rgba(255, 255, 255, 0.6);
}

.kismet-scope .hover\:bg-white\/80:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.kismet-scope .bg-white\/50 {
  background-color: rgba(255, 255, 255, 0.5);
}

.kismet-scope .backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.kismet-scope .line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kismet-scope .text-\[10px\] {
  font-size: 10px;
}

.kismet-scope .text-\[11px\] {
  font-size: 11px;
}

.kismet-scope .text-\[12px\] {
  font-size: 12px;
}

.kismet-scope .text-\[13px\] {
  font-size: 13px;
}

.kismet-scope .text-\[15px\] {
  font-size: 15px;
}

.kismet-scope .text-\[17px\] {
  font-size: 17px;
}

.kismet-scope .mt-\[3px\] {
  margin-top: 3px;
}

.kismet-scope .mt-\[5px\] {
  margin-top: 5px;
}

.kismet-scope .px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.kismet-scope .pt-3\.5 {
  padding-top: 0.875rem;
}

.kismet-scope .pb-\[18px\] {
  padding-bottom: 18px;
}

.kismet-scope .gap-\[3px\] {
  gap: 3px;
}

.kismet-scope .border-\[#e5e7eb\] {
  border-color: #e5e7eb;
}

.kismet-scope .hover\:border-\[#374151\]:hover {
  border-color: #374151;
}

.kismet-scope .text-\[#4b5563\] {
  color: #4b5563;
}

.kismet-scope .hover\:text-\[#374151\]:hover {
  color: #374151;
}

.kismet-scope .bg-\[\#ffffff\] {
  background-color: #ffffff;
}

.kismet-scope .bg-\[#f3f4f6\] {
  background-color: #f3f4f6;
}

.kismet-scope .text-\[#4b5563\] {
  color: #4b5563;
}

.kismet-scope .text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.kismet-scope .group-hover\/carousel\:opacity-100:is(.group\/carousel:hover *) {
  opacity: 1;
}

.kismet-scope .aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}

.kismet-scope .leading-\[1\.3\] {
  line-height: 1.3;
}

/* SSR card link hover — mirrors the canonical PropertyCard's default imageZoom hover shadow. */
.kismet-scope a.kismet-card-link {
  transition: box-shadow 0.3s;
}

.kismet-scope a.kismet-card-link:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.kismet-scope .flex-\[0_0_100\%\] {
  flex: 0 0 100%;
}

.kismet-scope .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.kismet-scope .kismet-sr-card-hover {
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.kismet-scope [data-kismet-sr="carousel"] {
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.kismet-scope [data-kismet-sr="carousel-dot"][aria-current="true"] {
  background-color: white;
}

.kismet-scope [data-kismet-sr="carousel-dot"]:not([aria-current="true"]) {
  background-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 639px) {
  .kismet-scope [data-component="card-badges"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .kismet-scope [data-component="card-badges"]::-webkit-scrollbar {
    display: none;
  }
}

/* Cards fill their layout slot, so a badge on one card can't leave its neighbours short.
 *
 * THE SYMPTOM: on any row where one property carries a card badge ("pet friendly") and the
 * others don't, the badged card ran ~47px taller and the rest sat short of the row, leaving a
 * ragged bottom edge. Seen on both the results grid and the "You might also like" row.
 *
 * THE CAUSE IS NOT THE BADGE. PropertyCard renders its root <a class="... flex flex-col h-full">
 * inside an UNSTYLED wrapper <div>, and that wrapper is what the grid/flex layout actually
 * stretches:
 *
 *     li.kismet-rp-card   (grid item)     stretched to the row height   646px
 *       > div             (no class)      collapses to its content      599px   <- the gap
 *         > a.h-full      (the card)      100% of 599, not of 646       599px
 *
 * So `h-full` works exactly as written — it just resolves against a parent that never took the
 * row's height. Every card was already failing to fill its slot; a badge merely makes ONE card
 * tall enough to reveal it. Remove all badges and the cards are equally wrong, just uniformly so.
 *
 * WHY THIS IS CSS AND NOT A FIX IN PropertyCard.tsx: the server-rendered markup comes from a
 * PUBLISHED @kismet-tech/elements version pinned per render generation (kismet.travel installs
 * 0.1.25/0.1.27/0.1.29/0.1.30 side by side). Editing the .tsx changes only the plugin's own
 * browser bundle, so SSR markup and hydrated markup would disagree — a hydration mismatch, on
 * pages already reporting React #418. A rule in this stylesheet applies to whatever markup
 * arrived, on every generation at once, with no package publish and no pin bump.
 *
 * Fix the wrapper in the component when the elements release train next moves, and delete this.
 *
 * Verified on staging at 1258x976: results grid rows go 599/646-mixed -> uniform per row, and the
 * similar-properties row goes 452/499 -> 499 across all 8 cards, with the price line (mt-auto)
 * staying bottom-aligned in both.
 *
 * ---------------------------------------------------------------------------------------------
 * `:only-child` IS LOAD-BEARING — DO NOT DROP IT (bd Kismet-4bzugm, 2026-08-10).
 *
 * `.snap-start` is a TAILWIND UTILITY owned by the render service, not a hook this plugin owns.
 * Bare `.snap-start > div` therefore matched far more than the property-card wrapper it was
 * written for. It also matched REVIEW QUOTE CARDS, which carry `snap-start` too
 * (ReviewsSection.tsx:45, since the 2026-06-07 property-detail decomposition) — so their FIRST
 * CHILD, the 5-star row, was forced to fill the card:
 *
 *     div.snap-start (review card)                       173px
 *       > div.flex.items-center.gap-1.mb-2 (stars)   16px -> 139px   <- ate the whole card
 *       > p (the quote)                                   overflowed 82px BELOW the border
 *       > p (the date)                                    overflowed too
 *
 * On miamivacationrentals.com and hallson.co that put the review text on top of the "Guests
 * mention" chips. Both took the rule via HOST auto-update, with nobody on our side deploying.
 *
 * `:only-child` is the discriminator, measured in the live DOM: the property-card wrapper is its
 * `snap-start` parent's ONLY child, while a review card has three children. So this keeps the
 * fix on exactly the two surfaces the block above verified — the results grid and the
 * similar-properties row — and excludes every other `snap-start` user (review quote cards,
 * sleep cards, group-review cards; GroupReviews.tsx:76 already carried a workaround comment
 * about this rule's reach).
 *
 * Verified live after the change: review star row 139px -> 16px with the quote back inside the
 * card, and the similar-properties wrapper still equal to its inner card (497=497 on MVR,
 * 506=506 on hallson).
 */
.kismet-scope li.kismet-rp-card > div,
.kismet-scope .snap-start > div:only-child {
  height: 100%;
}