/* Maison Travel — front-end styling. Airbnb-inspired design system (DESIGN-airbnb.md).
   Pure white canvas, Rausch accent, Inter (Cereal substitute), soft rounded photo-first cards.
   Scoped under .maison-* to avoid theme clashes. */
:root {
  --m-rausch: #ff385c;
  --m-rausch-active: #e00b41;
  --m-ink: #222222;
  --m-body: #3f3f3f;
  --m-muted: #6a6a6a;
  --m-muted-soft: #929292;
  --m-hairline: #dddddd;
  --m-hairline-soft: #ebebeb;
  --m-strong: #c1c1c1;
  --m-canvas: #ffffff;
  --m-soft: #f7f7f7;
  --m-fill: #f2f2f2;
  --m-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px 0, rgba(0,0,0,.1) 0 4px 8px 0;
  --m-r-sm: 8px;
  --m-r-md: 14px;
  --m-r-full: 9999px;
  --m-sans: "Inter", "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
}

.maison-wrap { font-family: var(--m-sans); color: var(--m-ink); max-width: 1280px; margin: 0 auto; }
/* Landing pages (the WP front page AND any duplicate of it) are 100% Maison shortcodes — let their
   content column span the full header (wide) width so the hero, The Bait, and Curated Collections
   line up with the site header instead of the narrower 1120px reading column. Other pages keep the
   theme's default contentSize. */
body.home .entry-content.wp-block-post-content,
body.maison-landing .entry-content.wp-block-post-content,
body.maison-account-page .entry-content.wp-block-post-content { max-width: 1280px; }
/* Collapse the page template's top spacing on landing duplicates (page.html sets an inline 40px
   padding + a block-gap) so the full-bleed hero can sit flush against the header. */
body.maison-landing:not(.home) main.wp-block-group { margin-top: 0 !important; padding-top: 0 !important; }
body.maison-landing:not(.home) main > .entry-content { margin-top: 0 !important; }
/* The front-page template shows no post title; hide it on duplicate landing pages so they match. */
body.maison-landing:not(.home) .wp-block-post-title,
body.maison-landing:not(.home) .entry-title { display: none; }

/* Full-bleed hero on landing duplicates (the V2 variant): break the hero out of the content column
   to span the whole viewport, edge-to-edge with squared corners. Its inner content stays centered.
   The Bait + Curated Collections below keep the normal container width. */
body.maison-landing:not(.home) .maison-hero {
  position: relative; left: 50%; width: 100vw; max-width: 100vw;
  margin-left: -50vw; margin-right: -50vw; margin-top: 0; margin-bottom: 34px; border-radius: 0;
  padding-bottom: 74px; /* room for the divider so badges clear it */
}
body.maison-landing:not(.home) .maison-hero__video,
body.maison-landing:not(.home) .maison-hero__poster,
body.maison-landing:not(.home) .maison-hero__tint,
body.maison-landing:not(.home) .maison-hero__bg { border-radius: 0; }
/* Subtle wave divider at the hero bottom — a gentle white swoop into the content below. */
body.maison-landing:not(.home) .maison-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; z-index: 3;
  pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C360,36 1080,8 1440,22 L1440,40 L0,40 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.maison-wrap *, .maison-wrap *::before, .maison-wrap *::after { box-sizing: border-box; }

/* ---- Search bar (pill with segments + Rausch orb) ---- */
.maison-searchbar {
  display: flex; align-items: stretch; background: var(--m-canvas);
  border: 1px solid var(--m-hairline); border-radius: var(--m-r-full);
  box-shadow: var(--m-shadow); padding: 6px 8px 6px 6px; margin: 8px 0 28px; gap: 0;
  text-align: left; /* reset any inherited centering (e.g. inside the hero) so labels align with their values */
}
.maison-seg { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 20px; position: relative; flex: 1 1 0; }
.maison-seg + .maison-seg::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--m-hairline); }
.maison-seg__label { font-size: 12px; font-weight: 600; color: var(--m-ink); letter-spacing: .01em; }
.maison-seg__input { border: 0; background: transparent; padding: 2px 0; font-size: 14px; font-family: var(--m-sans); color: var(--m-ink); width: 100%; min-width: 90px; }
.maison-seg__input:focus { outline: none; }
.maison-seg__input::placeholder { color: var(--m-muted-soft); }

/* "Where" suggested destinations */
.maison-seg--where { position: relative; }
.maison-where__pop { position: absolute; top: calc(100% + 16px); left: 0; z-index: 30; width: 480px; max-width: 92vw;
  max-height: 440px; overflow-y: auto; background: #fff; border: 1px solid var(--m-hairline-soft); border-radius: var(--m-r-md);
  box-shadow: var(--m-shadow); padding: 18px 8px 12px; }
/* Two-column "Popular Domestic / Popular Global" curated layout (client brief §2/3). */
.maison-where__cols { display: flex; gap: 6px; }
.maison-where__col { flex: 1 1 0; min-width: 0; }
.maison-where__cols .maison-where__item { gap: 10px; padding: 8px 12px; }
.maison-where__cols .maison-where__icon { width: 34px; height: 34px; border-radius: 9px; }
.maison-where__cols .maison-where__icon svg { width: 18px; height: 18px; }
/* ── Browse by Premium Hotel Brands carousel (brief §5). Media is a monogram placeholder; the
   designer swaps in real brand imagery via `.maison-brand__media { background-image: ... }`. ── */
.maison-brands { margin: 48px 0 8px; }
.maison-brands__head { margin-bottom: 18px; }
.maison-brands__title { font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--m-ink); margin: 0; }
.maison-brands__sub { color: var(--m-muted); margin: 6px 0 0; font-size: 14px; }
/* Homepage: widen the Maison content from the block theme's 1120 content-size to the design's 1280 so
   the hero + brand carousel share one aligned width. Scoped to the front page. */
.home main.is-layout-constrained > .entry-content,
.home .entry-content > .maison-wrap,
.home .entry-content > .maison-brands { max-width: 1280px; }
/* Carousel scrolls within the 1280 wrap (aligned with the hero). */
.maison-brands__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 20px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* Photo-first overlay card (brand name centred over the media). Gradient placeholder → swap for a real
   brand photo via `.maison-brand { background-image: url(...) }`, no markup change. */
.maison-brand { position: relative; scroll-snap-align: start; flex: 0 0 288px; aspect-ratio: 7 / 5;
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  border-radius: 18px; text-decoration: none; color: #fff;
  background: radial-gradient(130% 130% at 28% 18%, var(--ga, #3a3350), var(--gb, #14141c));
  background-size: cover; background-position: center;
  box-shadow: 0 2px 10px rgba(16,16,20,.10); transition: transform .28s var(--m-ease), box-shadow .28s var(--m-ease); }
.maison-brand:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(16,16,20,.26); }
.maison-brand__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--m-ease); }
.maison-brand:hover .maison-brand__img { transform: scale(1.06); }
.maison-brand__tint { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,16,.12) 0%, rgba(10,10,16,.30) 52%, rgba(10,10,16,.64) 100%); }
.maison-brand__overlay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; }
.maison-brand__name { font-family: Georgia, 'Times New Roman', serif; font-size: 27px; font-weight: 600;
  line-height: 1.12; color: #fff; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.maison-brand__sub { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9); letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.4); }
/* Active hotel-brand filter chip on the results page. */
.maison-brandchip { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 7px 14px;
  background: var(--m-fill); border-radius: 999px; font-size: 13.5px; color: var(--m-ink); }
.maison-brandchip__clear { text-decoration: none; color: var(--m-muted); font-size: 18px; line-height: 1; }
.maison-brandchip__clear:hover { color: var(--m-ink); }
/* ── Results page: left sidebar (map + filters + name search) / right list (brief §6) ── */
.maison-reslayout { display: flex; gap: 24px; align-items: flex-start; }
.maison-resaside { flex: 0 0 258px; position: sticky; top: 88px;
  /* Sidebar can be taller than the viewport (map + filters) — cap it to the screen and let it scroll
     internally so the whole panel, incl. the "Show stays" button, stays reachable while it stays pinned. */
  max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
.maison-resaside__inner { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--m-hairline-soft);
  border-radius: var(--m-r-md); padding: 16px; background: #fff; }
.maison-resmain { flex: 1 1 auto; min-width: 0; }
/* Inline filters panel in the results sidebar (brief §6) — filters live here, not in a modal. */
.maison-fpanel { margin-top: 12px; border: 1px solid var(--m-hairline-soft); border-radius: var(--m-r-md); background: #fff; }
.maison-fpanel__body { padding: 2px 16px; }
.maison-fpanel .maison-fsec { padding: 16px 0; }
.maison-fpanel .maison-fsec__title { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.maison-fpanel .maison-fsec__sub { display: none; }
.maison-fpanel .maison-fpills { gap: 8px; }
.maison-fpanel .maison-fpill { padding: 7px 13px; font-size: 13px; }
/* Price controls fit the narrow sidebar (the MIN/MAX pills otherwise overflow + get clipped). */
.maison-fpanel .maison-price__inputs { gap: 10px; margin-top: 18px; }
.maison-fpanel .maison-price__pill { flex: 1 1 0; min-width: 0; padding: 8px 12px; border-radius: 10px; }
.maison-fpanel .maison-price__pill small { letter-spacing: .03em; }
.maison-fpanel .maison-price__pill b { font-size: 14px; }
.maison-fpanel .maison-price__hist { height: 52px; }
.maison-fpanel .maison-price__bar.is-in { background: rgba(17, 17, 20, .28); } /* muted, not a wall of loud pink */
.maison-fpanel__foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--m-hairline-soft); }
.maison-fpanel__clear { border: 0; background: none; color: var(--m-muted); font-size: 13.5px; cursor: pointer; text-decoration: underline; padding: 4px; }
.maison-fpanel__clear:hover { color: var(--m-ink); }
.maison-fpanel__apply { flex: 1 1 auto; padding: 10px 14px; font-size: 14px; }
/* Mobile drawer header + the mobile "Filters" trigger are hidden on desktop (panel is inline there). */
.maison-fpanel__mhead { display: none; }
.maison-filtersmobile { display: none; }
.maison-mapbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 11px 14px; border: 1px solid var(--m-ink); border-radius: 999px; background: var(--m-ink); color: #fff;
  font-weight: 600; font-size: 14px; cursor: pointer; }
.maison-mapbtn:hover { opacity: .9; }
.maison-nsearch { display: flex; flex-direction: column; gap: 6px; }
.maison-nsearch__input { width: 100%; padding: 9px 12px; border: 1px solid var(--m-hairline); border-radius: var(--m-r-sm); font-size: 14px; }
.maison-sortbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 14px; }
.maison-sortbar__count { margin-right: auto; color: var(--m-muted); font-size: 14px; }
/* Phones: the sort bar can't fit count + Filters + view toggle + sort pill on one row — put the
   count on its own line, then Filters (left) · toggle · sort spread across the second row. */
@media (max-width: 600px) {
  .maison-sortbar { flex-wrap: wrap; gap: 10px 8px; }
  .maison-sortbar__count { flex: 1 1 100%; margin: 0; order: -1; }
  .maison-filtersmobile { margin-right: auto; }
  .maison-sortbar .maison-filter { height: 40px; padding: 0 12px; min-width: 0; }
  .maison-sortbar .maison-filter__select { min-width: 0; }
}
.maison-mapmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.maison-mapmodal[hidden] { display: none; }
.maison-mapmodal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.maison-mapmodal__panel { position: relative; width: 92vw; height: 86vh; max-width: 1100px; background: #fff;
  border-radius: var(--m-r-md); overflow: hidden; box-shadow: var(--m-shadow); }
.maison-mapmodal__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.22); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: var(--m-ink);
  transition: background .15s var(--m-ease), transform .15s var(--m-ease); }
.maison-mapmodal__close:hover { background: var(--m-soft); transform: scale(1.06); }
.maison-mapmodal__canvas { width: 100%; height: 100%; background: var(--m-soft); }
.maison-mapmodal__canvas[data-empty]::after { content: "No mappable hotels here."; display: flex; align-items: center;
  justify-content: center; height: 100%; color: var(--m-muted); }
/* Map info-window property card (image + name + price + CTA). Overrides Google's default IW chrome. */
.maison-mapiw { width: 236px; font-family: var(--m-sans); }
.maison-mapiw__img { display: block; width: 100%; height: 138px; object-fit: cover; background: var(--m-soft); }
.maison-mapiw__body { padding: 12px 15px 15px; }
.maison-mapiw__name { font-size: 15.5px; font-weight: 600; color: var(--m-ink); line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.maison-mapiw__price { margin-top: 5px; font-size: 16px; font-weight: 700; color: var(--m-ink); letter-spacing: -.01em; }
.maison-mapiw__btn { display: block; margin-top: 13px; padding: 10px 14px; border-radius: 999px; background: var(--m-ink);
  color: #fff; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; outline: none;
  transition: opacity .15s var(--m-ease), transform .12s var(--m-ease); }
.maison-mapiw__btn:hover { opacity: .9; color: #fff; }
.maison-mapiw__btn:active { transform: scale(.98); }
.maison-mapiw__btn:focus-visible { box-shadow: 0 0 0 3px rgba(17,17,20,.28); }
/* Strip Google's default InfoWindow chrome so our card sits flush + edge-to-edge in the bubble. */
.maison-mapmodal .gm-style .gm-style-iw.gm-style-iw-c { padding: 0 !important; max-width: none !important;
  border-radius: 16px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.26); }
.maison-mapmodal .gm-style .gm-style-iw-d { padding: 0 !important; overflow: hidden !important; max-width: none !important; }
/* Hide Google's built-in close button + the white space it reserves — the card is self-contained
   (click the map or another pin to dismiss), so the ugly grey notch at the top goes away. */
.maison-mapmodal .gm-style .gm-style-iw .gm-ui-hover-effect { display: none !important; }
.maison-mapmodal .gm-style .gm-style-iw-tc::after { background: #fff; }
@media (max-width: 900px) {
  /* align-items:stretch (base is flex-start) so the stacked columns take the parent's width instead
     of their content's min-content width — otherwise .maison-resmain balloons past the viewport. */
  .maison-reslayout { flex-direction: column; align-items: stretch; }
  .maison-resaside { position: static; flex-basis: auto; width: 100%; max-height: none; overflow: visible; }
  .maison-resmain { width: 100%; min-width: 0; }
  /* On mobile the filters go back to the old pattern: a "Filters" button in the sort bar opens the
     panel as a bottom-sheet drawer (the sidebar just holds map + name search). The panel is a child
     of .maison-resaside, so DON'T hide it with `display:none` (that beat the drawer rule below and
     the drawer never opened) — position:fixed + translateY off-screen hides it out of flow instead. */
  .maison-filtersmobile { display: inline-flex; align-items: center; gap: 7px; margin-right: 12px; padding: 8px 15px;
    border: 1px solid var(--m-ink); border-radius: 999px; background: #fff; color: var(--m-ink);
    font-size: 14px; font-weight: 600; cursor: pointer; }
  .maison-filtersmobile svg { flex: 0 0 auto; }
  /* The drawer: the same #maison-filters panel, fixed to the bottom, slides up when .is-open. */
  .maison-resaside .maison-fpanel { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1200;
    margin: 0; max-height: 88vh; border: 0; border-radius: 18px 18px 0 0; box-shadow: var(--m-shadow);
    overflow-y: auto; transform: translateY(100%); transition: transform .3s var(--m-ease);
    visibility: hidden; }
  .maison-fpanel.is-open { transform: none; visibility: visible; }
  .maison-fpanel__mhead { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0;
    z-index: 1; padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--m-hairline-soft); }
  .maison-fpanel__mtitle { font-size: 17px; font-weight: 600; }
  .maison-fpanel__mclose { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--m-muted); cursor: pointer; }
  .maison-fpanel__foot { position: sticky; bottom: 0; background: #fff; }
  /* Dim backdrop behind the drawer + lock the page scroll while it's open. */
  body.maison-filters-open { overflow: hidden; }
  body.maison-filters-open::after { content: ""; position: fixed; inset: 0; z-index: 1150; background: rgba(0,0,0,.5); }
}
/* ── Google One-Tap sign-in prompt (brief §9): auto-popup, top-right ── */
.maison-onetap { position: fixed; top: 78px; right: 20px; z-index: 1100; width: 322px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--m-hairline-soft); border-radius: 14px; box-shadow: var(--m-shadow);
  padding: 18px 18px 16px; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s var(--m-ease), transform .25s var(--m-ease); }
.maison-onetap.is-in { opacity: 1; transform: none; }
.maison-onetap[hidden] { display: none; }
.maison-onetap__close { position: absolute; top: 8px; right: 10px; border: none; background: none; font-size: 20px;
  line-height: 1; color: var(--m-muted); cursor: pointer; }
.maison-onetap__head { display: flex; align-items: center; gap: 10px; padding-right: 16px; }
.maison-onetap__title { font-weight: 600; font-size: 14.5px; color: var(--m-ink); }
.maison-onetap__sub { color: var(--m-muted); font-size: 12.5px; margin: 8px 0 14px; }
.maison-onetap__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 1px solid var(--m-hairline); border-radius: 999px; background: #fff; color: var(--m-ink);
  font-weight: 600; font-size: 14px; cursor: pointer; transition: background .16s var(--m-ease); }
.maison-onetap__btn:hover { background: var(--m-soft); }
@media (max-width: 520px) { .maison-onetap { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }
/* "Continue with Google" button + divider inside the login/registration modal (brief §9). */
.maison-auth__google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 11px 14px; border: 1px solid var(--m-hairline); border-radius: 999px; background: #fff; color: var(--m-ink);
  font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background .16s var(--m-ease); }
.maison-auth__google:hover { background: var(--m-soft); }
.maison-auth__soon { font-size: 12.5px; color: var(--m-muted); margin: 8px 2px 0; }
.maison-auth__or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--m-muted); font-size: 12.5px; }
.maison-auth__or::before, .maison-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--m-hairline-soft); }
.maison-where__title { font-size: 13px; font-weight: 600; color: var(--m-ink); padding: 0 16px 8px; }
.maison-where__list { list-style: none; margin: 0; padding: 0; }
.maison-where__item { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: var(--m-r-sm); cursor: pointer; }
.maison-where__item:hover { background: var(--m-soft); }
.maison-where__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: var(--m-fill); display: flex; align-items: center; justify-content: center; }
.maison-where__icon svg { width: 24px; height: 24px; }
.maison-where__txt { display: flex; flex-direction: column; }
.maison-where__t { font-size: 15px; font-weight: 500; color: var(--m-ink); }
.maison-where__s { font-size: 14px; color: var(--m-muted); }

/* "When" calendar range picker */
.maison-seg--when { cursor: pointer; }
.maison-when__toggle { border: 0; background: transparent; padding: 2px 0; font-size: 14px; font-family: var(--m-sans); color: var(--m-ink); text-align: left; cursor: pointer; }
.maison-when__toggle.is-empty { color: var(--m-muted-soft); }
.maison-when__pop { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 30;
  width: 720px; max-width: 92vw; background: #fff; border: 1px solid var(--m-hairline-soft); border-radius: var(--m-r-md);
  box-shadow: var(--m-shadow); padding: 24px; }
.maison-when__cal { position: relative; }
.maison-cal__nav { position: absolute; top: 2px; left: 0; right: 0; display: flex; justify-content: space-between; }
.maison-cal__arrow { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--m-ink); cursor: pointer; }
.maison-cal__arrow:hover:not(:disabled) { background: var(--m-soft); }
.maison-cal__arrow:disabled { color: #dcdcdc; cursor: default; }
.maison-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.maison-cal__title { text-align: center; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.maison-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.maison-cal__wd { text-align: center; font-size: 12px; color: var(--m-muted); padding-bottom: 8px; }
.maison-cal__day { border: 0; background: transparent; aspect-ratio: 1; border-radius: 50%; font-size: 14px; color: var(--m-ink); cursor: pointer; font-family: var(--m-sans); }
.maison-cal__day:hover:not(:disabled):not(.is-selected) { box-shadow: inset 0 0 0 1px var(--m-ink); }
.maison-cal__day.is-disabled { color: #dcdcdc; cursor: default; }
.maison-cal__day.is-range { background: var(--m-soft); border-radius: 0; }
.maison-cal__day.is-selected { background: var(--m-ink); color: #fff; }
@media (max-width: 744px) { .maison-cal__months { grid-template-columns: 1fr; gap: 24px; } }

/* "Who" stepper popover */
.maison-seg--who { cursor: pointer; }
/* Kill the default UA focus ring on search-bar controls; a subtle keyboard ring only on buttons.
   Text inputs get no ring — the caret already signals focus, and a ring on a full-width field
   looks like an error state. */
.maison-searchbar :focus, .maison-resv :focus { outline: none; }
.maison-searchbar button:focus-visible, .maison-resv button:focus-visible { box-shadow: 0 0 0 2px rgba(255,56,92,.35); border-radius: var(--m-r-sm); }
.maison-seg__input:focus, .maison-seg__input:focus-visible { outline: none; box-shadow: none; }
.maison-who__toggle { border: 0; background: transparent; padding: 2px 0; font-size: 14px; font-family: var(--m-sans); color: var(--m-ink); text-align: left; cursor: pointer; }
.maison-who__toggle.is-empty { color: var(--m-muted-soft); }
.maison-who__pop { position: absolute; top: calc(100% + 16px); right: 0; z-index: 30; width: 340px; max-width: 90vw;
  background: #fff; border: 1px solid var(--m-hairline-soft); border-radius: var(--m-r-md); box-shadow: var(--m-shadow); padding: 6px 22px; }
.maison-who__row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.maison-who__row + .maison-who__row { border-top: 1px solid var(--m-hairline-soft); }
.maison-who__t { font-size: 15px; font-weight: 600; color: var(--m-ink); }
.maison-who__s { font-size: 13px; color: var(--m-muted); margin-top: 2px; }
.maison-stepper { display: flex; align-items: center; gap: 12px; }
.maison-stepper button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--m-strong); background: #fff; color: var(--m-ink);
  font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s; }
.maison-stepper button:hover:not(:disabled) { border-color: var(--m-ink); }
.maison-stepper button:disabled { border-color: var(--m-hairline-soft); color: #d4d4d4; cursor: not-allowed; }
.maison-stepper span { min-width: 22px; text-align: center; font-size: 15px; color: var(--m-ink); }
/* Per-child age picker beneath the Children stepper (TBO prices by child age). */
.maison-who__ages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; padding: 6px 0 4px; }
.maison-who__ages[hidden] { display: none; }
.maison-childage { display: flex; flex-direction: column; gap: 6px; }
.maison-childage > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--m-muted); }
.maison-childage select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; padding: 8px 32px 8px 12px; height: 40px;
  border: 1px solid var(--m-strong); border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--m-ink); background-color: #fff; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
  transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease); }
.maison-childage select:hover { border-color: var(--m-ink); }
.maison-childage select:focus { outline: none; border-color: var(--m-ink); box-shadow: 0 0 0 2px rgba(17,17,17,.08); }
.maison-orb {
  flex: 0 0 auto; align-self: center; margin-left: auto; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: var(--m-r-full); background: var(--m-rausch);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s;
}
.maison-orb:hover { background: var(--m-rausch-active); }
.maison-orb svg { width: 18px; height: 18px; stroke: #fff; }
/* Hotel-page update bar: softer rounded rectangle (matches the "Guest favourite" card), not the
   full search-bar pill. */
.maison-searchbar--update { border-radius: var(--m-r-md); }
/* "Update" button on the hotel-page update bar (labelled pill, not the round search orb). */
.maison-searchbar__update { flex: 0 0 auto; align-self: center; margin-left: auto; border: 0; cursor: pointer;
  height: 48px; padding: 0 28px; border-radius: var(--m-r-full); background: var(--m-rausch); color: #fff;
  font-family: var(--m-sans); font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: background .18s var(--m-ease), transform .18s var(--m-ease); }
.maison-searchbar__update:hover { background: var(--m-rausch-active); transform: translateY(-1px); }

/* ---- Buttons ---- */
.maison-btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--m-sans); font-weight: 500; font-size: 15px; line-height: 1.25;
  padding: 13px 22px; border-radius: var(--m-r-sm); transition: background .15s, border-color .15s;
}
.maison-btn--primary { background: var(--m-rausch); color: #fff; }
.maison-btn--primary:hover { background: var(--m-rausch-active); color: #fff; }
.maison-btn--secondary { background: var(--m-canvas); color: var(--m-ink); border: 1px solid var(--m-ink); }
.maison-btn--secondary:hover { background: var(--m-soft); }

/* ---- Results grid (photo-first cards, marketplace density) ---- */
.maison-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px 20px; margin-bottom: 44px; }
/* List view (default) — compact OTA rows: photo left, info centre, price panel right. Fixed row height
   with the content vertically centred + tightly grouped (no stretch-spread). */
.maison-results--list { display: flex; flex-direction: column; gap: 12px; grid-template-columns: none; }
.maison-results--list .maison-card { flex-direction: row; align-items: stretch; gap: 0; overflow: hidden;
  min-height: 148px; border: 1px solid var(--m-hairline-soft); border-radius: 14px; background: #fff;
  transition: box-shadow .2s var(--m-ease), border-color .2s var(--m-ease); }
.maison-results--list .maison-card:hover { box-shadow: 0 10px 26px rgba(16,16,20,.10); border-color: transparent; }
.maison-results--list .maison-card__photo { flex: 0 0 232px; aspect-ratio: auto; height: auto; border-radius: 0; align-self: stretch; }
.maison-results--list .maison-card:hover .maison-card__photo { box-shadow: none; }
.maison-results--list .maison-card__body { flex: 1 1 auto; min-width: 0; position: relative; display: flex; flex-direction: column;
  justify-content: center; gap: 6px; padding: 16px 214px 16px 22px; }
/* min-width:0 above lets the flex body shrink below its content width so the room-name meta actually
   truncates with an ellipsis instead of running full-width to the price divider. */
.maison-results--list .maison-card__meta { max-width: 100%; }
.maison-results--list .maison-card__head { justify-content: flex-start; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; }
.maison-results--list .maison-card__title { font-size: 17px; white-space: normal; overflow: visible; }
.maison-results--list .maison-card__meta { margin: 0; }
.maison-results--list .maison-card__meta:empty { display: none; }
.maison-results--list .maison-card__hl-row { margin-top: 2px; }
.maison-results--list .maison-card__price { position: absolute; top: 14px; bottom: 14px; right: 20px; width: 172px; margin: 0;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right;
  border-left: 1px solid var(--m-hairline-soft); padding-left: 22px; }
.maison-results--list .maison-card__price strong { font-size: 22px; }
@media (max-width: 720px) {
  .maison-results--list .maison-card { flex-direction: column; min-height: 0; }
  .maison-results--list .maison-card__photo { flex-basis: auto; height: auto; aspect-ratio: 20 / 11; }
  .maison-results--list .maison-card__body { padding: 16px 20px; }
  .maison-results--list .maison-card__price { position: static; width: auto; align-items: flex-start; justify-content: flex-start;
    text-align: left; border-left: 0; padding-left: 0; margin-top: 10px; }
  /* Mobile is list-only — hide the grid/list toggle (JS also forces list, ignoring a stored 'grid').
     .maison-sortbar scope raises specificity above the base .maison-viewtoggle rule that follows. */
  .maison-sortbar .maison-viewtoggle { display: none; }
  /* Safety net: even if the grid class is on the container, render it as the stacked list card. */
  .maison-results--grid { display: flex; flex-direction: column; gap: 12px; grid-template-columns: none; }
}
/* List / grid view toggle in the sort bar. */
.maison-viewtoggle { display: inline-flex; border: 1px solid var(--m-hairline); border-radius: 999px; overflow: hidden; }
.maison-viewtoggle button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 34px;
  border: 0; background: #fff; color: var(--m-muted); cursor: pointer; transition: background .15s, color .15s; }
.maison-viewtoggle button + button { border-left: 1px solid var(--m-hairline); }
.maison-viewtoggle button.is-active { background: var(--m-ink); color: #fff; }
.maison-viewtoggle button svg { width: 17px; height: 17px; }
/* min-width:0 lets the card shrink to its grid column instead of its nowrap title's min-content
   (which otherwise blows the 1fr track past the viewport → horizontal bleed on mobile). */
.maison-card { display: flex; flex-direction: column; background: var(--m-canvas); min-width: 0; }
.maison-card__photo {
  display: block; position: relative; aspect-ratio: 20 / 19; border-radius: var(--m-r-md); overflow: hidden;
  background: linear-gradient(135deg, #f2f2f2 0%, #e7e7e7 100%);
  touch-action: pan-y; /* let vertical scroll through; horizontal drags are the image swipe (JS) */
}
.maison-card__photo svg { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; stroke: #c9c9c9; }
.maison-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.maison-card:hover .maison-card__img { transform: scale(1.04); }
/* Incoming layer during a photo slide (JS-driven): sits above the outgoing image + promoted on end.
   Both layers' transforms are driven by inline styles during the slide, so hover-zoom can't hijack it. */
.maison-card__img--slide { z-index: 1; will-change: transform; }
.maison-card:hover .maison-card__photo { box-shadow: var(--m-shadow); }
/* Photo slider arrows + dots (appear on hover; always shown on touch). */
.maison-card__nav { position: absolute; top: 50%; z-index: 3; padding: 0;
  width: 34px; height: 34px; border-radius: 50%; border: 0; color: #000; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(-50%) scale(.9);
  transition: opacity .18s var(--m-ease), transform .18s var(--m-ease), background .15s var(--m-ease); }
.maison-card__nav--prev { left: 10px; }
.maison-card__nav--next { right: 10px; }
.maison-card__nav svg { width: 17px; height: 17px; stroke-width: 2; }
.maison-card__photo:hover .maison-card__nav { opacity: 1; transform: translateY(-50%) scale(1); }
.maison-card__nav:hover { background: #fff; transform: translateY(-50%) scale(1.09); box-shadow: 0 6px 18px rgba(0,0,0,.26); }
.maison-card__nav:active { transform: translateY(-50%) scale(.95); }
.maison-card__dots { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center;
  gap: 6px; pointer-events: none; }
.maison-card__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.6);
  box-shadow: 0 0 3px rgba(0,0,0,.35); transition: width .22s var(--m-ease), background .22s var(--m-ease); }
.maison-card__dot.is-active { width: 17px; background: #fff; }
@media (hover: none) { .maison-card__nav { opacity: .95; transform: translateY(-50%) scale(1); } }
.maison-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--m-canvas); color: var(--m-ink);
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--m-r-full); box-shadow: var(--m-shadow);
}
.maison-card__body { display: block; text-decoration: none; color: var(--m-ink); padding: 12px 2px 0; }
.maison-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.maison-card__title { font-size: 16px; font-weight: 600; color: var(--m-ink); margin: 0; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maison-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--m-ink); white-space: nowrap; }
.maison-card__rating svg { width: 13px; height: 13px; fill: var(--m-ink); }
.maison-card__meta { color: var(--m-muted); font-size: 14px; line-height: 1.43; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maison-card__price { color: var(--m-ink); font-size: 15px; margin-top: 6px; }
.maison-card__price strong { font-weight: 600; }
.maison-card__price .m-muted { color: var(--m-muted); font-weight: 400; }
/* "Highlights" strip: at-a-glance guests / rooms / bed + a few amenity icons (client request). */
.maison-card__hl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--m-hairline-soft); }
.maison-card__hl { display: inline-flex; align-items: center; gap: 6px; color: var(--m-ink); font-size: 13px;
  font-weight: 500; white-space: nowrap; min-width: 0; }
.maison-card__hl svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--m-muted); }
/* Safety net: truncate a long chip label (e.g. a wordy bed clause) with an ellipsis, don't overflow. */
.maison-card__hl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 168px; }
.maison-card__hl--amen { position: relative; }
.maison-card__hl--amen svg { color: var(--m-ink); }

/* ---- Supplier comparison (compact expandable) ---- */
.maison-compare { margin-top: 8px; }
.maison-compare > summary { color: var(--m-ink); font-size: 13px; cursor: pointer; text-decoration: underline; list-style: none; }
.maison-compare > summary::-webkit-details-marker { display: none; }
.maison-compare ul { list-style: none; margin: 8px 0 0; padding: 10px 12px; background: var(--m-soft); border-radius: var(--m-r-sm); font-size: 14px; }
.maison-compare li { display: flex; justify-content: space-between; padding: 5px 0; color: var(--m-muted); }
.maison-compare li + li { border-top: 1px solid var(--m-hairline-soft); }
.maison-compare li.is-best { color: var(--m-ink); font-weight: 500; }
.maison-badge { background: var(--m-ink); color: #fff; font-size: 10px; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--m-r-full); margin-left: 8px; }

/* ---- Hotel detail page ---- */
.maison-back { display: inline-block; color: var(--m-ink); font-size: 14px; text-decoration: none; margin-bottom: 8px; }
.maison-back:hover { text-decoration: underline; }
.maison-hotel__banner { aspect-ratio: 24 / 9; border-radius: var(--m-r-md); background: linear-gradient(135deg, #f2f2f2, #e7e7e7);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.maison-hotel__banner { overflow: hidden; }
.maison-hotel__banner svg { width: 60px; height: 60px; stroke: #c9c9c9; }
.maison-hotel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maison-hotel__title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; color: var(--m-ink); }
.maison-hotel__meta { color: var(--m-ink); font-size: 15px; margin-bottom: 20px; }
.maison-hotel__meta .m-star { display: inline-flex; align-items: center; gap: 4px; }
.maison-guests { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 16px; }
.maison-guests .maison-field { display: flex; flex-direction: column; gap: 6px; }
.maison-guests .maison-field label { font-size: 12px; font-weight: 600; color: var(--m-ink); }
.maison-guests .maison-field input { border: 1px solid var(--m-hairline); border-radius: var(--m-r-sm); padding: 10px 12px; font-size: 14px; width: 92px; font-family: var(--m-sans); }
.maison-guests .maison-field input:focus { outline: none; border-color: var(--m-ink); }
/* Room list — cards in a responsive grid (2-up desktop, 1-up mobile). */
/* Wide room list (Agoda/Booking model): one room per full-width row — [thumbnail] [room name +
   vertical feature list] [price + Book], with a right-side price panel divided by a hairline. */
.maison-rooms { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.maison-room { display: grid; grid-template-columns: 150px minmax(0, 1fr) 210px; align-items: stretch; gap: 20px;
  background: #fff; border: 1px solid var(--m-hairline); border-radius: 16px; padding: 16px;
  transition: border-color .2s var(--m-ease), box-shadow .2s var(--m-ease); }
.maison-room:hover { box-shadow: rgba(0,0,0,.03) 0 0 0 1px, rgba(0,0,0,.1) 0 10px 24px -12px; }
.maison-room--lowest { border-color: transparent; background: linear-gradient(180deg, #fff, #fff6f8);
  box-shadow: inset 0 0 0 1.5px var(--m-rausch); }
.maison-room--lowest:hover { box-shadow: inset 0 0 0 1.5px var(--m-rausch), rgba(255,56,92,.16) 0 10px 24px -12px; }
.maison-room__thumb { width: 150px; height: 120px; border-radius: 12px; overflow: hidden; background: var(--m-soft);
  display: flex; align-items: center; justify-content: center; }
.maison-room__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maison-room__thumb svg { width: 34px; height: 34px; stroke: #c3c3c3; }
.maison-room__details { min-width: 0; }
.maison-room__name { font-size: 16px; font-weight: 600; color: var(--m-ink); line-height: 1.32;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maison-room__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--m-rausch); background: rgba(255,56,92,.12); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
/* Agoda-style vertical feature list under the room name. */
.maison-room__features { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.maison-room__feat { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--m-ink); }
.maison-room__feat svg { width: 16px; height: 16px; flex: none; color: var(--m-muted); }
.maison-room__feat.is-good { color: #0a7d3c; font-weight: 600; }
.maison-room__feat.is-good svg { color: #0a7d3c; }
.maison-room__feat.is-muted { color: var(--m-muted); }
.maison-room__feat--via { color: var(--m-muted); font-size: 12.5px; padding-left: 25px; }
/* Right price/Book panel, separated by a hairline like the results list card. */
.maison-room__buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px;
  text-align: right; border-left: 1px solid var(--m-hairline-soft); padding-left: 20px; }
.maison-room__price { font-size: 22px; font-weight: 700; color: var(--m-ink); letter-spacing: -.01em; white-space: nowrap; }
.maison-room__price small { display: block; font-size: 12px; color: var(--m-muted); font-weight: 400; margin-top: 2px; }
.maison-room__book { flex: none; height: 44px; padding: 0 30px; border-radius: 11px; border: 0; cursor: pointer;
  background: var(--m-rausch); color: #fff; font-weight: 600; font-size: 14.5px; white-space: nowrap;
  transition: background .18s var(--m-ease), transform .18s var(--m-ease), box-shadow .18s var(--m-ease); }
.maison-room__book:hover { background: var(--m-rausch-active); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(255,56,92,.6); }
/* Grouped room card (Agoda-style): [thumbnail] [room details] then MULTIPLE rate rows stacked on the
   right — with/without breakfast, refundable/not — each with its own price + Book. TBO ships no
   room-level image, so the thumbnail falls back to a hotel gallery photo (client rule). */
.maison-room--group { grid-template-columns: 160px minmax(180px, 260px) minmax(0, 1fr); grid-template-areas: none;
  gap: 0; padding: 0; align-items: stretch; overflow: hidden; }
/* Fixed rounded thumbnail (not stretched to the full — possibly tall — card height). */
.maison-room--group .maison-room__thumb { align-self: center; width: 128px; height: 128px; min-height: 0;
  margin: 16px; border-radius: 12px; }
.maison-room--group .maison-room__details { align-self: center; min-width: 0; padding: 18px 22px; }
.maison-room__rates { display: flex; flex-direction: column; align-self: stretch; min-width: 0;
  border-left: 1px solid var(--m-hairline-soft); }
.maison-rate { display: grid; grid-template-columns: minmax(0, 1fr) 188px; align-items: center; gap: 18px;
  padding: 16px 22px; flex: 1; min-width: 0; }
.maison-rate + .maison-rate { border-top: 1px dashed var(--m-hairline); }
.maison-rate__opts { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.maison-rate__opt { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--m-ink); }
.maison-rate__opt svg { width: 16px; height: 16px; flex: none; color: var(--m-muted); }
.maison-rate__opt.is-good { color: #0a7d3c; font-weight: 600; }
.maison-rate__opt.is-good svg { color: #0a7d3c; }
.maison-rate__opt.is-muted { color: var(--m-muted); }
.maison-rate__buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px;
  text-align: right; border-left: 1px solid var(--m-hairline-soft); padding-left: 18px; }
/* Tablet: thumbnail + details narrower, rate rows fill the rest. */
@media (max-width: 900px) {
  .maison-room--group { grid-template-columns: 122px minmax(150px, 220px) minmax(0, 1fr); }
  .maison-room--group .maison-room__thumb { width: 94px; height: 94px; margin: 14px; }
  .maison-rate { grid-template-columns: minmax(0, 1fr) 160px; gap: 14px; padding: 14px 16px; }
  .maison-room--group .maison-room__details { padding: 16px 16px; }
}
/* Phones: thumbnail + details on top, rate rows full-width below, each rate stacked. */
@media (max-width: 640px) {
  .maison-room--group { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "thumb details" "rates rates"; }
  .maison-room--group .maison-room__thumb { grid-area: thumb; min-height: 0; height: 96px; width: 96px;
    border-radius: 12px; margin: 14px 0 0 14px; align-self: start; }
  .maison-room--group .maison-room__details { grid-area: details; align-self: center; padding: 14px 16px; }
  .maison-room__rates { grid-area: rates; border-left: 0; border-top: 1px solid var(--m-hairline-soft); }
  .maison-rate { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  /* Stack the price + reward pill on their own line, left-aligned, and give Book a full-width row so
     it lines up cleanly instead of floating mid-height next to a tall price block. */
  .maison-rate__buy { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; text-align: left;
    border-left: 0; padding-left: 0; }
  .maison-rate__buy .maison-room__price { text-align: left; }
  .maison-rate__buy .maison-room__book { width: 100%; }
}

/* ---- Airbnb-style listing page ---- */
.maison-gallery { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: var(--m-r-md); overflow: hidden; margin: 4px 0 20px; aspect-ratio: 2 / 1; }
.maison-gallery__main { overflow: hidden; }
.maison-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maison-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.maison-gallery__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maison-gallery--empty { display: flex; align-items: center; justify-content: center; background: var(--m-fill); }
.maison-gallery--empty svg { width: 64px; height: 64px; stroke: #c9c9c9; }
.maison-gallery__all { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--m-ink); border: 1px solid var(--m-ink); border-radius: 10px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.maison-gallery__all svg { width: 15px; height: 15px; }
.maison-gallery__all:hover { background: var(--m-fill); }

/* Title bar (title + Share/Save) sits ABOVE the gallery, Airbnb-style */
.maison-l__titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 10px; }
.maison-l__title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--m-ink); }
.maison-l__actions { display: flex; gap: 6px; flex: 0 0 auto; }
.maison-l__act { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--m-hairline);
  padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--m-ink); cursor: pointer;
  text-decoration: none; transition: border-color .18s var(--m-ease), background .18s var(--m-ease), box-shadow .18s var(--m-ease), transform .18s var(--m-ease); }
.maison-l__act svg { width: 16px; height: 16px; }
.maison-l__act:hover { border-color: var(--m-ink); background: #fff; transform: translateY(-1px);
  box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.12) 0 6px 16px -6px; }
.maison-l__act:active { transform: translateY(0); }
.maison-l__act.is-saved { color: var(--m-rausch); border-color: rgba(255,56,92,.4); background: rgba(255,56,92,.06); }
.maison-l__act.is-saved:hover { border-color: var(--m-rausch); }
.maison-l__act.is-saved svg { fill: var(--m-rausch); stroke: var(--m-rausch); }
/* Social share popover */
.maison-l__sharewrap { position: relative; }
.maison-sharepop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 200px;
  background: #fff; border: 1px solid var(--m-hairline); border-radius: 14px; padding: 6px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.28); animation: maisonPop .18s var(--m-ease) both; transform-origin: top left; }
.maison-sharepop__item { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  padding: 9px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--m-ink); text-decoration: none; text-align: left; }
.maison-sharepop__item:hover { background: var(--m-fill); }
.maison-sharepop__ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  flex: none; border-radius: 8px; background: var(--m-fill); color: var(--m-ink); }
.maison-sharepop__ico svg { width: 16px; height: 16px; }
.maison-sharepop__item.is-copied { color: #067a3e; }

/* My Account → Saved (wishlist) */
.maison-saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.maison-saved__empty { color: var(--m-muted); font-size: 15px; padding: 40px 4px; }
.maison-saved__card { position: relative; display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--m-hairline-soft); border-radius: 16px; padding: 12px; transition: box-shadow .2s var(--m-ease), transform .2s var(--m-ease); }
.maison-saved__card:hover { transform: translateY(-2px); box-shadow: rgba(0,0,0,.03) 0 0 0 1px, rgba(0,0,0,.1) 0 10px 24px -12px; }
.maison-saved__thumb { flex: none; width: 76px; height: 76px; border-radius: 12px; background-size: cover;
  background-position: center; background-color: var(--m-fill); text-decoration: none; }
.maison-saved__thumb--ph { display: flex; align-items: center; justify-content: center; font-family: var(--m-serif, Georgia, serif);
  font-size: 26px; font-weight: 700; color: var(--m-rausch); background: rgba(255,56,92,.08); }
.maison-saved__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.maison-saved__name { font-size: 15px; font-weight: 600; color: var(--m-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maison-saved__loc { font-size: 13px; color: var(--m-muted); }
.maison-saved__remove { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--m-hairline);
  background: #fff; color: var(--m-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color .18s var(--m-ease), border-color .18s var(--m-ease); }
.maison-saved__remove:hover { color: var(--m-rausch); border-color: var(--m-rausch); }
.maison-saved__remove svg { width: 15px; height: 15px; }

.maison-l__subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.maison-l__sub { font-size: 17px; font-weight: 600; color: var(--m-ink); }
.maison-l__specs { font-size: 15px; color: var(--m-body); }
.maison-l__rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--m-ink); }
.maison-l__rating svg { width: 14px; height: 14px; }
.maison-l__rating--new { color: var(--m-body); font-weight: 500; }
.maison-l__star { display: inline-flex; align-items: center; gap: 4px; }

/* Full-photo lightbox */
.maison-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(255,255,255,.98); overflow-y: auto; }
.maison-lightbox__close { position: sticky; top: 14px; margin: 14px 0 0 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--m-hairline); background: #fff; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--m-shadow); }
.maison-lightbox__scroll { max-width: 760px; margin: 0 auto; padding: 8px 16px 60px; display: flex; flex-direction: column; gap: 14px; }
.maison-lightbox__scroll img { width: 100%; border-radius: var(--m-r-md); display: block; }

/* Where you'll be — address, map, contact actions */
.maison-l__addr { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--m-body); margin: 0 0 16px; }
.maison-l__addr .maison-l__amicon { flex: 0 0 auto; margin-top: 1px; color: #484848; }
.maison-map { border-radius: var(--m-r-md); overflow: hidden; border: 1px solid var(--m-hairline); aspect-ratio: 16 / 8; background: var(--m-fill); }
.maison-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(1.05); }
.maison-l__contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.maison-contactbtn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--m-ink); border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--m-ink); text-decoration: none; background: #fff; transition: background .15s var(--m-ease); }
.maison-contactbtn svg { width: 16px; height: 16px; }
.maison-contactbtn:hover { background: var(--m-fill); }

/* Things to know — 3 columns, each with an icon + hairline divider */
/* "Things to know" — one soft card with icon-left rows (not rigid 3 columns). */
.maison-know { display: block; border: 1px solid var(--m-hairline-soft); border-radius: 16px; overflow: hidden; background: #fff; }
.maison-know__row { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; }
.maison-know__row + .maison-know__row { border-top: 1px solid var(--m-hairline-soft); }
.maison-know__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--m-soft);
  display: flex; align-items: center; justify-content: center; color: var(--m-ink); }
.maison-know__icon svg { width: 22px; height: 22px; }
.maison-know__body { min-width: 0; }
.maison-know__h3 { font-size: 16px; font-weight: 600; color: var(--m-ink); margin: 3px 0 6px; }
.maison-know__line { font-size: 14px; line-height: 1.55; color: var(--m-muted); margin: 0 0 4px; }
.maison-know__line:last-child { margin-bottom: 0; }

.maison-listing { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; row-gap: 0;
  grid-template-areas: "head aside" "body aside"; align-items: start; }
/* min-width:0 so these grid items shrink to the column instead of their content's min-content width
   (which was forcing the single mobile column — and the whole page — wider than the viewport). */
.maison-listing__head { grid-area: head; min-width: 0; }
.maison-listing__body { grid-area: body; min-width: 0; }
.maison-listing__head img { max-width: 100%; }
.maison-listing__aside { grid-area: aside; position: sticky; top: 24px; }
/* Sidebar removed (Agoda model — room rows are the CTA): header + info span the full width.
   The search bar sits between the gallery (head) and the info (body). */
.maison-listing--single { grid-template-columns: 1fr; grid-template-areas: "head" "search" "body"; }
.maison-listing--single .maison-hpsearch { grid-area: search; }
/* No-availability empty state (hotel found, but no rooms for the current dates/guests). The Update
   bar sits above it so the guest can drop children / change dates and retry without leaving. */
.maison-noavail { max-width: 620px; margin: 32px auto 56px; text-align: center; padding: 40px 28px;
  border: 1px solid var(--m-hairline-soft); border-radius: 18px; background: #fff; }
.maison-noavail__icon { display: inline-flex; width: 66px; height: 66px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--m-soft); color: var(--m-muted); margin-bottom: 18px; }
.maison-noavail__icon svg { width: 30px; height: 30px; }
.maison-noavail__title { font-size: 21px; font-weight: 600; margin: 0 0 10px; color: var(--m-ink); }
.maison-noavail__msg { font-size: 15px; line-height: 1.6; color: var(--m-muted); margin: 0 auto; max-width: 460px; }
/* Search bar at the top of the hotel page (change destination/dates/guests without leaving). */
.maison-hpsearch { margin: 0 0 16px; }
.maison-hpsearch .maison-searchbar { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
/* Sticky in-page section nav (Booking/Agoda style). Sticks just below the 84px site header. */
.maison-hnav { position: sticky; top: 84px; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 20px; padding: 2px 6px 2px 6px; background: #fff; border: 1px solid var(--m-hairline);
  border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.maison-hnav__links { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.maison-hnav__links::-webkit-scrollbar { display: none; }
.maison-hnav__link { padding: 15px 16px; font-size: 15px; font-weight: 600; color: var(--m-muted); text-decoration: none;
  white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s var(--m-ease), border-color .15s var(--m-ease); }
.maison-hnav__link:hover { color: var(--m-ink); }
.maison-hnav__link.is-active { color: var(--m-ink); border-bottom-color: var(--m-ink); }
.maison-hnav__deal { display: flex; align-items: center; gap: 14px; flex: none; padding-right: 4px; }
.maison-hnav__price { font-size: 16px; color: var(--m-ink); white-space: nowrap; }
.maison-hnav__from { color: var(--m-muted); font-size: 13px; font-weight: 400; }
.maison-hnav__price strong { font-size: 18px; font-weight: 700; }
.maison-hnav__btn { flex: none; background: var(--m-rausch); color: #fff; padding: 11px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s var(--m-ease); }
.maison-hnav__btn:hover { background: var(--m-rausch-active); color: #fff; }
/* Scroll-target anchors: offset so a jumped-to section clears the sticky header + nav. */
.maison-anchor { display: block; height: 0; scroll-margin-top: 156px; }
html { scroll-behavior: smooth; }
@media (max-width: 760px) {
  .maison-hnav { top: 0; border-radius: 12px; }
  .maison-hnav__from { display: none; }
  .maison-hnav__btn { padding: 10px 16px; }
  .maison-anchor { scroll-margin-top: 74px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Full-width band below: the wide room list + map + policies (Agoda/Booking model). */
.maison-listing__full { margin-top: 8px; }

.maison-l__section { padding: 24px 0; border-top: 1px solid var(--m-hairline); margin-top: 24px; }
.maison-l__h2 { font-size: 20px; font-weight: 600; margin: 0 0 16px; color: var(--m-ink); }
.maison-l__desc { font-size: 15px; line-height: 1.6; color: var(--m-body); margin: 0; }

.maison-l__fav { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--m-hairline); border-radius: var(--m-r-md); padding: 16px 20px; margin-top: 16px; box-shadow: var(--m-shadow); }
.maison-l__favsub { font-size: 13px; color: var(--m-muted); margin-top: 2px; }
.maison-l__favrating { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 600; }

.maison-l__highlights { display: grid; gap: 18px; }
.maison-l__hl { display: flex; gap: 16px; align-items: flex-start; }
.maison-l__hlicon { flex: 0 0 auto; }
.maison-l__hlsub { font-size: 13px; color: var(--m-muted); margin-top: 2px; }

.maison-l__amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.maison-l__amenity { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--m-body); }

/* Rich supplier description (HTML from TBO) — clamped with a fade until expanded */
.maison-l__desc--rich { max-width: 68ch; }
.maison-l__desc--rich p { margin: 0 0 12px; }
.maison-l__desc--rich p:last-child { margin-bottom: 0; }

/* "Show all facilities" disclosure */
.maison-l__amall { margin-top: 18px; }
.maison-l__amall > summary { cursor: pointer; display: inline-block; font-weight: 600; font-size: 15px; color: var(--m-ink); text-decoration: underline; padding: 10px 0; list-style: none; }
.maison-l__amall > summary::-webkit-details-marker { display: none; }
.maison-l__amlist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; }
.maison-l__amlist li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--m-body); }
.maison-l__amlist li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--m-hairline-strong, #c9c9c9); }

/* "What's nearby" list */
.maison-l__nearby { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 32px; }
/* Phones: amenities / facilities / nearby collapse to a single column. The `.maison-listing` scope
   raises specificity so this beats the ≤900px 2-column rule that follows it in source order. */
@media (max-width: 600px) {
  .maison-listing .maison-l__amenities,
  .maison-listing .maison-l__amlist,
  .maison-listing .maison-l__nearby,
  .maison-listing__full .maison-l__amenities,
  .maison-listing__full .maison-l__nearby { grid-template-columns: 1fr; }
}
.maison-l__near { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--m-body); }
.maison-l__near .maison-l__amicon { flex: 0 0 auto; }
.maison-l__nearname { flex: 1 1 auto; }
.maison-l__neardist { color: var(--m-muted, #767676); font-size: 14px; }

/* Sticky reservation card */
.maison-resv { border: 1px solid var(--m-hairline); border-radius: var(--m-r-md); box-shadow: var(--m-shadow); padding: 22px; }
.maison-resv__price { font-size: 15px; color: var(--m-ink); margin-bottom: 16px; }
.maison-resv__price strong { font-size: 22px; font-weight: 600; }
.maison-resv__from { color: var(--m-muted); font-size: 13px; }
.maison-resv__nights { color: var(--m-muted); font-size: 13px; }
.maison-resv__note { font-size: 13px; color: var(--m-muted); text-align: center; margin: 10px 0 0; }

/* Card: interactive dates (two cells) + guests field */
.maison-resv__stay { position: relative; }
.maison-resv__dates { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border: 1px solid var(--m-strong); border-radius: var(--m-r-sm) var(--m-r-sm) 0 0; background: #fff; cursor: pointer; padding: 0; }
.maison-resv__dates .maison-resv__cell { text-align: left; padding: 10px 12px; }
.maison-resv__dates .maison-resv__cell + .maison-resv__cell { border-left: 1px solid var(--m-strong); }
.maison-resv__cell span { display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--m-ink); }
.maison-resv__cell b { font-size: 14px; font-weight: 400; color: var(--m-ink); }
.maison-resv__whobox { position: relative; margin-bottom: 14px; }
.maison-resv__guests { width: 100%; text-align: left; background: #fff; border: 1px solid var(--m-strong); border-top: 0; border-radius: 0 0 var(--m-r-sm) var(--m-r-sm); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.maison-resv__glabel { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--m-ink); }
.maison-resv__guests [data-who-val] { font-size: 14px; color: var(--m-ink); }
.maison-resv__roombox { position: relative; margin-bottom: 14px; }
.maison-resv__roomtoggle { width: 100%; text-align: left; background: #fff; border: 1px solid var(--m-strong);
  border-radius: var(--m-r-sm); padding: 10px 28px 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.maison-resv__rval { font-size: 14px; color: var(--m-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maison-room__pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--m-hairline-soft);
  border-radius: var(--m-r-md); box-shadow: var(--m-shadow); padding: 10px 8px; }
.maison-room__pop .maison-where__item[aria-selected] { background: var(--m-fill); }
.maison-resv__update { width: 100%; margin-bottom: 8px; }
.maison-resv__book { width: 100%; }
.maison-resv .maison-who__pop { left: 0; right: 0; width: auto; }
.maison-resv .maison-when__pop { left: auto; right: 0; transform: none; }
@media (max-width: 900px) { .maison-resv .maison-when__pop { right: auto; left: 0; } }

@media (max-width: 900px) {
  /* head → booking card → details/rooms */
  .maison-listing { grid-template-columns: 1fr; row-gap: 24px; grid-template-areas: "head" "aside" "body"; }
  /* Single-column hotel page keeps its search-bar row (this must come AFTER the rule above, which
     would otherwise drop the "search" area and fling the update bar into an implicit off-grid track). */
  .maison-listing--single { grid-template-areas: "head" "search" "body"; }
  .maison-listing__aside { position: static; }
  .maison-gallery { grid-template-columns: 1fr; aspect-ratio: auto; }
  .maison-gallery__grid { display: none; }
  .maison-gallery__main { aspect-ratio: 3 / 2; }
  /* 4 cols on desktop → 2 on tablet → 1 on phone (below). */
  .maison-l__amenities, .maison-l__amlist, .maison-l__nearby { grid-template-columns: 1fr 1fr; }
  .maison-know__row { padding: 16px 16px; gap: 14px; }
  .maison-know__icon { width: 40px; height: 40px; }
  .maison-l__titlebar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .maison-l__actions { margin-left: -10px; }
}

.maison-empty { color: var(--m-muted); font-size: 16px; padding: 32px 0; text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 744px) {
  .maison-searchbar { flex-direction: column; border-radius: var(--m-r-md); padding: 8px; }
  .maison-seg { padding: 10px 12px; }
  .maison-seg + .maison-seg::before { display: none; }
  .maison-seg + .maison-seg { border-top: 1px solid var(--m-hairline-soft); }
  .maison-orb { width: 100%; border-radius: var(--m-r-sm); margin-top: 6px; }
  .maison-orb::after { content: "Search"; margin-left: 8px; font-weight: 500; }
  .maison-searchbar__update { width: 100%; margin: 6px 0 0; border-radius: var(--m-r-sm); }
  .maison-results { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .maison-results { grid-template-columns: 1fr; gap: 20px; }
  /* Single-column phone cards: use a shorter landscape photo so each card stays compact
     instead of a huge near-square image dominating the screen. */
  .maison-card__photo, .maison-skelcard__photo { aspect-ratio: 3 / 2; }
}

/* ---- Motion: smooth, consistent easing + gentle popover entrances ---- */
:root { --m-ease: cubic-bezier(.4, 0, .2, 1); }

@keyframes maisonPop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes maisonFade { from { opacity: 0; } to { opacity: 1; } }

.maison-who__pop, .maison-where__pop, .maison-room__pop { animation: maisonPop .2s var(--m-ease) both; transform-origin: top; }
.maison-when__pop { animation: maisonFade .2s var(--m-ease) both; }

/* Smoother hovers/interactions (override the earlier snappier transitions) */
.maison-card { transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease); }
.maison-card__img { transition: transform .6s var(--m-ease); }
.maison-btn { transition: background .22s var(--m-ease), transform .22s var(--m-ease), box-shadow .22s var(--m-ease); }
.maison-btn--primary:hover { transform: translateY(-1px); }
.maison-orb { transition: background .22s var(--m-ease), transform .22s var(--m-ease); }
.maison-orb:hover { transform: scale(1.06); }
.maison-stepper button, .maison-cal__arrow { transition: background .18s var(--m-ease), border-color .18s var(--m-ease), color .18s var(--m-ease); }
.maison-cal__day { transition: box-shadow .15s var(--m-ease), background .15s var(--m-ease), color .15s var(--m-ease); }
.maison-room, .maison-resv, .maison-l__fav, .maison-search, .maison-searchbar { transition: box-shadow .25s var(--m-ease), transform .25s var(--m-ease); }
.maison-where__item { transition: background .16s var(--m-ease); }
.maison-seg__input, .maison-guests .maison-field input { transition: border-color .18s var(--m-ease), box-shadow .18s var(--m-ease); }
.maison-compare > summary, .maison-back, .maison-card__title a { transition: color .16s var(--m-ease); }
.maison-stepper span { transition: all .15s var(--m-ease); }

@media (prefers-reduced-motion: reduce) {
  .maison-wrap *, .maison-who__pop, .maison-where__pop, .maison-when__pop { animation: none !important; transition: none !important; }
}

/* ---- Skeleton loaders (shimmer) ---- */
@keyframes maisonShimmer { 0% { background-position: -450px 0; } 100% { background-position: 450px 0; } }
.maison-skel, .maison-card__photo, .maison-hotel__banner, .maison-gallery__main, .maison-gallery__grid {
  background-image: linear-gradient(90deg, #eeeeee 25%, #f6f6f6 37%, #eeeeee 63%);
  background-size: 900px 100%; animation: maisonShimmer 1.4s infinite linear;
}
.maison-card__photo.is-loaded, .maison-hotel__banner.is-loaded, .maison-gallery__main.is-loaded, .maison-gallery__grid.is-loaded {
  animation: none; background-image: none;
}
/* Images fade in over the shimmer once loaded. Default is VISIBLE (opacity:1) so an image
   can never get stuck hidden if JS fails or a cached load event is missed. Only images JS
   marks as still-loading are hidden; they fade to opacity:1 when is-loaded is added. */
.maison-card__img, .maison-hotel__img, .maison-gallery img { transition: opacity .5s var(--m-ease), transform .6s var(--m-ease); }
.maison-card__img.is-loading, .maison-hotel__img.is-loading, .maison-gallery img.is-loading { opacity: 0; }
.maison-card__img.is-loaded, .maison-hotel__img.is-loaded, .maison-gallery img.is-loaded { opacity: 1; }

/* Skeleton cards shown while a new search loads */
.maison-skelcard { display: flex; flex-direction: column; }
.maison-skelcard__photo { aspect-ratio: 20 / 19; border-radius: var(--m-r-md); }
.maison-skelcard__line { height: 14px; border-radius: 6px; margin-top: 12px; }
.maison-skelcard__line.short { width: 55%; margin-top: 8px; }

/* ---- Animated "searching" loader (plane flying a route + rotating status + progress bar) ---- */
.maison-searchloader { display: flex; justify-content: center; margin: 6px 0 30px;
  transition: opacity .45s var(--m-ease, ease), transform .45s var(--m-ease, ease); }
.maison-searchloader.is-done { opacity: 0; transform: translateY(-8px); }
.maison-sl__card { position: relative; width: 100%; max-width: 480px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fff8f9 100%);
  border: 1px solid var(--m-hairline); border-radius: 22px;
  box-shadow: 0 24px 60px -18px rgba(255,56,92,.22), 0 2px 10px rgba(15,23,42,.05);
  padding: 34px 36px 28px; }
/* soft brand glow blooming from the flight scene */
.maison-sl__card::before { content: ""; position: absolute; top: -60px; left: 50%; width: 320px; height: 220px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,56,92,.12), transparent 72%); }
.maison-sl__scene { position: relative; width: 236px; height: 94px; margin: 0 auto 10px; overflow: visible; }
.maison-sl__route { stroke: var(--m-hairline); animation: slDash 1s linear infinite; }
.maison-sl__origin-ring { fill: none; stroke: var(--m-rausch); stroke-width: 1.6; opacity: .5;
  transform-box: view-box; transform-origin: 30px 88px; animation: slPing 1.8s ease-out infinite; }
.maison-sl__origin { fill: var(--m-strong); }
.maison-sl__pin { fill: var(--m-rausch); transform-box: view-box; transform-origin: 272px 56px;
  filter: drop-shadow(0 4px 5px rgba(255,56,92,.35)); animation: slPin 1.7s ease-in-out infinite; }
.maison-sl__plane { fill: var(--m-rausch); transform-box: view-box; transform-origin: 0 0;
  filter: drop-shadow(0 4px 7px rgba(255,56,92,.45));
  animation: slFly 3s cubic-bezier(.45,.05,.5,.95) infinite; }
.maison-sl__title { font-family: var(--m-sans); font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--m-ink); margin: 10px 0 5px; }
.maison-sl__title b { color: var(--m-rausch); font-weight: 700; }
.maison-sl__msg { font-size: 14px; color: var(--m-muted); min-height: 20px; margin: 0 0 20px;
  transition: opacity .2s var(--m-ease, ease); }
.maison-sl__bar { position: relative; height: 5px; background: var(--m-fill); border-radius: 999px; overflow: hidden; }
.maison-sl__bar i { display: block; height: 100%; width: 42%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,56,92,0) 0%, var(--m-rausch) 45%, var(--m-rausch-active) 100%);
  box-shadow: 0 0 12px rgba(255,56,92,.55); animation: slBar 1.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes slDash { to { stroke-dashoffset: -10.5; } }
@keyframes slPin { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.07); } }
@keyframes slPing { 0% { transform: scale(.4); opacity: .6; } 80%,100% { transform: scale(1.4); opacity: 0; } }
@keyframes slBar { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }
@keyframes slFly {
  0%   { transform: translate(30px,88px) rotate(-34deg); opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translate(90px,55px) rotate(-22deg); }
  50%  { transform: translate(150px,39px) rotate(-8deg); }
  75%  { transform: translate(211px,39px) rotate(8deg); }
  92%  { opacity: 1; }
  100% { transform: translate(272px,56px) rotate(22deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .maison-sl__route, .maison-sl__pin, .maison-sl__origin-ring, .maison-sl__plane, .maison-sl__bar i { animation: none; }
  .maison-sl__plane { transform: translate(150px,39px) rotate(-8deg); }
}

/* Results filter/sort bar — Airbnb-style pill chips */
.maison-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 24px; }
/* Each control is a rounded chip: white, hairline border, lifts on hover, fills when active. */
.maison-filter { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; box-sizing: border-box;
  padding: 0 14px; border: 1px solid var(--m-hairline, #dddddd); border-radius: 9999px; background: #fff;
  font-size: 14px; color: var(--m-ink); cursor: pointer;
  transition: border-color .18s var(--m-ease), box-shadow .18s var(--m-ease), background .18s var(--m-ease); }
.maison-filter:hover { border-color: #b0b0b0; box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.10) 0 2px 8px -1px; }
.maison-filter__label { color: var(--m-muted); font-size: 13px; pointer-events: none; }
.maison-filter__select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; outline: none;
  font-family: var(--m-sans); font-size: 14px; font-weight: 600; color: var(--m-ink); cursor: pointer;
  padding: 0 20px 0 0; line-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; }
/* Active chip (a non-default value chosen) → dark outline + soft fill, like Airbnb's applied filters. */
.maison-filter.is-active { border-color: var(--m-ink); background: var(--m-fill, #f7f7f7); box-shadow: inset 0 0 0 1px var(--m-ink); }
/* Free-cancellation toggle chip: fills solid-dark when on. */
.maison-filter--check { font-weight: 600; gap: 9px; }
.maison-filter--check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px;
  border: 1.5px solid var(--m-strong, #b0b0b0); position: relative; cursor: pointer; transition: background .15s var(--m-ease), border-color .15s var(--m-ease); }
.maison-filter--check input:checked { background: var(--m-ink); border-color: var(--m-ink); }
.maison-filter--check input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.maison-filter--check.is-active { border-color: var(--m-ink); background: var(--m-ink); color: #fff; }
.maison-filter--check.is-active input { border-color: #fff; }
.maison-filter--check.is-active input:checked { background: #fff; }
.maison-filter--check.is-active input:checked::after { border-color: var(--m-ink); }
/* Dim the grid briefly while re-filtering so the change is felt. */
.maison-results.is-refetching { opacity: .5; transition: opacity .15s var(--m-ease); }
@media (max-width: 600px) { .maison-filters { gap: 8px; } .maison-filter { height: 40px; } }

/* Filters button (opens modal) */
.maison-filterbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; box-sizing: border-box;
  border: 1px solid var(--m-ink, #222); border-radius: 9999px; background: #fff; color: var(--m-ink); font-size: 14px; font-weight: 600;
  font-family: var(--m-sans); cursor: pointer; transition: box-shadow .2s var(--m-ease); }
.maison-filterbtn:hover { box-shadow: rgba(0,0,0,.12) 0 2px 8px -1px; }
.maison-filterbtn__badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--m-ink); color: #fff; border-radius: 9999px; font-size: 12px; font-weight: 700; }
.maison-filterbtn__badge[hidden] { display: none; }

/* Filters modal */
.maison-modal__dialog.maison-fmodal__dialog { width: 860px; max-width: calc(100% - 48px); max-height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.maison-fmodal__head { position: relative; text-align: center; padding: 18px; border-bottom: 1px solid var(--m-hairline-soft); flex: none; }
.maison-fmodal__title { font-size: 16px; font-weight: 600; margin: 0; }
.maison-fmodal .maison-modal__close { top: 15px; left: 16px; }
.maison-fmodal__body { overflow-y: auto; padding: 4px 28px; flex: 1 1 auto; }
.maison-fsec { padding: 26px 0; border-bottom: 1px solid var(--m-hairline-soft); }
.maison-fsec:last-child { border-bottom: 0; }
.maison-fsec--row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.maison-fsec__title { font-size: 20px; font-weight: 600; color: var(--m-ink); margin: 0 0 4px; letter-spacing: -.01em; }
.maison-fsec__sub { font-size: 14px; color: var(--m-muted); margin: 0 0 18px; }
.maison-fsec--row .maison-fsec__sub { margin: 0; }

.maison-fpills { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.maison-fpill, .maison-famen__chip { padding: 10px 18px; border: 1px solid var(--m-strong, #b0b0b0); border-radius: 9999px; background: #fff;
  font-size: 14px; color: var(--m-ink); cursor: pointer; font-family: var(--m-sans);
  transition: border-color .15s var(--m-ease), background .15s var(--m-ease), color .15s var(--m-ease); }
.maison-fpill:hover, .maison-famen__chip:hover { border-color: var(--m-ink); }
.maison-fpill.is-sel, .maison-famen__chip.is-sel { background: var(--m-ink); border-color: var(--m-ink); color: #fff; }
.maison-famen { display: flex; flex-wrap: wrap; gap: 10px; }
.maison-famen__chip[hidden] { display: none; }

/* Switch */
.maison-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.maison-switch input { opacity: 0; width: 0; height: 0; }
.maison-switch__track { position: absolute; inset: 0; background: var(--m-strong, #b0b0b0); border-radius: 9999px; cursor: pointer; transition: background .18s var(--m-ease); }
.maison-switch__track::before { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .18s var(--m-ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.maison-switch input:checked + .maison-switch__track { background: var(--m-ink); }
.maison-switch input:checked + .maison-switch__track::before { transform: translateX(20px); }

/* Price range slider + histogram */
.maison-price__hist { display: flex; align-items: flex-end; gap: 2px; height: 66px; padding: 0 12px; }
.maison-price__bar { flex: 1; background: var(--m-hairline, #ebebeb); border-radius: 2px 2px 0 0; min-height: 3px; }
.maison-price__bar.is-in { background: var(--m-rausch); }
.maison-price__slider { position: relative; height: 26px; margin: 0 12px; }
.maison-price__rail { position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--m-hairline, #ddd); border-radius: 3px; }
.maison-price__fill { position: absolute; top: 11px; height: 3px; background: var(--m-ink); border-radius: 3px; }
.maison-price__range { position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.maison-price__range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--m-hairline, #ddd); box-shadow: 0 1px 4px rgba(0,0,0,.28); cursor: grab; }
.maison-price__range::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--m-hairline, #ddd); box-shadow: 0 1px 4px rgba(0,0,0,.28); cursor: grab; }
.maison-price__inputs { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.maison-price__pill { display: inline-flex; flex-direction: column; gap: 1px; border: 1px solid var(--m-strong, #b0b0b0); border-radius: 12px; padding: 8px 16px; min-width: 120px; }
.maison-price__pill small { font-size: 11px; color: var(--m-muted); text-transform: uppercase; letter-spacing: .04em; }
.maison-price__pill b { font-size: 15px; color: var(--m-ink); }

.maison-fmodal__foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--m-hairline-soft); flex: none; }
.maison-fmodal__clear { background: none; border: 0; font-size: 15px; font-weight: 600; color: var(--m-ink); text-decoration: underline; cursor: pointer; padding: 8px; }
.maison-fmodal__apply { min-width: 150px; }
@media (max-width: 640px) { .maison-fmodal__dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; } }

/* Infinite-scroll footer: auto-load spinner (IO) or a "show more" button fallback */
.maison-loadmore { display: flex; justify-content: center; align-items: center; min-height: 60px; margin: 28px 0 8px; }
.maison-loadmore[hidden] { display: none; }
.maison-loadmore__btn { min-width: 200px; }
.maison-loadmore__spin { width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--m-hairline, #e5e5e5); border-top-color: var(--m-ink, #222); animation: maisonSpin .7s linear infinite; }
@keyframes maisonSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .maison-loadmore__spin { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .maison-skel, .maison-card__photo, .maison-hotel__banner, .maison-gallery__main, .maison-gallery__grid { animation: none; }
  .maison-card__img, .maison-hotel__img, .maison-gallery img,
  .maison-card__img.is-loading, .maison-hotel__img.is-loading, .maison-gallery img.is-loading { opacity: 1; transition: none; }
}

/* ---- Smooth page transitions (View Transitions API — progressive enhancement) ---- */
/* Opt every same-origin navigation into a cross-document transition. Unsupported browsers ignore
   this and navigate normally, so it degrades cleanly. */
@view-transition { navigation: auto; }

@keyframes maison-vt-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes maison-vt-fade-out { from { opacity: 1; } to { opacity: 0; } }

::view-transition-old(root) { animation: maison-vt-fade-out .18s var(--m-ease) both; }
::view-transition-new(root) { animation: maison-vt-fade-in .34s var(--m-ease) both; }

/* Keep the header pinned across navigations so the chrome feels like a persistent app shell. */
.maison-site-header { view-transition-name: maison-header; }
/* Destination for the result-card → hotel photo morph (source name is set on the clicked card by JS). */
.maison-gallery__main { view-transition-name: maison-hero-img; }
::view-transition-group(maison-hero-img) { animation-duration: .38s; animation-timing-function: var(--m-ease); }

/* Navigation progress bar (nprogress-style) shown while the next page loads. */
.maison-nprogress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 99999; pointer-events: none;
  background: linear-gradient(90deg, var(--m-rausch), #ff7a90); box-shadow: 0 0 10px rgba(255,56,92,.55);
  opacity: 0; border-radius: 0 2px 2px 0; transition: width .2s var(--m-ease), opacity .25s var(--m-ease); }
.maison-nprogress.is-active { opacity: 1; }
.maison-nprogress.is-done { transition: width .22s var(--m-ease), opacity .4s var(--m-ease) .12s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-group(maison-hero-img) { animation: none !important; }
  .maison-nprogress { display: none; }
}

/* ---- Listing content polish (highlights / amenities / guest favourite) ---- */
.maison-l__section { padding: 22px 0; }
.maison-l__h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 16px; }
/* Description spans the full width — 2-column magazine flow so it fills the space AND stays readable,
   instead of a narrow left-aligned column leaving the right half empty. */
.maison-l__desc { max-width: none; font-size: 15px; line-height: 1.7; color: var(--m-body); }
.maison-l__desc--rich { max-width: none; columns: 2; column-gap: 56px; }
.maison-l__desc--rich p { break-inside: avoid; }
@media (max-width: 760px) { .maison-l__desc--rich { columns: 1; } }

/* Guest favourite */
.maison-l__fav { padding: 18px 22px; border-radius: var(--m-r-md); margin-top: 18px; }
.maison-l__fav strong { font-size: 17px; font-weight: 600; }
.maison-l__favsub { font-size: 14px; color: var(--m-muted); margin-top: 3px; }
.maison-l__favrating { font-size: 20px; font-weight: 600; gap: 6px; white-space: nowrap; }

/* Highlights — side-by-side cards (fill the width, less vertical space) instead of a stacked list. */
.maison-l__highlights { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 40px; }
.maison-l__hl { display: flex; gap: 16px; align-items: flex-start; }
.maison-l__hlicon { flex: 0 0 auto; width: 28px; display: flex; justify-content: center; color: var(--m-ink); padding-top: 1px; }
.maison-l__hlicon svg { width: 26px; height: 26px; }
.maison-l__hltext { display: flex; flex-direction: column; gap: 3px; }
.maison-l__hltitle { font-size: 16px; font-weight: 500; color: var(--m-ink); line-height: 1.3; }
.maison-l__hlsub { font-size: 14px; color: var(--m-muted); line-height: 1.4; }

/* Amenities — aligned icon column, consistent rhythm */
.maison-l__amenities { grid-template-columns: repeat(4, 1fr); gap: 18px 32px; }
.maison-l__amenity { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--m-ink); min-height: 28px; }
.maison-l__amicon { flex: 0 0 auto; width: 26px; display: flex; justify-content: center; color: #484848; }
.maison-l__amicon svg { width: 24px; height: 24px; }

/* ---- Theme-agnostic reset: neutralize theme element defaults inside our widget.
   :where() has ZERO specificity, so these never override our .maison-* component rules,
   but they do normalize whatever the active theme sets on base elements. ---- */
:where(.maison-wrap) { line-height: 1.4; font-size: 16px; text-align: left; }
:where(.maison-wrap) button { font: inherit; margin: 0; padding: 0; background: transparent; border: 0; color: inherit; text-align: inherit; line-height: inherit; -webkit-appearance: none; appearance: none; box-shadow: none; }
:where(.maison-wrap) input[type="text"], :where(.maison-wrap) input[type="number"], :where(.maison-wrap) input[type="date"] { font: inherit; margin: 0; color: inherit; background: transparent; box-shadow: none; }
:where(.maison-wrap) ul, :where(.maison-wrap) ol, :where(.maison-wrap) li { margin: 0; padding: 0; list-style: none; background: none; }
:where(.maison-wrap) a { text-decoration: none; color: inherit; box-shadow: none; }
:where(.maison-wrap) a:hover { color: inherit; }
:where(.maison-wrap) img { max-width: 100%; display: block; border: 0; border-radius: 0; box-shadow: none; }
:where(.maison-wrap) svg { display: block; }
:where(.maison-wrap) h1, :where(.maison-wrap) h2, :where(.maison-wrap) h3, :where(.maison-wrap) p { margin: 0; padding: 0; font-weight: inherit; color: inherit; }
:where(.maison-wrap) label { margin: 0; }
:where(.maison-wrap) details > summary { list-style: none; }

/* ---- Calendar fix: fixed 44px cells (not column-width), connected range, circular endpoints ---- */
.maison-cal__grid { grid-template-columns: repeat(7, 44px); justify-content: center; gap: 0; }
.maison-cal__wd { width: 44px; }
.maison-cal__day {
  width: 44px; height: 44px; aspect-ratio: auto; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.maison-cal__day:hover:not(:disabled):not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--m-ink); }
.maison-cal__day.is-range { background: var(--m-soft); border-radius: 0; box-shadow: none; }
.maison-cal__day.is-selected { background: var(--m-ink); color: #fff; border-radius: 50%; }
.maison-cal__grid > span:empty { width: 44px; height: 44px; }

/* ---- Landing hero (search bar inside a modern hero) ---- */
.maison-hero { position: relative; isolation: isolate; z-index: 5; border-radius: 22px; overflow: visible;
  padding: 84px 28px 52px; margin: 0 0 34px; }
/* Premium "luxury OTA" hero background: a real luxury hotel exterior photo (WebP, JPEG fallback)
   layered over a rich dark gradient (so the hero still looks intentional while the image loads, and
   the gradient shows through the tint for text contrast). The client's designer can swap the photo by
   changing this one custom property — no markup change. */
.maison-hero__bg { position: absolute; inset: 0; z-index: -1; border-radius: 22px; overflow: hidden;
  --m-hero-image: image-set(
    url('/wp-content/uploads/2026/07/maison-hero-luxe.webp') type('image/webp'),
    url('/wp-content/uploads/2026/07/maison-hero-luxe.jpg') type('image/jpeg'));
  background-image: var(--m-hero-image, none),
    radial-gradient(120% 130% at 18% 8%, #3a3350 0%, #1c1b28 48%, #100f18 100%);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat; }
.maison-hero__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 80% 0%, rgba(196,164,106,.16) 0%, rgba(196,164,106,0) 60%),
    linear-gradient(180deg, rgba(18,20,28,.22) 0%, rgba(18,20,28,.50) 100%); }
/* Hero. NB: no overflow:hidden here — it would clip the "Where" autocomplete dropdown that extends
   below the search bar. The bg + tint self-clip to rounded corners via their own border-radius. */
.maison-hero--luxe { min-height: 520px; display: flex; align-items: center; }
.maison-hero__tint { position: absolute; inset: 0; z-index: -1; border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,17,24,.55) 0%, rgba(15,17,24,.42) 45%, rgba(15,17,24,.70) 100%); }
.maison-hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px auto 0; max-width: 860px; }
.maison-hero__badge { font-size: 12.5px; font-weight: 500; color: #fff; letter-spacing: .01em;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: 999px; }

.maison-hero__body { max-width: 940px; margin: 0 auto; text-align: center; }
.maison-hero__title { color: #fff; font-family: var(--m-sans); font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; text-shadow: 0 1px 24px rgba(0,0,0,.25); }
.maison-hero__sub { color: rgba(255,255,255,.94); font-size: 18px; line-height: 1.5; margin: 0 auto 30px; max-width: 620px; }
.maison-hero__search { max-width: 940px; margin: 0 auto; }
.maison-hero__search .maison-searchbar { margin: 0; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
/* Tablet + mobile: restore a side gutter for content (cards/text), but keep the hero full-bleed —
   squared corners, no top gap, and broken out of that gutter so it still spans edge-to-edge. */
@media (max-width: 1024px) {
  .maison-wrap { padding-inline: clamp(16px, 4vw, 24px); }
  /* Match the home page's side gutter on mobile/tablet for the account + checkout pages. */
  .maison-account-page.woocommerce-account main .woocommerce,
  .maison-co { box-sizing: border-box; padding-inline: clamp(16px, 4vw, 24px); }
  .maison-hero, .maison-hero__bg, .maison-hero__video, .maison-hero__tint { border-radius: 0; }
  body.home .maison-hero { margin-inline: calc(-1 * clamp(16px, 4vw, 24px)); }
  body.maison-landing main.wp-block-group { margin-top: 0 !important; padding-top: 0 !important; }
  body.maison-landing main > .entry-content { margin-top: 0 !important; }
}
@media (max-width: 744px) {
  .maison-hero { padding: 52px 16px 34px; }
  .maison-hero--video { min-height: 460px; }
  .maison-hero__title { font-size: 24px; }
  .maison-hero__sub { font-size: 16px; margin-bottom: 22px; }
  .maison-hero__badges { gap: 6px; margin-top: 16px; }
  .maison-hero__badge { font-size: 11px; padding: 5px 10px; }
}

/* ---- "The Bait": free skin-care gift promo — neutral surface + coral accent, on design system ---- */
.maison-bait { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; margin: 28px 0 40px;
  border-radius: var(--m-r-md); overflow: hidden; background: var(--m-canvas);
  border: 1px solid var(--m-hairline); box-shadow: var(--m-shadow); }
.maison-bait__media { position: relative; min-height: 320px; background: var(--m-soft); }
.maison-bait__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.maison-bait__copy { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.maison-bait__eyebrow { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--m-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--m-rausch); margin: 0 0 14px; }
.maison-bait__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--m-rausch); border-radius: 2px; }
.maison-bait__title { font-family: var(--m-sans); font-size: 28px; line-height: 1.18;
  font-weight: 700; letter-spacing: -.02em; color: var(--m-ink); margin: 0 0 14px; }
.maison-bait__text { font-size: 16px; line-height: 1.6; color: var(--m-muted); margin: 0 0 22px; max-width: 42ch; }
.maison-bait__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--m-rausch); background: var(--m-soft);
  border: 1px solid var(--m-hairline); border-radius: var(--m-r-full); padding: 9px 16px; }
.maison-ficon { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 720px) {
  .maison-bait { grid-template-columns: 1fr; margin: 20px 0 30px; }
  .maison-bait__media { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--m-hairline-soft); }
  .maison-bait__copy { padding: 28px 24px; }
  .maison-bait__title { font-size: 24px; }
}

/* ---- Showcase: Airbnb-style horizontal rows of property cards ---- */
.maison-showcase { margin: 8px 0 12px; }
.maison-row { margin: 0 0 30px; }
.maison-row__head { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 14px; }
.maison-row__title { font-family: var(--m-sans); font-size: 22px; font-weight: 600; letter-spacing: -.01em;
  color: var(--m-ink); margin: 0; }
.maison-row__sub { font-size: 14px; color: var(--m-muted); margin: 3px 0 0; }
.maison-row__track { display: grid; grid-auto-flow: column; justify-content: start;
  grid-auto-columns: minmax(210px, 244px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.maison-row__track::-webkit-scrollbar { display: none; }

.maison-pcard { scroll-snap-align: start; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform var(--m-dur, .28s) var(--m-ease); }
.maison-pcard:hover { transform: translateY(-2px); }
.maison-pcard__photo { position: relative; aspect-ratio: 1/1; border-radius: var(--m-r-md);
  overflow: hidden; background: var(--m-fill); }
.maison-pcard__img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--m-ease); }
.maison-pcard:hover .maison-pcard__img { transform: scale(1.045); }
.maison-pcard__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--ph-h,210) 32% 80%), hsl(calc(var(--ph-h,210) + 40) 38% 62%));
  transition: transform .5s var(--m-ease); }
.maison-pcard:hover .maison-pcard__ph { transform: scale(1.045); }
.maison-pcard__phmark { font-family: var(--m-serif, var(--m-sans)); font-size: 42px; font-weight: 700;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.14); }
.maison-pcard__fav { position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.95); color: var(--m-ink); font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: var(--m-r-full); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.maison-pcard__head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 11px 0 0; }
.maison-pcard__title { font-size: 15px; font-weight: 600; color: var(--m-ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maison-pcard__rating { display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 14px; color: var(--m-ink); }
.maison-pcard__rating svg { width: 13px; height: 13px; fill: var(--m-ink); }
.maison-pcard__loc { font-size: 14px; color: var(--m-muted); margin: 2px 0 0; }
.maison-pcard__price { font-size: 14px; color: var(--m-body); margin: 6px 0 0; }
.maison-pcard__price strong { color: var(--m-ink); font-weight: 600; }
@media (max-width: 744px) {
  .maison-row__track { grid-auto-columns: minmax(160px, 70%); gap: 14px; }
  .maison-row__title { font-size: 19px; }
}

/* ---- Auth modal (login / registration) ---- */
.maison-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  font-family: var(--m-sans); padding: 16px; }
.maison-modal[hidden] { display: none; }
.maison-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: maisonFade .2s var(--m-ease) both; }
.maison-modal__dialog { position: relative; z-index: 1; width: 420px; max-width: 100%; background: #fff; border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); padding: 22px 24px 24px; animation: maisonPop .22s var(--m-ease) both;
  max-height: 92vh; overflow-y: auto; }
.maison-modal__close { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border: 0; background: transparent;
  border-radius: 50%; font-size: 22px; line-height: 1; color: var(--m-ink); cursor: pointer; }
.maison-modal__close:hover { background: var(--m-fill); }
.maison-modal__head { text-align: center; border-bottom: 1px solid var(--m-hairline-soft); padding-bottom: 14px; margin-bottom: 20px; }
.maison-modal__logo { max-height: 30px; width: auto; margin: 2px auto 0; display: block; }
.maison-modal__orb { display: block; width: 30px; height: 30px; margin: 2px auto 0; border-radius: 50%; background: var(--m-rausch); }
.maison-modal__title { font-size: 15px; font-weight: 600; color: var(--m-ink); margin: 10px 0 0; }
.maison-modal__welcome { font-size: 22px; font-weight: 600; color: var(--m-ink); margin: 0 0 6px; letter-spacing: -.01em; text-align: center; }
.maison-modal__sub { font-size: 14px; color: var(--m-muted); margin: 0 0 18px; text-align: center; }
.maison-modal__sub[hidden] { display: none; }
/* Register: bold section headings + joined legal-name box + hints + marketing opt-out. */
.maison-auth__reg[hidden] { display: none; }
.maison-auth__label { font-size: 16px; font-weight: 600; color: var(--m-ink); margin: 18px 0 10px; }
.maison-auth__label:first-of-type { margin-top: 4px; }
.maison-namegroup { border: 1px solid var(--m-strong); border-radius: var(--m-r-sm); transition: border-color .18s var(--m-ease), box-shadow .18s var(--m-ease); }
.maison-namegroup:focus-within { border-color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-ink); }
.maison-auth .maison-namegroup .maison-field { border: 0; border-radius: 0; margin: 0; box-shadow: none !important; }
.maison-auth .maison-namegroup .maison-field:not(:first-child) { border-top: 1px solid var(--m-strong); }
.maison-field--date input { color: var(--m-ink); }
.maison-auth__hint { font-size: 12px; color: var(--m-muted); line-height: 1.45; margin: 8px 2px 0; }
.maison-auth__promo { border: 1px solid var(--m-hairline); background: var(--m-soft, #f7f7f7); border-radius: 12px; padding: 14px 16px; margin: 18px 0 4px; }
.maison-auth__promotext { font-size: 12px; color: var(--m-muted); line-height: 1.5; margin: 0 0 10px; }
.maison-auth__promorow { display: flex; align-items: center; gap: 14px; justify-content: space-between; font-size: 14px; color: var(--m-ink); cursor: pointer; }
.maison-auth__promorow input { width: 22px; height: 22px; flex: none; accent-color: var(--m-rausch); cursor: pointer; }
.maison-auth__err { background: #fff5f6; border: 1px solid #ffc9d2; color: #b30020; font-size: 13.5px; line-height: 1.4;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.maison-auth .maison-field { position: relative; margin-bottom: 12px; border: 1px solid var(--m-strong); border-radius: var(--m-r-sm);
  padding: 7px 12px; background: #fff; }
.maison-auth .maison-field:focus-within { border-color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-ink); }
.maison-auth .maison-field label { display: block; font-size: 11px; color: var(--m-muted); }
.maison-auth .maison-field input { width: 100%; border: 0; background: transparent; font-size: 15px; font-family: var(--m-sans);
  color: var(--m-ink); padding: 2px 0 0; }
.maison-auth .maison-field input:focus { outline: none; box-shadow: none; }
.maison-auth__submit { width: 100%; margin-top: 6px; }
.maison-auth__foot { text-align: center; font-size: 14px; color: var(--m-muted); margin-top: 18px; }
.maison-auth__foot a { color: var(--m-rausch); font-weight: 600; text-decoration: none; margin-left: 4px; }
.maison-auth__foot a:hover { text-decoration: underline; }
@media (max-width: 480px) { .maison-modal__dialog { border-radius: 14px; } }

/* ---- Stepped "Confirm and pay" checkout ---- */
/* Match the home/header content width (1280px). The higher-specificity selector beats WooCommerce's
   own block-theme cap (.woocommerce-checkout main .woocommerce { max-width:1000px }), and .maison-co
   is widened to fill it. */
.maison-checkout-page.woocommerce-checkout main .woocommerce { max-width: 1280px; }
.maison-co { max-width: 1280px; margin: 0 auto; font-family: var(--m-sans); color: var(--m-ink); }
.maison-co *, .maison-co *::before, .maison-co *::after { box-sizing: border-box; }
.maison-co__title { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 8px 0 26px; }
.maison-co__form { display: grid; grid-template-columns: 1fr 372px; gap: 48px; align-items: start; }
.maison-co__main { min-width: 0; }
.maison-co__aside { position: sticky; top: 96px; }

/* Step cards */
.maison-co__step { border: 1px solid var(--m-hairline); border-radius: 16px; padding: 20px 24px; margin-bottom: 20px; background: #fff; }
.maison-co__step.is-active { box-shadow: rgba(0,0,0,.04) 0 2px 8px 0; }
.maison-co__stephead { display: flex; align-items: center; justify-content: space-between; }
.maison-co__steptitle { font-size: 20px; font-weight: 600; color: var(--m-ink); margin: 0; display: flex; align-items: center; gap: 12px; }
.maison-co__step:not(.is-active):not(.is-done) .maison-co__steptitle { color: var(--m-muted-soft); }
.maison-co__num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--m-ink); color: #fff; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; }
.maison-co__step:not(.is-active):not(.is-done) .maison-co__num { background: var(--m-fill); color: var(--m-muted); }
.maison-co__step.is-done .maison-co__num { background: var(--m-ink); }
.maison-co__done { font-size: 14px; color: var(--m-ink); text-decoration: underline; cursor: pointer; }
.maison-co__stephead { cursor: default; }
.maison-co__step.is-done .maison-co__stephead { cursor: pointer; }
.maison-co__stepbody { display: none; margin-top: 18px; }
.maison-co__step.is-active .maison-co__stepbody { display: block; }
.maison-co__hint, .maison-co__loggedin { font-size: 15px; color: var(--m-body); margin: 0 0 16px; }
.maison-co__continue { margin-top: 8px; }
.maison-co__login { margin: 0 12px 12px 0; }

/* WooCommerce billing fields inside step 2 */
.maison-co #customer_details .form-row { margin: 0 0 14px; }
.maison-co #customer_details label { font-size: 13px; color: var(--m-muted); display: block; margin-bottom: 4px; }
.maison-co #customer_details .input-text,
.maison-co #customer_details select,
.maison-co .select2-selection { border: 1px solid var(--m-strong) !important; border-radius: var(--m-r-sm) !important;
  padding: 11px 12px !important; font-size: 15px !important; font-family: var(--m-sans) !important; width: 100%; min-height: 44px; }
.maison-co #customer_details .input-text:focus { outline: none; border-color: var(--m-ink) !important; box-shadow: 0 0 0 1px var(--m-ink); }
.maison-co__invalid { border-color: var(--m-rausch) !important; box-shadow: 0 0 0 1px var(--m-rausch) !important; }
.maison-co__invalid-row > label { color: var(--m-rausch); }

/* Step 3: hide the redundant WC line-item table (the summary card covers it); keep payment + place order */
.maison-co #order_review .woocommerce-checkout-review-order-table { display: none; }
.maison-co #payment { background: transparent; border-radius: 12px; }
.maison-co #payment ul.payment_methods { border: 1px solid var(--m-hairline); border-radius: 12px; padding: 8px 14px; list-style: none; margin: 0 0 16px; }
.maison-co #payment .place-order { padding: 0; }
.maison-co #place_order { width: 100%; font-size: 16px; font-weight: 600; padding: 15px; border-radius: 10px;
  background: var(--m-rausch); color: #fff; border: 0; cursor: pointer; }
.maison-co #place_order:hover { background: var(--m-rausch-active); }

/* Reservation summary card */
.maison-cosum { border: 1px solid var(--m-hairline); border-radius: 16px; padding: 22px 24px; background: #fff;
  box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.08) 0 6px 16px 0; }
.maison-cosum__hotel { display: flex; align-items: center; gap: 14px; }
.maison-cosum__thumb { flex: none; width: 64px; height: 64px; border-radius: 12px; background-size: cover;
  background-position: center; background-color: var(--m-fill); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.maison-cosum__head { min-width: 0; }
.maison-cosum__title { font-size: 16px; font-weight: 600; color: var(--m-ink); }
.maison-cosum__sub { font-size: 14px; color: var(--m-muted); margin-top: 2px; }
.maison-cosum__meta { border-top: 1px solid var(--m-hairline-soft); border-bottom: 1px solid var(--m-hairline-soft);
  margin: 16px 0; padding: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.maison-cosum__meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.maison-cosum__label { color: var(--m-muted); }
.maison-cosum__pricehead { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.maison-cosum__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--m-body); margin-bottom: 8px; }
.maison-cosum__row--save { color: #008a05; }
.maison-cosum__total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; color: var(--m-ink);
  border-top: 1px solid var(--m-hairline); margin-top: 8px; padding-top: 16px; }
/* "10% Points Back" reward the guest earns on this stay — soft pill under the total. */
.maison-cosum__reward { display: flex; align-items: center; gap: 8px; margin-top: 14px;
  background: #fdeef1; color: #e0114a; border-radius: 12px; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; }
.maison-cosum__flame { width: 16px; height: 16px; flex: none; }
.maison-cosum__rewardlabel { flex: 1; }
.maison-cosum__rewardval { font-weight: 700; }
.maison-cosum__rewardval .amount, .maison-cosum__rewardval bdi { color: inherit; }
/* Wallet redemption toggle at checkout */
.maison-redeem { margin: 4px 0 18px; }
.maison-redeem__row { display: flex; align-items: center; gap: 11px; cursor: pointer; padding: 13px 15px;
  border: 1px solid var(--m-hairline); border-radius: 12px; background: #fff; transition: border-color .18s var(--m-ease), background .18s var(--m-ease); }
.maison-redeem__row:hover { border-color: var(--m-rausch); }
.maison-redeem__row input { width: 18px; height: 18px; accent-color: var(--m-rausch); flex: none; margin: 0; cursor: pointer; }
.maison-redeem__txt { font-size: 14px; color: var(--m-ink); }
.maison-redeem__txt strong { color: var(--m-rausch); font-weight: 700; }
.maison-redeem__row:has(input:checked) { border-color: var(--m-rausch); background: rgba(255,56,92,.05); }
.maison-co__reassure { margin-top: 16px; }
.maison-co__rare { display: block; background: #fff0f3; color: var(--m-ink); font-size: 14px; font-weight: 500;
  border-radius: 12px; padding: 12px 16px; }

@media (max-width: 900px) {
  .maison-co__form { grid-template-columns: 1fr; gap: 28px; }
  .maison-co__aside { position: static; order: -1; }
}

/* Declutter the classic checkout chrome on our stepped page (coupons are disabled on bookings). */
.maison-checkout-page .woocommerce-form-coupon-toggle,
.maison-checkout-page .woocommerce-info.woocommerce-no-js { display: none; }
.maison-checkout-page .woocommerce-checkout .blockUI.blockOverlay { border-radius: 16px; }

/* ---- Order confirmation ("thank you") ---- */
.maison-oc { max-width: 600px; margin: 0 auto; padding: 24px; text-align: center; font-family: var(--m-sans); color: var(--m-ink); }
.maison-oc__badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 50%; margin: 12px auto 22px; }
.maison-oc__badge svg { width: 32px; height: 32px; }
.maison-oc__badge.is-confirmed { background: #008a05; }
.maison-oc__badge.is-pending { background: var(--m-ink); }
.maison-oc__badge.is-failed { background: #c01a2b; }
.maison-oc__title { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; }
.maison-oc__sub { font-size: 16px; color: var(--m-body); line-height: 1.55; margin: 0 auto 28px; max-width: 470px; }
.maison-oc__card { border: 1px solid var(--m-hairline); border-radius: 16px; padding: 24px; text-align: left;
  box-shadow: var(--m-shadow); }
.maison-oc__hotel { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.maison-oc__hcn { display: flex; flex-direction: column; gap: 4px; background: var(--m-soft); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px; }
.maison-oc__hcnlabel { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--m-muted); }
.maison-oc__hcnval { font-size: 20px; font-weight: 600; letter-spacing: .02em; color: var(--m-ink); }
.maison-oc__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--m-hairline-soft); font-size: 15px; }
.maison-oc__label { color: var(--m-muted); }
.maison-oc__value { color: var(--m-ink); font-weight: 500; text-align: right; }
.maison-oc__policy { font-size: 14px; color: var(--m-muted); margin: 20px auto 24px; max-width: 460px; }
.maison-oc__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.maison-oc__actions .maison-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { .maison-oc__actions { flex-direction: column; } .maison-oc__actions .maison-btn { width: 100%; } }

/* ---- My Account — fully custom page (no WooCommerce sidebar) ---- */
/* The page's own "My account" post title is redundant beside our bespoke header/top-bar. */
.maison-account-page .wp-block-post-title,
.maison-account-page .entry-title { display: none; }
/* Single centred column at the home/header content width (1280px). The higher-specificity selector
   (both body classes, no descendant space) is needed to beat WooCommerce's own block-theme cap
   (.woocommerce-account main .woocommerce { max-width:1000px }). */
.maison-account-page.woocommerce-account main .woocommerce,
.maison-account-page .woocommerce-account .woocommerce { max-width: 1280px; margin: 0 auto; font-family: var(--m-sans); }
.maison-account { font-family: var(--m-sans); }
/* WooCommerce floats .woocommerce-MyAccount-content right at 68.5% for its two-column layout;
   we've dropped the sidebar, so reset it to a full-width block. */
.maison-account-page .woocommerce-MyAccount-content { float: none; width: 100%; margin: 0; min-width: 0; }

/* Sub-page top bar: "‹ Account" back link + current page title. */
.maison-account__bar { margin-bottom: 22px; }
.maison-account__back { display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--m-muted); margin-bottom: 12px;
  transition: color .18s var(--m-ease); }
.maison-account__back:hover { color: var(--m-ink); }
.maison-account__back svg { width: 17px; height: 17px; }
.maison-account__title { font-size: 30px; font-weight: 600; letter-spacing: -.025em; color: var(--m-ink); margin: 0; line-height: 1.1; }

/* Sub-page tabs — our own horizontal nav replacing the WooCommerce sidebar. */
.maison-account__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px;
  border-bottom: 1px solid var(--m-hairline-soft); padding-bottom: 0; }
.maison-account__tab { position: relative; text-decoration: none; font-size: 15px; font-weight: 500;
  color: var(--m-muted); padding: 10px 4px; margin-right: 18px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s var(--m-ease), border-color .18s var(--m-ease); }
.maison-account__tab:hover { color: var(--m-ink); }
.maison-account__tab.is-active { color: var(--m-ink); font-weight: 600; border-bottom-color: var(--m-ink); }

/* ---- Dashboard (card grid) ---- */
.maison-acc__head { margin-bottom: 30px; }
.maison-acc__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--m-rausch); margin: 0 0 10px; }
.maison-acc__hello { font-size: 36px; font-weight: 600; letter-spacing: -.03em; color: var(--m-ink); margin: 0 0 14px; line-height: 1.08; }
.maison-acc__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.maison-acc__badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; border-radius: var(--m-r-full);
  background: var(--m-ink); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.maison-acc__badge svg { width: 15px; height: 15px; color: var(--m-rausch); }
.maison-acc__badge { text-decoration: none; transition: transform .15s var(--m-ease, ease), box-shadow .15s var(--m-ease, ease); }
a.maison-acc__badge:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.maison-acc__metasub { font-size: 14px; color: var(--m-muted); }

/* ---- Wallet (My Account → Wallet endpoint) ---- */
.maison-wallet__hero { position: relative; overflow: hidden; border-radius: 18px; padding: 28px 30px;
  background: linear-gradient(135deg, #2a2320 0%, #1c1a24 55%, var(--m-rausch) 260%); color: #fff;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 18px 44px -20px rgba(255,56,92,.5); }
.maison-wallet__label { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.maison-wallet__balance { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.maison-wallet__balance .amount, .maison-wallet__balance bdi { color: #fff; }
.maison-wallet__pending { font-size: 13.5px; color: #ffd7df; margin-top: 2px; }
.maison-wallet__lifetime { font-size: 13px; opacity: .6; margin-top: 8px; }
.maison-wallet__h { font-size: 16px; font-weight: 600; color: var(--m-ink); margin: 26px 0 12px; }
.maison-wallet__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--m-hairline-soft); border-radius: 16px; overflow: hidden; }
.maison-wtx { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px;
  border-bottom: 1px solid var(--m-hairline-soft); }
.maison-wtx:last-child { border-bottom: 0; }
.maison-wtx--empty { justify-content: center; color: var(--m-muted); font-size: 14px; padding: 26px 18px; text-align: center; }
.maison-wtx__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.maison-wtx__desc { font-size: 14.5px; font-weight: 600; color: var(--m-ink); }
.maison-wtx__meta { font-size: 12.5px; color: var(--m-muted); }
.maison-wtx__meta a { color: var(--m-rausch); text-decoration: none; }
.maison-wtx__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.maison-wtx__amount { font-size: 15px; font-weight: 700; color: var(--m-ink); white-space: nowrap; }
.maison-wtx--reversed .maison-wtx__amount { color: var(--m-muted); text-decoration: line-through; }
.maison-wtx__badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; }
.maison-wtx__badge--ok { background: #e7f6ec; color: #067a3e; }
.maison-wtx__badge--pending { background: #fdf0e3; color: #b76e00; }
.maison-wtx__badge--reversed { background: var(--m-fill); color: var(--m-muted); }

/* Card grid — compact horizontal cards (icon · text · chevron), 3 across at 1280px → a clean 3+3.
   Reflows to 2 / 1 on smaller screens. */
.maison-acc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 40px; }
.maison-acc__card { display: flex; flex-direction: row; align-items: center; gap: 15px; text-decoration: none; color: inherit;
  border: 1px solid var(--m-hairline-soft); border-radius: 16px; padding: 17px 18px; background: #fff;
  transition: border-color .2s var(--m-ease), box-shadow .2s var(--m-ease), transform .2s var(--m-ease); }
.maison-acc__card:hover { border-color: var(--m-hairline); transform: translateY(-2px);
  box-shadow: rgba(0,0,0,.03) 0 0 0 1px, rgba(0,0,0,.1) 0 10px 24px -12px; }
.maison-acc__cardicon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--m-soft); color: var(--m-ink); }
.maison-acc__cardicon svg { width: 22px; height: 22px; }
.maison-acc__cardbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.maison-acc__cardtitle { font-size: 16px; font-weight: 600; color: var(--m-ink); }
.maison-acc__cardsub { font-size: 13.5px; color: var(--m-muted); line-height: 1.35; }
.maison-acc__cardarrow { flex: none; width: 18px; height: 18px; color: var(--m-strong);
  transition: transform .2s var(--m-ease), color .2s var(--m-ease); }
.maison-acc__card:hover .maison-acc__cardarrow { transform: translateX(3px); color: var(--m-rausch); }
/* Wallet = loyalty hero: soft rausch accent so it stands out from the utility links. */
.maison-acc__card--accent { border-color: transparent; background: linear-gradient(180deg, #fff 0%, #fff6f8 100%);
  box-shadow: inset 0 0 0 1px rgba(255,56,92,.16); }
.maison-acc__card--accent .maison-acc__cardicon { background: rgba(255,56,92,.12); color: var(--m-rausch); }
.maison-acc__card--accent:hover { box-shadow: inset 0 0 0 1px rgba(255,56,92,.26), rgba(255,56,92,.16) 0 10px 24px -12px; }
.maison-acc__card--accent .maison-acc__cardarrow { color: var(--m-rausch); }

/* Image CTA */
.maison-acc__cta { position: relative; overflow: hidden; border-radius: 22px; min-height: 220px; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; isolation: isolate; }
.maison-acc__cta::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,20,28,.15) 0%, rgba(18,20,28,.72) 100%); }
.maison-acc__ctabody { padding: 28px 32px; color: #fff; }
.maison-acc__ctatitle { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.maison-acc__ctasub { font-size: 15px; color: rgba(255,255,255,.9); margin: 4px 0 16px; }
.maison-acc__ctabtn { display: inline-flex; align-items: center; background: #fff; color: var(--m-ink); text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: var(--m-r-full); transition: transform .18s var(--m-ease); }
.maison-acc__ctabtn:hover { transform: translateY(-1px); }

/* Account tables (bookings list etc.) */
.maison-account-page .woocommerce-orders-table, .maison-account-page .shop_table {
  border: 1px solid var(--m-hairline-soft); border-radius: 16px; border-collapse: separate; overflow: hidden; }
.maison-account-page .woocommerce-button.button, .maison-account-page .button {
  background: var(--m-ink) !important; color: #fff !important; border-radius: 10px !important; box-shadow: none !important; }

@media (max-width: 600px) {
  .maison-acc__hello { font-size: 28px; }
  .maison-account__title { font-size: 24px; }
  .maison-acc__grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- My bookings — list of trips + single booking card ---- */
.maison-booklist__h { font-size: 15px; font-weight: 600; color: var(--m-ink); letter-spacing: -.01em;
  margin: 0 0 14px; }
.maison-booklist__h--past { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--m-hairline); color: var(--m-muted); }
.maison-booklist { display: flex; flex-direction: column; gap: 14px; }
.maison-booklist--past .maison-book { opacity: .72; }
.maison-booklist--past .maison-book:hover { opacity: 1; }
.maison-booklist--empty { align-items: flex-start; gap: 18px; padding: 8px 0 24px; }
.maison-booklist--empty p { font-size: 16px; color: var(--m-muted); margin: 0; }
.maison-book { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--m-ink);
  border: 1px solid var(--m-hairline); border-radius: 16px; padding: 18px 20px; background: var(--m-canvas, #fff);
  transition: box-shadow .2s var(--m-ease), transform .2s var(--m-ease); }
.maison-book:hover { box-shadow: var(--m-shadow); transform: translateY(-1px); }
.maison-book__pin { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--m-fill);
  display: flex; align-items: center; justify-content: center; color: #484848; }
.maison-book__pin svg { width: 22px; height: 22px; }
.maison-book__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.maison-book__hotel { font-size: 16px; font-weight: 600; color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maison-book__meta { font-size: 14px; color: var(--m-body); }
.maison-book__ref { font-size: 12.5px; color: var(--m-muted); font-family: var(--m-mono, ui-monospace, Menlo, monospace); }
.maison-book__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.maison-book__price { font-size: 15px; font-weight: 600; color: var(--m-ink); }
.maison-book__status { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.maison-book__status.is-confirmed { background: rgba(0,138,5,.12); color: #007a04; }
.maison-book__status.is-pending { background: var(--m-fill); color: var(--m-ink); }
.maison-book__status.is-failed { background: rgba(192,26,43,.12); color: #b0182a; }
.maison-book__status.is-cancelled { background: var(--m-fill); color: var(--m-muted); }

.maison-bookview { max-width: 620px; }
.maison-bookview__pill { display: inline-block; margin-bottom: 14px; }
.maison-bookview__hotel { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--m-ink); margin: 0 0 20px; }
.maison-bookview__card { border: 1px solid var(--m-hairline); border-radius: 16px; overflow: hidden; box-shadow: var(--m-shadow); }
.maison-bookview__hcn { display: flex; flex-direction: column; gap: 4px; background: var(--m-soft, #f6f1e7);
  padding: 18px 22px; border-bottom: 1px solid var(--m-hairline-soft); }
.maison-bookview__hcnk { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--m-muted); }
.maison-bookview__hcnv { font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--m-ink); font-family: var(--m-mono, ui-monospace, Menlo, monospace); }
.maison-bookview__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--m-hairline-soft); font-size: 15px; }
.maison-bookview__row:first-child { border-top: 0; }
.maison-bookview__k { color: var(--m-muted); }
.maison-bookview__v { color: var(--m-ink); font-weight: 500; text-align: right; }
.maison-bookview .maison-back { margin-top: 22px; }
@media (max-width: 600px) {
  .maison-book { flex-wrap: wrap; }
  .maison-book__aside { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; margin-top: 4px; }
}

/* ---- Rich booking voucher (BookingDetail) ---- */
.maison-bd__sub { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--m-body); margin: -12px 0 22px; }
.maison-bd__stars { color: #d4a13a; letter-spacing: 1px; }
.maison-bd__stay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--m-hairline-soft); border-top: 1px solid var(--m-hairline-soft); }
.maison-bd__cell { background: #fff; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.maison-bd__celllabel { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--m-muted); }
.maison-bd__cellval { font-size: 15px; font-weight: 600; color: var(--m-ink); }
.maison-bd__cellsub { font-size: 12.5px; color: var(--m-muted); }
.maison-bd__total { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px;
  border-top: 1px solid var(--m-hairline-soft); font-weight: 600; color: var(--m-ink); font-size: 16px; }

.maison-bd__sec { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--m-hairline); }
.maison-bd__h3 { font-size: 17px; font-weight: 600; color: var(--m-ink); margin: 0 0 14px; }
.maison-bd__room { border: 1px solid var(--m-hairline); border-radius: 14px; padding: 16px 18px; }
.maison-bd__roomname { font-size: 15px; font-weight: 600; color: var(--m-ink); }
.maison-bd__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.maison-bd__chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--m-fill); color: var(--m-ink); }
.maison-bd__chip.is-good { background: rgba(0,138,5,.12); color: #007a04; }
.maison-bd__chip.is-promo { background: rgba(214,60,92,.12); color: #c01a3a; }
.maison-bd__incl { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.maison-bd__incl li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--m-body); }
.maison-bd__incl li::before { content: "✓"; position: absolute; left: 0; color: #007a04; font-weight: 700; }
.maison-bd__guests { font-size: 13.5px; color: var(--m-muted); margin-top: 10px; }

.maison-bd__cancel { border: 1px solid var(--m-hairline); border-radius: 12px; overflow: hidden; }
.maison-bd__cancelrow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: 14px; color: var(--m-ink); border-top: 1px solid var(--m-hairline-soft); }
.maison-bd__cancelrow:first-child { border-top: 0; }
.maison-bd__free { color: #007a04; font-weight: 600; }
.maison-bd__nonref { font-size: 14px; line-height: 1.55; color: var(--m-body); margin: 0; }

.maison-bd__know { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.maison-bd__know li { position: relative; padding-left: 20px; font-size: 14px; color: var(--m-body); line-height: 1.5; }
.maison-bd__know li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--m-ink); }
.maison-bd__more { margin-top: 14px; }
.maison-bd__conds { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.maison-bd__cond { font-size: 13px; line-height: 1.55; color: var(--m-body); }
.maison-bd__cond ul { margin: 6px 0; padding-left: 18px; }
@media (max-width: 600px) { .maison-bd__stay { grid-template-columns: 1fr 1fr; } }

/* ---- Homepage sections ([maison_home]) ---- */
.maison-home { padding-bottom: 8px; }
.maison-home__sec { margin: 64px 0; }
.maison-home__head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.maison-home__h2 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--m-ink); margin: 0 0 8px; }
.maison-home__lead { font-size: 16px; color: var(--m-muted); margin: 0; line-height: 1.55; }

/* Value props */
.maison-home__feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.maison-feat { text-align: left; padding: 26px 24px; border: 1px solid var(--m-hairline-soft); border-radius: 18px; background: #fff;
  transition: transform .2s var(--m-ease), box-shadow .2s var(--m-ease); }
.maison-feat:hover { transform: translateY(-3px); box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.1) 0 12px 28px -10px; }
.maison-feat__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 14px; background: var(--m-soft); color: var(--m-rausch); margin-bottom: 16px; }
.maison-feat__icon svg { width: 22px; height: 22px; }
.maison-feat__title { font-size: 17px; font-weight: 600; color: var(--m-ink); margin: 0 0 6px; }
.maison-feat__text { font-size: 14.5px; color: var(--m-muted); line-height: 1.55; margin: 0; }

/* Destinations */
.maison-home__dests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.maison-dest { display: block; text-decoration: none; color: inherit; }
.maison-dest__photo { display: block; position: relative; aspect-ratio: 3/2; border-radius: 16px; overflow: hidden; background: var(--m-fill); }
.maison-dest__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--m-ease); }
.maison-dest:hover .maison-dest__photo img { transform: scale(1.05); }
.maison-dest__name { display: block; font-size: 17px; font-weight: 600; color: var(--m-ink); margin: 12px 0 0; }
.maison-dest__sub { display: block; font-size: 14px; color: var(--m-muted); margin-top: 2px; }

/* How it works */
.maison-home__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.maison-step { text-align: center; padding: 8px; }
.maison-step__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--m-ink); color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.maison-step__icon { display: block; width: 30px; height: 30px; margin: 0 auto 10px; color: var(--m-rausch); }
.maison-step__icon svg { width: 30px; height: 30px; }
.maison-step__title { font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--m-ink); }
.maison-step__text { font-size: 14.5px; color: var(--m-muted); line-height: 1.55; margin: 0; max-width: 300px; margin-inline: auto; }

/* Image CTA */
.maison-home__cta { position: relative; overflow: hidden; border-radius: 22px; min-height: 320px; display: flex; align-items: center;
  justify-content: center; text-align: center; background-size: cover; background-position: center; isolation: isolate; margin: 64px 0; }
.maison-home__cta::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,20,28,.35) 0%, rgba(18,20,28,.62) 100%); }
.maison-home__ctabody { color: #fff; padding: 40px 24px; max-width: 620px; }
.maison-home__ctatitle { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; text-shadow: 0 1px 20px rgba(0,0,0,.25); }
.maison-home__ctasub { font-size: 17px; color: rgba(255,255,255,.92); margin: 0 0 24px; }
.maison-home__ctabtn { display: inline-flex; align-items: center; background: #fff; color: var(--m-ink); text-decoration: none;
  font-weight: 600; font-size: 16px; padding: 14px 28px; border-radius: var(--m-r-full); transition: transform .18s var(--m-ease); }
.maison-home__ctabtn:hover { transform: translateY(-2px); }

/* Membership teaser */
.maison-home__member { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  border: 1px solid var(--m-hairline); border-radius: 20px; padding: 32px 36px; margin: 0 0 64px;
  background: linear-gradient(135deg, #1f2430 0%, #2c3444 100%); color: #fff; }
.maison-home__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m-rausch); margin: 0 0 8px; }
.maison-home__memtitle { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; color: #fff; }
.maison-home__member .maison-home__lead { color: rgba(255,255,255,.75); }
.maison-home__memaction .maison-btn { text-decoration: none; }

@media (max-width: 900px) {
  .maison-home__feats { grid-template-columns: 1fr 1fr; }
  .maison-home__dests { grid-template-columns: 1fr 1fr; }
  .maison-home__steps { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .maison-home__feats, .maison-home__dests { grid-template-columns: 1fr; }
  .maison-home__ctatitle { font-size: 26px; }
  .maison-home__member { padding: 26px 22px; }
}