/* ==========================================================================
   Individual Listing Pages
   ========================================================================== */

/* ─ Hide the category “pill” on ILPs ───────────────────────────────────── */
.single-hp_listing .hp-listing__categories {
  display: none !important;
}

/* ─ Hide “Date added” on ILPs ───────────────────────────────────────── */
.single-hp_listing .hp-listing__created-date {
  display: none !important;
}
/* ─ Hide the “Details” menu item on ILPs ──────────────────────────────── */
.single-hp_listing li.hp-menu__item--listing-view {
  display: none !important;
}
/* ─ Hide the “Vendor” block (hp-vendor–view-block) on ILPs ───────────────── */
.single-hp_listing .hp-vendor.hp-vendor--view-block {
  display: none !important;
}
/* ─ Hide location block and extra space below title (hp-vendor–view-block) on ILPs ───────────────── */
body.single-hp_listing .hp-listing--view-page .hp-listing__details--primary .hp-listing__location {
  display: none !important;
	
}
body.single-hp_listing .hp-listing--view-page .hp-listing__details--primary {
  display: none !important;
}


/*
Adjust Title Spacing
──────────────────────────── */
body.single-hp_listing .hp-listing--view-page h1.hp-listing__title {
  margin-bottom: 0.25rem !important;
}

/* ─ Collapse the extra top‑spacing on ILPs ──────────────────────────── */
/* Target both the WP body class and HivePress template class */
.single-hp_listing .site-content,
.hp-template--listing-view-page .site-content,
.single-hp_listing .hp-container,
.hp-template--listing-view-page .hp-container {
  padding-top: 1.5rem !important;
  margin-top: 0 !important;
}

/*
==========================================================================
  DEFINITIVE SOLUTION (CSS): Tuned 60/40 Contained Float Layout
==========================================================================
*/
@media (min-width: 1024px) {
  /* 1. This clearfix is ESSENTIAL. It contains the two floated columns
     and prevents other content from wrapping into them. */
  #gallery-map-container::after {
    content: "";
    display: table;
    clear: both;
  }

  /* 2. Float the gallery to the left (now at 60% width) */
  #gallery-map-container .hp-listing__images {
    float: left;
    width: 60%; /* CHANGED from 70% */
    padding-right: 1.5rem; /* INCREASED from 2rem for more space */
    box-sizing: border-box;
  }

  /* 3. Float our custom map wrapper to the right (now at 40% width) */
  #gallery-map-container #map-wrapper-live {
    float: right;
    width: 40%;
  }


  body.single-hp_listing .hp-page__content {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================
   ILP: gallery/map → cards spacing
   ================================ */

/* Tight, consistent spacing between gallery/map and the cards (no negatives) */
.single-hp_listing #gallery-map-container { margin-bottom: 16px !important; }
@media (min-width:768px){  .single-hp_listing #gallery-map-container { margin-bottom: 18px !important; } }
@media (min-width:1024px){ .single-hp_listing #gallery-map-container { margin-bottom: 20px !important; } }

/* Inside the container: keep the gallery row compact */
.single-hp_listing #gallery-map-container .hp-listing__images         { margin-bottom: 14px !important; }
.single-hp_listing #gallery-map-container .hp-listing__images-slider  { margin-bottom: 10px !important; }
.single-hp_listing #gallery-map-container .hp-listing__images-carousel{ margin-bottom: 0 !important; }
.single-hp_listing #gallery-map-container #map-wrapper-live .hp-listing__map {
  margin-top: 12px !important;   /* when stacked on tablet/mobile */
  margin-bottom: 0 !important;
}

/* Align the map flush with the gallery (kill the stray top margin) */
.single-hp_listing #gallery-map-container #map-wrapper-live .hp-listing__map {
  margin-top: 0 !important;
}


/* Remove extra bottom margin under gallery images */
.single-hp_listing #gallery-map-container .hp-listing__images {
  margin-bottom: 0 !important;
}


/* ILP: remove the empty sidebar on single listing pages (all breakpoints) */
.single-hp_listing .hp-page__sidebar{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* ILP: remove the 4rem gap above the footer on single listing pages */
body.single-hp_listing .hp-page__footer{
  margin-top: 16px !important; /* or 0 if you want it tight */
}


/* ILP pricing mini-sections */
.single-hp_listing .ilp-pricing .p-section{background:rgba(0,0,0,.02);border-radius:10px;padding:12px 14px;margin:10px 0}
.single-hp_listing .ilp-pricing .p-heading{font-weight:600;margin:0 0 6px}
.single-hp_listing .ilp-pricing .p-items{display:grid;row-gap:6px}
@media (min-width:1024px){
  .single-hp_listing .ilp-pricing .p-section[data-type="monthly"] .p-items,
  .single-hp_listing .ilp-pricing .p-section[data-type="enrollment"] .p-items{
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px
  }
}
.single-hp_listing .ilp-pricing .p-item .hp-listing__attribute{display:block;line-height:1.35}
.single-hp_listing .ilp-pricing .p-item.is-price .hp-listing__attribute{text-align:right;font-variant-numeric:tabular-nums}
.single-hp_listing .ilp-pricing .ilp-card__body + button{margin-top:30px !important}



/* ===========================================================
   ILP: Rounded corners (replaces JS Feature 31)
   =========================================================== */

/* Main gallery viewport (the slick view window) */
.single-hp_listing .hp-listing__images .slick-list {
  border-radius: 14px;
  overflow: hidden; /* ensure images respect rounding in all browsers */
}

/* Gallery thumbnails inside the thumbnail carousel */
.single-hp_listing .hp-listing__images-carousel .slick-slide img {
  border-radius: 10px;
}

/* Map container */
.single-hp_listing .hp-listing__map {
  border-radius: 14px;
  overflow: hidden;
}

/* If the map library paints inside a direct child div, keep it clipped, too */
.single-hp_listing .hp-listing__map > div {
  border-radius: 14px;
  overflow: hidden;
}

/* ===========================================================
   ILP: Related Listings (replaces JS inline styles in Feature 30)
   =========================================================== */

/* Desktop (>=1024px): inline grid with gap */
@media (min-width:1024px) {
  .single-hp_listing .ilp-related {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .single-hp_listing .ilp-related-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
  }
}

/* Mobile/Tablet (<1024px): horizontal scroll carousel */
@media (max-width:1023px) {
  .single-hp_listing .ilp-related {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.75rem !important;
    padding: 4px 1rem 1rem 1rem !important;
  }
  .single-hp_listing .ilp-related-row {
    display: contents !important;
  }
}

/* Card items */
.single-hp_listing .ilp-related .hp-grid__item {
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start !important;
}

/* Width logic by breakpoint */
@media (min-width:1024px) {
  .single-hp_listing .ilp-related .hp-grid__item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}
@media (min-width:768px) and (max-width:1023px) {
  .single-hp_listing .ilp-related .hp-grid__item {
    flex: 0 0 calc(33.333% - 0.5rem) !important;
  }
}
@media (max-width:767px) {
  .single-hp_listing .ilp-related .hp-grid__item {
    flex: 0 0 calc(50% - 0.375rem) !important;
  }
}

/* Image sizing */
.single-hp_listing .ilp-related .hp-listing__image {
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
  border-radius: 0.75rem;
}

/* Content area */
.single-hp_listing .ilp-related-content {
  padding: 0.5rem 0.35rem !important;
  margin-top: 0 !important;
}

/* 2-line clamp title */
.single-hp_listing .ilp-related-title {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;      /* allow wrapping to multiple lines */
  text-overflow: ellipsis !important;
}

/* Desktop only: make related titles a single line with ellipsis */
@media (min-width: 1024px) {
  .single-hp_listing .ilp-related-title {
    display: block !important;           /* overrides -webkit-box */
    white-space: nowrap !important;      /* single line */
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* neutralize any previous multi-line clamp settings */
    -webkit-line-clamp: initial !important;
    -webkit-box-orient: initial !important;
  }
}

@media (min-width: 1024px) {
  .single-hp_listing .ilp-related .hp-listing__title { margin-bottom: 0.2rem !important; }
}


/* ===========================================================
   ILP Info Cards — presentation moved from JS
   =========================================================== */

/* Grid container */
.single-hp_listing .ilp-info-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: stacked */
  gap: 1.25rem;
  margin-top: 8px; /* keeps earlier spacing */
}

/* Desktop: 60/40 columns; amenities full width */
@media (min-width:1024px) {
  .single-hp_listing .ilp-info-grid {
    grid-template-columns: 3.2fr 2fr;
  }
  .single-hp_listing .ilp-card--full {
    grid-column: 1 / -1;
  }
}


/* Card chrome */
.single-hp_listing .ilp-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 16px 18px;
}
.single-hp_listing .ilp-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
}
.single-hp_listing .ilp-card__body {
  position: relative; /* needed for fade overlay */
}

/* Amenities grid */
.single-hp_listing .ilp-amenities .ilp-card__body {
  display: grid;
  gap: .75rem 1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width:1024px) {
  .single-hp_listing .ilp-amenities .ilp-card__body {
    grid-template-columns: repeat(5, minmax(0,1fr));
  }
}


/* ===========================================================
   ILP: Price line styles (replaces Feature 12 inline styles)
   =========================================================== */
.ilp-price-line {
  font-size: .9rem;
  font-weight: 500;
  color: #555555;
  margin-top: 0.25rem;
  line-height: 1.2;
  padding: 0;
  border: none;
  font-style: normal;
}

.ilp-price-line.ilp-price-na {
  font-style: italic;
  color: #888;
}

.ilp-price-line .hp-listing__attribute {
  display: block;
  line-height: 1.35;
}

.listing-meta-row + .ilp-price-line {
  display: block;
}


/* ============================================================
   ILP · Mobile card order (after gallery)
   Target: 1) General → 2) Pricing → 3) Insights → 4) About → 5) Amenities
   Skips missing cards without leaving gaps.
   ============================================================ */
@media (max-width:1023px){
  /* name areas for each card */
  .single-hp_listing .ilp-general   { grid-area: general; }
  .single-hp_listing .ilp-pricing   { grid-area: pricing; }
  .single-hp_listing .ilp-insights  { grid-area: insights; }
  .single-hp_listing .ilp-about     { grid-area: about; }
  .single-hp_listing .ilp-amenities { grid-area: amenities; }

  /* base grid */
  .single-hp_listing .ilp-info-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ilp-card-gap, 1.25rem);
  }

  /* both Insights and About present */
  .single-hp_listing .ilp-info-grid:has(.ilp-insights):has(.ilp-about){
    grid-template-areas:
      "general"
      "pricing"
      "insights"
      "about"
      "amenities";
  }

  /* Insights only */
  .single-hp_listing .ilp-info-grid:has(.ilp-insights):not(:has(.ilp-about)){
    grid-template-areas:
      "general"
      "pricing"
      "insights"
      "amenities";
  }

  /* About only */
  .single-hp_listing .ilp-info-grid:has(.ilp-about):not(:has(.ilp-insights)){
    grid-template-areas:
      "general"
      "pricing"
      "about"
      "amenities";
  }

  /* neither Insights nor About */
  .single-hp_listing .ilp-info-grid:not(:has(.ilp-insights)):not(:has(.ilp-about)){
    grid-template-areas:
      "general"
      "pricing"
      "amenities";
  }
}


/* When the map stacks under the gallery, add a small buffer */
@media (max-width: 1023px) {
  .single-hp_listing .hp-listing__images { margin-bottom: 12px !important; }
  .single-hp_listing .hp-listing__images-carousel { margin-bottom: 12px !important; }
  .single-hp_listing .hp-listing__map { margin-top: 12px !important; }
}

/* Make disciplines items look like the amenity labels (no icon) */
.single-hp_listing .ilp-disciplines .hp-listing__attribute {
  font-weight: 600;
  color: #555;
}

/* ILP: pricing layout vars (single source of truth) */
.single-hp_listing .ilp-pricing {
  --ilp-row-gap: 12px;  /* mobile/tablet rows */
  --ilp-col-gap: 20px;  /* mobile/tablet columns */
}

@media (min-width:1024px){
  .single-hp_listing .ilp-pricing {
    --ilp-row-gap: 12px; /* keep if you like */
    --ilp-col-gap: 40px; /* desktop column gap — adjust here */
  }
}


/* ILP Pricing: two-column layout driven by attribute order */
.single-hp_listing .ilp-pricing .ilp-pricing-columns {
  display: grid;
  grid-template-columns: 1fr;        /* mobile: single column */
  gap: var(--ilp-row-gap) var(--ilp-col-gap);
  margin-bottom: 8px;
}

.single-hp_listing .ilp-pricing .ilp-pricing-col {
  display: grid;
  row-gap: 8px;                      /* vertical spacing between rows */
}

/* Desktop ≥1024px: two columns */
@media (min-width:1024px){
  .single-hp_listing .ilp-pricing .ilp-pricing-columns {
    grid-template-columns: 1fr 1fr;
  }
}


/* Optional: keep any non-11–17 rows below with a small gap */
.single-hp_listing .ilp-pricing .ilp-pricing-rest {
  display: grid;
  row-gap: 30px;
  margin-top: 8px;
}


/* Each pricing row */
.ilp-pricing-col .hp-listing-attribute,
.ilp-pricing-col .hp-listing__attribute {
  margin-bottom: 16px;   /* spacing between separate rows */
  line-height: 1.3;      /* tighter for wrapped lines */
}

/* Kill margin after the last row */
.ilp-pricing-col .hp-listing-attribute:last-child,
.ilp-pricing-col .hp-listing__attribute:last-child {
  margin-bottom: 0;
}


/* Optionally, a bit more space before headers inside pricing */
.ilp-pricing-col .hp-listing-attribute-label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px; /* space between header and its value */
}


.ilp-pricing-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px; /* row-gap 0px, col-gap 40px (adjust #2 here) */
  align-items: start; /* stop stretching */
}


/* === ILP: Pricing collapse to General height + Show more === */
.single-hp_listing .ilp-pricing {
  --ilp-pricing-max: 0px; /* set by JS to General card height */
  position: relative;
}

/* Collapse state */
.single-hp_listing .ilp-pricing.is-collapsed .ilp-card__body {
  max-height: var(--ilp-pricing-max);
  overflow: clip;
  transition: max-height .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .single-hp_listing .ilp-pricing.is-collapsed .ilp-card__body { transition: none; }
}

/* Soft fade at bottom when collapsed */
.single-hp_listing .ilp-pricing.is-collapsed .ilp-card__body::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* Show more button */
.single-hp_listing .ilp-show-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .75rem;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  user-select: none;
}

.single-hp_listing .ilp-show-more:focus { outline: 2px solid #d0d0d0; outline-offset: 2px; }
.single-hp_listing .ilp-show-more[hidden] { display: none !important; }

/* Optional: center the button under the card content */
.single-hp_listing .ilp-pricing .ilp-show-more { display: inline-flex; }

/* === ILP: Show more button polish === */

/* Remove the default grey outline/border when clicked */
.single-hp_listing .ilp-show-more {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #e6e6e6; /* keep subtle border */
}

/* Show more button text color consistency */
.single-hp_listing .ilp-show-more {
  color: #333 !important;  /* or pick your brand color */
}


/* Add extra space between last pricing line and button when expanded */
.single-hp_listing .ilp-pricing:not(.is-collapsed) .ilp-show-more {
  margin-top: 25px; /* increased gap below pricing */
}


/* === ILP General Info: action row (Visit / Book / Call / Directions) === */
.single-hp_listing .ilp-general {
  --gi-btn-bg: #fff;
  --gi-btn-fg: #4690ab;        /* text */
  --gi-btn-bd: #4690ab;        /* border */
  --gi-btn-bg-hover: #f5f7f7;  /* hover background */
}


.single-hp_listing .ilp-general .ilp-gi-actions a {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1rem;
  border: 2px solid var(--gi-btn-bd);
  border-radius: 9999px;              /* pill */
  background: var(--gi-btn-bg);
  color: var(--gi-btn-fg) !important;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}

.single-hp_listing .ilp-general .ilp-gi-actions a:hover {
  background: var(--gi-btn-bg-hover);
}

.single-hp_listing .ilp-general .ilp-gi-actions a.is-disabled {
  opacity: .45; pointer-events: none;
}

/* Small screens: stack if needed */
@media (max-width: 520px) {
  .single-hp_listing .ilp-general .ilp-gi-actions a { flex: 1 1 46%; justify-content: center; }
}

/* === ILP Mobile overflow fix for action pills + any long content === */


/* 1) Belt-and-suspenders: any long values (e.g., in Additional Notes) must wrap */
.single-hp_listing .ilp-card__body,
.single-hp_listing .ilp-card__body * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* 2) Guard common containers from creating horizontal overflow */
.single-hp_listing .ilp-info-grid,
.single-hp_listing .ilp-card,
.single-hp_listing .ilp-pricing-columns {
  max-width: 100%;
  overflow-x: hidden;
}


/* === ILP: Pill icons alignment === */
.single-hp_listing .ilp-general .ilp-gi-actions a { display: inline-flex; align-items: center; gap: 8px; }
.single-hp_listing .ilp-general .ilp-gi-actions .ilp-gi-icon { line-height: 1; font-size: 1.05rem; }
.single-hp_listing .ilp-general .ilp-gi-actions .ilp-gi-icon-proxy { display: inline-flex; align-items: center; }

/* Hide duplicate Website and Book Online rows inside General Info */
.single-hp_listing .ilp-general .hp-listing__attribute--website,
.single-hp_listing .ilp-general .hp-listing__attribute--book-online,
.single-hp_listing .ilp-general .hp-listing__attribute--book_online {
  display: none !important;
}

/* === ILP General Info: pill layout rules (3-wide vs 2x2) === */
.single-hp_listing .ilp-general .ilp-gi-actions {
  display: grid !important;                 /* ensure we use grid, not flex */
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* default */
  margin-bottom: 14px;
}

/* 4 pills → narrower 2x2 grid */
.single-hp_listing .ilp-general .ilp-gi-actions.ilp-gi--four {
  grid-template-columns: repeat(2, minmax(140px, 180px)); 
  justify-content: left;   /* center the grid so they don’t spread edge to edge */
}



/* 3 pills → 3 equal columns in one row */
.single-hp_listing .ilp-general .ilp-gi-actions.ilp-gi--three {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Make each pill fill its grid cell neatly */
.single-hp_listing .ilp-general .ilp-gi-actions a {
  width: 100%;
  justify-content: center;
}

/* On narrow screens, keep pills readable: 2 per row */
@media (max-width: 520px) {
  .single-hp_listing .ilp-general .ilp-gi-actions.ilp-gi--four,
  .single-hp_listing .ilp-general .ilp-gi-actions.ilp-gi--three {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* ILP General Info → make Address look like plain text (not a link) */
.single-hp_listing .ilp-general .hp-listing__attribute--address a,
.single-hp_listing .ilp-general .hp-listing__attribute--address a:link,
.single-hp_listing .ilp-general .hp-listing__attribute--address a:visited,
.single-hp_listing .ilp-general .hp-listing__attribute--address a:hover,
.single-hp_listing .ilp-general .hp-listing__attribute--address a:active,
.single-hp_listing .ilp-general .hp-listing__attribute--address .hp-link {
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;   /* make it non-clickable */
  cursor: default;
}

/* ILP General Info → show phone as regular text in the details list on mobile */
@media (max-width: 768px) {
  /* Only affect the "General Info" row, not the pills */
  .single-hp_listing .ilp-general .hp-listing__attribute--phone:not(.ilp-gi-icon-proxy) a,
  .single-hp_listing .ilp-general .hp-listing__attribute--tel:not(.ilp-gi-icon-proxy) a {
    color: inherit !important;                 /* remove blue */
    text-decoration: none !important;          /* no underline */
    -webkit-text-fill-color: currentColor !important; /* iOS Safari */
    pointer-events: none;                      /* non-clickable */
    cursor: default;
  }
}

/* Mobile: control Gallery → Map spacing inside our wrapper (no outer gaps) */
@media (max-width:1023px){
  .single-hp_listing #ilp-mobile-media{ display:block; margin:0 !important; padding:0 !important; }
  .single-hp_listing #ilp-mobile-media > .hp-listing__images{ margin:0 0 30px 0 !important; padding:0 !important; }
  .single-hp_listing #ilp-mobile-media > .hp-listing__map{    margin:0 !important; padding:0 !important; }

  /* keep the optional empty attributes block from adding any space */
  .single-hp_listing #ilp-mobile-media > .hp-listing__attributes--secondary{
    display:none !important; margin:0 !important; padding:0 !important; min-height:0 !important;
  }
}

/* Mobile: tighten spacing between last card and "Explore Similar" */
@media (max-width:1023px){
  .single-hp_listing #ilp-mobile-media .ilp-related-heading{
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
  .single-hp_listing #ilp-mobile-media .ilp-related{
    margin-top: 0 !important;
  }
}

/* ILP mobile: collapse the sidebar block below content (source of the 180–200px gap) */
@media (max-width:1023px){
  .single-hp_listing .hp-page__sidebar{
    display: none !important;
  }

  /* trim residual shell padding so footer sits snug */
  .single-hp_listing .site-content{
    padding-bottom: 8px !important; /* adjust to taste */
  }
}

/* ILP: make vertical spacing = horizontal spacing */
.single-hp_listing .ilp-info-grid{
  --ilp-card-gap: 1.25rem;     /* column/row gap */
  gap: var(--ilp-card-gap);
}

/* Stack spacing inside each column */
.single-hp_listing .ilp-info-grid > .ilp-col{
  display: grid;
  gap: var(--ilp-card-gap);
  align-content: start;
}

/* Safety: ensure no leftover margins fight the grid gap */
.single-hp_listing .ilp-info-grid > .ilp-col > .ilp-card{ margin: 0; }

/* ILP — Title intro beside H1 (desktop) / stacked (mobile) */
.single-hp_listing h1.hp-listing__title{
  display:grid;
  grid-template-columns:max-content minmax(320px,1fr); /* title | intro */
  column-gap:1.5rem;
  align-items:start; /* align tops */
}

.single-hp_listing .ilp-title-intro{
  padding-left:1.5rem;                 /* gutter to the divider */
  border-left:1px solid #e6e6e6;     /* subtle divider */
  max-width:55ch;
  font-size:1rem;
  line-height:1.35;
  font-weight:200;                   /* lighter */
  letter-spacing:.01em;
  color:#555;
  position:relative; top:0.5rem;
  white-space:normal;
}

.single-hp_listing .ilp-title-intro:empty{display:none!important;}

@media (max-width:1023px){
  .single-hp_listing h1.hp-listing__title{display:block;}
  .single-hp_listing .ilp-title-intro{
    top: 0;
    border: 0;
    padding: 0;
    display: block;
    margin-top: .25rem;
    max-width: 65ch; /* ASCII-only */
  }
}


/* Use body font for the intro so it contrasts with the H1 */
.single-hp_listing h1.hp-listing__title .ilp-title-intro{
  font-family: var(--hp-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
  font-weight: 400 !important; /* lighter than the H1’s 700 */
}

/* ILP intro: italic style */
.single-hp_listing h1.hp-listing__title .ilp-title-intro,
.single-hp_listing h1.hp-listing__title .ilp-title-intro *{
  font-style: italic !important;
}

/* Sticky sidebar safety floor (prevents CLS from HivePress affix) */
@media (min-width: 1024px) {
  :root { --affix-min: 100px; } /* baseline; JS may raise this */

  .single-hp_listing aside.hp-page__sidebar > div.is-affixed,
  .single-hp_listing aside.hp-page__sidebar > div.is-affixed > .inner-wrapper--sticky {
    min-height: var(--affix-min) !important; /* resist inline height:0 */
    transition: none !important;             /* avoid animated collapses */
  }
}

@media (max-width: 768px) {
  /* Match homepage content spacing for related cards on single pages */
  .single-hp_listing .ilp-related .hp-listing__content {
    padding: 0.5rem 0.35rem;
  }

  /* Reduce title-bottom spacing like home cards */
  .single-hp_listing .ilp-related .hp-listing__title {
    margin-bottom: 0.25rem;
    line-height: 1.25;
  }

  /* Nudge meta row up slightly, same as home */
  .single-hp_listing .ilp-related .listing-meta-row {
    margin-top: -0.25rem;
  }
}

/* ILP: prevent bottom card shadow from being clipped when Amenities is removed */
.single-hp_listing .ilp-info-grid,
.single-hp_listing .ilp-info-grid > .ilp-col {
  overflow-x: hidden;      /* keep horizontal safety */
  overflow-y: visible !important; /* let shadows/rendered effects extend */
  padding-bottom: 12px;    /* tiny buffer so the shadow isn't flush with the container edge */
}

/* If any ancestor is constraining overflow, relax it on the main content column */
.single-hp_listing .hp-page__content {
  overflow: visible !important;
}

/* === ILP Cards: unified spotlight styling === */
.single-hp_listing .ilp-card {
  position: relative;
  box-shadow:
    0 6px 10px rgba(70, 144, 171, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* Keep General Info title hidden */
.single-hp_listing .ilp-general .ilp-card__title {
  display: none !important;
}

/* === ILP General Info: soft shadow around each CTA button === */
.single-hp_listing .ilp-general .ilp-gi-actions a {
  box-shadow: 0 4px 9px rgba(70, 144, 171, 0.22);
  border-radius: 9999px; /* keep them pill-shaped */
  background: #fff;      /* ensure shadow shows cleanly */
}

/* === ILP General Info: extra spacing below CTA buttons === */
.single-hp_listing .ilp-general .ilp-gi-actions {
  margin-bottom: 26px; /* adjust to taste (16–22px works well) */
}

/* === ILP Mobile: tighten space between gallery and General Info card === */
@media (max-width: 767px) {
  .single-hp_listing .ilp-general {
    margin-top: -12px !important; /* pull it closer to gallery */
  }
}

/* Default label stays normal size */
.single-hp_listing .ilp-general .ilp-gi-actions .ilp-gi-label {
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Only shrink labels that overflow */
.single-hp_listing .ilp-general .ilp-gi-actions .ilp-gi-label.needs-shrink {
  font-size: clamp(15px, 2.5vw, 15px);
}

/* ==========================================================
   ILP · Community Insights — Star Meter (fresh, fixed fill)
   - Works with your existing JS that adds .full / .partial
   - Accurate fractional fill via masked gradient (no shrink)
   ========================================================== */

.single-hp_listing .ilp-insights .ilp-insights-meter{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.5rem;               /* space above the italic line */
}

.single-hp_listing .ilp-insights .ilp-insights-stars{
  /* Tweak these as you like */
  --insights-star-size: 20px;
  --insights-star-gap: .22em;
  --insights-star-blue: #67AFC1;     /* teal fill */
  --insights-star-grey: #cfd5dc;     /* base grey */

  /* Inline rounded star path used as a mask (24x24 viewBox) */
  --insights-star-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 2.4c.25 0 .49.13.62.36l2.48 4.73c.09.18.27.3.47.33l5.24.76c.54.08.75.76.36 1.14l-3.79 3.69c-.15.14-.22.35-.19.56l.9 5.21c.09.53-.47.93-.95.68L12.6 17.9a.72.72 0 0 0-.65 0L6.86 19.9c-.48.25-1.04-.15-.95-.68l.9-5.21c.03-.2-.03-.42-.19-.56L2.83 9.72a.83.83 0 0 1 .36-1.14l5.24-.76c.2-.03.38-.15.47-.33l2.48-4.73A.7.7 0 0 1 12 2.4z"/>\
</svg>');

  display:inline-flex;
  align-items:center;
  gap:var(--insights-star-gap);
  font-size:var(--insights-star-size);
  line-height:1;
}

/* One star “cell” */
.single-hp_listing .ilp-insights .ilp-insights-stars .star{
  position:relative;
  display:inline-block;
  width:1em;               /* fixed star box; mask scales to this */
  height:1em;
  line-height:1;
}

/* Grey base star (full shape) */
.single-hp_listing .ilp-insights .ilp-insights-stars .star::before{
  content:"";
  display:block;
  width:100%; height:100%;
  background-color: var(--insights-star-grey);
  -webkit-mask-image: var(--insights-star-mask);
          mask-image: var(--insights-star-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Teal overlay: full-size box masked to the star.
   We DO NOT change the element width; instead we paint a gradient
   that is teal up to var(--p) and transparent after. */
.single-hp_listing .ilp-insights .ilp-insights-stars .star::after{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  width:100%; height:100%;

  /* Mask to the exact rounded star shape */
  -webkit-mask-image: var(--insights-star-mask);
          mask-image: var(--insights-star-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;

  /* Default: no fill (partials will set --p; full stars override below) */
  background: linear-gradient(
    to right,
    var(--insights-star-blue) 0%,
    var(--insights-star-blue) var(--p,0%),
    transparent var(--p,0%),
    transparent 100%
  );
}

/* Full star: solid teal (no gradient edge) */
.single-hp_listing .ilp-insights .ilp-insights-stars .star.full::after{
  background: var(--insights-star-blue);
}

/* Fractional star: JS sets --p to e.g. "30%" on .partial */
.single-hp_listing .ilp-insights .ilp-insights-stars .star.partial::after{
  /* background already defined above; this rule exists for clarity */
}

/* Score and “based on …” line (unchanged) */
.single-hp_listing .ilp-insights .ilp-insights-score{
  font-weight:700;
  font-variant-numeric: tabular-nums;
  color:#2c2f33;
}
.single-hp_listing .ilp-insights .ilp-insights-based{
  display:block;
  font-style:italic;
  color:#60656b;
}

/* === ILP General Info: hide icons for Address, Phone, Hours === */
.single-hp_listing .ilp-general 
  .hp-listing__attribute--address .hp-icon,
.single-hp_listing .ilp-general 
  .hp-listing__attribute--phone .hp-icon,
.single-hp_listing .ilp-general 
  .hp-listing__attribute--tel .hp-icon,
.single-hp_listing .ilp-general 
  .hp-listing__attribute--hours .hp-icon {
  display: none !important;
}

/* ILP Pricing: make the price-tag icon match the title color exactly */
.single-hp_listing .ilp-pricing .ilp-card__title{
  display:inline-flex;
  align-items:center;
}

/* Fallback (older browsers): show the PNG as-is */
.single-hp_listing .ilp-pricing .ilp-card__title::before{
  content:"";
  display:inline-block;
  width:1.15em;
  height:1.15em;
  margin-right:.35em;
  background-image:url('/wp-content/uploads/2025/09/price-tag-5.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.95; /* soften pure black a touch if mask unsupported */
}

/* Modern browsers: use the PNG as a mask and fill with current text color */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .single-hp_listing .ilp-pricing .ilp-card__title::before{
    background-image:none;
    background-color: currentColor;                 /* ← matches "Pricing" */
    -webkit-mask-image: url('/wp-content/uploads/2025/09/price-tag-5.png');
            mask-image: url('/wp-content/uploads/2025/09/price-tag-5.png');
    -webkit-mask-repeat:no-repeat;                  mask-repeat:no-repeat;
    -webkit-mask-size:contain;                      mask-size:contain;
    -webkit-mask-position:center;                   mask-position:center;
    opacity:1;
  }
}

/* ILP Insights: title icon (tinted to match the text color) */
.single-hp_listing .ilp-insights .ilp-card__title{
  display:inline-flex;
  align-items:center;
}

/* Fallback: show PNG as-is if masking isn't supported */
.single-hp_listing .ilp-insights .ilp-card__title::before{
  content:"";
  display:inline-block;
  width:1.15em;              /* keep same size as Pricing icon */
  height:1.15em;
  margin-right:.35em;
  background-image:url('/wp-content/uploads/2025/09/multiple-users-silhouette.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.95;
}

/* Modern browsers: use PNG as a mask and fill with current text color */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .single-hp_listing .ilp-insights .ilp-card__title::before{
    background-image:none;
    background-color: currentColor; /* exactly matches "Community Insights" text color */
    -webkit-mask-image: url('/wp-content/uploads/2025/09/multiple-users-silhouette.png');
            mask-image: url('/wp-content/uploads/2025/09/multiple-users-silhouette.png');
    -webkit-mask-repeat:no-repeat;                  mask-repeat:no-repeat;
    -webkit-mask-size:contain;                      mask-size:contain;
    -webkit-mask-position:center;                   mask-position:center;
    opacity:1;
  }
}



/* === ILP · Google Hours UI === */
.single-hp_listing .ilp-hours-summary { font-weight: 600; color: #2c2f33; }
.single-hp_listing .ilp-hours-open { color: #0a7a2d; font-weight: 700; }
.single-hp_listing .ilp-hours-closed { color: #b91c1c; font-weight: 700; }

.single-hp_listing .ilp-hours-more {
  margin-left: 8px; padding: 0; border: 0; background: none;
  color: #333; font-weight: 700; cursor: pointer;
}
.single-hp_listing .ilp-hours-more:focus { outline: 2px solid #d0d0d0; outline-offset: 2px; }

.single-hp_listing .ilp-hours-grid {
  margin-top: 6px; padding-left: 30px; border-left: 2px solid #eaeaea;
}
.single-hp_listing .ilp-hours-grid .row { display: flex; gap: 12px; line-height: 1.3; }
.single-hp_listing .ilp-hours-grid .day { width: 90px; font-weight: 600; color: #444; }
.single-hp_listing .ilp-hours-attrib { margin-top: 6px; font-size: .85rem; color: #6b7280; }

/* ILP Hours summary — inherit exact typography so it matches Address/Phone rows */
.single-hp_listing .ilp-hours-summary{
  color: inherit !important;        /* same color as surrounding text */
  font: inherit !important;         /* family, size, weight, line-height */
  letter-spacing: inherit !important;
}

/* keep only the status word colorized */
.single-hp_listing .ilp-hours-summary .ilp-hours-open  { color:#2e8b57 !important; font-weight:600; }
.single-hp_listing .ilp-hours-summary .ilp-hours-closed{ color:#d93025 !important; font-weight:600; }

/* neutralize any accidental <b>/<strong> inside the summary */
.single-hp_listing .ilp-hours-summary b,
.single-hp_listing .ilp-hours-summary strong{
  font-weight: inherit !important;
  color: inherit !important;
}

/* == ILP Hours: tidy multi-window layout (no bullets, clean spacing) == */

/* Use a 2-column grid: Day | Times */
.single-hp_listing .ilp-hours-grid .row{
  display: grid !important;
  grid-template-columns: 110px 1fr;
  column-gap: 18px;
  align-items: start;
  line-height: 1.3;
}

/* Day column */
.single-hp_listing .ilp-hours-grid .day{
  width: auto !important;      /* override old fixed width */
  font-weight: 600;
  color: #444;
}

/* Value column */
.single-hp_listing .ilp-hours-grid .val{ line-height: 1.35; }
.single-hp_listing .ilp-hours-grid .val.has-multi{ display: block; }

/* Stack each time range on its own line */
.single-hp_listing .ilp-hours-grid .val .slots{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 4px;                /* adjust vertical spacing */
}
.single-hp_listing .ilp-hours-grid .val .slots .slot{
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Remove bullets if previous block added them */
.single-hp_listing .ilp-hours-grid .val .slots .slot::before{
  content: none !important;
  margin: 0 !important;
}

/* Single-line helpers stay as before */
.single-hp_listing .ilp-hours-grid .val.is-24h{ color:#2c2f33; font-weight:600; }
.single-hp_listing .ilp-hours-grid .val.is-closed{ color:#60656b; font-weight:500; }

/* Narrow phones: shrink day column, allow wrapping of long ranges */
@media (max-width:420px){
  .single-hp_listing .ilp-hours-grid .row{ grid-template-columns: 95px 1fr; }
  .single-hp_listing .ilp-hours-grid .val .slots .slot{ white-space: normal; }
}


/* ============================================================
   ILP · Gallery 15% height scale (tablet + desktop) + Map match
   - Change --ilp-scale to .95 (5%), .85 (15%), etc.
   - Scales main slider height AND the thumbnail strip height
   ============================================================ */

@media (min-width: 768px) {
  .single-hp_listing {
    --ilp-scale: 0.85;           /* ← 0.85 = 15% smaller */
    --ilp-h-desktop: 450px;      /* your current desktop slider baseline */
    --ilp-h-tablet: 400px;       /* tablet baseline (adjust if you like) */
    /* JS will set --ilp-thumbs-base to the theme’s real thumb height */
  }

  /* ----- MAIN SLIDER HEIGHT (scaled) ----- */
  /* Desktop */
  @media (min-width: 1024px) {
    .single-hp_listing .hp-listing__images-slider .slick-list,
    .single-hp_listing .hp-listing__images-slider .slick-slide {
      height: calc(var(--ilp-h-desktop) * var(--ilp-scale)) !important;
    }
  }
  /* Tablet */
  @media (min-width: 768px) and (max-width: 1023px) {
    .single-hp_listing .hp-listing__images-slider .slick-list,
    .single-hp_listing .hp-listing__images-slider .slick-slide {
      height: calc(var(--ilp-h-tablet) * var(--ilp-scale)) !important;
    }
  }

  /* ----- THUMBNAIL STRIP HEIGHT (scaled) ----- */
  /* JS sets --ilp-thumbs-base to the real baseline it detects */
  .single-hp_listing .hp-listing__images-carousel .slick-list,
  .single-hp_listing .hp-listing__images-carousel .slick-slide {
    height: calc(var(--ilp-thumbs-base, 90px) * var(--ilp-scale)) !important;
  }
  .single-hp_listing .hp-listing__images-carousel .slick-slide img {
    height: calc(var(--ilp-thumbs-base, 90px) * var(--ilp-scale)) !important;
    max-height: calc(var(--ilp-thumbs-base, 90px) * var(--ilp-scale)) !important;
    object-fit: cover;
  }

  /* Ensure the map never collapses below the scaled slider height.
     (We’ll set its exact height with JS to equal the *total* gallery height.) */
  @media (min-width: 1024px) {
    .single-hp_listing .hp-listing__map {
      min-height: calc(var(--ilp-h-desktop) * var(--ilp-scale)) !important;
    }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .single-hp_listing .hp-listing__map {
      min-height: calc(var(--ilp-h-tablet) * var(--ilp-scale)) !important;
    }
  }
}

/* ============================================================
   ILP · Width scale (tablet + desktop)
   - Shrink inner width by the same factor as height (default 15%)
   - Keep the center gap unchanged:
       • Gallery content right-aligned in its 60% column
       • Map content left-aligned in its 40% column
   ============================================================ */
@media (min-width: 1024px) {
  .single-hp_listing {
    /* reuse your height scale; fallback to 0.85 if not set */
    --ilp-scale-w: var(--ilp-scale, 0.85);
  }

  /* GALLERY: shrink inner blocks + hug the center (right side of left column) */
  #gallery-map-container .hp-listing__images .hp-listing__images-slider,
  #gallery-map-container .hp-listing__images .hp-listing__images-carousel {
    width: calc(100% * var(--ilp-scale-w)) !important;
    margin-right: 0 !important;   /* touch the center gap */
    margin-left: auto !important; /* add space on the OUTER left side */
    box-sizing: border-box;
  }

  /* MAP: shrink inner map + hug the center (left side of right column) */
  #gallery-map-container #map-wrapper-live .hp-listing__map {
    width: calc(100% * var(--ilp-scale-w)) !important;
    margin-left: 0 !important;    /* touch the center gap */
    margin-right: auto !important;/* add space on the OUTER right side */
    box-sizing: border-box;
  }
}

/* ILP · Nudge the whole gallery+map row left so the combined width is centered
   Assumes your 60/40 split and the same --ilp-scale you already use (0.85 = 15%) */
@media (min-width: 1024px){
  .single-hp_listing { --ilp-scale: 0.85; } /* adjust: 0.90=10%, 0.95=5%, etc. */

  /* Move the pair left by ( (60-40)/2 = 10% ) × (1 - scale) of the row width */
  #gallery-map-container{
    transform: translateX(calc(-1 * (1 - var(--ilp-scale, 0.85)) * 10%));
    will-change: transform;
  }
}

/* About body establishes a new formatting context → no margin collapsing */
.single-hp_listing .ilp-about .ilp-card__body { display: flow-root; }

/* Collapse behavior mirrors Pricing */
.single-hp_listing .ilp-about { --ilp-about-max: 0px; }

.single-hp_listing .ilp-about.is-collapsed .ilp-card__body {
  max-height: var(--ilp-about-max);
  overflow: clip;
  transition: max-height .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .single-hp_listing .ilp-about.is-collapsed .ilp-card__body { transition: none; }
}

/* Optional: same soft fade as pricing when collapsed */
.single-hp_listing .ilp-about.is-collapsed .ilp-card__body::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events:none;
}

/* Tablet stack (768–1023px): when gallery & map stack, keep them full-width & centered */
@media (min-width: 768px) and (max-width: 1023px) {
  #gallery-map-container { transform: none !important; }

  #gallery-map-container .hp-listing__images .hp-listing__images-slider,
  #gallery-map-container .hp-listing__images .hp-listing__images-carousel,
  #gallery-map-container #map-wrapper-live .hp-listing__map {
    width: 100% !important;
    margin: 0 auto !important; /* center when stacked */
  }
}
/* =========================================================
   ILP · when the row stacks (≤1023px)
   - cancel desktop centering/width shrink
   - restore vertical spacing
   ========================================================= */

@media (max-width: 1023px) {
  /* 1) Undo the desktop recenter + width shrink */
  #gallery-map-container { transform: none !important; }

  /* Make inner blocks full width again */
  #gallery-map-container .hp-listing__images .hp-listing__images-slider,
  #gallery-map-container .hp-listing__images .hp-listing__images-carousel,
  #gallery-map-container #map-wrapper-live .hp-listing__map {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) Put the vertical rhythm back */
  /* main slider → thumbnails */
  .single-hp_listing #gallery-map-container .hp-listing__images > .hp-listing__images-slider,
  .single-hp_listing #gallery-map-container .hp-listing__images > .slick-slider:first-of-type {
    margin-bottom: 14px !important;
  }

  /* thumbnails → map */
  .single-hp_listing #gallery-map-container .hp-listing__images-carousel {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
  .single-hp_listing #gallery-map-container .hp-listing__images + #map-wrapper-live .hp-listing__map,
  .single-hp_listing #gallery-map-container .hp-listing__map {
    margin-top: 20px !important;
  }

  /* If an earlier rule zeroed the entire images block, override it here */
  .single-hp_listing #gallery-map-container .hp-listing__images {
    margin-bottom: 0 !important; /* spacing handled by the two rules above */
  }
}

/* ILP — Related Listings: make arrows match homepage */
.single-hp_listing .hp-listings-wrapper{
  position: relative;                /* same as homepage */
  overflow: visible;                  /* lets arrows sit slightly outside */
}

/* ILP scroller spacing: same padding pattern as homepage */
.single-hp_listing .hp-listings-wrapper:not(.no-scroll) .ilp-related,
.single-hp_listing .hp-listings-wrapper.no-scroll .ilp-related{
  padding-left: 1rem;                 /* mirror home */
  padding-right: 1rem;                /* mirror home */
}

/* Arrow buttons: copy the homepage look */
.single-hp_listing .hp-listings-wrapper .arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background: #fff;
  color: #333;
  border: none;
  border-radius: 50%;
  display: none;                      /* JS sets inline display:flex when needed */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 1.9rem;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
  transition: transform .2s ease, background-color .2s ease;
}

.single-hp_listing .hp-listings-wrapper .arrow:hover{
  background-color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.single-hp_listing .hp-listings-wrapper .arrow.left{  left: -1.25rem; }
.single-hp_listing .hp-listings-wrapper .arrow.right{ right: -1.25rem; }

/* Mobile tweak like homepage (raise arrows slightly) */
@media (max-width: 768px){
  .single-hp_listing .hp-listings-wrapper .arrow{
    top: 35%;
    transform: translateY(-50%);
  }
}

/* === ILP: Amenities grid (full-row sibling, equal stretch) === */
.single-hp_listing .ilp-amenities-grid {
  grid-column: 1 / -1;        /* span both columns of .ilp-info-grid */
  display: grid;
  gap: 1rem;
}

/* Mobile: stack cards */
@media (max-width: 1023px) {
  .single-hp_listing .ilp-amenities-grid {
    grid-template-columns: 1fr;
  }
  /* inside each card: two columns of items */
  .single-hp_listing .ilp-amenities-card .ilp-amenities-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .5rem 1rem;
  }
}

/* Desktop: share the full row equally; 2, 3, or 4 cards */
@media (min-width: 1024px) {
  .single-hp_listing .ilp-amenities-grid {
    /* default: auto-fit 2–3 cards fill evenly; min width keeps them wide */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  /* Exactly 4 cards → four equal columns */
  .single-hp_listing .ilp-amenities-grid:has(> .ilp-amenities-card:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Card internals:
     - with ≤3 cards we let items flow to multiple columns
     - with 4 cards we keep items in a single column for each card
  */
  .single-hp_listing .ilp-amenities-card .ilp-amenities-body {
    display: grid;
    gap: .5rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .single-hp_listing .ilp-amenities-grid:has(> .ilp-amenities-card:nth-child(4))
  .ilp-amenities-card .ilp-amenities-body {
    grid-template-columns: 1fr; /* 4 cards → one column of items per card */
  }
}

/* Amenities cards: use the same spotlight shadow as other ILP cards */
.single-hp_listing .ilp-amenities-card{
  background:#fff;
  border-radius:12px;
  box-shadow:
    0 6px 10px rgba(70, 144, 171, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  padding:16px 18px;
}

.single-hp_listing .ilp-amenities-card .ilp-card__title{
  font-size:1.15rem;
  font-weight:600;
  margin:0 0 .5rem;
}

/* ===========================================================
   ILP · Amenities per-card collapse (matches About/Pricing)
   =========================================================== */
.single-hp_listing .ilp-amenities-card { position: relative; }

/* collapsed */
.single-hp_listing .ilp-amenities-card.is-collapsed .ilp-card__body {
  max-height: var(--ilp-amen-max, 200px);
  overflow: clip;
  transition: max-height .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .single-hp_listing .ilp-amenities-card.is-collapsed .ilp-card__body { transition: none; }
}

/* soft bottom fade while collapsed */
.single-hp_listing .ilp-amenities-card.is-collapsed .ilp-card__body::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* keep the button visible & consistent under each card */
.single-hp_listing .ilp-amenities-card > .ilp-amen-btn {
  display: inline-flex;
  margin-top: 12px;        /* a bit of breathing room */
}
.single-hp_listing .ilp-amenities-card.is-collapsed > .ilp-amen-btn[hidden] { display: none !important; }

/* === ILP · Pricing: consistent gap above each section header (16px) === */
.single-hp_listing .ilp-pricing .ilp-pricing-col,
.single-hp_listing .ilp-pricing .ilp-pricing-rest {
  row-gap: 8px; /* keep the normal row rhythm */
  padding-top: 16px; /* ensures the first header gets the same gap */
}

/* Add an extra spacer specifically before header rows */
.single-hp_listing .ilp-pricing .ilp-pricing-col > .ilp-price-section,
.single-hp_listing .ilp-pricing .ilp-pricing-rest > .ilp-price-section {
  margin-top: 16px; /* consistent “section gap” above each header */
}

/* Optional polish: headers look tight to their own items */
.single-hp_listing .ilp-pricing .ilp-price-section .hp-listing-attribute-label {
  display: block;
  margin-bottom: 4px; /* small label-to-first-item spacing */
}

/* Safari desktop: disable only the affix wrappers, and drop the safety floor */
@media (min-width:1024px){
  .ua-safari.single-hp_listing .hp-page__sidebar .is-affixed,
  .ua-safari.single-hp_listing .hp-page__sidebar .inner-wrapper--sticky{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* you had a sticky “safety floor”; remove it on Safari so no gap remains */
  .ua-safari :root { --affix-min: 0px !important; }
}

/* Strip native button inner rendering that can create a sublayer on Safari */
.single-hp_listing .ilp-show-more {
  -webkit-appearance: none;
  appearance: none;
}

/* Make the label non-interactive so clicks always land on the <button> */
.single-hp_listing .ilp-amen-btn__label {
  pointer-events: none;
}

/* Hide the map entirely on tablet/phone (≤1023px) */
@media (max-width:1023px){
  /* Hide any map instance + our desktop wrapper if present */
  .single-hp_listing #map-wrapper-live,
  .single-hp_listing .hp-listing__map {
    display: none !important;
  }
}

/* Claim link size in General Info card */
.ilp-general .scff-claim-row{ margin-top:.5rem; }
.ilp-general .scff-claim-link{
  font-size: 0.92rem;   /* ~15px; tweak to 0.9rem if you want smaller */
  line-height: 1.2;
}

/* Optional: a touch smaller on mobile */
@media (max-width: 782px){
  .ilp-general .scff-claim-link{ font-size: 0.8rem; }
}

/* ILP detail page titles: consistent style, slightly larger than archive */
body.single-hp_listing .hp-listing--view-page h1.hp-listing__title,
body.single-hp_listing .hp-listing--view-page h1.hp-listing__title a {
  font-weight: 800 !important;
  color: #444444 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.18 !important;
  /* larger min value than archive */
  font-size: clamp(2.5rem, 2.5vw + 1rem, 2.8rem) !important;
  margin-bottom: .4rem !important;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  text-decoration: none;
}



/* Action links row under General Info (Claim / Suggest) */
.ilp-general .scff-actions-row{
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .6rem;              /* space around divider */
  flex-wrap: wrap;         /* wrap nicely on small screens */
}

.ilp-general .scff-action-link{
  font-weight: 500;
  text-decoration: underline;
  color: #222222;          
  display: inline-block;
  line-height: 1.2;
  font-size: 0.9rem;      /* matches your previous tweak */
}
.ilp-general .scff-action-link:hover{ opacity: .85; }

/* Subtle vertical divider */
.ilp-general .scff-action-divider{
  width: 1px;
  height: 14px;
  background: rgba(0,0,0,.15);  /* subtle */
  display: inline-block;
  align-self: center;
}

/* Mobile: slightly smaller text and put a bit more space */
@media (max-width: 782px){
  .ilp-general .scff-action-link{ font-size: 0.9rem; }
  .ilp-general .scff-actions-row{ gap: .5rem; }
}

/* ILP · Pricing — make inline row headers (first line) clearly bolder */
.single-hp_listing .ilp-pricing .hp-listing__attribute > .hp-listing-attribute-label:first-child,
.single-hp_listing .ilp-pricing .hp-listing-attribute     > .hp-listing-attribute-label:first-child,
.single-hp_listing .ilp-pricing .hp-col-12                > .hp-listing-attribute-label:first-child,
.single-hp_listing .ilp-pricing .p-item                   > .hp-listing-attribute-label:first-child,
.single-hp_listing .ilp-pricing .hp-listing__attribute    > strong:first-child,
.single-hp_listing .ilp-pricing .hp-listing-attribute     > strong:first-child,
.single-hp_listing .ilp-pricing .hp-col-12                > strong:first-child,
.single-hp_listing .ilp-pricing .p-item                   > strong:first-child,
.single-hp_listing .ilp-pricing .hp-listing__attribute    > b:first-child,
.single-hp_listing .ilp-pricing .hp-listing-attribute     > b:first-child,
.single-hp_listing .ilp-pricing .hp-col-12                > b:first-child,
.single-hp_listing .ilp-pricing .p-item                   > b:first-child {
  display: block;
  margin: 12px 0 6px !important;   /* breathing room above/below */
  font-weight: 800 !important;     /* bolder */
  font-size: 1.08rem !important;   /* small size bump */
  color: #333333 !important;       /* slightly darker */
}

/* ILP · Pricing — emphasize Last Verified */
.single-hp_listing .ilp-pricing .hp-listing__attribute--last-verified,
.single-hp_listing .ilp-pricing .hp-listing__attribute--last_verified,
.single-hp_listing .ilp-pricing .hp-listing__attribute--lastverified,
.single-hp_listing .ilp-pricing .hp-listing__attribute--verified,
.single-hp_listing .ilp-pricing .ilp-price-footer {
  font-weight: 700 !important;
  color: #333333 !important;      /* darker gray/near-black */
}

/* Inline "Claimed" — same layout, green text, not a link */
.ilp-general .scff-action-link.scff-claim-link.is-claimed{
  pointer-events: none;
  cursor: default;
  color: #166534;               /* same green as your “Claimed” text */
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}

/* Show the PNG as a tintable mask so it matches currentColor perfectly */
.ilp-general .scff-action-link.scff-claim-link.is-claimed .ci{
  display:none;                 /* hidden until mask support check below */
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .ilp-general .scff-action-link.scff-claim-link.is-claimed .ci{
    display:inline-block;
    width: .95em; height: .95em;
    background: currentColor;   /* ← tints the icon to your green */
    -webkit-mask-image: url('/wp-content/uploads/2025/09/checked.png');
            mask-image: url('/wp-content/uploads/2025/09/checked.png');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain;     mask-size: contain;
    -webkit-mask-position: center;  mask-position: center;
  }
  /* If mask works, hide the <img> fallback */
  .ilp-general .scff-action-link.scff-claim-link.is-claimed .ci-img{ display:none; }
}

/* Fallback: show the PNG and approximate the same green via filter */
.ilp-general .scff-action-link.scff-claim-link.is-claimed .ci-img{
  width: 10px; height: 10px;
  /* filter tuned close to #166534 */
  filter: invert(22%) sepia(23%) saturate(1370%) hue-rotate(88deg) brightness(90%) contrast(92%);
}

/* Align the checkmark with the "Claimed" baseline */
.ilp-general .scff-action-link.scff-claim-link.is-claimed{
  align-items: center;                 /* center the flex line */
  --claim-icon-nudge: -0.5px;             /* adjust to 1–3px to taste */
}
.ilp-general .scff-action-link.scff-claim-link.is-claimed .ci,
.ilp-general .scff-action-link.scff-claim-link.is-claimed .ci-img{
  position: relative;
  top: var(--claim-icon-nudge);
}

/* === ILP: kill hover-lift on the main content column  === */
.single-hp_listing .hp-page__content:hover,
.single-hp_listing .hp-listing--view-page:hover {
  transform: none !important;
  transition: none !important;
}

/* === ILP · Main Gallery Overlay Arrows — dark circular pills (screenshot style) === */

/* Mount inside the big-image viewport; keep rounded corners respected */
.single-hp_listing .hp-listing__images .slick-list{
  position: relative;            /* positioning context for arrows */
  border-radius: 14px;           /* already in your CSS, kept here for clarity */
  overflow: hidden;              /* ensures arrows clip to the rounded image */
}

/* Arrow buttons */
.single-hp_listing .ilp-gallery-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  background: rgba(0,0,0,.55);   /* dark, semi-transparent */
  color: #fff;                   /* white chevron */
  font-size: 2.6rem;             /* chevron size */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;                    /* above the image */
  -webkit-tap-highlight-color: transparent;
  /* tiny polish to mimic native overlay chips */
  backdrop-filter: saturate(120%) blur(0.5px);
}

.single-hp_listing .ilp-gallery-arrow.left  { left: 10px; }
.single-hp_listing .ilp-gallery-arrow.right { right: 10px; }

/* Hover/active/focus states */
.single-hp_listing .ilp-gallery-arrow:hover{
  background: rgba(0,0,0,.7);
  transform: translateY(-50%) scale(1.04);
}
.single-hp_listing .ilp-gallery-arrow:active{
  background: rgba(0,0,0,.78);
  transform: translateY(-50%) scale(0.98);
}
.single-hp_listing .ilp-gallery-arrow:focus{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Small phones: slightly smaller chip but same proportions */
@media (max-width: 520px){
  .single-hp_listing .ilp-gallery-arrow{
    width: 40px;
    height: 40px;
    font-size: 1.9rem;
  }
  .single-hp_listing .ilp-gallery-arrow.left  { left: 8px; }
  .single-hp_listing .ilp-gallery-arrow.right { right: 8px; }
}

/* Hide original thumbnail-carousel arrows (we’re replacing them) */
.single-hp_listing .hp-listing__images-carousel .slick-arrow{
  display: none !important;
}