/*
 * Hospitality UI - front office pages, part 1: page chrome (DESIGN_SYSTEM §6.27, §7.2, §9.1 hero, §11.1)
 * Page frame and containers, skip link, header bar (logo, navigation with "More", cart, account, language,
 * click-to-call, menu button), menu drawer, cart dropdown and "added to cart" layer, home hero (photo + text),
 * breadcrumb, footer (lattice band, brand column, modules, copyright), home content sections.
 * Markup: theme header.tpl / footer.tpl, _partials/hsp_footer_brand.tpl and the theme overrides of
 * blocknavigationmenu, blocklanguages, blockcurrencies, blockuserinfo, blockcart, blocksocial, blocknewsletter,
 * hotelreservationsystem (display-nav, headerHotelDescBlock) and wkfooterpaymentblock.
 * The booking bar (#search_hotel_block_form, .header-rmsearch-*) belongs to 20-booking*.css and is not styled here.
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

/* =================================================================== 1. frame */

html.hsp-ui-fo {
  --hsp-ui-gutter: var(--hsp-fo-gutter);
  --hsp-ui-header-h: 6.4rem;
  --hsp-ui-hero-h: 22rem;               /* mobile photo; desktop below */
  --hsp-ui-hero-overlap: 4.8rem;        /* booking card overlaps the photo bottom (§9.1) */
  scroll-padding-block-start: calc(var(--hsp-ui-header-h) + 1.6rem);
}

@media (min-width: 768px) {
  html.hsp-ui-fo { --hsp-ui-gutter: 2.4rem; }
}

@media (min-width: 1024px) {
  html.hsp-ui-fo {
    --hsp-ui-header-h: var(--hsp-fo-header-h);
    --hsp-ui-hero-h: min(72vh, 64rem);
  }
}

@media (min-width: 1280px) {
  html.hsp-ui-fo { --hsp-ui-gutter: 3.2rem; }
}

html.hsp-ui.hsp-ui-fo body {
  background-color: var(--hsp-color-page);
  overflow-x: clip;
}

html.hsp-ui.hsp-ui-fo #page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  background: var(--hsp-color-page);
}

html.hsp-ui.hsp-ui-fo .columns-container {
  flex: 1 0 auto;
  background: transparent;
}

/* Bootstrap fixed container widths -> fluid with a max width (1200 reading, 1320 home / results) */
html.hsp-ui.hsp-ui-fo .container {
  inline-size: 100%;
  max-inline-size: calc(var(--hsp-fo-container) + 2 * var(--hsp-ui-gutter));
  padding-inline: var(--hsp-ui-gutter);
}

html.hsp-ui.hsp-ui-fo :is(#index, #category, #module-hspnilecruise-cruises) .container {
  max-inline-size: calc(var(--hsp-fo-container-wide) + 2 * var(--hsp-ui-gutter));
}

html.hsp-ui.hsp-ui-fo #columns {
  padding-block: var(--hsp-space-6) var(--hsp-space-16);
  outline: none;
}

html.hsp-ui.hsp-ui-fo #index #columns {
  padding-block-start: var(--hsp-space-12);
}

/* skip link (F5): hidden until focused, then a 44px pill at the inline start */
html.hsp-ui-fo .hsp-ui-skip-link {
  position: absolute;
  inset-block-start: var(--hsp-space-2);
  inset-inline-start: var(--hsp-space-2);
  z-index: var(--hsp-z-skiplink);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-inverse);
  background: var(--hsp-color-surface-inverse);
  border-radius: var(--hsp-radius-pill);
  transform: translateY(-200%);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-skip-link:focus,
html.hsp-ui.hsp-ui-fo .hsp-ui-skip-link:focus-visible {
  color: var(--hsp-color-text-inverse);
  text-decoration: none;
  transform: none;
  box-shadow: var(--hsp-focus-ring-inverse);
}

/* =================================================================== 2. header bar (§6.27) */

html.hsp-ui.hsp-ui-fo .header-container {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--hsp-z-fo-header);
  background: transparent;
}

html.hsp-ui.hsp-ui-fo .header-container.hsp-ui-has-hero {
  position: relative;
  z-index: auto;
}

html.hsp-ui.hsp-ui-fo #header {
  z-index: auto;
  background: transparent;
  background-image: none;
}

html.hsp-ui.hsp-ui-fo #header .banner {
  background: transparent;
}

html.hsp-ui.hsp-ui-fo #header .banner:empty,
html.hsp-ui.hsp-ui-fo #header .banner .row:empty {
  display: none;
}

html.hsp-ui.hsp-ui-fo #header .header-top {
  position: relative;
  z-index: var(--hsp-z-fo-header);
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  transition: background-color var(--hsp-dur-base) var(--hsp-ease-standard), box-shadow var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--scrolled .header-top {
  box-shadow: var(--hsp-shadow-2);
}

/* home: transparent over the hero with a top scrim, white after 80px of scroll (JS adds --scrolled) */
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero .header-top {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  color: var(--hsp-color-text-inverse);
  background: transparent;
  border-block-end-color: transparent;
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero .header-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 12rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hsp-color-surface-inverse) 45%, transparent), transparent); /* hsp-lint: allow-physical (gradient direction) */
  transition: opacity var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero.hsp-ui-header--scrolled .header-top,
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero.hsp-ui-header--menu-open .header-top {
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface);
  border-block-end-color: var(--hsp-color-border-subtle);
  box-shadow: var(--hsp-shadow-2);
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero.hsp-ui-header--scrolled .header-top::before {
  opacity: 0;
}

html.hsp-ui.hsp-ui-fo #header .header-top .row {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__inner {
  float: none;
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--hsp-space-4);
  min-block-size: var(--hsp-ui-header-h);
}

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

html.hsp-ui.hsp-ui-fo #header #header_logo {
  flex: none;
  padding: 0;
  float: none;
}

html.hsp-ui.hsp-ui-fo #header #header_logo > a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
  color: inherit;
  text-decoration: none;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #header #header_logo img {
  max-block-size: 4rem;
}

/* the wordmark follows the bar colour */
html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand {
  color: inherit;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand__mark {
  color: var(--hsp-color-brand-accent);
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:not(.hsp-ui-header--scrolled):not(.hsp-ui-header--menu-open) .hsp-ui-brand__mark {
  color: var(--hsp-color-brand-accent-on-dark);
}

/* both logos exist on the hero: light one over the photo, default one once the bar is white */
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:is(.hsp-ui-header--scrolled, .hsp-ui-header--menu-open) .hsp-ui-brand--on-dark .hsp-ui-brand__logo--default {
  display: block;
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:is(.hsp-ui-header--scrolled, .hsp-ui-header--menu-open) .hsp-ui-brand--on-dark:has(.hsp-ui-brand__logo--default) .hsp-ui-brand__logo--inverse {
  display: none;
}

/* logos sit in <picture> (WebP + PNG fallback): the wrapper takes no box, the img keeps the swap rules */
html.hsp-ui.hsp-ui-fo .hsp-ui-brand__pic {
  display: contents;
}

/* the owner's square mark next to the brand name (ROUND2_BRIEF §3, DESIGN_SYSTEM §4.1: mark 40px FO, name 20px/600,
   gap 8px); 36px in the 64px phone bar. A wide wordmark keeps the 40px max height above. */
html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand__logo--mark {
  inline-size: 4rem;
  block-size: 4rem;
  max-inline-size: none;
  max-block-size: none;
  object-fit: contain;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand--lockup {
  gap: var(--hsp-space-2);
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #header .hsp-ui-brand__logo--mark {
    inline-size: 3.6rem;
    block-size: 3.6rem;
  }
}

html.hsp-ui.hsp-ui-fo #header .header-top-menu {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hsp-space-1);
  min-inline-size: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #header .header-top-menu .header-top-item {
  position: relative;
  flex: none;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #header .header-top-link,
html.hsp-ui.hsp-ui-fo #header .hsp-ui-account__btn,
html.hsp-ui.hsp-ui-fo #header .hsp-ui-lang__btn,
html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__call {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  min-inline-size: var(--hsp-touch-min);
  justify-content: center;
  padding-block: 0;
  padding-inline: var(--hsp-space-3);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-pill);
  box-shadow: none;
  transition: background-color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #header :is(.header-top-link, .hsp-ui-account__btn, .hsp-ui-lang__btn, .hsp-ui-header__call):hover,
html.hsp-ui.hsp-ui-fo #header .open > :is(.hsp-ui-account__btn, .hsp-ui-lang__btn) {
  color: inherit;
  background: var(--hsp-color-surface-hover);
  border: 0;
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:not(.hsp-ui-header--scrolled):not(.hsp-ui-header--menu-open) :is(.header-top-link, .hsp-ui-account__btn, .hsp-ui-lang__btn, .hsp-ui-header__call, .shopping_cart > a, .hsp-ui-nav__link, .hsp-ui-nav__more-btn):hover {
  background: color-mix(in srgb, var(--hsp-color-text-inverse) 14%, transparent);
}

html.hsp-ui.hsp-ui-fo #header :is(.header-top-link, .hsp-ui-account__btn, .hsp-ui-lang__btn, .hsp-ui-header__call) i {
  font-size: 1.8rem;
}

html.hsp-ui.hsp-ui-fo #header .caret {
  margin: 0;
  border-block-start-color: currentColor;
}

/* on the transparent hero bar the focus ring is the light one */
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:not(.hsp-ui-header--scrolled):not(.hsp-ui-header--menu-open) .header-top :is(a, button):focus-visible {
  box-shadow: var(--hsp-focus-ring-inverse);
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--solid .header-top :is(a, button):focus-visible,
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--scrolled .header-top :is(a, button):focus-visible {
  box-shadow: var(--hsp-focus-ring);
}

/* ------------------------------------------------------------------ primary navigation (>= 1024) */

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav {
  display: none;
  flex: 1 1 auto;
  min-inline-size: 0;
  margin-inline-end: auto;
  padding-inline-start: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--hsp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__item {
  position: relative;
  flex: none;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__item[hidden] {
  display: none;
}

html.hsp-ui.hsp-ui-fo #header :is(.hsp-ui-nav__link, .hsp-ui-nav__more-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-3);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  line-height: 1.2;
  color: inherit;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-md);
  transition: background-color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #header :is(.hsp-ui-nav__link, .hsp-ui-nav__more-btn):hover {
  color: inherit;
  text-decoration: none;
  background: var(--hsp-color-surface-hover);
}

/* current page: bar under the label (not colour alone) */
html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__link[aria-current="page"] {
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--hsp-space-3);
  inset-block-end: .4rem;
  block-size: 2px;
  background: currentColor;
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__more-btn i {
  font-size: 1.4rem;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-inline-size: 22rem;
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__more.open .hsp-ui-nav__menu {
  display: block;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__menu .hsp-ui-nav__link {
  display: flex;
  inline-size: 100%;
  color: var(--hsp-color-text);
  border-radius: var(--hsp-radius-sm);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav__menu .hsp-ui-nav__link[aria-current="page"]::after {
  inset-inline: auto var(--hsp-space-2);
  inset-block: calc(50% - .3rem) auto;
  inline-size: .6rem;
  block-size: .6rem;
}

@media (min-width: 1024px) {
  html.hsp-ui.hsp-ui-fo #header .hsp-ui-nav {
    display: block;
  }
}

/* ------------------------------------------------------------------ cart icon + dropdown */

html.hsp-ui.hsp-ui-fo #header .shopping_cart {
  position: relative;
  padding: 0;
  float: none;
  inline-size: auto;
}

html.hsp-ui.hsp-ui-fo #header .shopping_cart > a:first-child {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  padding: 0;
  font-size: 2rem;
  font-weight: var(--hsp-fw-regular);
  color: inherit;
  text-shadow: none;
  border-radius: var(--hsp-radius-pill);
  overflow: visible;
  transition: background-color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #header .shopping_cart > a:first-child:hover {
  background: var(--hsp-color-surface-hover);
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo #header .shopping_cart > a:first-child::before {
  color: inherit;
  font-size: 2rem;
  line-height: 1;
}

html.hsp-ui.hsp-ui-fo #header .shopping_cart > a:first-child::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #header .shopping_cart .badge {
  position: absolute;
  inset-block-start: .2rem;
  inset-inline-end: .2rem;
  min-inline-size: 1.8rem;
  block-size: 1.8rem;
  padding-inline: .5rem;
  font-family: var(--hsp-font-num);
  font-size: 1.1rem;
  font-weight: var(--hsp-fw-semibold);
  line-height: 1.8rem;
  color: var(--hsp-color-on-action);
  background: var(--hsp-color-action);
  border: 0;
  border-radius: var(--hsp-radius-pill);
  box-shadow: 0 0 0 2px var(--hsp-color-surface);
}

/* an empty cart shows no "0" badge */
html.hsp-ui.hsp-ui-fo #header .shopping_cart .badge.unvisible,
html.hsp-ui.hsp-ui-fo #header .shopping_cart .badge.ajax_cart_no_product {
  display: none;
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:not(.hsp-ui-header--scrolled):not(.hsp-ui-header--menu-open) .shopping_cart .badge {
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo #header .cart_block {
  position: absolute;
  inset-block-start: calc(100% + var(--hsp-space-2));
  inset-inline-end: 0;
  inset-inline-start: auto;
  z-index: var(--hsp-z-dropdown);
  inline-size: min(40rem, calc(100vw - 2 * var(--hsp-ui-gutter)));
  max-block-size: min(70vh, 64rem);
  overflow-y: auto;
  padding: 0;
  color: var(--hsp-color-text);
  text-align: start;
  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-3);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .block_content {
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block dl.products {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block dt {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr) var(--hsp-touch-min);
  gap: var(--hsp-space-1) var(--hsp-space-3);
  align-items: start;
  padding: var(--hsp-space-4);
  font-weight: var(--hsp-fw-regular);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #header .cart_block dt > div[style*="clear"] {
  display: none;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-images {
  grid-column: 1;
  grid-row: 1;
  float: none;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-images img {
  inline-size: 6.4rem;
  block-size: 4.8rem;
  object-fit: cover;
  border-radius: var(--hsp-radius-sm);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-info {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  overflow: visible;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-info .product-name {
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-info .product-name a {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-info .hotel-name,
html.hsp-ui.hsp-ui-fo #header .cart_block .cart-info-sec {
  margin: 0;
  padding: 0;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-info-sec .product_info_data {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .remove_link {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .remove_link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  color: var(--hsp-color-text-secondary);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .remove_link a:hover {
  color: var(--hsp-color-text-error);
  background: var(--hsp-tone-danger-bg);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart_prod_cont {
  grid-column: 1 / -1;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart_prod_cont .table {
  margin: 0;
  font-size: var(--hsp-fs-sm);
  background: transparent;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart_prod_cont .table :is(th, td) {
  padding-block: var(--hsp-space-2);
  padding-inline: var(--hsp-space-2);
  text-align: start;
  border: 0;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart_prod_cont .table th {
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-muted);
  background: transparent;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart_prod_cont .table tr:last-child td {
  border-block-end: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart_block_no_products {
  padding: var(--hsp-space-5);
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-prices {
  padding: var(--hsp-space-3) var(--hsp-space-4);
  font-weight: var(--hsp-fw-regular);
  background: var(--hsp-color-surface-sunken);
  border: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-prices .cart-prices-line {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--hsp-space-3);
  padding-block: var(--hsp-space-1);
  font-size: var(--hsp-fs-sm);
  border: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-prices .cart-prices-line .price {
  float: none;
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-prices .cart-prices-line.last-line {
  margin-block-start: var(--hsp-space-1);
  padding-block-start: var(--hsp-space-2);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-prices .cart-prices-line.last-line .price {
  font-size: var(--hsp-fs-h4);
  font-weight: var(--hsp-fw-bold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-buttons {
  margin: 0;
  padding: var(--hsp-space-3) var(--hsp-space-4) var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-buttons a#button_order_cart {
  --hsp-ui-btn-h: var(--hsp-fo-control-md);
  --hsp-ui-btn-bg: var(--hsp-color-action);
  --hsp-ui-btn-fg: var(--hsp-color-on-action);
  --hsp-ui-btn-bd: var(--hsp-color-action);
  --hsp-ui-btn-bg-hover: var(--hsp-color-action-hover);
  --hsp-ui-btn-fg-hover: var(--hsp-color-on-action);
  --hsp-ui-btn-bd-hover: var(--hsp-color-action-hover);
  --hsp-ui-btn-bg-active: var(--hsp-color-action-active);
  display: flex;
  float: none;
  inline-size: 100%;
  margin: 0;
}

/* blockcart.css paints the inner span blue (id selector): the anchor is the button, the span only carries the label */
html.hsp-ui.hsp-ui-fo #header .cart_block .cart-buttons a#button_order_cart span,
html.hsp-ui.hsp-ui-fo #header .cart_block .cart-buttons a#button_order_cart:hover span {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-info-sec .product_info_label {
  margin-inline-end: var(--hsp-space-1);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

/* the "added to cart" layer (§6.22): a calm card, one primary action */
html.hsp-ui.hsp-ui-fo #layer_cart {
  z-index: var(--hsp-z-modal);
  max-inline-size: min(88rem, calc(100vw - 2 * var(--hsp-ui-gutter)));
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: 0;
  border-radius: var(--hsp-radius-xl);
  box-shadow: var(--hsp-shadow-4);
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo #layer_cart :is(.layer_cart_product, .layer_cart_cart) {
  padding: var(--hsp-space-6);
  background: var(--hsp-color-surface);
  border: 0;
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_cart {
  background: var(--hsp-color-surface-sunken);
}

html.hsp-ui.hsp-ui-fo #layer_cart h2 {
  margin-block: 0 var(--hsp-space-4);
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_product h2 i {
  margin-inline-end: var(--hsp-space-2);
  color: var(--hsp-tone-success-fg);
}

html.hsp-ui.hsp-ui-fo #layer_cart .cross {
  inset-block-start: var(--hsp-space-2);
  /* the theme sets right (global.css) and rtl.css adds left: clear the start side so RTL does not keep both */
  inset-inline-start: auto;
  inset-inline-end: var(--hsp-space-2);
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #layer_cart :is(strong.dark, .layer_cart_row strong) {
  display: inline;
  padding: 0;
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  padding-block-start: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .layer_cart_overlay {
  background: var(--hsp-color-backdrop);
  opacity: 1;
}

/* ------------------------------------------------------------------ account, language, call, menu button */

html.hsp-ui.hsp-ui-fo #header .hsp-ui-account__name {
  max-inline-size: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-account .dropdown-menu,
html.hsp-ui.hsp-ui-fo #header .hsp-ui-lang .dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-inline-size: 22rem;
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-account .dropdown-menu > li > a i {
  inline-size: 1.8rem;
  color: var(--hsp-color-text-muted);
  text-align: center;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__utility {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-1);
  padding: 0;
  color: inherit;
  background: transparent;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__utility nav {
  display: contents;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-lang {
  position: relative;
  float: none;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-lang__name {
  display: none;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-lang__code {
  font-family: var(--hsp-font-num);
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-lang__menu > li > a {
  justify-content: space-between;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-lang__menu > li.active > a {
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-lang__menu > li > a i {
  color: var(--hsp-color-action);
}

/* below 1024: language in the drawer, click-to-call icon in the bar; >= 1024 the opposite */
html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__utility .hsp-ui-lang {
  display: none;
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__toggle:hover {
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__toggle .icon-bar {
  display: block;
  inline-size: 2rem;
  block-size: 2px;
  margin: 0;
  background-color: currentColor;
  border-radius: var(--hsp-radius-pill);
}

@media (min-width: 1024px) {
  html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__utility .hsp-ui-lang {
    display: block;
  }

  html.hsp-ui.hsp-ui-fo #header :is(.hsp-ui-header__call, .hsp-ui-header__toggle-item) {
    display: none;
  }
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #header .hsp-ui-header__inner {
    gap: var(--hsp-space-2);
  }

  html.hsp-ui.hsp-ui-fo #header .header-top-menu {
    gap: 0;
  }

  html.hsp-ui.hsp-ui-fo #header .hsp-ui-account__label {
    display: none;
  }
}

/* ------------------------------------------------------------------ menu drawer (< 1024) */

html.hsp-ui.hsp-ui-fo #menu_cont {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  z-index: var(--hsp-z-drawer);
  display: flex;
  flex-direction: column;
  inline-size: min(34rem, 88vw);
  padding: 0;
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  box-shadow: var(--hsp-shadow-4);
  overflow: hidden;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--hsp-dur-slow) var(--hsp-ease-exit), visibility 0s linear var(--hsp-dur-slow);
}

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

html.hsp-ui.hsp-ui-fo[dir="rtl"] #menu_cont,
html.hsp-ui.hsp-ui-fo[dir="rtl"] #menu_cont.menu_cont_right {
  transform: translateX(-100%);
}

html.hsp-ui.hsp-ui-fo[dir="rtl"] #menu_cont.menu_cont_left {
  transform: none;
}

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__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-5) var(--hsp-space-2);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__title {
  font-size: var(--hsp-fs-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #menu_cont .close_navbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  padding: 0;
  float: none;
  font-size: 2rem;
  color: var(--hsp-color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #menu_cont .close_navbar:hover {
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--hsp-space-2) var(--hsp-space-8);
}

html.hsp-ui.hsp-ui-fo #menu_cont .wk-nav-style {
  display: block;
  margin: 0;
  padding-block: var(--hsp-space-2);
  padding-inline: var(--hsp-space-2);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #menu_cont .wk-nav-style > li {
  float: none;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #menu_cont .wk-nav-style > li > a {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-3);
  min-block-size: var(--hsp-fo-control-md);
  padding-block: 0;
  padding-inline: var(--hsp-space-3);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text);
  background: transparent;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #menu_cont .wk-nav-style > li > a:hover {
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface-hover);
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo #menu_cont .wk-nav-style > li > a[aria-current="page"] {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
}

html.hsp-ui.hsp-ui-fo #menu_cont .wk-nav-style > li > a i {
  inline-size: 2rem;
  font-size: 1.8rem;
  color: var(--hsp-color-text-muted);
  text-align: center;
}

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__section {
  padding: var(--hsp-space-4) var(--hsp-space-5);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

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

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

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-4);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text);
  text-decoration: none;
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__lang:hover {
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo #menu_cont .hsp-ui-drawer__lang.is-current {
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
  border-color: var(--hsp-color-border-selected);
}

/* the old visible-xs popups are not used (languages / currencies are listed in the drawer) */
html.hsp-ui.hsp-ui-fo #menu_cont :is(#language-selector-popup, #currency-selector-popup) {
  display: none;
}

html.hsp-ui-fo .hsp-ui-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--hsp-z-drawer) - 1);
  background: var(--hsp-color-backdrop);
  opacity: 0;
  transition: opacity var(--hsp-dur-slow) var(--hsp-ease-standard);
}

html.hsp-ui-fo .hsp-ui-drawer-backdrop.is-visible {
  opacity: 1;
}

/* #menu_cont and its backdrop (its previous sibling, see 30-pages-10-chrome.js) live inside the header bar,
   whose stacking context (sticky container / fixed hero bar, z 1020) would keep them under later page layers.
   While the drawer is open the header contexts move above the drawer layer, so inside them the order is
   bar content < backdrop (1034) < drawer (1035) and nothing on the page covers the drawer. */
html.hsp-ui.hsp-ui-fo.hsp-ui-menu-open .header-container,
html.hsp-ui.hsp-ui-fo.hsp-ui-menu-open #header .header-top {
  z-index: calc(var(--hsp-z-drawer) + 1);
}

html.hsp-ui-fo.hsp-ui-scroll-lock,
html.hsp-ui-fo.hsp-ui-scroll-lock body {
  overflow: hidden;
}

@media (min-width: 1024px) {
  html.hsp-ui.hsp-ui-fo #menu_cont,
  html.hsp-ui-fo .hsp-ui-drawer-backdrop {
    display: none;
  }
}

/* =================================================================== 3. home hero (§9.1) */

/* the photo is its own element under the (transparent) bar; the hero text block below reserves its height.
   Contract with 20-booking: the booking card follows .header-desc-container in the flow and may pull itself up
   by var(--hsp-ui-hero-overlap); the fallback below only replaces the vendor absolute positioning. */
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero {
  position: relative;
  display: flow-root;
  block-size: auto;
  min-block-size: 0;
}

html.hsp-ui-fo .hsp-ui-hero__media {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--hsp-ui-hero-h);
  overflow: hidden;
  background-color: var(--hsp-basalt-900);
}

html.hsp-ui-fo .hsp-ui-hero__img {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  object-fit: cover;
}

html.hsp-ui.hsp-ui-fo #index .header-desc-container {
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  min-block-size: var(--hsp-ui-hero-h);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #index .header-desc-container .header-desc-wrapper,
html.hsp-ui.hsp-ui-fo #index .header-desc-container .header-desc-primary {
  display: block;
  block-size: auto;
  inline-size: auto;
  text-align: start;
  color: inherit;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-hero__text {
  padding-block: calc(var(--hsp-ui-hero-h) + var(--hsp-space-6)) var(--hsp-space-4);
  max-inline-size: 64rem;
}

html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__overline {
  margin: 0 0 var(--hsp-space-2);
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  font-weight: var(--hsp-fw-semibold);
  letter-spacing: var(--hsp-ls-overline);
  color: var(--hsp-color-text-brand);
}

html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__title {
  margin: 0;
  font-size: var(--hsp-fs-h1);
  line-height: var(--hsp-lh-h1);
  font-weight: var(--hsp-fw-bold);
  letter-spacing: var(--hsp-ls-heading);
  color: var(--hsp-color-text-strong);
  text-shadow: none;
  overflow-wrap: anywhere;
}

html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__subtitle {
  margin: var(--hsp-space-2) 0 0;
  max-inline-size: 40ch;
  font-size: var(--hsp-fs-body-lg);
  line-height: var(--hsp-lh-body-lg);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #index .header-desc-container hr {
  display: none;
}

/* booking card fallback position: in the flow after the hero text (zero specificity, 20-booking wins) */
:where(html.hsp-ui-fo #index) .header-rmsearch-container {
  position: relative;
  inset: auto;
}

@media (min-width: 768px) {
  :where(html.hsp-ui-fo #index) .header-rmsearch-container {
    margin-block-start: calc(-1 * var(--hsp-ui-hero-overlap));
  }
}

@media (min-width: 768px) {
  /* text on the photo, bottom-start, on the scrim (white on scrim >= 5.31:1) */
  html.hsp-ui.hsp-ui-fo #index .header-desc-container {
    display: flex;
    align-items: flex-end;
    color: var(--hsp-color-text-inverse);
  }

  html.hsp-ui.hsp-ui-fo #index .header-desc-container .header-desc-wrapper {
    inline-size: 100%;
  }

  html.hsp-ui-fo .hsp-ui-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--hsp-color-hero-scrim) 0%, var(--hsp-color-hero-scrim) 35%, transparent 75%); /* hsp-lint: allow-physical (gradient direction) */
  }

  html.hsp-ui.hsp-ui-fo #index .hsp-ui-hero__text {
    padding-block: calc(var(--hsp-ui-header-h) + var(--hsp-space-8)) calc(var(--hsp-ui-hero-overlap) + var(--hsp-space-10));
  }

  html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__overline {
    color: var(--hsp-color-text-inverse);
  }

  html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__title {
    font-size: var(--hsp-fs-display);
    line-height: var(--hsp-lh-display);
    color: var(--hsp-color-text-inverse);
  }

  html.hsp-ui.hsp-ui-fo #index .header-desc-container .hsp-ui-hero__subtitle {
    color: var(--hsp-color-text-inverse);
  }
}

/* the theme styles every <header> element (white background, z-index 1); in-page headers are plain blocks */
html.hsp-ui.hsp-ui-fo :where(#columns) header {
  position: static;
  z-index: auto;
  background: transparent;
}

/* =================================================================== 4. breadcrumb (§6.26) */

html.hsp-ui.hsp-ui-fo .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-1);
  margin-block: 0 var(--hsp-space-4);
  padding: 0;
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-regular);
  line-height: var(--hsp-lh-xs);
  color: var(--hsp-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

html.hsp-ui.hsp-ui-fo .breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-block-size: 3.2rem;
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: var(--hsp-color-text-link);
  background: transparent;
}

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

html.hsp-ui.hsp-ui-fo .breadcrumb a.home {
  inline-size: auto;
  font-size: 1.6rem;
  color: var(--hsp-color-text-link);
}

html.hsp-ui.hsp-ui-fo .breadcrumb .navigation-pipe {
  inline-size: auto;
  text-indent: 0;
  color: var(--hsp-color-text-muted);
}

/* =================================================================== 5. footer (§6.27) */

html.hsp-ui.hsp-ui-fo .footer-container {
  position: relative;
  margin-block-start: auto;
  padding: 0;
  color: var(--hsp-color-text-inverse-secondary);
  background: var(--hsp-color-surface-inverse);
}

html.hsp-ui-fo .hsp-ui-footer__band {
  block-size: 2.4rem;
  background-color: var(--hsp-color-brand-accent-on-dark);
  opacity: .1;
  -webkit-mask-image: url("../../img/lattice.svg");
  mask-image: url("../../img/lattice.svg");
  -webkit-mask-size: 2.4rem 2.4rem;
  mask-size: 2.4rem 2.4rem;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer {
  padding-block: var(--hsp-space-10) var(--hsp-space-6);
  color: inherit;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hsp-space-8);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid::before,
html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid::after {
  content: none;
}

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

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid .row {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid section,
html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid nav.col-xs-12 {
  float: none;
  inline-size: auto;
  padding: 0;
}

@media (min-width: 768px) {
  html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  /* brand column with the language menu under it, then payments, newsletter and the explore links */
  html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--hsp-space-8);
    row-gap: var(--hsp-space-5);
  }

  html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__brand {
    grid-column: 1;
    grid-row: 1;
  }

  html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid > :has(> .languages-block-wrap) {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid > [class*="col-"]:not(:has(> .languages-block-wrap)) {
    grid-row: 1 / span 2;
  }
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-section-heading {
  margin: 0 0 var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-section-heading :is(p, .footer-section-heading__title) {
  margin: 0;
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-inverse);
  text-transform: none;
  letter-spacing: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-section-heading hr {
  display: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer a {
  color: var(--hsp-color-text-inverse-secondary);
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer a:hover {
  color: var(--hsp-color-text-inverse);
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__logo {
  display: inline-flex;
  min-block-size: var(--hsp-touch-min);
  align-items: center;
  color: var(--hsp-color-text-inverse);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__logo:hover {
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__logo .hsp-ui-brand {
  color: var(--hsp-color-text-inverse);
}

/* footer lockup: a larger mark on the dark brand surface, name in white */
html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__logo .hsp-ui-brand__logo--mark {
  inline-size: 5.6rem;
  block-size: 5.6rem;
  max-inline-size: none;
  max-block-size: none;
  object-fit: contain;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__logo .hsp-ui-brand--lockup {
  gap: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__tagline {
  margin: var(--hsp-space-3) 0 var(--hsp-space-4);
  max-inline-size: 36ch;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text-inverse-secondary);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__contact {
  display: grid;
  gap: var(--hsp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--hsp-fs-sm);
}

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

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__contact i {
  inline-size: 1.8rem;
  font-size: 1.6rem;
  color: var(--hsp-color-text-inverse-muted);
  text-align: center;
}

/* explore links: 44px targets */
html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-navigation-section {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-navigation-section .item {
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-navigation-section .item a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-inverse-secondary);
  text-transform: none;
}

/* social icons: 44px, named (the label is visually hidden, not display:none) */
html.hsp-ui.hsp-ui-fo .footer-container #footer #social_block ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  float: none;
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #social_block ul li {
  float: none;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #social_block ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  font-size: 1.8rem;
  color: var(--hsp-color-text-inverse-secondary);
  background: transparent;
  border: var(--hsp-border-w) solid color-mix(in srgb, var(--hsp-color-text-inverse) 30%, transparent);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #social_block ul li a:hover {
  color: var(--hsp-color-text-inverse);
  border-color: var(--hsp-color-text-inverse);
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #social_block ul li a::before {
  vertical-align: middle;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #social_block ul li a span {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  display: block;
}

/* language (+ currency) switcher in the footer: endonym button on dark */
html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-lang {
  display: inline-block;
  margin-block-start: var(--hsp-space-4);
  margin-inline-end: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-4);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-inverse);
  background: transparent;
  border: var(--hsp-border-w) solid color-mix(in srgb, var(--hsp-color-text-inverse) 30%, transparent);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-lang__btn:hover {
  border-color: var(--hsp-color-text-inverse);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-lang__code {
  display: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-currency .hsp-ui-lang__code {
  display: inline;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-lang .caret {
  border-block-start-color: currentColor;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-lang .dropdown-menu {
  inset-block: auto 100%;
  inset-inline-start: 0;
  margin-block: 0 var(--hsp-space-1);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-lang .dropdown-menu a {
  color: var(--hsp-color-text);
  text-decoration: none;
}

/* payment marks: equal tiles with their names as alt text */
html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .footer-payment-block img {
  display: block;
  inline-size: 5.6rem;
  block-size: 3.6rem;
  margin: 0;
  object-fit: contain;
  background: var(--hsp-color-surface);
  border-radius: var(--hsp-radius-sm);
}

/* newsletter */
html.hsp-ui.hsp-ui-fo .footer-container #footer #blocknewsletter .form-group {
  display: grid;
  gap: var(--hsp-space-2);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__label {
  margin: 0;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-inverse-secondary);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #blocknewsletter .newsletter-input {
  inline-size: 100%;
  block-size: var(--hsp-fo-control-md);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border-color: var(--hsp-color-surface);
}

html.hsp-ui.hsp-ui-fo[dir="rtl"] .footer-container #footer #blocknewsletter .newsletter-input {
  text-align: right;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #blocknewsletter .newsletter-input:focus {
  box-shadow: var(--hsp-focus-ring-inverse);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #blocknewsletter .newsletter-btn {
  justify-self: start;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer #blocknewsletter .message-block {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-inverse);
}

html.hsp-ui.hsp-ui-fo .footer-container #footer :is(a, button, input):focus-visible {
  box-shadow: var(--hsp-focus-ring-inverse);
}

/* copyright row */
html.hsp-ui.hsp-ui-fo .footer-container .copyRightWrapper {
  margin: 0;
  padding-block: var(--hsp-space-5);
  padding-inline: var(--hsp-ui-gutter);
  background: transparent;
  border-block-start: var(--hsp-border-w) solid color-mix(in srgb, var(--hsp-color-text-inverse) 10%, transparent);
}

html.hsp-ui.hsp-ui-fo .footer-container .copyRight {
  max-inline-size: var(--hsp-fo-container);
  margin: 0 auto;
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  color: var(--hsp-color-text-inverse-muted);
  text-align: start;
}

html.hsp-ui.hsp-ui-fo .footer-container .copyRight a {
  color: var(--hsp-color-text-inverse-secondary);
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo .footer-container .copyRight a:hover {
  color: var(--hsp-color-text-inverse);
  text-decoration: underline;
}

/* =================================================================== 6. home content sections (§9.1, sentence case, calm cards) */

html.hsp-ui.hsp-ui-fo #index .home_block_container {
  margin-block-end: var(--hsp-space-12);
  padding-block: 0;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #index :is(.home_block_heading, .home_block_container h2, .hotel-rooms-heading) {
  font-size: var(--hsp-fs-h2);
  line-height: var(--hsp-lh-h2);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #index .home_block_container :is(.home_block_description, .home_block_desc) {
  max-inline-size: var(--hsp-measure);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #index .home_block_container hr {
  display: none;
}

@media (min-width: 1024px) {
  html.hsp-ui.hsp-ui-fo #index .home_block_container {
    margin-block-end: var(--hsp-space-20);
  }
}

/* round 2 (ui-polish-fo-pages): section headings and intros start at the grid edge (they were centred in an
   offset 8-column box while the cards ran full width) */
html.hsp-ui.hsp-ui-fo #index .home_block_desc_wrapper {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #index .home_block_desc_wrapper > [class*="col-"] {
  float: none;
  inline-size: 100%;
  max-inline-size: 72rem;
  margin-inline: 0;
  padding-inline: 0;
  text-align: start;
}

html.hsp-ui.hsp-ui-fo #index .home_block_heading {
  margin: 0 0 var(--hsp-space-2);
}

/* amenities (wkhotelfeaturesblock): one grid of equal-height cards inside the container */
html.hsp-ui.hsp-ui-fo #index .hsp-ui-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  align-items: stretch;
  gap: var(--hsp-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-amenities__item {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  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 #index .hsp-ui-amenities__media {
  aspect-ratio: 16 / 10;
  background: var(--hsp-color-surface-muted);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-amenities__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-amenities__body {
  flex: 1 1 auto;
  padding: var(--hsp-space-4) var(--hsp-space-5) var(--hsp-space-5);
  text-align: start;
}

html.hsp-ui.hsp-ui-fo #index .amenity_heading {
  margin: 0 0 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;
}

html.hsp-ui.hsp-ui-fo #index .amenity_description {
  margin: 0;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

/* our rooms (wkhotelroom): DS FO cards: image 4:3, h3 title link (stretched over the card), 2-line description at
   400, "From US$ … / night", "View room" secondary */
html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  inline-size: 100%;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  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);
  transition: box-shadow var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard:hover {
  box-shadow: var(--hsp-shadow-2);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--hsp-color-surface-muted);
}

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

/* the vendor CSS lays the text panel over the photo (absolute, 80% white): a normal card body instead */
html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard .hotelRoomDescContainer.hsp-ui-roomcard__body {
  position: static;
  z-index: auto;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--hsp-space-2);
  padding: var(--hsp-space-4) var(--hsp-space-5) var(--hsp-space-5);
  background: var(--hsp-color-surface);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__title {
  margin: 0;
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__title a {
  color: var(--hsp-color-text-strong);
  text-decoration: none;
}

/* stretched link: the whole card opens the room; the CTA stays a separate target above it */
html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__title a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard:has(.hsp-ui-roomcard__title a:focus-visible) {
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin: 0;
  overflow: hidden;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-3);
  margin-block-start: auto;
  padding-block-start: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__price {
  margin: 0;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__amount {
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-price-md);
  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 #index .hsp-ui-roomcard .room_type_old_price {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
  text-decoration: line-through;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard__cta {
  position: relative;
  z-index: var(--hsp-z-raised, 1);
  margin: 0;
}

/* one responsive grid for all room cards (the vendor markup groups them two by two in .row wrappers), start-aligned
   with the section heading like the amenities grid above: 1 column on phones, 2 from 600px, 4 from 1280px.
   The pair wrappers are flattened with display: contents; their Bootstrap clearfix pseudo-elements
   (::before / ::after, content " ") would otherwise become empty grid items and push the cards into the middle
   columns (round 2 QA: 2 x 2 cards centred between x 395 and 1045 at 1440). */
html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content > [class*="col-"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hsp-space-6);
  float: none;
  inline-size: 100%;
  padding-inline: 0;
}

html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content > [class*="col-"] > .row {
  display: contents;
}

html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content > [class*="col-"] > .row::before,
html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content > [class*="col-"] > .row::after {
  content: none;
  display: none;
}

@media (min-width: 600px) {
  html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content > [class*="col-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content > [class*="col-"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

html.hsp-ui.hsp-ui-fo #index #hotelRoomsBlock .home_block_content .row > [class*="col-"] {
  display: flex;
  float: none;
  inline-size: auto;
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #index .hsp-ui-roomcard .wk_roomType_price_type {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  text-transform: none;
}

/* explore the interiors: the gallery items are links now */
html.hsp-ui.hsp-ui-fo #index a.interiorbox {
  display: block;
  color: inherit;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #index a.interiorbox:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #index .owl-carousel :is(.owl-prev, .owl-next) {
  min-inline-size: var(--hsp-touch-min);
  min-block-size: var(--hsp-touch-min);
}

html.hsp-ui.hsp-ui-fo #index .owl-carousel :is(.owl-prev, .owl-next):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

/* testimonials (wktestimonialblock): the quote reads as body text (it was pale grey, below AA) */
html.hsp-ui.hsp-ui-fo #index .testimonialContentText {
  font-size: var(--hsp-fs-body-lg);
  line-height: var(--hsp-lh-body-lg);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #index .testimonialPersonName {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

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

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

/* home header over the hero photo: the bar area is dark enough in the worst case (a light sky), never below .62 alpha
   across the 72px bar; the brand's hero overlay setting adds on top. Nav text and icons get a shadow guard. */
html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero .header-top::before {
  block-size: 13rem;
  background:
    linear-gradient(to bottom, var(--hsp-color-hero-scrim) 0, transparent 13rem), /* hsp-lint: allow-physical (gradient direction) */
    linear-gradient(to bottom, color-mix(in srgb, var(--hsp-color-surface-inverse) 72%, transparent) 0, color-mix(in srgb, var(--hsp-color-surface-inverse) 62%, transparent) 7.2rem, transparent 12rem); /* hsp-lint: allow-physical (gradient direction) */
}

html.hsp-ui.hsp-ui-fo #header.hsp-ui-header--hero:not(.hsp-ui-header--scrolled):not(.hsp-ui-header--menu-open) .header-top :is(a, button, .hsp-ui-brand, .hsp-ui-brand__name, i) {
  text-shadow: 0 1px 2px color-mix(in srgb, var(--hsp-color-surface-inverse) 60%, transparent);
}

/* phones: the site header stays at the top; the sticky search summary sits under it (it covered the header) */
html.hsp-ui.hsp-ui-fo .hsp-ui-summarybar:not(.hsp-ui-summarybar--results) /* hsp-lint: allow-shared-block (header offset, §6.27) */ {
  inset-block-start: var(--hsp-ui-header-h);
  z-index: calc(var(--hsp-z-fo-header) - 1);
}

/* breadcrumb separators: an icon glyph that points in the reading direction (the ">" text pointed backwards in
   Arabic); the configured pipe character stays in the DOM for screen readers' continuity */
html.hsp-ui.hsp-ui-fo .breadcrumb .navigation-pipe {
  display: inline-flex;
  align-items: center;
  font-size: 0;
}

html.hsp-ui.hsp-ui-fo .breadcrumb .navigation-pipe::before {
  content: "\f105";
  font-family: "FontAwesome";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo[dir="rtl"] .breadcrumb .navigation-pipe::before {
  content: "\f104";
}

/* footer contact links and the copyright link: real 44px targets (the list item was 44px, the link 21px) */
html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__contact li > a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
}

html.hsp-ui.hsp-ui-fo .footer-container .copyRight a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
}

/* footer: visible focus also in forced colours (the box-shadow ring alone disappears there) */
html.hsp-ui.hsp-ui-fo .footer-container :is(a, button, input, summary):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--hsp-focus-ring-inverse);
}

/* newsletter: readable placeholder (the theme's ID rule painted it #BFBFBF, 1.87:1) and the consent line */
html.hsp-ui.hsp-ui-fo #footer #blocknewsletter .newsletter-input::placeholder {
  color: var(--hsp-color-text-muted);
  opacity: 1;
}

html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__consent {
  margin: 0;
  max-inline-size: 36ch;
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  color: var(--hsp-color-text-inverse-secondary);
}

/* bottom row: copyright at the start, the enabled payment methods (monochrome icon + name) at the end */
html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-3) var(--hsp-space-6);
  padding-block: var(--hsp-space-4);
  border-block-start: var(--hsp-border-w) solid color-mix(in srgb, var(--hsp-color-text-inverse) 10%, transparent);
}

html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__bottom::before,
html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__bottom::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__bottom .copyRightWrapper {
  flex: 1 1 24rem;
  inline-size: auto;
  padding: 0;
  border: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__bottom .copyRight {
  max-inline-size: none;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-2) var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__pay-title {
  margin: 0;
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-inverse-muted);
  text-transform: none;
}

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

html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__pay-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: 3.2rem;
  padding-inline: var(--hsp-space-3);
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-inverse-secondary);
  border: var(--hsp-border-w) solid color-mix(in srgb, var(--hsp-color-text-inverse) 25%, transparent);
  border-radius: var(--hsp-radius-sm);
}

html.hsp-ui.hsp-ui-fo .footer-container .hsp-ui-footer__pay-list i {
  font-size: 1.4rem;
  color: var(--hsp-color-text-inverse-muted);
}

@media (min-width: 1024px) {
  /* brand (+ language) column, newsletter, explore: the payments column moved to the bottom row */
  html.hsp-ui.hsp-ui-fo .footer-container #footer .hsp-ui-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  }
}

/* CMS pages (About us, legal notice, …): FO body typography (was 16px on 18px lines with underlined headings) */
html.hsp-ui.hsp-ui-fo #cms :is(.rte, #center_column .rte) {
  max-inline-size: var(--hsp-measure);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #cms .rte :is(p, li) {
  font-size: inherit;
  line-height: inherit;
}

html.hsp-ui.hsp-ui-fo #cms .rte :is(h1, h2, h3, h4) {
  margin-block: var(--hsp-space-6) var(--hsp-space-2);
  padding: 0;
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-transform: none;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #cms .rte h1 {
  font-size: var(--hsp-fs-h1);
  line-height: var(--hsp-lh-h1);
}

html.hsp-ui.hsp-ui-fo #cms .rte h2 {
  font-size: var(--hsp-fs-h2);
  line-height: var(--hsp-lh-h2);
}

html.hsp-ui.hsp-ui-fo #cms .rte h3 {
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
}

html.hsp-ui.hsp-ui-fo #cms .rte :is(h1, h2, h3, h4)::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #cms .rte img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--hsp-radius-md);
}

/* contact page: the page title added to contact-form.tpl */
html.hsp-ui.hsp-ui-fo #contact .hsp-ui-page-title {
  margin: 0 0 var(--hsp-space-5);
  font-size: var(--hsp-fs-h1);
  line-height: var(--hsp-lh-h1);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

/* ------------------------------------------------------------------ round 2: cart dropdown and "added to cart" drawer */

/* forward chevrons on CTAs: theme rtl.css already swaps the glyph, so the base mirror would flip it back (§10.4) */
html.hsp-ui.hsp-ui-fo[dir="rtl"] :is(.hsp-ui-cta-chevron)::before {
  transform: none;
}

html.hsp-ui.hsp-ui-fo :is(#header .cart_block, #layer_cart) :is(h2, h3, p, span, strong, a, button, td, th, dt, dd) {
  font-family: var(--hsp-font);
}

html.hsp-ui.hsp-ui-fo :is(#header .cart_block, #layer_cart) :is(.price, .ajax_block_cart_total, .ajax_block_room_total, .ajax_cart_quantity) {
  font-family: var(--hsp-font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

html.hsp-ui.hsp-ui-fo #header .cart_block .cart-buttons a#button_order_cart span {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
}

/* phones: the cart summary opens as a sheet inside the viewport (it overflowed at the inline start) */
@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #header .cart_block {
    position: fixed;
    inset-block-start: calc(var(--hsp-ui-header-h) + var(--hsp-space-2));
    inset-inline: var(--hsp-space-4);
    inline-size: auto;
    max-block-size: calc(100vh - var(--hsp-ui-header-h) - var(--hsp-space-6));
  }
}

/* the layer: a drawer from the inline end, full height, sticky actions (§6.22) */
html.hsp-ui.hsp-ui-fo #layer_cart {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  inline-size: min(44rem, 100vw);
  max-inline-size: 100vw;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0;
  border-start-start-radius: var(--hsp-radius-xl);
  border-end-start-radius: var(--hsp-radius-xl);
}

html.hsp-ui.hsp-ui-fo #layer_cart:focus {
  outline: 2px solid transparent;
}

html.hsp-ui.hsp-ui-fo #layer_cart > .clearfix {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
}

html.hsp-ui.hsp-ui-fo #layer_cart > .clearfix::before,
html.hsp-ui.hsp-ui-fo #layer_cart > .clearfix::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #layer_cart :is(.layer_cart_product, .layer_cart_cart) {
  float: none;
  inline-size: 100%;
  min-block-size: 0;
  padding: var(--hsp-space-5) var(--hsp-space-6);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_product {
  position: relative;
  padding-block-start: var(--hsp-space-6);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_cart {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

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

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_product h2 {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  padding-inline-end: var(--hsp-space-10);
}

html.hsp-ui.hsp-ui-fo #layer_cart .cross {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #layer_cart .cross:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_img {
  float: none;
  margin: 0 0 var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_img img {
  inline-size: 100%;
  max-inline-size: none;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--hsp-radius-md);
}

/* phones: a compact photo and tighter padding keep the total above the sticky actions (it hid under them in ar) */
@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_img {
    max-inline-size: 7rem;
    margin-block-end: var(--hsp-space-3);
  }

  html.hsp-ui.hsp-ui-fo #layer_cart :is(.layer_cart_product, .layer_cart_cart) {
    padding: var(--hsp-space-4) var(--hsp-space-5);
  }
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_product_info {
  display: grid;
  gap: var(--hsp-space-2);
  padding: 0;
  float: none;
}

html.hsp-ui.hsp-ui-fo #layer_cart #layer_cart_product_title {
  display: block;
  margin-block-end: var(--hsp-space-1);
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

/* label above value, no " - " separators */
html.hsp-ui.hsp-ui-fo #layer_cart .hsp-ui-layer__fact {
  display: grid;
  gap: .2rem;
  padding-block: var(--hsp-space-2);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #layer_cart .hsp-ui-layer__fact:not(:has(> span:not(:empty))) {
  display: none;
}

html.hsp-ui.hsp-ui-fo #layer_cart .hsp-ui-layer__fact > strong.dark {
  display: block;
  margin-block-end: .2rem;
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #layer_cart .hsp-ui-layer__fact > span {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_cart h2 {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--hsp-space-3);
  padding-block: var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_row > span {
  float: none;
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #layer_cart .layer_cart_row:has(.ajax_block_cart_total) {
  margin-block-start: var(--hsp-space-2);
  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 #layer_cart .ajax_block_cart_total {
  font-size: var(--hsp-fs-price-md);
  font-weight: var(--hsp-fw-bold);
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container {
  position: sticky;
  inset-block-end: 0;
  flex-direction: column-reverse;
  margin-block-start: auto;
  padding-block: var(--hsp-space-4) var(--hsp-space-2);
  background: var(--hsp-color-surface-sunken);
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container :is(.btn, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hsp-space-2);
  inline-size: 100%;
  min-block-size: var(--hsp-fo-control-md);
  margin: 0;
  padding-inline: var(--hsp-space-6);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container :is(.btn, .button) > span {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container .hsp-ui-layer__checkout {
  min-block-size: var(--hsp-fo-control-lg);
  color: var(--hsp-color-on-action);
  background: var(--hsp-color-action);
  border: var(--hsp-border-w) solid var(--hsp-color-action);
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container .hsp-ui-layer__checkout:hover {
  background: var(--hsp-color-action-hover);
  border-color: var(--hsp-color-action-hover);
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container .hsp-ui-layer__continue {
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
}

html.hsp-ui.hsp-ui-fo #layer_cart .button-container :is(.btn, .button):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #layer_cart .crossseling:empty {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.hsp-ui.hsp-ui-fo #layer_cart {
    animation: hsp-ui-drawer-in var(--hsp-dur-base) var(--hsp-ease-standard);
  }

  @keyframes hsp-ui-drawer-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* =================================================================== 7. print */

@media print {
  html.hsp-ui.hsp-ui-fo :is(.header-container, .footer-container, #menu_cont, .hsp-ui-skip-link, .hsp-ui-drawer-backdrop) {
    display: none;
  }
}