/* Site-wide UI refinements (loaded on every page). */

/* Room grid ("Book now" links on Our Rooms / Home): a real, always visible button
   placed right under the room title instead of hidden at the panel's bottom. */
.distortion_grid_item-subtitle {
    margin: 28px 0 0 0 !important;
    text-align: center;
}
.distortion_grid_item-subtitle a.distortion_grid_item-link,
a.distortion_grid_item-link {
    display: inline-block !important;
    padding: 14px 36px !important;
    border: 2px solid #fff !important;
    border-radius: 2px;
    background: rgba(0, 0, 0, .35) !important;
    color: #fff !important;
    font-size: calc(15px * var(--ms-k-text)) !important;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: calc(1.2 * var(--ms-k-lh));
    text-transform: uppercase;
    text-decoration: none;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer;
    pointer-events: auto;
}
/* The button stays still: no slide-in on card hover (theme), no lift, no arrow nudge. */
.distortion_grid_item-subtitle *,
.distortion_grid_item:hover .distortion_grid_item-subtitle *,
a.distortion_grid_item-link::after {
    transform: none !important;
    transition: none !important;
}
a.distortion_grid_item-link::before { display: none !important; }
a.distortion_grid_item-link::after {
    content: "\2192";
    margin-left: 10px;
    display: inline-block;
}
a.distortion_grid_item-link:hover,
a.distortion_grid_item-link:focus-visible {
    background: var(--ms-gold) !important;
    border-color: var(--ms-gold) !important;
    color: #fff !important;
}
a.distortion_grid_item-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 600px) {
    a.distortion_grid_item-link { padding: 12px 26px !important; font-size: calc(13px * var(--ms-k-text)) !important; }
}

/* Room page sidebar: keep the nightly price on one line. */
.singleroom_price_amount .mphb-price,
.singleroom_price_amount .mphb-price .mphb-currency {
    font-size: calc(clamp(28px, 3.4vw, 46px) * var(--ms-k-text)) !important;
    white-space: nowrap;
    line-height: calc(1.2 * var(--ms-k-lh)) !important;
}

/* Generated pages (packages): full width instead of the theme's shrink-to-fit float. The theme's 1425px box is lifted too:
   above that width the page's sections stopped short with a white strip on the right; each section centres its own content. */
#page_content_wrapper:has(.generated-page) { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
#page_content_wrapper:has(.generated-page) .inner,
#page_content_wrapper:has(.generated-page) .inner_wrapper,
#page_content_wrapper:has(.generated-page) .sidebar_content { float: none !important; width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.generated-page { overflow-x: clip; }
/* the shell page's own sidebar (contact form widget) is not part of generated pages */
#page_content_wrapper:has(.generated-page) .sidebar_wrapper { display: none !important; }

/* Package detail page */
.pkg-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; background-size: cover; background-position: center; color: #fff; }
.pkg-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.2)); }
.pkg-hero-in { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; padding: 130px 30px 52px; }
.pkg-cat { display: block; margin-bottom: 12px; font-size: calc(13px * var(--ms-k-text)); letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; }
.pkg-hero h1 { margin: 0 0 12px; color: #fff; font-size: calc(48px * var(--ms-k-h1)); line-height: 1.15; }
.pkg-sub { margin: 0; max-width: 640px; font-size: calc(18px * var(--ms-k-text)); line-height: calc(1.6 * var(--ms-k-lh)); color: #fff; }

.pkg-body { display: flex; gap: 48px; align-items: flex-start; max-width: 1100px; margin: 0 auto; padding: 56px 30px; }
.pkg-main { flex: 1 1 0; min-width: 0; font-size: var(--ms-text-size); line-height: calc(1.85 * var(--ms-k-lh)); }
.pkg-main h3 { margin: 30px 0 12px; }
.pkg-list { margin: 0 0 30px; padding: 0; list-style: none; }
.pkg-list li { position: relative; padding: 7px 0 7px 32px; border-bottom: 1px solid var(--ms-line); }
.pkg-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--ms-gold); font-weight: 700; }

/* Not sticky: the theme's #perspective wrapper has overflow:auto, which disables sticky positioning. */
.pkg-side { flex: 0 0 340px; align-self: flex-start; }
.pkg-card { padding: 30px; border: 1px solid var(--ms-line); background: var(--ms-cream); }
.pkg-price-label { font-size: calc(12px * var(--ms-k-text)); letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.pkg-price { margin: 4px 0 18px; font-size: calc(36px * var(--ms-k-text)); font-weight: 600; line-height: calc(1.2 * var(--ms-k-lh)); }
.pkg-facts { margin: 0 0 22px; padding: 0; list-style: none; }
.pkg-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ms-line); }
.pkg-note { margin: 14px 0 0; font-size: calc(14px * var(--ms-k-text)); opacity: .8; }

.pkg-card, .pkg-card * { box-sizing: border-box; }
.pkg-btn { display: inline-block; box-sizing: border-box; max-width: 100%; padding: 15px 22px; border: 2px solid var(--ms-gold); border-radius: var(--ms-btn-radius); background: var(--ms-gold); color: #fff !important; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: calc(15px * var(--ms-k-text)); font-weight: 600; line-height: calc(1.3 * var(--ms-k-lh)); text-align: center; transition: background-color .25s, border-color .25s, color .25s, transform .25s; }
.pkg-btn:hover { transform: translateY(-1px); }
.pkg-btn:hover { background: var(--ms-gold-deep); border-color: var(--ms-gold-deep); }
.pkg-btn-outline { background: transparent; color: var(--ms-gold) !important; }
.pkg-btn-outline:hover { background: var(--ms-gold); color: #fff !important; }
.pkg-btn-block { display: block; width: 100%; }

.pkg-related-title { margin: 0; padding: 0 30px 24px; text-align: center; }
.pkg-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pkg-tile { position: relative; display: flex; align-items: center; justify-content: center; min-height: 230px; padding: 24px; background-size: cover; background-position: center; color: #fff !important; text-align: center; text-decoration: none; font-size: calc(20px * var(--ms-k-text)); line-height: calc(1.3 * var(--ms-k-lh)); }
.pkg-tile::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); transition: background .25s; }
.pkg-tile:hover::before { background: rgba(var(--ms-gold-rgb),.65); }
.pkg-tile span { position: relative; }

@media (max-width: 900px) {
    .pkg-body { flex-direction: column; gap: 32px; padding: 36px 20px; }
    .pkg-side { position: static; flex-basis: auto; width: 100%; }
    .pkg-hero { min-height: 400px; }
    .pkg-hero-in { padding: 110px 20px 34px; }
    .pkg-hero h1 { font-size: calc(32px * var(--ms-k-h1)); }
}

/* Rooms grid: "Book now" sits at the bottom of the card, at the same height in every card
   however long the title is (the content column is a full-height flex column). */
.distortion_grid_item--bg > .distortion_grid_item-content { display: flex !important; flex-direction: column; }
.distortion_grid_item-subtitle { margin-top: auto !important; padding-top: 24px; }

/* ------------------------------------------------------------------
   Sticky header: always pinned to the top; transparent over the banner,
   turns into a solid white bar (dark logo + dark menu) once scrolled.
   body.cms-header-solid is toggled by js/site-header.js.
------------------------------------------------------------------- */
.header_style_wrapper { position: fixed !important; top: 0 !important; left: 0; width: 100%; z-index: 99 !important; }

.top_bar, #logo_wrapper, #menu_wrapper, #logo_right_button { transition: background-color .3s ease, box-shadow .3s ease, height .3s ease, top .3s ease; }

body.cms-header-solid .top_bar,
body.cms-header-solid .top_bar.hasbg {
    height: 78px;
    background: #fff !important;
    border-bottom: 1px solid var(--ms-line) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .12) !important;
}
body.cms-header-solid #logo_wrapper { height: 78px; padding-top: 0 !important; box-sizing: border-box; }
body.cms-header-solid #menu_wrapper { top: 22px !important; }
body.cms-header-solid #logo_right_button { top: 24px !important; }

/* swap to the dark logo */
body.cms-header-solid #logo_transparent { display: none !important; }
/* #logo_normal must stay a full-width table (as in the theme) so the logo is centred
   between the menu (left) and the phone number (right), exactly like at the top. */
body.cms-header-solid #logo_normal { display: table !important; width: 100% !important; height: 78px; }
body.cms-header-solid #logo_normal .logo_align { display: table-cell !important; width: 100%; text-align: center; vertical-align: middle; }
body.cms-header-solid #custom_logo,
body.cms-header-solid #custom_logo.hidden { display: inline-block !important; margin: 0 !important; }
body.cms-header-solid #custom_logo img { max-height: 54px; width: auto; vertical-align: middle; }

/* dark menu, phone and mobile icon on the white bar */
body.cms-header-solid #menu_wrapper .nav > li > a,
body.cms-header-solid .header_call_wrapper,
body.cms-header-solid .header_call_wrapper a,
body.cms-header-solid .header_call_wrapper span,
body.cms-header-solid #mobile_nav_icon,
body.cms-header-solid #mobile_nav_icon span { color: var(--ms-ink) !important; }
body.cms-header-solid #menu_wrapper .nav > li > a:hover,
body.cms-header-solid .header_call_wrapper a:hover { color: var(--ms-gold) !important; }

@media (max-width: 960px) {
    body.cms-header-solid .top_bar,
    body.cms-header-solid .top_bar.hasbg,
    body.cms-header-solid #logo_wrapper { height: 64px; }
    body.cms-header-solid #menu_wrapper { top: 16px !important; }
    body.cms-header-solid #logo_right_button { top: 18px !important; }
    body.cms-header-solid #logo_normal { height: 64px; }
    /* the theme's phone layout has the logo on the left (menu icon on the right): keep it there */
    body.cms-header-solid #logo_normal .logo_align { text-align: left; padding-left: 0; }
    body.cms-header-solid #custom_logo img { max-height: 44px; }
}

/* A page without a picture under the header (blog, account, checkout) has the theme's plain header: at the top it
   shows the page itself instead of a white band (cream over the cream opening of the blog pages, [data-header-cream]),
   and once scrolled it is the same white bar as on every other page. */
body:not(.cms-header-solid) .top_bar:not(.hasbg) { background-color: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; }
body:not(.cms-header-solid):has([data-header-cream]) .top_bar:not(.hasbg) { background-color: var(--ms-cream) !important; }

/* The theme adds .nofixed to the header after ~200px of scrolling and hides it
   (display:none). The header must stay pinned instead. */
.header_style_wrapper.nofixed,
.header_style_wrapper.scroll_down,
.header_style_wrapper.scroll_up {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    top: 0 !important;
}

/* ------------------------------------------------------------------
   Checkout (final booking step) + confirmation
------------------------------------------------------------------- */
.co { max-width: 1120px; margin: 0 auto; padding: 150px 24px 70px; font-size: var(--ms-text-size); line-height: calc(1.6 * var(--ms-k-lh)); }
.co, .co * { box-sizing: border-box; }
.co-head { margin-bottom: 26px; }
.co-head h1, .co-done h1 { margin: 0 0 6px; font-size: calc(38px * var(--ms-k-h1)); line-height: calc(1.2 * var(--ms-k-lhh)); }
.co-head p { margin: 0 0 8px; color: var(--ms-text); }
.co-secure { display: inline-block; font-size: calc(14px * var(--ms-k-text)); color: #1d6b3a; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.co-left, .co-right { display: grid; gap: 20px; }

.co-card { padding: 24px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); }
.co-card h2 { margin: 0 0 14px; font-size: var(--ms-h4); }
.co-center { text-align: center; max-width: 620px; margin: 0 auto; }
.co-muted { color: var(--ms-text); margin: 0 0 12px; }
.co-kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; }
.co-kv dt { color: var(--ms-mut); }
.co-kv dd { margin: 0; word-break: break-word; }

/* payment methods */
.co-method { display: block; margin: 0 0 12px; border: 1px solid #dcdcdc; border-radius: 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; overflow: hidden; }
.co-method:hover { border-color: var(--ms-gold); }
.co-method input { position: absolute; opacity: 0; pointer-events: none; }
.co-method-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.co-radio { flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid #9aa0a6; border-radius: 50%; position: relative; }
.co-method-name { flex: 1; display: grid; }
.co-method-name small { color: var(--ms-text); font-size: calc(14px * var(--ms-k-text)); }
.co-badge { padding: 3px 10px; font-size: calc(12px * var(--ms-k-text)); font-weight: 700; color: #7a4b00; background: var(--ms-cream); border-radius: 999px; white-space: nowrap; }
.co-method-body { display: none; padding: 0 18px 18px 54px; color: var(--ms-text); }
.co-method input:checked ~ .co-method-head .co-radio { border-color: var(--ms-gold); }
.co-method input:checked ~ .co-method-head .co-radio::after { content: ""; position: absolute; inset: 3px; background: var(--ms-gold); border-radius: 50%; }
.co-method input:checked ~ .co-method-body { display: block; }
.co-method:has(input:checked) { border-color: var(--ms-gold); background: var(--ms-cream); box-shadow: 0 0 0 1px var(--ms-gold) inset; }
.co-method input:focus-visible ~ .co-method-head { outline: 2px solid var(--ms-gold); outline-offset: -2px; }
.co-method-text { display: block; margin-bottom: 8px; }
.co-method-details { display: grid; gap: 6px; padding: 12px 14px; background: #fff; border: 1px dashed var(--ms-line-d); border-radius: 8px; }
.co-method-details span { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.co-method-details em { font-style: normal; color: var(--ms-mut); }
.co-method-details-open { margin-top: 12px; }

.co-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; cursor: pointer; }
.co-check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--ms-gold); flex: 0 0 auto; }
.co-btn { display: block; width: 100%; margin-top: 22px; padding: 16px 24px; border: 0; border-radius: var(--ms-btn-radius); background: var(--ms-gold); color: #fff !important; font: inherit; font-size: calc(17px * var(--ms-k-text)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.co-btn:hover { background: var(--ms-gold-deep); transform: translateY(-1px); }
.co-btn-inline { display: inline-block; width: auto; margin-top: 8px; }

/* right column */
.co-room { display: block; font-size: calc(20px * var(--ms-k-text)); margin-bottom: 4px; }
.co-ref { margin: 10px 0 0; font-size: calc(13px * var(--ms-k-text)); letter-spacing: .1em; color: var(--ms-mut); }
.co-alert { padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.co-alert-warn { color: #8a2c0d; background: #fde8e1; border: 1px solid #f5c2b3; }
.co-alert-ok { color: #14532d; background: #dcf5e4; border: 1px solid #b6e3c4; }
.co-alert-err { color: #7f1d1d; background: #fee2e2; border: 1px solid #fca5a5; margin-bottom: 18px; }
.co-price ul { list-style: none; margin: 0; padding: 0; }
.co-price li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; }
.co-price li small { display: block; color: var(--ms-mut); font-weight: 400; }
.co-price s { color: var(--ms-mut); }
.acct-pay { margin-top: 16px; }
.acct-pay li .acct-pay-st { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.acct-pay .acct-pay-st.is-ok { background: #e3f3ea; color: #1f7a55; }
.acct-pay .acct-pay-st.is-wait { background: #fff3d9; color: #8a5d12; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--ms-line); }
.co-total strong { font-size: calc(26px * var(--ms-k-text)); }
.co-note { margin: 10px 0 0; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut); }
.co-hold { margin: 0; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-text); }

/* confirmation */
.co-done { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.co-tick { width: 72px; height: 72px; margin: 0 auto 14px; line-height: 72px; font-size: calc(38px * var(--ms-k-text)); color: #fff; background: #1d9e55; border-radius: 50%; }

@media (max-width: 900px) {
    .co { padding: 110px 16px 50px; }
    .co-grid { grid-template-columns: 1fr; }
    .co-right { order: -1; }          /* price summary first on phones */
    .co-head h1, .co-done h1 { font-size: calc(28px * var(--ms-k-h1)); }
    .co-kv { grid-template-columns: 1fr; gap: 2px; }
    .co-kv dd { margin-bottom: 8px; }
    .co-method-body { padding-left: 18px; }
}
.co-discount b { color: #1d6b3a; }

/* ------------------------------------------------------------------
   Customer account: header links + login/register/my bookings pages
------------------------------------------------------------------- */
.cms-account-nav { display: inline-block; margin-left: 22px; font-size: calc(14px * var(--ms-k-text)); letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; vertical-align: top; }
.cms-account-nav a, .cms-account-nav button { color: inherit !important; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: none; }
.cms-account-nav a:hover, .cms-account-nav button:hover { color: var(--ms-gold) !important; }
.cms-account-nav form { display: inline; margin: 0; }
.cms-account-nav a { display: inline-flex; align-items: center; gap: 7px; }
.cms-nav-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cms-account-nav .sep { margin: 0 9px; opacity: .6; }
/* "My bookings | Logout": the icon, both words and the bar on one line (the logout is a form button) */
.cms-account-nav { display: inline-flex; align-items: center; margin-top: 5px; }
.cms-account-nav form { display: inline-flex; align-items: center; }
.cms-account-nav a, .cms-account-nav button { line-height: 1.2; vertical-align: middle; }
.cms-account-nav .sep { line-height: 1; }
body.cms-header-solid .cms-account-nav { color: var(--ms-ink); }
/* pages without a photo banner (account, checkout, terms …) have a white header from the start:
   the links must be dark there too, like the phone number next to them */
#wrapper:not(.transparent) .cms-account-nav { color: var(--ms-ink); }
@media (max-width: 960px) { .cms-account-nav { display: none; } }

.cms-account-item form { margin: 0; }
/* the phone menu: a small gold line icon before each page name (App\Services\MenuIcons) */
.mobile_main_nav > li > a, .mobile_main_nav > li > form > button { display: flex !important; align-items: center; gap: 12px; width: 100%; text-align: left; }
.cms-menu-ico { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--ms-gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mobile_main_nav li ul.sub-menu a { padding-left: 30px; }
.cms-account-item button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }

.co-narrow { max-width: 560px; }
.co-field { display: block; margin: 0 0 16px; }
.co-field > span { display: block; margin-bottom: 6px; font-size: calc(14px * var(--ms-k-text)); font-weight: 600; }
.co-field input, .co-field textarea, .co-field select { display: block; width: 100%; padding: 12px 14px; font: inherit; color: var(--ms-ink); background: #fff; border: 1px solid #cfcfcf; border-radius: 8px; }
.co-field input:focus, .co-field textarea:focus { outline: 2px solid var(--ms-gold); border-color: var(--ms-gold); }
.co-field input:disabled { background: #f3f3f3; color: var(--ms-mut); }
.co-switch { text-align: center; margin-top: 18px; }
.co-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.co-head-actions { display: flex; gap: 10px; align-items: center; }
.co-head-actions form { margin: 0; }
.co-link-btn { display: inline-block; padding: 9px 16px; font: inherit; font-size: calc(14px * var(--ms-k-text)); font-weight: 600; color: var(--ms-ink) !important; background: #fff; border: 1px solid #cfcfcf; border-radius: var(--ms-btn-radius); text-decoration: none; cursor: pointer; }
.co-link-btn:hover { border-color: var(--ms-gold); color: var(--ms-gold-deep) !important; }
.co-link-danger { color: #b91c1c !important; border-color: #f2b8b8; }
.co-link-danger:hover { background: #b91c1c; color: #fff !important; border-color: #b91c1c; }
.co-btn-danger { background: #b91c1c; }
.co-btn-danger:hover { background: #991b1b; }

.acct-booking { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 16px; padding: 20px 22px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); }
.acct-main h2 { margin: 0 0 4px; font-size: calc(21px * var(--ms-k-h2)); }
.acct-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.acct-side { display: grid; gap: 8px; align-content: start; justify-items: end; text-align: right; }
.acct-side strong { font-size: calc(20px * var(--ms-k-text)); }
.acct-badge { display: inline-block; padding: 3px 12px; font-size: calc(12px * var(--ms-k-text)); font-weight: 700; color: var(--ms-text); background: #eee; border-radius: 999px; }
.acct-badge.is-ok { color: #14532d; background: #dcfce7; }
.acct-badge.is-wait { color: #92400e; background: #fef3c7; }
.acct-badge.is-no { color: #7f1d1d; background: #fee2e2; }
.acct-ref { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 12px; font-size: calc(12px * var(--ms-k-text)); color: var(--ms-text); background: var(--ms-cream); border: 1px solid var(--ms-line); border-radius: 999px; }
.acct-ref b { padding: 1px 9px; font-family: ui-monospace, Consolas, monospace; font-size: calc(13px * var(--ms-k-text)); font-weight: 700; letter-spacing: .08em; color: var(--ms-ink); background: #fff; border-radius: 999px; }
.acct-claim { margin-top: 26px; }
.acct-claim-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.acct-claim-form .co-btn { margin: 0 0 16px; }
.acct-sub { margin: 26px 0 4px; font-size: calc(20px * var(--ms-k-text)); }

@media (max-width: 760px) {
    .acct-booking { flex-direction: column; }
    .acct-side { justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: start; }
    .acct-claim-form { grid-template-columns: 1fr; }
}

/* inline field errors (login / sign up / profile / claim) */
.co-error { display: block; margin-top: 6px; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; line-height: calc(1.4 * var(--ms-k-lh)); color: #b91c1c; }
.co-error::before { content: "\26A0\FE0E"; margin-right: 6px; }
.co-field.has-error > span { color: #b91c1c; }
.co-field.has-error input, .co-field.has-error textarea { border-color: #dc2626; background: #fff7f7; }
.co-field.has-error input:focus, .co-field.has-error textarea:focus { outline-color: #dc2626; border-color: #dc2626; }

/* ------------------------------------------------------------------
   Hero slider: video slides (see js/site-slide-video.js)
   The slide image stays underneath as the poster.
------------------------------------------------------------------- */
.cms-slide-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 0; background: #1e1e22; }
.cms-slide-video::after { content: ""; position: absolute; inset: 0; background: #1e1e22; opacity: .35; pointer-events: none; z-index: 1; }
.cms-slide-video .cms-slide-video-el {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%; border: 0; pointer-events: none; object-fit: cover;
}
/* poster image until the video has been started */
.cms-slide-video:not([data-started]) { background: transparent; }
.cms-slide-video:not([data-started])::after { display: none; }

/* ------------------------------------------------------------------
   Apartment categories (apartments/category/...)
------------------------------------------------------------------- */
.cat { max-width: 1120px; margin: 0 auto; padding: 150px 24px 70px; font-size: calc(16px * var(--ms-k-text)); line-height: calc(1.6 * var(--ms-k-lh)); }
.cat-crumbs { margin: 0 0 8px; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-mut); }
.cat-crumbs a { color: var(--ms-gold); text-decoration: none; }
.cat-head h1 { margin: 0 0 8px; font-size: calc(40px * var(--ms-k-h1)); line-height: calc(1.2 * var(--ms-k-lhh)); }
.cat-desc { margin: 0 0 18px; color: var(--ms-text); max-width: 760px; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.cat-subs a { padding: 8px 16px; border: 1px solid var(--ms-gold); border-radius: 999px; color: var(--ms-gold); text-decoration: none; font-size: calc(15px * var(--ms-k-text)); transition: background .25s, color .25s; }
.cat-subs a:hover { background: var(--ms-gold); color: #fff; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.cat-card { padding: 28px; border: 1px solid var(--ms-line); background: var(--ms-cream); }
.cat-card h3 { margin: 0 0 6px; font-size: calc(24px * var(--ms-k-h3)); }
.cat-tag { margin: 0 0 10px; font-size: calc(13px * var(--ms-k-text)); text-transform: uppercase; letter-spacing: .08em; color: var(--ms-gold); }
.cat-facts { list-style: none; margin: 14px 0 20px; padding: 0; }
.cat-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ms-line); }
.cat-card .pkg-btn { margin: 0 8px 8px 0; }
.cat-block { margin: 0 0 34px; padding-bottom: 24px; border-bottom: 1px solid var(--ms-line); }
.cat-block h2 { margin: 0 0 8px; font-size: calc(28px * var(--ms-k-h2)); }
.cat-block h2 a { color: inherit; text-decoration: none; }
.cat-empty { padding: 30px; background: #f6f6f6; text-align: center; color: var(--ms-text); }

/* ------------------------------------------------------------------
   Apartment tiles: video layer inside the theme grid + category page
------------------------------------------------------------------- */
.distortion_grid_item { position: relative; }
.distortion_grid_item > .cms-tile-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.distortion_grid_item > .cms-tile-video::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.distortion_grid_item--bg > .distortion_grid_item-content { z-index: 2; }
.cms-tile-video-el { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; max-width: none; object-fit: cover; }

.apt { max-width: 1400px; margin: 0 auto; padding: 150px 24px 70px; }
.apt-head { margin-bottom: 28px; }
.apt-crumbs { margin: 0 0 8px; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-mut); }
.apt-crumbs a { color: var(--ms-gold); text-decoration: none; }
.apt-head h1 { margin: 0 0 8px; font-size: calc(44px * var(--ms-k-h1)); line-height: 1.15; text-transform: none; }
.apt-desc { margin: 0 0 16px; color: var(--ms-text); max-width: 760px; font-size: calc(17px * var(--ms-k-text)); }
.apt-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.apt-chips a { padding: 8px 16px; border: 1px solid var(--ms-gold); border-radius: 999px; color: var(--ms-gold); text-decoration: none; font-size: calc(15px * var(--ms-k-text)); transition: background .25s, color .25s; }
.apt-chips a:hover { background: var(--ms-gold); color: #fff; }
.apt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.apt-tile { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: #222 center / cover no-repeat; color: #fff; }
.apt-tile::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.12) 60%); transition: background .3s; }
.apt-tile:hover::before { background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.3) 70%); }
.apt-tile .cms-tile-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.apt-tile-in { position: relative; z-index: 3; padding: 40px 44px; width: 100%; }
.apt-meta { display: block; margin-bottom: 8px; font-size: calc(14px * var(--ms-k-text)); letter-spacing: .2em; text-transform: uppercase; }
.apt-tile h2 { margin: 0 0 18px; color: #fff; font-size: calc(44px * var(--ms-k-h2)); line-height: 1.1; }
.apt-tag { display: inline-block; margin: -8px 0 16px; padding: 3px 10px; border: 1px solid rgba(255,255,255,.6); font-size: calc(12px * var(--ms-k-text)); letter-spacing: .1em; text-transform: uppercase; }
.apt-btn { display: inline-block; padding: 16px 34px; border: 1px solid #fff; color: #fff !important; text-decoration: none; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; font-size: calc(14px * var(--ms-k-text)); transition: background .25s, color .25s; }
.apt-btn:hover { background: #fff; color: var(--ms-ink) !important; }
.apt-btn i { font-style: normal; margin-left: 8px; }
.apt-empty { padding: 36px; background: #f6f6f6; text-align: center; color: var(--ms-text); }
@media (max-width: 800px) {
    .apt { padding: 110px 0 40px; }
    .apt-head { padding: 0 20px; }
    .apt-head h1 { font-size: calc(34px * var(--ms-k-h1)); }
    .apt-grid { grid-template-columns: 1fr; }
    .apt-tile { min-height: 420px; }
    .apt-tile-in { padding: 28px 22px; }
    .apt-tile h2 { font-size: calc(32px * var(--ms-k-h2)); }
}

/* Tile videos always cover the whole tile (picture and video tiles keep the same size). YouTube players are
   scaled up a little so their title / control strips fall outside the tile, and never receive the mouse. */
.cms-tile-video { container-type: size; }
.cms-tile-video iframe.cms-tile-video-el {
    pointer-events: none;
    max-width: none !important; max-height: none !important;
    width: max(135cqw, calc(135cqh * 1.7778)) !important;
    height: max(135cqh, calc(135cqw * .5625)) !important;
}
.cms-tile-video video.cms-tile-video-el {
    pointer-events: none; object-fit: cover;
    width: 100% !important; height: 100% !important;
}
.cms-slide-video iframe { pointer-events: none; }

/* Apartment detail page (apartments without a CMS page) */
.apd-hero { position: relative; display: flex; align-items: flex-end; min-height: 520px; background: #222 center / cover no-repeat; color: #fff; overflow: hidden; }
.apd-hero::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.15) 65%); }
.apd-hero .cms-tile-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.apd-hero-in { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto; padding: 150px 24px 44px; }
.apd-hero .apt-crumbs, .apd-hero .apt-crumbs a { color: #fff; }
.apd-hero h1 { margin: 0 0 26px; color: #fff; font-size: calc(52px * var(--ms-k-h1)); line-height: 1.1; }
.apd-body { max-width: 900px; margin: 0 auto; padding: 44px 24px 10px; font-size: calc(18px * var(--ms-k-text)); line-height: calc(1.8 * var(--ms-k-lh)); }
.apd-related { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
/* "More in …": the category's other apartments as a strip of cards that plays by itself (js/site-related.js); the arrows,
   dots and the price pill follow Design & typography */
.rel { position: relative; box-sizing: border-box; padding-bottom: 70px; }
.rel *, .rel *::before, .rel *::after { box-sizing: border-box; }
.rel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.rel-kicker { display: block; margin: 0 0 6px; font-size: calc(12.5px * var(--ms-k-text)); letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.rel-head h2 { margin: 0; font-size: calc(32px * var(--ms-k-h2)); line-height: 1.1; color: var(--ms-ink); }
.rel-tools { display: flex; align-items: center; gap: 10px; }
.rel-all { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; white-space: nowrap; font-size: calc(13px * var(--ms-k-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-green); text-decoration: none; }
.rel-all:hover { color: var(--ms-gold); }
.rel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rel-arrow { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0; border: 1px solid var(--ms-line-d); border-radius: 50%; background: var(--ms-card-bg); color: var(--ms-ink); cursor: pointer; transition: background var(--ms-speed) ease, color var(--ms-speed) ease, border-color var(--ms-speed) ease; }
.rel-arrow:hover { background: var(--ms-green); border-color: var(--ms-green); color: #fff; }
.rel-arrow[hidden] { display: none; }
.rel-track { display: flex; gap: 20px; margin: 0 -24px; padding: 6px 24px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rel-track::-webkit-scrollbar { display: none; }
.rel-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; overflow: hidden; background: var(--ms-card-bg); border: 1px solid var(--ms-card-border); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); text-decoration: none !important; transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease; }
.rel-card:hover { transform: translateY(var(--ms-lift)); box-shadow: var(--ms-card-shadow-hover); }
.rel-pic { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ms-shade); }
.rel-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--ms-speed) * 3) ease; }
.rel-card:hover .rel-pic img { transform: scale(1.05); }
.rel-price { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; color: #fff; background: var(--ms-glass-bg); border: 1px solid var(--ms-glass-border); border-radius: 999px; -webkit-backdrop-filter: var(--ms-glass-blur); backdrop-filter: var(--ms-glass-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.rel-price svg { width: 15px; height: 15px; }
.rel-body { padding: 16px 18px 18px; }
.rel-card h3 { margin: 0 0 10px; font-size: calc(20px * var(--ms-k-h4)); line-height: 1.2; color: var(--ms-ink); transition: color var(--ms-speed) ease; }
.rel-card:hover h3 { color: var(--ms-green); }
.rel-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(13.5px * var(--ms-k-text)); color: var(--ms-mut); }
.rel-meta span { display: inline-flex; align-items: center; gap: 6px; }
.rel-meta svg { width: 16px; height: 16px; }
.rel-go { font-size: calc(12px * var(--ms-k-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-green); }
.rel-go svg { transition: transform var(--ms-speed) ease; }
.rel-card:hover .rel-go svg { transform: translateX(4px); }
.rel-dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.rel-dots button { width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--ms-line-d); cursor: pointer; transition: width var(--ms-speed) ease, background var(--ms-speed) ease; }
.rel-dots button.is-on { width: 26px; background: var(--ms-gold); }
@media (max-width: 1000px) { .rel-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 700px) {
    .rel { padding: 10px 20px 50px; }
    .rel-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
    .rel-head h2 { font-size: calc(26px * var(--ms-k-h2)); }
    .rel-tools { width: 100%; justify-content: space-between; }
    .rel-all { margin: 0 auto 0 0; }
    .rel-track { gap: 12px; margin: 0 -20px; padding: 4px 20px 8px; }
    .rel-card { flex-basis: 78%; }
    .rel-body { padding: 14px 14px 16px; }
    .rel-card h3 { font-size: calc(18px * var(--ms-k-h4)); }
}
@media (max-width: 800px) { .apd-hero h1 { font-size: calc(34px * var(--ms-k-h1)); } .apd-hero { min-height: 420px; } }

/* apartment pages: video behind the banner title */
#page_caption > .cms-tile-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#page_caption > #page_caption_overlay,
#page_caption > .page_title_wrapper { z-index: 1; }
.apd-hero { min-height: min(78vh, 780px); }

/* ------------------------------------------------------------------
   Privacy policy window (js/site-terms-modal.js)
------------------------------------------------------------------- */
html.cms-pp-lock, html.cms-pp-lock body { overflow: hidden; }
.cms-pp-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(10, 12, 18, .72); }
.cms-pp-box { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: min(86vh, 720px); background: #fff; color: var(--ms-ink); border-radius: var(--ms-card-radius); box-shadow: 0 24px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.cms-pp-title { margin: 0; padding: 20px 24px; font-size: calc(22px * var(--ms-k-h4)); line-height: calc(1.3 * var(--ms-k-lhh)); border-bottom: 1px solid var(--ms-line); }
.cms-pp-body { flex: 1 1 auto; padding: 18px 24px; overflow-y: auto; font-size: calc(16px * var(--ms-k-text)); line-height: calc(1.7 * var(--ms-k-lh)); outline: 0; }
.cms-pp-body p { margin: 0 0 14px; }
.cms-pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--ms-line); background: var(--ms-cream); }
.cms-pp-hint { font-size: calc(14px * var(--ms-k-text)); color: var(--ms-gold-deep); }
.cms-pp-accept { margin-left: auto; padding: 12px 28px; border: 0; cursor: pointer; }
.cms-pp-accept:disabled { opacity: .45; cursor: not-allowed; }

/* arrival time + selects in the guest form */
.cms-guest-form select.cms-time { width: 100%; }

/* a single apartment in a category takes the full width (more than one keeps the 2-column grid) */
.apt-grid--single { grid-template-columns: minmax(0, 1fr); }
.apt-grid--single .apt-tile { min-height: 620px; }
@media (max-width: 800px) { .apt-grid--single .apt-tile { min-height: 420px; } }

/* ------------------------------------------------------------------
   Checkout: sign in / sign up window opened by "Confirm booking"
------------------------------------------------------------------- */
.co-auth { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(10, 12, 18, .72); }
.co-auth[hidden] { display: none; }
.co-auth-box { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; padding: 30px 28px 26px; background: #fff; border-radius: var(--ms-card-radius); box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.co-auth-box h2 { margin: 0 0 6px; font-size: calc(26px * var(--ms-k-h2)); }
.co-auth-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: calc(28px * var(--ms-k-text)); line-height: 1; color: var(--ms-mut); cursor: pointer; }
.co-auth-close:hover { color: var(--ms-ink); }
.co-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 18px 0 16px; padding: 4px; background: #f3f0ea; border-radius: 10px; }
.co-auth-tabs button { padding: 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; color: var(--ms-text); cursor: pointer; }
.co-auth-tabs button.on { background: #fff; color: var(--ms-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.co-auth-form .co-btn { margin-top: 14px; }
.co-confirm-error { display: block; margin: 12px 0 0; }

/* Pictures shown as a video (admin → Pages & content → "Show on the website as: Video") */
.cms-vwrap { position: relative; display: block; max-width: 100%; line-height: 0; }
.cms-vwrap > img { display: block; }
.cms-vwrap > .cms-img-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cms-bg-video { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* ------------------------------------------------------------------
   WhatsApp icon + message window (js/site-whatsapp.js)
------------------------------------------------------------------- */
.cms-wa-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 8px; border-radius: 50%; background: #25d366; color: #fff !important; vertical-align: middle; text-decoration: none !important; transition: transform .2s, background .2s; }
.cms-wa-icon:hover { background: #1ebe5b; transform: scale(1.08); }
.cms-wa-icon svg { width: 16px; height: 16px; }
.cms-wa-number { color: inherit !important; text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; }
.cms-wa-overlay { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(10, 12, 18, .6); }
.cms-wa-box { position: relative; width: 100%; max-width: 440px; padding: 28px 26px 24px; background: #fff; color: var(--ms-ink); border-radius: var(--ms-card-radius); box-shadow: 0 24px 80px rgba(0, 0, 0, .4); text-align: center; animation: cmsWaIn .22s ease-out; }
@keyframes cmsWaIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.cms-wa-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: transparent; font-size: calc(26px * var(--ms-k-text)); line-height: 1; color: var(--ms-mut); cursor: pointer; }
.cms-wa-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 10px; }
.cms-wa-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; }
.cms-wa-badge svg { width: 30px; height: 30px; }
.cms-wa-head h3 { margin: 0; font-size: calc(22px * var(--ms-k-h3)); line-height: calc(1.3 * var(--ms-k-lhh)); color: var(--ms-ink); }
.cms-wa-text { margin: 0 0 12px; font-size: calc(16px * var(--ms-k-text)); line-height: calc(1.65 * var(--ms-k-lh)); color: var(--ms-text); }
.cms-wa-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.cms-wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 10px; font-weight: 700; font-size: calc(15px * var(--ms-k-text)); letter-spacing: .04em; text-decoration: none !important; }
.cms-wa-btn svg { width: 20px; height: 20px; }
.cms-wa-green { background: #25d366; color: #fff !important; }
.cms-wa-green:hover { background: #1ebe5b; }
.cms-wa-primary { background: var(--ms-green); color: #fff !important; }
.cms-wa-primary:hover { background: var(--ms-green); }
.cms-wa-link { margin-top: 2px; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-text) !important; }

/* ------------------------------------------------------------------
   Gallery page (admin → Gallery)
------------------------------------------------------------------- */
.cms-gallery { max-width: 1400px; margin: 0 auto; padding: 60px 24px 80px; }
.cms-gallery-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.cms-gallery-filter button { padding: 10px 24px; border: 1px solid var(--ms-green); border-radius: var(--ms-btn-radius); background: transparent; color: var(--ms-green); font: inherit; font-size: calc(14px * var(--ms-k-text)); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.cms-gallery-filter button.on, .cms-gallery-filter button:hover { background: var(--ms-green); color: #fff; }
.cms-gallery-grid { column-count: 3; column-gap: 18px; }
.cms-gallery-item { position: relative; margin: 0 0 18px; break-inside: avoid; cursor: zoom-in; overflow: hidden; border-radius: 6px; background: #eee; outline: 0; }
.cms-gallery-item[hidden] { display: none; }
.cms-gallery-item:focus-visible { box-shadow: 0 0 0 3px var(--ms-gold); }
.cms-gallery-media { position: relative; overflow: hidden; }
.cms-gallery-media img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.cms-gallery-item:hover .cms-gallery-media img { transform: scale(1.05); }
.cms-gallery-item.is-video .cms-gallery-media { aspect-ratio: 16 / 10; }
.cms-gallery-item.is-video .cms-gallery-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.cms-gallery-item.is-video { cursor: pointer; }
.cms-gallery-media .cms-tile-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cms-gallery-blank { aspect-ratio: 16 / 10; background: #222; }
.cms-gallery-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding-left: 5px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: calc(24px * var(--ms-k-text)); transition: transform .2s, background .2s; }
.cms-gallery-item:hover .cms-gallery-play { transform: scale(1.1); background: rgba(var(--ms-gold-rgb),.9); }
.cms-gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 16px 12px; color: #fff; font-size: calc(15px * var(--ms-k-text)); background: linear-gradient(to top, rgba(0,0,0,.7), transparent); opacity: 0; transition: opacity .3s; }
.cms-gallery-item:hover figcaption, .cms-gallery-item:focus-visible figcaption { opacity: 1; }
.cms-lightbox { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 14, .94); }
.cms-lightbox[hidden] { display: none; }
.cms-lb-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 60px 80px; box-sizing: border-box; }
.cms-lb-stage img, .cms-lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 50px rgba(0,0,0,.5); pointer-events: none; }
.cms-lb-stage .cms-lb-yt { width: min(100%, calc((100vh - 120px) * 1.7778)); aspect-ratio: 16 / 9; border: 0; pointer-events: none; }
.cms-lb-close, .cms-lb-prev, .cms-lb-next { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; border-radius: 50%; transition: background .2s; }
.cms-lb-close:hover, .cms-lb-prev:hover, .cms-lb-next:hover { background: rgba(255,255,255,.25); }
.cms-lb-close { top: 16px; right: 18px; width: 46px; height: 46px; font-size: calc(30px * var(--ms-k-text)); line-height: 1; }
.cms-lb-prev, .cms-lb-next { top: 50%; width: 54px; height: 54px; margin-top: -27px; font-size: calc(36px * var(--ms-k-text)); line-height: 1; }
.cms-lb-prev { left: 16px; } .cms-lb-next { right: 16px; }
.cms-lb-caption { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; color: #ddd; font-size: calc(15px * var(--ms-k-text)); }
@media (max-width: 1000px) { .cms-gallery-grid { column-count: 2; } }
@media (max-width: 600px) {
    .cms-gallery { padding: 36px 12px 50px; }
    .cms-gallery-grid { column-count: 1; }
    .cms-lb-stage { padding: 60px 10px; }
    .cms-lb-prev, .cms-lb-next { top: auto; bottom: 14px; margin-top: 0; }
}
/* the WhatsApp icon now sits in front of the number */
.cms-wa-icon { margin: 0 8px 0 0; }

/* Payment screenshot (bank transfer / wallet) on the checkout and account pages. */
.co-proof { margin: 16px 0 0; padding: 16px 18px; background: var(--ms-cream); border: 1px dashed var(--ms-line-d); border-radius: 12px; }
.co-proof[hidden] { display: none; }
.co-proof .co-field { margin: 0 0 8px; }
.co-proof .co-field input[type=file] { padding: 10px; background: #fff; cursor: pointer; }
.co-proof.has-error { border-color: #dc2626; background: #fff7f7; }
.co-proof-hint { display: block; color: var(--ms-text); font-size: calc(13px * var(--ms-k-text)); line-height: calc(1.5 * var(--ms-k-lh)); }
.co-proof-ok { color: #14532d; font-weight: 600; }

/* Category page chips: the open one is filled, counts in a small pill. */
.apt-chips a small { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; font-size: calc(12px * var(--ms-k-text)); line-height: 18px; text-align: center; border-radius: 999px; background: rgba(0, 0, 0, .08); }
.apt-chips a.on { background: var(--ms-gold); color: #fff !important; }
.apt-others { margin: 30px 0 16px; font-size: var(--ms-h3); }

/* Booking confirmation: actions grouped in one card under the price. */
.co-actions { display: grid; gap: 12px; }
.co-actions .co-btn { margin-top: 0; padding: 14px 20px; font-size: calc(15px * var(--ms-k-text)); }
.co-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-actions-row .co-link-btn { text-align: center; padding: 11px 10px; }
.co-back { justify-self: center; margin-top: 2px; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-text) !important; text-decoration: none; }
.co-back:hover { color: var(--ms-ink) !important; text-decoration: underline; }
@media (max-width: 420px) { .co-actions-row { grid-template-columns: 1fr; } }

/* sections added from the admin panel (Add a section) */
.cms-sec { position: relative; padding: var(--cms-sec-space) 0; background: #fff; }
.cms-sec__in { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.cms-sec__center { text-align: center; }
.cms-sec__title { margin: 0 0 18px; }
.cms-sec__text { margin: 0 auto 26px; max-width: 760px; white-space: pre-line; }
/* the site's button look (admin → Settings colours restyle it like every other button) */
.cms-sec__btn { display: inline-block; padding: 14px 30px; background: var(--ms-green); color: #fff; border: 1px solid var(--ms-green); border-radius: var(--ms-btn-radius); text-decoration: none !important; letter-spacing: .1em; text-transform: uppercase; font-size: calc(13px * var(--ms-k-text)); line-height: calc(1.2 * var(--ms-k-lh)); transition: background var(--ms-speed) ease, border-color var(--ms-speed) ease; }
.cms-sec__btn:hover, .cms-sec__btn:focus { background: var(--ms-gold); border-color: var(--ms-gold); color: #fff; }
.cms-sec__split { display: flex; align-items: center; gap: 50px; }
.cms-sec__media, .cms-sec__body { flex: 1 1 0; min-width: 0; }
.cms-sec__media img { display: block; width: 100%; height: auto; }
.cms-sec__cards { display: flex; gap: 30px; margin-top: 40px; }
.cms-sec__card { flex: 1 1 0; min-width: 0; text-align: center; }
.cms-sec__card img { display: block; width: 100%; height: 240px; object-fit: cover; margin-bottom: 18px; }
.cms-sec__card p { white-space: pre-line; }
.cms-sec__banner { padding: 110px 0; background-size: cover; background-position: center; color: #fff; }
.cms-sec__banner .cms-sec__title, .cms-sec__banner .cms-sec__text, .cms-sec__banner .cms-sec__btn { color: #fff; }
@media (max-width: 767px) {
  .cms-sec__split, .cms-sec__cards { flex-direction: column; gap: 26px; }
  .cms-sec__banner { padding: 70px 0; }
}
.cms-sec__wrap { flex-wrap: wrap; }
.cms-sec__wrap .cms-sec__card { flex: 1 1 calc(25% - 30px); min-width: 200px; }

/* apartments grid while nothing is bookable */
.cms-empty-state { max-width: 640px; margin: 60px auto; padding: 44px 28px; text-align: center; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.7); }
.cms-empty-state h3 { margin: 0 0 12px; }
.cms-empty-state p { margin: 0 0 24px; }

/* hero slider section added from the admin panel */
.cms-sec--hero_slider { padding: 0; }
.cms-hero { position: relative; height: min(78vh, 680px); min-height: 380px; overflow: hidden; background: #111; color: #fff; }
.cms-hero__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity .8s ease; }
.cms-hero__slide::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.cms-hero__slide.is-on { opacity: 1; visibility: visible; }
.cms-hero__txt { position: relative; max-width: 760px; padding: 0 24px; }
.cms-hero__txt h2 { margin: 0 0 14px; color: #fff; font-size: calc(clamp(30px, 5vw, 58px) * var(--ms-k-h2)); }
.cms-hero__txt p { margin: 0 0 26px; font-size: calc(18px * var(--ms-k-text)); white-space: pre-line; }
.cms-hero .cms-sec__btn { color: #fff; }
.cms-hero__nav { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; font-size: calc(30px * var(--ms-k-text)); line-height: 1; color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; cursor: pointer; }
.cms-hero__nav.is-prev { left: 18px; } .cms-hero__nav.is-next { right: 18px; }
.cms-hero__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; justify-content: center; gap: 10px; }
.cms-hero__dots button { width: 11px; height: 11px; padding: 0; background: transparent; border: 1px solid #fff; border-radius: 50%; cursor: pointer; }
.cms-hero__dots button.is-on { background: #fff; }
@media (prefers-reduced-motion: reduce) { .cms-hero__slide { transition: none; } }

/* "Picture carousel and text" layout: a centered heading, three 4:5 pictures fanned out (the middle one in front; a side picture
   comes forward under the mouse, on a tap or a swipe, and they turn by themselves: js/site-carousel.js), the text, small tags and the button beside them */
.cms-sec--image_carousel { padding: 84px 0 96px; overflow: hidden; }
.cms-fan { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.cms-fan *, .cms-fan *::before, .cms-fan *::after { box-sizing: border-box; }
.cms-fan__head { margin: 0 0 54px; text-align: center; }
.cms-fan__head:has(.cms-fan__h:empty) { display: none; }
.cms-fan__h { margin: 0; padding: 0; font: 400 var(--ms-h2)/1.1 var(--ms-font-head); letter-spacing: 0; color: var(--ms-ink); }
.cms-fan__sub { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; font-size: calc(12px * var(--ms-k-text)); font-weight: 600; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.cms-fan__sub::before, .cms-fan__sub::after { content: ""; width: 34px; height: 1px; background: var(--ms-gold); }
.cms-fan__sub:empty { display: none; }
.cms-fan__row { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 56px; align-items: center; }

.cms-carousel { position: relative; box-sizing: border-box; width: 100%; padding: 22px 2% 30px; touch-action: pan-y; }
.cms-fan__blob { position: absolute; left: 7%; right: 7%; top: 12%; bottom: 6%; background: var(--ms-shape-blob); border-radius: 54% 46% 58% 42% / 46% 54% 46% 54%; transform: scale(var(--ms-shape-scale, 1)); opacity: var(--ms-shape-opacity, 1); display: var(--ms-shape-display, block); }
/* 56% of the track wide and as high as the track (70% of its width) = a 4:5 picture */
.cms-carousel__track { position: relative; aspect-ratio: 100 / 70; }
.cms-carousel__slide { position: absolute; top: 0; left: 50%; width: 56%; height: 100%; border-radius: 24px; overflow: hidden; background: var(--ms-tint-d); box-shadow: 0 20px 44px rgba(var(--ms-ink-rgb),.25); cursor: pointer; opacity: 0; visibility: hidden; transform: translateX(-50%) scale(.6); transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .45s ease, visibility 0s linear .45s, filter .35s ease, box-shadow .35s ease; }
.cms-carousel__slide.is-center, .cms-carousel__slide.is-left, .cms-carousel__slide.is-right { opacity: 1; visibility: visible; transition-delay: 0s; }
.cms-carousel__slide.is-center { z-index: 3; cursor: default; transform: translateX(-50%); box-shadow: 0 34px 70px rgba(var(--ms-ink-rgb),.32); }
.cms-carousel__slide.is-left { z-index: 2; transform: translateX(-50%) translateX(-52%) scale(.84) rotate(-5deg); filter: brightness(.78); }
.cms-carousel__slide.is-right { z-index: 2; transform: translateX(-50%) translateX(52%) scale(.84) rotate(5deg); filter: brightness(.78); }
.cms-carousel .cms-carousel__slide img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .9s ease; }
.cms-carousel__slide .cms-vwrap { position: absolute; inset: 0; }
.cms-carousel__slide.is-center::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--ms-shade-rgb),0) 62%, rgba(var(--ms-shade-rgb),.6)); }
.cms-fan__tag { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 8px 14px 8px 12px; font-size: calc(12.5px * var(--ms-k-text)); font-weight: 600; line-height: calc(1.2 * var(--ms-k-lh)); color: #fff; background: var(--ms-glass-bg); border: 1px solid var(--ms-glass-border); border-radius: 999px; -webkit-backdrop-filter: var(--ms-glass-blur); backdrop-filter: var(--ms-glass-blur); opacity: 0; transition: opacity .35s ease .2s; }
.cms-fan__tag::before { content: ""; flex: 0 0 15px; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c48e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7l1.5-3h5L16 7'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.cms-fan__tag:empty { display: none; }
.cms-carousel__slide.is-center .cms-fan__tag { opacity: 1; }
/* mouse only (a tap on a phone must not leave the pictures lifted): a side picture lights up and lifts under the pointer, then comes forward */
@media (hover: hover) {
  .cms-carousel__slide.is-left:hover { transform: translateX(-50%) translateX(-52%) scale(.88) rotate(-3deg); filter: none; }
  .cms-carousel__slide.is-right:hover { transform: translateX(-50%) translateX(52%) scale(.88) rotate(3deg); filter: none; }
  .cms-carousel__slide.is-center:hover img { transform: scale(1.04); }
}

.cms-fan__body .cms-sec__title.cms-fan__title { margin: 0 0 18px; font: 400 var(--ms-h2)/1.08 var(--ms-font-head); letter-spacing: 0; color: var(--ms-ink); }
.cms-fan__title em { margin-left: .26em; font-style: normal; color: var(--ms-gold); }
.cms-fan__title em:empty { display: none; }
.cms-fan__body .cms-sec__text { max-width: none; margin: 0 0 22px !important; padding: 0 !important; font-size: var(--ms-text-size); line-height: calc(1.85 * var(--ms-k-lh)); color: var(--ms-mut); white-space: normal; }
.cms-fan__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.cms-fan__chips:not(:has(span:not(:empty))) { display: none; }
.cms-fan__chips span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px 9px 12px; font-size: calc(13.5px * var(--ms-k-text)); font-weight: 500; line-height: calc(1.2 * var(--ms-k-lh)); color: var(--ms-green); background: var(--ms-cream); border-radius: 999px; }
.cms-fan__chips span:empty { display: none; }
.cms-fan__chips span::before { content: ""; flex: 0 0 15px; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bc9459' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.cms-fan__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.cms-fan__hint { display: inline-flex; align-items: center; gap: 10px; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut); }
.cms-fan__hint::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; background: var(--ms-gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(var(--ms-gold-rgb),.2); }
.cms-fan__hint:empty { display: none; }
@media (max-width: 960px) {
  .cms-fan__row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cms-carousel { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .cms-sec--image_carousel { padding: 56px 0 64px; }
  .cms-fan { padding: 0 18px; }
  .cms-fan__head { margin-bottom: 34px; }
  .cms-carousel__track { aspect-ratio: 100 / 86; }
  .cms-carousel__slide { width: 68.8%; }
  .cms-carousel__slide.is-left { transform: translateX(-50%) translateX(-40%) scale(.8) rotate(-4deg); }
  .cms-carousel__slide.is-right { transform: translateX(-50%) translateX(40%) scale(.8) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .cms-carousel__slide, .cms-carousel__slide img, .cms-fan__tag { transition: none; } }

/* Home testimonials: the band turns light; two rows of review cards gliding in opposite directions */
.cms-rv-band { background: #fff !important; background-image: none !important; }
.cms-rv-band > .elementor-background-overlay, .cms-rv-band > .elementor-background-video-container { display: none !important; }
.rvm { padding: 0 0 10px; overflow: hidden; }
.rvm-pill { display: flex; width: max-content; max-width: calc(100% - 32px); flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0 auto 30px; padding: 9px 18px; font-size: calc(13.5px * var(--ms-k-text)); color: var(--ms-text); background: var(--ms-cream); border: 1px solid var(--ms-line); border-radius: 30px; }
.rvm-pill strong { font-family: var(--ms-font-head); font-weight: 500; font-size: calc(22px * var(--ms-k-text)); line-height: 1; color: var(--ms-green); }
.rvm-rows { -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.rvm-row { overflow: hidden; padding: 6px 0 12px; }
.rvm-track { display: flex; width: max-content; animation: rvm-left var(--rvm-time, 40s) linear infinite; will-change: transform; }
.rvm-row.is-back .rvm-track { animation-name: rvm-right; }
.rvm-row:hover .rvm-track { animation-play-state: paused; }
@keyframes rvm-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rvm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rvm-card { flex: 0 0 360px; display: flex; flex-direction: column; box-sizing: border-box; margin-right: 18px; padding: 20px 22px; background: var(--ms-cream); border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); transition: background .25s, box-shadow .25s; }
.rvm-card:hover { background: #fff; box-shadow: var(--ms-card-shadow); }
.rvm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rvm-top .rv-src { margin: 0; }
.rvm-card h3 { margin: 0 0 6px !important; font-family: var(--ms-font-body) !important; font-size: calc(16px * var(--ms-k-h3)) !important; font-weight: 500 !important; line-height: calc(1.3 * var(--ms-k-lhh)) !important; color: var(--ms-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rvm-card p { flex: 1; margin: 0 0 14px !important; padding: 0 !important; max-height: 4.95em; font-size: calc(13.5px * var(--ms-k-text)); line-height: calc(1.65 * var(--ms-k-lh)); color: var(--ms-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.rvm-card footer { display: flex; align-items: center; gap: 10px; }
.rvm-card .rv-avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: calc(14px * var(--ms-k-text)); }
.rvm-card footer strong { display: block; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-ink); }
.rvm-card footer small { display: block; font-size: calc(12px * var(--ms-k-text)); color: var(--ms-mut-l); }
.rvm-all { margin: 20px 0 0; text-align: center; }
.rvm-all a { font-size: calc(13px * var(--ms-k-text)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-green) !important; text-decoration: none !important; border-bottom: 2px solid var(--ms-gold); padding-bottom: 3px; }
@media (max-width: 640px) { .rvm-card { flex-basis: 290px; margin-right: 14px; } .rvm-rows { -webkit-mask-image: none; mask-image: none; } }
@media (prefers-reduced-motion: reduce) { .rvm-track { animation: none; } .rvm-row { overflow-x: auto; } }
/* phones and tablets: each row is a strip you swipe (the real cards only, no copies), moved on one card at a time by
   js/site-testimonials.js and back to the start at the end. iPhone/iPad Safari does not paint a very wide animated strip in
   full, which left the rows empty part of the time. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .rvm-rows { -webkit-mask-image: none; mask-image: none; }
    .rvm-row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-left: 16px; scroll-padding-left: 16px; }
    .rvm-row::-webkit-scrollbar { display: none; }
    .rvm-track { animation: none !important; transform: none !important; will-change: auto; padding-right: 16px; }
    .rvm-card[aria-hidden="true"] { display: none; }
    .rvm-card { scroll-snap-align: start; }
}

/* Testimonials page: summary card over the banner, filters, review grid with "Show more", the form in a window */
.rvp { max-width: 1180px; margin: 0 auto; padding: 0 24px 70px; }
.rvp-sum { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; margin: -46px 0 40px; padding: 26px 32px; background: #fff; border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow-hover); }
.rvp-score strong { display: block; font-family: var(--ms-font-head); font-weight: 500; font-size: calc(56px * var(--ms-k-text)); line-height: 1; color: var(--ms-green); }
.rvp-score small { display: block; margin-top: 6px; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut-l); }
.rvp-bars > div { display: grid; grid-template-columns: 38px 1fr 30px; gap: 10px; align-items: center; margin: 3px 0; font-size: calc(12.5px * var(--ms-k-text)); color: var(--ms-mut); }
.rvp-bars i { display: block; height: 7px; background: var(--ms-line); border-radius: 4px; overflow: hidden; }
.rvp-bars em { display: block; height: 100%; background: var(--ms-gold); border-radius: 4px; }
.rvp-write { padding: 14px 28px; font: inherit; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ms-green); border: 1px solid var(--ms-green); border-radius: var(--ms-btn-radius); cursor: pointer; transition: background var(--ms-speed) ease, border-color var(--ms-speed) ease; }
.rvp-write:hover { background: var(--ms-gold); border-color: var(--ms-gold); }
.rvp-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.rvp-filters button { padding: 9px 18px; font: inherit; font-size: calc(13.5px * var(--ms-k-text)); font-weight: 500; color: var(--ms-ink); background: #fff; border: 1px solid var(--ms-line); border-radius: 30px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rvp-filters button:hover { border-color: var(--ms-green); }
.rvp-filters button.is-on { color: #fff; background: var(--ms-green); border-color: var(--ms-green); }
/* every row as tall as the tallest card: all cards exactly the same size */
.rvp-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 22px; align-items: stretch; }
.rvp-card { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; padding: 24px 24px 20px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); transition: box-shadow .3s, transform .3s; }
.rvp-card[hidden] { display: none; }
.rvp-card:hover { transform: translateY(var(--ms-lift)); box-shadow: var(--ms-card-shadow-hover); }
.rvp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rvp-top .rv-src { margin: 0; }
.rvp-card h3 { margin: 0 0 8px !important; font-family: var(--ms-font-body) !important; font-size: calc(17px * var(--ms-k-h3)) !important; font-weight: 500 !important; line-height: calc(1.3 * var(--ms-k-lhh)) !important; color: var(--ms-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* 5 lines; the height cap also cuts reviews with line breaks (the theme pads paragraphs, which the clamp alone lets through) */
.rvp-text { margin: 0 !important; padding: 0 !important; font-size: calc(14px * var(--ms-k-text)); line-height: calc(1.7 * var(--ms-k-lh)); color: var(--ms-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; max-height: 8.5em; overflow: hidden; }
.rvp-more { align-self: flex-start; margin: 8px 0 0; padding: 0; font: inherit; font-size: calc(12.5px * var(--ms-k-text)); font-weight: 700; color: var(--ms-gold); background: none; border: 0; cursor: pointer; }
.rvp-more:hover { color: var(--ms-green); }
.rvp-more.is-off { visibility: hidden; pointer-events: none; } /* keeps its line, so the cards stay level */
.rvp-card [data-rvp-reply][hidden] { display: none; }
.rvp-card footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ms-line); }
.rvp-card .rvp-more { margin-bottom: 16px; }
/* the full review window */
.rvp-pop-box { max-width: 640px; padding: 30px 32px 26px; }
.rvp-pop-box .rvp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 40px 14px 0; }
.rvp-pop-box .rvp-top .rv-src { margin: 0; }
.rvp-pop-box h3 { margin: 0 0 10px !important; font-family: var(--ms-font-head) !important; font-size: calc(22px * var(--ms-k-h3)) !important; font-weight: 400 !important; line-height: calc(1.3 * var(--ms-k-lhh)) !important; color: var(--ms-ink); }
.rvp-pop-box .rvp-text { display: block; max-height: none; overflow: visible; margin: 0 0 18px !important; font-size: calc(15px * var(--ms-k-text)); line-height: calc(1.8 * var(--ms-k-lh)); color: var(--ms-text); }
.rvp-pop-box .rv-reply { margin: 0 0 18px; font-size: calc(14px * var(--ms-k-text)); }
.rvp-pop-box footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ms-line); }
.rvp-pop-box footer strong { display: block; font-size: calc(15px * var(--ms-k-text)); color: var(--ms-ink); }
.rvp-pop-box footer small { display: block; font-size: calc(12.5px * var(--ms-k-text)); color: var(--ms-mut-l); }
.rvp-card footer strong { display: block; font-size: calc(15px * var(--ms-k-text)); color: var(--ms-ink); }
.rvp-card footer small { display: block; font-size: calc(12.5px * var(--ms-k-text)); color: var(--ms-mut-l); }
.rvp-card .rv-apt { margin: 4px 0 0; }
.rvp-foot { margin-top: 34px; text-align: center; }
.rvp-showmore { padding: 14px 30px; font: inherit; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-green); background: #fff; border: 1px solid var(--ms-green); border-radius: var(--ms-btn-radius); cursor: pointer; transition: background .25s, color .25s; }
.rvp-showmore:hover { color: #fff; background: var(--ms-green); }
.rvp-showmore[hidden] { display: none; }
.rvp-foot small { display: block; margin-top: 10px; font-size: calc(12.5px * var(--ms-k-text)); color: var(--ms-mut-l); }
@media (max-width: 1000px) { .rvp-grid { grid-template-columns: repeat(2, 1fr); } .rvp-sum { grid-template-columns: auto 1fr; } .rvp-write { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 640px) { .rvp-grid { grid-template-columns: 1fr; } .rvp-sum { grid-template-columns: 1fr; gap: 18px; padding: 22px; margin-top: -30px; } }

/* Testimonial page: guests' video reviews (upright cards) and the player window */
.vr { position: relative; box-sizing: border-box; padding: 70px 0 74px; color: #fff; background: #0e1628; }
.vr-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.vr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.vr-kicker { display: block; margin-bottom: 10px; font-size: calc(12px * var(--ms-k-text)); font-weight: 600; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.vr-head h2 { margin: 0; font-size: var(--ms-h2); color: #fff; }
.vr-head p { margin: 8px 0 0; font-size: calc(14px * var(--ms-k-text)); color: rgba(255,255,255,.7); }
.vr-nav { display: flex; gap: 12px; }
.vr-nav button { width: 44px; height: 44px; font-size: calc(24px * var(--ms-k-text)); line-height: 1; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.vr-nav button:hover:not(:disabled) { color: #0e1628; background: #fff; }
.vr-nav button:disabled { opacity: .35; cursor: default; }
.vr.is-fit .vr-nav { visibility: hidden; }
.vr-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 8px; }
.vr-track::-webkit-scrollbar { display: none; }
.vr-item { position: relative; display: block; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; font-family: var(--ms-font-body); color: #fff; text-align: left; background: #1d2638; border: 0; border-radius: 18px; box-shadow: 0 16px 36px rgba(0,0,0,.4); cursor: pointer; scroll-snap-align: start; }
.vr-poster { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .8s ease; }
.vr-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 55%); }
.vr-item:hover .vr-poster { transform: scale(1.06); }
.vr-tag { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 4px 9px; font-size: calc(11px * var(--ms-k-text)); font-weight: 700; letter-spacing: .06em; background: rgba(0,0,0,.55); border-radius: 4px; }
.vr-play { position: absolute; z-index: 2; left: 50%; top: 42%; display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; background: rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 10px 24px rgba(0,0,0,.3); transform: translate(-50%, -50%); transition: transform .3s; }
.vr-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--ms-green); }
.vr-item:hover .vr-play { transform: translate(-50%, -50%) scale(1.1); }
.vr-cap { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; }
.vr-cap strong { display: block; font-size: calc(16px * var(--ms-k-text)); }
.vr-cap small { display: block; margin-top: 2px; font-size: calc(12.5px * var(--ms-k-text)); opacity: .8; }
.vr-stars { display: block; color: #f4b400; font-size: calc(13px * var(--ms-k-text)); letter-spacing: 2px; }
.vr-item:focus-visible { outline: 3px solid var(--ms-gold); outline-offset: 3px; }
.vr-player { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,10,20,.88); }
.vr-player[hidden] { display: none; }
.vr-close { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; font-size: calc(30px * var(--ms-k-text)); line-height: 1; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 50%; cursor: pointer; }
.vr-stage { width: min(960px, 92vw); aspect-ratio: 16 / 9; }
.vr-stage.is-upright { width: auto; height: min(86vh, 860px); aspect-ratio: 9 / 16; max-width: 92vw; }
.vr-stage.is-file { display: flex; align-items: center; justify-content: center; width: auto; height: auto; aspect-ratio: auto; }
.vr-stage iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; background: #000; }
.vr-stage video { display: block; max-width: 92vw; max-height: 86vh; border-radius: 12px; background: #000; }
@media (max-width: 1000px) { .vr-track { grid-auto-columns: calc((100% - 40px) / 2.4); } }
@media (max-width: 640px) { .vr-track { grid-auto-columns: 70%; } .vr-head { align-items: flex-start; } .vr-nav { display: none; } }

/* Contact page: green hero (heading, address, phone, listings) with the form beside it, the places around us, the map */
.cms-ct-hero { position: relative; box-sizing: border-box; padding: 200px 0 70px; color: #fff; background: linear-gradient(rgba(var(--ms-green-deep-rgb),.92), rgba(var(--ms-green-deep-rgb),.92)) center / cover; }
.cms-ct-in { display: grid; grid-template-columns: 1fr 460px; gap: 50px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.cms-ct-kicker { display: block; margin-bottom: 10px; font-size: calc(12px * var(--ms-k-text)); font-weight: 600; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold-l); }
.cms-ct-info h1 { margin: 0 0 22px; font-size: calc(clamp(34px, 4.6vw, 54px) * var(--ms-k-h1)); line-height: 1.08; color: #fff; }
.cms-ct-info h1 em { font-style: normal; color: var(--ms-gold-l); }
.cms-ct-lead { max-width: 480px; margin: 0 0 28px; font-size: calc(15px * var(--ms-k-text)); line-height: calc(1.8 * var(--ms-k-lh)); opacity: .9; }
.cms-ct-facts { display: grid; gap: 14px; margin: 0 0 34px; padding: 0; list-style: none; }
.cms-ct-facts li { display: flex; gap: 14px; align-items: center; font-size: calc(15px * var(--ms-k-text)); }
.cms-ct-ico { display: inline-flex; flex: 0 0 42px; width: 42px; height: 42px; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border-radius: 50%; }
.cms-ct-ico svg, .cms-ct-cardico svg { width: 22px; height: 22px; }
.cms-ct-wa { color: #fff !important; text-decoration: none !important; border: 0; }
.cms-ct-mail { color: #fff !important; text-decoration: none !important; border: 0; word-break: break-all; }
.cms-ct-mail:hover { color: var(--ms-gold-l, #e8c48f) !important; }
.cms-ct-wa small { margin-left: 10px; padding: 3px 9px; font-size: calc(10.5px * var(--ms-k-text)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #25d366; border-radius: 20px; }
.cms-ct-sub { margin: 30px 0 14px; font: 600 12px var(--ms-font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ms-gold-l); }
.cms-ct-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.cms-ct-chip { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px; color: var(--ms-ink) !important; text-decoration: none !important; background: #fff; border-radius: 40px; box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease; }
.cms-ct-chip:hover { transform: translateY(var(--ms-lift)); box-shadow: 0 14px 28px rgba(0,0,0,.3); }
.cms-ct-arr { color: var(--ms-gold); font-size: calc(18px * var(--ms-k-text)); line-height: 1; }
.cms-lg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ms-font-body); font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.cms-lg--airbnb { color: #ff5a5f; font-size: calc(28px * var(--ms-k-text)); } .cms-lg--airbnb svg { width: 30px; height: 30px; fill: none; stroke: #ff5a5f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cms-lg--booking { color: #003580; font-size: calc(27px * var(--ms-k-text)); gap: 0; } .cms-lg--booking s { text-decoration: none; color: #0896ff; }
.cms-lg--name { font-size: calc(20px * var(--ms-k-text)); color: var(--ms-ink); }
.cms-lg-img { display: block; max-height: 34px; width: auto; max-width: 150px; }
.cms-ct-formcard { margin-bottom: -150px; padding: 34px 34px 30px; color: var(--ms-ink); background: #fff; border-radius: var(--ms-card-radius); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.cms-ct-formcard h2 { margin: 0 0 20px; font-size: var(--ms-h3); line-height: calc(1.2 * var(--ms-k-lhh)); color: var(--ms-ink); }
.cms-ct-area { max-width: 1180px; margin: 0 auto; padding: 150px 24px 0; }
.cms-ct-area h2 { margin: 0 0 8px; text-align: center; font-size: var(--ms-h2); }
.cms-ct-areasub { margin: 0 0 34px; text-align: center; font-size: calc(13px * var(--ms-k-text)); letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-mut); }
.cms-ct-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cms-ct-card { display: block; padding: 22px 22px 20px; color: inherit !important; text-decoration: none !important; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease; }
a.cms-ct-card:hover, div.cms-ct-card:hover { transform: translateY(var(--ms-lift)); box-shadow: var(--ms-card-shadow-hover); }
.cms-ct-cardico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--ms-green); background: var(--ms-cream); border-radius: 50%; }
.cms-ct-card h3 { margin: 0 0 8px; font: 500 17px/1.25 var(--ms-font-body); color: var(--ms-ink); }
.cms-ct-card p { margin: 0; font-size: calc(13.5px * var(--ms-k-text)); line-height: calc(1.65 * var(--ms-k-lh)); color: var(--ms-mut); }
.cms-ct-more { display: inline-block; margin-top: 10px; font-size: calc(12px * var(--ms-k-text)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-green); }
.cms-ct-map { margin: 44px 0 70px; height: 340px; overflow: hidden; border-radius: var(--ms-card-radius); background: var(--ms-tint); }
.cms-ct-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 1000px) {
  .cms-ct-in { grid-template-columns: 1fr; gap: 36px; }
  .cms-ct-formcard { margin-bottom: 0; }
  .cms-ct-hero { padding-top: 150px; padding-bottom: 50px; }
  .cms-ct-area { padding-top: 60px; }
  .cms-ct-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .cms-ct-hero { padding-top: 120px; } .cms-ct-cards { grid-template-columns: 1fr; } .cms-ct-formcard { padding: 26px 20px; } .cms-ct-chip { padding: 10px 16px; } }

/* "About intro" layout: text + signature, two portrait pictures (the second a little lower) */
.cms-sec--about_intro.elementor-element { background: none !important; } /* the theme's grey box behind the old section */
.cms-intro { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 30px; align-items: center; }
.cms-intro__kicker { display: block; margin-bottom: 10px; font-size: calc(12px * var(--ms-k-text)); font-weight: 600; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.cms-intro .cms-sec__title { margin: 0 0 18px; font-size: var(--ms-h2); line-height: 1.15; }
.cms-intro .cms-sec__text { max-width: none; margin: 0 0 22px; font-size: var(--ms-text-size); line-height: calc(1.85 * var(--ms-k-lh)); color: var(--ms-text); }
.cms-intro__sig { display: flex; align-items: center; gap: 16px; }
.cms-intro__sig img { display: block; width: auto; max-width: 150px; height: 56px; object-fit: contain; }
.cms-intro__sig span { font-size: calc(12px * var(--ms-k-text)); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ms-ink); }
.cms-intro__pic { aspect-ratio: 4 / 5; border-radius: var(--ms-card-radius); overflow: hidden; background: #e8e8e8; box-shadow: var(--ms-card-shadow-hover); }
.cms-intro__pic.is-low { margin-top: 56px; }
.cms-intro__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) { .cms-intro { grid-template-columns: 1fr 1fr; } .cms-intro__text { grid-column: 1 / -1; } .cms-intro__pic.is-low { margin-top: 0; } }
@media (max-width: 600px) { .cms-intro { grid-template-columns: 1fr; } .cms-intro .cms-sec__title { font-size: calc(32px * var(--ms-k-h3)); } }

/* "Timeline rows" layout (About us - our journey): big outlined year, title + text, 4:5 picture; rows alternate white / cream */
.cms-sec--journey { overflow: hidden; }
.cms-journey__sub { margin-bottom: 0; text-transform: uppercase; letter-spacing: var(--ms-kicker-ls); font-size: calc(13px * var(--ms-k-text)); }
.cms-journey { margin-top: 44px; }
.cms-journey__row { display: grid; grid-template-columns: 250px 1fr 300px; gap: 40px; align-items: center; padding: 38px 0; border-top: 1px solid var(--ms-line); }
.cms-journey__row:last-child { border-bottom: 1px solid var(--ms-line); }
.cms-journey__row:nth-child(even) { background: var(--ms-cream); box-shadow: 0 0 0 100vmax var(--ms-cream); clip-path: inset(0 -100vmax); }
.cms-journey__year { font-family: var(--ms-font-head); font-weight: 500; font-size: clamp(60px, 8.7vw, 112px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ms-gold); overflow-wrap: anywhere; transition: color .4s ease; }
.cms-journey__row:hover .cms-journey__year { color: rgba(var(--ms-gold-rgb),.16); }
.cms-journey__body h3 { margin: 0 0 12px; font-size: var(--ms-h3); line-height: 1.15; }
.cms-journey__body h3::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 14px; background: var(--ms-gold); border-radius: 0 0 3px 3px; }
.cms-journey__body p { max-width: 520px; margin: 0; font-size: var(--ms-text-size); line-height: calc(1.8 * var(--ms-k-lh)); color: var(--ms-text); white-space: pre-line; }
.cms-journey__pic { aspect-ratio: 4 / 5; border-radius: var(--ms-card-radius); overflow: hidden; background: #e8e8e8; box-shadow: var(--ms-card-shadow-hover); }
.cms-journey__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cms-journey__row:hover .cms-journey__pic img { transform: scale(1.05); }
@media (max-width: 1000px) { .cms-journey__row { grid-template-columns: 180px 1fr 220px; gap: 28px; } .cms-journey__year { font-size: clamp(48px, 8vw, 80px); } }
@media (max-width: 767px) {
  .cms-journey__row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .cms-journey__year { font-size: 64px; }
  .cms-journey__pic { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) { .cms-journey__year, .cms-journey__pic img { transition: none; } }

/* "Special offers" cards: picture with a white panel laid over its bottom edge; all panels the same height */
.cms-sec--offers { padding-top: 0; }
.cms-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.cms-offer { display: flex; flex-direction: column; color: inherit; text-decoration: none !important; }
.cms-offer__pic { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--ms-card-radius); overflow: hidden; background: #e8e8e8; box-shadow: var(--ms-card-shadow); }
.cms-offer__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cms-offer:hover .cms-offer__pic img { transform: scale(1.06); }
.cms-offer__tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 8px 14px; background: var(--ms-gold); color: #fff; font-size: calc(12px * var(--ms-k-text)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 30px; box-shadow: 0 0 0 0 rgba(var(--ms-gold-rgb),.7); animation: cms-offer-pulse 2.2s ease-out infinite; }
.cms-offer__tag.is-urgent { background: #b23a2e; box-shadow: 0 0 0 0 rgba(178,58,46,.7); animation-duration: 1.4s; }
@keyframes cms-offer-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--ms-gold-rgb),.7); } 70% { box-shadow: 0 0 0 12px rgba(var(--ms-gold-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ms-gold-rgb),0); } }
.cms-offer__panel { position: relative; display: flex; flex-direction: column; flex: 1; margin: -46px 18px 0; padding: 24px 22px 20px; background: #fff; border-radius: 12px; box-shadow: var(--ms-card-shadow-hover); transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease; }
.cms-offer__panel::before { content: ""; position: absolute; top: 0; left: 22px; width: 44px; height: 3px; background: var(--ms-gold); border-radius: 0 0 3px 3px; transition: width .35s ease; }
.cms-offer:hover .cms-offer__panel { transform: translateY(calc(var(--ms-lift) * 2)); box-shadow: var(--ms-card-shadow-hover); }
.cms-offer:hover .cms-offer__panel::before { width: 90px; }
.cms-offer__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: calc(11.5px * var(--ms-k-text)); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ms-mut-l); }
.cms-offer__meta i { font-style: normal; color: var(--ms-gold); }
.cms-offer__meta b { color: var(--ms-green); }
.cms-offer__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 8px; font-size: var(--ms-h4); line-height: calc(1.2 * var(--ms-k-lhh)); font-weight: 500; color: var(--ms-ink); min-height: 2.4em; }
.cms-offer__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: 1; margin: 0 0 14px; font-size: calc(14px * var(--ms-k-text)); line-height: calc(1.65 * var(--ms-k-lh)); color: var(--ms-text); min-height: 3.3em; }
.cms-offer__more { display: inline-flex; align-items: center; gap: 8px; font-size: calc(12px * var(--ms-k-text)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ms-green); }
.cms-offer__more i { font-style: normal; font-size: calc(18px * var(--ms-k-text)); line-height: 1; color: var(--ms-gold); transition: transform .3s ease; }
.cms-offer:hover .cms-offer__more i { transform: translateX(5px); }
@media (max-width: 1000px) { .cms-offers { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 640px) { .cms-offers { grid-template-columns: 1fr; padding: 0 16px; } .cms-offer__panel { margin: -40px 14px 0; } }
/* "2 nights · From Rs. 55,000": each part stays on one line; when both do not fit, the price moves under the nights */
.cms-offer__meta { flex-wrap: wrap; row-gap: 2px; }
.cms-offer__meta > span { white-space: nowrap; }
@media (max-width: 640px) { .cms-offer__meta { letter-spacing: .12em; } }
@media (prefers-reduced-motion: reduce) { .cms-offer__tag { animation: none; } .cms-offer__pic img, .cms-offer__panel, .cms-offer__more i { transition: none; } }
/* offer page: the end date under the price */
.pkg-validity { margin: 0 0 16px; padding: 10px 14px; background: var(--ms-cream); border-left: 3px solid var(--ms-gold); font-size: calc(14px * var(--ms-k-text)); color: var(--ms-ink); }
.pkg-validity small { margin-left: 6px; color: var(--ms-mut-l); }
.pkg-validity.is-ended { background: #fbeeec; border-color: #b23a2e; color: #b23a2e; }

/* Apartment page: detail box (description + sidebar), like the theme's room pages. */
/* the detail box: two cards side by side (the text one ends with its text, the sidebar follows the page) */
.apd-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 26px; align-items: start; max-width: 1150px; margin: 50px auto; position: relative; }
.apd-detail-main { padding: 44px 50px 36px; font-size: var(--ms-text-size); line-height: calc(1.75 * var(--ms-k-lh)); color: var(--ms-ink); background: var(--ms-card-bg); border: 1px solid var(--ms-card-border); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); }
.apd-detail-main p { margin: 0 0 22px; }
.apd-detail-main .apd-headline { position: relative; margin: 0 0 26px; padding: 0 0 18px; font-family: var(--ms-font-head); font-weight: var(--ms-w-head); font-size: calc(34px * var(--ms-k-h2)); line-height: calc(1.12 * var(--ms-k-lhh)); letter-spacing: var(--ms-ls-head); text-transform: var(--ms-tt-head); color: var(--ms-ink); }
.apd-detail-main .apd-headline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--ms-gold); }
.apd-side { position: sticky; top: 96px; padding: 36px 40px 34px; background: var(--ms-card-bg); border: 1px solid var(--ms-card-border); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); }
.apd-side-label { display: block; font-size: calc(13px * var(--ms-k-text)); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ms-ink); }
.apd-side-price { margin: 6px 0 16px; color: var(--ms-ink); }
.apd-side-price strong { font-size: calc(26px * var(--ms-k-text)); }
.apd-side-price small { font-size: calc(14px * var(--ms-k-text)); color: var(--ms-mut); }
.apd-side-book { display: block; padding: 14px 20px; text-align: center; background: var(--ms-green); color: #fff !important; font-size: calc(17px * var(--ms-k-text)); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .2s; border-radius: var(--ms-btn-radius); }
.apd-side-book:hover { background: var(--ms-green-deep); }
.apd-facts { list-style: none; margin: 30px 0 0; padding: 0; }
.apd-facts li { display: flex; align-items: center; gap: 22px; margin: 0 0 22px; font-size: calc(16px * var(--ms-k-text)); color: var(--ms-ink); }
.apd-facts img { width: 46px; height: auto; flex: 0 0 46px; opacity: .85; }
.apd-tick { flex: 0 0 46px; text-align: center; font-size: calc(20px * var(--ms-k-text)); color: var(--ms-green); }
@media (max-width: 860px) {
    .apd-detail { grid-template-columns: 1fr; gap: 16px; margin: 0 16px 36px; }
    .apd-detail-main { padding: 28px 22px 22px; }
    .apd-side { position: static; padding: 26px 22px 20px; }
    .apd-side .apd-facts { margin-top: 28px !important; } /* the theme zeroes list margins on phones with !important */
    .apd-detail-main .apd-headline { font-size: calc(26px * var(--ms-k-h2)); }
}

/* Apartment page gallery: a horizontal strip of pictures + a lightbox. */
.apd-gallery { position: relative; margin: 0 0 50px; }
.apd-gallery-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.apd-gallery-track::-webkit-scrollbar { display: none; }
.apd-gallery-cell { flex: 0 0 auto; scroll-snap-align: start; }
/* !important: the theme sets img height and max-width by ID, which showed every picture at its full size on phones */
.apd-gallery-cell img { display: block; height: clamp(260px, 42vw, 560px) !important; width: auto !important; min-width: 200px; max-width: 92vw !important; object-fit: cover; background: var(--ms-cream); }
.apd-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ms-ink); font-size: calc(30px * var(--ms-k-text)); line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.apd-gallery-nav.prev { left: 16px; }
.apd-gallery-nav.next { right: 16px; }
@media (max-width: 767px) {
    .apd-gallery-cell { flex: 0 0 86vw; }
    .apd-gallery-cell img, .apd-gallery-cell.is-video video { width: 100% !important; max-width: none !important; height: 62vw !important; }
}
.apd-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); }
.apd-lightbox[hidden] { display: none; }
.apd-lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; }
.apd-lightbox button { position: absolute; border: 0; background: none; color: #fff; font-size: calc(46px * var(--ms-k-text)); line-height: 1; cursor: pointer; padding: 10px 16px; }
.apd-lb-close { top: 10px; right: 14px; }
.apd-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.apd-lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* Home page: heading + "View all apartments" link above the apartment tiles. */
.cms-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 1200px; margin: 0 auto; padding: 50px 24px 28px; }
.cms-grid-head h2 { margin: 0; font-size: var(--ms-h2); line-height: 1.1; }
/* the site's button look (admin → Settings colours restyle it like every other button) */
a.cms-grid-all { display: inline-block; padding: 14px 30px; background: var(--ms-green); color: #fff; border: 1px solid var(--ms-green); border-radius: var(--ms-btn-radius); font-size: calc(13px * var(--ms-k-text)); font-weight: 700; letter-spacing: .15em; line-height: calc(1.2 * var(--ms-k-lh)); text-transform: uppercase; text-decoration: none !important; transition: background var(--ms-speed) ease, border-color var(--ms-speed) ease; }
a.cms-grid-all:hover, a.cms-grid-all:focus { background: var(--ms-gold); border-color: var(--ms-gold); color: #fff; }
@media (max-width: 600px) { .cms-grid-head { padding: 34px 16px 20px; } .cms-grid-head h2 { font-size: calc(30px * var(--ms-k-h2)); } }

/* Apartment tiles (home / Our Apartments): the picture fills the tile without being stretched. */
.distortion_grid_item > .cms-tile-img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.distortion_grid_item > .cms-tile-img img { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; object-position: center; }
.distortion_grid_item > .cms-tile-img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.distortion_grid_item--bg > .distortion_grid_item-content { z-index: 2; }

/* Apartment page amenities: the theme floats this section; here it is a normal full-width block. */
.apd-amenities { float: none !important; clear: both; display: flow-root !important; width: 100%; box-sizing: border-box; }
.apd-amenities .page_content_wrapper { display: flow-root; }
.apd-amenities + .apd-gallery { clear: both; margin-top: 0; }

/* Pages inside the site shell (category, checkout, account …): the theme already keeps room for the
   header (#wrapper padding-top), so the page only needs a small top margin of its own. */
.co, .cat, .apt { padding-top: 36px !important; }
@media (max-width: 800px) { .co, .cat, .apt { padding-top: 22px !important; } }

/* Category page heading: breadcrumb, title and the sub category chips in one tidy block. */
.apt-head { display: grid; gap: 10px; margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--ms-line); }
.apt-head .apt-crumbs { margin: 0; font-size: calc(13px * var(--ms-k-text)); letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.apt-head .apt-crumbs a { color: var(--ms-gold); }
.apt-head h1 { margin: 0; font-size: calc(clamp(34px, 4vw, 52px) * var(--ms-k-h1)); line-height: 1.1; }
.apt-head .apt-desc { margin: 0; }
.apt-head .apt-chips { margin-top: 6px; }
@media (max-width: 800px) { .apt-head { margin-bottom: 20px; padding-bottom: 18px; } }

/* Hover distortion canvas (js/tile-distort.js) over the tile picture. */
.cms-distort-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.apt-tile > .apt-tile-distort { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* ------------------------------------------------------------------ site footer (App\Services\SiteFooter) */
#footer.cms-footer { padding: 64px 24px 40px !important; border-top: 1px solid rgba(0, 0, 0, .06); }
.cms-foot-grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1.1fr .9fr; gap: 40px 48px; max-width: 1200px; margin: 0 auto; text-align: left; }
.cms-foot-col h3 { position: relative; margin: 0 0 22px; padding-bottom: 12px; font-size: calc(14px * var(--ms-k-text)) !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ms-green); }
.cms-foot-col h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--ms-gold); }
.cms-foot-list { list-style: none; margin: 0; padding: 0; }
.cms-foot-list li { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 0; font-size: calc(15px * var(--ms-k-text)); line-height: calc(1.55 * var(--ms-k-lh)); color: #2f3b38; }
.cms-foot-list li::before { display: none !important; }
.cms-foot-list li > .cms-ico { flex: 0 0 38px; width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--ms-tint); color: var(--ms-green); }
.cms-foot-list li span { display: flex; flex-direction: column; min-width: 0; }
.cms-foot-list strong { color: var(--ms-green); font-weight: 700; }
.cms-foot-list small { font-size: calc(12px * var(--ms-k-text)); letter-spacing: .06em; text-transform: uppercase; color: var(--ms-mut-l); }
.cms-foot-list a { color: var(--ms-green) !important; font-weight: 600; text-decoration: none; border: 0 !important; word-break: break-word; }
.cms-foot-list a:hover { color: var(--ms-gold) !important; }
.cms-foot-list a.cms-foot-map { margin-top: 4px; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; color: var(--ms-gold) !important; }
.cms-foot-note { margin: 0 0 16px; font-size: calc(14px * var(--ms-k-text)); line-height: calc(1.6 * var(--ms-k-lh)); color: var(--ms-mut); }

/* newsletter: the send button sits inside the end of the e-mail box */
.cms-foot-news { position: relative; display: flex; flex-wrap: wrap; gap: 0; }
.cms-foot-news input[type=email] { flex: 1 1 100%; width: 100%; min-width: 0; height: 46px; padding: 0 56px 0 14px; font: inherit; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-ink); background: #fff; border: 1px solid var(--ms-tint-d); border-radius: 8px; box-sizing: border-box; }
.cms-foot-news input[type=email]:focus { outline: 2px solid var(--ms-green); outline-offset: -1px; }
.cms-foot-news button { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--ms-btn-fg, #fff); background: var(--ms-btn-bg, var(--ms-green)); border: 0; border-radius: 6px; cursor: pointer; transition: background .2s; }
.cms-foot-news button:hover, .cms-foot-news button:focus-visible { background: var(--ms-btn-hover, var(--ms-green-deep)); color: var(--ms-btn-hover-fg, #fff); }
.cms-foot-news button .cms-ico { width: 17px; height: 17px; }
.cms-foot-news button .cms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cms-foot-news .cms-msg { flex-basis: 100%; margin-top: 8px; font-size: calc(13px * var(--ms-k-text)); }
.cms-foot-news .cms-msg.is-ok { color: #15803d; }
.cms-foot-news .cms-msg.is-no { color: #b91c1c; }
.cms-foot-news .cms-error { flex-basis: 100%; order: 3; }

.cms-socials { display: flex; flex-wrap: wrap; gap: 10px; }
a.cms-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff !important; background: var(--ms-green); border: 0 !important; transition: transform .2s, background .2s; }
a.cms-social .cms-ico { width: 20px; height: 20px; }
a.cms-social:hover { transform: translateY(var(--ms-lift)); }
a.cms-social--facebook:hover { background: #1877f2; }
a.cms-social--instagram:hover { background: #d62976; }
a.cms-social--youtube:hover { background: #ff0000; }
a.cms-social--tiktok:hover, a.cms-social--x:hover { background: #111; }
a.cms-social--whatsapp:hover { background: #25d366; }

#copyright a.cms-dev-link { color: inherit !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#copyright a.cms-dev-link:hover { color: var(--ms-gold) !important; }

@media (max-width: 1000px) { .cms-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    #footer.cms-footer { padding: 44px 18px 28px !important; }
    .cms-foot-grid { grid-template-columns: 1fr; gap: 30px; }
}
/* newsletter: one e-mail box with the send button inside its end (see .cms-foot-news above) */
.cms-foot-news { display: block; }
.cms-foot-news input[type=email] { width: 100%; box-sizing: border-box; border: 1px solid var(--ms-tint-d) !important; border-radius: 8px; }
#footer.cms-footer { box-sizing: border-box; width: 100% !important; }

/* Footer social icons: the same round brand-coloured icons as on the contact page. */
.cms-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff !important; transition: transform .2s, opacity .2s; }
a.cms-social:hover, span.cms-social:hover { transform: translateY(var(--ms-lift)); opacity: .9; }
.cms-social .cms-ico { width: 20px; height: 20px; }
.cms-social--facebook, a.cms-social--facebook:hover { background: #3b5998; }
.cms-social--tripadvisor, a.cms-social--tripadvisor:hover { background: #589442; }
.cms-social--tripadvisor .cms-ico { width: 24px; }
.cms-social--youtube, a.cms-social--youtube:hover { background: #cd201f; }
.cms-social--instagram, a.cms-social--instagram:hover { background: #262626; }
.cms-social--tiktok, a.cms-social--tiktok:hover, .cms-social--x, a.cms-social--x:hover { background: #111; }
span.cms-social { cursor: default; }

/* Footer: the WhatsApp line gets the real WhatsApp look (white on green). */
.cms-foot-list li > .cms-ico[fill="currentColor"] { background: #25d366; color: #fff; padding: 8px; }

/* Contact page map: Google Maps embed (no API key needed) in place of the theme's widget. */
iframe.cms-map { display: block; width: 100%; height: 520px; border: 0; }
@media (max-width: 800px) { iframe.cms-map { height: 360px; } }

/* ------------------------------------------------------------------ Cafe page menu cards (App\Services\CafeMenu) */
.cms-menu { padding: 70px 24px 80px; background: var(--ms-cream); }
.cms-menu-in { max-width: 1200px; margin: 0 auto; }
.cms-menu-head { text-align: center; margin: 0 0 26px; }
.cms-menu-kicker { display: block; margin-bottom: 8px; font-size: calc(13px * var(--ms-k-text)); font-weight: 700; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.cms-menu-head h2 { margin: 0 0 8px; font-size: var(--ms-h2); line-height: 1.1; color: var(--ms-ink); }
.cms-menu-head p { margin: 0; color: var(--ms-mut); font-size: calc(15px * var(--ms-k-text)); }
.cms-menu-nav { position: sticky; top: 90px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 34px; padding: 10px; max-width: 1000px; background: rgba(var(--ms-cream-rgb),.94); border-radius: var(--ms-card-radius); }
.cms-menu-nav a { padding: 7px 14px; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; color: var(--ms-green) !important; background: #fff; border: 1px solid var(--ms-line); border-radius: 999px; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.cms-menu-nav a:hover { color: #fff !important; background: var(--ms-green); border-color: var(--ms-green); }
.cms-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cms-menu-card { scroll-margin-top: 170px; padding: 26px 26px 18px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease; }
.cms-menu-card:hover { transform: translateY(var(--ms-lift)); box-shadow: 0 12px 30px rgba(60, 45, 20, .1); }
.cms-menu-card header { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ms-line); }
.cms-menu-card h3 { margin: 0; font-size: var(--ms-h4); line-height: calc(1.2 * var(--ms-k-lhh)); color: var(--ms-green); }
.cms-menu-card header p { margin: 4px 0 0; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut-l); }
.cms-menu-card ul { list-style: none; margin: 0; padding: 0; }
.cms-menu-card li { margin: 0 0 12px; padding: 0; }
.cms-menu-card li::before { display: none !important; }
.cms-menu-line { display: flex; align-items: baseline; gap: 8px; }
.cms-menu-name { font-size: calc(15px * var(--ms-k-text)); font-weight: 600; color: var(--ms-ink); }
.cms-menu-dots { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--ms-line-d); transform: translateY(-4px); }
.cms-menu-price { flex: 0 0 auto; font-size: calc(15px * var(--ms-k-text)); font-weight: 700; color: var(--ms-gold); white-space: nowrap; }
.cms-menu-desc { margin: 2px 0 0; font-size: calc(13px * var(--ms-k-text)); line-height: calc(1.5 * var(--ms-k-lh)); color: var(--ms-mut-l); }
@media (max-width: 1000px) { .cms-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .cms-menu { padding: 46px 16px 56px; }
    .cms-menu-grid { grid-template-columns: 1fr; gap: 16px; }
    .cms-menu-nav { position: static; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 4px 0 10px; background: none; }
    .cms-menu-nav a { flex: 0 0 auto; }
}

/* Contact page: "Our Address / By Car / Nathiagli" as cards with an icon (section 792a63f). */
.elementor-element-792a63f > .elementor-container { gap: 22px; }
.elementor-element-792a63f > .elementor-container > .elementor-column > .elementor-widget-wrap {
    position: relative; height: 100%; padding: 30px 26px 26px 26px !important; box-sizing: border-box;
    background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow);
    transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease;
}
.elementor-element-792a63f > .elementor-container > .elementor-column > .elementor-widget-wrap:hover { transform: translateY(var(--ms-lift)); box-shadow: 0 12px 30px rgba(60, 45, 20, .1); }
.elementor-element-792a63f > .elementor-container > .elementor-column > .elementor-widget-wrap::before {
    content: ""; display: block; width: 50px; height: 50px; margin: 0 0 18px; border-radius: 50%;
    background-color: var(--ms-tint); background-repeat: no-repeat; background-position: center; background-size: 24px;
}
.elementor-element-792a63f > .elementor-container > .elementor-column:nth-child(1) > .elementor-widget-wrap::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}
.elementor-element-792a63f > .elementor-container > .elementor-column:nth-child(2) > .elementor-widget-wrap::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16.5V12l2-5h10l2 5v4.5'/%3E%3Cpath d='M3.5 12h17v4.5h-17z'/%3E%3Ccircle cx='7.5' cy='16.5' r='1.6'/%3E%3Ccircle cx='16.5' cy='16.5' r='1.6'/%3E%3C/svg%3E");
}
.elementor-element-792a63f > .elementor-container > .elementor-column:nth-child(3) > .elementor-widget-wrap::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 19 6.5-11 4 6.5 2.5-3.5 5 8z'/%3E%3Cpath d='m8 11 1.5 1.5L11 11'/%3E%3C/svg%3E");
}
.elementor-element-792a63f .elementor-widget-text-editor p { margin: 0; line-height: calc(1.7 * var(--ms-k-lh)); color: var(--ms-mut); }
.elementor-element-792a63f .elementor-widget-text-editor strong { display: block; margin-bottom: 6px; font-size: calc(18px * var(--ms-k-text)); color: var(--ms-green); }
.elementor-element-792a63f .elementor-widget-text-editor strong br { display: none; }
@media (max-width: 767px) { .elementor-element-792a63f > .elementor-container { gap: 14px; } }
.elementor-element-792a63f .elementor-widget-text-editor strong + br { display: none; }

/* Contact page: the map as a full-width band (edge to edge) between the info cards and the form. */
.cms-map-band { position: relative; width: 100vw; max-width: 100vw; margin: 50px 0 60px calc(50% - 50vw); padding: 0; line-height: 0; }
.cms-map-band iframe.cms-map { width: 100%; height: 480px; border: 0; filter: saturate(.9); }
@media (max-width: 800px) { .cms-map-band { margin: 30px 0 40px calc(50% - 50vw); } .cms-map-band iframe.cms-map { height: 340px; } }
.cms-map-band { width: calc(100vw - var(--cms-sbw, 0px)); max-width: none; margin-left: calc(50% - (100vw - var(--cms-sbw, 0px)) / 2); }

/* Contact page, below the map: the form and the info column as cards like the ones above (section 8f42402). */
.elementor-element-8f42402 > .elementor-container { gap: 24px; align-items: flex-start; }
.elementor-element-8f42402 .elementor-element-e82609b > .elementor-widget-wrap {
    padding: 34px 36px !important; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow);
}
.elementor-element-8f42402 .elementor-element-8740472 > .elementor-widget-wrap { position: sticky; top: 110px; gap: 18px; }
/* the old double-bordered grey box becomes a card */
.elementor-element-8f42402 .elementor-element-da2d63e {
    padding: 28px 26px !important; text-align: left !important; background: var(--ms-green) !important; color: var(--ms-tint);
    border: 0 !important; border-radius: var(--ms-card-radius); box-shadow: 0 10px 28px rgba(var(--ms-green-rgb),.18);
}
.elementor-element-8f42402 .elementor-element-da2d63e * { color: var(--ms-tint) !important; text-align: left !important; }
.elementor-element-8f42402 .elementor-element-da2d63e strong, .elementor-element-8f42402 .elementor-element-da2d63e b { display: block; margin-bottom: 6px; font-size: calc(19px * var(--ms-k-text)); color: #fff !important; }
.elementor-element-8f42402 .elementor-element-da2d63e::before {
    content: ""; display: block; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%;
    background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-4 7 4v13'/%3E%3Cpath d='M9 21v-5h6v5M9 11h.01M15 11h.01'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.elementor-element-8f42402 .elementor-element-3b3e8f1, .elementor-element-8f42402 .elementor-element-7cc0a0e {
    margin: 0 !important; padding: 0 !important; text-align: center;
}
.elementor-element-8f42402 .elementor-element-8740472 > .elementor-widget-wrap > .elementor-element-3b3e8f1 { padding: 22px 20px 4px !important; background: #fff; border: 1px solid var(--ms-line); border-bottom: 0; border-radius: 16px 16px 0 0; }
.elementor-element-8f42402 .elementor-element-8740472 > .elementor-widget-wrap > .elementor-element-7cc0a0e { margin-top: -18px !important; padding: 6px 20px 24px !important; background: #fff; border: 1px solid var(--ms-line); border-top: 0; border-radius: 0 0 16px 16px; }
@media (max-width: 1024px) {
    .elementor-element-8f42402 .elementor-element-8740472 > .elementor-widget-wrap { position: static; }
    .elementor-element-8f42402 .elementor-element-e82609b > .elementor-widget-wrap { padding: 24px 20px !important; }
}
.elementor-element-8f42402 .elementor-element-da2d63e, .elementor-element-8f42402 .elementor-element-3b3e8f1, .elementor-element-8f42402 .elementor-element-7cc0a0e { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
/* (the script next to the band sets its exact width / offset; this is the no-JS fallback) */
.cms-map-band { width: 100%; margin-left: 0; }

/* Contact page "how to find us" cards (admin → Contact page cards). */
.cms-near { margin: 10px 0 0; }
.cms-near-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.cms-near-card { display: block; padding: 30px 26px 26px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); color: inherit !important; text-decoration: none !important; transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease; }
.cms-near-card:hover { transform: translateY(var(--ms-lift)); box-shadow: 0 12px 30px rgba(60, 45, 20, .1); }
.cms-near-ico { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 0 0 18px; border-radius: 50%; background: var(--ms-tint); color: var(--ms-green); }
.cms-near-ico svg { width: 24px; height: 24px; }
.cms-near-card h3 { margin: 0 0 6px; font-size: calc(18px * var(--ms-k-h3)) !important; line-height: calc(1.3 * var(--ms-k-lhh)); color: var(--ms-green); }
.cms-near-card p { margin: 0; font-size: calc(15px * var(--ms-k-text)); line-height: calc(1.7 * var(--ms-k-lh)); color: var(--ms-mut); }
.cms-near-more { display: inline-block; margin-top: 10px; font-size: calc(13px * var(--ms-k-text)); font-weight: 700; color: var(--ms-gold); }
@media (max-width: 767px) { .cms-near-grid { gap: 14px; } }
.cms-near-card h3 { font-family: inherit !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }

/* ------------------------------------------------------------------ guest reviews */
.rv-section { max-width: 1200px; margin: 0 auto; padding: 60px 24px 40px; }
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 30px; margin: 0 0 28px; }
.rv-kicker { display: block; margin-bottom: 6px; font-size: calc(13px * var(--ms-k-text)); font-weight: 700; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.rv-head h2 { margin: 0; font-size: var(--ms-h2); line-height: calc(1.2 * var(--ms-k-lhh)); color: var(--ms-ink); }
.rv-score { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--ms-cream); border-radius: var(--ms-card-radius); }
.rv-score > strong { font-size: calc(34px * var(--ms-k-text)); line-height: 1; color: var(--ms-green); }
.rv-score small { display: block; margin-top: 2px; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut); }
.rv-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 30px; align-items: start; }
.rv-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.rv-stars svg { width: 17px; height: 17px; fill: #e2dccf; }
.rv-stars svg.on { fill: #f4b400; }
.rv-stars svg.half { fill: #f4b400; opacity: .55; }
.rv-list { display: grid; gap: 16px; }
.rv-item { padding: 22px 24px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); }
.rv-item header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rv-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--ms-green); color: #fff; font-weight: 700; font-size: calc(17px * var(--ms-k-text)); }
.rv-who { flex: 1; min-width: 0; }
.rv-who strong { display: block; font-size: calc(16px * var(--ms-k-text)); color: var(--ms-ink); }
.rv-who small { font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut-l); }
.rv-verified { color: #15803d; font-weight: 600; }
.rv-apt { display: inline-block; margin: 0 0 8px; padding: 2px 10px; font-size: calc(12px * var(--ms-k-text)); font-weight: 600; color: var(--ms-green) !important; background: var(--ms-tint); border-radius: 999px; text-decoration: none; }
.rv-item h4 { margin: 0 0 6px; font-size: calc(17px * var(--ms-k-h4)); color: var(--ms-ink); }
.rv-item p { margin: 0; font-size: calc(15px * var(--ms-k-text)); line-height: calc(1.7 * var(--ms-k-lh)); color: var(--ms-text); }
.rv-reply { margin-top: 14px; padding: 12px 16px; background: var(--ms-cream); border-left: 3px solid var(--ms-gold); border-radius: 0 10px 10px 0; }
.rv-reply strong { display: block; margin-bottom: 4px; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-gold-deep); }
.rv-empty { padding: 26px; text-align: center; color: var(--ms-mut); background: var(--ms-cream); border-radius: var(--ms-card-radius); }
.rv-write { position: sticky; top: 110px; padding: 24px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); }
.rv-write h3 { margin: 0 0 14px; font-size: var(--ms-h4); color: var(--ms-green); }
.rv-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv-form .rv-wide { grid-column: 1 / -1; }
.rv-form .cms-field { margin: 0; }
.rv-form .cms-field > span { display: block; margin-bottom: 5px; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; color: var(--ms-ink); }
.rv-form input:not([type=radio]), .rv-form textarea, .rv-form select { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: calc(14px * var(--ms-k-text)); border: 1px solid var(--ms-tint-d); border-radius: 8px; background: #fff; }
.rv-form .cms-btn { width: 100%; padding: 13px; font: inherit; font-weight: 700; color: #fff; background: var(--ms-green); border: 0; border-radius: var(--ms-btn-radius); cursor: pointer; }
.rv-form .cms-btn:hover { background: var(--ms-green-deep); }
.rv-form .cms-msg.is-ok { color: #15803d; font-weight: 600; }
.rv-form .cms-msg.is-no { color: #b91c1c; }
/* star picker: radios in reverse order so ~ selects the lower stars */
.rv-rate-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rv-rate-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-rate-input label { cursor: pointer; }
.rv-rate-input svg { width: 32px; height: 32px; fill: #e2dccf; transition: fill .15s, transform .15s; }
.rv-rate-input label:hover svg, .rv-rate-input label:hover ~ label svg, .rv-rate-input input:checked ~ label svg { fill: #f4b400; }
.rv-rate-input label:hover svg { transform: scale(1.1); }
.rv-rate-input input:focus-visible + label svg { outline: 2px solid var(--ms-green); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 900px) { .rv-cols { grid-template-columns: 1fr; } .rv-write { position: static; } }
@media (max-width: 500px) { .rv-form form { grid-template-columns: 1fr; } }
/* home testimonial slider: stars and city of each guest review */
.rv-slide-stars { display: block; margin: 0 0 10px; font-size: calc(20px * var(--ms-k-text)); letter-spacing: 2px; color: #f4b400; }
.rv-slide-city { display: block; margin-top: 4px; font-size: calc(15px * var(--ms-k-text)); font-weight: 400; opacity: .8; }

/* review source badge (Google / Airbnb / Booking.com / website) */
.rv-src { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 4px 10px 4px 5px; font-size: calc(12px * var(--ms-k-text)); font-weight: 700; line-height: 1; border-radius: 999px; border: 1px solid #e6e1d6; background: #fff; color: var(--ms-ink) !important; text-decoration: none !important; }
.rv-src svg { width: 18px; height: 18px; flex: 0 0 18px; }
a.rv-src:hover { border-color: var(--ms-gold); }
.rv-src--google { color: #3c4043 !important; }
.rv-src--airbnb { color: #e0484d !important; border-color: #ffd6d7; background: #fff6f6; }
.rv-src--booking { color: #003580 !important; border-color: #cfdcf0; background: #f3f7fd; }
.rv-src--tripadvisor { color: #00875a !important; border-color: #c6f2e1; background: #f1fcf7; }
.rv-src--website { color: var(--ms-green) !important; border-color: var(--ms-tint-d); background: var(--ms-tint); }
img.rv-avatar { object-fit: cover; padding: 0; background: #eee; }

/* Home page testimonials: carousel of review cards (no pictures). */
.rv-carousel { max-width: 1200px; margin: 0 auto; padding: 10px 24px 30px; }
.rv-track { display: flex; gap: 22px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 14px; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; box-sizing: border-box; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); }
.rv-card .rv-src { align-self: flex-start; }
.rv-card .rv-stars { margin: 0 0 10px; }
.rv-card .rv-stars svg { width: 17px; height: 17px; }
.rv-card h3 { margin: 0 0 6px; font-size: calc(17px * var(--ms-k-h3)) !important; color: var(--ms-ink); }
.rv-card p { flex: 1; margin: 0 0 16px; font-size: calc(14px * var(--ms-k-text)); line-height: calc(1.7 * var(--ms-k-lh)); color: var(--ms-text); }
.rv-card footer { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ms-line); }
.rv-card footer strong { display: block; font-size: calc(15px * var(--ms-k-text)); color: var(--ms-ink); }
.rv-card footer small { display: block; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut-l); }
.rv-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.rv-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ms-line-d); background: #fff; color: var(--ms-green); font-size: calc(26px * var(--ms-k-text)); line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.rv-nav button:hover { background: var(--ms-green); color: #fff; border-color: var(--ms-green); }
.rv-dots { display: flex; gap: 7px; }
.rv-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--ms-line-d); transition: width .25s, background .25s; }
.rv-dots span.on { width: 24px; border-radius: 6px; background: var(--ms-green); }
.rv-carousel.rv-single .rv-nav { display: none; }
.rv-all { margin: 14px 0 0; text-align: center; }
.rv-all a { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-green) !important; text-decoration: none; border-bottom: 2px solid var(--ms-gold); padding-bottom: 3px; }
@media (max-width: 1000px) { .rv-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 640px) { .rv-card { flex-basis: 88%; } .rv-carousel { padding: 0 16px 24px; } }
/* the carousel sits on the theme's dark band: light dots and link */
.rv-dots span { background: rgba(255, 255, 255, .35); }
.rv-dots span.on { background: var(--ms-gold); }
.rv-all a { color: #fff !important; }
.rv-nav button { border-color: rgba(255, 255, 255, .5); }
/* carousel: the cards slide one at a time (transform), the track only clips */
.rv-track { overflow: hidden !important; padding: 6px 2px 14px; }
/* the row is as wide as the track (not its content), so the cards' percentage widths give 3 / 2 / 1 per view */
.rv-row { position: relative; display: flex; flex: 0 0 100%; min-width: 0; gap: 22px; transition: transform .7s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.rv-dots span { cursor: pointer; }
/* category page: the heading and the description read as one block: a comfortable line length, the design's colours and
   spacing, a short gold rule under the heading (all sizes follow Design & typography) */
.apt-head h1 { margin: 0 0 14px; color: var(--ms-ink); }
.apt-head h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 16px; background: var(--ms-gold); }
.apt-head .apt-desc { max-width: 720px; color: var(--ms-text); font-size: calc(18px * var(--ms-k-text)); line-height: calc(1.75 * var(--ms-k-lh)); }
.apt-head .apt-desc p { margin: 0 0 .85em !important; }
.apt-head .apt-desc p:last-child { margin-bottom: 0 !important; }

/* apartment sidebar: line icons drawn like the theme's (mattress, floor), guest combinations under the guests line */
.apd-ico { flex: 0 0 46px; display: inline-flex; justify-content: center; }
.apd-ico svg { width: 46px; height: 31px; fill: none; stroke: var(--ms-green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.apd-facts li.apd-guests { align-items: flex-start; }
.apd-facts li.apd-guests > img { margin-top: -4px; }
.apd-occupancy { list-style: none; margin: 10px 0 0; padding: 0; }
.apd-occupancy li { display: flex !important; align-items: center; gap: 8px !important; margin: 0 0 6px !important; font-size: calc(14px * var(--ms-k-text)) !important; color: var(--ms-text) !important; }
.apd-occupancy li::before { content: "\2713"; color: var(--ms-green); font-weight: 700; }
/* formatted description (admin editor) */
.apd-desc p { margin: 0 0 18px; }
.apd-desc h2 { margin: 26px 0 10px; font-size: calc(22px * var(--ms-k-h2)); color: var(--ms-ink); }
.apd-desc h3 { margin: 22px 0 8px; font-size: calc(18px * var(--ms-k-h3)); color: var(--ms-ink); }
.apd-desc h1 { margin: 30px 0 12px; font-size: var(--ms-h2); line-height: 1.1; color: var(--ms-ink); }
.apd-desc h4 { margin: 18px 0 8px; font-size: calc(16px * var(--ms-k-h4)); color: var(--ms-ink); }
.apd-desc mark { padding: 0 .18em; color: inherit; background: #fff3c4; border-radius: 3px; }
.apd-desc .rt-sp-0 { margin-bottom: 0; } .apd-desc .rt-sp-s { margin-bottom: 8px; } .apd-desc .rt-sp-l { margin-bottom: 36px; }
.apd-desc ul, .apd-desc ol { margin: 0 0 18px 22px; padding: 0; }
.apd-desc li { margin: 0 0 6px; }
.apd-desc strong, .apd-desc b { color: var(--ms-ink); }
.apd-desc a { color: var(--ms-green); text-decoration: underline; }
.apd-desc blockquote { margin: 0 0 18px; padding: 10px 16px; border-left: 3px solid var(--ms-gold); background: var(--ms-cream); }
/* "Possible Occupancy": title with the people icon, the combinations below it starting at the left edge */
.apd-facts li.apd-guests { display: block !important; }
.apd-guests-head { display: flex; align-items: center; gap: 22px; }
.apd-guests-head strong { font-size: calc(13px * var(--ms-k-text)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-ink); }
.apd-facts li.apd-guests .apd-occupancy { margin: 14px 0 0; padding: 0; }
.apd-facts li.apd-guests .apd-occupancy li { display: flex !important; align-items: center; gap: 12px !important; margin: 0 0 10px !important; padding: 9px 12px; font-size: calc(15px * var(--ms-k-text)) !important; color: var(--ms-ink) !important; background: var(--ms-cream); border-radius: 10px; }
.apd-facts li.apd-guests .apd-occupancy li::before { content: none !important; }
.apd-occupancy svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: var(--ms-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apd-facts li.apd-guests .apd-occupancy { margin-left: 0 !important; padding-left: 0 !important; list-style: none !important; }

/* Apartment page amenities / services: title on top, the list below it in columns (long lists flow into the next column). */
.apd-amenities .page_content_wrapper { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.apd-amenities .singleroom_amenities_wrapper { float: none !important; width: 100% !important; display: block; margin: 0; padding: 0 0 34px; }
.apd-amenities .singleroom_amenities_wrapper + .singleroom_amenities_wrapper { padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .12); }
.apd-amenities .singleroom_amenities_wrapper > br.clear { display: none; }
.apd-amenities .singleroom_amenities_content { width: 100% !important; }
.apd-amenities .singleroom_amenities_label { float: none !important; width: auto !important; display: flex; align-items: center; gap: 14px; margin: 0 0 22px !important; }
.apd-amenities .singleroom_amenities_list_wrapper { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box; }
.apd-amenities .singleroom_amenities_list { width: auto !important; margin: 0 !important; padding: 0 !important; column-count: 3; column-gap: 48px; }
.apd-amenities .singleroom_amenities_list li { break-inside: avoid; page-break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 1000px) { .apd-amenities .singleroom_amenities_list { column-count: 2; } }
@media (max-width: 600px) { .apd-amenities .singleroom_amenities_list { column-count: 1; } }

/* booking form: the other available apartments, folded away behind a toggle; scrollable when open */
.cms-alt { margin: 18px 0 0; border: 1px solid var(--ms-line); border-radius: 12px; background: #fff; overflow: hidden; }
.cms-alt-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 18px; font: inherit; font-weight: 700; font-size: calc(15px * var(--ms-k-text)); text-align: left; color: var(--ms-green); background: var(--ms-tint); border: 0; cursor: pointer; }
.cms-alt-toggle:hover { background: var(--ms-tint); }
.cms-alt-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ms-green); color: #fff; font-size: calc(16px * var(--ms-k-text)); transition: transform .25s; }
.cms-alt.is-open .cms-alt-arrow { transform: rotate(180deg); }
.cms-alt-list { max-height: 560px; overflow-y: auto; padding: 14px; display: grid; gap: 12px; background: var(--ms-cream); }
.cms-alt-list[hidden] { display: none; }
.cms-alt-list .cms-card { margin: 0; }
/* card with the apartment's picture on the left */
.cms-card.cms-card--img { display: grid !important; grid-template-columns: 210px minmax(0, 1fr); padding: 0 !important; overflow: hidden; }
.cms-card-img { position: relative; min-height: 170px; background: #ddd center / cover no-repeat; }
.cms-card-img a { position: absolute; inset: 0; }
.cms-card-body { padding: 16px 18px; }
.cms-card--img .cms-book { margin-top: 6px; }
@media (max-width: 640px) { .cms-card.cms-card--img { grid-template-columns: 1fr; } .cms-card-img { min-height: 160px; } }

/* apartment page: compact reviews block, the form opens in a window */
.rv-compact { padding-top: 46px; padding-bottom: 30px; }
.rv-compact .rv-head { align-items: center; margin-bottom: 22px; }
.rv-sub { margin: 6px 0 0; color: var(--ms-mut); }
.rv-head-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv-add-btn { padding: 13px 24px; font: inherit; font-size: calc(14px * var(--ms-k-text)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ms-green); border: 0; border-radius: var(--ms-btn-radius); cursor: pointer; transition: background .2s; }
.rv-add-btn:hover { background: var(--ms-green-deep); }
.rv-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(var(--ms-ink-rgb),.6); }
.rv-modal[hidden] { display: none; }
.rv-modal-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px 28px 24px; background: #fff; border-radius: var(--ms-card-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.rv-modal-box h3 { margin: 0 0 16px; font-size: calc(24px * var(--ms-k-h3)); color: var(--ms-green); padding-right: 30px; }
.rv-modal-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; font-size: calc(26px * var(--ms-k-text)); line-height: 1; color: var(--ms-text); background: #f3f0ea; border: 0; border-radius: 50%; cursor: pointer; }
.rv-modal-close:hover { background: #e7e1d6; }
/* the site's button colours also reach this toggle: keep the arrow visible on it */
.cms-alt-toggle .cms-alt-arrow { background: #fff !important; color: var(--ms-green) !important; }
.cms-alt-toggle { border-radius: 0 !important; }

/* banner sections are full-width bands (js/site-fullbleed.js sets the exact width) */
.cms-sec--banner, .cms-sec--hero_slider { position: relative; box-sizing: border-box; }
.cms-sec--hero_slider .cms-hero { border-radius: 0; }
.cms-sec--banner .cms-sec__banner { border-radius: 0; }

/* booking form: example texts (placeholders) in a light grey, so an empty field never looks filled */
.cms-guest-form input::placeholder, .cms-guest-form textarea::placeholder,
.cms-avail input::placeholder, .rv-form input::placeholder, .rv-form textarea::placeholder { color: #b3b8b5 !important; opacity: 1; font-weight: 400 !important; }
.cms-guest-form input, .cms-guest-form textarea, .cms-guest-form select { font-weight: 600; color: var(--ms-ink); }

/* checkout: booking reference with its label */
.co-ref-line { margin: 10px 0 0; }
/* checkout: advance now / pay at hotel split, the advance badge pulses to catch the eye */
.co-split { display: grid; gap: 10px; margin: 16px 0 6px; padding: 14px 0 4px; border-top: 1px dashed var(--ms-line); }
.co-split[hidden], .co-split-row[hidden] { display: none; }
.co-split-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.co-split-row strong { font-size: calc(17px * var(--ms-k-text)); white-space: nowrap; }
.co-split-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; line-height: calc(1.2 * var(--ms-k-lh)); border-radius: 999px; }
.co-split-now .co-split-badge { color: #fff; background: #c2410c; }
.co-split-now strong { color: #c2410c; }
.co-split-later .co-split-badge { color: var(--ms-green); background: var(--ms-tint); }
.co-pulse { animation: co-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(194, 65, 12, .55); }
@keyframes co-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(194, 65, 12, .55); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(194, 65, 12, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(194, 65, 12, 0); }
}
@media (prefers-reduced-motion: reduce) { .co-pulse { animation: none; } }

/* ---- "Book your stay" tab on the right edge + slide-out booking form ---- */
.cms-bookdrawer-tab {
    position: fixed; right: 0; top: 50%; z-index: 9990; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 11px; border: 0; border-radius: var(--bk-radius, 10px 0 0 10px); cursor: pointer;
    background: var(--bk-bg, linear-gradient(180deg, var(--ms-green), var(--ms-green-deep))); color: var(--bk-fg, #fff);
    box-shadow: var(--bk-shadow, -4px 6px 22px rgba(0, 0, 0, .22)); overflow: hidden;
    font: 600 12px/1 var(--ms-font-body); letter-spacing: .18em; text-transform: uppercase;
    animation: cms-bd-glow 2.4s ease-in-out infinite;
    transition: right .35s cubic-bezier(.2, .8, .2, 1), padding .25s ease;
}
.cms-bookdrawer-tab span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.cms-bookdrawer-tab svg { color: var(--ms-gold-l); animation: cms-bd-bounce 2.4s ease-in-out infinite; }
/* light sweeping over the tab */
.cms-bookdrawer-tab::after {
    content: ""; position: absolute; left: 0; right: 0; top: -60%; height: 40%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: cms-bd-shine 3s ease-in-out infinite;
}
.cms-bookdrawer-tab:hover, .cms-bookdrawer.is-open .cms-bookdrawer-tab { padding-right: 16px; background: var(--bk-hover, linear-gradient(180deg, var(--ms-gold), var(--ms-gold-deep))); }
.cms-bookdrawer-tab:hover svg, .cms-bookdrawer.is-open .cms-bookdrawer-tab svg { color: #fff; }
.cms-bookdrawer.is-open .cms-bookdrawer-tab { right: min(400px, 92vw); animation: none; }
.cms-bookdrawer-tab:focus-visible { outline: 3px solid var(--ms-gold-l); outline-offset: 2px; }
@keyframes cms-bd-glow {
    0%, 100% { box-shadow: var(--bk-shadow, -4px 6px 22px rgba(0, 0, 0, .22)), 0 0 0 0 rgba(var(--ms-gold-rgb),.55); }
    50% { box-shadow: var(--bk-shadow, -4px 6px 22px rgba(0, 0, 0, .22)), 0 0 0 9px rgba(var(--ms-gold-rgb),0); }
}
@keyframes cms-bd-shine { 0%, 55% { top: -60%; } 100% { top: 130%; } }
@keyframes cms-bd-bounce { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-4px); } 90% { transform: translateY(1px); } }

.cms-bookdrawer-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 9991; width: min(400px, 92vw);
    display: flex; flex-direction: column; background: #fff; box-shadow: -10px 0 40px rgba(0, 0, 0, .18);
    transform: translateX(105%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
}
.cms-bookdrawer.is-open .cms-bookdrawer-panel { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cms-bookdrawer-head {
    display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 18px;
    background: linear-gradient(135deg, var(--ms-green), var(--ms-green-deep)); color: #fff;
}
.cms-bookdrawer-head h3 { margin: 0 0 6px; color: #fff; font-size: calc(20px * var(--ms-k-h3)); letter-spacing: .12em; text-transform: uppercase; }
.cms-bookdrawer-head p { margin: 0; color: rgba(255, 255, 255, .82); font-size: calc(13.5px * var(--ms-k-text)); line-height: calc(1.5 * var(--ms-k-lh)); }
.cms-bookdrawer-close {
    flex: 0 0 auto; width: 34px; height: 34px; margin-left: auto; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
    background: transparent; color: #fff; font-size: calc(22px * var(--ms-k-text)); line-height: 1; cursor: pointer;
}
.cms-bookdrawer-close:hover { background: rgba(255, 255, 255, .15); }
.cms-bookdrawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; }
.cms-bookdrawer-body .cms-form { margin: 0; padding: 0; box-shadow: none; background: none; }
.cms-bookdrawer-nights {
    display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px;
    background: var(--ms-cream); color: var(--ms-gold-deep); font-size: calc(13px * var(--ms-k-text)); font-weight: 600;
}
.cms-bookdrawer-nights[hidden] { display: none; }
.cms-bookdrawer-perks { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ms-line); }
.cms-bookdrawer-perks li { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 9px; font-size: calc(13.5px * var(--ms-k-text)); line-height: calc(1.45 * var(--ms-k-lh)); color: #374151; }
.cms-bookdrawer-perks svg { flex: 0 0 auto; margin-top: 2px; color: var(--ms-green); }
.cms-bookdrawer-help {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px 14px;
    border: 1px solid #25d366; border-radius: 8px; color: #128c4b !important; font-weight: 600; font-size: calc(14px * var(--ms-k-text)); text-decoration: none !important;
}
.cms-bookdrawer-help:hover { background: #effcf3; }
.cms-bookdrawer-backdrop { position: fixed; inset: 0; z-index: 9989; background: rgba(15, 23, 42, .25); }
.cms-bookdrawer-backdrop[hidden] { display: none; }
/* Phones: a pill at the bottom centre instead of the strip on the right edge, which covered the end of the lines of the
   texts (most of all the centred ones). The same colours, glow and light sweep; it opens the same form. */
@media (max-width: 767px) {
    .cms-bookdrawer-tab {
        top: auto; right: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(50%);
        flex-direction: row; gap: 9px; padding: 13px 22px; border-radius: 999px; font-size: calc(11.5px * var(--ms-k-text));
        box-shadow: 0 10px 26px rgba(0, 0, 0, .28); transition: opacity .25s ease, background .25s ease;
    }
    .cms-bookdrawer-tab span { writing-mode: horizontal-tb; transform: none; }
    .cms-bookdrawer-tab svg { width: 16px; height: 16px; }
    .cms-bookdrawer-tab::after { top: 0; bottom: 0; left: -60%; right: auto; width: 40%; height: auto; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation-name: cms-bd-shine-x; }
    .cms-bookdrawer-tab:hover, .cms-bookdrawer.is-open .cms-bookdrawer-tab { padding-right: 22px; }
    .cms-bookdrawer.is-open .cms-bookdrawer-tab { right: 50%; opacity: 0; pointer-events: none; }
    /* the end of the page (copyright line) can scroll clear of the pill */
    body:has(.cms-bookdrawer-tab) .footer_bar { padding-bottom: 72px !important; }
}
@keyframes cms-bd-shine-x { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
    .cms-bookdrawer-tab, .cms-bookdrawer-tab svg, .cms-bookdrawer-tab::after { animation: none; }
}

/* Home slider on phones: the theme made it 900px tall, which stretched the landscape photos to
   twice their size (blurry). One screen high instead. */
@media (max-width: 767px) {
    body .elementor-widget-hoteller-slider-zoom .slider_zoom_wrapper { height: 100vh !important; height: 100svh !important; min-height: 480px; max-height: 720px; }
}
/* Apartment tiles on phones: the theme made them 80% of the screen height (a big empty middle); a bit
   taller than wide is enough for the title at the top and the button at the bottom. */
@media (max-width: 767px) {
    body .distortion_grid_item { height: clamp(300px, 105vw, 440px) !important; }
}

/* One standard space above and below every section (site-spacing.js trims the theme's larger gaps to it) */
:root { --cms-sec-space: 70px; }
@media (max-width: 1024px) { :root { --cms-sec-space: 50px; } }
@media (max-width: 767px) { :root { --cms-sec-space: 36px; } }
/* two content sections in a row share one space instead of doubling it */
.cms-sec:not(.cms-sec--banner):not(.cms-sec--hero_slider) + .cms-sec:not(.cms-sec--banner):not(.cms-sec--hero_slider) { padding-top: 0; }
/* ...but after a block with its own coloured band and no outer space (the founder block), the next section keeps its
   space, so its title does not sit on the band's edge (About us: Our Journey) */
.cms-sec.cms-sec--founder_block:not(.cms-sec--banner) + .cms-sec:not(.cms-sec--banner):not(.cms-sec--hero_slider) { padding-top: var(--cms-sec-space); }
/* ------------------------------------------------------------------ Café page (admin → Pages → Add section: Café …) */
.cms-cafe-kicker { display: block; margin-bottom: 10px; font-size: calc(12px * var(--ms-k-text)); font-weight: 600; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
/* hero: picture with heading and two buttons (room at the top for the site's header over it), and a white
   bar over its lower edge with three facts and a button */
.cms-sec.cms-sec--cafe_hero { padding: 0 0 var(--cms-sec-space); background: #fff; }
.cms-cafe-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(86vh, 700px); padding: 190px 20px 120px; box-sizing: border-box; text-align: center; color: #fff; background-size: cover; background-position: center; }
.cms-cafe-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.12) 35%, rgba(0,0,0,.45)); }
.cms-cafe-hero__txt { position: relative; max-width: 780px; }
.cms-cafe-hero__kicker { display: block; margin-bottom: 12px; font-size: calc(13px * var(--ms-k-text)); font-weight: 600; letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold-l); }
.cms-cafe-hero h1 { margin: 0 0 14px; font-size: calc(clamp(38px, 6vw, 68px) * var(--ms-k-h1)); line-height: 1.05; color: #fff !important; }
.cms-cafe-hero p { margin: 0 auto 28px; max-width: 640px; font-size: calc(18px * var(--ms-k-text)); line-height: calc(1.6 * var(--ms-k-lh)); color: rgba(255,255,255,.92); }
.cms-cafe-hero__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cms-cafe-hero__acts .cms-sec__btn { min-width: 180px; text-align: center; }
.cms-cafe-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1140px; margin: -54px auto 0; background: #fff; border-radius: 6px; box-shadow: 0 18px 40px rgba(var(--ms-ink-rgb),.14); }
.cms-cafe-facts__item { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 24px 26px; color: var(--ms-ink) !important; text-decoration: none !important; }
.cms-cafe-facts__item + .cms-cafe-facts__item { border-left: 1px solid var(--ms-line); }
.cms-cafe-facts__ic svg { display: block; width: 30px; height: 30px; color: var(--ms-gold); }
.cms-cafe-facts small { display: block; font-size: calc(11px * var(--ms-k-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--ms-mut-l); }
.cms-cafe-facts b { display: block; font-size: calc(15px * var(--ms-k-text)); font-weight: 500; line-height: calc(1.35 * var(--ms-k-lh)); }
.cms-cafe-facts__cta { justify-content: center; }
.cms-cafe-facts__cta .cms-sec__btn { display: block; width: 100%; padding: 15px 16px; text-align: center; box-sizing: border-box; }
/* the attic story: two pictures beside the text */
.cms-cafe-story { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.cms-cafe-story__pics { position: relative; height: 470px; }
.cms-cafe-story__pics img { position: absolute; display: block; object-fit: cover; border-radius: 4px; }
.cms-cafe-story__pics .is-big { left: 0; top: 0; width: 78%; height: 380px; }
.cms-cafe-story__pics .is-small { right: 0; bottom: 0; width: 46%; height: 250px; border: 8px solid #fff; box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.cms-cafe-story .cms-sec__title { font-size: calc(clamp(30px, 3.4vw, 44px) * var(--ms-k-h2)); line-height: 1.12; }
.cms-cafe-story .cms-sec__text { margin: 0 0 22px; max-width: none; line-height: calc(1.75 * var(--ms-k-lh)); color: var(--ms-mut); }
.cms-cafe-story__pts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; }
.cms-cafe-story__pts li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: calc(15px * var(--ms-k-text)); }
.cms-cafe-story__pts li::before { display: none !important; }
.cms-cafe-story__pts svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--ms-green); }
/* attic event packages: cream band, package list + pictures and details (the site's green and gold) */
.cms-sec.cms-sec--cafe_events { padding-top: var(--cms-sec-space) !important; background: var(--ms-cream); }
.cms-cfe { max-width: 1240px; }
.cms-cfe__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.cms-cfe__head .cms-sec__title { margin: 0; font-size: calc(clamp(32px, 4vw, 48px) * var(--ms-k-h2)); line-height: 1.1; }
.cms-cfe__head p { max-width: 420px; margin: 0; line-height: calc(1.6 * var(--ms-k-lh)); color: var(--ms-mut); }
.cfe-pick { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.cfe-tabs { display: flex; flex-direction: column; gap: 10px; }
.cfe-tab { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 14px 16px; text-align: left; font: inherit; color: var(--ms-ink); background: #fff; border: 1px solid var(--ms-line); border-radius: 6px; cursor: pointer; transition: background var(--ms-speed) ease, border-color var(--ms-speed) ease, color var(--ms-speed); }
.cfe-tab:hover { border-color: var(--ms-gold); }
.cfe-tab img { flex: 0 0 auto; width: 58px; height: 48px; object-fit: cover; border-radius: 4px; }
.cfe-tab b { display: block; font-size: calc(18px * var(--ms-k-text)); font-weight: 500; line-height: calc(1.2 * var(--ms-k-lh)); }
.cfe-tab small { font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut-l); }
.cfe-tab-arrow { flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; }
.cfe-tab.is-on { color: #fff; background: var(--ms-green); border-color: var(--ms-green); }
.cfe-tab.is-on small { color: rgba(255,255,255,.75); }
.cfe-panel { overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(var(--ms-ink-rgb),.08); }
.cfe-panel[hidden] { display: none; }
.cfe-gal { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--ms-line); }
.cfe-gal-track img, .cfe-gal-empty { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.cfe-gal-track img.is-on { opacity: 1; }
.cfe-gal-tags { position: absolute; left: 18px; top: 18px; display: flex; gap: 8px; }
.cfe-save { padding: 5px 10px; font-size: calc(11px * var(--ms-k-text)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ms-gold); border-radius: 3px; }
.cfe-gal-cap { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; font-size: calc(13px * var(--ms-k-text)); color: #fff; background: rgba(var(--ms-green-rgb),.88); border-radius: 4px; }
.cfe-gal-nav { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0; padding: 0; background: rgba(255,255,255,.92); border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.cfe-gal-nav.is-prev { left: 14px; } .cfe-gal-nav.is-next { right: 14px; }
.cfe-gal-nav svg { width: 20px; height: 20px; fill: none; stroke: var(--ms-green); stroke-width: 2.2; }
.cfe-gal-dots { position: absolute; right: 18px; bottom: 22px; display: flex; gap: 6px; }
.cfe-gal-dots button { width: 8px; height: 8px; margin: 0; padding: 0; background: rgba(255,255,255,.7); border: 0; border-radius: 6px; cursor: pointer; transition: width .2s; }
.cfe-gal-dots button.is-on { width: 22px; background: var(--ms-gold); }
.cfe-body { padding: 30px 32px; }
.cfe-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.cfe-body h3 { margin: 0; font-size: calc(32px * var(--ms-k-h3)); line-height: 1.1; color: var(--ms-ink) !important; }
.cfe-price { margin-top: 6px; font-size: calc(26px * var(--ms-k-text)); font-weight: 600; color: var(--ms-green); }
.cfe-price s { margin-left: 8px; font-size: .66em; font-weight: 400; color: var(--ms-mut-l); }
.cms-sec__btn.cfe-book { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.cfe-book svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cfe-list { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 34px; }
.cfe-list li { display: flex; gap: 10px; margin: 0; padding: 8px 0; font-size: calc(15px * var(--ms-k-text)); line-height: calc(1.45 * var(--ms-k-lh)); color: #3d4744; border-bottom: 1px dashed var(--ms-line); break-inside: avoid; }
.cfe-list li::before { display: none !important; }
.cfe-list svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--ms-green); stroke-width: 2.2; }
.cfe-note { margin: 16px 0 0; font-size: calc(13.5px * var(--ms-k-text)); color: var(--ms-gold-deep); }
/* booking window */
html.cfe-lock, html.cfe-lock body { overflow: hidden; }
.cfe-modal { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow-y: auto; background: rgba(10,10,9,.72); }
.cfe-modal[hidden] { display: none; }
.cfe-modal-box { width: 100%; max-width: 840px; margin: auto 0; overflow: hidden; color: var(--ms-ink); background: #fff; border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.cfe-modal-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px; color: #fff; background: var(--ms-green); }
.cfe-modal-head img { flex: 0 0 auto; width: 72px; height: 56px; object-fit: cover; border-radius: 4px; }
.cfe-modal-head small { display: block; font-size: calc(12px * var(--ms-k-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--ms-gold-l); }
.cfe-modal-head h3 { margin: 2px 0 0; font-size: calc(22px * var(--ms-k-h3)); line-height: calc(1.2 * var(--ms-k-lhh)); color: #fff !important; }
.cfe-close { flex: 0 0 auto; width: 38px; height: 38px; margin-left: auto; padding: 0; font-size: calc(26px * var(--ms-k-text)); line-height: 1; color: #fff; background: rgba(255,255,255,.1); border: 0; border-radius: 50%; cursor: pointer; }
.cfe-close:hover { background: rgba(255,255,255,.2); }
.cfe-form { padding: 22px 26px 26px; }
.cfe-form[hidden] { display: none; }
.cfe-h { margin: 6px 0 12px; font-size: calc(12px * var(--ms-k-text)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-gold); }
.cfe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin-bottom: 16px; }
.cfe-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfe-f { display: block; min-width: 0; margin: 0; }
.cfe-f > span:first-child { display: block; margin-bottom: 6px; font-size: calc(12.5px * var(--ms-k-text)); font-weight: 600; color: var(--ms-mut); }
.cfe-f input, .cfe-f select, .cfe-f textarea { display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px; box-sizing: border-box; font: inherit; font-size: calc(15px * var(--ms-k-text)); color: var(--ms-ink); background: #fff; border: 1px solid #d9d4c9; border-radius: 5px; }
.cfe-f textarea { height: auto; min-height: 44px; padding: 10px 12px; resize: vertical; }
.cfe-f select { padding-right: 36px; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6461' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; cursor: pointer; }
.cfe-f select:disabled { color: #9aa09c; background: #f6f4ef; }
.cfe-f input:focus, .cfe-f select:focus, .cfe-f textarea:focus { outline: none; border-color: var(--ms-green); box-shadow: 0 0 0 3px rgba(var(--ms-green-rgb),.12); }
.cfe-f.is-bad input, .cfe-f.is-bad select, .cfe-f.is-bad textarea { border-color: #c0392b; }
.cfe-ferr { display: block; margin-top: 5px; font-size: calc(12px * var(--ms-k-text)); color: #c0392b; }
.cfe-slot-msg { margin: -6px 0 14px; font-size: calc(13px * var(--ms-k-text)); color: #c0392b; }
.cfe-extras { display: grid; gap: 10px; margin-bottom: 18px; }
.cfe-x { padding: 14px 16px; background: #fff; border: 1px solid #e7e1d6; border-radius: 8px; }
.cfe-x.is-in { background: #f6faf8; border-color: var(--ms-tint-d); }
.cfe-x.is-out.is-on { background: var(--ms-cream); border-color: var(--ms-gold); }
.cfe-x.is-bad { border-color: #c0392b; }
.cfe-x-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
label.cfe-x-top { cursor: pointer; }
.cfe-x-top input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--ms-green); }
.cfe-x-name { font-size: calc(15px * var(--ms-k-text)); font-weight: 600; }
.cfe-tag { margin-left: auto; padding: 4px 10px; font-size: calc(11.5px * var(--ms-k-text)); font-weight: 600; border-radius: 20px; }
.cfe-tag.is-in { color: #fff; background: var(--ms-green); }
.cfe-tag.is-out { color: var(--ms-gold-deep); background: var(--ms-cream); }
.cfe-x-help { margin: 6px 0 0; font-size: calc(12.5px * var(--ms-k-text)); color: var(--ms-mut-l); }
.cfe-x-fields { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 12px; }
.cfe-x.is-on .cfe-x-fields { display: grid; }
.cfe-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cfe-seg label { position: relative; margin: 0; cursor: pointer; }
.cfe-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cfe-seg span { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; font-size: calc(14px * var(--ms-k-text)); border: 1px solid #d9d4c9; border-radius: 5px; }
.cfe-seg input:checked + span { color: #fff; background: var(--ms-green); border-color: var(--ms-green); }
.cfe-seg input:focus-visible + span { outline: 2px solid var(--ms-green); outline-offset: 2px; }
.cfe-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 6px 0 14px; background: var(--ms-cream); border: 1px dashed var(--ms-line-d); border-radius: 8px; }
.cfe-sum div { min-width: 0; padding: 12px 14px; }
.cfe-sum div + div { border-left: 1px dashed var(--ms-line-d); }
.cfe-sum small { display: block; font-size: calc(10.5px * var(--ms-k-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--ms-mut-l); }
.cfe-sum b { display: block; font-size: calc(17px * var(--ms-k-text)); font-weight: 600; color: var(--ms-ink); white-space: nowrap; }
.cfe-sum .is-total b { font-size: calc(19px * var(--ms-k-text)); color: var(--ms-green); }
.cfe-err { margin: 0 0 12px; font-size: calc(14px * var(--ms-k-text)); color: #c0392b; }
.cfe-send { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; font: inherit; font-size: calc(14px * var(--ms-k-text)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff !important; background: #25d366; border: 0; border-radius: 5px; cursor: pointer; text-decoration: none !important; box-sizing: border-box; }
.cfe-send:hover { background: #1ebe5a; }
.cfe-send:disabled { opacity: .7; cursor: wait; }
.cfe-send svg { width: 20px; height: 20px; fill: currentColor; }
.cfe-hint { margin: 10px 0 0; font-size: calc(12.5px * var(--ms-k-text)); text-align: center; color: var(--ms-mut-l); }
.cfe-done { padding: 44px 30px; text-align: center; }
.cfe-done[hidden] { display: none; }
.cfe-done-ic svg { width: 56px; height: 56px; fill: none; stroke: #25d366; stroke-width: 2.4; }
.cfe-done p { margin: 12px auto 22px; max-width: 460px; font-size: calc(16px * var(--ms-k-text)); line-height: calc(1.6 * var(--ms-k-lh)); }
.cfe-done .cfe-send { max-width: 320px; margin: 0 auto; }
/* menu: picture header, category links, three columns */
.cms-sec.cms-sec--cafe_menu { padding-top: var(--cms-sec-space) !important; background: #fff; }
.cms-cmenu__head { position: relative; display: flex; align-items: center; height: 230px; padding: 0 48px; overflow: hidden; color: #fff; background-size: cover; background-position: center 40%; border-radius: 8px; }
.cms-cmenu__head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,6,.85), rgba(20,12,6,.1)); }
.cms-cmenu__head > div { position: relative; }
.cms-cmenu__head .cms-cafe-kicker { color: var(--ms-gold-l); }
.cms-cmenu__head h2 { margin: 0 0 6px; font-size: calc(clamp(30px, 4vw, 50px) * var(--ms-k-h2)); line-height: 1.1; color: #fff !important; }
.cms-cmenu__head p { margin: 0; font-size: calc(14px * var(--ms-k-text)); color: rgba(255,255,255,.85); }
/* the Menu / Deals switch on the picture (design MD2) */
.cms-cmenu__head:has(.cms-cmenu__switch) { flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.cms-cmenu__switch { display: flex; gap: 4px; padding: 5px; background: #fff; border-radius: 999px; box-shadow: 0 6px 20px rgba(20,12,6,.25); }
.cms-cmenu__switch button { min-width: 104px; min-height: 44px; margin: 0; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--ms-green); font: inherit; font-size: calc(15px * var(--ms-k-text)); font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; transition: background .2s, color .2s; }
.cms-cmenu__switch button:hover, .cms-cmenu__switch button:focus { background: transparent; color: var(--ms-green); }
.cms-cmenu__switch button.on, .cms-cmenu__switch button.on:hover, .cms-cmenu__switch button.on:focus { background: var(--ms-green); color: #fff; }
.cms-menu-panel[hidden] { display: none; }
/* a deal: its name and price, then what comes in it */
.cms-menu-deal h3 { flex: 0 1 auto; margin: 0; }
.cms-menu-deal ul { margin-top: 6px; }
.cms-menu-deal li { padding: 2px 0; font-size: calc(15px * var(--ms-k-text)); line-height: 1.4; color: var(--ms-ink); }
/* the category or deal just chosen above the list */
.cms-menu-nav a.on { color: #fff !important; background: var(--ms-green); border-color: var(--ms-green); }
.cms-menu-cat.is-picked { border-radius: 10px; animation: cms-menu-picked 2.6s ease-out; }
@keyframes cms-menu-picked {
  0%, 55% { background: rgba(184, 147, 90, .2); box-shadow: 0 0 0 12px rgba(184, 147, 90, .2); }
  100% { background: transparent; box-shadow: 0 0 0 12px rgba(184, 147, 90, 0); }
}
@media (max-width: 767px) {
  .cms-cmenu__head:has(.cms-cmenu__switch) { height: auto; min-height: 230px; padding: 28px 24px; align-content: center; }
  .cms-cmenu__switch { width: 100%; }
  .cms-cmenu__switch button { flex: 1; min-width: 0; }
}
.cms-cmenu .cms-menu-nav { margin: 26px auto 34px; background: rgba(255,255,255,.94); }
.cms-menu-cols { columns: 3; column-gap: 44px; }
.cms-menu-cat { margin: 0 0 30px; break-inside: avoid; scroll-margin-top: 170px; }
.cms-menu-cat h3 { margin: 0 0 6px; font-size: calc(21px * var(--ms-k-h3)); line-height: calc(1.2 * var(--ms-k-lhh)); color: var(--ms-green); }
.cms-menu-catnote { margin: 0 0 6px; font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut-l); }
.cms-menu-cat ul { margin: 0; padding: 0; list-style: none; }
.cms-menu-cat li { margin: 0; padding: 7px 0; }
.cms-menu-cat li::before { display: none !important; }
@media (max-width: 1024px) {
  .cms-cafe-hero { padding-top: 160px; }
  .cms-cafe-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -54px 20px 0; }
  .cms-cafe-facts__item:nth-child(3) { border-left: 0; }
  .cms-cafe-facts__item:nth-child(n+3) { border-top: 1px solid var(--ms-line); }
  .cms-cafe-story { gap: 40px; }
  .cms-menu-cols { columns: 2; }
}
@media (max-width: 900px) {
  .cfe-pick { grid-template-columns: 1fr; gap: 16px; }
  .cfe-tabs { flex-direction: row; gap: 10px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .cfe-tab { flex: 0 0 auto; width: auto; min-width: 210px; scroll-snap-align: start; }
  .cfe-tab-arrow { display: none; }
  .cms-cfe__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cms-cafe-story { grid-template-columns: 1fr; }
  .cms-cafe-story__pics { height: 360px; }
  .cms-cafe-story__pics .is-big { height: 290px; }
  .cms-cafe-story__pics .is-small { height: 190px; }
}
@media (max-width: 640px) {
  .cms-cafe-hero { min-height: 560px; padding: 140px 18px 90px; }
  .cms-cafe-hero p { font-size: calc(16px * var(--ms-k-text)); }
  .cms-cafe-facts { margin: -44px 16px 0; }
  .cms-cafe-facts__item { gap: 10px; padding: 16px 14px; }
  .cms-cafe-facts__ic svg { width: 24px; height: 24px; }
  .cms-cafe-facts b { font-size: calc(13.5px * var(--ms-k-text)); }
  .cms-cafe-facts__cta { padding: 12px 10px; }
  .cms-cafe-facts__cta .cms-sec__btn { padding: 13px 6px; font-size: calc(12px * var(--ms-k-text)); letter-spacing: .04em; }
  .cms-cafe-story__pts { grid-template-columns: 1fr; }
  .cfe-gal { aspect-ratio: 4 / 3; }
  .cfe-body { padding: 22px 18px; }
  .cfe-body h3 { font-size: calc(26px * var(--ms-k-h3)); }
  .cfe-price { font-size: calc(24px * var(--ms-k-text)); }
  .cfe-row .cfe-book { width: 100%; justify-content: center; }
  .cfe-list { columns: 1; }
  .cfe-modal { padding: 0; }
  .cfe-modal-box { min-height: 100%; border-radius: 0; }
  .cfe-modal-head { position: sticky; top: 0; z-index: 2; padding: 14px 16px; }
  .cfe-modal-head img { width: 56px; height: 44px; }
  .cfe-modal-head h3 { font-size: calc(18px * var(--ms-k-h3)); }
  .cfe-form { padding: 18px 16px 24px; }
  .cfe-grid, .cfe-grid-2, .cfe-x-fields { grid-template-columns: 1fr; }
  .cfe-tag { margin-left: 28px; }
  .cfe-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfe-sum div + div { border-left: 0; }
  .cfe-sum div:nth-child(n+2) { border-top: 1px dashed var(--ms-line-d); }
  .cfe-sum div:nth-child(even) { border-left: 1px dashed var(--ms-line-d); }
  .cfe-sum .is-total { grid-column: 1 / -1; order: 5; border-left: 0 !important; }
  .cms-cmenu__head { height: 190px; padding: 0 24px; }
  .cms-menu-cols { columns: 1; }
}

/* ------------------------------------------------------------------ formatted texts written in the admin's editor (App\Services\RichText)
   Fonts are never chosen by a text: headings use the design's heading font and sizes, paragraphs the site font. */
.rt { white-space: normal; }
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt p { margin: 0 0 1em !important; padding: 0 !important; } /* the theme pads every paragraph */
.rt h1, .rt h2, .rt h3, .rt h4 { margin: 1.2em 0 .45em; padding: 0; font-family: var(--ms-font-head, inherit); font-weight: var(--ms-w-head, 400); line-height: var(--ms-lh-head, 1.1); letter-spacing: var(--ms-ls-head, 0); text-transform: var(--ms-tt-head, none); color: var(--ms-ink, var(--ms-ink)); }
.rt h1 { font-size: var(--ms-h1); } .rt h2 { font-size: var(--ms-h2); } .rt h3 { font-size: var(--ms-h3); } .rt h4 { font-size: var(--ms-h4); }
.rt ul, .rt ol { margin: 0 0 1em 1.3em; padding: 0; }
.rt li { margin: 0 0 .4em; padding: 0; }
.rt blockquote { margin: 0 0 1em; padding: 10px 18px; border-left: 3px solid var(--ms-gold, var(--ms-gold)); background: var(--ms-cream, var(--ms-cream)); border-radius: 0 var(--ms-card-radius, 12px) var(--ms-card-radius, 12px) 0; }
.rt a { color: var(--ms-green, var(--ms-green)); text-decoration: underline; text-underline-offset: 3px; }
.rt a:hover { color: var(--ms-gold, var(--ms-gold)); }
.rt hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--ms-line, var(--ms-line)); }
mark, .rt mark { padding: 0 .18em; color: inherit; background: #fff3c4; border-radius: 3px; }
.rt-sp-0 { margin-bottom: 0 !important; } .rt-sp-s { margin-bottom: .5em !important; } .rt-sp-l { margin-bottom: 1.8em !important; }
.rt .rt-sp-0 { margin-bottom: 0 !important; } .rt .rt-sp-s { margin-bottom: .5em !important; } .rt .rt-sp-l { margin-bottom: 1.8em !important; }
/* a heading with coloured words keeps the heading's own look; the words only change colour */
h1 span[style*="color"], h2 span[style*="color"], h3 span[style*="color"], h4 span[style*="color"] { font: inherit; letter-spacing: inherit; }

/* ------------------------------------------------------------------ one button for the whole site
   Shape, type and states of every filled button come from admin → Design & typography → Buttons (the --ms-btn-* variables). */
.cms-sec__btn, a.cms-grid-all, .cms-btn, .pkg-btn, .apt-btn, .rvp-write, .rv-add-btn, .rvp-showmore, .co-btn {
    font-family: var(--ms-font-body); font-size: calc(13px * var(--ms-k-text)); font-weight: var(--ms-btn-w); line-height: calc(1.2 * var(--ms-k-lh)); letter-spacing: var(--ms-btn-ls); text-transform: var(--ms-btn-tt);
    padding: var(--ms-btn-pad); border-radius: var(--ms-btn-radius); text-decoration: none; cursor: pointer;
    transition: background-color var(--ms-speed) ease, border-color var(--ms-speed) ease, color var(--ms-speed) ease, transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease;
}
.cms-sec__btn:hover, a.cms-grid-all:hover, .cms-btn:hover, .pkg-btn:hover, .apt-btn:hover, .rvp-write:hover, .rv-add-btn:hover, .co-btn:hover { transform: translateY(var(--ms-btn-lift)); }
.cms-sec__btn:active, a.cms-grid-all:active, .cms-btn:active, .pkg-btn:active, .apt-btn:active, .rvp-write:active, .rv-add-btn:active, .co-btn:active { transform: translateY(0); }
.cms-sec__btn:focus-visible, a.cms-grid-all:focus-visible, .cms-btn:focus-visible, .pkg-btn:focus-visible, .apt-btn:focus-visible, .rvp-write:focus-visible, .rv-add-btn:focus-visible, .rvp-showmore:focus-visible, .co-btn:focus-visible { outline: 2px solid var(--ms-gold); outline-offset: 3px; }
.cms-sec__btn[disabled], .cms-btn[disabled], .pkg-btn[disabled], .apt-btn[disabled], .co-btn[disabled], .rvp-write[disabled], .rv-add-btn[disabled], .cms-sec__btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.cms-sec__btn.is-loading, .cms-btn.is-loading, .co-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.cms-sec__btn.is-loading::after, .cms-btn.is-loading::after, .co-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--ms-btn-fg, #fff); border-right-color: transparent; border-radius: 50%; animation: ms-spin .7s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cms-sec__btn.is-loading::after, .cms-btn.is-loading::after, .co-btn.is-loading::after { animation-duration: 1.6s; } }

/* ---- The theme's own text follows Design & typography ---------------------------------------------------------------------
   The theme's body text and links take the "Text of the theme's own parts" colour, and the text size and line height of the
   design. At the default settings they are the original look. */
html body { color: var(--ms-theme-text); font-size: calc(16px * var(--ms-k-text)); line-height: calc(1.8 * var(--ms-k-lh)); }
a { color: var(--ms-theme-text); }

/* ---- Category page hero (apartments/category/…): the category's picture full width with a dark fade, the crumbs, the
   name, a facts line (apartments, starting price), Book now and the sub category chips; the description reads below.
   Everything follows Design & typography. */
.cat-hero { position: relative; display: flex; align-items: flex-end; min-height: min(72vh, 720px); color: #fff; background: #222 center / cover no-repeat; overflow: hidden; }
.cat-hero::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(var(--ms-shade-rgb), .86), rgba(var(--ms-shade-rgb), .18) 62%); }
.cat-hero .cms-tile-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.cat-hero-in { position: relative; z-index: 3; box-sizing: border-box; width: 100%; max-width: 1400px; margin: 0 auto; padding: 150px 24px 46px; }
.cat-hero .apt-crumbs { margin: 0 0 14px; font-size: calc(13px * var(--ms-k-text)); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.cat-hero .apt-crumbs a { color: var(--ms-gold-l); text-decoration: none; }
.cat-hero h1 { margin: 0 0 26px; color: #fff; font-size: calc(clamp(38px, 4.6vw, 60px) * var(--ms-k-h1)); line-height: 1.05; }
.cat-hero .apt-btn { display: inline-block; }
.cat-hero .apt-chips { margin-top: 22px; }
.cat-hero .apt-chips a { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(1, 25, 22, .38); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cat-hero .apt-chips a small { background: rgba(255, 255, 255, .18); }
.cat-hero .apt-chips a.on { background: var(--ms-gold); border-color: var(--ms-gold); }
.cat-hero + .apt { padding-top: 40px !important; }
.cat-hero + .apt .apt-head { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 800px) {
    .cat-hero { min-height: 440px; }
    .cat-hero-in { padding: 100px 20px 28px; }
    .cat-hero h1 { font-size: calc(34px * var(--ms-k-h1)); }
    .cat-hero + .apt { padding-top: 28px !important; }
}

/* ---- Category page intro (under the hero): the facts in a narrow column beside the description, whose first paragraph
   reads as a lead; a gold rule above the text. On phones the facts sit in a row above the text. */
.apt-intro { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 40px 72px; align-items: start; margin-bottom: 44px; padding: 8px 0 40px; border-bottom: 1px solid var(--ms-line); }
.apt-intro-kicker { display: block; margin: 0 0 22px; font-size: calc(12.5px * var(--ms-k-text)); letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.apt-intro-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.apt-intro-facts li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--ms-cream); border: 1px solid var(--ms-line); border-radius: var(--ms-card-radius); transition: transform var(--ms-speed) ease, box-shadow var(--ms-speed) ease; }
.apt-intro-facts li:hover { transform: translateY(var(--ms-lift)); box-shadow: var(--ms-card-shadow); }
.apt-intro-facts i { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ms-green); }
.apt-intro-facts svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.apt-intro-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apt-intro-facts b { font: var(--ms-w-head) calc(26px * var(--ms-k-h3))/1.05 var(--ms-font-head); letter-spacing: var(--ms-ls-head); color: var(--ms-ink); }
.apt-intro-facts small { font-size: calc(12px * var(--ms-k-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-mut); }
.apt-intro .apt-desc { position: relative; max-width: 760px; margin: 0; padding-top: 26px; }
.apt-intro .apt-desc::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: var(--ms-gold); }
.apt-intro .apt-desc > p:first-child { font-size: calc(21px * var(--ms-k-text)); line-height: calc(1.6 * var(--ms-k-lh)); color: var(--ms-ink); }
.apt-intro .apt-desc > p:first-child:not(:only-child) { margin-bottom: 1em !important; }
@media (max-width: 900px) {
    .apt-intro { grid-template-columns: 1fr; gap: 26px; margin-bottom: 30px; padding: 8px 20px 28px; }
    .apt-intro-kicker { margin-bottom: 14px; }
    .apt-intro-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .apt-intro-facts li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
    .apt-intro-facts i { flex-basis: 38px; width: 38px; height: 38px; }
    .apt-intro-facts svg { width: 18px; height: 18px; }
    .apt-intro-facts b { font-size: calc(21px * var(--ms-k-h3)); }
    .apt-intro-facts small { font-size: calc(11px * var(--ms-k-text)); }
    .apt-intro .apt-desc > p:first-child { font-size: calc(19px * var(--ms-k-text)); }
}

/* ---- Favourites: the heart on the apartments (category tiles, apartment page) and the visitor's details window ----- */
.fav { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--ms-glass-border); border-radius: 50%; background: var(--ms-glass-bg); color: #fff; cursor: pointer; -webkit-backdrop-filter: var(--ms-glass-blur); backdrop-filter: var(--ms-glass-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px rgba(0,0,0,.18); transition: transform var(--ms-speed) ease, background var(--ms-speed) ease, border-color var(--ms-speed) ease; }
.fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill var(--ms-speed) ease, transform var(--ms-speed) ease; }
.fav:hover { transform: scale(1.06); background: rgba(255,255,255,.22); }
.fav.is-on { background: var(--ms-gold); border-color: var(--ms-gold); }
.fav.is-on svg { fill: #fff; }
.fav.is-pop svg { animation: fav-pop .45s ease; }
.fav[disabled] { opacity: .6; cursor: wait; }
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-tile { position: absolute; top: 18px; right: 18px; z-index: 4; }
.apd-hero-actions { display: flex; align-items: center; gap: 14px; }
.fav-hero { width: 48px; height: 48px; }
/* the window a visitor sees the first time (name + phone / e-mail) */
.fav-pop { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(var(--ms-shade-rgb), .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fav-pop.is-open { display: flex; }
body.fav-pop-on { overflow: hidden; }
.fav-pop-card { position: relative; width: min(440px, 100%); padding: 30px 30px 26px; background: var(--ms-card-bg); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow-hover); color: var(--ms-ink); }
.fav-pop-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; color: var(--ms-mut); cursor: pointer; }
.fav-pop-x:hover { background: var(--ms-cream); color: var(--ms-ink); }
.fav-pop h3 { margin: 0 0 8px; padding-right: 30px; font-size: calc(26px * var(--ms-k-h3)); line-height: 1.15; color: var(--ms-ink); }
.fav-pop-text { margin: 0 0 18px; font-size: calc(15px * var(--ms-k-text)); line-height: calc(1.6 * var(--ms-k-lh)); color: var(--ms-text); }
.fav-pop-form label { display: block; margin: 0 0 12px; }
.fav-pop-form label span { display: block; margin: 0 0 5px; font-size: calc(12.5px * var(--ms-k-text)); letter-spacing: .06em; text-transform: uppercase; color: var(--ms-mut); }
.fav-pop-form input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px !important; margin: 0; font: inherit; font-size: calc(15px * var(--ms-k-text)); color: var(--ms-ink); background: #fff; border: 1px solid var(--ms-line-d); border-radius: calc(var(--ms-card-radius) * .5); }
.fav-pop-form input:focus { outline: 0; border-color: var(--ms-green); box-shadow: 0 0 0 3px rgba(var(--ms-green-rgb), .12); }
.fav-pop-err { margin: 0 0 12px; font-size: calc(13.5px * var(--ms-k-text)); color: #b91c1c; }
.fav-pop-form .apt-btn { display: inline-block; margin-top: 4px; }
.fav-pop-signin { display: inline-block; margin-top: 16px; font-size: calc(13.5px * var(--ms-k-text)); color: var(--ms-green); text-decoration: underline; text-underline-offset: 3px; }
/* the account's favourites page */
.acct-favs { display: grid; gap: 18px; }
.acct-fav { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; background: var(--ms-card-bg); border: 1px solid var(--ms-card-border); border-radius: var(--ms-card-radius); box-shadow: var(--ms-card-shadow); }
.acct-fav-pic { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--ms-card-radius) * .7); background: var(--ms-shade) center / cover no-repeat; }
.acct-fav-cat { display: block; margin: 0 0 4px; font-size: calc(12px * var(--ms-k-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-gold); }
.acct-fav h3 { margin: 0 0 6px; font-size: calc(22px * var(--ms-k-h4)); line-height: 1.2; }
.acct-fav h3 a { color: var(--ms-ink); text-decoration: none; }
.acct-fav-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px !important; font-size: calc(14px * var(--ms-k-text)); color: var(--ms-mut); }
.acct-fav-meta b { color: var(--ms-green); }
.acct-fav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.acct-fav-actions form { margin: 0; }
@media (max-width: 700px) { .acct-fav { grid-template-columns: 1fr; gap: 12px; } .fav-tile { top: 12px; right: 12px; } .fav-pop-card { padding: 24px 20px 20px; } }

/* ---- Pictures that fill a frame. The theme's phone stylesheet gives every picture in the page content "height: auto"
   through an ID selector, which beat these frames: the picture covered only the top of its frame and a grey block showed
   under it (offers, About timeline, blog cards, related apartments). Their own heights win again. */
.bl-feat-ph img, .bl-acc-p img, .bl-cta-im img, .bl-card-ph img, .bl-post-cover img, .rel-pic img, .cms-intro__pic img,
.cms-journey__pic img, .cms-offer__pic img, .cfe-gal-track img, .cms-gallery-item.is-video .cms-gallery-media img { height: 100% !important; }
.cms-sec__card img { height: 240px !important; }
.cms-intro__sig img { height: 56px !important; }
.cfe-tab img { height: 48px !important; }
.cfe-modal-head img { height: 56px !important; }
@media (max-width: 640px) { .cfe-modal-head img { height: 44px !important; } }

/* home slider heading: the theme's 110px only below a laptop's width; it filled the whole hero on phones */
@media (max-width: 1024px) {
    /* every slide the same: the theme's h2 size would leave the later slides at 28px */
    .slideshow__slide .slideshow__slide-caption-title { font-size: calc(clamp(38px, 11vw, 110px) * var(--ms-k-h1)); line-height: 1.08; }
}

/* phones: the weather chip, Top and Book buttons sat on the booking form's calendar and fields */
@media (max-width: 767px) {
    body.in-booking .cms-bookdrawer-tab { opacity: 0 !important; visibility: hidden; pointer-events: none; }
}

/* ---- Phones: the sections that left an empty strip on the right are centred: the openings of the pages, short headings
   with their small heading and button, short texts, button rows and chips. Long texts (descriptions, answers, stories),
   lists, forms and the footer keep their alignment. */
@media (max-width: 767px) {
    /* the theme's parallax moved some pictures (the café's "Our philosophy") down over the text under them */
    .elementor-widget.stellar { transform: none !important; }

    /* home slider */
    .slideshow__slide-caption-text .title_align_left { text-align: center; }
    .title_align_left .slideshow__slide-caption-title, .title_align_left .slideshow__slide-desc { float: none; display: block; margin-left: auto; margin-right: auto; text-align: center; }

    /* "Our apartments" title and its button */
    .cms-grid-head { flex-direction: column; justify-content: center; text-align: center; }

    /* picture carousel: title, text, places, button */
    .cms-fan__body { text-align: center; }
    .cms-fan__chips, .cms-fan__acts { justify-content: center; }

    /* About: the years of the journey */
    .cms-journey__row { text-align: center; }
    .cms-journey__body h3::before { margin-left: auto; margin-right: auto; }
    .cms-journey__body p { margin-left: auto; margin-right: auto; }
    .cms-journey__pic { width: 100%; margin: 0 auto; }

    /* café: event packages title */
    .cms-cfe__head { align-items: center; text-align: center; }
    .cms-cfe__head p { margin-left: auto; margin-right: auto; }

    /* contact page opening: the address and phone with their icon above them */
    .cms-ct-info { text-align: center; }
    .cms-ct-lead { margin-left: auto; margin-right: auto; }
    .cms-ct-facts li { flex-direction: column; justify-content: center; gap: 8px; }
    .cms-ct-chips { justify-content: center; }

    /* testimonials page: the filters; one card per row is as tall as its own review (not as the longest one) */
    .rvp-filters { justify-content: center; }
    .vr-head { flex-direction: column; align-items: center; text-align: center; }

    /* category, apartment and offer openings */
    .cat-hero-in, .apd-hero-in, .pkg-hero-in { text-align: center; }
    .cat-hero .apt-chips, .apd-hero-actions { justify-content: center; }
    .apt-intro-side { text-align: center; }
    .apt-intro-facts li { align-items: center; text-align: center; padding: 12px 6px; }
    .apt-intro-facts b { font-size: calc(clamp(16px, 4.6vw, 21px) * var(--ms-k-h3)); }

    /* reviews on the apartment page: title, score and button */
    .rv-head { flex-direction: column; align-items: center; text-align: center; }
    .rv-head-side { justify-content: center; }

    /* sign in / create account */
    .co-narrow .co-head { text-align: center; }
}
@media (max-width: 640px) { .rvp-grid { grid-auto-rows: auto; } }

/* ---- checkout: extra mattress for guests beyond the included occupancy (slides in, glows, can be removed) ---- */
.co-pricebox { display: grid; gap: 16px; }
.co-bed { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; padding: 16px; border-radius: 16px; overflow: hidden; animation: co-bed-in .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.co-bed.is-on { background: linear-gradient(135deg, #fff8e8, #fdf0d2); border: 1.5px solid rgba(var(--ms-gold-rgb), .55); box-shadow: 0 10px 28px rgba(var(--ms-gold-rgb), .18); }
.co-bed.is-on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: co-bed-shine 2.6s ease-in-out .6s 2; pointer-events: none; }
.co-bed.is-off { background: #f6f3ec; border: 1.5px dashed var(--ms-line-d, #d8d0c0); }
.co-bed-ico { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ms-gold); color: #fff; }
.co-bed.is-off .co-bed-ico { background: #e7e1d4; color: var(--ms-mut); }
.co-bed-ico svg { width: 26px; height: 26px; }
.co-bed-ico b { position: absolute; top: -7px; right: -9px; min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--ms-green); color: #fff; font-size: 11.5px; line-height: 16px; text-align: center; animation: co-bed-pop .5s ease-out .5s both; }
.co-bed-txt strong { display: block; margin-bottom: 2px; font-size: calc(15.5px * var(--ms-k-text)); color: var(--ms-ink); }
.co-bed-txt p { margin: 0; font-size: calc(13.5px * var(--ms-k-text)); line-height: 1.5; color: var(--ms-mut); }
.co-bed-btn { grid-column: 1 / -1; justify-self: start; padding: 9px 16px; border: 1.5px solid var(--ms-ink); border-radius: 999px; background: #fff; color: var(--ms-ink); font: 600 13px var(--ms-font-body); cursor: pointer; transition: background .2s, color .2s; }
.co-bed-btn:hover { background: var(--ms-ink); color: #fff; }
.co-bed.is-off .co-bed-btn { border-color: var(--ms-green); color: var(--ms-green); }
.co-bed.is-off .co-bed-btn:hover { background: var(--ms-green); color: #fff; }
.co-bed-btn:disabled { opacity: .6; cursor: wait; }
.co-price li.co-bedline { margin: 0 -10px; padding: 8px 10px; border-radius: 10px; animation: co-bed-glow 2.4s ease-in-out .3s 2; }
.co-price li.co-bedline b { color: #9a6b12; }
.co-total.is-changed strong { display: inline-block; animation: co-total-bump .8s ease-out; }
@keyframes co-bed-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes co-bed-shine { to { transform: translateX(100%); } }
@keyframes co-bed-pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes co-bed-glow { 0%, 100% { background: transparent; } 40% { background: rgba(var(--ms-gold-rgb), .22); } }
@keyframes co-total-bump { 0% { transform: scale(1); color: inherit; } 35% { transform: scale(1.12); color: var(--ms-gold); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .co-bed, .co-bed::after, .co-bed-ico b, .co-price li.co-bedline, .co-total.is-changed strong { animation: none; } }
.co-change { margin: 6px 0 0; font-size: calc(14px * var(--ms-k-text)); }
.co-change a { color: var(--ms-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- checkout, design A: payment tiles with the amount due now; the boarding pass (with the price) on the right ---- */
.co-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.co-left, .co-right { display: grid; gap: 18px; align-content: start; }
.co-left > .co-card, .co-right > * { margin: 0; }
.co-card { border-radius: 20px; }
.co .co-card h2 { font: 400 22px/1.2 var(--ms-font-head); }
.co-tile { border: 1.5px solid var(--ms-line); border-radius: 14px; margin: 0 0 10px; background: #fff; }
.co-tile .co-method-head { gap: 12px; padding: 14px 16px; }
.co-tile-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--ms-cream); color: var(--ms-green); transition: background .2s, color .2s; }
.co-tile-ico svg { width: 22px; height: 22px; }
.co-tile .co-method-name strong { font-size: calc(15px * var(--ms-k-text)); }
.co-tile .co-method-name small { font-size: calc(13px * var(--ms-k-text)); color: var(--ms-mut); line-height: 1.4; }
.co-tile-amt { flex: none; display: grid; justify-items: end; text-align: right; }
.co-tile-amt b { font: 500 20px/1.1 var(--ms-font-head); color: var(--ms-green); white-space: nowrap; }
.co-tile-amt small { font-size: 11.5px; color: var(--ms-mut); white-space: nowrap; }
.co-tile .co-method-body { padding: 0 16px 16px 70px; font-size: calc(14px * var(--ms-k-text)); }
.co-tile .co-badge { display: inline-block; margin: 0 0 8px; }
.co-tile:has(input:checked) { border-color: var(--ms-green); background: #fff; box-shadow: 0 0 0 3px rgba(var(--ms-green-rgb), .12); }
.co-tile input:checked ~ .co-method-head .co-tile-ico { background: var(--ms-green); color: #fff; }
.co-tile input:checked ~ .co-method-head .co-radio { border-color: var(--ms-green); }
.co-tile input:checked ~ .co-method-head .co-radio::after { background: var(--ms-green); }
.co-policy .co-btn { margin-top: 16px; border-radius: 12px; }
.co-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 12px 0 0; font-size: 12.5px; color: var(--ms-mut); }
.co-trust span { display: inline-flex; align-items: center; gap: 6px; }
.co-trust svg { width: 15px; height: 15px; color: var(--ms-green); }
/* the pass */
.co-pass { overflow: hidden; border-radius: 20px; background: #fbf5ea; border: 1px solid var(--ms-line); }
.co-pass-top { padding: 18px 20px 14px; background: linear-gradient(135deg, var(--ms-green), #0b5c55); color: #fff; }
.co-pass-top small { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.co-pass-top b { display: block; margin-top: 2px; font: 400 21px/1.2 var(--ms-font-head); }
.co-pass-route { display: flex; align-items: center; gap: 8px; padding: 16px 20px 8px; }
.co-pass-route > div { display: grid; }
.co-pass-route .co-pass-r { text-align: right; }
.co-pass-route small, .co-pass-facts small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-mut); }
.co-pass-route strong { font: 500 21px/1.15 var(--ms-font-head); color: var(--ms-ink); }
.co-pass-route span { font-size: 12.5px; color: var(--ms-mut); }
.co-pass-route i { flex: 1; margin: 0 4px; border-top: 2px dashed var(--ms-gold); }
.co-pass-facts { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; padding: 6px 20px 16px; }
.co-pass-facts > div { display: grid; min-width: 0; }
.co-pass-facts b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-pass-tear { position: relative; margin: 0 14px; border-top: 2px dashed var(--ms-line); }
.co-pass-tear::before, .co-pass-tear::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.co-pass-tear::before { left: -26px; } .co-pass-tear::after { right: -26px; }
.co-pass .co-pricebox { padding: 6px 20px 4px; }
.co-pass .co-price { padding: 8px 0 0; background: none; border: 0; border-radius: 0; }
.co-pass .co-price h2 { display: none; }
.co-pass .co-price li { padding: 5px 0; font-size: calc(14px * var(--ms-k-text)); }
.co-pass .co-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ms-line); }
.co-pass .co-total strong { font: 500 32px/1 var(--ms-font-head); color: var(--ms-green); }
.co-pass .co-note { margin: 8px 0 0; font-size: 12px; }
.co-pass .co-alert-ok { margin: 10px 0 4px; border-radius: 12px; }
.co-pass .co-bed { margin: 10px 0 4px; }
.co-pass .co-ref-line { margin: 0; padding: 4px 20px 16px; font-size: 12.5px; }
.co-details .co-kv { grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 6px 14px; font-size: calc(14px * var(--ms-k-text)); }
.co-details .co-change { margin: 12px 0 0; }
.co-right .co-alert { margin: 0; border-radius: 14px; }
@media (max-width: 900px) {
    .co-grid { grid-template-columns: 1fr; }
    .co-right { order: -1; }
    .co-tile .co-method-body { padding-left: 16px; }
    .co-tile-amt b { font-size: 17px; }
}
.co-pass .co-pricebox > * { margin-top: 0; }
.co-pass .co-price { margin: 0; }
.co-pass .co-alert-ok { padding: 9px 12px; font-size: calc(13.5px * var(--ms-k-text)); }
.co-pass .co-price ul { margin: 4px 0 0 !important; padding: 0 !important; }
.co-pass .co-split { margin: 10px 0 4px; padding-top: 10px; }
.co-confirm-error[hidden] { display: none !important; }
@media (max-width: 900px) {
    /* phones: the pass, then how to pay and the button, then the guest's details */
    .co-grid { display: flex; flex-direction: column; gap: 18px; }
    .co-left, .co-right { display: contents; }
    .co-pass { order: 1; } .co-right > .co-alert { order: 2; } .co-pay { order: 3; } .co-policy { order: 4; } .co-details { order: 5; } .co-right > .co-hold { order: 6; }
    .co-tile .co-method-head { flex-wrap: wrap; row-gap: 6px; }
    .co-tile-ico { display: none; }
    .co-tile .co-method-name { flex: 1; min-width: 0; }
    .co-tile-amt { flex-basis: 100%; display: flex; align-items: baseline; gap: 8px; justify-content: flex-start; padding-left: 36px; text-align: left; }
    .co-tile .co-method-body { padding: 0 16px 16px; }
}
/* guest details on the checkout: one line per label */
.co-details .co-kv { grid-template-columns: max-content minmax(0, 1fr); }
.co-details .co-kv dt { white-space: nowrap; }
/* the account made on confirm */
.co-newacct { border: 1.5px solid var(--ms-green); background: linear-gradient(160deg, #f3f8f5, #fff); }
.co-creds { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px dashed var(--ms-line-d); }
.co-creds dt { color: var(--ms-mut); }
.co-creds dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-creds code { font: 600 16px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: var(--ms-cream); }
.co-copy { padding: 3px 10px; border: 1px solid var(--ms-line-d); border-radius: 999px; background: #fff; font: 600 12px var(--ms-font-body); cursor: pointer; }
.co-small { font-size: 12.5px; }

/* the expired checkout: the message beside the guest's boarding pass, faded and stamped */
.co-expired { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 40px; align-items: center; padding: 34px; background: #fff; border: 1px solid var(--ms-line); border-radius: 22px; }
.co-expired.is-solo { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; text-align: center; }
.co-expired.is-solo .co-exp-actions { justify-content: center; }
.co-exp-kick { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: #fdeae5; color: #b4432f; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.co-expired h1 { margin: 0; font: 400 calc(36px * var(--ms-k-h1)) / 1.15 var(--ms-font-head); color: var(--ms-ink); }
.co-exp-lead { margin: 10px 0 0; color: var(--ms-text); max-width: 52ch; }
.co-expired.is-solo .co-exp-lead { margin-left: auto; margin-right: auto; }
.co-exp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.co-exp-actions .co-btn { margin: 0; border-radius: 12px; }
.co-btn-ghost { background: transparent !important; color: var(--ms-green) !important; box-shadow: inset 0 0 0 1.5px var(--ms-green); }
.co-btn-ghost:hover { background: rgba(var(--ms-green-rgb), .06) !important; }
.co-exp-saved { margin: 14px 0 0; font-size: 13px; color: var(--ms-mut); }
.co-pass--expired { position: relative; filter: grayscale(.55); opacity: .92; }
.co-exp-stamp { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%) rotate(-14deg); padding: 6px 16px; border: 3px solid #b4432f; border-radius: 10px; background: rgba(255, 255, 255, .65); color: #b4432f; font: 700 22px var(--ms-font-body); letter-spacing: .22em; animation: co-stamp .5s cubic-bezier(.2, .9, .3, 1.3) both .25s; }
@keyframes co-stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(1.8); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .co-exp-stamp { animation: none; } }
@media (max-width: 900px) {
    .co-expired { grid-template-columns: 1fr; gap: 24px; padding: 22px 18px; }
    .co-pass--expired { order: -1; }
}
html body .co .co-exp-actions a.co-btn-ghost { background: transparent !important; background-color: transparent !important; color: var(--ms-green) !important; border: 1.5px solid var(--ms-green) !important; box-shadow: none; }
html body .co .co-exp-actions a.co-btn-ghost:hover { background-color: rgba(var(--ms-green-rgb), .07) !important; }
/* the payment slip check (js/site-slip.js) */
.co-ocr { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: calc(13.5px * var(--ms-k-text)); line-height: 1.45; }
.co-ocr[hidden] { display: none; }
.co-ocr.is-reading { background: var(--ms-cream); color: var(--ms-text); }
.co-ocr.is-reading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid var(--ms-gold); border-top-color: transparent; border-radius: 50%; animation: co-spin .8s linear infinite; }
.co-ocr.is-ok { background: #e8f4ee; color: var(--ms-green); font-weight: 600; }
.co-ocr.is-bad { background: #fdeae5; color: #a33a26; }
.co-ocr.is-warn { background: #fff3d9; color: #8a5d12; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.co-policy .co-confirm-error { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdeae5; color: #a33a26; font-weight: 600; }
.co-policy .co-confirm-error[hidden] { display: none !important; }
.co-ocr { white-space: pre-line; }
.co-ocr.is-ok { font-weight: 400; }
.co-ocr.is-ok::first-line { font-weight: 700; }

/* ---- booking done (design B): what happens next, the account, the invoice; a confetti burst once ---- */
.co-done2 { position: relative; }
.co-done2-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; align-items: start; padding: 34px; background: #fff; border: 1px solid var(--ms-line); border-radius: 22px; }
.co-done2-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 30px; box-shadow: 0 0 0 8px rgba(31, 157, 85, .15); animation: co-pop .6s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes co-pop { from { transform: scale(.3); opacity: 0; } }
.co-done2 h1 { margin: 14px 0 0; font: 400 calc(36px * var(--ms-k-h1)) / 1.15 var(--ms-font-head); color: var(--ms-ink); }
.co-done2-num { margin: 6px 0 0; color: var(--ms-mut); }
.co-done2 code { font: 600 15px ui-monospace, Consolas, monospace; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: var(--ms-cream); color: var(--ms-ink); }
.co .co-steps { list-style: none; margin: 22px 0 0 !important; padding: 0 !important; display: grid; }
.co .co-steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; margin: 0; padding: 0 0 18px; }
.co .co-steps li::before { content: ""; position: absolute; left: 16px; top: 32px; bottom: 0; width: 2px; background: var(--ms-line); }
.co .co-steps li:last-child::before { display: none; }
.co-steps em { z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ms-cream); color: var(--ms-mut); font-style: normal; font-weight: 700; }
.co-steps li.is-done em { background: #1f9d55; color: #fff; }
.co-steps li.is-done::before { background: #1f9d55; }
.co-steps li.is-now em { background: #fff3d9; color: #8a5d12; }
.co-steps b { display: block; font-size: calc(15.5px * var(--ms-k-text)); color: var(--ms-ink); }
.co-steps small { display: block; color: var(--ms-mut); font-size: calc(13.5px * var(--ms-k-text)); }
.co-pending { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: #fff3d9; color: #8a5d12; font-size: 12px; font-weight: 700; }
.co-pending::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: co-blink 1.4s ease-in-out infinite; }
@keyframes co-blink { 50% { opacity: .25; } }
.co-done2-side { display: grid; gap: 14px; }
.co-done2-box { padding: 18px; border: 1px solid var(--ms-line); border-radius: 16px; background: #fff; }
.co-done2-box h2 { margin: 0 0 8px; font: 400 20px var(--ms-font-head); color: var(--ms-ink); }
.co-done2-box .co-btn { margin: 6px 0 0; border-radius: 12px; }
.co-done2-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.co-done2-btns .co-btn { margin: 0; }
html body .co .co-done2-btns a.co-btn-ghost { background: transparent !important; background-color: transparent !important; color: var(--ms-green) !important; border: 1.5px solid var(--ms-green) !important; }
.co-creds dd span { display: grid; }
.co-creds dd small { font-weight: 400; color: var(--ms-mut); font-size: 12px; }
.co-done2 .co-back { display: inline-block; font-size: 13.5px; color: var(--ms-mut); }
.co-confetti { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.co-confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: co-fall 2.8s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes co-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .co-done2-tick, .co-pending::before { animation: none; } }
@media (max-width: 900px) { .co-done2-grid { grid-template-columns: 1fr; padding: 22px 18px; } }
.co-done2 code { display: inline-block; width: auto; margin: 0; white-space: nowrap; }
.co-done2 .co-done2-num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-done2 .co-creds { overflow: visible; }

/* the guest's sign-in on the done page: a pass-style "account key" (login = phone, password = CNIC without dashes) */
.co-key { position: relative; margin: 14px 0 12px; border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--ms-green, #01433f), #17695e); }
.co-key header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: rgba(0, 0, 0, .18); font: 500 12.5px var(--ms-font-head); letter-spacing: .18em; text-transform: uppercase; }
.co-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 16px; }
.co-key-row + .co-key-row { border-top: 1.5px dashed rgba(255, 255, 255, .3); }
.co-key-row small { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #bfe3dc; }
.co-key-row b { display: block; font: 600 calc(25px * var(--ms-k-text, 1)) / 1.2 var(--ms-font-head); letter-spacing: .07em; overflow-wrap: anywhere; color: #fff; }
.co-key-row i { display: block; font-style: normal; font-size: 12.5px; color: #cfe7e2; }
.co-key .co-copy { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.co-key .co-copy.is-ok { background: #2f9e8c; border-color: #2f9e8c; }
.co-key::before, .co-key::after { content: ""; position: absolute; top: calc(50% + 19px); width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translateY(-50%); }
.co-key::before { left: -10px; } .co-key::after { right: -10px; }
.co-newacct .co-key::before, .co-newacct .co-key::after { background: #f6faf8; }
.co-done2-box .co-btn-full { display: flex; justify-content: center; width: 100%; }
.co-keynote { margin: 10px 0 0; font-size: 12.5px; color: var(--ms-mut); }

/* offer / package page, option A: the price card asks the dates and group and lists the offer apartments (two to a row) */
.pkg-find { display: grid; gap: 12px; margin-top: 6px; }
.pkg-find-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.pkg-f input[type=date] { -webkit-appearance: none; appearance: none; height: 44px; }
/* the package and café date boxes open the calendar from anywhere on the box, like the booking form */
.pkg-f input[type=date], .cfe-f input[type=date] { position: relative; cursor: pointer; }
.pkg-f input[type=date]::-webkit-calendar-picker-indicator, .cfe-f input[type=date]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.pkg-f input[type=date]::-webkit-date-and-time-value, .cfe-f input[type=date]::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
.pkg-f { display: grid; gap: 4px; margin: 0; }
.pkg-f span { font-size: calc(11.5px * var(--ms-k-text)); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-ink); }
.pkg-f input, .pkg-f select { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--ms-line); border-radius: 8px; background: #fff; color: var(--ms-ink); font: inherit; font-size: 15px; box-sizing: border-box; }
.pkg-f input:disabled { background: #f3efe6; color: var(--ms-mut); font-size: 14px; padding-left: 9px; padding-right: 6px; }
.pkg-f small { color: var(--ms-mut); font-size: 12px; }
.pkg-find .pkg-btn { margin: 0; background: var(--ms-green); border-color: var(--ms-green); }
.pkg-find .pkg-btn:hover { background: var(--ms-green-deep, var(--ms-green)); border-color: var(--ms-green-deep, var(--ms-green)); }
.pkg-find .pkg-btn:disabled { opacity: .7; }
.pkg-find-msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--ms-line); font-size: 14px; color: var(--ms-ink); }
.pkg-find-msg[hidden] { display: none; }
.pkg-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pkg-res:empty { display: none; }
.pkg-mini { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ms-line); border-radius: 12px; background: #fff; }
.pkg-mini-img { position: relative; display: block; aspect-ratio: 4 / 3; background: #e7e2d8 center / cover no-repeat; }
.pkg-mini-off { position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--ms-gold); color: #fff; font-size: 11.5px; font-weight: 700; }
.pkg-mini-b { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 5px; padding: 9px 10px 11px; }
.pkg-mini-b strong { font-size: calc(13.5px * var(--ms-k-text)); line-height: 1.25; }
.pkg-mini-ok { padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 11.5px; font-weight: 600; }
.pkg-mini-pr { font-size: 13px; } .pkg-mini-pr s { color: var(--ms-mut); } .pkg-mini-pr b { font-size: 15px; }
.pkg-mini-go { margin-top: auto; display: block; width: 100%; padding: 9px 6px; border-radius: 8px; background: var(--ms-green); color: #fff !important; text-align: center; text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-sizing: border-box; }
.pkg-mini-go:hover { filter: brightness(1.1); }
.pkg-mini-pr b { display: block; }
.pkg-mini-go { padding: 9px 4px; font-size: 10.5px; letter-spacing: .03em; white-space: normal; line-height: 1.25; }
/* the Instagram reels section with no reel yet: left out (no empty gap) */
.cms-sec.cms-sec--instagram_reels:not(:has(.ig-sec)) { display: none; }
/* apartment page gallery: a video cell (play sign) and the video in the lightbox */
.apd-gallery-cell.is-video { position: relative; display: block; }
.apd-gallery-cell.is-video video { display: block; height: clamp(260px, 42vw, 560px); width: auto; max-width: 92vw; object-fit: cover; background: #000; }
.apd-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); pointer-events: none; }
.apd-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.apd-lb-video { width: min(90vw, 1100px); }
.apd-lb-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.apd-lb-video video { display: block; width: 100%; max-height: 86vh; background: #000; }
.apd-lightbox img[hidden], .apd-lb-video[hidden] { display: none; }
/* attic package carousel: a video slide (its picture + play button; plays in place when tapped) */
.cfe-gal-track .cfe-vslide { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .5s ease; background: #111; pointer-events: none; }
.cfe-gal-track .cfe-vslide.is-on { opacity: 1; pointer-events: auto; }
.cfe-gal-track .cfe-vslide img { opacity: 1; }
.cfe-vplay { position: absolute; left: 50%; top: 50%; z-index: 2; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); cursor: pointer; }
.cfe-vplay svg { width: 30px; height: 30px; margin-left: 4px; fill: #fff; }
.cfe-vslide.is-playing .cfe-vplay, .cfe-vslide.is-playing img { display: none; }
.cfe-vplayer { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }

/* Back-to-top (the theme's #toTop): a 44px round button level with the weather chip on the other side, in the website's
   button colour (Design & typography): lighter with a thin gold ring at rest, full on hover. The theme still shows it after scrolling. */
#toTop { right: 18px !important; bottom: 18px !important; width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important;
    display: flex !important; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--fb-bg, var(--ms-btn-bg, #01433f)) var(--fb-rest, 70%), transparent) !important; color: var(--fb-fg, var(--ms-btn-fg, #fff)) !important;
    box-shadow: 0 0 0 var(--fb-ring-w, 1.5px) var(--fb-ring, var(--ms-gold, #bc9459)), var(--fb-shadow, 0 6px 16px rgba(0, 0, 0, .12));
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 899 !important;
    transition: opacity .3s, background-color .2s, color .2s, box-shadow .2s !important; }
#toTop span { display: block; margin: 0; font-size: 15px; font-weight: 700; color: inherit; line-height: 1; }
#toTop span::before { display: block; line-height: 1; }
#toTop:hover, #toTop:focus-visible { background: var(--fb-bg, var(--ms-btn-bg, #01433f)) !important; color: var(--fb-fg, var(--ms-btn-fg, #fff)) !important; box-shadow: 0 0 0 var(--fb-ring-w, 1.5px) var(--fb-ring, var(--ms-gold, #bc9459)), var(--fb-shadow-h, 0 10px 26px rgba(0, 0, 0, .25)); }
/* W1: a pill with the arrow and a short word ("Top"), the same height as the weather pill */
#toTop { width: auto !important; height: 46px !important; gap: 7px; padding: 0 18px 0 14px !important; border-radius: var(--fb-radius, 999px) !important;
    font: 600 13.5px/1 var(--ms-font-body, Jost, sans-serif); text-decoration: none !important; }
#toTop svg { flex: none; width: 18px; height: 18px; }
#toTop .tt-label { color: inherit; font-size: inherit; font-weight: inherit; line-height: 1; }
#toTop:not(:has(.tt-label)) { width: 46px !important; padding: 0 !important; }
@media (max-width: 767px) {
    /* phones: no Top button, the bottom holds only "Book your stay" */
    #toTop { display: none !important; }
}

/* ---- Design & typography → Hero & overlays reaches every picture hero, not only the page heroes (.ph).
   Each hero keeps its own shading shape; the colour is the overlay colour and the strength follows "Overlay darkness"
   (k = darkness / the original 60%, so the original settings look as before). Heading, second colour and text colour too. */
:root { --hx-k: calc(var(--ms-overlay-a, .6) / .6); --hx-rgb: var(--ms-overlay-rgb, 1,25,22); }
/* home slider (the theme's slideshow): black at 30% → the overlay colour at half the darkness */
.slideshow__slide-image::before { background: rgb(var(--hx-rgb)) !important; opacity: calc(.3 * var(--hx-k)) !important; }
.slideshow__slide-image::after { opacity: 0 !important; }
.slideshow__slide-caption-title { color: var(--ms-hero-title, #fff) !important; }
/* a word marked with the editor's italic button takes the second colour (upright); a word given its own colour keeps it */
.slideshow__slide-caption-title em, .slideshow__slide-caption-title i, .slideshow__slide-caption-title span:not([style*="color"]) { color: var(--ms-hero-accent, var(--ms-gold-l)) !important; }
.slideshow__slide-caption-title em, .slideshow__slide-caption-title i { font-style: normal; }
.slideshow__slide-desc, .slideshow__slide-desc p { color: var(--ms-hero-text, rgba(255,255,255,.88)) !important; }
/* apartment pages and package pages */
.apd-hero::before { background: linear-gradient(to top, rgba(var(--hx-rgb), calc(.78 * var(--hx-k))), rgba(var(--hx-rgb), calc(.15 * var(--hx-k))) 65%); }
.pkg-hero::before { background: linear-gradient(to top, rgba(var(--hx-rgb), calc(.78 * var(--hx-k))), rgba(var(--hx-rgb), calc(.2 * var(--hx-k)))); }
.apd-hero h1, .pkg-hero h1 { color: var(--ms-hero-title, #fff) !important; }
.apd-hero h1 em, .pkg-hero h1 em { color: var(--ms-hero-accent, var(--ms-gold-l)) !important; }
/* café page */
.cms-cafe-hero::before { background: linear-gradient(rgba(var(--hx-rgb), calc(.35 * var(--hx-k))), rgba(var(--hx-rgb), calc(.12 * var(--hx-k))) 35%, rgba(var(--hx-rgb), calc(.45 * var(--hx-k)))); }
.cms-cafe-hero h1 { color: var(--ms-hero-title, #fff) !important; }
.cms-cafe-hero h1 em { color: var(--ms-hero-accent, var(--ms-gold-l)) !important; }
.cms-cafe-hero p { color: var(--ms-hero-text, rgba(255,255,255,.92)) !important; }
/* gallery, explore and terms & FAQs */
.gl-hero-bg::after { background: linear-gradient(180deg, rgba(var(--hx-rgb), calc(.62 * var(--hx-k))) 0%, rgba(var(--hx-rgb), calc(.08 * var(--hx-k))) 32%, rgba(var(--hx-rgb), calc(.3 * var(--hx-k))) 62%, rgba(var(--hx-rgb), min(1, var(--hx-k))) 100%) !important; }
.ex-hero-bg::after { background: linear-gradient(180deg, rgba(var(--hx-rgb), calc(.5 * var(--hx-k))) 0%, rgba(var(--hx-rgb), calc(.12 * var(--hx-k))) 38%, rgba(var(--hx-rgb), calc(.85 * var(--hx-k))) 100%) !important; }
.pl-hero-bg::after { background: linear-gradient(180deg, rgba(var(--hx-rgb), calc(.62 * var(--hx-k))) 0%, rgba(var(--hx-rgb), calc(.35 * var(--hx-k))) 40%, rgba(var(--hx-rgb), min(.96, calc(.96 * var(--hx-k)))) 100%) !important; }
.gl-title h1, .ex-hero h1, .pl-hero h1 { color: var(--ms-hero-title, #fff) !important; }
.gl-title h1 em, .ex-hero h1 em, .pl-hero h1 em { color: var(--ms-hero-accent, var(--ms-gold-l)) !important; }
.ex-hero p { color: var(--ms-hero-text, rgba(255,255,255,.92)); }

/* Offer & Package: the heading above the offer cards (design P1, App\Services\PromoHeading) */
.cms-promo-sec { margin: 0 !important; padding: 0 !important; background: none !important; }
.cms-promo-head { max-width: 760px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) 20px clamp(28px, 4vw, 44px); text-align: center; }
.cms-promo-head__kicker { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 12px; font: 600 calc(12.5px * var(--ms-k-text, 1))/1.3 var(--ms-font-body, Jost, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--ms-gold, #bc9459); }
.cms-promo-head__kicker::before, .cms-promo-head__kicker::after { content: ""; width: 42px; height: 1px; background: currentColor; opacity: .8; }
.cms-promo-head__title { margin: 0 !important; font-family: var(--ms-font-head, Oswald, sans-serif); font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; color: var(--ms-ink, #1c2523); }
.cms-promo-head__lead { max-width: 580px; margin: 14px auto 0; font-size: calc(15.5px * var(--ms-k-text, 1)); line-height: 1.65; color: var(--ms-mut, #5f6864); }
@media (max-width: 600px) { .cms-promo-head__kicker::before, .cms-promo-head__kicker::after { width: 22px; } .cms-promo-head__kicker { gap: 10px; letter-spacing: .2em; } }
/* Finance → Payment methods: copy buttons in the account details, the QR code */
.co-method-details .co-copy { margin-left: 6px; padding: 1px 8px; font-size: 11px; vertical-align: middle; }
.co-method-details .co-copy.is-ok { background: #2f9e8c; border-color: #2f9e8c; color: #fff; }
.co-method-qr { display: block; width: 120px; height: 120px; margin-top: 10px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ms-line-d); background: #fff; }

/* Full-width bands from the first paint: until js/site-fullbleed.js measures the exact edges, the bands already reach
   the window edges (the boxed column is centred), so a fresh page never shows white strips at both sides. */
html { overflow-x: clip; }
:is(.cms-sec--banner, .cms-sec--hero_slider, .cms-sec--cafe_hero, .cms-sec--cafe_events, .cms-sec--cafe_menu, .cms-sec--blog_index, .cms-sec--explore_page, .cms-sec--policy_page, .cms-sec--gallery_page, .cms-sec--founder_block, .cms-sec--image_carousel, .cms-sec--page_hero, .cms-sec--intro_band, [data-fullbleed]) {
    width: 100vw; max-width: none; margin-left: calc(50% - 50vw);
}
/* the theme's own stretched sections (the home hero slider …): Elementor stretches them with a script once it has loaded
   (inline width + left); until then CSS already takes them to the window edges, so the first paint has no white sides */
.elementor-section.elementor-section-stretched { width: 100vw; max-width: none; left: calc(50% - 50vw); }

/* ---- an apartment's own offer (design OW1): a gold ribbon across the picture, the old price struck out ---- */
.cms-offer-ribbon { position: absolute; left: 0; top: 22px; z-index: 4; padding: 7px 16px 7px 14px; border-radius: 0 999px 999px 0; background: var(--ms-gold, #bc9459); color: #fff;
    font: 600 12px/1.2 var(--ms-font-body, Jost, sans-serif); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); pointer-events: none; }
.cms-offer-meta s { opacity: .75; margin: 0 4px; }
.cms-offer-meta b { font-weight: 700; }
.cms-offer-till { display: block; margin: 2px 0 6px; color: var(--ms-gold-l, #e6c48e); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
/* the booking card: the offer box opens on its own, with the note under the line */
.bk.has-apt-offer [data-bk-offer] [data-offer-sub] { color: #8a5a1f; }

/* an attic package's own offer on the Cafe page: the same gold ribbon as the apartments, "Offer till" under the price */
.cfe-gal { position: relative; }
.cfe-offer-till { display: block; margin-top: 2px; color: #8a5a1f; font-size: 13px; font-weight: 600; }

/* the footer's bottom line (design FB3): deep green, the copyright and only the legal pages in gold */
.footer_bar.cms-footbar { background: var(--ms-green-deep, #012b28) !important; border-top: 0 !important; }
.footer_bar.cms-footbar .footer_bar_wrapper { background: transparent !important; border: 0 !important; display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; }
.footer_bar.cms-footbar .footer_bar_wrapper > br.clear { display: none; }
.footer_bar.cms-footbar #copyright { background: transparent !important; padding: 0 !important; float: none !important; margin: 0 !important; color: rgba(255, 255, 255, .8) !important; font-size: 13.5px; }
.footer_bar.cms-footbar #copyright a.cms-dev-link { color: var(--ms-gold-l, #e6c48e) !important; }
.footer_bar.cms-footbar #copyright a.cms-dev-link:hover { color: #fff !important; }
.cms-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.cms-legal-links a { color: var(--ms-gold-l, #e6c48e) !important; font-size: 13.5px; font-weight: 500; text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.cms-legal-links a:hover { color: #fff !important; }
.cms-legal-links a.is-privacy::before { content: ""; display: inline-block; width: 12px; height: 13px; margin-right: 6px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 767px) {
    .footer_bar.cms-footbar .footer_bar_wrapper { flex-direction: column; text-align: center; }
    .cms-legal-links { justify-content: center; }
}
.cms-pp-body a.cms-pp-link { color: var(--ms-green, #01433f); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* a slim bar; only where the floating weather / Top buttons would sit over its ends does it get room under them */
.footer_bar.cms-footbar { padding-top: 0 !important; padding-bottom: 0 !important; }
.footer_bar.cms-footbar .footer_bar_wrapper { padding-top: 16px !important; padding-bottom: 16px !important; }
@media (max-width: 1240px) { .footer_bar.cms-footbar { padding-bottom: 58px !important; } }

/* Home testimonials with guest videos (design TM3): one gliding row on a cream band, a video card between the written reviews */
section.cms-rv-band.elementor-section:has(.rvm.is-mix) { background-color: #f6f2ea !important; background-image: none !important; }
.rvm.is-mix .rvm-pill { background: #fff; }
.rvm.is-mix .rvm-row { padding: 8px 0 16px; }
.rvm.is-mix .rvm-track { align-items: stretch; }
.rvm.is-mix .rvm-card { flex-basis: 330px; height: 340px; background: #fff; }
.rvm.is-mix .rvm-card:hover { box-shadow: var(--ms-card-shadow-hover); }
.rvm.is-mix .rvm-card p { max-height: none; -webkit-line-clamp: 8; }
.rvm-video { position: relative; flex: 0 0 230px; height: 340px; margin-right: 18px; padding: 0; overflow: hidden; border: 0; border-radius: var(--ms-card-radius); background: var(--ms-green-deep); cursor: pointer; box-shadow: 0 14px 30px rgba(1, 25, 22, .16); transition: transform .3s, box-shadow .3s; }
.rvm-video:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(1, 25, 22, .24); }
.rvm-video .rvm-poster { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }
.rvm-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(var(--ms-shade-rgb), .88)); }
.rvm-vtag { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; }
.rvm-play { position: absolute; z-index: 2; left: 50%; top: 44%; display: grid; place-items: center; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ms-green); transition: transform .3s, background .3s; }
.rvm-play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.rvm-video:hover .rvm-play { transform: translate(-50%, -50%) scale(1.08); background: var(--ms-gold); color: #fff; }
.rvm-vcap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; text-align: left; }
.rvm-vstars { display: block; color: #f2b01e; letter-spacing: 2px; font-size: 14px; }
.rvm-vcap strong { display: block; margin-top: 3px; font: 400 calc(19px * var(--ms-k-text)) / 1.2 var(--ms-font-head); color: #fff; }
.rvm-vcap small { display: block; font-size: calc(12.5px * var(--ms-k-text)); opacity: .85; }
@media (max-width: 767px) {
    .rvm-video { flex-basis: 200px; height: 300px; }
    .rvm.is-mix .rvm-card { flex-basis: 280px; height: 300px; }
}
/* the "Testimonials" heading above it: cream from edge to edge (its section is only as wide as the page column) */
section.elementor-top-section:has(+ section.cms-rv-band .rvm.is-mix) { background-color: #f6f2ea !important; background-image: none !important; box-shadow: 0 0 0 100vmax #f6f2ea; clip-path: inset(0 -100vmax);
    margin-top: 0 !important; padding-top: var(--cms-sec-space) !important; }
/* no white gap between the heading and the cream band (the spacing moves inside the cream) */
section.elementor-top-section:has(+ section.cms-rv-band .rvm.is-mix) { margin-bottom: 0 !important; padding-bottom: 40px !important; }
section.cms-rv-band.elementor-section:has(.rvm.is-mix) { margin-top: 0 !important; padding-bottom: 50px !important; }

/* Phones leave an empty date box blank: the word from Form texts stands there until a date is picked (:invalid = required and empty).
   With a mouse the browser shows its own dd/mm/yyyy, so the word stays away. */
.ms-date { position: relative; display: block; font-style: normal; }
.ms-date em { display: none; }
@media (pointer: coarse) {
    .ms-date input:invalid { color: transparent; }
    .ms-date input:invalid + em { position: absolute; inset: 0 40px 0 13px; display: flex; align-items: center; font-style: normal; font-weight: 400; color: var(--ms-mut, #6b7280); pointer-events: none; }
}

/* Phones (PD1): each account detail a clean row with Copy on the right, then the screenshot box, then the long text, smaller */
@media (max-width: 767px) {
    .co-tile input:checked ~ .co-method-body { display: flex; flex-direction: column; }
    .co-tile .co-badge { order: 1; align-self: flex-start; }
    .co-tile .co-method-details { order: 2; display: block; padding: 2px 12px; }
    .co-tile .co-method-qr { order: 3; }
    .co-tile .co-proof { order: 4; margin-top: 12px; padding: 12px; }
    .co-tile .co-method-text { order: 5; margin-top: 12px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--ms-mut); }
    .co-method-details span { position: relative; display: block; padding: 9px 58px 9px 0; border-bottom: 1px solid var(--ms-line); }
    .co-method-details span:last-child { border-bottom: 0; }
    .co-method-details em { display: block; font-size: 12px; font-weight: 400; line-height: 1.3; }
    .co-method-details b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
    .co-method-details .co-copy { position: absolute; right: 0; top: 50%; margin: 0; padding: 4px 10px; font-size: 12px; transform: translateY(-50%); }
    .co-tile .co-proof .co-proof-hint { font-size: 12px; font-weight: 400; }
    /* the card hides its radio button with this same rule, which must not reach the file box */
    .co-tile .co-proof input[type=file] { position: static; width: 100%; opacity: 1; pointer-events: auto; }
}