:root {
  --hl-editorial-hero-height: 500px;
  --hl-editorial-title-size: clamp(40px, 3.7vw, 58px);
  --hl-accent-orange: #ed6b2f;
  --hl-accent-orange-deep: #c84c20;
  --hl-finder-max-width: 1500px;
  --hl-finder-inline-gap: 112px;
  --hl-finder-pad-top: 16px;
  --hl-finder-pad-bottom: 18px;
  --hl-finder-pad-inline: 18px;
  --hl-finder-radius: 18px;
  --hl-finder-control-height: 54px;
  --hl-finder-surface: #173f34;
  --hl-finder-shadow: 0 22px 54px rgba(7, 37, 29, .2);
}

/* Restrained desktop-only microtype lift. Finder fields and all offer/search
   result surfaces intentionally stay untouched so their compact density does
   not change. Mobile keeps the separate binding readability standard below
   761px. */
@media (min-width: 761px) {
  .site-header .hl-favorites-nav b { font-size: 10px !important; }

  .editorial-hero .eyebrow,
  .home-page.hl-content .editorial-content .eyebrow,
  .home-page.hl-content .home-story-card small { font-size: 11px !important; }
  .home-page.hl-content .home-story-card > span { font-size: 10px !important; }
  .home-page.hl-content .intro-criteria li > span:first-child,
  .hl-content .journal-card__body time { font-size: 12px !important; }

  .hotel-page .hero-labels span,
  .hotel-page .hero-topline,
  .hotel-page .hero-facts small,
  .hotel-page .gallery-dialog-heading .dialog-kicker,
  .hotel-page .dialog-kicker,
  .hotel-page .catalogue-location-strip small,
  .hotel-page .catalogue-room-list summary small { font-size: 10px !important; }
  .hotel-page .eyebrow,
  .hotel-page .tulua-classification > p:first-child,
  .hotel-page .tulua-location-stack article > span,
  .hotel-page .tulua-media-panel .media-copy > p:first-child,
  .hotel-page .tulua-media-panel figcaption { font-size: 12px !important; }
  .hotel-page .hero-facts span,
  .hotel-page .tulua-location-stack li,
  .hotel-page .tulua-media-panel dt { font-size: 13px !important; }
  .hotel-page .image-viewer-dialog figcaption { font-size: 13px !important; }

  /* The smallest editorial hotel copy gains exactly one pixel. Dimensions,
     spacing and line-height stay under the existing component rules. */
  .hotel-page .tulua-catalogue-panel header > div > p { font-size: 10.5px !important; }
  .hotel-page .tulua-catalogue-panel header > p { font-size: 13.5px !important; }
  .hotel-page .catalogue-columns p { font-size: 13px !important; }
  .hotel-page .catalogue-columns li { font-size: 12.5px !important; }

  .hl-favorites-dialog header small { font-size: 11px !important; }
  .hl-favorite-card small { font-size: 9px !important; }
  .hl-favorite-card span,
  .hl-favorite-card a { font-size: 11px !important; }
  .hl-favorites-dialog footer button { font-size: 12px !important; }
}

/* Month navigation belongs next to the month on every Finder. */
:is(.date-range-popover, .hlf-calendar) .finder-month-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
:is(.date-range-popover, .hlf-calendar) .finder-month-heading :is(h3, h4) {
  margin: 0;
  font: 400 18px/1.3 "Tenor Sans", Georgia, serif;
  color: #173f34;
  text-align: center;
}
:is(.date-range-popover, .hlf-calendar) .finder-month-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dbe4dc;
  border-radius: 12px;
  color: #173f34;
  background: #fff;
  font: 400 22px/1 Arial, sans-serif;
  cursor: pointer;
}
:is(.date-range-popover, .hlf-calendar) .finder-month-arrow:hover:not(:disabled) { background: #e9eee6; border-color: #173f34; }
:is(.date-range-popover, .hlf-calendar) .finder-month-arrow:disabled { opacity: .3; cursor: default; }
:is(.date-range-popover, .hlf-calendar) .finder-month-arrow:focus-visible { outline: 3px solid #d86b3c; outline-offset: 2px; }

/* Align the offer/filter area with the shared Finder instead of nesting widths. */
body .results-layout.section-shell,
body .results-shell {
  width: min(var(--hl-finder-max-width), calc(100% - var(--hl-finder-inline-gap)));
  max-width: none;
  margin-inline: auto;
}
body .favorites-live > .favorites-offers,
body .favorites-live > .portfolio-finder-band .finder-surface {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* One recognisable finder frame on the homepage, portfolio, results and hotel pages. */
.finder-surface {
  width: min(var(--hl-finder-max-width), calc(100% - var(--hl-finder-inline-gap)));
  max-width: none;
  margin-inline: auto;
  padding: var(--hl-finder-pad-top) var(--hl-finder-pad-inline) var(--hl-finder-pad-bottom);
  overflow: visible;
  color: #fff;
  background: var(--hl-finder-surface);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--hl-finder-radius);
  box-shadow: var(--hl-finder-shadow);
}

.home-search-wrap .finder-surface {
  width: min(var(--hl-finder-max-width), calc(100% - var(--hl-finder-inline-gap)));
  margin-inline: auto;
  padding: var(--hl-finder-pad-top) var(--hl-finder-pad-inline) var(--hl-finder-pad-bottom);
  border-radius: var(--hl-finder-radius);
  box-shadow: var(--hl-finder-shadow);
}

.portfolio-finder-band {
  margin: 0;
  padding: 26px 24px 34px;
  display: block;
  overflow: visible;
  color: #fff;
  background: var(--paper, #f8f5ee);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}

.portfolio-finder-band .finder-surface,
.search-workbench.finder-surface {
  width: min(var(--hl-finder-max-width), calc(100% - var(--hl-finder-inline-gap)));
}

.search-workbench.finder-surface {
  margin: -36px auto 0;
  padding: var(--hl-finder-pad-top) var(--hl-finder-pad-inline) var(--hl-finder-pad-bottom);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--hl-finder-radius);
}

.search-studio.finder-surface--hotel {
  width: min(var(--hl-finder-max-width), calc(100% - var(--hl-finder-inline-gap)));
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--hl-finder-radius);
  background: var(--hl-finder-surface);
  box-shadow: var(--hl-finder-shadow);
}

.search-studio.finder-surface--hotel .studio-head {
  padding: 13px 18px 8px;
}

.search-studio.finder-surface--hotel .travel-modes {
  padding-inline: 16px;
}

.search-studio.finder-surface--hotel .studio-fields,
.search-studio.finder-surface--hotel .premium-search-fields {
  padding: 9px 14px 11px;
}

.search-studio.finder-surface--hotel .studio-options,
.search-studio.finder-surface--hotel .live-search-note {
  margin-right: 14px;
  margin-left: 14px;
}

.search-studio.finder-surface--hotel .studio-options {
  min-height: 38px;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 12px;
}

.finder-surface .hlf-trigger,
.finder-surface .hlf-submit,
.search-studio.finder-surface--hotel .premium-search-fields > .studio-field > .field-trigger,
.search-studio.finder-surface--hotel .premium-search-fields > .studio-submit,
.search-studio.finder-surface--hotel .studio-fields:not(.premium-search-fields) > .studio-field > strong,
.search-studio.finder-surface--hotel .studio-fields:not(.premium-search-fields) > .studio-submit {
  min-height: var(--hl-finder-control-height);
}

/* The homepage is the binding height reference for every editorial hero. */
.home-page .hero,
.editorial-hero {
  height: var(--hl-editorial-hero-height);
  min-height: var(--hl-editorial-hero-height);
  max-height: var(--hl-editorial-hero-height);
  box-sizing: border-box;
}

.editorial-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(201, 240, 108, .12), transparent 28%),
    linear-gradient(135deg, #0b3329 0%, #15483b 72%, #1b5445 100%);
}

.editorial-hero .eyebrow {
  margin-bottom: 14px;
  color: var(--hl-accent-orange);
  font-size: 10px;
  letter-spacing: .18em;
}

.editorial-hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--display, "Tenor Sans", Georgia, serif);
  font-size: var(--hl-editorial-title-size);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

.portfolio-hero.editorial-hero {
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  align-items: stretch;
  gap: 0;
}

.portfolio-hero.editorial-hero .portfolio-hero__copy {
  padding: 38px clamp(36px, 5.6vw, 96px);
}

.portfolio-hero.editorial-hero h1 {
  max-width: 680px;
  font-size: var(--hl-editorial-title-size);
}

.portfolio-hero.editorial-hero .portfolio-hero__intro {
  margin-top: 14px;
}

.portfolio-hero.editorial-hero .portfolio-hero__intro > p {
  max-width: 560px;
  color: rgba(255, 255, 255, .74);
  font-size: 13px;
  line-height: 1.6;
}

.portfolio-hero.editorial-hero .portfolio-hero__promise {
  max-width: 560px;
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .085);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

.portfolio-hero.editorial-hero .portfolio-hero__visual {
  height: var(--hl-editorial-hero-height);
  min-height: var(--hl-editorial-hero-height);
  max-height: var(--hl-editorial-hero-height);
  padding: 12px 12px 12px 0;
  background: transparent;
}

.portfolio-hero.editorial-hero .portfolio-hero__visual figure {
  border-radius: 24px;
  box-shadow: 0 24px 58px rgba(4, 28, 22, .2);
}

.portfolio-hero.editorial-hero .portfolio-hero__visual figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(6, 29, 23, .22));
  pointer-events: none;
}

.portfolio-hero.editorial-hero .portfolio-hero__visual figcaption {
  z-index: 1;
}

.magazin-hero.editorial-hero,
.result-intro.editorial-hero {
  padding: 38px clamp(32px, 6vw, 112px);
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
}

.magazin-hero.editorial-hero h1,
.result-intro.editorial-hero h1 {
  max-width: 760px;
  font-size: var(--hl-editorial-title-size);
}

.magazin-hero.editorial-hero .magazin-hero__intro,
.result-intro.editorial-hero .result-overview {
  max-width: 520px;
  padding-bottom: 0;
}

.magazin-hero.editorial-hero .magazin-hero__intro p,
.result-intro.editorial-hero .intro-copy > p:last-child {
  margin-top: 15px;
  color: rgba(255, 255, 255, .74);
  font-size: 14px;
  line-height: 1.65;
}

.magazin-hero.editorial-hero .magazin-hero__intro span {
  margin-top: 18px;
  padding-top: 14px;
}

.result-intro.editorial-hero .result-overview {
  padding: 16px 0 12px 32px;
}

.result-intro.editorial-hero .result-overview strong {
  font-size: clamp(34px, 3vw, 48px);
}

.story-hero.editorial-hero {
  padding: 0;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  align-items: stretch;
  gap: 0;
}

.story-hero.editorial-hero .story-hero-copy {
  padding: 38px clamp(36px, 5.6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-hero.editorial-hero .story-hero-copy h1 {
  font-size: var(--hl-editorial-title-size);
  line-height: .98;
}

.story-hero.editorial-hero .story-hero-copy > p:not(.eyebrow) {
  margin: 14px 0 16px;
  color: rgba(255, 255, 255, .74);
  font-size: 13px;
  line-height: 1.6;
}

.story-hero.editorial-hero .story-collage {
  min-height: 0;
  height: calc(var(--hl-editorial-hero-height) - 24px);
  margin: 12px 12px 12px 0;
}

.story-hero.editorial-hero .collage-main {
  inset: 0 82px 52px 0;
}

.story-hero.editorial-hero .collage-small {
  width: 42%;
  height: 40%;
  border-width: 6px;
}

.story-hero.editorial-hero .collage-statement {
  top: 24px;
  right: 18px;
  padding: 17px 19px;
  border-radius: 16px;
}

.story-hero.editorial-hero .collage-statement strong {
  font-size: 21px;
}

.article-hero.editorial-hero {
  padding: 28px clamp(32px, 6vw, 112px) 42px;
}

.article-hero.editorial-hero .article-hero__grid {
  margin-top: 34px;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  align-items: end;
  gap: clamp(48px, 7vw, 112px);
}

.article-hero.editorial-hero h1 {
  max-width: 820px;
  font-size: var(--hl-editorial-title-size);
  line-height: 1;
}

.article-hero.editorial-hero .article-hero__meta > p {
  font-size: 14px;
  line-height: 1.65;
}

.article-hero.editorial-hero .article-hero__meta > div {
  margin-top: 18px;
  padding-top: 14px;
}

/* Shared editorial accent: terracotta replaces lime in headings site-wide. */
body .eyebrow,
body .eyebrow.dark,
body .eyebrow.orange,
body .eyebrow.mint {
  color: var(--hl-accent-orange-deep) !important;
}

body .eyebrow.light,
body .editorial-hero .eyebrow,
body .story-cta .eyebrow,
body .promise-section .eyebrow,
body .curation-section .eyebrow,
body .closing-cta .eyebrow,
body .service .eyebrow {
  color: var(--hl-accent-orange) !important;
}

body .toolbar-label,
body .destination-card__copy small,
body .folder-copy small,
body .portfolio-hero__promise span,
body .editorial-points strong,
body .related-grid span,
body .luxury-super .luxury-number,
body .luxury-super b,
body .experience-number,
body .experience-card > p,
body .image-story figcaption span,
body .experience-tile span,
body .connector-possibilities header small,
body .deep-green-card .detail-index {
  color: var(--hl-accent-orange) !important;
}

body .detail-index {
  color: var(--hl-accent-orange-deep) !important;
}

@media (max-width: 1050px) {
  :root {
    --hl-finder-inline-gap: 48px;
  }
}

@media (max-width: 760px) {
  :root {
    --hl-editorial-hero-height: 555px;
    --hl-editorial-title-size: clamp(34px, 9.2vw, 42px);
  }

  .home-page .hero,
  .editorial-hero {
    height: var(--hl-editorial-hero-height);
    min-height: var(--hl-editorial-hero-height);
    max-height: var(--hl-editorial-hero-height);
  }

  .portfolio-hero.editorial-hero,
  .story-hero.editorial-hero,
  .magazin-hero.editorial-hero,
  .result-intro.editorial-hero,
  .article-hero.editorial-hero .article-hero__grid {
    grid-template-columns: 1fr;
  }

  .portfolio-hero.editorial-hero .portfolio-hero__visual,
  .story-hero.editorial-hero .story-collage {
    height: 210px;
    min-height: 210px;
    max-height: 210px;
  }

  .portfolio-hero.editorial-hero .portfolio-hero__visual {
    padding: 0 12px 12px;
  }

  .story-hero.editorial-hero .story-collage {
    margin: 0 12px 12px;
  }

  .editorial-hero .eyebrow {
    margin-bottom: 10px;
    font-size: 9px;
  }

  .editorial-hero h1,
  .portfolio-hero.editorial-hero h1,
  .magazin-hero.editorial-hero h1,
  .result-intro.editorial-hero h1,
  .story-hero.editorial-hero .story-hero-copy h1,
  .article-hero.editorial-hero h1 {
    font-size: var(--hl-editorial-title-size);
    overflow-wrap: normal;
  }

  .portfolio-hero.editorial-hero .portfolio-hero__copy,
  .story-hero.editorial-hero .story-hero-copy,
  .magazin-hero.editorial-hero,
  .result-intro.editorial-hero,
  .article-hero.editorial-hero {
    padding: 34px 20px;
  }

  .result-intro.editorial-hero .result-overview {
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    border-left: 0;
  }

  .article-hero.editorial-hero .article-hero__grid {
    margin-top: 30px;
    gap: 26px;
  }
}

@media (max-width: 680px) {
  :root {
    --hl-finder-inline-gap: 24px;
    --hl-finder-pad-top: 14px;
    --hl-finder-pad-bottom: 16px;
    --hl-finder-pad-inline: 14px;
    --hl-finder-radius: 16px;
    --hl-finder-control-height: 50px;
  }

  .home-search-wrap,
  .portfolio-finder-band {
    padding: 14px 12px 24px;
  }

  .finder-surface,
  .home-search-wrap .finder-surface,
  .portfolio-finder-band .finder-surface,
  .search-workbench.finder-surface,
  .search-studio.finder-surface--hotel {
    width: 100%;
  }

  .search-workbench.finder-surface {
    width: calc(100% - 24px);
    margin-top: -30px;
  }

  .search-studio.finder-surface--hotel {
    width: calc(100% - 24px);
  }
}

/* Eligible result Finders switch to a compact summary once their original
   position reaches the viewport top on desktop. Mobile remains a complete,
   one-column Finder at its normal document position. */
.hl-finder-sticky-placeholder[hidden],
.hl-finder-sticky-summary {
  display: none;
}

.hl-finder-sticky-footer {
  display: flex;
  max-height: 0;
  min-height: 0;
  overflow: hidden;
}

.finder-surface {
  transition: none !important;
  animation: none !important;
  overflow-anchor: none;
}

.hl-finder-sticky-placeholder { overflow-anchor: none; }
.calendar-availability-note {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #24463c;
}

.finder-surface.is-finder-docked {
  width: min(var(--hl-finder-max-width), calc(100% - var(--hl-finder-inline-gap))) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 14px 11px;
  position: fixed !important;
  z-index: 95 !important;
  top: var(--hl-finder-sticky-top, 96px) !important;
  left: 50% !important;
  border-radius: 16px;
  box-shadow: 0 20px 52px rgba(7, 37, 29, .28) !important;
  transform: translateX(-50%);
}

.finder-surface.is-finder-docked > :not(.hl-finder-sticky-summary) {
  display: none !important;
}

.finder-surface > .hl-finder-sticky-summary {
  min-height: 58px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.finder-surface.is-finder-docked > .hl-finder-sticky-summary {
  display: flex;
}

.hl-finder-sticky-summary > span {
  min-width: 0;
  display: block;
}

.hl-finder-sticky-summary small,
.hl-finder-sticky-summary strong {
  display: block;
}

.hl-finder-sticky-summary small {
  margin-bottom: 4px;
  color: #ef9b72;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hl-finder-sticky-summary strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-finder-sticky-summary button {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background: var(--hl-accent-orange);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.hl-finder-sticky-summary button i {
  width: 7px;
  height: 7px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.finder-surface.is-finder-docked :is(.hlf-topline, .hlf-options, .studio-head, .studio-options, .live-search-note) {
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  border-width: 0 !important;
  pointer-events: none;
}

.finder-surface.is-finder-docked .hl-finder-sticky-footer {
  max-height: 50px;
  min-height: 33px;
  margin-top: 6px;
  padding: 5px 8px 0;
  display: flex;
  align-items: center;
  gap: 22px;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.hl-finder-sticky-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ef9b72;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.hl-finder-sticky-brand i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--hl-accent-orange);
  box-shadow: 0 0 0 4px rgba(237, 107, 47, .13);
}

.hl-finder-sticky-direct {
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.hl-finder-sticky-footer.has-direct-option .hl-finder-sticky-direct {
  display: inline-flex;
}

.hl-finder-sticky-direct input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hl-finder-sticky-direct > span {
  width: 34px;
  height: 20px;
  padding: 3px;
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  transition: background .24s ease;
}

.hl-finder-sticky-direct > span i {
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .17);
  transition: transform .24s ease;
}

.hl-finder-sticky-direct input:checked + span {
  background: var(--hl-accent-orange);
}

.hl-finder-sticky-direct input:checked + span i {
  transform: translateX(14px);
}

.hl-finder-sticky-direct input:focus-visible + span {
  outline: 3px solid rgba(239, 155, 114, .42);
  outline-offset: 2px;
}

.hl-finder-sticky-direct strong {
  font-size: 10px;
  font-weight: 800;
}

.finder-surface.is-finder-docked .hlf-modes {
  width: max-content;
  margin: 0 0 6px;
  padding: 2px;
}

.finder-surface.is-finder-docked .hlf-modes button {
  min-height: 27px;
  padding-inline: 13px;
  font-size: 10px;
}

.finder-surface.is-finder-docked .hlf-form {
  grid-template-columns:
    minmax(170px, 1.16fr)
    minmax(140px, .88fr)
    minmax(190px, 1.28fr)
    minmax(130px, .72fr)
    minmax(155px, .9fr)
    minmax(165px, .86fr);
  gap: 6px;
}

.finder-surface.is-finder-docked .hlf.is-hotel-mode .hlf-form {
  grid-template-columns:
    minmax(190px, 1.12fr)
    minmax(210px, 1.25fr)
    minmax(135px, .72fr)
    minmax(160px, .9fr)
    minmax(170px, .86fr);
}

.finder-surface.is-finder-docked .hlf-field {
  gap: 0;
}

.finder-surface.is-finder-docked .hlf-field-label {
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

.finder-surface.is-finder-docked .studio-field-label {
  min-height: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.finder-surface.is-finder-docked :is(.hlf-trigger, .hlf-submit) {
  min-height: 42px;
  border-radius: 10px;
}

.finder-surface.is-finder-docked .hlf-trigger {
  grid-template-columns: 23px minmax(0, 1fr) 10px;
  padding: 6px 9px;
}

.finder-surface.is-finder-docked .hlf-field-icon {
  width: 23px;
  height: 23px;
}

.finder-surface.is-finder-docked .hlf-copy > strong {
  font-size: 11.5px;
  white-space: nowrap;
}

.finder-surface.is-finder-docked .hlf-submit {
  padding: 8px 12px;
  font-size: 11px;
}

.search-studio.finder-surface--hotel.is-finder-docked {
  padding: 8px 12px 10px;
}

.search-studio.finder-surface--hotel.is-finder-docked .travel-modes {
  margin: 0 0 6px;
  padding: 0;
  gap: 20px;
  border: 0;
}

.search-studio.finder-surface--hotel.is-finder-docked .travel-modes button {
  padding: 5px 3px 4px;
  font-size: 10px;
}

.search-studio.finder-surface--hotel.is-finder-docked :is(.studio-fields, .premium-search-fields) {
  margin: 0;
  padding: 0;
  gap: 6px;
}

.search-studio.finder-surface--hotel.is-finder-docked .premium-search-fields > .studio-field > .field-trigger,
.search-studio.finder-surface--hotel.is-finder-docked .studio-fields:not(.premium-search-fields) > .studio-field > strong,
.search-studio.finder-surface--hotel.is-finder-docked .studio-submit {
  min-height: 42px;
  border-radius: 10px;
}

.search-studio.finder-surface--hotel.is-finder-docked .premium-search-fields > .studio-field > .field-trigger {
  padding-left: 38px;
  padding-right: 9px;
}

.search-studio.finder-surface--hotel.is-finder-docked .premium-search-fields > .studio-field > .studio-field-label .finder-field-icon {
  width: 21px;
  height: 21px;
  bottom: 10px;
  left: 9px;
}

.search-studio.finder-surface--hotel.is-finder-docked .field-trigger strong {
  font-size: 11.5px;
  white-space: nowrap;
}

.finder-surface.is-finder-docked :is(.hlf-popover, .hlf-calendar, .field-popover, .date-range-popover) {
  max-height: calc(100dvh - var(--hl-finder-sticky-top, 96px) - var(--hl-finder-docked-height, 100px) - 18px) !important;
  overflow-y: auto;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .finder-surface.is-finder-docked .hlf-form,
  .finder-surface.is-finder-docked .hlf.is-hotel-mode .hlf-form,
  .search-studio.finder-surface--hotel.is-finder-docked .premium-search-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finder-surface.is-finder-docked :is(.hlf-submit, .studio-submit) {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .finder-surface > .hl-finder-sticky-summary { display: none !important; }
}

/* Native form controls remain readable on touch tablets and landscape phones. */
@media (max-width: 1180px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}

/*
 * Verbindlicher mobiler Lesbarkeitsstandard (v193).
 * Diese Korrekturen greifen ausschliesslich bis 760 Pixel. Die veroeffentlichte
 * Desktop-Gestaltung bleibt damit unveraendert. Fliesstext und Bedienelemente
 * beginnen bei 16 Pixel, kurze Zusatzinformationen bei 14 Pixel.
 */
@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body { font-size: 16px; }

  main :where(p, li, dd, blockquote),
  body dialog :where(p, li, dd, blockquote) {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }

  main :where(small, time, figcaption, dt, label),
  body dialog :where(small, time, figcaption, dt, label) {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  main :where(button, input, select, textarea, summary),
  body dialog :where(button, input, select, textarea, summary) {
    font-size: 16px !important;
  }

  main :where(
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="label"],
    [class*="meta"],
    [class*="caption"],
    [class*="badge"],
    [class*="status"]
  ) {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* Kopfzeile, Suche und Fusszeile */
  .site-header .main-nav a { font-size: 16px !important; }
  .header-beta { font-size: 14px !important; }
  .site-header .hl-favorites-nav b { font-size: 12px !important; }
  .hl-site-search-shell header small,
  .hl-site-search-results a small,
  .hl-site-search-results a em { font-size: 14px !important; }
  .hl-site-search-results a strong { font-size: 16px !important; }
  .site-footer.hl-site-footer .footer-links,
  .site-footer.hl-site-footer .footer-bottom { font-size: 14px !important; }

  /* Gemeinsamer Holiday-Finder */
  .hlf-field-label,
  .hlf-topline small,
  .hlf-live,
  .hlf-copy > span,
  .hlf-copy > small,
  .hlf-options label strong,
  .hlf-options p,
  .hlf-popover header small,
  .hlf-calendar header small,
  .hlf-option-list > p:not(.hlf-empty),
  .hlf-choice span small,
  .hlf-choice > b,
  .hlf-duration-grid small,
  .hlf-counter > div:first-child small,
  .hlf-age-grid label span,
  .hlf-calendar-selection small,
  .hlf-weekdays b,
  .hlf-calendar > footer p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .hlf-modes button,
  .hlf-copy > strong,
  .hlf-submit,
  .hlf-search input,
  .hlf-choice span strong,
  .hlf-empty,
  .hlf-text-button,
  .hlf-apply,
  .hlf-duration-grid strong,
  .hlf-exact-duration span,
  .hlf-exact-duration select,
  .hlf-age-grid select,
  .hlf-counter > div:first-child strong,
  .hlf-counter b,
  .hlf-calendar-selection strong,
  .hlf-days button {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .hlf-field { gap: 7px; }
  .hlf-trigger {
    min-height: var(--hl-finder-control-height) !important;
    padding: 8px 12px !important;
  }
  .hlf-submit { min-height: 54px !important; }
  .hlf-choice { min-height: 68px; }
  .hlf-duration-grid button,
  .hlf-exact-duration select,
  .hlf-age-grid select,
  .hlf-counter button,
  .hlf-text-button,
  .hlf-apply { min-height: 44px; }
  .hlf-counter button { width: 44px; height: 44px; }
  .hlf-weekdays,
  .hlf-days { gap: 2px; }
  .hlf-days button,
  .hlf-days > span { min-height: 44px; }

  .hl-finder-sticky-summary small { font-size: 14px !important; }
  .hl-finder-sticky-summary strong,
  .hl-finder-sticky-summary button { font-size: 16px !important; }
  .finder-surface.is-finder-docked > .hl-finder-sticky-summary {
    min-height: 64px;
    max-height: 64px;
  }
  .hl-finder-sticky-summary button { min-height: 44px; }

  /* Hotel navigation systems: compact, single-row rails. Long labels remain
     readable and can be reached with the familiar horizontal swipe. */
  .hotel-page .hotel-subnav,
  .hotel-page .tulua-catalogue-tabs,
  .hotel-page .tulua-media-categories {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .hotel-page .tulua-catalogue-tabs,
  .hotel-page .tulua-media-categories {
    margin-bottom: 14px !important;
  }
  .hotel-page .hotel-subnav a,
  .hotel-page .tulua-catalogue-tabs button,
  .hotel-page .tulua-media-categories button {
    width: auto;
    min-width: max-content;
    min-height: 44px !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #53675f;
    border: 1px solid #d7dfd8 !important;
    border-radius: 12px;
    background: #fffdf9;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.2 !important;
    letter-spacing: -.01em;
    text-align: center;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }
  .hotel-page .hotel-subnav a.active,
  .hotel-page .hotel-subnav a.is-active,
  .hotel-page .tulua-catalogue-tabs button.is-active,
  .hotel-page .tulua-media-categories button.is-active {
    color: #fff;
    border-color: #173f34 !important;
    background: #173f34;
    box-shadow: inset 0 -3px 0 #ef9b72;
  }

  /* Hotelkopf: mehr Textplatz statt fester, zu kleiner Flaechen. */
  .hotel-hero-mosaic .hero-copy-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .hotel-hero-mosaic .hero-facts {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: none !important;
  }
  .hotel-hero-mosaic .hero-labels span,
  .hotel-hero-mosaic .eyebrow,
  .hotel-hero-mosaic .hero-topline,
  .hotel-stars,
  .hotel-hero-mosaic .hero-facts small,
  .hotel-hero-mosaic .hero-facts span,
  .hero-gallery-main figcaption {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .hotel-hero-mosaic .hero-intro,
  .hotel-hero-mosaic .hero-facts strong,
  .hotel-subnav a,
  .hero-gallery-button {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .hotel-hero-mosaic .hero-actions > * {
    min-height: 52px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    white-space: normal;
  }
  .hotel-hero-mosaic .hero-facts div {
    min-height: 104px;
    padding: 16px !important;
  }
  .hotel-subnav a { min-height: 44px; }

  /* Hotelwelten und redaktionelle Hotelinhalte */
  .hotel-media-mobile-toggle small,
  .hotel-page .hotel-media-card .media-copy > p:first-child,
  .hotel-page .hotel-media-card .media-copy dt,
  .hotel-page .hotel-media-card .hotel-media-document,
  .hotel-page .hotel-media-card .hotel-media-caption {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .hotel-page .hotel-media-card .media-copy dd,
  .hotel-page .hotel-media-card .media-copy > a {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Angebotskarten auf den Hotelseiten */
  .offer-ribbon {
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .offer-header {
    min-height: 0 !important;
    padding: 50px 16px 16px !important;
    align-items: flex-start !important;
    flex-direction: column;
    gap: 14px !important;
  }
  .offer-header > div,
  .offer-meta-actions {
    width: 100%;
    min-width: 0;
    align-items: flex-start !important;
  }
  .offer-header p strong { font-size: 17px !important; line-height: 1.3 !important; }
  .offer-header p small { font-size: 14px !important; line-height: 1.45 !important; }
  .catalogue-trigger {
    min-height: 44px !important;
    padding-inline: 14px !important;
    font-size: 14px !important;
  }
  .flight-grid { grid-template-columns: 1fr !important; }
  .flight-label {
    min-height: 0 !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 5px 14px;
    border-right: 0 !important;
  }
  .flight-label span,
  .flight-label small {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .flight-label strong {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  .flight-label small { grid-column: 2; }
  .flight-route {
    min-height: 0 !important;
    padding: 16px 12px !important;
    grid-template-columns: minmax(64px, .75fr) minmax(0, 1fr) minmax(64px, .75fr) !important;
    gap: 10px !important;
  }
  .flight-route strong { font-size: 18px !important; }
  .flight-route > div > span,
  .flight-route > div > small,
  .flight-carrier-summary > span:last-child,
  .flight-line small {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .flight-carrier-summary {
    margin-bottom: 7px;
    gap: 7px;
  }
  .offer-card .flight-carrier-summary .airline-logo,
  .offer-card .flight-carrier-summary .airline-logo-fallback {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .flight-details > summary {
    min-height: 48px !important;
    padding: 0 14px !important;
  }
  .flight-details > summary span,
  .flight-details > summary small,
  .flight-leg :where(span, small) { font-size: 14px !important; }
  .flight-leg strong { font-size: 16px !important; }
  .flight-details-content { padding: 8px 12px 16px !important; }
  .stay-grid { grid-template-columns: 1fr 1fr !important; }
  .stay-grid div {
    min-height: 90px !important;
    padding: 13px 14px !important;
  }
  .stay-grid small,
  .stay-grid span { font-size: 14px !important; line-height: 1.4 !important; }
  .stay-grid strong { font-size: 16px !important; line-height: 1.35 !important; }
  .tariff-strip,
  .benefit-list { font-size: 14px !important; line-height: 1.5 !important; }
  .offer-footer {
    padding: 16px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch;
    background: #edf3eb;
    border-top: 1px solid #d2dfd3;
  }
  .offer-footer > * {
    grid-column: 1 / -1 !important;
    min-width: 0;
  }
  .offer-footer .benefit-list {
    display: flex;
    gap: 6px !important;
    align-items: flex-start;
  }
  .offer-footer .benefit-list:empty { display: none; }
  .offer-footer .benefit-list > span {
    max-width: 100%;
    padding: 5px 9px;
    color: #36584a;
    background: #f9fbf6;
    border: 1px solid #d2dfd3;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .offer-footer .price {
    padding: 2px 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .offer-footer .price strong {
    margin: 3px 0 !important;
    color: #173f32;
    font-size: 32px !important;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  .offer-footer .price small,
  .offer-footer .price span { color: #526b5d; }
  .offer-footer .offer-verification-control {
    min-width: 0;
    width: 100%;
    gap: 9px;
  }
  .offer-footer .offer-verification-status {
    padding: 10px 12px;
    border: 1px solid #cddfd1;
    border-radius: 12px;
    grid-template-columns: 22px minmax(0, 1fr);
  }
  .offer-footer .offer-verification-status.is-verified { background: #e0eddf; }
  .offer-footer .offer-verification-status strong { font-size: 14px; }
  .offer-footer .offer-verification-status small { font-size: 13px; line-height: 1.4; }
  .offer-footer .check-button { min-height: 54px !important; border-radius: 13px; }
  .price { text-align: left !important; }
  .price small,
  .price span { font-size: 14px !important; line-height: 1.4 !important; }
  .price strong { font-size: 28px !important; }
  .check-button {
    width: 100%;
    min-height: 52px !important;
    padding-inline: 16px !important;
    grid-column: auto !important;
    font-size: 16px !important;
  }
  .hotel-only-message {
    padding: 16px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Einheitliche Hotelkarten in Suche, Portfolio, Startseite und Neueroeffnungen */
  .hl-resort-card__selection,
  .hl-resort-card__opening,
  .hl-resort-card__compare b,
  .hl-resort-card__meta,
  .hl-resort-card__luxury,
  .hl-resort-card__tags span,
  .hl-resort-card__fact,
  .hl-resort-card__price > small,
  .hl-resort-card__price-value span,
  .hl-resort-card__price-empty span,
  .hl-resort-card__price em {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .hl-resort-card__selection {
    min-height: 44px !important;
    max-width: calc(100% - 88px) !important;
    white-space: normal !important;
  }
  .hl-resort-card__opening { min-height: 44px !important; }
  .hl-resort-card__compare { min-height: 44px !important; }
  .hl-resort-card__description {
    display: block !important;
    overflow: visible !important;
    font-size: 16px !important;
    line-height: 1.62 !important;
    -webkit-line-clamp: unset !important;
  }
  .hl-resort-card__fact { padding-block: 14px !important; }
  .hl-resort-card__price-empty strong { font-size: 16px !important; }
  .hl-resort-card__cta,
  [data-live-price-retry] {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  /* Suchergebnisse und mobile Filter */
  .search-workbench-head > div:first-child span,
  .search-control > span,
  .selection-strip > span,
  .filter-head span,
  .toolbar-label,
  .overview-label,
  .live-filter-info small,
  .check-line small,
  .luxury-check small,
  .switch-line small,
  .live-offer-filter > summary small,
  .offer-pending {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .mode-button,
  .selection-chip,
  .reset-filters,
  .filter-group legend,
  .check-line b,
  .luxury-check b,
  .switch-line b,
  .filter-apply,
  .mobile-filter-button,
  .live-offer-filter > summary,
  .price-copy.price-pending strong {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  .check-line em,
  .filter-counter { font-size: 12px !important; }
  .mobile-filter-button,
  .filter-apply,
  .selection-chip { min-height: 48px; }

  /* Favoriten und Vergleich */
  .hl-favorites-dialog header small,
  .hl-favorite-card small,
  .hl-favorite-card span,
  .favorites-live__status small,
  .favorites-comparison-card__image > span,
  .favorites-comparison-card__image > b,
  .favorites-comparison-card__body > small,
  .favorites-comparison-card__price span,
  .favorites-comparison-card__price small,
  .favorites-comparison-card dt,
  .favorites-stay-grid small,
  .favorites-filter-option small,
  .favorites-filter-option > b,
  .favorites-range-filter > small,
  .favorites-range-filter label span,
  .favorites-range-filter label b,
  .favorites-facet-group summary small,
  .favorites-offers__toolbar small,
  .favorites-active-hotel > small {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .hl-favorite-card a,
  .hl-favorites-dialog footer button,
  .favorites-comparison-card dd,
  .favorites-comparison-card__no-offer span,
  .favorites-offers__filter-head button,
  .favorites-offers__filters legend,
  .favorites-filter-option strong,
  .favorites-range-filter > div strong,
  .favorites-facet-group summary strong {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  .hl-favorites-dialog footer button,
  .favorites-offers__filter-head button { min-height: 48px; }

  /* Startseite und redaktionelle Seiten */
  .home-page .filter-chip,
  .home-page .text-link,
  .home-page .home-story-card b { font-size: 16px !important; }
  .home-page .home-story-card > span,
  .home-page .luxury-tab small,
  .home-page .luxury-tab b,
  .journal-card__body time { font-size: 14px !important; }

  /* Die Hotel-Auswahl der Startseite bleibt eine kompakte Übersicht. Sie ist
     nativ per Finger wischbar; die großen überlagernden Pfeile entfallen mobil. */
  .home-page .resorts .resort-grid {
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
  }
  .home-page .home-carousel-controls { display: none !important; }

  /* Mobile review 2026-09-27: one compact control size across all Finders. */
  .search-studio.finder-surface--hotel .premium-search-fields > .studio-field > .field-trigger {
    min-height: var(--hl-finder-control-height) !important;
    padding: 8px 12px 8px 43px;
  }
  .hotel-page .hotel-subnav { display: none !important; }

  /* The results action rail is the only secondary sticky row on phones.
     An overflow:hidden ancestor would stop CSS sticky from following the page. */
  .hotel-page .offers { overflow: clip; }
  .hotel-page .mobile-results-actions {
    top: var(--holiday-header-height);
    margin-bottom: 14px;
  }
  .hotel-page .tulua-auto-finder {
    scroll-margin-top: calc(var(--holiday-header-height) + 12px);
  }
}
/* Mobile selection controls: visible choices instead of nested scroll strips. */
@media (max-width: 760px), (max-width: 1050px) and (pointer: coarse) {
  .home-page.hl-content .resorts .filter-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    margin-bottom: 16px; overflow: visible;
  }
  .home-page.hl-content .resorts .filter-chip {
    width: 100%; min-width: 0; min-height: 48px; padding: 10px 8px;
    border-radius: 14px; font-size: 16px; line-height: 1.3; white-space: normal;
  }
  .home-page.hl-content .resorts .filter-chip[data-filter="all"] { grid-column: 1 / -1; }
  body.hl-content .selection-strip {
    display: flex; flex-wrap: wrap; overflow: visible; min-height: 0;
    gap: 6px 10px; padding: 18px 0; align-items: center;
  }
  body.hl-content .selection-strip > span:first-child {
    flex: 0 0 100%; margin: 0 0 3px; color: #173f34;
    font-size: 14px !important; line-height: 1.4 !important; letter-spacing: .04em;
  }
  body.hl-content .selection-strip > .selection-chip {
    max-width: 100%; margin: 0; white-space: normal; letter-spacing: 0;
    text-transform: none; line-height: 1.4 !important; font-weight: 600;
  }
  body.hl-content .selection-strip > span.selection-chip {
    min-height: 0; padding: 2px 0; border: 0; border-radius: 0; background: none;
    font-size: 15px !important; color: #455e55; gap: 0;
  }
  body.hl-content .selection-strip > span.selection-chip:not(:last-child)::after {
    content: '·'; margin-left: 10px; color: #6d7e76;
  }
  body.hl-content .selection-strip > button.selection-chip {
    min-height: 44px; padding: 8px 12px; font-size: 15px !important;
    color: #173f34; background: #e6eee2; border-color: #b9c8bc; border-radius: 12px;
  }
  body.hl-content .destination-regions,
  body.hl-content .destination-area-choices {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    overflow: visible; width: 100%; min-width: 0; padding-bottom: 0;
  }
  body.hl-content .destination-region,
  body.hl-content .destination-area-choice {
    min-width: 0; width: 100%; min-height: 48px; padding: 10px 9px;
    border-radius: 12px; white-space: normal; overflow-wrap: anywhere;
    font-size: 16px; line-height: 1.3; text-align: left;
    color: #173f34; background: #fff; border: 1px solid #b9c8bc;
  }
  body.hl-content .destination-region:first-child,
  body.hl-content .destination-area-choice:first-child { grid-column: 1 / -1; }
  body.hl-content .destination-region.is-active,
  body.hl-content .destination-area-choice.is-active { color: #fff; background: #224d40; border-color: #224d40; }
  body.hl-content .luxury-choices {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    overflow: visible; padding-bottom: 0; width: 100%; min-width: 0;
  }
  body.hl-content .luxury-choice {
    display: flex; flex-direction: column; align-items: flex-start; min-width: 0; width: 100%; min-height: 84px; padding: 10px 8px;
    border-radius: 12px; font-size: 16px; line-height: 1.25; white-space: normal;
    text-align: left; color: #173f34; background: #fff; border-width: 1px 1px 1px 3px;
  }
  body.hl-content .luxury-choice > span { display: block; margin: auto 0 0; padding-top: 6px; font-size: 14px; }
  body.hl-content .luxury-choice--opening { grid-column: 1 / -1; min-height: 44px; flex-direction: row; align-items: center; justify-content: space-between; }
  body.hl-content .luxury-choice--opening > span { display: inline; margin: 0 0 0 8px; padding-top: 0; }
  body.hl-content .luxury-choice.is-active { color: #fff; background: #224d40; border-color: #224d40; }
  body.hl-content :is(.destination-region,.destination-area-choice,.luxury-choice,.filter-chip):focus-visible {
    outline: 3px solid #b75d35; outline-offset: 3px;
  }
  body.tulua-page .results-toolbar {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  }
  body.tulua-page .results-toolbar > div { min-width: 0; }
  body.tulua-page .results-toolbar > label {
    display: grid; gap: 6px; width: 100%; text-align: left;
    color: #455e55; font-size: 14px; line-height: 1.4;
  }
  body.tulua-page .results-toolbar select {
    display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 48px;
    margin: 0; padding: 10px 40px 10px 14px; border-radius: 12px;
    font-size: 16px; line-height: 1.4; color: #173f34; background-color: #fff;
    border: 1px solid #879f91; text-overflow: clip;
  }
}
/* All hotel category tabs remain visible and reachable on a phone. */
@media (max-width: 760px), (max-width: 1050px) and (pointer: coarse) {
  body.hotel-page .catalogue-premium-shell .tulua-catalogue-tabs,
  body.hotel-page .tulua-media-categories {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; overflow: visible; min-width: 0; width: 100%;
    margin: 0 0 16px; padding: 0;
  }
  body.hotel-page .catalogue-premium-shell .tulua-catalogue-tabs {
    padding: 12px; margin-bottom: 0; align-items: stretch;
  }
  body.hotel-page .catalogue-premium-shell .tulua-catalogue-tabs > button,
  body.hotel-page .tulua-media-categories > button {
    min-width: 0; width: 100%; min-height: 48px; height: auto; padding: 10px;
    white-space: normal; overflow-wrap: break-word; border-radius: 12px;
    font-size: 16px; line-height: 1.35; text-align: left;
  }
  body.hotel-page .catalogue-premium-shell .tulua-catalogue-tabs > button:last-child:nth-child(odd),
  body.hotel-page .tulua-media-categories > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.hotel-page .catalogue-premium-shell .tulua-catalogue-tabs > button:not(.is-active) {
    color: #fff; border-color: #91a99d;
  }
  body.hotel-page :is(.tulua-catalogue-tabs,.tulua-media-categories) > button:focus-visible {
    outline: 3px solid #bc6038; outline-offset: 2px;
  }
}
@media (max-width: 760px), (max-width: 1050px) and (pointer: coarse) {
  body [data-mobile-select-ready="true"],
  body.hl-content [data-mobile-select-ready="true"],
  body.hotel-page [data-mobile-select-ready="true"] { display: none !important; }
  .hl-mobile-choice { display: grid; gap: 6px; margin: 0 0 16px; min-width: 0; color: #173f34; }
  .hl-mobile-choice > span { font-size: 14px; font-weight: 700; line-height: 1.4; }
  .hl-mobile-choice__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-width: 0; width: 100%; min-height: 50px; margin: 0; text-align: left;
    padding: 11px 13px; border: 1px solid #879f91; border-radius: 12px;
    font: 600 16px/1.4 'Mulish', sans-serif; color: #173f34; background-color: #fffdf7;
  }
  .hl-mobile-choice__trigger > span { min-width: 0; overflow-wrap: anywhere; }
  .hl-mobile-choice__trigger > svg { flex: 0 0 20px; width: 20px; height: 20px; }
  :is(.hl-mobile-choice__trigger,.hl-choice-dialog,.hl-mobile-rail) svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .hl-mobile-choice__trigger:focus-visible,
  .hl-choice-dialog button:focus-visible,
  .hl-mobile-rail button:focus-visible { outline: 3px solid #bc6038; outline-offset: -3px; }
  .resorts .hl-mobile-choice { color: #fffdf7; }
  .catalogue-premium-shell > .hl-mobile-choice { margin: 0; padding: 14px; background: #eaf0e5; }
  .hl-choice-dialog {
    box-sizing: border-box; width: calc(100% - 16px); max-width: 560px;
    max-height: min(80dvh, 580px); margin: auto auto 0; padding: 0;
    border: 1px solid #b8c9bd; border-bottom: 0; border-radius: 22px 22px 0 0;
    background: #faf8f1; color: #173f34; box-shadow: 0 -8px 40px #122c3433;
    overflow: hidden; font-family: 'Mulish', sans-serif;
  }
  .hl-choice-dialog[open] { display: flex; flex-direction: column; animation: hl-choice-enter 160ms ease-out; }
  .hl-choice-dialog::backdrop { background: #0c271fad; }
  .hl-choice-dialog__header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex: 0 0 auto; border-bottom: 1px solid #d1dccf; }
  .hl-choice-dialog__header h2 { margin: 0; flex: 1; min-width: 0; font: 600 20px/1.3 'Mulish', sans-serif; color: #173f34; }
  .hl-choice-dialog__close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #bacbbd; border-radius: 50%; background: #fffdf7; color: #173f34; }
  .hl-choice-dialog__close svg { width: 20px; height: 20px; }
  .hl-choice-dialog__notice { margin: 0; padding: 10px 16px; color: #813c22; font-size: 15px; }
  .hl-choice-dialog__options { display: grid; gap: 8px; padding: 12px 12px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  .hl-choice-dialog__option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #c0cfc1; border-radius: 12px; background: #fffdf7; color: #173f34; text-align: left; font: 600 16px/1.4 'Mulish', sans-serif; }
  .hl-choice-dialog__option > span { min-width: 0; overflow-wrap: anywhere; }
  .hl-choice-dialog__option > svg { flex: 0 0 20px; width: 20px; height: 20px; visibility: hidden; }
  .hl-choice-dialog__option[aria-pressed="true"] { background: #224d40; color: #fffdf7; border-color: #224d40; }
  .hl-choice-dialog__option[aria-pressed="true"] > svg { visibility: visible; }
  .hl-choice-dialog__option:disabled { opacity: .5; }
  @keyframes hl-choice-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .hl-choice-dialog[open] { animation: none; } }
  body .hl-mobile-rail { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; gap: 6px; min-width: 0; width: 100%; padding: 8px; margin: 0 0 16px; background: #eaf0e5; border-radius: 14px; box-sizing: border-box; }
  body .catalogue-premium-shell > .hl-mobile-rail { margin: 0; border-radius: 0; }
  body .hl-mobile-rail > .hl-mobile-rail__track {
    display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
    overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: none !important; overscroll-behavior-inline: contain; scrollbar-width: none;
  }
  body .hl-mobile-rail__track::-webkit-scrollbar { display: none; }
  body .hl-mobile-rail .hl-mobile-rail__track > button {
    flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 48px !important;
    padding: 10px 12px !important; margin: 0 !important; border: 1px solid #b9c8bc !important; border-radius: 10px !important;
    font: 700 16px/1.3 'Mulish', sans-serif !important; text-align: left; white-space: normal !important;
    color: #173f34 !important; background: #fffdf7 !important; box-shadow: none !important;
  }
  body .hl-mobile-rail .hl-mobile-rail__track > button.is-active,
  body .hl-mobile-rail .hl-mobile-rail__track > button[aria-pressed="true"] { background: #224d40 !important; color: #fffdf7 !important; border-color: #224d40 !important; box-shadow: inset 0 -3px #c8754b !important; }
  body .hl-mobile-rail__arrow { display: grid; place-items: center; width: 44px; min-height: 48px; margin: 0; padding: 0; color: #173f34; background: #fffdf7; border: 1px solid #b9c8bc; border-radius: 10px; }
  body .hl-mobile-rail__arrow svg { width: 20px; height: 20px; }
  body .hl-mobile-rail__arrow:disabled { opacity: .32; }
  body.hotel-page .hotel-media-card .hotel-media-navigation.hl-mobile-single-choice { display: none !important; }
  body .favorites-offers__toolbar { flex-direction: column; align-items: stretch; }
  body .favorites-offers__toolbar > .hl-mobile-choice { width: 100%; margin: 0; }
  body .site-header .hl-story-submenu-heading,
  body .site-header .hl-story-link-copy small { display: none; }
  body .site-header .hl-story-submenu { margin: 4px 0 8px; border-radius: 12px; background: #edf1e8; }
  body .site-header .main-nav .hl-story-submenu a { min-height: 48px; padding: 11px 14px !important; font-size: 15px !important; }
  body .site-header .hl-story-link-copy strong { font-weight: 600; }
  body .site-header .hl-story-link-arrow { font-size: 20px; }
  body .site-header .main-nav > a,
  body .site-header .hl-story-menu summary { min-height: 44px; padding-block: 10px !important; font-size: 16px !important; line-height: 1.4; }
  body .site-header .main-nav { gap: 0; padding-block: 12px; background: #faf8f2 !important; }
  body [data-hlf-mode], body .match-motion, body [data-reset-match] { min-height: 44px; }
  body .match-page input[type="number"] { min-height: 44px; font-size: 16px; }
}

/* Long supplier labels must stay inside their own choice, including comma-
   separated room names. Keep the full original text and a separate price row. */
@media (max-width: 760px) {
body .offer-choice-copy,
body .favorites-choice-copy,
body .stay-grid > .stay-grid__item strong,
body .offer-choice > summary strong,
body .favorites-offer-choice > summary strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
body .offer-choice-copy strong,
body .favorites-choice-copy strong { overflow-wrap: anywhere; white-space: normal; }
  body .offer-choice-menu li > button,
  body .favorites-offer-choice li > button {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    column-gap: 9px;
    row-gap: 8px;
  }
  body .offer-choice-menu li > button > .offer-choice-check,
  body .favorites-offer-choice li > button > .favorites-choice-check { grid-column: 1; grid-row: 1 / span 2; }
  body .offer-choice-menu li > button > .offer-choice-copy,
  body .favorites-offer-choice li > button > .favorites-choice-copy { grid-column: 2; grid-row: 1; }
  body .offer-choice-menu li > button > .offer-choice-price,
  body .favorites-offer-choice li > button > .favorites-choice-price { grid-column: 2; grid-row: 2; text-align: left; }
  body .offer-choice-menu > header,
  body .favorites-offer-choice > section > header { position: sticky; top: 0; z-index: 6; }
}

/* Kim, 10.10.2026: appearance only, one finish for every shared Finder. */
body :is(.finder-surface, .search-studio.finder-surface--hotel), body .home-search-wrap .finder-surface {
  background: radial-gradient(ellipse at 0% 0%, #bfd39b42 0%, transparent 55%), linear-gradient(115deg, #50735b 0%, #2e604c 37%, #123d32 78%);
  border-color: #eb8b50;
  box-shadow: 0 18px 46px #123b3133, 0 0 0 2px #eb8b50, inset 0 1px 0 #fffdf752;
}
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-trigger, .field-trigger) {
  background: linear-gradient(145deg, #fffdf9, #f7f5ed);
  border-color: #dca17c66;
  box-shadow: 0 3px 10px #08251d0d, inset 0 1px 0 #fff;
}
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-trigger, .field-trigger):is(:hover, [aria-expanded="true"]) {
  border-color: #d87947;
  box-shadow: 0 0 0 2px #e7794324, inset 0 1px 0 #fff;
}
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-field-icon, .field-icon) { background: #fbefe4; border-color: #db875b3d; color: #ad4d27; }
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-submit, .studio-submit) {
  background: linear-gradient(120deg, #ce6735, #a9401b);
  color: #fffdf7;
  border-color: #ed9b6c80;
  box-shadow: 0 6px 16px #08251d1a, inset 0 1px 0 #fffdf740;
  transition: background .2s ease, box-shadow .2s ease;
}
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-submit, .studio-submit):hover { background: linear-gradient(120deg, #b7562c, #a84320); }
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-options, .studio-options) { background: linear-gradient(110deg, #ffffff0c, #e7794314); border-color: #fffdf72b; }
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(button, input, select):focus-visible { outline: 3px solid #f2ad7c; outline-offset: 3px; }
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-modes, .travel-modes) { background: #0c30295c; border-color: #f0ad7852; }
body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-modes, .travel-modes) button.is-active { background: #f7e5d5; color: #173f34; box-shadow: inset 0 -3px 0 #de7842; }
@media (prefers-reduced-motion: reduce) {
  body :is(.finder-surface, .search-studio.finder-surface--hotel) :is(.hlf-submit, .studio-submit) { transition: none; }
}

/* Offer choice glass finish 20261013: decoration only; retain every hit area. */
body :is(.offer-choice, .favorites-offer-choice) > summary > i {
  position: relative;
  font-size: 0;
  line-height: 0;
  background-color: #f3f6ef;
  background-image: linear-gradient(145deg, #fffefa 0%, #f5f8f0 44%, #e3ecdf 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 2px #143e310d, 0 2px 5px #143e3114;
  transition: box-shadow .18s ease;
}
body :is(.offer-choice, .favorites-offer-choice)[open] > summary > i {
  transform: none;
  box-shadow: inset 0 1px 2px #143e3114, inset 0 -1px 0 #ffffffcc, 0 1px 3px #143e310d;
}
body :is(.offer-choice, .favorites-offer-choice) > summary > i::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  box-sizing: border-box;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
  pointer-events: none;
}
body :is(.offer-choice, .favorites-offer-choice)[open] > summary > i::before {
  transform: translateY(2px) rotate(225deg);
}
@media (hover: hover) {
  body :is(.offer-choice, .favorites-offer-choice) > summary:hover > i {
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 2px #143e310d, 0 2px 6px #143e3124;
  }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.offer-choice, .favorites-offer-choice) > summary > i,
  body :is(.offer-choice, .favorites-offer-choice) > summary > i::before { transition: none; }
}
/* End offer choice glass finish 20261013. */