/*
 * Hospitality UI - front office pages, part 2: results page (DESIGN_SYSTEM §9.2)
 * Page head (H1 hotel name, stars, city, sort), two-column layout (filters 28rem | results), filter groups
 * (wkhotelfilterblock theme override + hspcore hsp_filters.tpl), room cards (_partials/room_type_list.tpl),
 * hspcore party / badge blocks, empty state, mobile filter sheet (30-pages-20-results.js).
 * The "Your stay" / change-search box in the left column belongs to 20-booking*.css.
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

html.hsp-ui-fo {
  --hsp-ui-star: var(--hsp-gold-600); /* component token: rating stars (7.31:1 on white, never a status) */
}

/* =================================================================== 1. layout */

@media (min-width: 1024px) {
  html.hsp-ui.hsp-ui-fo #category #columns > .row:not(#slider_row) {
    display: grid;
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    gap: var(--hsp-space-8);
    align-items: start;
    margin-inline: 0;
  }

  html.hsp-ui.hsp-ui-fo #category #columns > .row:not(#slider_row)::before,
  html.hsp-ui.hsp-ui-fo #category #columns > .row:not(#slider_row)::after {
    content: none;
  }

  html.hsp-ui.hsp-ui-fo #category #columns > .row:not(#slider_row) > :is(#left_column, #center_column) {
    float: none;
    inline-size: auto;
    padding-inline: 0;
  }
}

html.hsp-ui.hsp-ui-fo #category #slider_row #top_column:empty {
  display: none;
}

html.hsp-ui.hsp-ui-fo .cat_cont {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

html.hsp-ui.hsp-ui-fo .cat_cont > .col-sm-12 {
  padding-inline: 0;
}

/* =================================================================== 2. page head: H1, meta, sort */

/* the theme styles every <header> element (white, z-index 1): reset for this in-page header */
html.hsp-ui.hsp-ui-fo .hsp-ui-results__head {
  position: relative;
  z-index: 2;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hsp-space-3) var(--hsp-space-6);
  margin-block-end: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__title {
  margin: 0;
  font-size: var(--hsp-fs-h1);
  line-height: var(--hsp-lh-h1);
  font-weight: var(--hsp-fw-semibold);
  letter-spacing: var(--hsp-ls-heading);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-1) var(--hsp-space-4);
  margin: var(--hsp-space-1) 0 0;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui-fo .hsp-ui-stars {
  display: inline-flex;
  gap: .2rem;
  color: var(--hsp-ui-star);
  font-size: 1.4rem;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__city i {
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort .sortBlockHeading {
  margin: 0;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  text-align: start;
  white-space: nowrap;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort .filter_dw_cont {
  position: relative;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort .filter_dw_cont button {
  inline-size: auto;
  min-inline-size: 20rem;
  justify-content: space-between;
  gap: var(--hsp-space-3);
  --hsp-ui-btn-h: var(--hsp-touch-min);
  font-weight: var(--hsp-fw-medium);
  text-align: start;
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort {
    inline-size: 100%;
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort .sortBlockHeading {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort .filter_dw_cont {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort .filter_dw_cont button {
    inline-size: 100%;
    min-inline-size: 0;
  }
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__sort .dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-results__count {
  margin: 0 0 var(--hsp-space-3);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #category_data_cont {
  margin: 0;
}

/* =================================================================== 3. filters */

html.hsp-ui.hsp-ui-fo :is(#filter_results, #hsp_filters) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

html.hsp-ui.hsp-ui-fo :is(#filter_results, #hsp_filters) > .col-sm-12 {
  float: none;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont {
  margin: 0 0 var(--hsp-space-4);
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-1);
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont > [class*="col-"] {
  float: none;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont div.layered_filter_heading {
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont .hsp-ui-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-2);
  margin: 0 0 var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont .hsp-ui-filter__head::before,
html.hsp-ui.hsp-ui-fo .layered_filter_cont .hsp-ui-filter__head::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont .lf_headingmain_wrapper {
  float: none;
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont .lf_headingmain_wrapper :is(.hsp-ui-filter__title, span) {
  display: block;
  margin: 0;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont .lf_headingmain_wrapper hr {
  display: none;
}

/* tertiary "Clear filter" (6.14:1, was #A9A9A9 at 2.35:1) */
html.hsp-ui.hsp-ui-fo .layered_filter_cont .clear_filter {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
  margin-inline-end: calc(-1 * var(--hsp-space-2));
  padding-inline: var(--hsp-space-2);
  float: none;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-link);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-md);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo .layered_filter_cont .clear_filter:hover {
  color: var(--hsp-color-text-link-hover);
  background: var(--hsp-color-action-subtle);
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo .lf_sub_cont {
  max-block-size: none;
  overflow: visible;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .layered_filt {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .layered_filt .hsp-ui-filter__option {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-3);
  min-block-size: var(--hsp-touch-min);
  margin: 0;
  padding-inline: var(--hsp-space-1);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text);
  border-radius: var(--hsp-radius-md);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo .layered_filt .hsp-ui-filter__option:hover {
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo .layered_filt :is(div.checker, div.checker span) {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .layered_filt .filters_name {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: inherit;
}

/* price: values, slider (pointer shortcut), number fields (keyboard / screen readers) */
html.hsp-ui.hsp-ui-fo .price_filter_subcont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-2);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .price_filter_subcont::before,
html.hsp-ui.hsp-ui-fo .price_filter_subcont::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .price_filter_subcont span {
  float: none;
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .price_filter_subcont .hsp-ui-filter__range-sep {
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #filter_price_silder {
  block-size: .6rem;
  margin: var(--hsp-space-5) var(--hsp-space-3) var(--hsp-space-5);
  background: var(--hsp-color-surface-muted);
  border: 0;
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #filter_price_silder .ui-slider-range {
  background: var(--hsp-color-action);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #filter_price_silder .ui-slider-handle {
  inset-block-start: 50%;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  margin-block-start: -1.2rem;
  margin-inline-start: -1.2rem;
  background: var(--hsp-color-surface);
  border: 2px solid var(--hsp-color-action);
  border-radius: var(--hsp-radius-pill);
  box-shadow: var(--hsp-shadow-1);
  cursor: grab;
}

/* the handle keeps a 44px hit area */
html.hsp-ui.hsp-ui-fo #filter_price_silder .ui-slider-handle::after {
  content: "";
  position: absolute;
  inset: -1rem;
}

html.hsp-ui.hsp-ui-fo[dir="rtl"] #filter_price_silder .ui-slider-handle {
  margin-inline-start: 0;
  margin-left: -1.2rem;
}

html.hsp-ui-fo .hsp-ui-filter__price-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-filter__price-field {
  display: grid;
  gap: var(--hsp-space-1);
  margin: 0;
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-filter__price-field input {
  block-size: var(--hsp-touch-min);
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-3);
  font-family: var(--hsp-font-num);
  font-variant-numeric: tabular-nums;
}

/* =================================================================== 4. room cards */

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card {
  float: none;
  inline-size: auto;
  margin: 0 0 var(--hsp-space-5);
  padding: 0;
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-1);
  overflow: hidden;
  transition: box-shadow var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card:hover {
  box-shadow: var(--hsp-shadow-2);
}

html.hsp-ui-fo .hsp-ui-room-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

html.hsp-ui-fo .hsp-ui-room-card__media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hsp-space-2);
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__photo {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hsp-color-surface-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card .room-type-image {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  margin: 0;
  object-fit: cover;
  transition: transform var(--hsp-dur-slow) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card:hover .room-type-image {
  transform: scale(1.02);
}

/* hspcore badges under the photo: info tags (§6.12), never on the photo */
html.hsp-ui.hsp-ui-fo .hsp-ui-room-card .hsp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-1);
  margin: 0;
  padding: 0 var(--hsp-space-4) 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card .hsp-badge,
html.hsp-ui.hsp-ui-fo .hsp-badges .hsp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  min-block-size: 2.4rem;
  margin: 0;
  padding-block: .2rem;
  padding-inline: var(--hsp-space-2);
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  line-height: var(--hsp-lh-xs);
  color: var(--hsp-color-text-secondary);
  text-transform: none;
  background: var(--hsp-color-surface-muted);
  border: 0;
  border-radius: var(--hsp-radius-xs);
}

html.hsp-ui.hsp-ui-fo .hsp-badges .hsp-badge-kind {
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
}

html.hsp-ui.hsp-ui-fo .hsp-badges .hsp-badge-sleeps::before {
  content: "\f0c0"; /* FA4 users */
  font-family: "FontAwesome";
  font-size: 1.2rem;
}

html.hsp-ui-fo .hsp-ui-room-card__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hsp-space-4);
  padding: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__info {
  float: none;
  inline-size: auto;
}

html.hsp-ui-fo .hsp-ui-room-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--hsp-space-2);
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__title {
  margin: 0;
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__title a {
  color: inherit;
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__title a:hover {
  color: var(--hsp-color-text-link);
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__capacity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-1) var(--hsp-space-2);
  margin: 0;
  padding: 0;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__capacity i {
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__capacity .capa_data {
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__amenities li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  background: var(--hsp-color-surface-sunken);
  border-radius: var(--hsp-radius-sm);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__amenities .hsp-ui-room-card__amenity--more {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__amenities img {
  inline-size: 2rem;
  block-size: 2rem;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__amenity-count {
  inline-size: auto;
  padding-inline: var(--hsp-space-2);
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__desc {
  margin: 0;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__desc p {
  display: -webkit-box;
  margin: 0 0 var(--hsp-space-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  min-block-size: var(--hsp-touch-min);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-link);
}

/* price column */
html.hsp-ui-fo .hsp-ui-room-card__aside {
  display: flex;
  flex-direction: column;
  gap: var(--hsp-space-1);
  padding-block-start: var(--hsp-space-4);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--hsp-space-2);
  margin: 0;
  float: none;
  text-align: start;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__price .rm_price_val {
  margin: 0;
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-price-lg);
  line-height: var(--hsp-lh-price);
  font-weight: var(--hsp-fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__price .room_type_old_price {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
  text-decoration: line-through;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__price .rm_price_txt {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

/* English source label is "Per Night": sentence case in English only (translations keep their own case) */
html.hsp-ui.hsp-ui-fo[lang^="en"] .rm_price_txt {
  text-transform: lowercase;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__total {
  margin: 0;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__total .price {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__tax {
  margin: 0;
  font-size: var(--hsp-fs-xs);
  color: var(--hsp-color-text-muted);
}

/* availability: warning tone text + icon, only under the threshold */
html.hsp-ui.hsp-ui-fo .hsp-ui-room-card .rm_left {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-1);
  margin: var(--hsp-space-1) 0 0;
  padding: 0;
  float: none;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-tone-warning-fg);
  text-align: start;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--hsp-space-2);
  margin-block-start: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__actions > * {
  inline-size: 100%;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__actions .ajax_add_to_cart_button {
  display: flex;
  inline-size: 100%;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__actions .booking_guest_occupancy_conatiner {
  margin: 0;
  inline-size: 100%;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__actions .booking_guest_occupancy_conatiner .form-group {
  display: block;
  inline-size: 100%;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__qty {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__qty label {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__view {
  inline-size: 100%;
}

@media (min-width: 768px) {
  html.hsp-ui-fo .hsp-ui-room-card__grid {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__photo {
    aspect-ratio: 4 / 3;
  }

  html.hsp-ui-fo .hsp-ui-room-card__media {
    padding: var(--hsp-space-4);
    padding-inline-end: 0;
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__photo {
    border-radius: var(--hsp-radius-md);
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-room-card .hsp-badges {
    padding: 0;
  }
}

@media (min-width: 1280px) {
  html.hsp-ui-fo .hsp-ui-room-card__grid {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  }

  html.hsp-ui-fo .hsp-ui-room-card__info {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--hsp-space-6);
    padding: var(--hsp-space-5);
  }

  html.hsp-ui-fo .hsp-ui-room-card__aside {
    padding-block-start: 0;
    padding-inline-start: var(--hsp-space-5);
    border-block-start: 0;
    border-inline-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
    text-align: end;
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-room-card__price {
    justify-content: flex-end;
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-room-card .rm_left {
    justify-content: flex-end;
  }
}

/* the vendor "occupancy mismatch" text inside the guests trigger */
html.hsp-ui.hsp-ui-fo .hsp-ui-room-card .booking_guest_occupancy {
  inline-size: 100%;
  justify-content: space-between;
}

/* =================================================================== 5. hspcore party block (§9.2 "Book your whole party") */

html.hsp-ui.hsp-ui-fo #category_data_cont .hsp-party-wrap {
  float: none;
  inline-size: auto;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #category_data_cont .hsp-party-wrap:not(:has(> :not(script))) {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-party-wrap :is(.hsp-party, .hsp-party-block, .hsp-party-card) {
  margin-block-end: var(--hsp-space-5);
  padding: var(--hsp-space-5);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface-brand);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
}

/* =================================================================== 6. empty state (§6.24) */

html.hsp-ui.hsp-ui-fo .noRoomsAvailAlert.hsp-ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hsp-space-2);
  margin: 0;
  padding: var(--hsp-space-12) var(--hsp-space-5);
  text-align: center;
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
}

html.hsp-ui-fo .hsp-ui-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.8rem;
  block-size: 4.8rem;
  font-size: 2.4rem;
  color: var(--hsp-color-text-secondary);
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-empty__title {
  margin: 0;
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-align: center;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-empty__text {
  margin: 0;
  max-inline-size: 48ch;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-secondary);
  text-align: center;
}

/* =================================================================== 7. filters below 1024: button + full-screen sheet */

html.hsp-ui.hsp-ui-fo .hsp-ui-results .hsp-ui-filter-toggle {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-filter-toggle .badge[hidden] {
  display: none;
}

/* the sheet node is created once by 30-pages-20-results.js; it is a sheet below 1024px only */
html.hsp-ui-fo .hsp-ui-sheet {
  display: none;
}

@media (max-width: 1023px) {
  html.hsp-ui.hsp-ui-fo .hsp-ui-results .hsp-ui-filter-toggle {
    display: inline-flex;
    --hsp-ui-btn-h: var(--hsp-touch-min);
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-filter-toggle .badge {
    margin-inline-start: var(--hsp-space-1);
  }

  html.hsp-ui-fo .hsp-ui-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--hsp-z-modal);
    display: flex;
    flex-direction: column;
    background: var(--hsp-color-page);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform var(--hsp-dur-slow) var(--hsp-ease-exit), visibility 0s linear var(--hsp-dur-slow);
  }

  html.hsp-ui-fo .hsp-ui-sheet.is-open {
    visibility: visible;
    transform: none;
    transition: transform var(--hsp-dur-slow) var(--hsp-ease-enter), visibility 0s;
  }

  html.hsp-ui-fo .hsp-ui-sheet__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--hsp-space-3);
    min-block-size: var(--hsp-ui-header-h);
    padding-inline: var(--hsp-space-4) var(--hsp-space-2);
    background: var(--hsp-color-surface);
    border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-sheet__title {
    margin: 0;
    font-size: var(--hsp-fs-h4);
    font-weight: var(--hsp-fw-semibold);
    color: var(--hsp-color-text-strong);
  }

  html.hsp-ui-fo .hsp-ui-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--hsp-space-4);
  }

  html.hsp-ui-fo .hsp-ui-sheet__foot {
    flex: none;
    padding: var(--hsp-space-3) var(--hsp-space-4) calc(var(--hsp-space-3) + env(safe-area-inset-bottom));
    background: var(--hsp-color-surface);
    border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
    box-shadow: var(--hsp-shadow-2);
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-sheet__foot .btn {
    inline-size: 100%;
  }
}

/* =================================================================== round 2 (ui-polish-fo-pages) */

/* the guests trigger of a room card never wraps into a clipped second line: one line with an ellipsis, the full
   text in its title (30-pages-20-results.js) */
html.hsp-ui.hsp-ui-fo #category .room_cont .booking_guest_occupancy > span {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* room titles are 44px targets on touch (§11.1) */
@media (max-width: 767px), (pointer: coarse) {
  html.hsp-ui.hsp-ui-fo #category .hsp-ui-room-card__title a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--hsp-touch-min);
  }
}