/* ==========================================================================
   Hotel detail page — BUILT TO THE APPROVED MOCKUP (decision #152)
   design/ORA-Reizen-3-Hoteldetail.html · markup in inc/hotel-page.php

   Every value below is copied from the mockup's own page stylesheet
   (design/src/hotel.html) and its partial (design/src/partials/styles.html);
   the mockup's --tokens are the site's --ora-tokens with the same names and
   values. If a number here disagrees with the mockup, the mockup wins —
   change it here and re-measure, do not "improve" it by eye (#50).

   Until 2026-09-13 this file restyled WooCommerce's default gallery-and-
   summary layout. That page was never the approved design (#133 wrongly said
   no mockup existed), so it was replaced rather than patched.

   ⚠️ Astra prints an inline <style> after every enqueued sheet and inflates
   its selectors with :not() and ids (gotchas 8, 33). Selectors here repeat a
   class or carry #content where a rule has to win. Never !important. MEASURE
   the computed value (tools/which-rule-wins.py) before believing a rule landed.
   ========================================================================== */

body.ora-hotel-page {
  /*
   * Where the tab bar sticks: directly under the stuck site header, which is
   * 71px (70px bar + 1px border) at every width, measured 2026-09-13.
   * ⚠️ History: until the header itself was made to stick (widgets.css,
   * #masthead) it scrolled away on every page, and this was 0px. If the header
   * height ever changes, this must change with it — measure, do not guess.
   */
  --ora-htabs-top: 71px;
  --ora-htabs-h: 56px;
}

/*
 * ⚠️ LOGGED IN, the WordPress admin bar is position:fixed across the top
 * (32px; 46px at 782px and below; it scrolls away below 600px) at z-index
 * 99999. A tab bar stuck at 0 therefore sat UNDER it and looked as if it did
 * not stick at all — reported by the user on 2026-09-13, while a logged-out
 * sweep had passed at every width from 1920 to 390. (0,2,1), so these beat
 * the (0,1,1) resets in the breakpoint blocks further down.
 */
/* Admin bar + the 71px stuck header above the tab bar. */
body.admin-bar.ora-hotel-page { --ora-htabs-top: 103px; }
@media (max-width: 782px) { body.admin-bar.ora-hotel-page { --ora-htabs-top: 117px; } }
@media (max-width: 600px) { body.admin-bar.ora-hotel-page { --ora-htabs-top: 71px; } }

/* --------------------------------------------------------------------------
   0. The grid: top · tabs · (main | aside)
   -------------------------------------------------------------------------- */
.single-product #content div.product.ora-hotel {
  max-width: var(--ora-wrap);
  margin-inline: auto;
  padding-inline: var(--ora-gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  column-gap: 44px;
  align-items: start;
}
/* WooCommerce's clearfix pseudo-elements would become grid items. */
.single-product #content div.product.ora-hotel::before,
.single-product #content div.product.ora-hotel::after {
  content: none;
  display: none;
}

.single-product #content div.product.ora-hotel > .ora-htop  { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.single-product #content div.product.ora-hotel > .ora-htabs { grid-column: 1 / -1; grid-row: 2; }
.single-product #content div.product.ora-hotel > .ora-hmain { grid-column: 1; grid-row: 3; min-width: 0; padding-bottom: 80px; }

/*
 * The summary becomes the aside. (1,6,2) beats Astra's width rule
 * `.woocommerce #content .ast-woocommerce-container div.product div.summary`
 * at (1,4,2) — gotcha 33. `stretch`, so the card inside has a full-height
 * column to stick within.
 */
.single-product #content div.product.ora-hotel div.summary.entry-summary.entry-summary {
  grid-column: 2;
  grid-row: 3;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 16px 0 80px;
}

/* --------------------------------------------------------------------------
   1. Breadcrumb
   -------------------------------------------------------------------------- */
.ora-hotel .ora-crumbs { padding: 18px 0; font-size: .8rem; color: var(--ora-muted); }
.ora-hotel .ora-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ora-hotel .ora-crumbs li { margin: 0; line-height: 1.65; }   /* mockup: 57px bar, measured */
.ora-hotel .ora-crumbs li a { color: inherit; text-decoration: none; transition: color .2s; }
.ora-hotel .ora-crumbs li a:hover { color: var(--ora-red); }
.ora-hotel .ora-crumbs .ora-icon { width: 13px; height: 13px; stroke: var(--ora-line); max-width: none; display: block; }
.ora-hotel .ora-crumbs [aria-current] { color: var(--ora-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   2. Gallery mosaic — chosen by photo COUNT
   -------------------------------------------------------------------------- */
.ora-hotel .ora-gal {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: clamp(320px, 44vw, 520px);
  border-radius: var(--ora-r-md);
  overflow: hidden;
}
.ora-hotel .ora-gal__item {
  position: relative;
  overflow: hidden;
  display: block;
  min-width: 0;
  min-height: 0;
  background: var(--ora-cream-200);
}
.ora-hotel .ora-gal__item:first-child { grid-row: 1 / 3; }
.ora-hotel .ora-gal__item:nth-child(n+6) { display: none; }
.ora-hotel .ora-gal .ora-gal__item img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .8s var(--ora-ease);
}
.ora-hotel .ora-gal__item:hover img { transform: scale(1.06); }

.ora-hotel .ora-gal--n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ora-hotel .ora-gal--n2,
.ora-hotel .ora-gal--n3 { grid-template-columns: 2fr 1fr; }
.ora-hotel .ora-gal--n2 .ora-gal__item:nth-child(2) { grid-row: 1 / 3; }
.ora-hotel .ora-gal--n4 .ora-gal__item:nth-child(4) { grid-column: 2 / 4; }

.ora-hotel .ora-gal__more {
  position: absolute;
  inset: 0;
  background: rgba(7, 27, 51, .62);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .03em;
  transition: background .3s;
}
.ora-hotel .ora-gal__item:hover .ora-gal__more { background: rgba(7, 27, 51, .74); }
.ora-hotel .ora-gal__more > span { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.ora-hotel .ora-gal__more .ora-icon { stroke: #fff; width: 24px; height: 24px; max-width: none; }

/* --------------------------------------------------------------------------
   3. Title block
   -------------------------------------------------------------------------- */
.ora-hotel .ora-hhead { padding: 30px 0 22px; }
.ora-hotel .ora-hhead .ora-hhead__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ora-gold);
  margin: 0 0 14px;
}
.single-product .ora-hotel .ora-htop h1.ora-hhead__title {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;
  color: var(--ora-ink);
}
.ora-hotel .ora-hhead__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: .9rem;
}
.ora-hotel .ora-hhead__loc { display: inline-flex; align-items: center; gap: 7px; color: var(--ora-body); }
.ora-hotel .ora-hhead__loc .ora-icon { stroke: var(--ora-gold); width: 16px; height: 16px; max-width: none; }
.ora-hotel .ora-hhead__rate {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: .88rem;
  color: var(--ora-body);
}
.ora-hotel .ora-hhead__stars { display: inline-flex; }
.ora-hotel .ora-hhead__stars .ora-icon { width: 16px; height: 16px; fill: var(--ora-gold-400); stroke: none; max-width: none; }
.ora-hotel .ora-hhead__board::before { content: "·"; margin-right: 13px; color: var(--ora-muted); }

/* --------------------------------------------------------------------------
   4. Amenity row
   -------------------------------------------------------------------------- */
.ora-hotel .ora-amen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 24px 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--ora-line);
  border-bottom: 1px solid var(--ora-line);
}
.ora-hotel .ora-amen li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin: 0;
  text-align: center;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ora-body);
  font-weight: 600;
}
.ora-hotel .ora-amen .ora-icon { stroke: var(--ora-gold); width: 27px; height: 27px; stroke-width: 1.35; max-width: none; }

/* --------------------------------------------------------------------------
   5. Sticky tab bar — full-bleed white with a full-bleed rule underneath
   --------------------------------------------------------------------------
   The background and the line are box-shadows, clipped to the bar's own
   height. A pseudo-element 100vmax wide would do the same visually but add
   sideways scroll; a box-shadow never contributes to scrollable overflow.
   -------------------------------------------------------------------------- */
.ora-hotel .ora-htabs {
  position: sticky;
  top: var(--ora-htabs-top);
  z-index: 60;
  margin: 0 0 8px;
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax var(--ora-line);
  clip-path: inset(0 -100vmax -1px -100vmax);
}
.ora-hotel .ora-htabs__in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ora-hotel .ora-htabs__in::-webkit-scrollbar { display: none; }
.ora-hotel .ora-htabs__in a {
  position: relative;
  padding: 17px 18px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ora-body);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
}
.ora-hotel .ora-htabs__in a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: var(--ora-red);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ora-ease);
}
.ora-hotel .ora-htabs__in a:hover,
.ora-hotel .ora-htabs__in a.is-on { color: var(--ora-red); }
.ora-hotel .ora-htabs__in a:hover::after,
.ora-hotel .ora-htabs__in a.is-on::after { transform: scaleX(1); }

/* Sections land below the stuck header and tab bar, not under them. */
.ora-hotel .ora-hsec,
.ora-hotel .ora-hsub { scroll-margin-top: calc(var(--ora-htabs-top) + var(--ora-htabs-h)); }
.ora-hotel #boeken { scroll-margin-top: calc(var(--ora-htabs-top) + var(--ora-htabs-h) + 16px); }

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
.ora-hotel .ora-hsec { padding: 38px 0; border-bottom: 1px solid var(--ora-line-2); }
.ora-hotel .ora-hsec:last-child { border-bottom: 0; }

/* (0,3,1) against Astra's `.woocommerce-js h2 { margin-bottom: .7em }` — gotcha 1. */
.ora-hotel [data-ora="hotel-main"] .ora-hsec h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;
  color: var(--ora-ink);
}
.ora-hotel [data-ora="hotel-main"] .ora-hsub { margin-top: 36px; }

.ora-hotel .ora-hsec__note { margin: 8px 0 0; font-size: .9rem; line-height: 1.6; color: var(--ora-muted); max-width: 70ch; }

/* Over dit hotel */
.ora-hotel .ora-hdesc p {
  margin: 14px 0 0;
  font-size: .96rem;
  line-height: 1.78;
  color: var(--ora-body);
  max-width: 70ch;
}
.ora-hotel .ora-hdesc strong { color: var(--ora-ink); font-weight: 700; }
.ora-hotel .ora-hdesc.is-folded > :not(:first-child) { display: none; }

.ora-hotel-page .ora-hotel button.ora-hmore,
.ora-hotel-page .ora-hotel button.ora-hmore:hover,
.ora-hotel-page .ora-hotel button.ora-hmore:focus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  font-size: .88rem;
  color: var(--ora-navy-800);
  cursor: pointer;
}
.ora-hotel-page .ora-hotel button.ora-hmore[hidden] { display: none; }
.ora-hotel-page .ora-hotel button.ora-hmore:hover { color: var(--ora-red); }
.ora-hotel .ora-hmore .ora-icon { width: 17px; height: 17px; max-width: none; transition: transform .3s var(--ora-ease); }
.ora-hotel .ora-hmore[aria-expanded="true"] .ora-icon { transform: rotate(180deg); }

/* Waarom kiezen — the mockup's checklist */
.ora-hotel .ora-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 30px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ora-hotel .ora-checks li { display: flex; gap: 11px; margin: 0; font-size: .92rem; color: var(--ora-body); line-height: 1.5; }
.ora-hotel .ora-checks .ora-icon { stroke: var(--ora-green); width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; max-width: none; }

/* --------------------------------------------------------------------------
   7. Room cards
   --------------------------------------------------------------------------
   The mockup's cards carry a photo column. No hotel has room photos (the
   mockup's are stock), so the photo column is left out rather than filled.
   -------------------------------------------------------------------------- */
.ora-hotel .ora-rooms { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.ora-hotel .ora-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 14px 18px 22px;
  border: 1.5px solid var(--ora-line);
  border-radius: var(--ora-r-md);
  background: #fff;
  transition: border-color .25s, box-shadow .25s var(--ora-ease);
}
.ora-hotel .ora-room:hover { border-color: var(--ora-gold-200); box-shadow: var(--ora-s-md); }

/* With the hotel's own room photo (#154): the mockup's 190px, 4:3 column. */
.ora-hotel .ora-room.ora-room--img {
  grid-template-columns: 190px minmax(0, 1fr) auto;
  padding: 14px;
}
.ora-hotel .ora-room__img { border-radius: var(--ora-r-sm); overflow: hidden; background: var(--ora-cream-200); }
.ora-hotel .ora-room .ora-room__img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ora-hotel .ora-room.is-sel { border-color: var(--ora-navy-800); background: var(--ora-cream); }
.ora-hotel [data-ora="hotel-main"] .ora-room h3 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;   /* the mockup's h3; measured 18.6px at 1.04rem */
  color: var(--ora-ink);
}
.ora-hotel .ora-room__facts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 9px 0 0; }
.ora-hotel .ora-room__facts span { display: inline-flex; align-items: center; gap: 6px; font-size: .79rem; color: var(--ora-muted); font-weight: 600; }
.ora-hotel .ora-room__facts .ora-icon { stroke: var(--ora-gold); width: 14px; height: 14px; max-width: none; }
.ora-hotel .ora-room__tag {
  display: inline-block;
  background: var(--ora-navy-800);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--ora-r-xs);
  margin-bottom: 8px;
}
.ora-hotel .ora-room__tag[hidden] { display: none; }
.ora-hotel .ora-room__buy { text-align: right; padding-right: 8px; min-width: 170px; }
.ora-hotel .ora-room__p { display: block; font-size: 1.28rem; font-weight: 800; color: var(--ora-navy-800); line-height: 1.15; }
.ora-hotel .ora-room__p .woocommerce-Price-amount { color: inherit; }
.ora-hotel .ora-room__pp { display: block; font-size: .75rem; color: var(--ora-muted); font-weight: 600; }
.ora-hotel .ora-room__buy .ora-btn.ora-btn { margin-top: 10px; width: 100%; padding: 11px 16px; font-size: .82rem; }

/* --------------------------------------------------------------------------
   7b. Ligging — the real address and a Google Maps link (#153)
   The mockup draws a map beside a distance list. There is no real map (an
   embed would load a third party, B7), so the address gets the card.
   -------------------------------------------------------------------------- */
.ora-hotel .ora-hloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--ora-line);
  border-radius: var(--ora-r-md);
  background: var(--ora-cream);
}
.ora-hotel .ora-hloc__card { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 320px; }
.ora-hotel .ora-hloc__pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ora-gold-050);
}
.ora-hotel .ora-hloc__pin .ora-icon { width: 22px; height: 22px; stroke: var(--ora-gold); max-width: none; }
.ora-hotel .ora-hloc__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ora-hotel .ora-hloc__text b { font-size: .98rem; font-weight: 800; color: var(--ora-ink); }
.ora-hotel .ora-hloc__text address { font-style: normal; font-size: .92rem; line-height: 1.55; color: var(--ora-body); overflow-wrap: anywhere; margin: 0; }
.ora-hotel .ora-hloc__area { font-size: .82rem; color: var(--ora-muted); font-weight: 600; }
.ora-hotel .ora-hloc .ora-hloc__btn.ora-btn { flex: none; gap: 8px; }
.ora-hotel .ora-hloc__btn .ora-icon { width: 17px; height: 17px; max-width: none; }

@media (max-width: 760px) {
  .ora-hotel .ora-hloc .ora-hloc__btn.ora-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   8. Review scores — a citation, not a badge (#138)
   -------------------------------------------------------------------------- */
.ora-hotel .ora-hrev {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ora-hotel .ora-hrev__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--ora-line);
  border-radius: var(--ora-r-md);
  background: #fff;
}
.ora-hotel .ora-hrev__score {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 10px 14px;
  border-radius: var(--ora-r-sm);
  background: var(--ora-cream);
  border: 1px solid var(--ora-cream-200);
  color: var(--ora-navy-800);
}
.ora-hotel .ora-hrev__score strong { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.ora-hotel .ora-hrev__scale { font-size: .85rem; font-weight: 700; opacity: .72; }
.ora-hotel .ora-hrev__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .88rem; line-height: 1.45; color: var(--ora-body); }
.ora-hotel .ora-hrev__source { font-weight: 800; color: var(--ora-navy-800); }
.ora-hotel .ora-hrev__source a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ora-gold-200); }
.ora-hotel .ora-hrev__checked { font-size: .82rem; opacity: .8; }

/* --------------------------------------------------------------------------
   8b. Video's — click-to-play (#165)
   ⚠️ The thumbnail is ours; YouTube loads only when the visitor presses play.
   -------------------------------------------------------------------------- */
.ora-hotel .ora-hvid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ora-hotel .ora-hvid__item { min-width: 0; margin: 0; }
.ora-hotel .ora-hvid__play,
.ora-hotel .ora-hvid__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ora-r-md);
  background: var(--ora-navy-800);
}
.ora-hotel .ora-hvid__play img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ora-hotel .ora-hvid__play:hover img,
.ora-hotel .ora-hvid__play:focus-visible img { transform: scale(1.03); }
.ora-hotel .ora-hvid__btn {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(10, 31, 61, .82);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  transition: background .2s ease, transform .2s ease;
}
.ora-hotel .ora-hvid__btn svg { margin-left: 3px; }
.ora-hotel .ora-hvid__play:hover .ora-hvid__btn,
.ora-hotel .ora-hvid__play:focus-visible .ora-hvid__btn { background: var(--ora-red); transform: scale(1.06); }
.ora-hotel .ora-hvid__play:focus-visible { outline: 3px solid var(--ora-gold); outline-offset: 3px; }
.ora-hotel .ora-hvid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ora-hotel .ora-hvid__title { margin: 10px 0 0; font-weight: 800; line-height: 1.35; color: var(--ora-navy-800); }
.ora-hotel .ora-hvid__by { margin: 2px 0 0; font-size: .82rem; opacity: .75; }

/* --------------------------------------------------------------------------
   9. Wat is inbegrepen
   ⚠️ The transfer and the flight stay in the right-hand column (#51).
   -------------------------------------------------------------------------- */
.ora-hotel .ora-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 22px; }
.ora-hotel [data-ora="hotel-main"] .ora-incl h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;
  color: var(--ora-ink);
  text-transform: none;
}
.ora-hotel .ora-incl h3 .ora-icon { width: 19px; height: 19px; max-width: none; }
.ora-hotel .ora-incl ul { margin: 0; padding: 0; list-style: none; }
.ora-hotel .ora-incl li { display: flex; gap: 11px; margin: 0; padding: 6px 0; font-size: .9rem; line-height: 1.5; color: var(--ora-body); }
.ora-hotel .ora-incl li .ora-icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; max-width: none; }
.ora-hotel .ora-incl__col--yes .ora-icon { stroke: var(--ora-green); }
.ora-hotel .ora-incl__col--no .ora-icon { stroke: var(--ora-muted); }
.ora-hotel .ora-incl__col--no li { color: var(--ora-muted); }

/* --------------------------------------------------------------------------
   10. Veelgestelde vragen
   -------------------------------------------------------------------------- */
.ora-hotel .ora-hfaq { margin-top: 20px; border-top: 1px solid var(--ora-line); }
.ora-hotel .ora-hfaq details { border-bottom: 1px solid var(--ora-line); }
.ora-hotel .ora-hfaq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 2px;
  cursor: pointer;
  font-weight: 700;
  font-size: .96rem;
  color: var(--ora-ink);
  list-style: none;
}
.ora-hotel .ora-hfaq summary::-webkit-details-marker { display: none; }
.ora-hotel .ora-hfaq summary::marker { content: ""; }
.ora-hotel .ora-hfaq summary .ora-icon { stroke: var(--ora-gold); flex-shrink: 0; width: 20px; height: 20px; max-width: none; transition: transform .3s var(--ora-ease); }
.ora-hotel .ora-hfaq details[open] summary { color: var(--ora-red); }
.ora-hotel .ora-hfaq details[open] summary .ora-icon { transform: rotate(180deg); }
.ora-hotel .ora-hfaq p { margin: 0; padding: 0 2px 20px; font-size: .92rem; line-height: 1.75; color: var(--ora-body); max-width: 72ch; }

/* --------------------------------------------------------------------------
   11. The aside: the booking card sticks, the reassurance box follows it
   -------------------------------------------------------------------------- */
.ora-hotel .ora-hside {
  position: sticky;
  top: calc(var(--ora-htabs-top) + var(--ora-htabs-h) + 16px);
}
/* The card is ora-booking's; only its width is ours. */
.ora-hotel .ora-hside .ora-bform { width: 100%; max-width: none; }

/*
 * ⚠️ The mockup's aside is 372px — narrower than the 42% column the card was
 * designed in — and a native date input has an intrinsic width it will not
 * shrink below. In a two-column grid the dates and the room select hung ~20px
 * out of the card's right edge on the bookable DEMO hotel. No page-level
 * overflow, so check-pages passed; the screenshot showed it (gotcha 35).
 * Each date gets the full width; the grid tracks and the controls may shrink.
 */
.ora-hotel .ora-hside [data-ora="booking-form"] .ora-bform__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ora-hotel .ora-hside [data-ora="booking-form"] .ora-bform__grid > .ora-bfld:nth-child(-n+2) { grid-column: 1 / -1; }
.ora-hotel .ora-hside [data-ora="booking-form"] .ora-bfld { min-width: 0; }
.ora-hotel .ora-hside [data-ora="booking-form"] .ora-bfld input,
.ora-hotel .ora-hside [data-ora="booking-form"] .ora-bfld select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ora-hotel .ora-btrust {
  margin-top: 18px;
  background: var(--ora-green-050);
  border: 1px solid var(--ora-green-200);
  border-radius: var(--ora-r-sm);
  padding: 16px 18px;
}
.ora-hotel .ora-btrust b { display: block; font-size: .87rem; color: var(--ora-ink); margin-bottom: 10px; }
.ora-hotel .ora-btrust ul { margin: 0; padding: 0; list-style: none; }
.ora-hotel .ora-btrust li { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: .83rem; line-height: 1.45; color: var(--ora-body); padding: 3px 0; }
.ora-hotel .ora-btrust .ora-icon { stroke: var(--ora-green); width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; max-width: none; }

/* --------------------------------------------------------------------------
   12. Mobile booking bar (off above 760px) and the lightbox
   -------------------------------------------------------------------------- */
.ora-mbar { display: none; }

.ora-lb {
  width: min(1100px, 94vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.ora-lb::backdrop { background: rgba(7, 27, 51, .9); }
.ora-lb__fig { margin: 0; text-align: center; }
.ora-lb__fig img { display: block; margin: 0 auto; max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: var(--ora-r-sm); }
.ora-lb__fig figcaption { margin-top: 12px; color: rgba(255, 255, 255, .8); font-size: .85rem; font-weight: 600; }

.ora-hotel-page .ora-lb button.ora-lb__btn,
.ora-hotel-page .ora-lb button.ora-lb__btn:hover,
.ora-hotel-page .ora-lb button.ora-lb__btn:focus {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ora-navy-800);
  box-shadow: var(--ora-s-md);
  cursor: pointer;
}
.ora-lb .ora-lb__btn .ora-icon { width: 22px; height: 22px; max-width: none; stroke: var(--ora-navy-800); }
.ora-lb .ora-lb__close { top: -58px; right: 0; }
.ora-lb .ora-lb__prev { left: -64px; top: 50%; transform: translateY(-50%); }
.ora-lb .ora-lb__prev .ora-icon { transform: rotate(180deg); }
.ora-lb .ora-lb__next { right: -64px; top: 50%; transform: translateY(-50%); }
.ora-lb.is-single .ora-lb__prev,
.ora-lb.is-single .ora-lb__next { display: none; }

/* --------------------------------------------------------------------------
   13. Breakpoints — the mockup's 1100 and 760
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .single-product #content div.product.ora-hotel { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  /* One column: the card comes straight after the tabs, not after every section. */
  .single-product #content div.product.ora-hotel div.summary.entry-summary.entry-summary { grid-column: 1; grid-row: 3; padding: 24px 0 8px; }
  .single-product #content div.product.ora-hotel > .ora-hmain { grid-column: 1; grid-row: 4; }
  .ora-hotel .ora-hside { position: static; }
  .ora-lb .ora-lb__prev { left: 8px; }
  .ora-lb .ora-lb__next { right: 8px; }
  .ora-lb .ora-lb__close { top: 8px; right: 8px; }
}

/* The mockup's "Bekijk op kaart" (.hd-meta a) — gold, bold, underlined. */
.ora-hotel .ora-hhead__meta a.ora-hhead__maplink {
  color: var(--ora-gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.ora-hotel .ora-hhead__meta a.ora-hhead__maplink:hover { color: var(--ora-red); }

@media (max-width: 760px) {
  .ora-hotel .ora-room.ora-room--img { grid-template-columns: 1fr; }
  .ora-hotel .ora-room .ora-room__img img { aspect-ratio: 16 / 9; }
  body.ora-hotel-page { --ora-htabs-top: 71px; --ora-htabs-h: 54px; padding-bottom: 78px; }   /* under the stuck header, 71px here too (measured at 390) */

  .ora-hotel .ora-gal,
  .ora-hotel .ora-gal--n3,
  .ora-hotel .ora-gal--n4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.4fr 1fr;
    height: auto;
    aspect-ratio: 4 / 3.4;
  }
  .ora-hotel .ora-gal .ora-gal__item:first-child { grid-column: 1 / -1; grid-row: 1; }
  .ora-hotel .ora-gal .ora-gal__item:nth-child(n+4) { display: none; }
  .ora-hotel .ora-gal--n4 .ora-gal__item:nth-child(4) { grid-column: auto; }
  .ora-hotel .ora-gal--n2 .ora-gal__item:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  /* The "all photos" tile is hidden with the 4th/5th, so put the count on the 3rd. */
  .ora-hotel .ora-gal .ora-gal__item:nth-child(3)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 27, 51, .35);
  }

  .ora-hotel .ora-amen { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .ora-hotel .ora-checks,
  .ora-hotel .ora-incl { grid-template-columns: 1fr; }
  .ora-hotel .ora-room { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .ora-hotel .ora-room__buy { text-align: left; padding-right: 0; min-width: 0; }

  .ora-hotel-page .ora-mbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    background: #fff;
    border-top: 1px solid var(--ora-line);
    box-shadow: 0 -8px 24px -12px rgba(7, 27, 51, .3);
    padding: 12px 20px;
  }
  .ora-mbar__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .ora-mbar__price b { font-size: 1.2rem; font-weight: 800; color: var(--ora-navy-800); line-height: 1.1; display: block; }
  .ora-mbar__price b .woocommerce-Price-amount { color: inherit; }
  .ora-mbar__price small { font-size: .74rem; color: var(--ora-muted); font-weight: 600; display: block; }
  .ora-mbar .ora-btn.ora-btn { padding: 14px 22px; flex-shrink: 0; }

  /* Lift the WhatsApp button above the booking bar instead of on top of it. */
  /* 108, not 92: the bar is ~85px when its price wraps to three lines, and 92
     left a 7px gap (measured by the interaction test). */
  body.ora-hotel-page .ora-wa.ora-wa { bottom: 108px; }
}