/* 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 h4,
.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-section-title-text.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-bottom:10px;
}
.hf-controlled .hf-section-title{margin:0 0 16px;color:var(--hf-text,var(--col-primary,#0e2049));font-weight:600}
.hf-controlled .hf-section-title-h2{font-size:22px;line-height:26px}
.hf-controlled .hf-section-title-h3{font-size:20px;line-height:24px}
.hf-controlled .hf-section-title-h4{font-size:18px;line-height:22px}
.hf-controlled .hf-section-title-text{font-size:16px;font-weight:400;line-height:20px}
.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));
}

/* ---------------------------------------------------------------- SECTIONS --
   Every fiche section is a white rounded card on the page surface, with the
   heading in its own left rail — the reference's layout. (It used to add no
   card, rule or separator at all, so the sections ran together as one column of
   text.) base.css already grids .content_block as 3fr/7fr above 800px, which IS
   the rail; this only gives the block its surface. */
.hf-controlled .hotel_content .hotel_content_container .content_block,
.hf-controlled .hotel_review .col-10{
  background:var(--hf-surface,#fff);
  border:1px solid var(--brand-border,rgba(102,112,133,.25));
  border-radius:16px;
  padding:26px 30px;
  margin-bottom:18px;
  box-sizing:border-box;
}
/* The review card carries its heading above the text rather than in a rail.
   Keep the empty .col-1 desktop spacer in the markup: later fiche boxes use
   the same spacer, so removing it shifts Review one grid column to the left. */
.hf-controlled .hotel_review{margin-bottom:0}
@media (max-width:799px){
  .hf-controlled .hotel_content .hotel_content_container .content_block,
  .hf-controlled .hotel_review .col-10{padding:20px}
}

/* The one-sentence summary above the review is a Sky Tint band in the reference,
   not a run of italic body text. */
.hf-controlled .strapline{
  background:var(--brand-sky,#EAF2FF);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:18px;
}
.hf-controlled .strapline cite,
.hf-controlled .hotel_details .strapline cite{font-style:normal;font-weight:700;font-size:17px;line-height:1.5;color:var(--hf-text,var(--col-primary,#0e2049))}
.hf-controlled .strapline .hf-price{
  color:var(--hf-price,var(--brand-coral,#F97066));
  font-weight:800;
  white-space:nowrap;
}

.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 > .hf-section-title{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 .content_block > .hf-section-title{
  margin:0 0 16px;font-weight:600;
}
.hf-controlled .hotel_content .hf-section-body .content h3,
.hf-controlled .hotel_content .hf-section-body .ns-landmark-name{
  margin:0 0 8px;font-size:18px;font-weight:600;line-height:23px;
}
.hf-controlled .hotel_content .hf-facilities-list{
  display:grid;grid-template-columns:1fr;gap:10px 16px;margin:0;padding:0;list-style:none;
}
.hf-controlled .hotel_content .hf-facilities-list li{margin:0}
/* Grouped facilities flow in columns rather than sitting in grid cells: the
   groups run from one amenity to eighteen, and a grid row is as tall as the
   tallest group in it, so three columns of cells left most of the section
   empty. Columns pack them, and break-inside keeps a group together. */
.hf-controlled .hotel_content .hf-facilities-list.hf-facilities-grouped{
  display:block;columns:210px 3;column-gap:26px;
}
/* The icon hangs in a 30px gutter so the group name and the amenities under it
   share one left edge. Inline, the icon pushed the heading 30px right of its own
   list and every group read as indented against a ragged margin. The gutter is
   padding on the row and a matching negative margin on the heading, so the icon
   lands on the row's own edge and never bleeds into the neighbouring column. */
.hf-controlled .hotel_content .hf-facilities-list.hf-facilities-grouped > li{
  break-inside:avoid;page-break-inside:avoid;margin:0 0 24px;padding-left:30px;
}
/* Both class names are needed, not for clarity but for weight: the section's own
   `.hf-section-body .content h3` rule sets a margin at (0,4,1), so a four-class
   selector here loses the pull-back and leaves the icon indented instead of
   hanging. Naming .hf-facilities-list too makes this (0,5,0). */
.hf-controlled .hotel_content .hf-facilities-list.hf-facilities-grouped .hf-facility-label{
  align-items:center;gap:10px;margin:0 0 8px -30px;
}
/* Pinned rather than left at 1.12em: the gutter is a fixed 30px, and an em-sized
   icon would drift out of step with it whenever the heading resizes. */
.hf-controlled .hotel_content .hf-facilities-list.hf-facilities-grouped .hf-facility-icon{
  width:20px;height:20px;min-width:20px;flex:0 0 20px;margin-top:0;
}
.hf-controlled .hotel_content .hf-facilities-grouped .hf-facility-items{
  margin:6px 0 0;padding:0;list-style:none;
}
.hf-controlled .hotel_content .hf-facilities-grouped .hf-facility-items li{
  margin:0 0 7px;font-size:15px;line-height:1.45;font-weight:400;
  color:var(--hf-text,var(--col-primary,#0e2049));
}
/* The charge marker sits on its own line, indented, rather than inline after the
   label. Inline it fitted beside a short amenity and wrapped to a bare second
   line beside a long one, where it read as a separate item — "Express
   check-in/check-out" followed by what looked like an amenity called "Additional
   charge". Always below, always indented, and closer to its own item than to the
   next one, it can only be read as qualifying the line above it. */
.hf-controlled .hotel_content .hf-facilities-grouped .hf-facility-charge{
  display:block;margin:1px 0 0 12px;white-space:normal;
  opacity:.6;font-size:.8em;line-height:1.3;
}
.hf-controlled .hotel_content .hf-facilities-grouped > li > p{
  margin:6px 0 0;font-size:15px;line-height:1.45;
  color:var(--hf-text,var(--col-primary,#0e2049));
}
.hf-controlled span.hf-facility-label,
.hf-controlled .hf-item-label{
  display:block;color:var(--hf-text,var(--col-primary,#0e2049));font-size:var(--hf-item-label-size,17px)!important;font-weight:600;line-height:1.3;
}
.hf-controlled .hf-facility-label{
  display:flex!important;align-items:flex-start;gap:.55em;
}
.hf-controlled .hf-facility-icon{
  width:1.12em;height:1.12em;min-width:1.12em;margin-top:.06em;flex:0 0 1.12em;color:var(--hf-text,var(--col-primary,#0e2049));
}
.hf-controlled .hf-facility-label-text{min-width:0}
.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 .hf-section-title{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}
  .hf-controlled .hotel_content .hf-facilities-list{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:1024px){
  .hf-controlled .hf-section-title-h2{font-size:26px;line-height:32px}
  .hf-controlled .hf-section-title-h3{font-size:24px;line-height:30px}
  .hf-controlled .hf-section-title-h4{font-size:20px;line-height:25px}
  .hf-controlled .hotel_content .hf-section-body h2,
  .hf-controlled .hotel_content .hf-section-body h3{font-size:20px;line-height:24px}
  .hf-controlled span.hf-facility-label,
  .hf-controlled .hf-item-label{font-size:var(--hf-item-label-size,18px)!important}
}
@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%}
}

/* The hotel page styles every heading inside a section body; the FAQ question
   carries its own type from .ns-paa-q, so reset the h3 wrapper at the same
   specificity that set it. */
.hf-controlled .hotel_content .hf-section-body .ns-paa-h{
	margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;
}

/* ------------------------------------------------------- SECTION INTERNALS --
   Rows of "label | description". The reference sets these two sections out as a
   single column of rows with the label in its own column, not as a two-across
   grid of stacked label-over-text items (which is what the generic
   `> ul:not(.content)` rule below does, and is still right for landmarks). */
@media (min-width:800px){
  .hf-controlled .hf-content-recommended .hf-section-body,
  .hf-controlled .hf-content-activities .hf-section-body{
    display:grid;grid-template-columns:minmax(0,215px) minmax(0,1fr);
    grid-column-gap:22px;grid-row-gap:13px;align-items:baseline;
  }
  .hf-controlled .hf-content-recommended .hf-section-body > h3,
  .hf-controlled .hf-content-activities .hf-section-body > h3,
  .hf-controlled .hf-content-recommended .hf-section-body > p,
  .hf-controlled .hf-content-activities .hf-section-body > p{margin:0}
  .hf-controlled .hotel_content .hf-content-recommended .hf-section-body > h3,
  .hf-controlled .hotel_content .hf-content-activities .hf-section-body > h3{
    font-size:15px;line-height:1.4;
  }
  /* Landmarks keep the two-across blocks, but without the rules base.css draws
     between list items — the reference has none. */
  .hf-controlled .hf-content-landmarks .hf-section-body > ul > li{border:0}
}
/* FAQ rows are separate rounded pills with the chevron at the right. */
.hf-controlled .hf-content-faq .ns-paa-item{
  border:1px solid var(--brand-border,rgba(102,112,133,.25));
  border-radius:10px;
  margin-bottom:10px;
  padding:2px 4px;
  background:var(--hf-surface,#fff);
}
.hf-controlled .hf-content-faq .ns-paa-item:last-child{margin-bottom:0}
.hf-controlled .hf-content-faq .ns-paa-btn{padding:13px 14px}
/* Style chips take the Sky Tint pill from the brand sheet. */
.hf-controlled .hf-tag-pills a{
  background:var(--brand-sky,#EAF2FF);
  border:0;
  border-radius:999px;
  color:var(--hf-text,var(--col-primary,#0e2049));
  padding:9px 18px;
  font-size:14px;
}
.hf-controlled .hf-tag-pills a:hover{background:#dde9ff}
/* "Browse hotels in <place>" keeps the blue View all, like the home rails —
   coral is reserved for the booking CTA on this page. */
.hf-controlled .hf-nearby-hotels .btn,
.hf-controlled .hf-nearby-hotels a.btn{
  background:var(--brand-blue,#2563EB);
  border-color:var(--brand-blue,#2563EB);
  border-radius:8px;
}
.hf-controlled .hf-nearby-hotels .btn:hover,
.hf-controlled .hf-nearby-hotels a.btn:hover{
  background:var(--brand-blue-dark,#1D4FD7);
  border-color:var(--brand-blue-dark,#1D4FD7);
  color:#fff;
}

/* ----------------------------------------------------------- GALLERY, TOP --
   Rounded corners on every gallery frame and on the caption/counter pills. */
.hf-controlled .gallery .gallery_container .main_image,
.hf-controlled .gallery .gallery_container .image,
.hf-controlled .gallery .carousel-container .main-carousel,
.hf-controlled .gallery .carousel-container .preview-carousel{
  border-radius:12px;overflow:hidden;
}
.hf-controlled .gallery figcaption,
.hf-controlled .gallery .preview-caption,
.hf-controlled .gallery .slide_number{border-radius:6px}

/* --------------------------------------------------- ALL-PHOTOS EXPERIENCE --
   Hotel hero images open the complete mosaic first; a second selection opens
   the focused viewer. The overlay uses NearStay's navy/coral visual language
   and deliberately has no review/comments panel. */
.hf-controlled .gallery .carousel-container{position:relative}
.hf-controlled .gallery .carousel-slide[role="button"]{cursor:zoom-in;outline:0}
.hf-controlled .gallery .carousel-slide[role="button"]:focus-visible{
  box-shadow:inset 0 0 0 4px var(--brand-coral,#f97360);
}
.hf-gallery-all{
  position:absolute;right:16px;bottom:16px;z-index:4;display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:9px 14px;border:1px solid rgba(14,32,73,.18);border-radius:999px;
  color:var(--brand-navy,var(--hf-text,#0e2049));background:#fff;font:600 14px/1.2 inherit;
  box-shadow:0 6px 24px rgba(14,32,73,.18);transition:transform .18s ease,box-shadow .18s ease;
}
.hf-gallery-all svg{fill:none;stroke:currentColor;stroke-width:1.8}
.hf-gallery-all:hover{transform:translateY(-2px);box-shadow:0 9px 28px rgba(14,32,73,.24)}
.hf-gallery-all:focus-visible,
.hf-photo-gallery button:focus-visible{outline:3px solid var(--brand-coral,#f97360);outline-offset:3px}
body.hf-gallery-is-open{overflow:hidden;touch-action:none}
.hf-photo-gallery[hidden],
.hf-photo-gallery__viewer[hidden],
.hf-photo-gallery__back[hidden]{display:none!important}
.hf-photo-gallery{
  position:fixed;inset:0;z-index:10050;display:flex;min-width:0;min-height:0;flex-direction:column;
  color:var(--brand-navy,var(--hf-text,#0e2049));background:var(--hf-background,#f8f7f3);
}
.hf-photo-gallery__header{
  position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:14px;min-height:76px;padding:10px clamp(16px,3vw,42px);box-sizing:border-box;
  border-bottom:1px solid var(--brand-border,rgba(102,112,133,.25));background:var(--hf-surface,#fff);
  box-shadow:0 3px 16px rgba(14,32,73,.07);
}
.hf-photo-gallery__back{grid-column:1}
.hf-photo-gallery__title{grid-column:2;min-width:0}
.hf-photo-gallery__title span{
  display:block;margin-bottom:2px;color:var(--hf-muted,#667085);font-size:11px;font-weight:700;
  letter-spacing:.11em;line-height:1.2;text-transform:uppercase;
}
.hf-controlled .hf-photo-gallery__title h2{
  overflow:hidden;margin:0;color:var(--brand-navy,var(--hf-text,#0e2049));font-size:20px;
  font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;
}
.hf-photo-gallery__total{
  grid-column:3;
  display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;
  color:var(--brand-navy,#0e2049);background:var(--brand-sky,#eaf2ff);font-size:13px;font-weight:700;
}
.hf-photo-gallery__back,
.hf-photo-gallery__close{
  display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--brand-border,rgba(102,112,133,.25));border-radius:50%;
  color:var(--brand-navy,#0e2049);background:#fff;
}
.hf-photo-gallery__close{grid-column:4}
.hf-photo-gallery__back svg,
.hf-photo-gallery__close svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hf-photo-gallery__all{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(16px,3vw,42px)}
.hf-photo-gallery__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;
  grid-auto-rows:clamp(145px,16vw,220px);gap:12px;max-width:1280px;margin:0 auto;
}
.hf-photo-gallery__thumb{
  position:relative;min-width:0;min-height:0;overflow:hidden;padding:0;border:0;border-radius:14px;
  background:#dfe5ee;box-shadow:0 1px 0 rgba(14,32,73,.08);cursor:zoom-in;
}
.hf-photo-gallery__thumb:first-child,
.hf-photo-gallery__thumb:nth-child(9n){grid-column:span 2;grid-row:span 2}
.hf-photo-gallery__thumb:only-child{grid-column:1/-1;grid-row:span 3}
.hf-photo-gallery__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .28s ease,filter .28s ease}
.hf-photo-gallery__thumb-label{
  position:absolute;z-index:2;left:10px;right:10px;bottom:10px;overflow:hidden;padding:7px 10px;
  border-radius:7px;color:#fff;background:rgba(8,20,43,.78);font-size:12px;font-weight:700;
  line-height:1.25;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
  backdrop-filter:blur(6px);
}
.hf-photo-gallery__thumb::after{
  position:absolute;inset:0;content:"";border:0 solid var(--brand-coral,#f97360);border-radius:inherit;
  pointer-events:none;transition:border-width .18s ease;
}
.hf-photo-gallery__thumb:hover img{transform:scale(1.025);filter:saturate(1.04)}
.hf-photo-gallery__thumb[aria-current="true"]::after{border-width:4px}

.hf-photo-gallery__viewer{
  position:relative;flex:1;min-height:0;overflow:hidden;color:#fff;background:var(--brand-navy,#0e2049);
}
.hf-photo-gallery__stage{position:relative;display:flex;width:100%;height:100%;align-items:center;justify-content:center;margin:0;padding:28px 96px 78px;box-sizing:border-box}
.hf-photo-gallery__stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 15px 35px rgba(0,0,0,.28))}
.hf-photo-gallery__viewer-label{
  position:absolute;z-index:2;left:50%;bottom:18px;max-width:min(720px,calc(100% - 190px));
  padding:9px 15px;border-radius:8px;color:#fff;background:rgba(0,0,0,.58);font-size:14px;
  font-weight:700;line-height:1.3;text-align:center;transform:translateX(-50%);backdrop-filter:blur(8px);
}
.hf-photo-gallery__previous,
.hf-photo-gallery__next{
  position:absolute;top:50%;z-index:2;display:flex;width:52px;height:52px;align-items:center;justify-content:center;
  padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;background:rgba(255,255,255,.13);
  font:300 38px/1 inherit;transform:translateY(-50%);backdrop-filter:blur(8px);
}
.hf-photo-gallery__previous{left:24px}
.hf-photo-gallery__next{right:24px}
.hf-photo-gallery__previous:hover,
.hf-photo-gallery__next:hover{background:var(--brand-coral,#f97360);border-color:var(--brand-coral,#f97360)}
.hf-photo-gallery__counter{
  position:absolute;right:20px;bottom:18px;z-index:3;min-width:68px;padding:8px 14px;border-radius:999px;
  color:#fff;background:rgba(0,0,0,.46);font-size:14px;font-weight:700;text-align:center;
  backdrop-filter:blur(8px);
}
.hf-photo-gallery.is-viewer .hf-photo-gallery__header{
  color:#fff;border-bottom-color:rgba(255,255,255,.14);background:var(--brand-navy,#0e2049);box-shadow:none;
}
.hf-controlled .hf-photo-gallery.is-viewer .hf-photo-gallery__title h2,
.hf-photo-gallery.is-viewer .hf-photo-gallery__title span{color:#fff}
.hf-photo-gallery.is-viewer .hf-photo-gallery__title span{opacity:.68}
.hf-photo-gallery.is-viewer .hf-photo-gallery__total{color:#fff;background:rgba(255,255,255,.12)}
.hf-photo-gallery.is-viewer .hf-photo-gallery__back,
.hf-photo-gallery.is-viewer .hf-photo-gallery__close{color:#fff;border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.09)}

@media (max-width:900px){
  .hf-photo-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(135px,23vw,190px)}
}
@media (max-width:640px){
  .hf-gallery-all{right:10px;bottom:10px;min-height:38px;padding:8px 11px;font-size:12px}
  .hf-photo-gallery__header{min-height:66px;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:8px 12px}
  .hf-photo-gallery__total{display:none}
  .hf-photo-gallery__back{grid-column:1}
  .hf-photo-gallery__title{grid-column:2}
  .hf-photo-gallery__close{grid-column:3}
  .hf-photo-gallery:not(.is-viewer) .hf-photo-gallery__title{grid-column:1/3}
  .hf-photo-gallery:not(.is-viewer) .hf-photo-gallery__close{grid-column:3}
  .hf-photo-gallery__back,
  .hf-photo-gallery__close{width:40px;height:40px}
  .hf-controlled .hf-photo-gallery__title h2{font-size:16px}
  .hf-photo-gallery__title span{font-size:9px}
  .hf-photo-gallery__all{padding:10px}
  .hf-photo-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:145px;gap:7px}
  .hf-photo-gallery__thumb{border-radius:9px}
  .hf-photo-gallery__stage{padding:18px 44px 76px}
	.hf-photo-gallery__viewer-label{left:10px;right:82px;bottom:14px;max-width:none;padding:8px 10px;font-size:12px;transform:none}
	.hf-photo-gallery__counter{right:8px;bottom:14px;min-width:54px;padding:7px 9px;font-size:12px}
	.hf-photo-gallery__thumb-label{left:7px;right:7px;bottom:7px;padding:6px 8px;font-size:11px}
  .hf-photo-gallery__previous,
  .hf-photo-gallery__next{width:40px;height:40px;font-size:30px}
  .hf-photo-gallery__previous{left:8px}
  .hf-photo-gallery__next{right:8px}
  .hf-photo-gallery__counter{bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .hf-gallery-all,
  .hf-photo-gallery__thumb img,
  .hf-photo-gallery__thumb::after{transition:none}
}

/* --------------------------------------------------------------- HERO TYPE --
   The reference sets the hotel name and the rate noticeably larger than the
   inherited layout did, and caps the map so it does not dominate the page. */
.hf-controlled .hotel_details .breadcrumbs h1{font-size:32px;line-height:1.15}
.hf-controlled .hotel_details .details .hf-price{font-size:30px;font-weight:700;line-height:1.1}
.hf-controlled .hotel_details .details b .price-from{font-size:14px;color:var(--hf-muted,#6b7280)}
.hf-controlled .hf-content-map .map_container,
.hf-controlled .hf-content-map .ns-map{max-height:330px}
@media (max-width:799px){
  .hf-controlled .hotel_details .breadcrumbs h1{font-size:25px}
  .hf-controlled .hotel_details .details .hf-price{font-size:26px}
}