/* ==========================================
 * LISTINGS.CSS - PARKING LISTINGS SYSTEM
 * FILE: /css/discover/components/listings.css
 * VERSION: v=20251001
 * ==========================================
 * 🎯 PURPOSE: Parking spot listings, cards, and containers
 * 📱 COVERAGE: Desktop overlay + mobile and tablet bottom sheet listings
 * 🔧 FEATURES: Spot cards, loading states, responsive layout
 * 📄 IMPORTED BY: discover.html (line 326)
 * 🚀 STATUS: ACTIVE - Core listings display system
 * ========================================== */

/*   DEFENSIVE CSS: Prevent cached state issues on page reload
   These rules ensure correct initial state regardless of cached HTML/CSS*/

/* Desktop overlay visibility - only show on desktop - Removed non-standard :has() selector - use simpler, more reliable rules - Works with or without body.discover-page class to prevent timing issues - Use higher specificity to ensure these rules always apply - Mobile/tablet visibility - hide desktop overlay */
/*   END DEFENSIVE CSS*/

/*   SPACE TYPE TOGGLE (PARKING / STORAGE)
   Segmented control for switching between parking and storage modes*/

.space-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--discover-control-border);
  border-radius: 999px;
  background: var(--discover-control-track-bg);
  box-shadow: inset 0 1px 2px rgba(68, 64, 60, 0.05);
}

.dark .space-type-toggle {
  background: var(--discover-control-track-bg-dark);
  border-color: var(--discover-control-border-dark);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* Filters popup primary mode: All / Parking / Storage */
#amenities-popup .discover-space-type-mode-toggle,
#amenities-popup #discover-space-type-mode-toggle {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 0.2rem;
  padding: 0.28rem;
}

#amenities-popup .discover-space-type-mode-toggle .space-type-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

.space-type-btn {
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              color var(--transition-normal);
  white-space: nowrap;
  color: var(--discover-control-text-muted);
  background: transparent;
}

.dark .space-type-btn {
  color: var(--discover-control-text-muted-dark);
}

.space-type-btn:hover:not(.active) {
  color: var(--discover-control-text-strong);
  background: var(--discover-control-bg-hover);
}

.dark .space-type-btn:hover:not(.active) {
  color: var(--discover-control-text-strong-dark);
  background: var(--discover-control-bg-hover-dark);
}

/* Selected state: scoped to discover so specificity replaces !important vs Tailwind */
body.discover-page .space-type-toggle .space-type-btn.active,
body.discover-page button.space-type-btn.active {
  background: var(--discover-premium-ink);
  color: var(--discover-premium-surface-solid);
  border-color: var(--discover-premium-ink);
  box-shadow: var(--discover-control-shadow-active);
}

.dark body.discover-page .space-type-toggle .space-type-btn.active,
.dark body.discover-page button.space-type-btn.active,
body.dark.discover-page .space-type-toggle .space-type-btn.active,
body.dark.discover-page button.space-type-btn.active {
  background: #f5f5f4;
  color: #1c1917;
  border-color: #f5f5f4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Focus state for accessibility */
.space-type-btn:focus-visible {
  outline: 2px solid var(--discover-premium-muted);
  outline-offset: 2px;
}

/* Desktop overlay: equal segments on the full-width filter row */
#listings-overlay .space-type-toggle .space-type-btn,
.desktop-listings-header-filter-row .space-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* Touch-friendly sizing on mobile and tablet */

/*   END SPACE TYPE TOGGLE*/

/* Listings content */
#listings-content {
  /* Layout */
  max-width: 100%;
  width: 100%;

  overflow-y: visible; /* Desktop: #listings-overlay owns scroll */
  /* CHROME FIX: Changed from 'contain' to 'auto' - 'contain' blocks scroll events from
     reaching parent (#listings-overlay) in Chrome when hovering over content */
  overscroll-behavior: auto;
  /* CHROME FIX: Ensure wheel events pass through to parent scroll container */
  touch-action: pan-y pan-x;

  /* Ensure content never exceeds container width */
  box-sizing: border-box;

  /* Positioning */
  position: relative;

  /* CRITICAL: Allow flex to shrink so parent can scroll */
  flex: 1 1 auto;
  min-height: 0;
}

/* Discover: id + body beats Tailwind p-3 / overflow utilities without !important */
body.discover-page #listings-content {
  overflow-x: hidden;
  padding-right: 0;
}
/* Listings: base shell is not a scroller until .listings-scroll-active is applied. */
#listings-scroll-shell {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

body.bottom-sheet-spot-details-mode #listings-scroll-shell {
  overflow: hidden !important;
  background: var(--surface-raised, #fff);
  min-height: 0 !important;
  flex: 1 1 auto !important;
  padding-bottom: 0 !important;
}

.dark body.bottom-sheet-spot-details-mode #listings-scroll-shell,
body.dark.bottom-sheet-spot-details-mode #listings-scroll-shell {
  background: var(--color-dark-surface-raised, #262626);
}

body.bottom-sheet-spot-details-mode #listings-content-sheet.sheet-spot-details-loading {
  background: var(--surface-raised, #fff);
  min-height: 100%;
}

.dark body.bottom-sheet-spot-details-mode #listings-content-sheet.sheet-spot-details-loading,
body.dark.bottom-sheet-spot-details-mode #listings-content-sheet.sheet-spot-details-loading {
  background: var(--color-dark-surface-raised, #262626);
}

/* Spot-detail content enter / listings restore — class beats inline races. */
#listings-content-sheet.sheet-content-fade-pending {
  opacity: 0 !important;
  transform: translateY(10px);
  transition: none !important;
}

#listings-content-sheet.sheet-content-fade-in {
  opacity: 1 !important;
  transform: translateY(0);
  transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  #listings-content-sheet.sheet-content-fade-pending,
  #listings-content-sheet.sheet-content-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@keyframes sheet-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.sheet-skeleton-shimmer {
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: sheet-skeleton-shimmer 2.5s ease-in-out infinite;
}

.dark .sheet-skeleton-shimmer,
body.dark .sheet-skeleton-shimmer {
  background: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);
  background-size: 200% 100%;
}

.sheet-spot-details-skeleton {
  padding: 1rem;
  /* Reserve vertical room so skeleton → real detail does not collapse the photo/book band. */
  min-height: min(72vh, 520px);
  box-sizing: border-box;
}

.sheet-spot-details-skeleton__status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.875rem;
  min-height: 1.25rem;
}

.sheet-spot-details-skeleton__status-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--discover-premium-muted, #78716c);
  line-height: 1.25;
}

.dark .sheet-spot-details-skeleton__status-label,
body.dark .sheet-spot-details-skeleton__status-label {
  color: var(--discover-premium-muted, #a8a29e);
}

.sheet-spot-details-skeleton__header {
  margin-bottom: 1rem;
  min-height: 2.75rem;
}

.sheet-spot-details-skeleton__pill {
  height: 22px;
  width: 70px;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.sheet-spot-details-skeleton__title {
  height: 14px;
  width: 80%;
  border-radius: 4px;
}

.sheet-spot-details-skeleton__photo {
  position: relative;
  width: 100%;
  /* Match sheet spot-detail hero: short landscape band. */
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: min(28vh, 176px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  background: #e5e7eb;
}

.dark .sheet-spot-details-skeleton__photo,
body.dark .sheet-spot-details-skeleton__photo {
  background: #374151;
}

.sheet-spot-details-skeleton__photo-fill {
  width: 100%;
  height: 100%;
}

.sheet-spot-details-skeleton__photo-price {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 6px;
}

.sheet-spot-details-skeleton__photo-price-bar {
  height: 16px;
  width: 50px;
  border-radius: 4px;
}

.sheet-spot-details-skeleton__photo-book {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-spot-details-skeleton__photo-book-btn {
  height: 44px;
  width: 132px;
  border-radius: 8px;
}

.sheet-spot-details-skeleton__card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.875rem;
  margin-bottom: 1rem;
  background: #fff;
}

.sheet-spot-details-skeleton__card:last-child {
  margin-bottom: 0;
}

.dark .sheet-spot-details-skeleton__card,
body.dark .sheet-spot-details-skeleton__card {
  background: #1f2937;
  border-color: #4b5563;
}

.sheet-spot-details-skeleton__card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.sheet-spot-details-skeleton__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.sheet-spot-details-skeleton__label {
  height: 16px;
  width: 110px;
  border-radius: 4px;
}

.sheet-spot-details-skeleton__label--sm {
  width: 90px;
}

.sheet-spot-details-skeleton__line {
  height: 13px;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 0.375rem;
}

.sheet-spot-details-skeleton__line--short {
  width: 75%;
  margin-bottom: 0;
}

.sheet-spot-details-skeleton__chip-row {
  display: flex;
  gap: 0.5rem;
}

.sheet-spot-details-skeleton__chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  background: #e5e7eb;
  border-radius: 8px;
}

.dark .sheet-spot-details-skeleton__chip,
body.dark .sheet-spot-details-skeleton__chip {
  background: #374151;
}

.sheet-spot-details-skeleton__chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.sheet-spot-details-skeleton__chip-kicker {
  height: 10px;
  width: 45px;
  border-radius: 3px;
  margin-bottom: 4px;
}

.sheet-spot-details-skeleton__chip-kicker--sm {
  width: 40px;
}

.sheet-spot-details-skeleton__chip-value {
  height: 12px;
  width: 60px;
  border-radius: 3px;
}

.sheet-spot-details-skeleton__chip-value--sm {
  width: 55px;
}

/* Mobile listings content - rendered into the scroll body */
#listings-content-sheet {
  /* Layout */
  max-width: 100%;
  width: 100%;

  /* Behavior - listings mode sizes naturally; spot details mode scrolls in this node */
  overflow-x: hidden;
  overflow-y: visible;
  /* CHROME FIX: Changed to 'auto' for better animation performance */
  overscroll-behavior: auto;

  /* Positioning */
  position: relative;

  /* Mobile specific: grow with the sheet body in spot details mode */
  flex: 1 1 auto;
  min-height: 0;
  height: auto;

  /* The scroll shell, not this dynamic content node, owns max-height. */

}

body.discover-page #listings-content-sheet.mobile-listings-container:not(.spot-details-scroll-active) {
  padding: 0.25rem var(--discover-mobile-panel-padding, 0.75rem) 0;
}

/* Mobile/tablet sheet: scroll-padding for end-of-list; safe-area inset is on #listings-sheet padding-bottom (bottomsheet.css). */
@media (max-width: 1100px) {
  body.discover-page #listings-scroll-shell:not(.listings-scroll-active) {
    padding-bottom: 0.5rem;
    scroll-padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }

  body.discover-page #listings-scroll-shell.listings-scroll-active {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    scroll-padding-bottom: max(1.25rem, var(--discover-sheet-bottom-gap, 0.5rem)) !important;
  }

  body.discover-page #listings-content-sheet {
    padding-bottom: 0;
    scroll-padding-bottom: 0;
  }
}

@media (max-width: 567px) and (hover: none) and (pointer: coarse) {
  body.discover-page #listings-scroll-shell:has(.discover-empty-state) {
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  body.discover-page #listings-scroll-shell:has(.discover-empty-state) #listings-content-sheet,
  body.discover-page #listings-scroll-shell:has(.discover-empty-state) .discover-empty-state {
    touch-action: pan-y;
  }

  body.discover-page #listings-scroll-shell:has(.discover-empty-state) .discover-empty-action {
    touch-action: manipulation;
  }
}
/* Mobile listings container - Flex optimization */
.mobile-listings-container {
  min-height: 0;
  flex-basis: 0;
}
/* LISTINGS CONTENT - Populated State */
/* CRITICAL: Scope desktop and mobile separately to prevent conflicts */

/* No results message styling - legacy blocks only (not .discover-empty-state) */
#listings-content-sheet > .text-center:not(.discover-empty-state) {
  margin-bottom: 4rem !important;
  padding-bottom: 2rem !important;
}

#listings-content-sheet .discover-empty-state.text-center.text-neutral-500 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Make the "no results" SVG icon smaller */
#listings-content-sheet .text-center svg.w-12.h-12 {
  width: 2.5rem !important; /* Smaller icon (40px instead of 48px) */
  height: 2.5rem !important;
}
/* CRITICAL: Scope dark mode empty states separately */

/* Global rule to ensure spot cards are never hidden */
/* This applies regardless of loading state to fix timing issues */
#listings-content .spot-card[data-spot-id],
#listings-overlay .spot-card[data-spot-id] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Skeleton loader animation - reuses existing loading-shimmer keyframe */

/* Skeleton card shimmer effect - Optimized for smooth, fast animation */
.animate-loading-shimmer {
  background-size: 200% 100%;
  animation: loading-shimmer 1.2s ease-in-out infinite;
  will-change: background-position;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Smooth fade-in for skeleton cards only (opacity — no translateY layout shift).
   Skip boot-seeded skeletons so the first sheet reveal does not shimmer-in over the footer. */
#listings-content .discover-listings-skeleton-stack:not([data-discover-boot-skeleton]) .discover-listing-skeleton,
#listings-content-sheet .discover-listings-skeleton-stack:not([data-discover-boot-skeleton]) .discover-listing-skeleton {
  animation: discoverSkeletonFadeIn 0.15s ease-out;
}

.discover-listings-skeleton-stack {
  width: 100%;
  min-height: 8rem;
}

@keyframes discoverSkeletonFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Legacy shimmer fade (desktop overlay only); sheet uses discover-listings-skeleton-stack above */
#listings-content > div .animate-loading-shimmer:not([data-spot-id]),
#listings-content-sheet > div:not(.discover-listings-skeleton-stack) .animate-loading-shimmer:not([data-spot-id]) {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Optimize skeleton rendering performance */
.spot-card[class*="animate-loading-shimmer"],
.spot-card:has(.animate-loading-shimmer) {
  contain: layout style paint;
  transform: translateZ(0);
}

/* Global rule to ensure mobile spot cards are never display/visibility-hidden.
   Do not force opacity — that blocks feed-enter and sheet content fades. */
#listings-content-sheet .spot-card[data-spot-id],
#listings-sheet .spot-card[data-spot-id] {
  display: block !important;
  visibility: visible !important;
}
/* LISTINGS CONTENT - Scrollbar Styling */
/* Apple-style listings scrollbar - ultra thin and elegant */
/* CRITICAL: Scope scrollbar styles separately for desktop and mobile to prevent conflicts */

/* MOBILE SCROLLBAR: Touch devices - ultra thin scrollbar (users scroll with gestures) */
@media (max-width: 1100px) and (hover: none) and (pointer: coarse) {
  #listings-scroll-shell::-webkit-scrollbar {
    width: 2px !important; /* Apple ultra-thin for touch devices */
  }

  #listings-scroll-shell::-webkit-scrollbar-thumb {
    background: #00000026 !important; /* Subtle visibility */
    border-radius: 1px !important; /* Minimal radius */
    border: none !important;
    min-height: 30px !important;
  }

  #listings-scroll-shell::-webkit-scrollbar-thumb:hover {
    background: #0000004d !important; /* More visible on hover */
  }

  #listings-scroll-shell::-webkit-scrollbar-track {
    background: transparent !important; /* Invisible track */
  }

  /* Remove scrollbar arrows */
  #listings-scroll-shell::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Dark mode */
  .dark #listings-scroll-shell::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .dark #listings-scroll-shell::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
  }
}

/* MOBILE SCROLLBAR: Mouse devices (desktop in responsive mode) - wider scrollbar for click/drag */
/* CHROME FIX: When testing mobile layout with a mouse, scrollbar must be interactive */
@media (max-width: 1100px) and (hover: hover) and (pointer: fine) {
  #listings-scroll-shell {
    /* Reserve space for scrollbar */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #00000033 transparent;
  }

  #listings-scroll-shell::-webkit-scrollbar {
    width: 8px !important; /* 8px minimum for reliable mouse interaction in Chrome */
    display: block !important;
  }

  #listings-scroll-shell::-webkit-scrollbar-thumb {
    background: #00000033 !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    min-height: 40px !important;
  }

  #listings-scroll-shell::-webkit-scrollbar-thumb:hover {
    background: #00000059 !important;
    background-clip: padding-box !important;
  }

  #listings-scroll-shell::-webkit-scrollbar-thumb:active {
    background: #00000080 !important;
    background-clip: padding-box !important;
  }

  #listings-scroll-shell::-webkit-scrollbar-track {
    background: #0000000d !important;
    border-radius: 4px !important;
  }

  /* Remove scrollbar arrows */
  #listings-scroll-shell::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Dark mode */
  .dark #listings-scroll-shell {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  .dark #listings-scroll-shell::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    background-clip: padding-box !important;
  }

  .dark #listings-scroll-shell::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    background-clip: padding-box !important;
  }

  .dark #listings-scroll-shell::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* ==============================================
 * DESKTOP LISTINGS OVERLAY SCROLLBAR - CHROME FIX
 * CRITICAL: #listings-overlay is the scroll container on desktop
 * Without these styles, Chrome scrollbar may not respond to mouse interaction
 * ============================================== */

/* DESKTOP LISTINGS OVERLAY
 * Shell paint = --discover-chrome-*; geometry at ≥1101 = rail width tokens
 * (body.discover-page block below). */

#listings-overlay {
  position: absolute;
  top: calc(var(--discover-current-topbar-height, 4.5rem) + 0.75rem);
  left: 0.75rem;
  width: min(400px, calc(100vw - 2.5rem));
  max-width: calc(100vw - 2.5rem);
  min-width: 260px;
  max-height: calc(min(100dvh, 100vh) - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem);
  z-index: var(--z-overlay);
  box-sizing: border-box;
  flex-direction: column;

  background: var(--discover-chrome-surface);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  border: 1px solid var(--discover-chrome-border);
  border-radius: var(--discover-chrome-radius-lg);
  box-shadow: var(--discover-chrome-shadow-panel);

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto;

  transition: transform var(--transition-cubic),
        opacity var(--transition-normal),
        box-shadow var(--transition-normal);

  isolation: auto !important;
  contain: none !important;
}

/* While Discover is backgrounded (class toggled from lifecycle if present), freeze
   panel chrome transitions so GPU thrash doesn't look like list flicker. */
html.discover-page-hidden #listings-overlay,
html.discover-page-hidden body.discover-page #listings-overlay {
  transition: none !important;
}

/* Non-discover dark hosts: panel dark vars. Discover remaps --discover-chrome-* in tokens. */
.dark #listings-overlay {
  background: var(--discover-listings-panel-bg-dark);
  border-color: var(--discover-listings-panel-border-dark);
  box-shadow: var(--discover-popover-shadow-dark);
}

.dark body.discover-page #listings-overlay,
body.dark.discover-page #listings-overlay {
  background: var(--discover-chrome-surface);
  border-color: var(--discover-chrome-border);
  box-shadow: var(--discover-chrome-shadow-panel);
}

/* Desktop listings overlay positioning and visibility.
 * Paint is owned by base #listings-overlay (--discover-chrome-*).
 * Final rail geometry (width/left/top) is owned by body.discover-page rail tokens later. */
@media (min-width: 1101px) {
  /* STANDARD FIX: Work with or without body.discover-page class to prevent timing issues */
  #listings-overlay,
  body.discover-page #listings-overlay,
  body #listings-overlay,
  html body #listings-overlay {
    position: fixed !important;
    top: calc(var(--discover-current-topbar-height, 4.5rem) + 0.75rem) !important;
    left: 0.75rem !important;
    width: min(400px, calc(100vw - 2.5rem)) !important;
    max-width: calc(100vw - 2.5rem) !important;
    min-width: 260px !important;
    max-height: calc(100dvh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    z-index: var(--z-overlay) !important;
    display: flex !important; /* Flex layout to match listings.css */
    flex-direction: column !important; /* Ensure flex column layout */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* CRITICAL: Override Tailwind's hidden class on desktop */
  #listings-overlay.hidden,
  body.discover-page #listings-overlay.hidden,
  body #listings-overlay.hidden,
  html body #listings-overlay.hidden {
    display: flex !important; /* Flex layout to match listings.css */
    flex-direction: column !important; /* Ensure flex column layout */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Desktop overlay sticky header: frosted glass over scrolling listings */
#listings-overlay .discover-listings-sticky-header {
  background: var(--discover-glass-medium, rgba(255, 255, 255, 0.92));
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  border-bottom: 1px solid color-mix(in srgb, var(--discover-chrome-border) 72%, transparent);
  flex-shrink: 0;
}

.dark #listings-overlay .discover-listings-sticky-header,
body.dark.discover-page #listings-overlay .discover-listings-sticky-header {
  background: var(--discover-listings-panel-bg-dark, rgba(23, 23, 23, 0.94));
  border-bottom-color: color-mix(
    in srgb,
    var(--discover-chrome-border, var(--discover-listings-panel-border-dark)) 72%,
    transparent
  );
}

@media (min-width: 1101px) {
  #listings-overlay .discover-listings-sticky-header > .relative {
    display: block !important;
  }

  .desktop-listings-header-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
  }

  .desktop-listings-header-top,
  .desktop-listings-header-top.listings-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
  }

  .desktop-listings-header-filter-row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  #listings-count,
  #listings-overlay .listings-header-subtitle {
    display: block;
    min-height: 0;
    font-size: 0.8125rem !important;
    line-height: 1.25;
    font-weight: 500 !important;
    color: var(--color-text-secondary, #64748b);
  }

  .dark #listings-overlay .listings-header-subtitle {
    color: var(--color-text-secondary-dark, #94a3b8);
  }

  .listings-header-actions--desktop {
    gap: 0.45rem !important;
  }
}

/* Marketplace list header: title carries “spaces”; count is a quieter availability line */
.listings-header-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.12rem;
  min-width: 0;
}

.listings-header-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #0f172a);
}

.discover-search-trust-line {
  margin: 0;
  max-width: 22rem;
  color: var(--discover-chrome-muted, var(--color-text-secondary, #64748b));
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
}

.discover-search-trust-line__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

body.bottom-sheet-spot-details-mode .discover-search-trust-line,
#listings-sheet.bottom-sheet-spot-details-mode .discover-search-trust-line {
  display: none;
}

.dark .listings-header-title {
  color: var(--color-text-primary-dark, #f8fafc);
}

.listings-header-subtitle,
#listings-count.listings-header-subtitle,
#listings-count-sheet.listings-header-subtitle {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text-secondary, #64748b) !important;
}

.dark .listings-header-subtitle,
.dark #listings-count.listings-header-subtitle,
.dark #listings-count-sheet.listings-header-subtitle {
  color: var(--color-text-secondary-dark, #94a3b8) !important;
}

.listings-header-filters-label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ==============================================
 * FILTER AND SORT CONTROLS
 * CSS-owned visual treatment for desktop overlay and sheet controls.
 * ============================================== */

.listings-header-control,
#amenities-popup-trigger-desktop,
#amenities-popup-trigger-sheet,
#sort-toggle-desktop,
#sort-toggle-sheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--discover-listings-header-control-gap, 0.28rem);
  min-height: var(--discover-listings-header-control-min-height, 1.95rem);
  width: auto !important;
  min-width: auto !important;
  max-width: fit-content !important;
  padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.5rem) !important;
  border: 1px solid var(--discover-control-border) !important;
  border-radius: var(--discover-listings-header-control-radius, 999px) !important;
  background: var(--discover-control-bg) !important;
  color: var(--discover-control-text) !important;
  box-shadow: var(--discover-control-shadow) !important;
  font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: var(--line-height-tight, 1.2) !important;
  transition: background var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              color var(--transition-normal);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: var(--z-button-elevated) !important;
}

.dark .listings-header-control,
.dark #amenities-popup-trigger-desktop,
.dark #amenities-popup-trigger-sheet,
.dark #sort-toggle-desktop,
.dark #sort-toggle-sheet {
  background: var(--discover-control-bg-dark) !important;
  color: var(--discover-control-text-dark) !important;
  border-color: var(--discover-control-border-dark) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.listings-header-control:hover,
#amenities-popup-trigger-desktop:hover,
#amenities-popup-trigger-sheet:hover,
#sort-toggle-desktop:hover,
#sort-toggle-sheet:hover,
.listings-header-control[aria-expanded="true"],
#amenities-popup-trigger-desktop[aria-expanded="true"],
#amenities-popup-trigger-sheet[aria-expanded="true"],
#sort-toggle-desktop[aria-expanded="true"],
#sort-toggle-sheet[aria-expanded="true"] {
  background: var(--discover-control-bg-hover) !important;
  border-color: var(--discover-control-border-hover) !important;
  color: var(--discover-control-text-strong) !important;
}

.dark .listings-header-control:hover,
.dark #amenities-popup-trigger-desktop:hover,
.dark #amenities-popup-trigger-sheet:hover,
.dark #sort-toggle-desktop:hover,
.dark #sort-toggle-sheet:hover,
.dark .listings-header-control[aria-expanded="true"],
.dark #amenities-popup-trigger-desktop[aria-expanded="true"],
.dark #amenities-popup-trigger-sheet[aria-expanded="true"],
.dark #sort-toggle-desktop[aria-expanded="true"],
.dark #sort-toggle-sheet[aria-expanded="true"] {
  background: var(--discover-control-bg-hover-dark) !important;
  border-color: var(--discover-control-border-hover-dark) !important;
  color: var(--discover-control-text-strong-dark) !important;
}

.listings-header-control:focus-visible,
#amenities-popup-trigger-desktop:focus-visible,
#amenities-popup-trigger-sheet:focus-visible,
#sort-toggle-desktop:focus-visible,
#sort-toggle-sheet:focus-visible {
  outline: 2px solid var(--discover-premium-muted);
  outline-offset: 2px;
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1rem;
  min-height: 1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--discover-control-text, #44403c) 14%, transparent);
  color: var(--discover-premium-muted, #78716c);
  border: none;
  box-shadow: none;
}

.filter-count--inline {
  position: static;
  margin-left: 0.12rem;
  transform: none;
}

.dark body.discover-page .filter-count,
html.dark body.discover-page .filter-count,
body.dark.discover-page .filter-count {
  background: color-mix(in srgb, var(--discover-control-text-dark, #e7e5e4) 16%, transparent);
  color: var(--discover-premium-muted, #a8a29e);
}

body.discover-page .filter-count.hidden,
body.discover-page .filter-count[hidden],
body.discover-page [data-filter-count].hidden,
body.discover-page [data-filter-count][hidden] {
  display: none !important;
}

#amenities-popup-trigger-desktop svg,
#amenities-popup-trigger-sheet svg,
#sort-toggle-desktop svg,
#sort-toggle-sheet svg {
  flex-shrink: 0;
}

#amenities-popup-trigger-desktop svg,
#amenities-popup-trigger-sheet svg,
#discover-refine-trigger-sheet svg,
#discover-refine-trigger-sheet .discover-refine-trigger-sheet__icon {
  width: var(--discover-listings-header-control-icon, 0.8125rem) !important;
  height: var(--discover-listings-header-control-icon, 0.8125rem) !important;
  min-width: var(--discover-listings-header-control-icon, 0.8125rem) !important;
  min-height: var(--discover-listings-header-control-icon, 0.8125rem) !important;
  max-width: var(--discover-listings-header-control-icon, 0.8125rem) !important;
  max-height: var(--discover-listings-header-control-icon, 0.8125rem) !important;
  flex-shrink: 0 !important;
}

#sort-toggle-desktop svg.mx-dropdown-arrow,
#sort-toggle-sheet svg.mx-dropdown-arrow {
  width: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
  height: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
}

#sort-label-desktop,
#sort-label-sheet {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Icon-only filter triggers (sliders + optional count badge); aria-label carries the name. */
#amenities-popup-trigger-desktop,
#amenities-popup-trigger-sheet {
  gap: 0.35rem !important;
}

.parking-longterm-row {
  background: transparent;
}

.parking-longterm-bubble:not(.border-green-500) {
  border: 1px solid var(--discover-control-border) !important;
  border-radius: 999px !important;
  background: var(--discover-control-bg) !important;
  color: var(--discover-control-text) !important;
  box-shadow: var(--discover-control-shadow) !important;
}

.parking-longterm-bubble:not(.border-green-500):hover {
  border-color: var(--discover-control-border-hover) !important;
  background: var(--discover-control-bg-hover) !important;
  color: var(--discover-control-text-strong) !important;
}

.dark .parking-longterm-bubble:not(.border-green-500) {
  border-color: var(--discover-control-border-dark) !important;
  background: var(--discover-control-bg-dark) !important;
  color: var(--discover-control-text-dark) !important;
}

.dark .parking-longterm-bubble:not(.border-green-500):hover {
  border-color: var(--discover-control-border-hover-dark) !important;
  background: var(--discover-control-bg-hover-dark) !important;
  color: var(--discover-control-text-strong-dark) !important;
}

.parking-longterm-bubble:focus-visible {
  outline: 2px solid var(--discover-premium-muted);
  outline-offset: 2px;
}

/* Sort dropdown menu - Professional styling with proper contrast */
/* Only apply styles when NOT hidden - base rules should respect hidden state */
#sort-dropdown-desktop:not(.hidden),
#sort-dropdown-sheet:not(.hidden) {
  border-radius: var(--radius-lg);
  border: 1px solid var(--discover-popover-border);
  box-shadow: var(--discover-popover-shadow, 0 20px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06));
  background: var(--discover-popover-bg) !important;
}
.dark #sort-dropdown-desktop:not(.hidden),
.dark #sort-dropdown-sheet:not(.hidden) {
  background: var(--discover-popover-bg-dark) !important;
  border-color: var(--discover-popover-border-dark);
  box-shadow: var(--discover-popover-shadow-dark, 0 20px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25)) !important;
}

/* RESPONSIVE: Make dropdown width match content size instead of fixed w-56 */
/* Only apply when NOT hidden */
#sort-dropdown-desktop:not(.hidden) {
  width: auto !important;
  min-width: 120px !important;
  max-width: 200px !important;
}

/* Bottom sheet sort menu: width set in JS from label text */
#sort-dropdown-sheet:not(.hidden) {
  min-width: 0 !important;
  box-sizing: border-box !important;
  position: fixed !important; /* Fixed to escape bottom sheet container */
  z-index: var(--z-discover-sort-dropdown) !important; /* High enough for sheet/map without using the maximum tier */
  isolation: isolate !important; /* Create new stacking context */
  contain: none !important; /* Don't contain z-index */
  /* JavaScript will calculate position based on trigger button */
}

/* DESKTOP: Use fixed positioning to escape listings overlay container */
#sort-dropdown-desktop:not(.hidden) {
  position: fixed !important; /* CRITICAL: Fixed to escape #listings-overlay container */
  z-index: var(--z-discover-sort-dropdown) !important; /* High enough for sheet/map without using the maximum tier */
  isolation: isolate !important; /* Create new stacking context */
  contain: none !important; /* Don't contain z-index */
  /* JavaScript will calculate position based on trigger button */
  /* CRITICAL: Ensure it can render outside the overlay */
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
}

/* If dropdown would fall off right edge, position it to the left */
/* Only apply when NOT hidden */
@media (max-width: 400px) {
  #sort-dropdown-sheet:not(.hidden) {
    right: auto !important;
    left: 0 !important; /* Align to left edge on very small screens */
  }
}

/*   TOUCHSCREEN DEVICE RESPONSIVE FIXES - SORT DROPDOWN*/

/* Actual touchscreen devices - smaller sort dropdown for mobile and tablet */
/* Only apply when NOT hidden */
@media (hover: none) and (pointer: coarse) {
  #sort-dropdown-desktop:not(.hidden) {
    min-width: 100px !important;
    max-width: 160px !important;
    font-size: 0.875rem !important;
    padding: 0.375rem 0 !important;
  }

  #sort-dropdown-sheet:not(.hidden) {
    font-size: 0.875rem !important;
    padding: 0.375rem 0 !important;
  }

  /* Sort dropdown menu items - smaller text and padding */
  #sort-dropdown-sheet .sort-option,
  #sort-dropdown-desktop .sort-option,
  #sort-dropdown-sheet button,
  #sort-dropdown-desktop button,
  #sort-dropdown-sheet a,
  #sort-dropdown-desktop a {
    font-size: 0.875rem !important; /* Smaller text (14px) */
    padding: 0.5rem 0.75rem !important; /* Reduced padding */
    line-height: 1.4 !important; /* Tighter line height */
  }

  /* Sort dropdown text - ensure it fits */
  #sort-dropdown-sheet span,
  #sort-dropdown-desktop span {
    font-size: 0.875rem !important;
  }

  /* Filter + sort header controls — smaller on touch */
  #amenities-popup-trigger-desktop,
  #amenities-popup-trigger-sheet,
  #sort-toggle-desktop,
  #sort-toggle-sheet {
    font-size: clamp(0.6875rem, 1.6vw, 0.72rem) !important;
    padding: 0.3rem 0.46rem !important;
    min-height: clamp(1.75rem, 3.8vw, 1.85rem) !important;
  }

  #amenities-popup-trigger-desktop span,
  #amenities-popup-trigger-sheet span,
  #sort-label-desktop,
  #sort-label-sheet {
    font-size: inherit !important;
  }

  #amenities-popup-trigger-desktop svg,
  #amenities-popup-trigger-sheet svg,
  #sort-toggle-desktop svg.mx-dropdown-arrow,
  #sort-toggle-sheet svg.mx-dropdown-arrow {
    width: 0.6875rem !important;
    height: 0.6875rem !important;
  }

}

/*   DISCOVER MENU RESPONSIVE CONSTRAINTS (Below 520px)*/

/* Very small screens (≤520px) - Constrain discover menu height */

/* Ultra small screens (≤400px) - Even more compact */
@media (max-width: 400px) {
  #discover-menu {
    bottom: auto !important;
    width: auto !important;
    min-width: min(10.5rem, calc(100vw - 1rem)) !important;
    max-width: min(18rem, calc(100vw - 1rem)) !important;
  }
}

/* Ensure dropdown buttons fit content properly */
#sort-dropdown-sheet .sort-option,
#sort-dropdown-desktop .sort-option {
  white-space: nowrap !important; /* Prevent text wrapping */
  padding: 0.5rem 1rem !important; /* Consistent padding */
  width: auto !important; /* Let content determine width */
  text-align: left !important; /* Ensure left alignment */
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.35;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

/* Sort dropdown options - ensure proper text visibility */
/* listings.css - sort dropdown option styling */
.sort-option {
  color: var(--discover-popover-text) !important;
}

/* listings.css - sort option hover states */
.sort-option:hover {
  background: var(--discover-popover-hover) !important;
  transform: translateX(2px);
}

/* Dark mode dropdown styling - keep aligned with the shared Discover popover palette. */
.dark #sort-dropdown-desktop,
/* Only apply dark mode styles when NOT hidden */
.dark #sort-dropdown-sheet:not(.hidden) {
  background: var(--discover-popover-bg-dark) !important;
  border-color: var(--discover-popover-border-dark);
  box-shadow: var(--discover-popover-shadow-dark, 0 20px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25)) !important;
}

.dark .sort-option {
  color: var(--discover-popover-text-dark) !important;
}

.dark .sort-option:hover {
  background: var(--discover-popover-hover-dark) !important;
}

/* Spot count - aligned with listings controls instead of competing blue badge styling */
#listings-count,
#listings-count-sheet {
  font-weight: 700 !important;
  font-size: 0.93rem !important;
  color: var(--discover-count-text) !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.dark #listings-count,
.dark #listings-count-sheet {
  color: var(--discover-count-text-dark) !important;
}

/* NOTE: Dark mode contrast styles consolidated in dark-mode.css */

/* SHARED MOBILE RULES: ≤519px (mobile only, tablet starts at 520px) */

/* MOBILE DROPDOWN - Width and positioning controlled by JavaScript for consistency */
/* OPTIMIZED: Reduced bottom padding for better scroll precision */
#listings-content-sheet,
.mobile-listings-container {
  padding-bottom: 2rem !important; /* Minimal bottom padding - precise scrollbar handles the rest */
}

/* SPOT DETAILS: scroll node padding reset; flex layout owns the viewport (see .spot-details-scroll-active). */
.bottom-sheet-spot-details-mode #listings-content-sheet,
.bottom-sheet-spot-details-mode .mobile-listings-container {
  padding-bottom: 0 !important;
}

/* CRITICAL: Bottom sheet spot details - bottom spacer extends scroll range past last section */
#listings-sheet .spot-details-container .spot-details-bottom-spacer {
  height: var(--spot-details-scroll-bottom-room, max(1.5rem, calc(var(--discover-sheet-bottom-gap, 0.5rem) + 0.75rem))) !important;
  width: 100% !important;
  visibility: hidden !important; /* Invisible but still takes up space */
  pointer-events: none !important; /* Don't interfere with interactions */
  flex-shrink: 0 !important; /* Prevent flexbox from shrinking it */
  display: block !important; /* Ensure it takes up space */
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important; /* Fully transparent */
}

/* CRITICAL: Mobile touch - Prevent overlap, ensure proper vertical stacking */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  /* CRITICAL: Photo gallery proper spacing - NO overlap with book button */
  #listings-sheet .spot-details-container .photo-gallery-compact {
    margin-bottom: 0.75rem !important; /* Adequate space below photo */
    position: relative !important;
    transform: none !important;
  }

  /* CRITICAL: Book button container - proper stacking, NO transforms */
  #listings-sheet .spot-details-container .spot-detail-book-shell {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important; /* CRITICAL: Remove ALL transforms */
  }

  /* CRITICAL: Ensure features section has proper spacing - NO OVERLAP */
  #listings-sheet .spot-details-container .luxury-features {
    margin-top: 0 !important; /* Space above features section */
    margin-bottom: 0 !important; /* Space below features section */
    position: relative !important;
    transform: none !important; /* CRITICAL: No transforms */
    display: block !important;
  }

  /* CRITICAL: About/description section - proper stacking */
  #listings-sheet .spot-details-container .luxury-description {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    position: relative !important;
    transform: none !important;
    display: block !important;
  }

  /* CRITICAL: Feature chips container - no transforms causing overlap */
  #listings-sheet .spot-details-container .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    transform: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* CRITICAL: Section labels - no transforms */
  #listings-sheet .spot-details-container .section-label {
    transform: none !important;
    margin-left: 0 !important;
  }
}

/* CRITICAL: When spot details are in the bottom sheet, prevent flex/drag layout from collapsing the photo gallery.
 * The scroll container has min-height: 0 and fixed height; the content wrapper and gallery need explicit width
 * and a minimum height so the image is always visible (aspect-ratio can collapse to 0 if width is not resolved). */
#listings-content-sheet.spot-details-scroll-active .spot-detail-content-wrapper,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; /* Allow flex shrink without breaking aspect-ratio child */
  box-sizing: border-box !important;
}
/* Gallery and image sizing deferred to luxury-spot-details.css source-of-truth block */

/* CRITICAL: Prevent double scrollbars - only listings-content-sheet should scroll */
#listings-sheet .spot-details-container {
  overflow: visible !important; /* CRITICAL: Don't scroll - parent handles scrolling */
  height: auto !important; /* Let content determine height */
  max-height: none !important; /* No height constraint */
  position: relative !important;
  /* Match desktop overlay horizontal padding (was luxury-spot-details.css) */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Spot details sections flow naturally (gallery excluded -- it has its own fixed frame) */
#listings-sheet .spot-details-container .luxury-header,
#listings-sheet .spot-details-container .luxury-features,
#listings-sheet .spot-details-container .luxury-description,
#listings-sheet .spot-details-container .luxury-info-grid,
#listings-sheet .spot-details-container .cancellation-policy-container,
#listings-sheet .spot-details-container .reviews-section {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* LISTINGS: Enhanced scrolling for listings content */
#listings-sheet .listings-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(120, 113, 108, 0.42) !important;
}

/* SPOT DETAILS ANIMATIONS: Ensure animations work in bottom sheet context */
/* Note: luxury-fade-in keyframe is defined in luxury-spot-details.css */
#listings-sheet .spot-details-container .luxury-info-grid .info-chip {
  animation: luxury-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

#listings-sheet .spot-details-container .luxury-info-grid .info-chip:nth-child(1) {
  animation-delay: 0.05s !important;
}

#listings-sheet .spot-details-container .luxury-info-grid .info-chip:nth-child(2) {
  animation-delay: 0.1s !important;
}

#listings-sheet .spot-details-container .luxury-info-grid .info-chip:nth-child(3) {
  animation-delay: 0.15s !important;
}

@media (hover: none) and (pointer: coarse) {
  #listings-sheet .spot-details-container .luxury-info-grid .info-chip {
    animation: none !important;
    animation-delay: 0s !important;
  }
}

/* Enable all transitions for spot details in bottom sheet */
/* CRITICAL: Exclude photo nav buttons and photo amenity badges so their size/position are not affected */
#listings-sheet .spot-details-container *:not(.photo-nav-btn):not(.photo-nav-btn *):not(.photo-amenity-badges):not(.photo-amenity-badges *):not(.photo-amenity-badge):not(.photo-amenity-badge *) {
  transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease), background-color var(--transition-base, 0.2s ease) !important;
}

/* Ensure policy expandable animations work in bottom sheet */
#listings-sheet .policy-expandable-content {
  transition: max-height var(--transition-slow, 0.3s ease) !important;
}

#listings-sheet .policy-chevron {
  transition: transform 0.2s ease !important;
}

/* Bottom sheet spot details: Transform icon and text in enhanced-tooltip-btn */
#listings-sheet .spot-details-container .enhanced-tooltip-btn svg {
  transform: translateX(-2px) !important; /* Right transform for icon */
}

#listings-sheet .spot-details-container .enhanced-tooltip-btn .tooltip-hint {
  transform: translateX(-58px) !important; /* Left transform for text */
}

/* Bottom sheet spot details: Center the book button container */
#listings-sheet .spot-details-container .spot-detail-book-shell {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  transform: translateY(-0.25rem) !important; /* Small upward transform */
}

/* Bottom sheet spot details: Center the book button itself */
/* CRITICAL: Exclude .photo-book-btn which needs position: absolute for photo overlay */
#listings-sheet .spot-details-container #spot-detail-book:not(.photo-book-btn),
#listings-sheet .spot-details-container button#spot-detail-book:not(.photo-book-btn) {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  width: auto !important;
  max-width: 300px !important;
  padding-left: 0.75rem !important; /* Reduce horizontal padding from px-4 (1rem) to 0.75rem */
  padding-right: 0.75rem !important;
  position: relative !important;
  z-index: var(--z-high-modal) !important; /* Ensure button is above photo indicators */
  pointer-events: auto !important;
}

/* Bottom sheet photo overlay book button - stays at bottom center of photo */
#listings-sheet .spot-details-container #spot-detail-book.photo-book-btn,
#listings-sheet .spot-details-container button#spot-detail-book.photo-book-btn,
#listings-sheet .photo-gallery-compact #spot-detail-book.photo-book-btn {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 15 !important;
  pointer-events: auto !important; /* CRITICAL: Ensure button is clickable */
  cursor: pointer !important; /* CRITICAL: Show pointer cursor */
}

/* Bottom sheet spot details: Add tiny right transform to spot-type-badge */
/* Tablet and Mobile */

/* Bottom sheet spot details: Add right transform to Reviews heading */
#listings-sheet .spot-details-container .reviews-section h3.text-lg.font-semibold.text-gray-900.dark\\:text-white,
#listings-sheet .spot-details-container .reviews-section h3[class*="text-lg"][class*="font-semibold"] {
  transform: translateX(0.25rem) !important; /* Right transform (4px) */
}

/* Bottom sheet spot details: Center the count automatically as container shrinks */
/* Header uses flex-col + inner .sheet-listings-header-layout (two-row); center layout when filter row is hidden */
body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header {
  align-items: center !important;
}

body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .sheet-listings-header-layout,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .sheet-listings-header-layout {
  align-items: center !important;
  width: 100%;
}

body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .sheet-listings-header-top,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .sheet-listings-header-top {
  display: grid !important;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem !important;
  align-items: center !important;
  justify-content: initial !important;
  gap: 0 !important;
}

body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .listings-header-title-block,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .listings-header-title-block {
  grid-column: 2 !important;
  justify-self: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100%;
  max-width: 100%;
}

body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .listings-header-title,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .listings-header-title {
  display: none !important;
}

/* Spot title reuses #listings-count-sheet — keep it primary, not the muted list subtitle */
body.bottom-sheet-spot-details-mode #listings-sheet #listings-count-sheet,
#listings-sheet.bottom-sheet-spot-details-mode #listings-count-sheet {
  grid-column: auto !important;
  justify-self: center !important;
  text-align: center !important;
  max-width: 100% !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--discover-chrome-text, var(--color-text-primary, #0f172a)) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

/* Never leave the results-count skeleton shimmer over the spot title. */
body.bottom-sheet-spot-details-mode .sheet-listings-count-wrap.is-count-pending .sheet-listings-count,
body.bottom-sheet-spot-details-mode .listings-count-wrap.is-count-pending .sheet-listings-count,
#listings-sheet.bottom-sheet-spot-details-mode .sheet-listings-count-wrap.is-count-pending .sheet-listings-count {
  color: var(--discover-chrome-text, var(--color-text-primary, #0f172a)) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}

body.bottom-sheet-spot-details-mode .sheet-listings-count-wrap.is-count-pending .sheet-listings-count::after,
body.bottom-sheet-spot-details-mode .listings-count-wrap.is-count-pending .sheet-listings-count::after,
#listings-sheet.bottom-sheet-spot-details-mode .sheet-listings-count-wrap.is-count-pending .sheet-listings-count::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  animation: none !important;
}

body.bottom-sheet-spot-details-mode .sheet-listings-count-wrap .sheet-listings-count-spinner,
#listings-sheet.bottom-sheet-spot-details-mode .sheet-listings-count-wrap .sheet-listings-count-spinner {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide filters/sort container in spot details mode to keep count centered */
/* Target by specific button IDs for reliability */
body.bottom-sheet-spot-details-mode #listings-sheet #amenities-popup-trigger-sheet,
body.bottom-sheet-spot-details-mode #listings-sheet #sort-toggle-sheet,
body.bottom-sheet-spot-details-mode #listings-sheet #sort-dropdown-sheet,
body.bottom-sheet-spot-details-mode #amenities-popup-trigger-sheet,
body.bottom-sheet-spot-details-mode #sort-toggle-sheet,
body.bottom-sheet-spot-details-mode #sort-dropdown-sheet {
  display: none !important; /* Hide filters/sort buttons when showing spot details */
}

/* Two-row sheet header: hide entire filter row (space type + long-term) in spot details */
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .sheet-listings-header-filter-row,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .sheet-listings-header-filter-row {
  display: none !important;
}

/* Also target the stable action container class as fallback */
body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .listings-header-actions--sheet,
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .listings-header-actions--sheet {
  display: none !important; /* Hide filters/sort container when showing spot details */
}

/* Hide space type toggle (parking/storage) in spot details mode */
body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .space-type-toggle,
body.bottom-sheet-spot-details-mode #listings-sheet .space-type-toggle,
body.bottom-sheet-spot-details-mode #space-type-parking-sheet,
body.bottom-sheet-spot-details-mode #space-type-storage-sheet,
body.bottom-sheet-spot-details-mode .space-type-toggle {
  display: none !important; /* Hide parking/storage toggle when showing spot details */
}

/* Hide the absolute-positioned container holding the space type toggle */
/* CRITICAL: Only hide the container with space-type-toggle, NOT the drag handle container */
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header > .absolute:has(.space-type-toggle) {
  display: none !important;
}

/* Fallback for browsers that don't support :has() - target by position (space type toggle is lower) */
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header > .absolute.left-1\/2:not(.-top-1) {
  display: none !important;
}

/* Bottom sheet spot details: back control matches Refine/Map chrome pills */
#listings-sheet #temp-back-to-listings-btn,
#listings-sheet button#temp-back-to-listings-btn,
#listings-sheet .sheet-spot-details-back-btn {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  max-width: 2.75rem !important;
  max-height: 2.75rem !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid var(--discover-control-border) !important;
  border-radius: 999px !important;
  background: var(--discover-control-bg) !important;
  color: var(--discover-control-text) !important;
  box-shadow: var(--discover-control-shadow) !important;
  transform: none !important;
  position: relative !important;
  z-index: var(--z-button-elevated) !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.dark #listings-sheet #temp-back-to-listings-btn,
.dark #listings-sheet .sheet-spot-details-back-btn,
body.dark #listings-sheet #temp-back-to-listings-btn,
body.dark #listings-sheet .sheet-spot-details-back-btn {
  background: var(--discover-control-bg-dark) !important;
  color: var(--discover-control-text-dark) !important;
  border-color: var(--discover-control-border-dark) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

#listings-sheet #temp-back-to-listings-btn:hover,
#listings-sheet .sheet-spot-details-back-btn:hover {
  background: var(--discover-control-bg-hover) !important;
  border-color: var(--discover-control-border-hover) !important;
  color: var(--discover-control-text-strong) !important;
}

.dark #listings-sheet #temp-back-to-listings-btn:hover,
.dark #listings-sheet .sheet-spot-details-back-btn:hover,
body.dark #listings-sheet #temp-back-to-listings-btn:hover,
body.dark #listings-sheet .sheet-spot-details-back-btn:hover {
  background: var(--discover-control-bg-hover-dark) !important;
  border-color: var(--discover-control-border-hover-dark) !important;
  color: var(--discover-control-text-strong-dark) !important;
}

#listings-sheet #temp-back-to-listings-btn:focus-visible,
#listings-sheet .sheet-spot-details-back-btn:focus-visible {
  outline: 2px solid var(--discover-premium-muted) !important;
  outline-offset: 2px !important;
}

#listings-sheet .sheet-spot-details-back-btn__icon {
  width: 1.05rem !important;
  height: 1.05rem !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Bottom sheet mobile: Override auto Tailwind margin-top on spot cards */
#listings-sheet .spot-card,
#listings-sheet #listings-content-sheet .spot-card {
  margin-top: 0 !important; /* Remove auto Tailwind margin-top */
}

/* Listings mode: mobile container has no space-y-2 — gap stacked cards in the scroll shell */
@media (max-width: 1100px) {
  body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-sheet #listings-content-sheet > .spot-card + .spot-card {
    margin-top: var(--discover-mobile-list-gap, 0.625rem) !important;
  }
}

/* Bottom sheet spot details: back control is icon-only chrome (see .sheet-spot-details-back-btn). */

/* Bottom sheet spot details: Cancellation policy container styling */
/* NOTE: Removed z-index: -1 which was hiding content behind parent background */
#listings-sheet .spot-details-container .cancellation-policy-container,
#listings-sheet .spot-details-container .policy-expandable-content,
#listings-sheet .spot-details-container .policy-details,
#listings-sheet .spot-details-container .policy-label:not(.policy-expandable-trigger .policy-label),
#listings-sheet .spot-details-container .policy-value {
  position: relative !important;
  z-index: auto !important; /* Normal stacking - content stays visible */
  isolation: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
}

/* Bottom sheet: Policy trigger button - MUST be clickable but below tooltips */
#listings-sheet .spot-details-container .policy-expandable-trigger {
  position: relative !important;
  z-index: 1 !important; /* LOW z-index - clickable but below tooltips */
  isolation: auto !important;
  pointer-events: auto !important; /* CRITICAL: Button must be clickable */
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

/* CRITICAL: Override any inline styles that set high z-index */
#listings-sheet .spot-details-container .policy-expandable-trigger[style*="z-index"] {
  z-index: 1 !important; /* Force low z-index even if inline style sets higher */
}

/* Bottom sheet: Policy trigger children - clicks pass through to button */
#listings-sheet .spot-details-container .policy-expandable-trigger > .flex,
#listings-sheet .spot-details-container .policy-expandable-trigger > div.flex,
#listings-sheet .spot-details-container .policy-expandable-trigger .flex.items-center,
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-icon,
#listings-sheet .spot-details-container .policy-expandable-trigger svg.policy-icon,
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-chevron {
  pointer-events: none !important; /* Clicks pass through to button */
  z-index: 0 !important;
}

/* CRITICAL: Bottom sheet policy label text - must NOT block tooltips */
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-label[style*="pointer-events"],
#listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label[style*="pointer-events"],
#listings-sheet .spot-details-container .policy-expandable-trigger span[class*="policy-label"],
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-label[style],
#listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label[style],
#listings-sheet .spot-details-container .policy-expandable-trigger .flex .policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger .flex span.policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger div.flex .policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger div.flex span.policy-label {
  position: static !important; /* No positioning - prevents stacking context */
  z-index: -9999 !important; /* Extremely negative z-index - well below tooltips */
  isolation: auto !important; /* Don't create stacking context */
  contain: none !important; /* Don't contain anything */
  transform: none !important; /* No transforms that create stacking contexts */
  will-change: auto !important; /* No will-change */
  opacity: 1 !important; /* Visible but don't create stacking context */
  pointer-events: none !important; /* CRITICAL: Don't intercept mouse events */
  mix-blend-mode: normal !important; /* Don't create stacking context */
  filter: none !important; /* Don't create stacking context */
  backdrop-filter: none !important; /* Don't create stacking context */
}

/* Bottom sheet: Ensure tooltips appear above everything */
#listings-sheet .spot-details-container .enhanced-tooltip.show,
#listings-sheet .spot-details-container .availability-schedule-tooltip.show {
  position: fixed !important;
  z-index: var(--z-maximum) !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

#listings-sheet .spot-details-container .enhanced-tooltip.tooltip-pinned.show,
#listings-sheet .spot-details-container .availability-schedule-tooltip.tooltip-pinned.show {
  pointer-events: auto !important;
}

/* Base state: Ensure hidden tooltips don't block interactions */
#listings-sheet .spot-details-container .enhanced-tooltip:not(.show),
#listings-sheet .spot-details-container .availability-schedule-tooltip:not(.show) {
  pointer-events: none !important; /* CRITICAL: Hidden tooltips must not block mouse events */
}

/* Bottom sheet spot details: Add negative top margin to spot card title text */
#listings-sheet .spot-details-container .spot-card-title-text {
  margin-top: -0.125rem !important; /* -2px */
}

/* Bottom sheet: Fix title clipping - ensure titles are fully visible */
/* Note: All titles in bottom sheet now use truncation with widened area */
/* The rules above apply to all titles uniformly */

/* CRITICAL: Apply truncation to title wrappers in bottom sheet */
/* Widen the title area before truncation to show more text - EXCLUDE .needs-scroll which needs 100% width */
/* MAXIMUM SPECIFICITY to override spot-card.css rules */
/* Bottom sheet and mobile content are the same - tablet and mobile both use bottom sheet */
#listings-sheet .spot-card .spot-card-title-wrapper:not(.needs-scroll),
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll),
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static,
#listings-content-sheet .spot-card .spot-card-title-wrapper:not(.needs-scroll),
#listings-content-sheet .spot-card .spot-card-title-wrapper.short-title-static,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll),
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: calc(100% + 120px) !important; /* Widen to show more text before truncating */
  max-width: calc(100% + 120px) !important;
  min-width: 0 !important;
  margin-left: 0 !important; /* Negative margin to center the wider content */
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure truncation works for title content */
/* Width and transform are controlled by media query rules below - do not set here */
/* Bottom sheet and mobile content are the same - tablet and mobile both use bottom sheet */
/* CRITICAL: Higher specificity to override spot-card.css 100% width rule */
#listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
#listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content,
#listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
#listings-content-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-content-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  /* Width and transform controlled by media query rules below */
  min-width: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  animation: none !important; /* Disable any marquee animations */
}

/* Ensure truncation works for title text - this is where the ellipsis appears */
/* CRITICAL: Don't apply transform to text element - it breaks truncation */
/* Instead, apply transform to parent container (title-content) */
/* Bottom sheet and mobile content are the same - tablet and mobile both use bottom sheet */
#listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text,
#listings-content-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-content-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-text,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-text {
  padding-left: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  transform: none !important; /* Prevent transforms on text element - breaks truncation */
}

/* CRITICAL: Override transform: none for char-30 titles to preserve translateX(-3rem) from layout.css */
/* Ensure margin-top: -0.125rem applies ONLY to char-30 titles in ALL contexts */
.spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content-sheet .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
div.spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text {
  transform: translateX(-3rem) !important; /* Restore transform for 30-character titles */
  margin-top: 0 !important; /* CRITICAL: Only for char-30 titles */
  display: inline !important;
  white-space: nowrap !important;
}

/* Apply right shift transform to title-content container instead */
/* This preserves truncation while allowing positioning */
/* MAXIMUM SPECIFICITY to override spot-card.css rules */
/* MOBILE (≤567px): Keep current values */
@media (max-width: 520px) {
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content {
    transform: translateX(22px) !important; /* Move content container right */
    position: relative !important;
    /* Keep overflow hidden for truncation */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: calc(100% + 0) !important; /* Increased width to show more content */
    max-width: calc(100% + 0) !important; /* Match width for consistent truncation */
  }
}

/* TABLET (568px - 1100px): Increased width for larger screens */
@media (min-width: 520px) and (max-width: 1100px) {
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content {
    transform: translateX(22px) !important; /* Move content container right */
    position: relative !important;
    /* Keep overflow hidden for truncation */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: calc(100% + 180px) !important; /* Increased width for tablet - larger than mobile */
    max-width: calc(100% + 180px) !important;
  }
}

/* Bottom sheet: Ensure parent containers allow wider title area */
/* Allow overflow to accommodate the widened title wrapper */
#listings-sheet .spot-card .flex-1,
#listings-sheet .spot-card .spot-card-content {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  overflow: visible !important; /* Allow wider title to extend */
  min-width: 0 !important; /* Allow flex shrinking */
}

/* CRITICAL: Ensure mb-1 container (title parent) allows wider title to extend */
/* This div wraps the title-wrapper and must not clip the expanded title width */
/* ENHANCED: Prevent title getting stuck inside container on navigation transitions */
#listings-sheet .spot-card .flex-1 > div:first-child,
#listings-sheet .spot-card .flex-1 > .mb-1,
#listings-sheet .spot-card .flex-1 > div.mb-1,
#listings-sheet .spot-card .mb-1,
#listings-content-sheet .spot-card .flex-1 > div:first-child,
#listings-content-sheet .spot-card .flex-1 > .mb-1,
#listings-content-sheet .spot-card .flex-1 > div.mb-1,
#listings-content-sheet .spot-card .mb-1 {
  overflow: visible !important; /* Allow title to extend beyond container */
  min-width: 0 !important; /* Allow flex shrinking */
  width: 100% !important; /* Full width of parent */
  height: auto !important; /* Prevent height constraints during transitions */
  max-height: none !important; /* No max-height limit */
  clip: auto !important; /* Prevent any clipping */
  clip-path: none !important; /* Prevent clip-path issues */
  contain: none !important; /* Prevent contain from causing layout issues */
}

/* CRITICAL: Ensure title wrapper inside mb-1 is always visible during navigation */
#listings-sheet .spot-card .mb-1 .spot-card-title-wrapper,
#listings-sheet .spot-card .flex-1 > .mb-1 .spot-card-title-wrapper,
#listings-content-sheet .spot-card .mb-1 .spot-card-title-wrapper,
#listings-content-sheet .spot-card .flex-1 > .mb-1 .spot-card-title-wrapper {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure reviews content animations work in bottom sheet */
#listings-sheet .reviews-content {
  transition: max-height var(--transition-slow, 0.3s ease) !important;
}

/* CRITICAL: Ensure policy buttons are clickable in bottom sheet but below tooltips */
#listings-sheet .policy-expandable-trigger {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1 !important; /* LOW z-index - below tooltips */
  position: relative !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
}

/* Override inline styles */
#listings-sheet .policy-expandable-trigger[style*="z-index"] {
  z-index: 1 !important; /* Force low z-index even if inline style sets higher */
}

#listings-sheet .policy-expandable-trigger:hover {
  background: var(--discover-premium-hover) !important;
}

#listings-sheet .policy-expandable-trigger:active {
  background: var(--discover-premium-active) !important;
}

/* CRITICAL: Ensure spot-details-container in bottom sheet doesn't clip photo navigation buttons */
#listings-sheet .spot-details-container {
  overflow-x: visible !important; /* Allow buttons to extend horizontally */
  overflow-y: visible !important; /* #listings-content-sheet owns vertical scrolling */
  isolation: auto !important; /* CRITICAL: Don't create stacking context that traps buttons */
  contain: none !important; /* CRITICAL: Don't contain layout/style/paint - allow buttons to escape */
  position: relative !important; /* Ensure positioning context */
}

/* Ensure ALL parent containers allow overflow - #listings-sheet excluded - it needs overflow-x: hidden to prevent scrollbars */
#listings-sheet .spot-details-container,
#listings-sheet .spot-details-container > *,
#listings-content-sheet,
#listings-content-sheet .spot-details-container {
  overflow-x: visible !important; /* Allow buttons to extend horizontally */
}

/* CRITICAL: Force photo navigation buttons to be visible in bottom sheet */
#listings-sheet .spot-details-container .photo-nav-btn,
#listings-sheet .spot-details-container .photo-gallery-compact .photo-nav-btn,
#listings-sheet .spot-details-container .photo-carousel .photo-nav-btn,
#listings-sheet .photo-nav-btn,
#listings-sheet .photo-gallery-compact .photo-nav-btn,
#listings-sheet .photo-carousel .photo-nav-btn,
#listings-sheet button.photo-nav-btn,
#listings-sheet button.photo-nav-prev,
#listings-sheet button.photo-nav-next {
  position: absolute !important;
  z-index: var(--z-elevated, 10) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  background: var(--discover-glass-soft, rgba(248, 250, 252, 0.6)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px #00000026 !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important; /* Centered vertically */
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* CRITICAL: Position prev button - CENTERED */
#listings-sheet .photo-nav-prev,
#listings-sheet button.photo-nav-prev {
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) translateX(-30px) !important; /* Centered horizontally, offset left */
}

/* CRITICAL: Position next button - CENTERED */
#listings-sheet .photo-nav-next,
#listings-sheet button.photo-nav-next {
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) translateX(30px) !important; /* Centered horizontally, offset right */
}

/* CRITICAL: Translucent effect when not hovered - bottom sheet */
#listings-sheet .photo-nav-btn:not(:hover) {
  background: var(--discover-glass-soft, rgba(248, 250, 252, 0.6)) !important;
}

/* CRITICAL: More opaque on hover - bottom sheet */
#listings-sheet .photo-nav-prev:hover {
  background: var(--discover-glass-medium, rgba(248, 250, 252, 0.95)) !important;
  transform: translate(-50%, -50%) translateX(-30px) scale(1.1) !important; /* Maintain center on hover */
}

#listings-sheet .photo-nav-next:hover {
  background: var(--discover-glass-medium, rgba(248, 250, 252, 0.95)) !important;
  transform: translate(-50%, -50%) translateX(30px) scale(1.1) !important; /* Maintain center on hover */
}

#listings-sheet .spot-price-overlay {
  position: absolute !important;
  z-index: var(--z-high-modal) !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  bottom: 8px !important;
  left: 8px !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: min(52%, calc(100% - 8.5rem)) !important;
  height: auto !important;
  min-height: auto !important;
  transform: none !important;
}

/* Listings mode: do not create an inner scroll surface when the sheet is partially closed. */
#listings-scroll-shell {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important; /* Take remaining flex space */
  min-height: 0 !important; /* Allow shrinking below content size */
  height: auto !important;
  max-height: none !important;
  scrollbar-width: none !important;

  /* CHROME ANIMATION FIX: Prevent conflicting transitions */
  transition: none !important;
  /* Sheet translateY moves #listings-sheet; avoid extra compositor layers on the shell at rest */
  will-change: auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:not(.bottom-sheet-spot-details-mode) #listings-content-sheet {
  overflow-y: visible !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* CRITICAL: When spot details are active, ensure scrollbar is visible and functional */
#listings-content-sheet.spot-details-scroll-active {
  scrollbar-width: thin !important; /* Firefox - ensure scrollbar shows */
  scrollbar-color: rgba(120, 113, 108, 0.42) transparent !important;
}

/* Sheet scroll contract: listings + spot-details both use a native inner scroller sized to the
   visible sheet slice (JS height). Listings scrolls #listings-scroll-shell; spot-details scrolls
   #listings-content-sheet. Sheet translateY only expands/collapses.
   Shell overflow: bottomsheet drag-handle uses overflow-y:visible; listings.css sets #listings-sheet overflow:hidden — handle stays in header. */
/* CRITICAL: Prevent parent bottom sheet from creating scrollbars in any state */
/* CONSOLIDATED: bottomsheet.css uses overflow-y: visible so the drag handle can extend above the sheet edge; */
/* listings.css intentionally forces overflow: hidden on #listings-sheet so only the inner sheet scrolls and the drag handle still works via absolute positioning in the header. */
/* Use maximum specificity to override bottomsheet and inline overflow rules */
html body #listings-sheet,
body #listings-sheet,
#listings-sheet {
  /* Single shorthand overrides bottomsheet longhands and inline overflow without mixing shorthand + longhands */
  overflow: hidden !important; /* CRITICAL: Prevent scrollbars on parent - only child scrolls */
  /* NOTE: Drag handle remains visible because it's positioned absolutely within the header container */
}

/* CRITICAL: Listings browse mode — inner scroll on the scroll shell (includes marketplace footer). */
#listings-sheet #listings-scroll-shell.listings-scroll-active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* contain: keep bounce inside the sheet without chaining to the page. */
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  /* JS sets visible-slice height; flex-grow to 100svh would put the scroller bottom off-screen. */
  flex: 0 0 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: max(1.25rem, var(--discover-sheet-bottom-gap, 0.5rem)) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 113, 108, 0.4) transparent !important;
}

/* Cards node sizes to content; shell is the only scroller. */
#listings-sheet #listings-scroll-shell.listings-scroll-active #listings-content-sheet {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* End room so the last card / marketplace footer can clear the home indicator. */
html body.discover-page:not(.bottom-sheet-spot-details-mode)
  #listings-sheet
  #listings-scroll-shell.listings-scroll-active
  #listings-content-sheet {
  padding-bottom: max(1.5rem, calc(var(--discover-sheet-bottom-gap, 0.5rem) + 0.75rem)) !important;
}

html body.discover-page:not(.bottom-sheet-spot-details-mode)
  #listings-sheet
  #listings-scroll-shell.listings-scroll-active
  > section.discover-lower-marketplace--sheet {
  padding-bottom: max(1.25rem, var(--discover-sheet-bottom-gap, 0.5rem)) !important;
}

/* CRITICAL: When spot details are shown, enable scrolling on listings-content-sheet */
/* Flex column on #listings-sheet / #listings-scroll-shell owns layout; JS caps max-height to visible slice. */
#listings-sheet #listings-content-sheet.spot-details-scroll-active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* contain: natural rubber-band at edges without page chaining. */
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  /* max-height set by BottomSheet._setInnerScrollVisibleSliceHeight on this node only */
  box-sizing: border-box !important;
  scroll-padding-bottom: var(--spot-details-scroll-bottom-room, max(1.5rem, calc(var(--discover-sheet-bottom-gap, 0.5rem) + 0.75rem))) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 113, 108, 0.4) transparent !important;
}

/* CRITICAL: Make scrollbar more visible for spot details on mobile and tablet */
#listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar {
  width: 4px !important; /* Wider scrollbar for better visibility */
  display: block !important; /* Ensure scrollbar is displayed */
}

#listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(120, 113, 108, 0.42) !important;
  border-radius: 2px !important;
  min-height: 40px !important; /* Larger minimum thumb */
}

#listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar-thumb:hover {
  background: rgba(87, 83, 78, 0.58) !important;
}

#listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar-track {
  background: transparent !important;
  margin-top: 2px !important;
  /* Inset track from sheet bottom / home indicator so thumb does not bleed past the page edge */
  margin-bottom: max(2px, env(safe-area-inset-bottom, 0px)) !important;
}

.dark #listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(168, 162, 158, 0.42) !important;
}

.dark #listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar-thumb:hover {
  background: rgba(214, 211, 208, 0.58) !important;
}

/* CRITICAL: Ensure spot-detail-content does not create nested scrollbars */
#listings-sheet #listings-content-sheet.spot-details-scroll-active #spot-detail-content {
  overflow-y: visible !important; /* Don't scroll - parent handles scrolling */
  overflow-x: visible !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important; /* Let content determine height */
}

/* CRITICAL: Prevent any child elements from creating their own scrollbars */
/* Exclude photo gallery (needs overflow:hidden + fixed aspect-ratio height) and header row */
#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-details-container,
#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-details-container *:not(.photo-gallery-compact):not(.photo-gallery-compact *):not(.photo-amenity-badges):not(.photo-amenity-badges *):not(.photo-amenity-badge):not(.photo-amenity-badge *):not(.header-top):not(.header-top *):not(.luxury-header):not(.luxury-header *):not(.spot-floor-plan-section):not(.spot-floor-plan-section *) {
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}

/*   BOTTOM SHEET RESPONSIVE TITLE ADJUSTMENTS*/

/* Mobile devices (≤640px) - Compact title with right and top transform */
/* ONLY apply transforms in listings view, not spot details view */

/* Small tablets (641px-768px) - Moderate adjustment */
/* ONLY apply transforms in listings view, not spot details view */
@media (min-width: 640px) and (max-width: 768px) {
  #listings-content-sheet .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper {
    transform: translate(50px, -5px) !important; /* Move right 50px, up 5px - centered between mobile and large tablet */
    position: relative !important;
  }

  #listings-content-sheet .spot-card-title-text,
  #listings-sheet .spot-card .spot-card-title-text {
    display: inline-block !important;
    transform: translateX(2px) !important; /* Additional subtle right shift */
  }

  /* Address element responsive transform - Tablet */
  #listings-content-sheet .clickable-address {
    transform: translate(45px, -2px) !important; /* Original transform for tablet */
    position: relative !important;
  }

  /* Metadata row (spot type, distance) responsive transform */
  #listings-content-sheet .spot-card .flex.items-center.gap-2.mt-0\.5 {
    transform: translate(53px, -3px) !important; /* Match title alignment */
    position: relative !important;
  }

  /* Availability badge responsive transform */
  #listings-content-sheet .spot-card .flex.items-start.justify-start.mt-1 {
    transform: translate(53px, -8px) !important; /* Match title alignment */
    position: relative !important;
  }

  /* Book button responsive transform — legacy cards only */
  #listings-content-sheet .spot-card:not(.discover-listing-card) .book-btn,
  #listings-content-sheet .spot-card:not(.discover-listing-card) button[data-book-spot-id] {
    transform: translate(-8px, -4px) !important; /* Move left 8px, up 4px */
    position: relative !important;
  }
}

/* Ensure the listings container can scroll even when sheet is partially open */

/* Drag handle vertical position is intentionally centralized in bottomsheet.css. */

/* Add negative right margin to filters button for all sizes */
#amenities-popup-trigger-sheet {
  margin-right: 0 !important;
}

#amenities-popup-trigger-desktop {
  margin-right: 0 !important; /* Removed negative margin to prevent button from shifting */
}

/* UPDATED: Allow multi-line display for long addresses in autocomplete dropdown */
#unified-autocomplete .autocomplete-item {
  overflow: hidden !important;
  /* Allow natural height expansion for multi-line content */
}

#unified-autocomplete .location-name,
#unified-autocomplete .suggestion-name {
  /* Use the multi-line display from search.css - don't override */
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}

/* Current-location action keeps label + subtitle on one row */
#unified-autocomplete .current-location-item .location-name,
#unified-autocomplete .current-location-item .location-description {
  display: inline !important;
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-width: none !important;
  max-height: none !important;
  word-break: normal !important;
  white-space: nowrap !important;
}

#unified-autocomplete .pac-item-query {
  /* Allow Google Places API queries to wrap */
  overflow: hidden !important;
  white-space: normal !important;
  max-width: 100% !important;
  display: block !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

#unified-autocomplete .item-main {
  overflow: visible !important;
  max-width: 100% !important;
}

#unified-autocomplete .item-header {
  overflow: visible !important;
  max-width: 100% !important;
}

/* Allow address details to wrap to secondary line */
#unified-autocomplete .item-details,
#unified-autocomplete .autocomplete-item .text-sm {
  overflow: hidden !important;
  white-space: normal !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  /* Limit to 2 lines for details */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* FIX: Restore desktop vertical expansion for long addresses - ULTRA HIGH SPECIFICITY */

/* End-of-results line (sheet and desktop list) */
.listings-end-message {
  text-align: center !important;
  padding: 0.55rem 1rem 0.65rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.1rem !important;
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border-top: 1px solid rgba(203, 213, 225, 0.55) !important;
  background: transparent !important;
  position: relative !important;
  z-index: var(--z-base) !important;
}

/* Dark mode styling for end message */
.dark .listings-end-message {
  color: #a3a3a3 !important;
  border-top: 1px solid rgba(71, 85, 105, 0.55) !important;
  background: transparent !important;
}

/* Icon styling for end message — ID scope beats stray svg rules; max-* locks size vs global svg { max-width: 100% } */
#listings-content .listings-end-message svg.end-icon,
#listings-content-sheet .listings-end-message svg.end-icon,
#listings-overlay .listings-end-message svg.end-icon,
#listings-sheet .listings-end-message svg.end-icon,
.listings-end-message svg.end-icon,
.listings-end-message .end-icon {
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
  vertical-align: -0.125em !important;
  opacity: 0.7 !important;
}

/* CRITICAL: Make bottom sheet listings clickable */
#listings-sheet .spot-card,
#listings-content-sheet .spot-card {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  position: relative !important;
  z-index: var(--z-base) !important;
}

/* Legacy cards only — reserved height fought compact discover-listing-card layout */
#listings-sheet .spot-card:not(.discover-listing-card),
#listings-content-sheet .spot-card:not(.discover-listing-card) {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* CRITICAL: Ensure all children inherit pointer cursor for smooth feel */
#listings-sheet .spot-card *,
#listings-content-sheet .spot-card * {
  cursor: pointer !important;
}

/* CRITICAL: Override for interactive elements that should have their own cursor */
#listings-sheet .spot-card button,
#listings-sheet .spot-card a,
#listings-sheet .spot-card [role="button"],
#listings-content-sheet .spot-card button,
#listings-content-sheet .spot-card a,
#listings-content-sheet .spot-card [role="button"] {
  cursor: pointer !important;
}

/* CRITICAL: Override any conflicting pointer-events from bottomsheet.css */
#listings-sheet .spot-card,
#listings-sheet .spot-card > *,
#listings-sheet .spot-card .flex,
#listings-sheet .spot-card .relative {
  pointer-events: auto !important;
}

/* DEVELOPMENT-FRIENDLY: Allow element inspection while maintaining card clicks */
/* Remove aggressive pointer-events blocking to allow DevTools inspection */
/* Card clicks will be handled by JavaScript event delegation instead */

/* Ensure most elements are inspectable - but exclude title elements that block clicks */
#listings-sheet .spot-card * {
  pointer-events: auto !important;
}

/* Title elements must NOT capture pointer events - let clicks pass through to spot-card */
/* This fixes the issue where clicking on marquee title text doesn't open spot details */
#listings-sheet .spot-card .spot-card-title-wrapper,
#listings-sheet .spot-card .spot-card-title-wrapper *,
#listings-sheet .spot-card .spot-card-title-content,
#listings-sheet .spot-card .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-duplicate,
#listings-sheet .spot-card .spot-card-title-duplicate2,
#listings-content-sheet .spot-card .spot-card-title-wrapper,
#listings-content-sheet .spot-card .spot-card-title-wrapper *,
#listings-content-sheet .spot-card .spot-card-title-content,
#listings-content-sheet .spot-card .spot-card-title-text,
#listings-content-sheet .spot-card .spot-card-title-duplicate,
#listings-content-sheet .spot-card .spot-card-title-duplicate2 {
  pointer-events: none !important;
}

/* Ensure interactive elements have proper cursor */
#listings-sheet .spot-card button,
#listings-sheet .spot-card a,
#listings-sheet .spot-card [role="button"],
#listings-sheet .spot-card input,
#listings-sheet .spot-card select,
#listings-sheet .spot-card .clickable-address {
  cursor: pointer !important;
}

/* CRITICAL: Override any text selection rules that might block clicks */
#listings-sheet .spot-card {
  user-select: none !important;
}

/* RESPONSIVE BOTTOM SHEET LISTING DETAILS */

/* iPhone / mobile bottom sheet: force title truncation for ALL title variants
   so no single card misses ellipsis (avoids "odd" cut-off). Parent must allow shrink. */
@media (max-width: 640px) {
  #listings-sheet .spot-card .flex-1 > .mb-1,
  #listings-sheet .spot-card .flex-1 > .mb-1\.5,
  #listings-content-sheet .spot-card .flex-1 > .mb-1,
  #listings-content-sheet .spot-card .flex-1 > .mb-1\.5 {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-content-sheet .spot-card .spot-card-title-wrapper {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text,
  #listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
}

/* Very Small Screen (<=411px) - Disable marquee, force ellipsis */
@media (max-width: 400px) {
  /* CRITICAL: Title displays OVER TOP of book button container */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .mb-1,
  #listings-sheet .spot-card .flex-1 > .mb-1,
  #listings-content-sheet .spot-card .spot-card-title-wrapper,
  #listings-content-sheet .spot-card .mb-1,
  #listings-content-sheet .spot-card .flex-1 > .mb-1 {
    position: relative !important;
    z-index: 20 !important; /* Above book button container */
  }

  /* CRITICAL: Force disable marquee on very small screens */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  #listings-content-sheet .spot-card .spot-card-title-wrapper,
  #listings-content-sheet .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Disable marquee animation and constrain content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Ensure text element has ellipsis */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
  #listings-content-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text,
  #listings-content-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Hide duplicate elements used for marquee */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  #listings-content-sheet .spot-card .spot-card-title-duplicate,
  #listings-content-sheet .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }
}

/* Small Phone (≤375px) - Ultra-compact details */
@media (max-width: 400px) {
  /* Make listing photos smaller for small phone - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card:not(.discover-listing-card) .relative.w-16,
  #listings-sheet .spot-card:not(.discover-listing-card) .relative.w-20,
  #listings-sheet .spot-card:not(.discover-listing-card) div[class*="w-16"],
  #listings-sheet .spot-card:not(.discover-listing-card) div[class*="w-20"],
  .spot-card:not(.discover-listing-card) .relative.w-16,
  .spot-card:not(.discover-listing-card) .relative.w-20,
  .spot-card:not(.discover-listing-card) div[class*="w-16"],
  .spot-card:not(.discover-listing-card) div[class*="w-20"] {
    width: 90px !important;
    height: 90px !important;
    margin-right: 0.5rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make the actual img elements smaller and centered for small phone */
  #listings-sheet .spot-card .relative.w-16 img:not(.discover-listing-image),
  #listings-sheet .spot-card .relative.w-20 img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-20"] img:not(.discover-listing-image),
  .spot-card .relative.w-16 img:not(.discover-listing-image),
  .spot-card .relative.w-20 img:not(.discover-listing-image),
  .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  .spot-card div[class*="w-20"] img:not(.discover-listing-image) {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: var(--border-radius-base, 0.5rem) !important;
  }

  /* Adjust content area to accommodate smaller image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 100px) !important;
  }

  /* Make all text smaller */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.125rem !important;
  }

  /* Smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* Smaller buttons — legacy cards only (keep readable + 44px touch floor) */
  #listings-sheet .spot-card:not(.discover-listing-card) .book-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .notify-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .contact-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) button {
    font-size: 13px !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 44px !important;
  }

  /* Tighter spacing */
  #listings-sheet .spot-card-content {
    gap: 0.25rem !important;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem !important;
  }

  /* Add negative right margin to all written content - ULTRA HIGH SPECIFICITY */
  html body #listings-sheet .spot-card .title-text,
  html body #listings-sheet .spot-card h3,
  html body #listings-sheet .spot-card .spot-title,
  html body #listings-sheet .spot-card-title,
  html body #listings-sheet .spot-card .metadata,
  html body #listings-sheet .spot-card .text-gray-500,
  html body #listings-sheet .spot-card .text-gray-600,
  html body #listings-sheet .spot-card .address-text,
  html body #listings-sheet .spot-card .distance-text,
  html body #listings-sheet .spot-card .amenity-text,
  html body #listings-sheet .spot-card p,
  html body #listings-sheet .spot-card-text,
  html body #listings-sheet .spot-card .text-blue-700,
  html body #listings-sheet .spot-card .font-semibold,
  html body #listings-sheet .spot-card .price-display,
  html body #listings-sheet .spot-card [class*="price"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"],
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="uppercase"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"][class*="uppercase"][class*="tracking-wide"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Disable marquee scrolling for small phone - ULTRA HIGH SPECIFICITY */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Disable all marquee animations and content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title,
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: translateX(22px) !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Hide duplicate elements */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  .spot-card .spot-card-title-duplicate,
  .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }

  /* Remove fade overlays */
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll::before,
  .spot-card .spot-card-title-wrapper.needs-scroll::before {
    display: none !important;
  }

  /* Add negative left margin to address spans - MAXIMUM SPECIFICITY */
  html body #listings-sheet .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body #listings-sheet .spot-card span.text-blue-600,
  html body #listings-sheet .spot-card span.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600,
  html body .spot-card span.dark\\:text-blue-400,
  #listings-sheet .spot-card span.text-blue-600,
  #listings-sheet .spot-card span.dark\\:text-blue-400,
  .spot-card span.text-blue-600,
  .spot-card span.dark\\:text-blue-400 {
    margin-left: -0.5rem !important; /* Negative left margin for address text alignment */
  }
}

/* Ultra-Mobile (340px-519px) - Compact details */
@media (min-width: 400px) and (max-width: 520px) {
  /* Make listing photos larger - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card .relative.w-16,
  #listings-sheet .spot-card .relative.w-20,
  #listings-sheet .spot-card div[class*="w-16"],
  #listings-sheet .spot-card div[class*="w-20"],
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 110px !important;
    height: 110px !important;
    margin-right: 0.5rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make the actual img elements larger and centered */
  #listings-sheet .spot-card .relative.w-16 img:not(.discover-listing-image),
  #listings-sheet .spot-card .relative.w-20 img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-20"] img:not(.discover-listing-image),
  .spot-card .relative.w-16 img:not(.discover-listing-image),
  .spot-card .relative.w-20 img:not(.discover-listing-image),
  .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  .spot-card div[class*="w-20"] img:not(.discover-listing-image) {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: var(--border-radius-base, 0.5rem) !important;
  }

  /* Adjust content area to accommodate larger image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 120px) !important;
  }

  /* Make all text smaller */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.125rem !important;
  }

  /* Smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* Smaller buttons — legacy cards only */
  #listings-sheet .spot-card:not(.discover-listing-card) .book-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .notify-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .contact-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) button {
    font-size: 12px !important;
    padding: 0.375rem 0.625rem !important;
    min-height: 36px !important;
  }

  /* Tighter spacing */
  #listings-sheet .spot-card-content {
    gap: 0.25rem !important;
    padding: 0.25rem 0.25rem 0.375rem 0.375rem !important;
  }

  /* Add negative right margin to all written content - ULTRA HIGH SPECIFICITY */
  html body #listings-sheet .spot-card .title-text,
  html body #listings-sheet .spot-card h3,
  html body #listings-sheet .spot-card .spot-title,
  html body #listings-sheet .spot-card-title,
  html body #listings-sheet .spot-card .metadata,
  html body #listings-sheet .spot-card .text-gray-500,
  html body #listings-sheet .spot-card .text-gray-600,
  html body #listings-sheet .spot-card .address-text,
  html body #listings-sheet .spot-card .distance-text,
  html body #listings-sheet .spot-card .amenity-text,
  html body #listings-sheet .spot-card p,
  html body #listings-sheet .spot-card-text,
  html body #listings-sheet .spot-card .text-blue-700,
  html body #listings-sheet .spot-card .font-semibold,
  html body #listings-sheet .spot-card .price-display,
  html body #listings-sheet .spot-card [class*="price"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"],
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="uppercase"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"][class*="uppercase"][class*="tracking-wide"] {
    margin-right: -0.375rem !important;
    margin-left: 0 !important;
  }

  /* Disable marquee scrolling for ultra-mobile - ULTRA HIGH SPECIFICITY */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Disable all marquee animations and content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title,
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: translateX(37px) !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Hide duplicate elements */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  .spot-card .spot-card-title-duplicate,
  .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }

  /* Remove fade overlays */
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll::before,
  .spot-card .spot-card-title-wrapper.needs-scroll::before {
    display: none !important;
  }

  /* Add negative left margin to address spans - MAXIMUM SPECIFICITY */
  html body #listings-sheet .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body #listings-sheet .spot-card span.text-blue-600,
  html body #listings-sheet .spot-card span.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600,
  html body .spot-card span.dark\\:text-blue-400,
  #listings-sheet .spot-card span.text-blue-600,
  #listings-sheet .spot-card span.dark\\:text-blue-400,
  .spot-card span.text-blue-600,
  .spot-card span.dark\\:text-blue-400 {
    margin-left: -0.375rem !important; /* Negative left margin for address text alignment */
  }
}

/* Mobile (520px-567px) - Moderately compact details */
@media (min-width: 521px) and (max-width: 567px) {
  /* Make listing photos larger - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card .relative.w-16,
  #listings-sheet .spot-card .relative.w-20,
  #listings-sheet .spot-card div[class*="w-16"],
  #listings-sheet .spot-card div[class*="w-20"],
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 108px !important;
    height: 108px !important;
    margin-right: 0.625rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make the actual img elements larger and centered */
  #listings-sheet .spot-card .relative.w-16 img:not(.discover-listing-image),
  #listings-sheet .spot-card .relative.w-20 img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-20"] img:not(.discover-listing-image),
  .spot-card .relative.w-16 img:not(.discover-listing-image),
  .spot-card .relative.w-20 img:not(.discover-listing-image),
  .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  .spot-card div[class*="w-20"] img:not(.discover-listing-image) {
    width: 108px !important;
    height: 108px !important;
    object-fit: cover !important;
    border-radius: var(--border-radius-base, 0.5rem) !important;
  }

  /* Adjust content area to accommodate larger image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 118px) !important;
  }

  /* Make all text smaller */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }

  /* Smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* Smaller buttons — legacy cards only */
  #listings-sheet .spot-card:not(.discover-listing-card) .book-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .notify-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .contact-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) button {
    font-size: 12px !important;
    padding: 0.375rem 0.75rem !important;
    min-height: 38px !important;
  }

  /* Moderate spacing */
  #listings-sheet .spot-card-content {
    gap: 0.25rem !important;
    padding: 0.25rem 0.375rem 0.375rem 0.375rem !important;
  }

  /* Add negative right margin to all written content - ULTRA HIGH SPECIFICITY */
  html body #listings-sheet .spot-card .title-text,
  html body #listings-sheet .spot-card h3,
  html body #listings-sheet .spot-card .spot-title,
  html body #listings-sheet .spot-card-title,
  html body #listings-sheet .spot-card .metadata,
  html body #listings-sheet .spot-card .text-gray-500,
  html body #listings-sheet .spot-card .text-gray-600,
  html body #listings-sheet .spot-card .address-text,
  html body #listings-sheet .spot-card .distance-text,
  html body #listings-sheet .spot-card .amenity-text,
  html body #listings-sheet .spot-card p,
  html body #listings-sheet .spot-card-text,
  html body #listings-sheet .spot-card .text-blue-700,
  html body #listings-sheet .spot-card .font-semibold,
  html body #listings-sheet .spot-card .price-display,
  html body #listings-sheet .spot-card [class*="price"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"],
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="uppercase"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"][class*="uppercase"][class*="tracking-wide"] {
    margin-right: -0.25rem !important;
    margin-left: 0 !important;
  }

  /* Disable marquee scrolling for mobile and tablet - ULTRA HIGH SPECIFICITY */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Disable all marquee animations and content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title,
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: translateX(22px) !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Hide duplicate elements */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  .spot-card .spot-card-title-duplicate,
  .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }

  /* Remove fade overlays */
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll::before,
  .spot-card .spot-card-title-wrapper.needs-scroll::before {
    display: none !important;
  }

  /* Add negative left margin to address spans - MAXIMUM SPECIFICITY */
  html body #listings-sheet .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body #listings-sheet .spot-card span.text-blue-600,
  html body #listings-sheet .spot-card span.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600,
  html body .spot-card span.dark\\:text-blue-400,
  #listings-sheet .spot-card span.text-blue-600,
  #listings-sheet .spot-card span.dark\\:text-blue-400,
  .spot-card span.text-blue-600,
  .spot-card span.dark\\:text-blue-400 {
    margin-left: -0.25rem !important; /* Negative left margin for address text alignment */
  }
}

/* Tablet (568px-1100px) - Larger photos, moderately compact text */
@media (min-width: 520px) and (max-width: 1100px) {
  /* Make listing photos larger - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card .relative.w-16,
  #listings-sheet .spot-card .relative.w-20,
  #listings-sheet .spot-card div[class*="w-16"],
  #listings-sheet .spot-card div[class*="w-20"],
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 112px !important;
    height: 112px !important;
    margin-right: 0.75rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make the actual img elements larger and centered */
  #listings-sheet .spot-card .relative.w-16 img:not(.discover-listing-image),
  #listings-sheet .spot-card .relative.w-20 img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  #listings-sheet .spot-card div[class*="w-20"] img:not(.discover-listing-image),
  .spot-card .relative.w-16 img:not(.discover-listing-image),
  .spot-card .relative.w-20 img:not(.discover-listing-image),
  .spot-card div[class*="w-16"] img:not(.discover-listing-image),
  .spot-card div[class*="w-20"] img:not(.discover-listing-image) {
    width: 112px !important;
    height: 112px !important;
    object-fit: cover !important;
    border-radius: var(--border-radius-base, 0.5rem) !important;
  }

  /* Adjust content area to accommodate larger image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 122px) !important;
  }

  /* Moderately smaller text */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }

  /* Moderately smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Moderately smaller buttons — legacy cards only */
  #listings-sheet .spot-card:not(.discover-listing-card) .book-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .notify-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .contact-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) button {
    font-size: 13px !important;
    padding: 0.5rem 0.875rem !important;
    min-height: 40px !important;
  }

  /* Standard spacing */
  #listings-sheet .spot-card-content {
    gap: 0.375rem !important;
    padding: 0.375rem 0.5rem 0.5rem 0.5rem !important;
  }
}

/* Bottom sheet header: single marketplace toolbar (space type moved to Filters) */
@media (max-width: 1100px) {
  body.discover-page #listings-sheet {
    --discover-listings-header-control-radius: 999px;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode) #bottom-sheet-listings-header {
    background: var(--discover-chrome-surface, var(--discover-premium-surface-solid, #ffffff));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--discover-chrome-border, var(--discover-listings-panel-border, rgba(15, 23, 42, 0.08)));
  }

  .dark body.discover-page:not(.bottom-sheet-spot-details-mode) #bottom-sheet-listings-header,
  body.dark.discover-page:not(.bottom-sheet-spot-details-mode) #bottom-sheet-listings-header {
    background: var(--discover-chrome-surface, var(--discover-listings-panel-bg-dark, #171717));
    border-bottom-color: var(--discover-chrome-border, var(--discover-listings-panel-border-dark, rgba(255, 255, 255, 0.08)));
  }

  .sheet-listings-header-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
  }

  .sheet-listings-header-filter-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin-top: 0.28rem;
  }

  /* Title + count left, Filters + Recommended right — space type is on its own row below */
  .sheet-listings-header-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
  }

  .sheet-listings-header-top .listings-header-actions--sheet {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.4rem;
    width: auto;
    flex: 0 0 auto;
    transform: none !important;
  }

  .sheet-listings-header-top .sheet-listings-count,
  .sheet-listings-header-top .listings-header-subtitle {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.discover-page #bottom-sheet-listings-header .listings-header-title {
    font-size: 0.95rem;
  }

  /* Override bottomsheet.css touch compaction inside this header only (readable text + tap targets) */
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #amenities-popup-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#amenities-popup-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-toggle-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#sort-toggle-sheet {
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.55rem) !important;
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
    transform: none !important;
    gap: var(--discover-listings-header-control-gap, 0.28rem) !important;
    border-radius: var(--discover-listings-header-control-radius, 999px) !important;
    max-width: none !important;
  }

  /* Map matches Refine (.listings-header-control) — same scale and chrome. */
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-map-mode-header-btn:not([hidden]) {
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.55rem) !important;
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
    font-weight: 600 !important;
    gap: var(--discover-listings-header-control-gap, 0.28rem) !important;
    line-height: 1.2 !important;
    border-radius: var(--discover-listings-header-control-radius, 999px) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-refine-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#discover-refine-trigger-sheet {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
    height: auto !important;
    max-height: none !important;
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.55rem) !important;
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
    font-weight: 600 !important;
    gap: var(--discover-listings-header-control-gap, 0.28rem) !important;
    line-height: 1.2 !important;
    border-radius: var(--discover-listings-header-control-radius, 999px) !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-map-mode-header-btn:not([hidden]) .discover-map-mode-header-btn__icon,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-refine-trigger-sheet .discover-refine-trigger-sheet__icon,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-refine-trigger-sheet svg {
    width: var(--discover-listings-header-control-icon, 0.8125rem) !important;
    height: var(--discover-listings-header-control-icon, 0.8125rem) !important;
    min-width: var(--discover-listings-header-control-icon, 0.8125rem) !important;
    min-height: var(--discover-listings-header-control-icon, 0.8125rem) !important;
    max-width: var(--discover-listings-header-control-icon, 0.8125rem) !important;
    max-height: var(--discover-listings-header-control-icon, 0.8125rem) !important;
    flex-shrink: 0 !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-label-sheet {
    font-size: inherit !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #amenities-popup-trigger-sheet svg {
    width: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    height: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    min-width: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    min-height: var(--discover-listings-header-control-icon, 0.6875rem) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-toggle-sheet svg.mx-dropdown-arrow {
    width: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
    height: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
  }
}

/* FIX CAKE ICON DROPDOWN HEIGHT ISSUE ON MOBILE */

/* Legacy sheet long-term / filter-stack rules (space-type row removed from header) */
@media (max-width: 1100px) {
  .sheet-listings-header-filter-stack {
    display: none;
  }

  #bottom-sheet-listings-header .sheet-listings-header-filter-stack #parking-longterm-row-sheet,
  #bottom-sheet-listings-header .sheet-listings-header-filter-stack #parking-longterm-row-sheet.parking-longterm-row-sheet {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0.25rem 0 0 !important;
    width: 100%;
    justify-content: center;
    background: transparent !important;
  }

  #listings-sheet #parking-longterm-toggle-sheet,
  #parking-longterm-toggle-sheet.parking-longterm-bubble {
    min-height: 1.35rem !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 640px) {
  /* Header shell padding + drag handle: bottomsheet.css (<=640 phone / 641+ tablet).
   * Row 1: count + Refine (+ Map in list mode). Space type is in Refine. */
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-layout {
    gap: 0.28rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-count {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top .listings-header-actions--sheet {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-top: 0.05rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top .listings-header-sort-wrap {
    display: inline-block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #amenities-popup-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#amenities-popup-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-toggle-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#sort-toggle-sheet {
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.5rem) !important;
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: var(--discover-listings-header-control-radius, 999px) !important;
    white-space: nowrap !important;
    gap: var(--discover-listings-header-control-gap, 0.28rem) !important;
    flex: 0 0 auto !important;
    transform: none !important;
    max-width: none !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #amenities-popup-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#amenities-popup-trigger-sheet {
    background: var(--discover-control-bg) !important;
    border: 1px solid var(--discover-control-border) !important;
    color: var(--discover-control-text) !important;
    box-shadow: var(--discover-control-shadow) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-label-sheet {
    display: inline !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: inherit !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #amenities-popup-trigger-sheet svg {
    width: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    height: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    min-width: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    min-height: var(--discover-listings-header-control-icon, 0.6875rem) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-map-mode-header-btn:not([hidden]) {
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.5rem) !important;
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-map-mode-header-btn:not([hidden]) .discover-map-mode-header-btn__icon {
    width: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    height: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    min-width: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    min-height: var(--discover-listings-header-control-icon, 0.6875rem) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-toggle-sheet svg.mx-dropdown-arrow {
    width: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
    height: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
    min-width: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
    min-height: calc(var(--discover-listings-header-control-icon, 0.6875rem) * 0.9) !important;
  }

  body.discover-page #bottom-sheet-listings-header .listings-header-title {
    font-size: 0.95rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .listings-header-subtitle,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-count {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 380px) {
  body.discover-page #bottom-sheet-listings-header .sheet-listings-count {
    font-size: 0.8125rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top {
    gap: 0.25rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #amenities-popup-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#amenities-popup-trigger-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-toggle-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#sort-toggle-sheet {
    max-width: 5.75rem !important;
    padding: 0.26rem 0.36rem !important;
  }

  /* Map chip stays readable — same scale as Refine on narrow phones. */
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-map-mode-header-btn:not([hidden]) {
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.5rem) !important;
    min-width: auto !important;
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #discover-map-mode-header-btn:not([hidden]) .discover-map-mode-header-btn__label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    font-size: inherit !important;
  }

  /* Keep Filters label; collapse Sort to arrow affordance (aria-label remains). */
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top .listings-header-filters-label {
    max-width: 3.75rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.7rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-label-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top .listings-header-sort-label {
    display: none !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top #sort-toggle-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-top button#sort-toggle-sheet {
    max-width: 2.25rem !important;
    min-width: 2.1rem !important;
    justify-content: center !important;
  }
}

@media (min-width: 1101px) {
#listings-overlay,
  body.discover-page #listings-overlay,
  body #listings-overlay,
  html body #listings-overlay {
    display: flex !important; /* Flex layout for proper scrolling */
    flex-direction: column !important; /* Ensure flex column layout */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* CRITICAL: Ensure desktop content container is visible */
  /* STANDARD FIX: Always visible on desktop, regardless of content */
  #listings-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* CRITICAL: Hide mobile content on desktop */
  #listings-content-sheet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* NOTE: #listings-sheet desktop hiding is handled in bottomsheet.css */

  /* CRITICAL: Desktop only - long-term row must NOT move up (override Tailwind -mt-5/-translate-y-2) */
  #parking-longterm-row-sheet.parking-longterm-row-sheet,
  html body #parking-longterm-row-sheet,
  html body.discover-page #parking-longterm-row-sheet,
  html[data-breakpoint="desktop"] #parking-longterm-row-sheet {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

#listings-content:not(:empty) {
    background: linear-gradient(180deg, rgba(250, 247, 242, 0.58) 0%, rgba(250, 247, 242, 0.18) 100%);
    border-radius: var(--radius-md);
    margin: -0.5rem;    /* Negative margin for tighter spacing */
    padding-top: var(--spacing-sm);   /* Top padding only */
  }

  #listings-content:empty::before {
    content: 'No spaces in this area. Move the map, clear filters, or try different dates.';
    display: block;
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);  /* Systematic spacing for empty state */
    color: var(--neutral-500);
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

.dark #listings-content:empty::before {
    color: var(--neutral-400);
  }

  #listings-content.loading {
    /* Skeleton cards own the shimmer; avoid margin/padding that shifts the sheet rail */
    background: transparent;
    background-size: auto;
    animation: none;
    margin: 0;
    padding: 0;
    transition: none;
  }

  .dark #listings-content.loading {
    background: transparent;
    background-size: auto;
  }

  /* Ensure loading styles are cleared when loading class is removed */
  #listings-content:not(.loading) {
    background: transparent !important;
    background-size: auto !important;
    animation: none !important;
  }

  /* Hide skeleton cards when not in loading state */
  /* IMPORTANT: Only hide skeleton loader elements, not real spot cards */
  #listings-content:not(.loading) .animate-loading-shimmer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Hide skeleton spot cards (cards that only have shimmer, no real content) */
  /* Only target cards that have shimmer but don't have real spot card content */
  /* IMPORTANT: This rule must be very specific to only target skeleton cards */
  /* CRITICAL: Must explicitly exclude cards with data-spot-id to prevent hiding real cards */
  #listings-content:not(.loading) .spot-card:has(.animate-loading-shimmer):not(:has(img)):not(:has(.spot-card-image)):not([data-spot-id]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Ensure real spot cards are ALWAYS visible - highest priority */
  /* This rule must come after the skeleton card hiding rule to override it */
  /* STANDARD FIX: Removed non-standard :has() selectors - use simpler attribute/data selectors */
  #listings-content .spot-card[data-spot-id],
  #listings-content .spot-card img,
  #listings-content .spot-card .spot-card-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Semi-transparent overlay while re-sorting / refreshing existing cards */
  #listings-content.listings-updating,
  #listings-content-sheet.listings-updating {
    position: relative;
  }

  #listings-content .listings-update-overlay,
  #listings-content-sheet .listings-update-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(1px);
  }

  .dark #listings-content .listings-update-overlay,
  .dark #listings-content-sheet .listings-update-overlay {
    background: rgba(17, 24, 39, 0.55);
  }

  #listings-content.listings-updating .spot-card[data-spot-id],
  #listings-content-sheet.listings-updating .spot-card[data-spot-id] {
    opacity: 0.72 !important;
    pointer-events: none;
  }

  /* STANDARD FIX: Ensure parent card is visible if it has an image or data-spot-id */
  #listings-content .spot-card:has(img),
  #listings-content .spot-card:has(.spot-card-image) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

#listings-content::-webkit-scrollbar {
    width: 2px !important; /* Apple ultra-thin */
  }

  #listings-content::-webkit-scrollbar-thumb {
    background: #00000026 !important; /* Subtle visibility */
    border-radius: 1px !important; /* Minimal radius */
    border: none !important;
    min-height: 30px !important;
  }

  #listings-content::-webkit-scrollbar-thumb:hover {
    background: #0000004d !important; /* More visible on hover */
  }

  #listings-content::-webkit-scrollbar-track {
    background: transparent !important; /* Invisible track */
  }

  /* Remove scrollbar arrows */
  #listings-content::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Dark mode */
  .dark #listings-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .dark #listings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
  }

/* CHROME FIX: Ensure scrollbar has adequate width for mouse interaction */
  #listings-overlay {
    /* Reserve space for scrollbar to prevent layout shift */
    scrollbar-gutter: stable;
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #00000033 transparent;
  }

  /* CHROME FIX: Webkit scrollbar must have adequate width for click/drag interaction */
  #listings-overlay::-webkit-scrollbar {
    width: 8px !important; /* 8px minimum for reliable mouse interaction in Chrome */
    display: block !important; /* Ensure scrollbar is always displayed */
  }

  #listings-overlay::-webkit-scrollbar-thumb {
    background: #00000033 !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important; /* Creates visual padding */
    background-clip: padding-box !important; /* Ensures border acts as padding */
    min-height: 40px !important; /* Ensure thumb is large enough to grab */
  }

  #listings-overlay::-webkit-scrollbar-thumb:hover {
    background: #00000059 !important;
    background-clip: padding-box !important;
  }

  #listings-overlay::-webkit-scrollbar-thumb:active {
    background: #00000080 !important;
    background-clip: padding-box !important;
  }

  #listings-overlay::-webkit-scrollbar-track {
    background: #0000000d !important; /* Subtle track for visibility */
    border-radius: 4px !important;
  }

  #listings-overlay::-webkit-scrollbar-track:hover {
    background: #00000014 !important;
  }

  /* Remove scrollbar corner (where horizontal and vertical scrollbars meet) */
  #listings-overlay::-webkit-scrollbar-corner {
    background: transparent !important;
  }

  /* Dark mode scrollbar */
  .dark #listings-overlay {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  .dark #listings-overlay::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    background-clip: padding-box !important;
  }

  .dark #listings-overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    background-clip: padding-box !important;
  }

  .dark #listings-overlay::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.5) !important;
    background-clip: padding-box !important;
  }

  .dark #listings-overlay::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
  }

  .dark #listings-overlay::-webkit-scrollbar-track:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }

/* CRITICAL: Ensure scroll container can receive wheel events even when hovering cards */
  #listings-overlay {
    /* Ensure scroll container can receive wheel events */
    pointer-events: auto !important;
    /* CRITICAL: Ensure proper scroll behavior - map.css sets max-height, we ensure overflow */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: auto !important;
    /* CRITICAL: Ensure scroll container can receive wheel events from children */
    /* CHROME FIX: Add touch-action to allow wheel and touch events */
    touch-action: auto !important;
  }

  /* CRITICAL: Ensure spot cards don't create their own scroll context */
  /* Cards should allow wheel events to bubble naturally to parent scroll container */
  /* Cards no longer have overflow-hidden in HTML, but ensure they don't create scroll context */
  #listings-overlay .spot-card,
  #listings-content .spot-card {
    /* CRITICAL: Cards must not create scroll context - parent handles all scrolling */
    /* overflow-hidden removed from HTML generation, but ensure it's visible here */
    /* FIXED: Ensure cards don't block scroll events */
    pointer-events: auto !important;
    /* FIXED: Remove any transform or contain that might interfere with scroll */
    transform: none !important;
    contain: none !important;
    will-change: auto !important;
    isolation: auto !important;
    /* CHROME FIX: Cards must have overflow: visible to allow wheel events to bubble
       to the parent scroll container. overflow: hidden creates a scroll context that
       Chrome interprets as the card wanting to handle scroll events. */
    overflow: visible !important;
    /* CHROME FIX: Allow all scroll events including wheel events */
    touch-action: auto !important;
    overscroll-behavior: auto !important;
  }

  /* Ensure hover overlay doesn't interfere with scroll events */
  /* The absolute inset-0 overlay must not block wheel events from reaching the card */
  #listings-overlay .spot-card .absolute.inset-0,
  #listings-content .spot-card .absolute.inset-0 {
    pointer-events: none !important; /* Already set in HTML, but ensure it's enforced */
    /* CRITICAL: Ensure overlay doesn't create any scroll context */
    overscroll-behavior: none !important;
  }

  /* CHROME FIX: Marquee title wrapper has overflow:hidden for clipping, but must not block scroll.
     These rules ensure wheel events bubble to parent even when hovering over marquee titles. */
  #listings-overlay .spot-card .spot-card-title-wrapper.needs-scroll,
  #listings-content .spot-card .spot-card-title-wrapper.needs-scroll {
    /* Keep overflow:hidden from spot-card.css for marquee masking */
    /* But ensure scroll events pass through to parent */
    overscroll-behavior: auto !important;
    touch-action: pan-y pan-x !important;
  }

  #listings-overlay .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    overscroll-behavior: auto !important;
    touch-action: pan-y pan-x !important;
  }

  /* CRITICAL: Ensure listings content allows parent to scroll */
  #listings-content {
    /* Don't create scroll context - parent (#listings-overlay) handles scrolling */
    overflow-y: visible !important;
    overflow-x: hidden !important;
    /* Allow content to grow beyond container to trigger parent scroll */
    height: auto !important;
    min-height: 0 !important;
  }

#listings-overlay:empty,
  #listings-overlay.loading {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

/* Compact styling for header action chips (not the full-width space-type row) */
  #amenities-popup-trigger-desktop,
  #sort-toggle-desktop {
    transform: translateX(3px) !important;
    margin: 0 !important;
  }

  #sort-toggle-desktop,
  button#sort-toggle-desktop,
  button#sort-toggle-desktop.px-1\.5,
  button#sort-toggle-desktop[class*="px-1.5"] {
    font-size: 11px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 1px !important; /* Minimal horizontal padding - override Tailwind px-1.5 (6px) */
    padding-right: 1px !important; /* Minimal horizontal padding - override Tailwind px-1.5 (6px) */
    gap: 0 !important; /* NO gap between text and icon */
    min-height: unset !important;
    line-height: 1.3 !important;
    width: auto !important; /* Allow button to shrink to content */
    min-width: auto !important; /* Remove minimum width constraint */
    max-width: fit-content !important; /* Allow button to shrink to content */
  }

  #sort-toggle-desktop span,
  #sort-label-desktop {
    font-size: 11px !important;
    margin: 0 !important;
  }

  /* CRITICAL: Override all SVG arrow styling in sort toggle */
  #sort-toggle-desktop svg,
  #sort-toggle-desktop svg.mx-dropdown-arrow,
  #sort-toggle-desktop .mx-dropdown-arrow,
  button#sort-toggle-desktop svg,
  button#sort-toggle-desktop svg.mx-dropdown-arrow {
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    margin-left: 1px !important; /* Reduced left margin from 2px to 1px */
    margin-right: 0 !important;
    padding: 0 !important;
    transform: none !important; /* Remove the translateX(15px) */
    flex-shrink: 0 !important;
  }

  /* Filters button - remove gap and reduce spacing */
  #amenities-popup-trigger-desktop,
  button#amenities-popup-trigger-desktop,
  button#amenities-popup-trigger-desktop.px-1\.5,
  button#amenities-popup-trigger-desktop[class*="px-1.5"] {
    gap: 0 !important;
    padding-left: 1px !important; /* Minimal padding - override Tailwind px-1.5 (6px) */
    padding-right: 1px !important; /* Minimal padding - override Tailwind px-1.5 (6px) */
  }

  #amenities-popup-trigger-desktop svg {
    margin: 0 1px 0 0 !important; /* Reduced right margin from 2px to 1px */
  }

#amenities-popup-trigger-desktop,
  button#amenities-popup-trigger-desktop,
  button#amenities-popup-trigger-desktop.px-1\.5,
  button#amenities-popup-trigger-desktop[class*="px-1.5"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: var(--z-button-elevated) !important;
    position: relative !important;
    background: var(--discover-control-bg) !important;
    border: 1px solid var(--discover-control-border) !important;
    color: var(--discover-control-text) !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 1px !important; /* Minimal horizontal padding for narrower button */
    padding-right: 1px !important; /* Minimal horizontal padding for narrower button */
    width: auto !important; /* Allow button to shrink to content */
    min-width: auto !important; /* Remove minimum width constraint */
    max-width: fit-content !important; /* Allow button to shrink to content */
  }

  /* CRITICAL: Ensure desktop button is visible even if parent has hidden class */
  #listings-overlay.hidden #amenities-popup-trigger-desktop,
  #listings-overlay #amenities-popup-trigger-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: var(--discover-control-bg) !important;
    border: 1px solid var(--discover-control-border) !important;
    color: var(--discover-control-text) !important;
  }

  /* CRITICAL: Ensure desktop sort button is visible even if parent has hidden class */
  #listings-overlay.hidden #sort-toggle-desktop,
  #listings-overlay #sort-toggle-desktop,
  #listings-overlay:not(.hidden) #sort-toggle-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: var(--discover-control-bg) !important;
    border: 1px solid var(--discover-control-border) !important;
    color: var(--discover-control-text) !important;
    padding: 4px 8px !important; /* Better padding */
    border-radius: 6px !important;
    z-index: var(--z-button-elevated, 100) !important;
  }

  .dark #listings-overlay #sort-toggle-desktop {
    background: var(--discover-control-bg-dark) !important;
    border: 1px solid var(--discover-control-border-dark) !important;
    color: var(--discover-control-text-dark) !important;
  }

  /* Hover state */
  #listings-overlay #sort-toggle-desktop:hover {
    background: var(--discover-control-bg-hover) !important;
    border-color: var(--discover-control-border-hover) !important;
  }

  .dark #listings-overlay #sort-toggle-desktop:hover {
    background: var(--discover-control-bg-hover-dark) !important;
    border-color: var(--discover-control-border-hover-dark) !important;
  }

  /* CRITICAL: Only show active state when dropdown is actually open */
  #sort-toggle-desktop[aria-expanded="true"] {
    background: var(--discover-premium-wash) !important;
    border-color: var(--discover-premium-line-strong) !important;
    color: var(--discover-premium-ink) !important;
  }

  .dark #sort-toggle-desktop[aria-expanded="true"] {
    background: var(--discover-premium-hover) !important;
    border-color: var(--discover-premium-line-strong) !important;
    color: var(--discover-premium-ink) !important;
  }

  /* CRITICAL: Ensure button children are clickable */
  #amenities-popup-trigger-desktop * {
    pointer-events: auto !important;
  }

  /* CRITICAL: Ensure sort button children are clickable */
  #sort-toggle-desktop * {
    pointer-events: auto !important;
  }

  /* Mobile button must be hidden on desktop */
  #amenities-popup-trigger-sheet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

#amenities-popup-trigger-desktop:hover {
    background: var(--discover-control-bg-hover) !important;
    border-color: var(--discover-control-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

    /* Desktop: Full-featured content sizing */
    #unified-autocomplete .autocomplete-nav-bar {
      padding: 0.5rem 0.85rem 0.35rem !important;
    }

    #unified-autocomplete .pac-item {
      padding: 0.875rem 1.25rem !important;
      font-size: 1rem !important;
      line-height: 1.5 !important;
    }

}

@media (max-width: 1100px) {
#listings-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* CRITICAL: Hide desktop content on mobile and tablet */
  #listings-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* CRITICAL: Ensure mobile content container is visible */
  /* STANDARD FIX: Always visible on mobile and tablet, regardless of content */
  #listings-content-sheet {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

#listings-content-sheet:not(:empty) {
    background: linear-gradient(180deg, rgba(250, 247, 242, 0.58) 0%, rgba(250, 247, 242, 0.18) 100%);
    border-radius: var(--radius-md);
    margin: -0.1rem;    /* Negative margin for tighter spacing */
    padding-top: var(--spacing-sm);   /* Top padding only */
  }

  #listings-content-sheet:empty::before {
    content: 'No spaces in this area. Move the map, clear filters, or try different dates.';
    display: block;
    text-align: center;
    padding: 1.25rem 1rem;
    color: var(--neutral-500);
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

.dark #listings-content-sheet:empty::before {
    color: var(--neutral-400);
  }

  #listings-content-sheet.loading {
    /* Skeleton cards own the shimmer; avoid margin/padding that shifts bottom sheet content */
    background: transparent;
    background-size: auto;
    animation: none;
    margin: 0;
    padding: 0;
    transition: none;
  }

  .dark #listings-content-sheet.loading {
    background: transparent;
    background-size: auto;
  }

  /* Ensure loading styles are cleared when loading class is removed */
  #listings-content-sheet:not(.loading) {
    background: transparent !important;
    background-size: auto !important;
    animation: none !important;
  }

  /* Hide skeleton cards when not in loading state */
  /* IMPORTANT: Only hide skeleton loader elements, not real spot cards */
  #listings-content-sheet:not(.loading) .animate-loading-shimmer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Hide skeleton spot cards (cards that only have shimmer, no real content) */
  /* Only target cards that have shimmer but don't have real spot card content */
  #listings-content-sheet:not(.loading) .spot-card:has(.animate-loading-shimmer):not(:has(img)):not(:has(.spot-card-image)):not([data-spot-id]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Ensure real spot cards are always visible */
  /* STANDARD FIX: Removed non-standard :has() selectors - use simpler attribute/data selectors */
  #listings-content-sheet .spot-card[data-spot-id],
  #listings-content-sheet .spot-card img,
  #listings-content-sheet .spot-card .spot-card-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* STANDARD FIX: Ensure parent card is visible if it has an image or data-spot-id */
  #listings-content-sheet .spot-card:has(img),
  #listings-content-sheet .spot-card:has(.spot-card-image) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

#amenities-popup-trigger-sheet {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: var(--z-button-elevated) !important;
  }

  /* Desktop button hidden on mobile and tablet (it's in desktop overlay which is hidden) */
  #amenities-popup-trigger-desktop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

#listings-sheet .spot-details-container .spot-type-badge {
    transform: translateX(0.25rem) !important; /* Tiny right transform (4px) */
  }

body:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell:not(.listings-scroll-active) {
    position: relative !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    min-height: 0 !important;
  }

body:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell.listings-scroll-active {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    flex: 0 0 auto !important;
  }

body:not(.bottom-sheet-spot-details-mode) #listings-content-sheet {
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    min-height: 0 !important;
  }

  /* Ensure end message is always visible by adding extra space */
  .listings-end-message {
    margin-bottom: 1.25rem !important;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

/* Prevent cake menu dropdown from spanning full viewport height */
  #cake-menu,
  .cake-menu-trigger + .dropdown-menu,
  button.cake-menu-trigger + .dropdown-menu {
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    min-height: auto !important;
    overflow-y: auto !important;
    position: fixed !important;
  }

  /* Specific positioning for mobile and tablet cake menu */


  /* Extra small screens */

}

@media (max-width: 768px) {

#cake-menu,
    .cake-menu-trigger + .dropdown-menu,
    button.cake-menu-trigger + .dropdown-menu {
      position: fixed !important;
      right: 0.5rem !important;
      top: 3.5rem !important;
      left: auto !important;
      width: auto !important;
      min-width: 200px !important; /* Reduced from 240px */
      max-width: calc(100vw - 1rem) !important;
      height: auto !important;
      max-height: 250px !important; /* Fixed reasonable height instead of viewport-based */
      min-height: auto !important; /* Allow natural height */
    }
}

/* =============================================================================
 * Canonical Discover listings chrome.
 * Moved from the former page-level responsive refresh layer so listings.css owns
 * listings headers, desktop overlay geometry, filter controls, and empty states.
 * ============================================================================= */
body.discover-page .desktop-listings-header-layout,
body.discover-page .sheet-listings-header-layout {
  gap: 0.75rem !important;
}

body.discover-page .desktop-listings-header-top,
body.discover-page .sheet-listings-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}

@media (max-width: 640px) {
  body.discover-page .sheet-listings-header-top {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }
}

body.discover-page .listings-count-wrap,
body.discover-page .sheet-listings-count-wrap,
body.discover-page .listings-count,
body.discover-page .sheet-listings-count {
  color: var(--discover-chrome-muted, var(--color-text-secondary, #64748b)) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

body.discover-page .listings-count-wrap,
body.discover-page .sheet-listings-count-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  /* Stable toolbar row: spinner slot always reserved */
  --discover-count-spinner-size: 0.75rem;
}

body.discover-page .listings-count-wrap .listings-count,
body.discover-page .sheet-listings-count-wrap .sheet-listings-count {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative;
  transition: opacity 0.22s ease, color 0.22s ease, filter 0.28s ease;
}

/* Soft settle when a confirmed count arrives (boot or refresh). */
body.discover-page .listings-count.is-count-settle,
body.discover-page .sheet-listings-count.is-count-settle {
  animation: discover-listings-count-settle 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes discover-listings-count-settle {
  from {
    opacity: 0.35;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spinner slot always occupies layout so loading never shoves Filters/Sort. */
body.discover-page .sheet-listings-count-spinner {
  display: inline-block !important;
  flex: 0 0 var(--discover-count-spinner-size);
  width: var(--discover-count-spinner-size);
  height: var(--discover-count-spinner-size);
  margin: 0;
  pointer-events: none;
  vertical-align: middle;
  opacity: 0;
  visibility: hidden;
  /* Idle: no spin. Transform free for rotate when shown. */
  animation: none;
}

body.discover-page .listings-count-wrap.is-count-loading .sheet-listings-count-spinner,
body.discover-page .sheet-listings-count-wrap.is-count-loading .sheet-listings-count-spinner {
  opacity: 1;
  visibility: visible;
  border-width: 2px;
  animation: discover-spinner-rotate 0.7s linear infinite;
}

/* First boot / unknown count: sexy skeleton bar (no “Loading…” word reflow). */
body.discover-page .listings-count-wrap.is-count-pending .listings-count,
body.discover-page .sheet-listings-count-wrap.is-count-pending .sheet-listings-count {
  color: transparent !important;
  min-width: 6.75rem;
  max-width: 9.5rem;
  min-height: 1.05rem;
  overflow: hidden;
}

body.discover-page .listings-count-wrap.is-count-pending .listings-count::after,
body.discover-page .sheet-listings-count-wrap.is-count-pending .sheet-listings-count::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(100%, 5.75rem);
  height: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--discover-chrome-muted, #94a3b8) 22%, transparent) 0%,
    color-mix(in srgb, var(--discover-chrome-muted, #94a3b8) 42%, transparent) 45%,
    color-mix(in srgb, var(--discover-chrome-muted, #94a3b8) 22%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: discover-count-shimmer 1.15s ease-in-out infinite;
  pointer-events: none;
}

/* Refresh with last value still visible: dim text, keep layout. */
body.discover-page .listings-count-wrap.is-count-loading:not(.is-count-pending) .listings-count,
body.discover-page .sheet-listings-count-wrap.is-count-loading:not(.is-count-pending) .sheet-listings-count {
  opacity: 0.58;
  filter: saturate(0.92);
}

@keyframes discover-count-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (min-width: 640px) {
  body.discover-page .listings-count-wrap,
  body.discover-page .sheet-listings-count-wrap {
    --discover-count-spinner-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.discover-page .listings-count.is-count-settle,
  body.discover-page .sheet-listings-count.is-count-settle {
    animation: none;
  }

  body.discover-page .listings-count-wrap.is-count-pending .listings-count::after,
  body.discover-page .sheet-listings-count-wrap.is-count-pending .sheet-listings-count::after {
    animation: none;
  }

  body.discover-page .listings-count-wrap .listings-count,
  body.discover-page .sheet-listings-count-wrap .sheet-listings-count {
    transition: none;
  }
}

body.discover-page .listings-header-actions {
  gap: 0.45rem !important;
}

/* Filter badge: inline in the control row (iOS-style), not a corner notification dot. */
body.discover-page .listings-header-control .filter-count,
body.discover-page #discover-refine-trigger-sheet .filter-count,
body.discover-page #amenities-popup-trigger-desktop .filter-count,
body.discover-page #amenities-popup-trigger-sheet .filter-count {
  position: static;
  top: auto;
  right: auto;
  margin-left: 0.12rem !important;
  transform: none;
  z-index: auto;
}

body.discover-page .filter-count:not(.hidden):not([hidden]),
body.discover-page [data-filter-count]:not(.hidden):not([hidden]) {
  display: inline-flex;
}

/* Sort label: reserve typical “Recommended” width so dropdown width stays calm. */
body.discover-page #sort-label-desktop,
body.discover-page #sort-label-sheet {
  display: inline-block;
  min-width: 5.6em;
  text-align: left;
}

body.discover-page .discover-sort-dropdown--sheet {
  z-index: var(--z-discover-datetime-dropdown);
}

/* Pill chrome for desktop overlay controls only — sheet header uses compact chip rules below 1101px. */
@media (min-width: 1101px) {
  body.discover-page #listings-overlay .listings-header-control,
  body.discover-page #amenities-popup-trigger-desktop,
  body.discover-page #sort-toggle-desktop {
    min-height: clamp(1.85rem, 3.2vw, 2rem) !important;
    padding: clamp(0.32rem, 0.75vw, 0.4rem) clamp(0.44rem, 0.95vw, 0.56rem) !important;
    border-radius: 999px !important;
    border: 1px solid var(--discover-chrome-border) !important;
    background: var(--discover-chrome-surface-muted) !important;
    color: var(--discover-chrome-text) !important;
    box-shadow: none !important;
    font-size: clamp(0.6875rem, 1.45vw, 0.72rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    gap: clamp(0.18rem, 0.5vw, 0.24rem) !important;
  }

  body.discover-page #amenities-popup-trigger-desktop:hover,
  body.discover-page #sort-toggle-desktop:hover,
  body.discover-page #listings-overlay .listings-header-control[aria-expanded="true"],
  body.discover-page #amenities-popup-trigger-desktop[aria-expanded="true"],
  body.discover-page #sort-toggle-desktop[aria-expanded="true"] {
    background: var(--discover-premium-wash) !important;
    border-color: var(--discover-premium-line-strong) !important;
    color: var(--discover-premium-ink) !important;
  }

  .dark body.discover-page #amenities-popup-trigger-desktop:hover,
  .dark body.discover-page #sort-toggle-desktop:hover,
  .dark body.discover-page #listings-overlay .listings-header-control[aria-expanded="true"],
  .dark body.discover-page #amenities-popup-trigger-desktop[aria-expanded="true"],
  .dark body.discover-page #sort-toggle-desktop[aria-expanded="true"] {
    background: var(--discover-premium-hover) !important;
    color: var(--discover-premium-ink) !important;
  }
}

/* Desktop overlay space-type toggle — full-width row under title/actions */
body.discover-page #listings-overlay .desktop-listings-header-filter-row,
body.discover-page .desktop-listings-header-filter-row {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.discover-page #listings-overlay .space-type-toggle,
body.discover-page .desktop-listings-header-filter-row .space-type-toggle {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0.25rem !important;
  padding: 0.25rem !important;
  border-radius: 999px !important;
  border-color: var(--discover-chrome-border) !important;
  background: var(--discover-chrome-surface-muted) !important;
  box-sizing: border-box !important;
}

body.discover-page #listings-overlay .space-type-btn,
body.discover-page .desktop-listings-header-filter-row .space-type-btn {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.55rem 0.55rem !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

body.discover-page #listings-overlay .space-type-btn:not(.active),
body.discover-page .desktop-listings-header-filter-row .space-type-btn:not(.active) {
  color: var(--discover-chrome-muted) !important;
}

/* Bottom sheet space-type toggle — full-width row under title/actions */
@media (max-width: 1100px) {
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-toggle,
  body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0.2rem !important;
    gap: 0.2rem !important;
    border: 1px solid var(--discover-control-border) !important;
    border-radius: 999px !important;
    background: var(--discover-control-track-bg) !important;
    box-shadow: inset 0 1px 2px rgba(68, 64, 60, 0.05) !important;
    overflow: hidden !important;
    touch-action: manipulation;
  }

  html.dark body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-toggle,
  html.dark body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle,
  body.dark.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-toggle,
  body.dark.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle {
    background: var(--discover-control-track-bg-dark) !important;
    border-color: var(--discover-control-border-dark) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row button.space-type-btn,
  body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn,
  body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle button.space-type-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 2.125rem !important;
    max-height: 2.25rem !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 0.8125rem !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: transparent !important;
    color: var(--discover-control-text-muted) !important;
    box-shadow: none !important;
  }

  html.dark body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn:not(.active),
  html.dark body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn:not(.active),
  body.dark.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn:not(.active),
  body.dark.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn:not(.active) {
    color: var(--discover-control-text-muted-dark) !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn[data-space-type="storage"],
  body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn[data-space-type="storage"] {
    flex: 1.35 1 0 !important;
    padding-inline: 0.5rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn[data-space-type="parking"],
  body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn[data-space-type="parking"] {
    flex: 1.05 1 0 !important;
    padding-inline: 0.4rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn[data-space-type="all"],
  body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn[data-space-type="all"] {
    flex: 0.85 1 0 !important;
  }

  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row #parking-longterm-toggle-sheet,
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .parking-longterm-bubble {
    max-width: 100% !important;
    width: auto !important;
  }

  @media (max-width: 640px) {
    body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-toggle,
    body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle {
      padding: 0.18rem !important;
      gap: 0.15rem !important;
    }

    body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn,
    body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row button.space-type-btn,
    body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn,
    body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle button.space-type-btn {
      padding: 0.35rem 0.3rem !important;
      font-size: 0.75rem !important;
      min-height: 2rem !important;
    }
  }

  @media (max-width: 380px) {
    body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn,
    body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row button.space-type-btn,
    body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn,
    body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle button.space-type-btn {
      min-height: 1.875rem !important;
      padding: 0.3rem 0.25rem !important;
      font-size: 0.72rem !important;
    }
  }
}

body.discover-page .space-type-toggle .space-type-btn.active,
body.discover-page button.space-type-btn.active,
body.discover-page #listings-overlay .space-type-toggle .space-type-btn.active,
body.discover-page #listings-overlay .space-type-btn.active,
body.discover-page .desktop-listings-header-filter-row .space-type-btn.active,
body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn.active,
body.discover-page #bottom-sheet-listings-header .listings-header-space-type-toggle .space-type-btn.active {
  background: var(--discover-premium-ink) !important;
  color: var(--discover-premium-surface-solid) !important;
  -webkit-text-fill-color: var(--discover-premium-surface-solid) !important;
  border-color: var(--discover-premium-ink) !important;
  box-shadow: var(--discover-control-shadow-active) !important;
}

.dark body.discover-page .space-type-toggle .space-type-btn.active,
body.dark.discover-page .space-type-toggle .space-type-btn.active,
.dark body.discover-page #listings-overlay .space-type-toggle .space-type-btn.active,
.dark body.discover-page #listings-overlay .space-type-btn.active,
body.dark.discover-page #listings-overlay .space-type-toggle .space-type-btn.active,
body.dark.discover-page #listings-overlay .space-type-btn.active,
.dark body.discover-page .desktop-listings-header-filter-row .space-type-btn.active,
body.dark.discover-page .desktop-listings-header-filter-row .space-type-btn.active,
.dark body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn.active,
body.dark.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row .space-type-btn.active {
  background: #f5f5f4 !important;
  color: #1c1917 !important;
  -webkit-text-fill-color: #1c1917 !important;
  border-color: #f5f5f4 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

body.discover-page #listings-scroll-shell {
  padding: 0 var(--discover-chrome-edge) max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
}

/* Listings inner scroll: safe-area is sheet padding; keep shell bottom padding at 0. */
body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell.listings-scroll-active {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.discover-page.bottom-sheet-spot-details-mode #listings-scroll-shell {
  padding-bottom: 0 !important;
}

body.discover-page #listings-content-sheet {
  padding: 0 !important;
}

/* Tiny gap under the sheet header so the first listing is not flush against it. */
body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-content-sheet {
  padding-top: 0.3rem !important;
}

/* Cancel #listings-scroll-shell horizontal chrome so listing cards span the same
 * width as the sheet panel (they were visually narrower than the rounded shell). */
body.discover-page:not(.bottom-sheet-spot-details-mode)
  #listings-scroll-shell
  #listings-content-sheet
  > .spot-card.discover-listing-card {
  width: calc(100% + 2 * var(--discover-chrome-edge));
  max-width: none;
  margin-left: calc(-1 * var(--discover-chrome-edge));
  margin-right: calc(-1 * var(--discover-chrome-edge));
  box-sizing: border-box;
}

body.discover-page:not(.bottom-sheet-spot-details-mode)
  #listings-scroll-shell
  > section.discover-lower-marketplace:not(.discover-lower-marketplace--sheet) {
  width: calc(100% + 2 * var(--discover-chrome-edge));
  max-width: none;
  margin-left: calc(-1 * var(--discover-chrome-edge));
  margin-right: calc(-1 * var(--discover-chrome-edge));
  box-sizing: border-box;
}

body.discover-page #listings-sheet #listings-content-sheet.space-y-2 > * + * {
  margin-top: 0.75rem !important;
}

body.discover-page .load-more-btn,
body.discover-page .listings-retry-btn {
  background: var(--discover-premium-ink) !important;
  border: 1px solid var(--discover-premium-ink) !important;
  color: var(--discover-premium-surface-solid) !important;
  box-shadow: var(--discover-control-shadow-active) !important;
}

body.discover-page .load-more-btn:hover,
body.discover-page .listings-retry-btn:hover {
  background: var(--discover-premium-ink-soft) !important;
  border-color: var(--discover-premium-ink-soft) !important;
}

body.discover-page .load-more-btn:focus-visible,
body.discover-page .listings-retry-btn:focus-visible {
  outline: 2px solid var(--discover-premium-muted) !important;
  outline-offset: 2px !important;
}

body.discover-page .load-more-container {
  border-top-color: var(--discover-chrome-border) !important;
}

body.discover-page .discover-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

body.discover-page .discover-empty-host-link {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

body.discover-page .discover-empty-host-link a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Applied filters sit under list identity (sheet + desktop rail). */
body.discover-page .listings-applied-filters-rail {
  display: none;
  width: 100%;
  min-width: 0;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--discover-chrome-border, rgba(15, 23, 42, 0.08));
}

body.discover-page .listings-applied-filters-rail:not(.hidden) {
  display: block;
}

body.discover-page .listings-applied-filters-rail .mobile-filter-badges-container,
body.discover-page .listings-applied-filters-rail .listings-applied-filters-inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.05rem 0 0.1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

body.discover-page .listings-applied-filters-rail--desktop:not(.hidden) {
  display: block;
}

body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .listings-applied-filters-rail,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .listings-applied-filters-rail,
body.discover-page:has(#spot-detail-view:not(.hidden)) #listings-overlay .listings-applied-filters-rail--desktop {
  display: none !important;
}

.dark body.discover-page .listings-applied-filters-rail,
body.dark.discover-page .listings-applied-filters-rail {
  border-top-color: rgba(148, 163, 184, 0.18);
}

/* ---------------------------------------------------------------------------
 * Pass 4 — Listings quick filters (progressive disclosure under space-type)
 * --------------------------------------------------------------------------- */
/* An unconfigured quick-filter rail should not reserve an empty row. */
body.discover-page .listings-quick-filters:not(:has(button)) {
  display: none;
}

body.discover-page .listings-quick-filters {
  width: 100%;
  min-width: 0;
  margin-top: 0.4rem;
}

body.discover-page .listings-quick-filters-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.05rem 0.65rem 0.15rem 0;
  -webkit-overflow-scrolling: touch;
  /* Hide thin scrollbar; end padding keeps the last chip from looking clipped. */
  scrollbar-width: none;
}

body.discover-page .listings-quick-filters-rail::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

body.discover-page .listings-quick-filters-rail.hidden,
body.discover-page .listings-quick-filters-rail[hidden] {
  display: none !important;
}

body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--discover-premium-line, rgba(120, 113, 108, 0.22));
  background: var(--discover-premium-surface-solid, #fff);
  color: var(--discover-premium-ink, #171412);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button:hover {
  border-color: var(--discover-premium-line-strong, rgba(120, 113, 108, 0.38));
  background: var(--discover-premium-wash, #f5f3ef);
}

body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button.active,
body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button[aria-pressed="true"] {
  border-color: var(--color-brand-accent, #0f5a56);
  background: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 12%, var(--discover-premium-surface-solid, #fff));
  color: var(--color-brand-accent-fg, #0f5a56);
  font-weight: 700;
}

body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button:focus-visible {
  outline: 2px solid var(--color-brand-accent, #0f5a56);
  outline-offset: 2px;
}

.dark body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button,
body.dark.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button {
  background: var(--discover-premium-surface-solid, #1c1917);
  border-color: var(--discover-premium-line, rgba(168, 162, 158, 0.28));
  color: var(--discover-premium-ink, #fafaf9);
}

.dark body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button:hover,
body.dark.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button:hover {
  background: var(--discover-premium-wash, #292524);
}

.dark body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button.active,
.dark body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button[aria-pressed="true"],
body.dark.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button.active,
body.dark.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 70%, #fafaf9);
  background: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 22%, var(--discover-premium-surface-solid, #1c1917));
  color: #f0fdfa;
}

body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .listings-quick-filters,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .listings-quick-filters,
body.discover-page:has(#spot-detail-view:not(.hidden)) #listings-overlay .listings-quick-filters {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.discover-page .listings-quick-filters .listings-quick-filter-chip.amenity-chip-button {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Mobile sheet header calm pass — count-led identity, fewer chips, tighter rhythm
 * --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Merged Refine control (mobile/tablet sheet header). */
  body.discover-page #discover-refine-trigger-sheet {
    display: inline-flex !important;
  }

  body.discover-page #bottom-sheet-listings-header .listings-header-control--sheet-legacy,
  body.discover-page #bottom-sheet-listings-header .listings-header-sort-wrap--sheet-legacy {
    display: none !important;
  }

  /* Space type lives in Refine on phone/tablet — drop the extra header row. */
  body.discover-page #bottom-sheet-listings-header .sheet-listings-header-filter-row {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body.discover-page #bottom-sheet-listings-header .listings-header-title-block--sheet {
    gap: 0 !important;
  }

  body.discover-page #bottom-sheet-listings-header .listings-quick-filters {
    margin-top: 0.2rem !important;
  }

  body.discover-page #bottom-sheet-listings-header .listings-header-primary-line,
  body.discover-page #bottom-sheet-listings-header #listings-count-sheet.listings-header-primary-line {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--discover-premium-ink, #171412) !important;
  }

  /* Spot title (same #listings-count-sheet): keep primary, beat list-density above. */
  body.discover-page.bottom-sheet-spot-details-mode #bottom-sheet-listings-header #listings-count-sheet.listings-header-primary-line,
  body.discover-page.bottom-sheet-spot-details-mode #listings-sheet #listings-count-sheet {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--discover-chrome-text, var(--discover-premium-ink, #171412)) !important;
  }

  .dark body.discover-page.bottom-sheet-spot-details-mode #bottom-sheet-listings-header #listings-count-sheet.listings-header-primary-line,
  .dark body.discover-page.bottom-sheet-spot-details-mode #listings-sheet #listings-count-sheet,
  body.dark.discover-page.bottom-sheet-spot-details-mode #bottom-sheet-listings-header #listings-count-sheet.listings-header-primary-line,
  body.dark.discover-page.bottom-sheet-spot-details-mode #listings-sheet #listings-count-sheet {
    color: var(--discover-chrome-text, var(--discover-premium-ink, #fafaf9)) !important;
  }

  .dark body.discover-page #bottom-sheet-listings-header .listings-header-primary-line,
  .dark body.discover-page #bottom-sheet-listings-header #listings-count-sheet.listings-header-primary-line,
  body.dark.discover-page #bottom-sheet-listings-header .listings-header-primary-line {
    color: var(--discover-premium-ink, #fafaf9) !important;
  }

  /* Progressive disclosure: first three quick chips; full set stays in Refine popup. */
  body.discover-page #bottom-sheet-listings-header .listings-quick-filters-rail .listings-quick-filter-chip:nth-child(n + 4) {
    display: none !important;
  }

  body.discover-page #bottom-sheet-listings-header .listings-applied-filters-rail {
    margin-top: 0.2rem !important;
  }
}

@media (min-width: 1101px) {
  body.discover-page #discover-refine-trigger-sheet {
    display: none !important;
  }
}

body.discover-page .discover-empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0.48rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--discover-chrome-border);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1;
}

body.discover-page .discover-empty-action--primary {
  background: var(--discover-premium-ink);
  border-color: var(--discover-premium-ink);
  color: var(--discover-premium-surface-solid);
}

body.discover-page .discover-empty-action--secondary {
  background: var(--discover-chrome-surface-muted);
  color: var(--discover-chrome-text);
}

body.discover-page .discover-empty-action:hover {
  transform: none !important;
  box-shadow: 0 6px 16px rgba(28, 25, 23, 0.12);
}

body.discover-page .discover-empty-action:focus-visible {
  outline: 2px solid var(--discover-premium-muted);
  outline-offset: 2px;
}

/* Desktop overlay empty state — match sheet polish */
@media (min-width: 1101px) {
  body.discover-page #listings-overlay .discover-empty-state {
    padding: 1.5rem 1rem 0.75rem;
    text-align: center;
  }

  body.discover-page #listings-overlay .discover-empty-state svg {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    color: var(--discover-chrome-muted);
  }

  body.discover-page #listings-overlay .discover-empty-actions {
    margin-top: 1rem;
    gap: 0.5rem;
  }
}

.dark body.discover-page .discover-empty-action--primary,
body.dark.discover-page .discover-empty-action--primary {
  background: #f5f5f4;
  border-color: #f5f5f4;
  color: #1c1917;
}

.dark body.discover-page .discover-empty-action--secondary,
body.dark.discover-page .discover-empty-action--secondary {
  background: rgba(64, 64, 64, 0.58);
  border-color: rgba(82, 82, 82, 0.72);
  color: #f5f5f4;
}

body.discover-page .discover-lower-marketplace {
  flex: 0 0 auto;
  margin: 0.75rem 0 0.5rem;
  padding: 0.85rem 0.8rem;
  border: 1px solid rgba(15, 90, 86, 0.12);
  border-radius: 1.1rem;
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(241, 252, 247, 0.72) 42%,
    rgba(250, 247, 242, 0.78) 100%
  );
  box-shadow: 0 1px 0 rgba(15, 90, 86, 0.04) inset;
  color: var(--discover-chrome-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.bottom-sheet-spot-details-mode .discover-lower-marketplace,
body.bottom-sheet-spot-details-mode #listings-scroll-shell > section.discover-lower-marketplace--sheet {
  display: none !important;
}

/* Bottom sheet footer module: full-bleed to match listing cards */
@media (max-width: 1100px) {
  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell.listings-scroll-active:has(.discover-empty-state) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Center empty copy in the visible sheet body (avoids hugging the header). */
  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    #listings-content-sheet {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: clamp(8.5rem, 28vh, 13.5rem) !important;
    padding: clamp(0.5rem, 2.5vh, 1rem) var(--discover-mobile-panel-padding, 0.75rem) 0.25rem !important;
    box-sizing: border-box !important;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-empty-state {
    width: 100%;
    max-width: 19.5rem;
    margin-inline: auto;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-empty-state__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.012em;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-empty-state__body {
    font-size: 0.8125rem;
    line-height: 1.45;
    margin-top: 0.375rem !important;
    max-width: 17.5rem;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-empty-state svg {
    width: 2rem !important;
    height: 2rem !important;
    margin-bottom: 0.5rem !important;
    opacity: 0.85;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-empty-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    max-width: 15.5rem;
    margin: 0.875rem auto 0;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-empty-action {
    width: 100%;
    min-height: 2.625rem;
    font-size: 0.8125rem;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-lower-marketplace--sheet {
    flex: 0 0 auto;
    margin-top: auto;
  }

  /* Peek strip: keep marketing footer out of the collapsed slice. */
  body.discover-page[data-discover-sheet-state="collapsed"]
    #listings-scroll-shell:has(.discover-empty-state)
    .discover-lower-marketplace--sheet {
    display: none !important;
  }

  /*
   * Boot / empty list: never let the marketplace footer paint in the first sheet
   * viewport before skeletons, cards, or an empty/error state exist.
   */
  body.discover-page
    #listings-scroll-shell:not(:has(.discover-listing-skeleton)):not(:has([data-spot-id])):not(:has(.discover-empty-state))
    .discover-lower-marketplace--sheet {
    display: none !important;
  }

  /* Getting-started empty: keep host marketing out until the user has searched. */
  body.discover-page
    #listings-scroll-shell:has(.discover-empty-state--getting-started)
    .discover-lower-marketplace--sheet {
    display: none !important;
  }

  /* Sparse feed (1–2 cards): do not let host marketing dominate the sheet. */
  body.discover-page
    #listings-scroll-shell:has(.discover-listing-card):not(:has(.discover-listing-card:nth-child(3)))
    .discover-lower-marketplace--sheet {
    display: none !important;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode)
    #listings-scroll-shell
    > section.discover-lower-marketplace.discover-lower-marketplace--sheet {
    width: calc(100% + 2 * var(--discover-chrome-edge));
    max-width: none;
    margin-left: calc(-1 * var(--discover-chrome-edge));
    margin-right: calc(-1 * var(--discover-chrome-edge));
    box-sizing: border-box;
  }

  body.discover-page #listings-scroll-shell .discover-lower-marketplace--sheet {
    width: calc(100% + 2 * var(--discover-chrome-edge));
    max-width: none;
    margin-left: calc(-1 * var(--discover-chrome-edge));
    margin-right: calc(-1 * var(--discover-chrome-edge));
    margin-bottom: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.95rem;
    box-shadow: none;
  }

  html:not(.dark) body.discover-page #listings-scroll-shell .discover-lower-marketplace--sheet {
    border-color: rgba(120, 113, 108, 0.16);
    background: rgba(255, 255, 255, 0.68);
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence {
    --discover-lower-row-pad-inline: 0.52rem;
    --discover-lower-row-icon-size: 1rem;
    --discover-lower-intro-pad-end: 0.52rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__intro {
    margin-bottom: 0.625rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__title,
  body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__title {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
  }

  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__title,
  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__title {
    color: #292524;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__body,
  body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__body {
    font-size: 0.71875rem;
    line-height: 1.4;
    color: #57534e;
  }

  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__body,
  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__body {
    color: #57534e;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__rows {
    gap: 0.45rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row {
    padding: 0.48rem 0.52rem;
    border-radius: 0.625rem;
  }

  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row {
    border-color: rgba(214, 211, 208, 0.38);
    background: rgba(255, 255, 255, 0.42);
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-kicker {
    font-size: 0.6875rem;
    font-weight: 600;
  }

  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-kicker {
    color: #57534e;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row strong {
    font-size: 0.6875rem;
    font-weight: 500;
    margin-top: 0.18rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-icon {
    width: 1rem;
    height: 1rem;
  }

  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-icon {
    color: rgba(120, 113, 108, 0.38);
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta {
    margin-top: 0.65rem;
    padding: 0.55rem 0.58rem;
    border-radius: 0.625rem;
    box-shadow: none;
  }

  html:not(.dark) body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta {
    border-color: rgba(15, 90, 86, 0.1);
    background: rgba(241, 252, 247, 0.45);
  }

  body.discover-page .discover-lower-marketplace--sheet a.discover-lower-host-cta__primary.btn-brand {
    min-height: 1.875rem;
    padding: 0.4rem 0.68rem;
    font-size: 0.6875rem;
    font-weight: 650;
    box-shadow: 0 2px 8px rgba(15, 90, 86, 0.1);
  }

  body.discover-page .discover-lower-marketplace--sheet a.discover-lower-host-cta__primary.btn-brand:hover {
    box-shadow: 0 3px 10px rgba(15, 90, 86, 0.14);
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__secondary {
    font-size: 0.6875rem;
    font-weight: 600;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-links {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* Dark bottom sheet: match desktop listings rail footer (.discover-lower-marketplace--desktop) */
  html.dark body.discover-page .discover-lower-marketplace--sheet,
  body.dark.discover-page .discover-lower-marketplace--sheet {
    border-color: rgba(94, 234, 212, 0.12);
    background: linear-gradient(
      168deg,
      rgba(38, 38, 38, 0.82) 0%,
      rgba(26, 46, 42, 0.38) 55%,
      rgba(38, 38, 38, 0.78) 100%
    );
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) inset;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__title,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__title,
  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__title,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__title,
  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-kicker,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-kicker {
    color: #f5f5f4;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__body,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__body,
  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__body,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__body {
    color: #d6d3d1;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row strong,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row strong {
    color: #d6d3d1;
    font-weight: 600;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__rows,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__rows {
    gap: 0;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row {
    padding: 0.5rem 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row:not(:last-child),
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.55rem;
    margin-bottom: 0.1rem;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-icon,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row-icon {
    color: rgba(167, 243, 208, 0.58);
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta {
    background: linear-gradient(
      125deg,
      rgba(15, 90, 86, 0.22) 0%,
      rgba(45, 55, 52, 0.38) 100%
    );
    border-color: rgba(94, 234, 212, 0.14);
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-links,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-links {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #f5f5f4;
    opacity: 1;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-links a,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-links a {
    color: inherit;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-links a:hover,
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-links a:hover {
    color: #fafaf9;
  }

  html.dark body.discover-page .discover-lower-marketplace--sheet .discover-lower-links span[aria-hidden="true"],
  body.dark.discover-page .discover-lower-marketplace--sheet .discover-lower-links span[aria-hidden="true"] {
    color: rgba(214, 211, 209, 0.72);
  }
}

body.discover-page .discover-lower-confidence {
  min-width: 0;
  --discover-lower-row-pad-inline: 0.68rem;
  --discover-lower-row-icon-size: 1.125rem;
  --discover-lower-row-gap: 0.55rem;
  --discover-lower-intro-pad-end: 0.68rem;
}

body.discover-page .discover-lower-confidence__intro {
  margin-bottom: 0.75rem;
  padding-bottom: 0.05rem;
  padding-inline: calc(
    var(--discover-lower-row-pad-inline) + var(--discover-lower-row-icon-size) + var(--discover-lower-row-gap)
  ) var(--discover-lower-intro-pad-end);
  max-width: 34ch;
}

body.discover-page .discover-lower-confidence__title,
body.discover-page .discover-lower-host-cta__title {
  margin: 0;
  color: var(--discover-chrome-text);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body.discover-page .discover-lower-confidence__body,
body.discover-page .discover-lower-host-cta__body {
  margin: 0.32rem 0 0;
  color: var(--discover-chrome-muted);
  font-size: 0.74rem;
  line-height: 1.38;
}

body.discover-page .discover-lower-confidence__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.52rem;
}

body.discover-page .discover-lower-confidence__row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid rgba(214, 211, 208, 0.55);
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.72);
}

body.discover-page .discover-lower-confidence__row-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1rem;
  color: rgba(15, 90, 86, 0.42);
}

body.discover-page .discover-lower-confidence__row-icon--nudge-down {
  margin-top: 0.22rem;
}

body.discover-page .discover-lower-confidence__row-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.discover-page .discover-lower-confidence__row-main {
  min-width: 0;
  flex: 1 1 auto;
}

body.discover-page .discover-lower-confidence__row-kicker {
  display: block;
  color: var(--discover-chrome-text);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.2;
}

body.discover-page .discover-lower-confidence__row strong {
  display: block;
  margin-top: 0.22rem;
  color: var(--discover-chrome-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.32;
}

body.discover-page .discover-lower-marketplace a:not(.discover-lower-host-cta__primary):not(.btn-brand) {
  color: inherit;
  text-decoration: none;
}

body.discover-page .discover-lower-marketplace a:not(.discover-lower-host-cta__primary):not(.btn-brand):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.discover-page .discover-lower-host-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.8rem;
  padding: 0.72rem 0.75rem;
  border: 1px solid rgba(15, 90, 86, 0.2);
  border-radius: 0.95rem;
  background: linear-gradient(
    125deg,
    rgba(236, 253, 245, 0.85) 0%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(250, 247, 242, 0.82) 100%
  );
  box-shadow: 0 1px 0 rgba(15, 90, 86, 0.05) inset;
}

body.discover-page .discover-lower-host-cta__copy {
  min-width: 0;
}

body.discover-page .discover-lower-host-cta__actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.28rem;
}

body.discover-page .discover-lower-host-cta__secondary {
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
}

/* Pill sizing for host CTA; label + brand colors: luxury-spot-details.css (loads after this) + .btn-brand */
body.discover-page a.discover-lower-host-cta__primary.btn-brand {
  min-height: 2rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  gap: 0.25rem;
  box-shadow: 0 4px 14px rgba(15, 90, 86, 0.18);
}

body.discover-page a.discover-lower-host-cta__primary.btn-brand:hover {
  box-shadow: 0 6px 18px rgba(15, 90, 86, 0.22);
}

body.discover-page .discover-lower-host-cta__secondary,
body.discover-page .discover-lower-links {
  color: var(--discover-premium-ink);
}

body.discover-page .discover-lower-host-cta__secondary {
  font-weight: 650;
  text-decoration: none;
  opacity: 0.88;
}

body.discover-page .discover-lower-host-cta__secondary:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.discover-page .discover-lower-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--discover-chrome-border);
  font-size: 0.72rem;
  font-weight: 700;
}

.dark body.discover-page .discover-lower-marketplace,
body.dark.discover-page .discover-lower-marketplace {
  background: linear-gradient(
    168deg,
    rgba(38, 38, 38, 0.94) 0%,
    rgba(26, 46, 42, 0.42) 48%,
    rgba(38, 38, 38, 0.88) 100%
  );
  border-color: rgba(94, 234, 212, 0.14);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) inset;
}

.dark body.discover-page .discover-lower-confidence__row-icon,
body.dark.discover-page .discover-lower-confidence__row-icon {
  color: rgba(167, 243, 208, 0.58);
}

.dark body.discover-page .discover-lower-confidence__title,
body.dark.discover-page .discover-lower-confidence__title,
.dark body.discover-page .discover-lower-host-cta__title,
body.dark.discover-page .discover-lower-host-cta__title,
.dark body.discover-page .discover-lower-confidence__row-kicker,
body.dark.discover-page .discover-lower-confidence__row-kicker {
  color: #f5f5f4;
}

.dark body.discover-page .discover-lower-confidence__body,
body.dark.discover-page .discover-lower-confidence__body,
.dark body.discover-page .discover-lower-host-cta__body,
body.dark.discover-page .discover-lower-host-cta__body,
.dark body.discover-page .discover-lower-confidence__row strong,
body.dark.discover-page .discover-lower-confidence__row strong {
  color: #d6d3d1;
}

.dark body.discover-page .discover-lower-confidence,
body.dark.discover-page .discover-lower-confidence {
  --discover-lower-row-pad-inline: 0;
  --discover-lower-intro-pad-end: 0;
}

.dark body.discover-page .discover-lower-confidence__rows,
body.dark.discover-page .discover-lower-confidence__rows {
  gap: 0;
}

.dark body.discover-page .discover-lower-confidence__row,
body.dark.discover-page .discover-lower-confidence__row {
  padding: 0.5rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.dark body.discover-page .discover-lower-confidence__row:not(:last-child),
body.dark.discover-page .discover-lower-confidence__row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.55rem;
  margin-bottom: 0.1rem;
}

.dark body.discover-page .discover-lower-host-cta,
body.dark.discover-page .discover-lower-host-cta {
  background: linear-gradient(
    125deg,
    rgba(15, 90, 86, 0.32) 0%,
    rgba(45, 55, 52, 0.55) 100%
  );
  border-color: rgba(94, 234, 212, 0.2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) inset;
}

.dark body.discover-page .discover-lower-host-cta__secondary,
body.dark.discover-page .discover-lower-host-cta__secondary,
.dark body.discover-page .discover-lower-links,
body.dark.discover-page .discover-lower-links {
  color: #f5f5f4;
  border-top-color: rgba(255, 255, 255, 0.12);
}

.dark body.discover-page .load-more-btn,
body.dark.discover-page .load-more-btn,
.dark body.discover-page .listings-retry-btn,
body.dark.discover-page .listings-retry-btn {
  background: #f5f5f4 !important;
  border-color: #f5f5f4 !important;
  color: #1c1917 !important;
}

@media (min-width: 1101px) {
  /* Shared with desktop spot-detail dialog (map.css + JS) so the panel never overlaps the rail as vw grows */
  body.discover-page {
    /* Compact desktop (~1130px): grow rail with viewport; 1301px+ widens further for card layout */
    --discover-desktop-listings-rail-width: clamp(24rem, 38vw, 27.5rem);
    --discover-desktop-listings-rail-left: clamp(1rem, 1.6vw, 1.5rem);
    --discover-spot-detail-dialog-gap: 1rem;
  }

  @media (min-width: 1301px) {
    body.discover-page {
      /* Was clamp(24rem, 28vw, 29rem): 28vw fell below 24rem near the breakpoint, so the rail
         snapped to the floor and squished horizontal listing cards. Keep a wider floor and grow. */
      --discover-desktop-listings-rail-width: clamp(30rem, 32vw, 36rem);
    }
  }

  /*
   * Desktop rail: geometry = rail width tokens; shell paint = --discover-chrome-*
   * (!important beats Tailwind utilities on #listings-overlay in discover.html).
   */
  body.discover-page #listings-overlay,
  body.discover-page #listings-overlay.hidden {
    top: calc(var(--discover-current-topbar-height, 4.5rem) + 1rem) !important;
    left: var(--discover-desktop-listings-rail-left) !important;
    width: var(--discover-desktop-listings-rail-width) !important;
    max-width: min(36rem, calc(100vw - 2rem)) !important;
    max-height: calc(100dvh - var(--discover-current-topbar-height, 4.5rem) - 2rem) !important;
    border-radius: var(--discover-chrome-radius-lg) !important;
    border: 1px solid var(--discover-chrome-border) !important;
    background: var(--discover-chrome-surface) !important;
    box-shadow: var(--discover-chrome-shadow-panel) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  }

  /* Sticky chrome: frosted glass so listing cards blur beneath while scrolling */
  body.discover-page #listings-overlay .discover-listings-sticky-header {
    padding: 1rem !important;
    background: var(--discover-glass-medium, rgba(255, 255, 255, 0.92)) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--discover-chrome-border) 72%, transparent) !important;
  }

  .dark body.discover-page #listings-overlay .discover-listings-sticky-header,
  body.dark.discover-page #listings-overlay .discover-listings-sticky-header {
    background: var(--discover-listings-panel-bg-dark, rgba(23, 23, 23, 0.94)) !important;
    border-bottom-color: color-mix(
      in srgb,
      var(--discover-chrome-border, var(--discover-listings-panel-border-dark)) 72%,
      transparent
    ) !important;
  }

  body.discover-page #listings-content {
    padding: 0.875rem !important;
  }

  body.discover-page #listings-content.space-y-1\.5 > * + * {
    margin-top: 0.75rem !important;
  }

  /* When the desktop sheet has results, keep the confidence module available but visually secondary */
  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop {
    margin-top: 0.45rem;
    margin-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
    padding: 0.5rem 0.55rem;
    border-color: rgba(15, 90, 86, 0.1);
    background: linear-gradient(
      168deg,
      rgba(255, 255, 255, 0.74) 0%,
      rgba(241, 252, 247, 0.4) 48%,
      rgba(250, 247, 242, 0.46) 100%
    );
    opacity: 0.94;
  }

  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__title,
  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta__title {
    font-size: 0.8rem;
    font-weight: 720;
    color: #57534e;
  }

  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__body,
  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta__body {
    font-size: 0.7rem;
  }

  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row {
    padding: 0.46rem 0.52rem;
    border-color: rgba(214, 211, 208, 0.55);
    background: rgba(255, 255, 255, 0.45);
  }

  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row-kicker {
    font-size: 0.7rem;
    font-weight: 700;
  }

  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row strong {
    font-size: 0.66rem;
    font-weight: 600;
  }

  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta {
    margin-top: 0.55rem;
    padding: 0.52rem 0.55rem;
    border-color: rgba(15, 90, 86, 0.14);
    background: linear-gradient(
      125deg,
      rgba(236, 253, 245, 0.58) 0%,
      rgba(250, 247, 242, 0.52) 100%
    );
  }

  body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-links {
    margin-top: 0.55rem;
    padding-top: 0.48rem;
    font-size: 0.68rem;
    font-weight: 650;
    opacity: 0.92;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop {
    border-color: rgba(94, 234, 212, 0.12);
    background: linear-gradient(
      168deg,
      rgba(38, 38, 38, 0.82) 0%,
      rgba(26, 46, 42, 0.38) 55%,
      rgba(38, 38, 38, 0.78) 100%
    );
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__title,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__title,
  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta__title,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta__title,
  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row-kicker,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row-kicker {
    color: #f5f5f4;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__body,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__body,
  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta__body,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta__body {
    color: #d6d3d1;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row strong,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row strong {
    color: #d6d3d1;
    font-weight: 600;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__rows,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__rows {
    gap: 0;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row {
    padding: 0.5rem 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row:not(:last-child),
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.55rem;
    margin-bottom: 0.1rem;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row-icon,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-confidence__row-icon {
    color: rgba(167, 243, 208, 0.58);
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-links,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-links {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: #f5f5f4;
    opacity: 1;
  }

  .dark body.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta,
  body.dark.discover-page #listings-overlay:has(#listings-content .discover-listing-card--desktop) .discover-lower-marketplace--desktop .discover-lower-host-cta {
    background: linear-gradient(
      125deg,
      rgba(15, 90, 86, 0.22) 0%,
      rgba(45, 55, 52, 0.38) 100%
    );
    border-color: rgba(94, 234, 212, 0.14);
  }
}

@media (max-width: 567px) {
  /* Applied-filter rail under list identity; tighten chip spacing only. */
  body.discover-page .mobile-filter-badges-container {
    padding: 0.2rem 0 0.15rem !important;
    gap: 0.4rem !important;
  }

  body.discover-page .sheet-listings-header-top {
    align-items: flex-start !important;
  }

  body.discover-page .sheet-listings-count {
    font-size: 0.875rem !important;
  }

  body.discover-page .listings-header-control,
  body.discover-page #amenities-popup-trigger-sheet,
  body.discover-page #sort-toggle-sheet {
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.5rem) !important;
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
  }

  body.discover-page .discover-lower-marketplace--sheet {
    margin-top: 0.55rem;
    padding: 0.58rem 0.54rem;
    border-radius: 0.75rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__body,
  body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__body {
    font-size: 0.6875rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-confidence__row {
    padding: 0.46rem 0.5rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta {
    align-items: stretch;
    flex-direction: column;
    gap: 0.58rem;
  }

  body.discover-page .discover-lower-marketplace--sheet .discover-lower-host-cta__actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  body.discover-page .discover-lower-marketplace--sheet a.discover-lower-host-cta__primary.btn-brand {
    min-height: 2.125rem;
  }
}

@media (min-width: 568px) and (max-width: 1100px) {
  /* Header inline padding: bottomsheet.css --bottom-sheet-header-padding-inline */

  body.discover-page #listings-scroll-shell {
    padding-inline: 1.1rem !important;
  }

  body.discover-page .sheet-listings-header-layout {
    gap: 0.85rem !important;
  }
}

@media (max-width: 640px) {
  /* Header shell padding + drag handle: bottomsheet.css. Inner layout gaps only. */
  body.discover-page .sheet-listings-header-layout,
  body.discover-page .sheet-listings-header-filter-stack {
    gap: 0.4rem !important;
  }

  body.discover-page .sheet-listings-header-top {
    align-items: center !important;
    gap: 0.45rem !important;
  }

  body.discover-page .sheet-listings-count {
    font-size: 0.8125rem !important;
    line-height: 1.15rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.discover-page .listings-header-actions--sheet {
    gap: 0.32rem !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  body.discover-page #amenities-popup-trigger-sheet,
  body.discover-page #discover-refine-trigger-sheet,
  body.discover-page #discover-map-mode-header-btn:not([hidden]) {
    min-height: var(--discover-listings-header-control-min-height, 1.95rem) !important;
    height: auto !important;
    max-height: none !important;
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.5rem) !important;
    gap: var(--discover-listings-header-control-gap, 0.28rem) !important;
    border-radius: var(--discover-listings-header-control-radius, 8px) !important;
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body.discover-page #amenities-popup-trigger-sheet svg,
  body.discover-page #discover-refine-trigger-sheet svg,
  body.discover-page #discover-map-mode-header-btn:not([hidden]) .discover-map-mode-header-btn__icon {
    width: var(--discover-listings-header-control-icon, 0.6875rem) !important;
    height: var(--discover-listings-header-control-icon, 0.6875rem) !important;
  }

  body.discover-page #sort-label-sheet {
    display: inline-flex !important;
    align-items: center !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;
  }

  body.discover-page #listings-scroll-shell:not(.listings-scroll-active) {
    padding-top: 0.35rem !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.discover-page #listings-scroll-shell.listings-scroll-active {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: max(1.25rem, var(--discover-sheet-bottom-gap, 0.5rem)) !important;
  }

  body.discover-page #listings-content-sheet .text-center.text-neutral-500,
  body.discover-page #listings-content-sheet > .text-center {
    margin-top: 0 !important;
    margin-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
    padding: 1.05rem 0.8rem max(1.35rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem)) !important;
    transform: translateY(-0.65rem) !important;
  }

  body.discover-page #listings-content-sheet .text-center svg {
    margin-bottom: 0.45rem !important;
  }

  body.discover-page #listings-content-sheet .text-center svg.w-12.h-12,
  body.discover-page #listings-content-sheet .text-center svg.w-8.h-8 {
    width: 2rem !important;
    height: 2rem !important;
  }

  body.discover-page #listings-content-sheet .text-center p {
    margin-top: 0.35rem !important;
  }

  body.discover-page #listings-content-sheet .text-center p:first-of-type {
    margin-top: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.15rem !important;
  }

  body.discover-page #listings-content-sheet .text-center p + p {
    max-width: 17.5rem !important;
    font-size: 0.76rem !important;
    line-height: 1.08rem !important;
  }
}

@media (max-width: 520px) {
  #discover-menu {
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    position: fixed !important;
    width: auto !important;
    min-width: min(10.5rem, calc(100vw - 1rem)) !important;
    max-width: min(18rem, calc(100vw - 1rem)) !important;
  }

  /* UNIVERSAL CONTENT FITTING - ALL SIZES */
  #unified-autocomplete {
    /* Ensure content never overflows horizontally */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  #unified-autocomplete .pac-item,
  #unified-autocomplete .autocomplete-suggestions > *,
  #unified-autocomplete .pac-item-query {
    /* Ensure all text content fits within container */
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    /* Allow multi-line display for long addresses */
    white-space: normal !important;
    line-height: 1.4 !important;
  }

  /* Long address handling - allow wrapping on larger screens */


  /* Drag handle vertical position is intentionally centralized in bottomsheet.css. */

#cake-menu,
    .cake-menu-trigger + .dropdown-menu,
    button.cake-menu-trigger + .dropdown-menu {
      min-width: 180px !important; /* Reduced from 220px for small phones */
      right: 0.25rem !important;
      max-width: calc(100vw - 0.5rem) !important;
      height: auto !important;
      max-height: 200px !important; /* Fixed reasonable height instead of viewport-based */
      min-height: auto !important; /* Allow natural height */
    }
}