/* Hotel Fiche controls inside The Hotel Guru's native single-hotel layout. */
.hotel_page.hf-controlled{
  background:var(--hf-background,var(--col-beige,#f8f7f3));
  color:var(--hf-body,var(--col-black,#000));
}
.hf-controlled h1,
.hf-controlled h2,
.hf-controlled h3,
.hf-controlled strong,
.hf-controlled .hotel_details .details b{color:var(--hf-text,var(--col-primary,#0e2049))}
.hf-controlled p,
.hf-controlled li{color:var(--hf-body,var(--col-black,#000))}
.hf-controlled a:not(.btn){color:var(--hf-link,var(--col-primary,#0e2049))}

/* The reference hero: title/breadcrumbs left, rate/buttons right, gallery below. */
.hf-controlled .hotel_details .breadcrumbs h1{color:var(--hf-text,var(--col-primary,#0e2049))}
.hf-controlled .hotel_details .details .hf-price{color:var(--hf-price,var(--col-black,#000))}
.hf-controlled .hf-component-heading{
  display:block;margin:0 0 7px;color:var(--hf-text,var(--col-primary,#0e2049));
  font-size:14px;font-weight:600;line-height:17px;
}
.hf-controlled .hf-component-title{
  margin:0 0 10px;color:var(--hf-text,var(--col-primary,#0e2049));
  font-size:20px;font-weight:600;line-height:24px;
}
.hf-controlled .hotel_details .details .buttons .hf-component-heading{width:100%;text-align:right}
.hf-controlled .strapline{color:var(--hf-link,var(--col-primary,#0e2049))}
.hf-controlled .strapline cite{color:inherit}
.hf-controlled .hf-strapline-heading{display:block;margin-bottom:5px;color:inherit;font-weight:600}

/* Custom colours retain The Hotel Guru's button dimensions and interaction. */
.hf-controlled .btn,
.hf-sticky-booking .btn{
  background:var(--hf-accent,var(--col-primary,#0e2049));
  border-color:var(--hf-accent,var(--col-primary,#0e2049));
  color:var(--hf-button_text,var(--col-white,#fff));
}
.hf-controlled .btn:hover,
.hf-sticky-booking .btn:hover{
  background:var(--col-secondary,#cbe7ff);border-color:var(--col-secondary,#cbe7ff);
  color:var(--hf-accent,var(--col-primary,#0e2049));
}

/* No cards, rules, borders or separators are added between fiche sections. */
.hf-controlled .hf-review-body > :last-child,
.hf-controlled .hf-section-body > :last-child{margin-bottom:0}
.hf-controlled .hf-reviewer div{display:flex;flex-direction:column;gap:2px}
.hf-controlled .hf-reviewer span{color:var(--hf-body,var(--col-black,#000))}
.hf-controlled .hotel_content .content_block h3{color:var(--hf-text,var(--col-primary,#0e2049))}
.hf-controlled .hotel_content .hf-section-body{min-width:0;color:var(--hf-body,var(--col-black,#000))}
.hf-controlled .hotel_content .hf-section-body h2,
.hf-controlled .hotel_content .hf-section-body h3{
  margin:0 0 10px;color:var(--hf-text,var(--col-primary,#0e2049));
  font-size:18px;font-weight:600;line-height:23px;
}
.hf-controlled .hotel_content .hf-section-body blockquote{margin:0 0 16px;padding:0}
.hf-controlled .hotel_content .hf-section-body > ul:not(.content){display:grid;grid-row-gap:16px;grid-column-gap:16px}
.hf-controlled .hotel_content .hf-content-map .hf-section-body,
.hf-controlled .hotel_content .hf-content-map .map_container{width:100%}
.hf-controlled .hotel_content .hf-content-map .ns-map-target{max-width:100%}

.hf-controlled .gallery figcaption,
.hf-controlled .gallery .preview-caption{
  background:var(--hf-text,var(--col-black,#000));
  color:var(--hf-button_text,var(--col-white,#fff));
}
.hf-controlled .gallery .slide_number{color:var(--col-white,#fff)}

/* Always the final Hotel Guru component, including when its tile grid is empty. */
.hf-controlled .hf-nearby-hotels{margin-top:0}
.hf-controlled .hf-nearby-hotels h2{color:var(--hf-text,var(--col-primary,#0e2049))}
.hf-controlled .hf-nearby-hotels .grid:empty{display:none}

@media (min-width:800px){
  .hf-controlled .hotel_content .hf-section-body > ul:not(.content){grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .hf-controlled .hf-component-title{font-size:24px;line-height:29px}
  .hf-controlled .hotel_content .hf-section-body h2,
  .hf-controlled .hotel_content .hf-section-body h3{font-size:20px;line-height:24px}
}
@media (max-width:799px){
  .hf-controlled .hotel_details .details .buttons .hf-component-heading{text-align:left}
  .hf-controlled .hotel_details .details .buttons{width:100%}
  .hf-controlled .hotel_details .details .buttons .btn{width:100%}
}