/*
 * Hospitality UI - front office pages, part 3: room page (DESIGN_SYSTEM §9.4)
 * Layout 8 / 4 at >= 1024 with a sticky booking column, H1 + hotel meta, gallery (vendor jqzoom / serialScroll
 * markup kept), information tabs and facts, booking card (_partials/booking-form.tpl), additional facilities,
 * hspcore price note, mobile sticky booking bar (30-pages-30-room.js). Also used by cabin pages of Nile vessels.
 * The date range field and the guests popover inside the card belong to 20-booking*.css.
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

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

html.hsp-ui.hsp-ui-fo #product .primary_block {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #product .primary_block > :is(.pb-left-column, .pb-right-column) {
  padding-inline: 0;
}

/* round 2 (§9.4): DOM order = gallery, booking card, content. Below 1024 the three columns stack in that order
   (no Bootstrap floats); at >= 1024 the card sits in a sticky column beside the gallery and the content. */
@media (max-width: 1023px) {
  html.hsp-ui.hsp-ui-fo #product .primary_block > :is(.pb-left-column, .pb-right-column) {
    float: none;
    inline-size: auto;
  }
}

@media (min-width: 1024px) {
  html.hsp-ui.hsp-ui-fo #product .primary_block {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--hsp-space-8);
    row-gap: 0;
    align-items: start;
  }

  html.hsp-ui.hsp-ui-fo #product .primary_block > .hsp-ui-room__gallery {
    grid-column: 1;
    grid-row: 1;
  }

  html.hsp-ui.hsp-ui-fo #product .primary_block > .pb-right-column {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  html.hsp-ui.hsp-ui-fo #product .primary_block > .hsp-ui-room__content {
    grid-column: 1;
    grid-row: 2;
  }

  html.hsp-ui.hsp-ui-fo #product .primary_block::before,
  html.hsp-ui.hsp-ui-fo #product .primary_block::after {
    content: none;
  }

  html.hsp-ui.hsp-ui-fo #product .primary_block > :is(.pb-left-column, .pb-right-column) {
    float: none;
    inline-size: auto;
  }

  html.hsp-ui.hsp-ui-fo #product .primary_block > #admin-action {
    grid-column: 1 / -1;
  }

  /* sticky booking column; scrolls inside itself when taller than the viewport */
  html.hsp-ui.hsp-ui-fo #product .pb-right-column {
    position: sticky;
    inset-block-start: calc(var(--hsp-ui-header-h) + var(--hsp-space-6));
    max-block-size: calc(100vh - var(--hsp-ui-header-h) - var(--hsp-space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-block-end: var(--hsp-space-2);
  }
}

html.hsp-ui.hsp-ui-fo #product :is(.card, .room_type_img_containter.card) {
  margin-block-end: var(--hsp-space-5);
  padding: var(--hsp-space-5);
  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);
}

/* =================================================================== 2. heading */

html.hsp-ui.hsp-ui-fo #product .room_hotel_name_block {
  padding-block-end: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__head {
  display: block;
  margin: 0 0 var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__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 #product .hsp-ui-room__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-1) var(--hsp-space-4);
  margin: var(--hsp-space-2) 0 0;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__meta i:not(.icon-star) {
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #product #hotel_rating {
  display: inline-flex;
  margin: 0;
  color: var(--hsp-ui-star);
  font-size: 1.4rem;
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__reviews {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  margin-block-start: var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-secondary);
}

/* hspcore badges under the heading: info tags */
html.hsp-ui.hsp-ui-fo #product .room_hotel_name_block .hsp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-1);
  margin-block-start: var(--hsp-space-3);
}

/* =================================================================== 3. gallery (vendor markup) */

html.hsp-ui.hsp-ui-fo #product .pb-left-column #image-block {
  padding: 0;
  background: var(--hsp-color-surface-muted);
  border: 0;
  border-radius: var(--hsp-radius-md);
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo #product .pb-left-column #image-block img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #product #thumbs_list li {
  border: 0;
  border-radius: var(--hsp-radius-sm);
  background: transparent;
}

html.hsp-ui.hsp-ui-fo #product #thumbs_list li a {
  display: block;
  border: 2px solid transparent;
  border-radius: var(--hsp-radius-sm);
  overflow: hidden;
  transition: border-color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #product #thumbs_list li a:is(:hover, .shown) {
  border-color: var(--hsp-color-border-selected);
}

html.hsp-ui.hsp-ui-fo #product #thumbs_list li img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* thumbnail scroll arrows: 44px named icon buttons (were 20px, and an invisible one stayed focusable) */
html.hsp-ui.hsp-ui-fo #product :is(#view_scroll_left, #view_scroll_right) {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  color: var(--hsp-color-text-inverse);
  background: color-mix(in srgb, var(--hsp-color-surface-inverse) 72%, transparent);
  border-radius: var(--hsp-radius-pill);
  overflow: visible;
}

html.hsp-ui.hsp-ui-fo #product :is(#view_scroll_left, #view_scroll_right)::before {
  color: var(--hsp-color-text-inverse);
  font-size: 2.2rem;
  line-height: 1;
}

html.hsp-ui.hsp-ui-fo #product :is(#view_scroll_left, #view_scroll_right):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #product .resetimg a {
  font-size: var(--hsp-fs-sm);
}

/* =================================================================== 4. tabs and room facts */

html.hsp-ui.hsp-ui-fo #product .page-product-box {
  margin: 0;
}

/* The selected tab uses the 10-components tab rule (3px action bar at the block end on a 1px border-subtle
   tablist rule). The theme's !important border resets on .product_description_tabs / .idTabHrefShort now apply
   only without this layer (theme css/product.css, CORE_CHANGES 2026-09-30); roles and keys: 30-pages-35-tabs.js. */
html.hsp-ui.hsp-ui-fo #product .product_description_tabs {
  padding-inline: 0;
  margin-block-end: var(--hsp-space-4);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #product .product_description_tabs li.active::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #product .product_description_tabs .idTabHrefShort {
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #product .product_description_tabs li.active .idTabHrefShort {
  color: var(--hsp-color-text-strong);
  font-weight: var(--hsp-fw-semibold);
  border-block-end-color: var(--hsp-color-action);
}

/* tab panels are focusable (tabindex 0, WAI-ARIA tabs pattern): same ring as every control */
html.hsp-ui.hsp-ui-fo .tab-content > .tab-pane[role="tabpanel"]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #product .product_description_tabs_contents {
  line-height: var(--hsp-lh-body);
}

html.hsp-ui.hsp-ui-fo #product .product_description_tabs_contents > .tab-pane.card {
  padding: var(--hsp-space-6);
}

html.hsp-ui.hsp-ui-fo #product .room_description :is(p, li) {
  max-inline-size: var(--hsp-measure);
  padding: 0;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #product .info_margin_div {
  margin-block-end: var(--hsp-space-6);
  padding-block-start: var(--hsp-space-5);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #product .room_description.info_margin_div {
  padding-block-start: 0;
  border-block-start: 0;
}

/* sentence-case section headings (were grey 12px capitals) */
html.hsp-ui.hsp-ui-fo #product .room_info_heading {
  margin-block-end: var(--hsp-space-2);
  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-transform: none;
  opacity: 1;
}

html.hsp-ui.hsp-ui-fo #product .room_info_heading .hsp-ui-room__section-title {
  margin: 0;
  font: inherit;
  color: inherit;
}

html.hsp-ui.hsp-ui-fo #product #thumbs_list {
  block-size: auto;
  max-block-size: 42rem;
}

html.hsp-ui.hsp-ui-fo #product .room_info_content {
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #product .room_info_content p {
  margin-block-end: var(--hsp-space-1);
}

html.hsp-ui.hsp-ui-fo #product .room_info_content.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--hsp-space-2) var(--hsp-space-4);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #product .room_info_content.row::before,
html.hsp-ui.hsp-ui-fo #product .room_info_content.row::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #product .room_info_content.row > [class*="col-"] {
  float: none;
  inline-size: auto;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #product .room_info_content .rm_ftr_wrapper {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: 4rem;
  padding-inline: var(--hsp-space-3);
  line-height: var(--hsp-lh-sm);
  white-space: normal;
  background: var(--hsp-color-surface-sunken);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #product .room_info_content .rm_ftr_wrapper img {
  inline-size: 2rem;
}

html.hsp-ui.hsp-ui-fo #product .room_info_content .circle-small {
  display: inline-block;
  inline-size: .6rem;
  block-size: .6rem;
  margin-inline-end: var(--hsp-space-2);
  overflow: hidden;
  color: transparent;
  vertical-align: middle;
  background: var(--hsp-color-brand-accent);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #product .non_refundable_txt {
  color: var(--hsp-tone-danger-fg);
}

html.hsp-ui.hsp-ui-fo #product .btn-show-more-images {
  margin-block-start: var(--hsp-space-3);
}

/* =================================================================== 5. booking card */

html.hsp-ui.hsp-ui-fo #product .booking-form.card {
  padding: var(--hsp-space-5);
  box-shadow: var(--hsp-shadow-3);
  border-radius: var(--hsp-radius-xl);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-book__night {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hsp-space-1);
  margin: 0 0 var(--hsp-space-4);
  padding-block-end: var(--hsp-space-4);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-book__night .price {
  font-size: var(--hsp-fs-price-md);
  line-height: var(--hsp-lh-price);
  font-weight: var(--hsp-fw-bold);
  color: var(--hsp-color-text-strong);
}

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

html.hsp-ui.hsp-ui-fo[lang^="en"] .hsp-ui-book__per {
  text-transform: lowercase;
}

html.hsp-ui.hsp-ui-fo #product .booking_room_fields .row {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #product .booking_room_fields .row > [class*="col-"] {
  padding-inline: 0;
}

html.hsp-ui.hsp-ui-fo #product .booking_room_fields .form-group {
  margin-block-end: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo #product .booking_room_fields .control-label {
  display: block;
  margin-block-end: .6rem;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #product .booking_room_fields .htl_location_block p {
  margin: 0;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #product #booking_action_block > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo #product #booking_action_block > .row::before,
html.hsp-ui.hsp-ui-fo #product #booking_action_block > .row::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #product #booking_action_block .total_price_block {
  float: none;
  inline-size: auto;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #product .total_price_block label {
  margin-block-end: var(--hsp-space-1);
}

html.hsp-ui.hsp-ui-fo #product .total_price_block p {
  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 #product .total_price_block p.hsp-ui-book__scope {
  margin-block-start: var(--hsp-space-1);
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #product .total_price_block .room_type_old_price {
  display: block;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
  text-decoration: line-through;
}

html.hsp-ui.hsp-ui-fo #product .num_quantity_alert {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  float: none;
  inline-size: auto;
  margin: 0 0 var(--hsp-space-1);
  padding: 0;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-tone-warning-fg);
  text-align: end;
}

html.hsp-ui.hsp-ui-fo #product #add_to_cart {
  margin: var(--hsp-space-4) 0 0;
}

html.hsp-ui.hsp-ui-fo #product #add_to_cart .book_now_submit {
  inline-size: 100%;
  min-block-size: var(--hsp-fo-control-lg);
  padding-block: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-on-action);
  text-transform: none;
  background: var(--hsp-color-action);
  border: var(--hsp-border-w) solid var(--hsp-color-action);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #product #add_to_cart .book_now_submit:hover {
  background: var(--hsp-color-action-hover);
  border-color: var(--hsp-color-action-hover);
}

html.hsp-ui.hsp-ui-fo #product :is(.sold_out_alert, .order_restrict_alert) {
  padding: var(--hsp-space-3) var(--hsp-space-4);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-tone-neutral-fg);
  background: var(--hsp-tone-neutral-bg);
  border-radius: var(--hsp-radius-md);
}

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

html.hsp-ui.hsp-ui-fo #product .price_desc_block::before,
html.hsp-ui.hsp-ui-fo #product .price_desc_block::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #product .price_desc_block > [class*="col-"] {
  float: none;
  inline-size: auto;
}

html.hsp-ui.hsp-ui-fo #product .separator-hr-mg-10 {
  margin-block: var(--hsp-space-3);
  border-block-start-color: var(--hsp-color-border-subtle);
}

/* additional facilities */
html.hsp-ui.hsp-ui-fo #product .room_demands_container {
  float: none;
  inline-size: auto;
}

html.hsp-ui.hsp-ui-fo #product .room_demands_container > .control-label {
  display: block;
  margin-block-end: var(--hsp-space-3);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #product .room_demands_container .room_demand_block {
  margin-inline: 0;
  padding-block: var(--hsp-space-2);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

/* booking card labels and extra-services price: readable contrast (were #A5A19C 2.58:1 and #299DFF 2.85:1) */
html.hsp-ui.hsp-ui-fo #product .price_desc_block label.control-label {
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #product .price_desc_block :is(.extra_demands_price_block, .total_price_block) {
  font-family: var(--hsp-font-num);
  font-weight: var(--hsp-fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-strong);
}

/* booking loader: static under reduced motion (it blinked) */
@media (prefers-reduced-motion: reduce) {
  html.hsp-ui.hsp-ui-fo #product #booking_action_loader {
    animation: none;
  }
}

/* "How pricing works" disclosure inside the booking card (§9.4) */
html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing {
  margin-block-start: var(--hsp-space-4);
  padding-block-start: var(--hsp-space-3);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__summary {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-link);
  cursor: pointer;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__summary::-webkit-details-marker {
  display: none;
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__summary::after {
  content: "";
  inline-size: .8rem;
  block-size: .8rem;
  margin-inline-start: auto;
  /* a down chevron in every direction (§6.26: accordions never point left/right): two sides of a square turned
     45deg. A logical border-inline-end would be the LEFT side in RTL and turn the glyph into "<". */
  border-right: 2px solid currentColor; /* hsp-lint: allow-physical (rotated glyph, not directional) */
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing[open] > .hsp-ui-pricing__summary::after {
  transform: rotate(-135deg);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
  border-radius: var(--hsp-radius-sm);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__table {
  inline-size: 100%;
  margin-block-start: var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
  border-collapse: collapse;
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__table :is(th, td) {
  padding: var(--hsp-space-2) 0;
  text-align: start;
  vertical-align: top;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__table thead th {
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__table tbody th {
  padding-inline-end: var(--hsp-space-3);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__table tbody td {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-align: end;
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-pricing__table tr:last-child > * {
  border-block-end: 0;
}

/* check-in / check-out facts and the hotel amenities list (a real list, CSS bullets) */
html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--hsp-space-3);
  margin: 0;
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__times dt {
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__times dd {
  margin: 0;
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--hsp-space-2) var(--hsp-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-feature-list li {
  position: relative;
  padding-inline-start: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-feature-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: .4rem;
  inset-block-start: .75em;
  inline-size: .6rem;
  block-size: .6rem;
  background: var(--hsp-color-brand-accent);
  border-radius: 50%;
}

html.hsp-ui.hsp-ui-fo #product .rm_ftr_wrapper {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
}

html.hsp-ui.hsp-ui-fo #product .rm_ftr_wrapper img {
  flex: none;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  object-fit: contain;
}

html.hsp-ui.hsp-ui-fo #product .hsp-ui-room__facilities-title {
  margin-block-end: var(--hsp-space-2);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

/* hspcore "Prices by occupancy" note: calm disclosure-style card */
html.hsp-ui.hsp-ui-fo #product .pb-right-column .hsp-price-note {
  margin-block-end: var(--hsp-space-5);
  padding: var(--hsp-space-4);
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface-sunken);
  border: 0;
  border-radius: var(--hsp-radius-lg);
}

html.hsp-ui.hsp-ui-fo #product .pb-right-column .hsp-price-note :is(strong, .hsp-price-note-title, h3, h4) {
  display: block;
  margin-block-end: var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #product .pb-right-column .hsp-price-note ul {
  margin: 0;
  padding-inline-start: var(--hsp-space-4);
}

/* =================================================================== 6. mobile sticky booking bar (JS adds it below 1024) */

html.hsp-ui-fo .hsp-ui-sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--hsp-z-fo-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-3);
  min-block-size: 6.4rem;
  padding: var(--hsp-space-2) var(--hsp-ui-gutter) calc(var(--hsp-space-2) + 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: 0 -4px 12px rgb(31 27 23 / .08);
  transform: translateY(110%);
  transition: transform var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui-fo .hsp-ui-sticky-cta.is-visible {
  transform: none;
}

html.hsp-ui-fo .hsp-ui-sticky-cta__price {
  display: grid;
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-sticky-cta__amount {
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-price);
  font-weight: var(--hsp-fw-bold);
  color: var(--hsp-color-text-strong);
  white-space: nowrap;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-sticky-cta__label {
  font-size: var(--hsp-fs-xs);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-sticky-cta .btn {
  flex: none;
  --hsp-ui-btn-h: var(--hsp-fo-control-md);
}

@media (min-width: 1024px) {
  html.hsp-ui-fo .hsp-ui-sticky-cta {
    display: none;
  }
}

@media (max-width: 1023px) {
  html.hsp-ui.hsp-ui-fo #product #columns {
    padding-block-end: calc(var(--hsp-space-16) + 6.4rem);
  }
}